From 617dfea7da855ae70801c9245e9b1eee94b112d0 Mon Sep 17 00:00:00 2001 From: malik masis Date: Mon, 12 Dec 2022 15:54:24 +0300 Subject: [PATCH 1/7] Added AllowClear and Placeholder to select2 --- .../TagHelpers/Form/AbpSelectTagHelper.cs | 4 ++ .../Form/AbpSelectTagHelperService.cs | 2 + .../bootstrap/dom-event-handlers.js | 41 ++++++++++++------- 3 files changed, 32 insertions(+), 15 deletions(-) diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs index 75ae03115a..58c7b1b45d 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs @@ -38,6 +38,10 @@ public class AbpSelectTagHelper : AbpTagHelper output.Attributes.Add("data-autocomplete-filter-param-name", TagHelper.AutocompleteFilterParamName); output.Attributes.Add("data-autocomplete-selected-item-name", TagHelper.AutocompleteSelectedItemName); output.Attributes.Add("data-autocomplete-selected-item-value", TagHelper.AutocompleteSelectedItemValue); + output.Attributes.Add("data-allow-clear", TagHelper.AllowClear); + output.Attributes.Add("data-placeholder", TagHelper.Placeholder); } } diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js index 009c32d253..06494bdc8e 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js @@ -74,20 +74,26 @@ abp.dom.initializers.initializeAutocompleteSelects = function ($autocompleteSelects) { if ($autocompleteSelects.length) { $autocompleteSelects.each(function () { - var $select = $(this); - var url = $(this).data("autocompleteApiUrl"); - var displayName = $(this).data("autocompleteDisplayProperty"); - var displayValue = $(this).data("autocompleteValueProperty"); - var itemsPropertyName = $(this).data("autocompleteItemsProperty"); - var filterParamName = $(this).data("autocompleteFilterParamName"); - var selectedText = $(this).data("autocompleteSelectedItemName"); - var parentSelector = $(this).data("autocompleteParentSelector"); - if(!parentSelector && $select.parents(".modal.fade").length === 1){ + let $select = $(this); + let url = $(this).data("autocompleteApiUrl"); + let displayName = $(this).data("autocompleteDisplayProperty"); + let displayValue = $(this).data("autocompleteValueProperty"); + let itemsPropertyName = $(this).data("autocompleteItemsProperty"); + let filterParamName = $(this).data("autocompleteFilterParamName"); + let selectedText = $(this).data("autocompleteSelectedItemName"); + let parentSelector = $(this).data("autocompleteParentSelector"); + let allowClear = $(this).data("allowClear"); + let placeholder = $(this).data("placeholder"); + if (allowClear && placeholder == undefined) { + placeholder = " "; + } + + if (!parentSelector && $select.parents(".modal.fade").length === 1) { parentSelector = ".modal.fade"; } - var name = $(this).attr("name"); - var selectedTextInputName = name + "_Text"; - var selectedTextInput = $('', { + let name = $(this).attr("name"); + let selectedTextInputName = name + "_Text"; + let selectedTextInput = $('', { type: 'hidden', id: selectedTextInputName, name: selectedTextInputName, @@ -101,13 +107,13 @@ url: url, dataType: "json", data: function (params) { - var query = {}; + let query = {}; query[filterParamName] = params.term; return query; }, processResults: function (data) { - var retVal = []; - var items = data; + let retVal = []; + let items = data; if (itemsPropertyName) { items = data[itemsPropertyName]; } @@ -125,6 +131,11 @@ }, width: '100%', dropdownParent: parentSelector ? $(parentSelector) : $('body'), + allowClear: allowClear, + placeholder: { + id: '-1', + text: placeholder + } }); $select.on('select2:select', function (e) { selectedTextInput.val(e.params.data.text); From 720865b967937766c3a67a5157d10851fb66184a Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Mon, 12 Dec 2022 17:45:44 +0300 Subject: [PATCH 2/7] disable tree style loading with token --- npm/ng-packs/angular.json | 5 +++++ .../tree/src/lib/components/tree.component.ts | 15 ++++++++++++++- .../src/lib/disable-tree-style-loading.token.ts | 5 +++++ .../packages/components/tree/src/public-api.ts | 1 + 4 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 npm/ng-packs/packages/components/tree/src/lib/disable-tree-style-loading.token.ts diff --git a/npm/ng-packs/angular.json b/npm/ng-packs/angular.json index 0b2e115734..cd9029142c 100644 --- a/npm/ng-packs/angular.json +++ b/npm/ng-packs/angular.json @@ -277,6 +277,11 @@ "inject": true, "bundleName": "ngx-datatable-material" }, + { + "input": "node_modules/ng-zorro-antd/tree/style/index.min.css", + "inject": false, + "bundleName": "ng-zorro-antd-tree" + }, "apps/dev-app/src/styles.scss" ], "scripts": [] diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts index 0dcd29113d..16d4b2621e 100644 --- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts +++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts @@ -2,7 +2,9 @@ import { Component, ContentChild, EventEmitter, + Inject, Input, + Optional, Output, TemplateRef, ViewEncapsulation, @@ -13,6 +15,7 @@ import { TreeNodeTemplateDirective } from '../templates/tree-node-template.direc import { ExpandedIconTemplateDirective } from '../templates/expanded-icon-template.directive'; import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'; import { LazyLoadService, LOADING_STRATEGY, SubscriptionService } from '@abp/ng.core'; +import { DISABLE_TREE_STYLE_LADING_TOKEN } from '../disable-tree-style-loading.token'; export type DropEvent = NzFormatEmitEvent & { pos: number }; @@ -27,7 +30,17 @@ export class TreeComponent { dropPosition: number; dropdowns = {} as { [key: string]: NgbDropdown }; - constructor(private lazyLoadService: LazyLoadService, subscriptionService: SubscriptionService) { + + constructor( + private lazyLoadService: LazyLoadService, + subscriptionService: SubscriptionService, + @Optional() + @Inject(DISABLE_TREE_STYLE_LADING_TOKEN) + disableTreeStyleLoading: boolean | undefined, + ) { + if (disableTreeStyleLoading) { + return; + } const loaded$ = this.lazyLoadService.load( LOADING_STRATEGY.AppendAnonymousStyleToHead('ng-zorro-antd-tree.css'), ); diff --git a/npm/ng-packs/packages/components/tree/src/lib/disable-tree-style-loading.token.ts b/npm/ng-packs/packages/components/tree/src/lib/disable-tree-style-loading.token.ts new file mode 100644 index 0000000000..a0c57921fe --- /dev/null +++ b/npm/ng-packs/packages/components/tree/src/lib/disable-tree-style-loading.token.ts @@ -0,0 +1,5 @@ +import { InjectionToken } from '@angular/core'; + +export const DISABLE_TREE_STYLE_LADING_TOKEN = new InjectionToken( + 'DISABLE_TREE_STYLE__LADING_TOKEN', +); diff --git a/npm/ng-packs/packages/components/tree/src/public-api.ts b/npm/ng-packs/packages/components/tree/src/public-api.ts index 1f3dd48e00..9b5caf5976 100644 --- a/npm/ng-packs/packages/components/tree/src/public-api.ts +++ b/npm/ng-packs/packages/components/tree/src/public-api.ts @@ -3,3 +3,4 @@ export * from './lib/components/tree.component'; export * from './lib/utils/nz-tree-adapter'; export * from './lib/templates/tree-node-template.directive'; export * from './lib/templates/expanded-icon-template.directive'; +export * from './lib/disable-tree-style-loading.token'; From 539e929cc0720e0cb996567ce765424f421b0db1 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Tue, 13 Dec 2022 09:16:01 +0300 Subject: [PATCH 3/7] Fix typo --- .../components/tree/src/lib/components/tree.component.ts | 4 ++-- .../tree/src/lib/disable-tree-style-loading.token.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts index 16d4b2621e..8edcf1db4f 100644 --- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts +++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts @@ -15,7 +15,7 @@ import { TreeNodeTemplateDirective } from '../templates/tree-node-template.direc import { ExpandedIconTemplateDirective } from '../templates/expanded-icon-template.directive'; import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'; import { LazyLoadService, LOADING_STRATEGY, SubscriptionService } from '@abp/ng.core'; -import { DISABLE_TREE_STYLE_LADING_TOKEN } from '../disable-tree-style-loading.token'; +import { DISABLE_TREE_STYLE_LOADING_TOKEN } from '../disable-tree-style-loading.token'; export type DropEvent = NzFormatEmitEvent & { pos: number }; @@ -35,7 +35,7 @@ export class TreeComponent { private lazyLoadService: LazyLoadService, subscriptionService: SubscriptionService, @Optional() - @Inject(DISABLE_TREE_STYLE_LADING_TOKEN) + @Inject(DISABLE_TREE_STYLE_LOADING_TOKEN) disableTreeStyleLoading: boolean | undefined, ) { if (disableTreeStyleLoading) { diff --git a/npm/ng-packs/packages/components/tree/src/lib/disable-tree-style-loading.token.ts b/npm/ng-packs/packages/components/tree/src/lib/disable-tree-style-loading.token.ts index a0c57921fe..a96f7cb235 100644 --- a/npm/ng-packs/packages/components/tree/src/lib/disable-tree-style-loading.token.ts +++ b/npm/ng-packs/packages/components/tree/src/lib/disable-tree-style-loading.token.ts @@ -1,5 +1,5 @@ import { InjectionToken } from '@angular/core'; -export const DISABLE_TREE_STYLE_LADING_TOKEN = new InjectionToken( - 'DISABLE_TREE_STYLE__LADING_TOKEN', +export const DISABLE_TREE_STYLE_LOADING_TOKEN = new InjectionToken( + 'DISABLE_TREE_STYLE_LOADING_TOKEN', ); From 39b87270d153c91d0b3f481dbbe4d6b48cc6fcd2 Mon Sep 17 00:00:00 2001 From: malik masis Date: Tue, 13 Dec 2022 10:12:41 +0300 Subject: [PATCH 4/7] Update framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs Co-authored-by: Enis Necipoglu --- .../TagHelpers/Form/AbpSelectTagHelperService.cs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs index 1d0ec265ed..350898d41d 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs @@ -120,8 +120,8 @@ public class AbpSelectTagHelperService : AbpTagHelperService output.Attributes.Add("data-autocomplete-filter-param-name", TagHelper.AutocompleteFilterParamName); output.Attributes.Add("data-autocomplete-selected-item-name", TagHelper.AutocompleteSelectedItemName); output.Attributes.Add("data-autocomplete-selected-item-value", TagHelper.AutocompleteSelectedItemValue); - output.Attributes.Add("data-allow-clear", TagHelper.AllowClear); - output.Attributes.Add("data-placeholder", TagHelper.Placeholder); + output.Attributes.Add("data-autocomplete-allow-clear", TagHelper.AllowClear); + output.Attributes.Add("data-autocomplete-placeholder", TagHelper.Placeholder); } } From 20b31aeb4715add8f7d1779c3182894328894464 Mon Sep 17 00:00:00 2001 From: malik masis Date: Tue, 13 Dec 2022 10:12:48 +0300 Subject: [PATCH 5/7] Update framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js Co-authored-by: Enis Necipoglu --- .../bootstrap/dom-event-handlers.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js index 06494bdc8e..d1cbfa6b6b 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js @@ -82,8 +82,8 @@ let filterParamName = $(this).data("autocompleteFilterParamName"); let selectedText = $(this).data("autocompleteSelectedItemName"); let parentSelector = $(this).data("autocompleteParentSelector"); - let allowClear = $(this).data("allowClear"); - let placeholder = $(this).data("placeholder"); + let allowClear = $(this).data("autocompleteAllowClear"); + let placeholder = $(this).data("autocompletePlaceholder"); if (allowClear && placeholder == undefined) { placeholder = " "; } From 7d6cf7940cbfd4a50998ec317aff8e92153ac6a8 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Tue, 13 Dec 2022 10:19:09 +0300 Subject: [PATCH 6/7] move loadStyle to a method --- .../tree/src/lib/components/tree.component.ts | 29 ++++++++++++------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts index 8edcf1db4f..e7566c587d 100644 --- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts +++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts @@ -8,6 +8,7 @@ import { Output, TemplateRef, ViewEncapsulation, + OnInit } from '@angular/core'; import { NzFormatBeforeDropEvent, NzFormatEmitEvent } from 'ng-zorro-antd/tree'; import { of } from 'rxjs'; @@ -26,7 +27,7 @@ export type DropEvent = NzFormatEmitEvent & { pos: number }; encapsulation: ViewEncapsulation.None, providers: [SubscriptionService], }) -export class TreeComponent { +export class TreeComponent implements OnInit { dropPosition: number; dropdowns = {} as { [key: string]: NgbDropdown }; @@ -36,16 +37,8 @@ export class TreeComponent { subscriptionService: SubscriptionService, @Optional() @Inject(DISABLE_TREE_STYLE_LOADING_TOKEN) - disableTreeStyleLoading: boolean | undefined, - ) { - if (disableTreeStyleLoading) { - return; - } - const loaded$ = this.lazyLoadService.load( - LOADING_STRATEGY.AppendAnonymousStyleToHead('ng-zorro-antd-tree.css'), - ); - subscriptionService.addOne(loaded$); - } + private disableTreeStyleLoading: boolean | undefined, + ) { } @ContentChild('menu') menu: TemplateRef; @ContentChild(TreeNodeTemplateDirective) customNodeTemplate: TreeNodeTemplateDirective; @@ -70,6 +63,20 @@ export class TreeComponent { return of(false); }; + ngOnInit() { + this.loadStyle() + } + + private loadStyle() { + if (disableTreeStyleLoading) { + return; + } + const loaded$ = this.lazyLoadService.load( + LOADING_STRATEGY.AppendAnonymousStyleToHead('ng-zorro-antd-tree.css'), + ); + subscriptionService.addOne(loaded$); + } + onSelectedNodeChange(node) { this.selectedNode = node.origin.entity; if (this.changeCheckboxWithNode) { From 8db76b092d8bb6a1816e9da77e99655b8d973c45 Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Tue, 13 Dec 2022 10:53:21 +0300 Subject: [PATCH 7/7] Update AutoComplete-Select.md --- docs/en/UI/AspNetCore/AutoComplete-Select.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/en/UI/AspNetCore/AutoComplete-Select.md b/docs/en/UI/AspNetCore/AutoComplete-Select.md index 86d8c14b8a..e0ad7ceb24 100644 --- a/docs/en/UI/AspNetCore/AutoComplete-Select.md +++ b/docs/en/UI/AspNetCore/AutoComplete-Select.md @@ -22,7 +22,8 @@ A simple usage is presented below. data-autocomplete-display-property="name" data-autocomplete-value-property="id" data-autocomplete-items-property="items" - data-autocomplete-filter-param-name="filter"> + data-autocomplete-filter-param-name="filter" + data-autocomplete-allow-clear="true"> @@ -38,6 +39,8 @@ The select must have the `auto-complete-select` class and the following attribut - `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 the modal selector as this parameter)_. +- `data-autocomplete-allow-clear`: If `true`, it'll allow to clear the selected value. Default value: `false`. +- `data-autocomplete-placeholder`: Placeholder text to display when no value is selected. Also, selected value(s) should be defined with the `