From 531eff6dc636320db7e25603838601e99dc90cc4 Mon Sep 17 00:00:00 2001
From: erdemcaygor <erdem.caygor@gmail.com>
Date: Thu, 13 Mar 2025 14:20:11 +0300
Subject: [PATCH] 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') {
-        <input [formControlName]="prop.name" type="hidden" />
+        <input [formControlName]="prop.name" type="hidden"/>
       }
       @case ('checkbox') {
         <div class="form-check" validationTarget>
@@ -62,24 +62,29 @@
       }
       @case ('multiselect') {
         <ng-template [ngTemplateOutlet]="label"></ng-template>
-        <select
-          #field
-          [id]="prop.id"
+        <!--        <select
+                  #field
+                  [id]="prop.id"
+                  [formControlName]="prop.name"
+                  [abpDisabled]="disabled"
+                  multiple="multiple"
+                  class="form-select form-control"
+                >
+                  @for (option of options$ | async; track option.value) {
+                    <option [ngValue]="option.value">
+                      @if (prop.isExtra) {
+                        {{ '::' + option.key | abpLocalization }}
+                      } @else {
+                        {{ option.key }}
+                      }
+                    </option>
+                  }
+                </select>-->
+        <abp-extensible-form-multi-select
+          [prop]="prop"
+          [options]="options$ | async"
           [formControlName]="prop.name"
-          [abpDisabled]="disabled"
-          multiple="multiple"
-          class="form-select form-control"
-        >
-          @for (option of options$ | async; track option.value) {
-            <option [ngValue]="option.value">
-              @if (prop.isExtra) {
-                {{ '::' + option.key | abpLocalization }}
-              } @else {
-                {{ option.key }}
-              }
-            </option>
-          }
-        </select>
+          [abpDisabled]="disabled"/>
       }
       @case ('typeahead') {
         <ng-template [ngTemplateOutlet]="label"></ng-template>
@@ -100,7 +105,7 @@
             [class.is-invalid]="typeahead.classList.contains('is-invalid')"
             class="form-control"
           />
-          <input [formControlName]="prop.name" type="hidden" />
+          <input [formControlName]="prop.name" type="hidden"/>
         </div>
       }
       @case ('date') {
@@ -122,7 +127,7 @@
       }
       @case ('dateTime') {
         <ng-template [ngTemplateOutlet]="label"></ng-template>
-        <abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async" />
+        <abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async"/>
       }
       @case ('textarea') {
         <ng-template [ngTemplateOutlet]="label"></ng-template>
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: `
+    <div [id]="prop().id">
+      @for (option of options(); track option.value) {
+        <div class="d-flex align-items-center column-gap-2">
+          <div class="form-check" validationTarget>
+            <input
+              type="checkbox"
+              class="form-check-input"
+              [disabled]="disabled"
+              [checked]="isChecked(option.value)"
+              (change)="onCheckboxChange(option.value, $event)"
+            />
+            @if (prop().isExtra) {
+              {{ '::' + option.key | abpLocalization }}
+            } @else {
+              {{ option.key }}
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  providers: [EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR],
+  imports: [BaseThemeSharedModule, LocalizationModule, CommonModule, ReactiveFormsModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ExtensibleFormMultiselectComponent implements ControlValueAccessor {
+  prop = input.required<FormProp>();
+  options = input.required<ABP.Option<any>[]>();
+
+  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: [],