From 59a85df75f18b231517a9192bc53aa567c69aba3 Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Mon, 14 Mar 2022 16:38:39 +0300 Subject: [PATCH] Add initial state of autocomplete select documentation --- docs/en/UI/AspNetCore/AutoComplete-Select.md | 43 ++++++++++++++++++ docs/en/images/abp-select2-multiple.png | Bin 0 -> 5591 bytes docs/en/images/abp-select2-single.png | Bin 0 -> 3896 bytes .../Volo.CmsKit.Web.Unified/appsettings.json | 2 +- .../Tags/Components/TagEditor/Default.cshtml | 30 +++++++----- .../Tags/Components/TagEditor/default.js | 15 ++++++ 6 files changed, 77 insertions(+), 13 deletions(-) create mode 100644 docs/en/UI/AspNetCore/AutoComplete-Select.md create mode 100644 docs/en/images/abp-select2-multiple.png create mode 100644 docs/en/images/abp-select2-single.png diff --git a/docs/en/UI/AspNetCore/AutoComplete-Select.md b/docs/en/UI/AspNetCore/AutoComplete-Select.md new file mode 100644 index 0000000000..1a4705627d --- /dev/null +++ b/docs/en/UI/AspNetCore/AutoComplete-Select.md @@ -0,0 +1,43 @@ +# ASP.NET Core MVC / Razor Pages: Auto-Complete Select +A simple select component sometimes isn't useful with huge amount of data. ABP Provides a select implementation that works with pagination and server-side search via using [Select2](https://select2.org/). It works with single or multiple choices well. + +A screenshot can be shown below. + +| Single | Multiple | +| --- | --- | +| ![autocomplete-select-example](../../images/abp-select2-single.png) |![autocomplete-select-example](../../images/abp-select2-multiple.png) | + +## Getting Started + +This is a core feature and it's used by ABP Framework. There is no custom installation or additional package required. + +## Usage + +A simple is usage is presented below. The select must have `auto-complete-select` class and following attributes: + +- `data-autocomplete-api-url`: * API Endpoint url to get select items. **GET** request will be sent to this url. +- `data-autocomplete-display-property`: * Property name to display. _(For example: `name` ot `title`. Property name of entity/dto.)_. +- `data-autocomplete-value-property`: * Identifier property name. _(For example: `id`)_. +- `data-autocomplete-items-property`: * Property name of collection in response object. _(For example: `items`)_ +- `data-autocomplete-filter-param-name`: * Filter text property name. _(For example: `filter`)_. +- `data-autocomplete-selected-item-name`: Text to display as selected item. +- `data-autocomplete-parent-selector`: jQuery selector expression for parent DOM. _(If it's in a modal, it's suggested to send modal selector as this parameter)_. + + ```html + + ``` + + +## Possible Issues + +### Permission Restriction +If the authenticated user doesn't have permission on given url, user will get an authorization error. Be careful while designing this kind of UIs. + +You may place a lookup method in the same AppService, so your page can retrieve lookup daha of dependent entity without giving a entire read permission to users. \ No newline at end of file diff --git a/docs/en/images/abp-select2-multiple.png b/docs/en/images/abp-select2-multiple.png new file mode 100644 index 0000000000000000000000000000000000000000..bdc2d7cc95f3e2e6a0ebda0ff6f261752d4f1f29 GIT binary patch literal 5591 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 literal 0 HcmV?d00001 diff --git a/docs/en/images/abp-select2-single.png b/docs/en/images/abp-select2-single.png new file mode 100644 index 0000000000000000000000000000000000000000..219355dd661a7bf780e0f044616715c24f4ada5b GIT binary patch literal 3896 zcmb7HcT|(vwm*V`N_9j~y1-bFA`n1=0TgM1B1J%?C{<|zLJ6VCb?8!z2m};CAOb-! zB2@#9q1XawNCKgQQUW1lC_(Ct_pLQ=y?1Bcy6=zgeCO=7&OUqp_TImJPU@A*WGohomcMV`1UK86kSJ!WlA|-`2Y{!PDfrMAKb6lUNwl^D(WfkL`%#)h4!j^wcL5B zFIq@Q_qt?iyn@m|bdi=XdH^#ptfBSc;N&!K-E_|*Jw(LF+0m$?Q3MwLR1|ete+4lCLlft$P7cb*VvO9Iy&NVvCB4P z#ICL`oG$>~3>Hg0Z)u8@{;Oqf`$I>!Ye79;okr+)??(vHlWC`FQpzp!I&YId1MaZYGW^HhPK2r%;f`u?IaXQmA6MK{v)cVNy!gm;5QlQPXLh^Sr9K{AHD zcTY8V+suHNeU`q)wNWc!H+X+peiwLo&>Y;E-~9`a*Z((BvEs%mGyU06VEkdYIU`#+>;bMqTa#v(bX^>@9OQnQhlusONZiG}dmYZhYG zB=SEhGu+mZp)BYtQzUn0A5Y5#g@L1R7F1ow+a+b{XuZ`e3h*=aDn+XA%=gQ$(6;{wZVzwNp@#LnYp03mKH5>wh{8GC*dQjJyz>aw zBW2Rx6i9s3A7%`l3fpYz&+B#-P@c`VW6QN&{50X5PB=N1Q+vo16dy+&G*2^)*+Js- zApv$mH0i<$lx*6SkiY|1oKc6;z+!Uh+VV>UF{^8b_4R`=G`iFuj8iAA#LmqWUd?YV zQEzoqIYz+=K7kJEYxYafT&ew1wo5J{uy|!2N;qwGW)gtb?4tU&wQ*N|OY0oaq0AQ$ z%^2f198^@#cMLH3?3Q2jJ%p*+^_Aq*#iX4^cru1hbT4r{LWZ9+pB*)PQ4F^=g5q3@ zd4O8ZNccWTVj6Y4z?s$2?1VI_*DQq$p;7vN#;0eKd@_i7JHb))`+Wt}^{!hJ7 z7dsZ=j6||wr2{k++Av>1L6$+Y6Gy8?y;s6EM}6zLl#*^K!fQc%L2@M#wY9sjlDW5! zj9}&|lR`wzOCN9MpG-n9w2!&tP);9jXbmraYar@@w?C+4qfl=4+*}N z{D9Nfdj)ckR%SJFmFkS2D?8bmk!1bwcLh>KCF!?H3vwjfvZE&2nzFzXO`JzYe1&)S zF&qq@qnzAg%MBiBHFthXm_U8>pb7hstd3NHI|ypwMmD5kbaIkReD-W@E04Mn^GaI3 zBi0<-7H?jHa&6HHaD6>zZkJ-0tyj9&x^2iNvEU+;;OzU&szoAgBOAPZ1to}B^ziQE zGIb(BLlPKC{B=M2tDf-RU2ATpYX$nlMjG7lc|5iEUtIQQC-}RT{=bRg3c|~Gs4dL+ zO-vb`?~XtPC!s8$zb3}%SEXK-Ink;Cc~LtTUnP0 ziA)~-#{WbbvrJz`hDEI?f#5GQA@WDEbls#73d!kPr!QBCC~8w`%O;&6v?fSjN6vJBEV`|+Es)Moym1c5VhC<*h`g;eJKB>yUAh0tL8 zDvasdQI_;_TQzPBf0!Fh{yooTuWu3Xv14pxi>o5tYwdnQ9m~d`z-Q*3N~RpleosZq zcd0_j8E-brT70J~;qIl3^_I023~jXwCW4jBSI|D&{Odv`=MNPp8N-W2OCe*&jX0al z+DkNdT>8KPL)E*M+Deo&Lk|rG6T3 z1*jW*;vI%paiotoF^pJvRN1Y!X2Kmi4m}SGwrNgH6>IK_xtpKDgph|6WCL2aah?|U zqZr{Dy0N;6g>|ev)OkKf@tg45##!Y1cQwR$@m@FSw-}H8ASTw799k68cS!vn2u@fz zmMtBn74ht7qQ!U#vaBfU)rPMYO@3(kiuOD^9b0lAJEqypUup@1=X4XP0oNk^>p%)DklinkEOg>Wghx&QP$9qq2?VZkdcX zk8%7MpN{FahI)Q}(A`+H8~rlG%J^``?N{A6XD;w^Jk!9pnSu4`g?v zohSP>f3v}~p^TF`LPxUjycC8>`T7p(>CszOxT-e2;L~nu$^KPiHmwG+x$w?@^XIfO zpMoU^f@5GZg6=Gybvd#W3eJeMh$ww0m|^`F>0-AV@GJ}@z$V6chqlzK^`)}vSqc88 zVGDx%Z9J#OzN40;1>e6>gmDSJUZ_Jj9wB#2PX$Z zDUc-fST*U;MbISLBCPbik8Dxr?@UR96#Aebl)|B(={oneq0%?bMf9riP;j7Oswx3@ z)FKzI@{HGvELi+R%}uvCxl+YcCUyMhDaE$)@S6B*FQ7%W)=MzNh#!jGENEE1L@~BV zZe;M^K~Vm@h-mv$?XLsycn)H=?2{|>A9J{mpi-WDTvW^^yX)txz}Gg;T<_^YEj~1^ zwiVjBz46#j02FI^dU|?i&a~f4__jV*n`JDwslD2^<&L@t?i?w9a~cYjOcs_=MqD`V zvl&A8)>moA?$&3uC+{q|#jO7L;HM6Za1g5pC{x?R7+7>feI!a|4_e$TqH~Kkt0P#D z8{ol-BE~eE149J<3nc#yM!wunvQI!FXVX;;;|+f_eL+55$81hJavaU L -
+ -
- - -
+
+ + + @**@ +
- @if (Model.DisplaySubmitButton) - { - - - - } -
\ No newline at end of file + @if (Model.DisplaySubmitButton) + { + + + + } + \ No newline at end of file diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Components/TagEditor/default.js b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Components/TagEditor/default.js index 834aedf3d6..e3607d48fd 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Components/TagEditor/default.js +++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Components/TagEditor/default.js @@ -1,5 +1,20 @@ $(function () { + var $selectTags = $("#tags"); + + function initSelectTagEditor() { + $selectTags.data('autocompleteApiUrl', '/api/cms-kit-admin/tags'); + $selectTags.data('autocompleteDisplayProperty', 'name'); + $selectTags.data('autocompleteValueProperty', 'id'); + $selectTags.data('autocompleteItemsProperty', 'items'); + $selectTags.data('autocompleteFilterParamName', 'filter'); + + abp.dom.initializers.initializeAutocompleteSelects($selectTags); + } + + initSelectTagEditor(); + + var $tagEditorForms = $('.tag-editor-form'); $tagEditorForms.on('submit', function (e) {