From 531eff6dc636320db7e25603838601e99dc90cc4 Mon Sep 17 00:00:00 2001 From: erdemcaygor Date: Thu, 13 Mar 2025 14:20:11 +0300 Subject: [PATCH 1/5] extensible form multiselect component created --- .../extensible-form-prop.component.html | 45 +++++----- .../extensible-form-prop.component.ts | 2 + .../extensible-form-multiselect.component.ts | 88 +++++++++++++++++++ .../extensible/src/lib/extensible.module.ts | 2 + 4 files changed, 117 insertions(+), 20 deletions(-) create mode 100644 npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/extensible-form-multiselect.component.ts diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html index b5da3a266f..401fd1454d 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html @@ -22,7 +22,7 @@ /> } @case ('hidden') { - + } @case ('checkbox') {
@@ -62,24 +62,29 @@ } @case ('multiselect') { - --> + - @for (option of options$ | async; track option.value) { - - } - + [abpDisabled]="disabled"/> } @case ('typeahead') { @@ -100,7 +105,7 @@ [class.is-invalid]="typeahead.classList.contains('is-invalid')" class="form-control" /> - +
} @case ('date') { @@ -122,7 +127,7 @@ } @case ('dateTime') { - + } @case ('textarea') { diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts index d6e9dba268..401bd15c3d 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts @@ -49,12 +49,14 @@ import { NgxValidateCoreModule } from '@ngx-validate/core'; import { ExtensibleFormPropService } from '../../services/extensible-form-prop.service'; import { CommonModule } from '@angular/common'; import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; +import { ExtensibleFormMultiselectComponent } from '../multi-select/extensible-form-multiselect.component'; @Component({ selector: 'abp-extensible-form-prop', templateUrl: './extensible-form-prop.component.html', imports: [ ExtensibleDateTimePickerComponent, + ExtensibleFormMultiselectComponent, NgbDatepickerModule, NgbTimepickerModule, ReactiveFormsModule, diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/extensible-form-multiselect.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/extensible-form-multiselect.component.ts new file mode 100644 index 0000000000..b46bf6d391 --- /dev/null +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/extensible-form-multiselect.component.ts @@ -0,0 +1,88 @@ +import { Component, ChangeDetectionStrategy, forwardRef, input } from '@angular/core'; +import { NG_VALUE_ACCESSOR, ControlValueAccessor, ReactiveFormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; + +import { ABP, LocalizationModule } from '@abp/ng.core'; +import { BaseThemeSharedModule } from '@abp/ng.theme.shared'; +import { FormProp } from '@abp/ng.components/extensible'; + +const EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR = { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => ExtensibleFormMultiselectComponent), + multi: true, +}; + +@Component({ + selector: 'abp-extensible-form-multi-select', + template: ` +
+ @for (option of options(); track option.value) { +
+
+ + @if (prop().isExtra) { + {{ '::' + option.key | abpLocalization }} + } @else { + {{ option.key }} + } +
+
+ } +
+ `, + providers: [EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], + imports: [BaseThemeSharedModule, LocalizationModule, CommonModule, ReactiveFormsModule], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ExtensibleFormMultiselectComponent implements ControlValueAccessor { + prop = input.required(); + options = input.required[]>(); + + selectedValues: any[] = []; + disabled = false; + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + } + + isChecked(value: any): boolean { + return this.selectedValues.includes(value); + } + + onCheckboxChange(value: any, event: any): void { + const checked = event.target.checked; + + if (checked) { + this.selectedValues.push(value); + } else { + this.selectedValues = this.selectedValues.filter(item => item !== value); + } + + this.onChange(this.selectedValues); + this.onTouched(); + } + + writeValue(value: any[]): void { + if (Array.isArray(value)) { + this.selectedValues = value; + } + } + + registerOnChange(fn: any): void { + this.onChange = fn; + } + + registerOnTouched(fn: any): void { + this.onTouched = fn; + } + + private onChange(fn: any): void {} + + private onTouched(): any {} +} diff --git a/npm/ng-packs/packages/components/extensible/src/lib/extensible.module.ts b/npm/ng-packs/packages/components/extensible/src/lib/extensible.module.ts index 99bc25b6f4..da87b49491 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/extensible.module.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/extensible.module.ts @@ -20,6 +20,7 @@ import { import { PropDataDirective } from './directives/prop-data.directive'; import { CreateInjectorPipe } from './pipes/create-injector.pipe'; import { DisabledDirective } from '@abp/ng.theme.shared'; +import {ExtensibleFormMultiselectComponent} from "./components/multi-select/extensible-form-multiselect.component"; const importWithExport = [ DisabledDirective, @@ -31,6 +32,7 @@ const importWithExport = [ CreateInjectorPipe, ExtensibleFormComponent, ExtensibleTableComponent, + ExtensibleFormMultiselectComponent ]; @NgModule({ declarations: [], From fca845bd6772d5113dc923dc1f79985ab44a63b5 Mon Sep 17 00:00:00 2001 From: erdemcaygor Date: Thu, 13 Mar 2025 14:45:13 +0300 Subject: [PATCH 2/5] code refactoring --- .../extensible-form-prop.component.html | 18 ------------ .../extensible-form-multiselect.component.ts | 29 +++++++++---------- 2 files changed, 13 insertions(+), 34 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html index 401fd1454d..b0d8f42bc7 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html @@ -62,24 +62,6 @@ } @case ('multiselect') { - @for (option of options(); track option.value) { -
-
- - @if (prop().isExtra) { - {{ '::' + option.key | abpLocalization }} - } @else { - {{ option.key }} - } -
+
+ + @if (prop().isExtra) { + {{ '::' + option.key | abpLocalization }} + } @else { + {{ option.key }} + }
}
From 3bd9f5558d8bc64b49d702416eaac73cdd86067f Mon Sep 17 00:00:00 2001 From: erdemcaygor Date: Thu, 13 Mar 2025 15:01:00 +0300 Subject: [PATCH 3/5] code refactoring --- .../extensible-form-multiselect.component.ts | 25 +++++++------------ 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/extensible-form-multiselect.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/extensible-form-multiselect.component.ts index 1a5dcf1c84..f8b103159b 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/extensible-form-multiselect.component.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/extensible-form-multiselect.component.ts @@ -22,7 +22,7 @@ const EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR = { class="form-check-input" [disabled]="disabled" [checked]="isChecked(option.value)" - (change)="onCheckboxChange(option.value, $event)" + (change)="onCheckboxChange(option.value, $event.target.checked)" /> @if (prop().isExtra) { {{ '::' + option.key | abpLocalization }} @@ -44,6 +44,9 @@ export class ExtensibleFormMultiselectComponent implements ControlValueAccessor selectedValues: any[] = []; disabled = false; + private onChange: (value: any) => void = () => {}; + private onTouched: () => void = () => {}; + setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; } @@ -52,23 +55,17 @@ export class ExtensibleFormMultiselectComponent implements ControlValueAccessor return this.selectedValues.includes(value); } - onCheckboxChange(value: any, event: any): void { - const checked = event.target.checked; - - if (checked) { - this.selectedValues.push(value); - } else { - this.selectedValues = this.selectedValues.filter(item => item !== value); - } + onCheckboxChange(value: any, checked: boolean): void { + this.selectedValues = checked + ? [...this.selectedValues, value] + : this.selectedValues.filter(item => item !== value); this.onChange(this.selectedValues); this.onTouched(); } writeValue(value: any[]): void { - if (Array.isArray(value)) { - this.selectedValues = value; - } + this.selectedValues = Array.isArray(value) ? [...value] : []; } registerOnChange(fn: any): void { @@ -78,8 +75,4 @@ export class ExtensibleFormMultiselectComponent implements ControlValueAccessor registerOnTouched(fn: any): void { this.onTouched = fn; } - - private onChange(fn: any): void {} - - private onTouched(): any {} } From 6cedeb3b6e958101154b95570ce3be17c5cc45b5 Mon Sep 17 00:00:00 2001 From: erdemcaygor Date: Thu, 13 Mar 2025 15:18:06 +0300 Subject: [PATCH 4/5] code refactoring --- .../components/extensible/src/lib/components/index.ts | 1 + .../extensible/src/lib/components/multi-select/index.ts | 1 + .../components/extensible/src/lib/extensible.module.ts | 5 +++-- 3 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/index.ts diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/index.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/index.ts index 17f1c380d1..149043089b 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/index.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/index.ts @@ -5,3 +5,4 @@ export * from './extensible-table/extensible-table.component'; export * from './date-time-picker/extensible-date-time-picker.component'; export * from './grid-actions/grid-actions.component'; export * from './page-toolbar/page-toolbar.component'; +export * from './multi-select/extensible-form-multiselect.component'; diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/index.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/index.ts new file mode 100644 index 0000000000..3a85d672ab --- /dev/null +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/index.ts @@ -0,0 +1 @@ +export * from './extensible-form-multiselect.component'; diff --git a/npm/ng-packs/packages/components/extensible/src/lib/extensible.module.ts b/npm/ng-packs/packages/components/extensible/src/lib/extensible.module.ts index da87b49491..26741c2832 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/extensible.module.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/extensible.module.ts @@ -16,11 +16,11 @@ import { GridActionsComponent, PageToolbarComponent, ExtensibleDateTimePickerComponent, + ExtensibleFormMultiselectComponent, } from './components'; import { PropDataDirective } from './directives/prop-data.directive'; import { CreateInjectorPipe } from './pipes/create-injector.pipe'; import { DisabledDirective } from '@abp/ng.theme.shared'; -import {ExtensibleFormMultiselectComponent} from "./components/multi-select/extensible-form-multiselect.component"; const importWithExport = [ DisabledDirective, @@ -32,8 +32,9 @@ const importWithExport = [ CreateInjectorPipe, ExtensibleFormComponent, ExtensibleTableComponent, - ExtensibleFormMultiselectComponent + ExtensibleFormMultiselectComponent, ]; + @NgModule({ declarations: [], imports: [ From f97ca563e4581bb081860ea0b5170deb5ca5899f Mon Sep 17 00:00:00 2001 From: erdemcaygor Date: Tue, 18 Mar 2025 16:28:21 +0300 Subject: [PATCH 5/5] code refactoring --- .../multi-select/extensible-form-multiselect.component.ts | 5 ++--- .../packages/components/extensible/src/public-api.ts | 1 + 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/extensible-form-multiselect.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/extensible-form-multiselect.component.ts index f8b103159b..d55d55614d 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/extensible-form-multiselect.component.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/extensible-form-multiselect.component.ts @@ -2,8 +2,7 @@ import { Component, ChangeDetectionStrategy, forwardRef, input } from '@angular/ import { NG_VALUE_ACCESSOR, ControlValueAccessor, ReactiveFormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; import { ABP, LocalizationModule } from '@abp/ng.core'; -import { BaseThemeSharedModule } from '@abp/ng.theme.shared'; -import { FormProp } from '@abp/ng.components/extensible'; +import { FormProp } from '../../models/form-props'; const EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, @@ -34,7 +33,7 @@ const EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR = { `, providers: [EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], - imports: [BaseThemeSharedModule, LocalizationModule, CommonModule, ReactiveFormsModule], + imports: [LocalizationModule, CommonModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, }) export class ExtensibleFormMultiselectComponent implements ControlValueAccessor { diff --git a/npm/ng-packs/packages/components/extensible/src/public-api.ts b/npm/ng-packs/packages/components/extensible/src/public-api.ts index 35e4696d49..e5c7883738 100644 --- a/npm/ng-packs/packages/components/extensible/src/public-api.ts +++ b/npm/ng-packs/packages/components/extensible/src/public-api.ts @@ -4,6 +4,7 @@ export * from './lib/components/extensible-form/extensible-form.component'; export * from './lib/components/extensible-table/extensible-table.component'; export * from './lib/components/grid-actions/grid-actions.component'; export * from './lib/components/page-toolbar/page-toolbar.component'; +export * from './lib/components/multi-select'; export * from './lib/constants/extra-properties'; export * from './lib/directives/prop-data.directive'; export * from './lib/enums/props.enum';