From cd15162f708c679afbce5782c3a48ce39415defa Mon Sep 17 00:00:00 2001
From: bnymncoskuner <bnymncoskuner@gmail.com>
Date: Tue, 10 Nov 2020 10:12:07 +0300
Subject: [PATCH] feat: add multiselect to extensible form props

---
 .../extensible-form-prop.component.html       | 21 ++++++++++++++++++-
 .../extensible-form-prop.component.ts         |  4 +++-
 .../extensions/src/lib/enums/props.enum.ts    |  1 +
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
index 30d115216b..0f1e1ffac8 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -38,8 +38,27 @@
       <option
         *ngFor="let option of options$ | async; trackBy: track.by('value')"
         [ngValue]="option.value"
-        >{{ option.key }}</option
       >
+        {{ option.key }}
+      </option>
+    </select>
+  </ng-template>
+
+  <ng-template ngSwitchCase="multiselect">
+    <label [htmlFor]="prop.id">{{ prop.displayName | abpLocalization }} {{ asterisk }}</label>
+    <select
+      [id]="prop.id"
+      [formControlName]="prop.name"
+      [abpDisabled]="disabled"
+      multiple="multiple"
+      class="custom-select form-control"
+    >
+      <option
+        *ngFor="let option of options$ | async; trackBy: track.by('value')"
+        [ngValue]="option.value"
+      >
+        {{ option.key }}
+      </option>
     </select>
   </ng-template>
 
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
index 4a28b14f22..6b5b241924 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -53,7 +53,7 @@ export class ExtensibleFormPropComponent implements OnChanges {
   }
 
   getComponent(prop: FormProp): string {
-    if (prop.options) return 'select';
+    if (prop.options && prop.type !== ePropType.MultiSelect) return 'select';
 
     switch (prop.type) {
       case ePropType.Boolean:
@@ -66,6 +66,8 @@ export class ExtensibleFormPropComponent implements OnChanges {
         return 'textarea';
       case ePropType.Time:
         return 'time';
+      case ePropType.MultiSelect:
+        return 'multiselect';
       default:
         return 'input';
     }
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/enums/props.enum.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/enums/props.enum.ts
index 1acb15f8d4..a7c989569f 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/enums/props.enum.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/enums/props.enum.ts
@@ -9,4 +9,5 @@ export const enum ePropType {
   String = 'string',
   Text = 'text',
   Time = 'time',
+  MultiSelect = 'multiselect',
 }