fix(admin-ui): Use select control for string custom field with options

Fixes #546
vendure-ecommerce · Nov 10, 2020 · 5c59b67 · 5c59b67
1 parent e189bd4
commit 5c59b67
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/...ib/core/src/shared/dynamic-form-inputs/dynamic-form-input/dynamic-form-input.component.ts b/...ib/core/src/shared/dynamic-form-inputs/dynamic-form-input/dynamic-form-input.component.ts
@@ -20,6 +20,7 @@ import {
     ViewContainerRef,
 } from '@angular/core';
 import { ControlValueAccessor, FormArray, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { StringCustomFieldConfig } from '@vendure/common/lib/generated-types';
 import { ConfigArgType, CustomFieldType, DefaultFormComponentId } from '@vendure/common/lib/shared-types';
 import { assertNever } from '@vendure/common/lib/shared-utils';
 import { simpleDeepClone } from '@vendure/common/lib/simple-deep-clone';
@@ -289,12 +290,16 @@ export class DynamicFormInputComponent
         const type = argDef?.type as ConfigArgType | CustomFieldType;
         switch (type) {
             case 'string':
-            case 'localeString':
-                if (this.isConfigArgDef(argDef) && argDef.ui?.options) {
+            case 'localeString': {
+                const hasOptions =
+                    !!(this.isConfigArgDef(argDef) && argDef.ui?.options) ||
+                    !!(argDef as StringCustomFieldConfig).options;
+                if (hasOptions) {
                     return { component: 'select-form-input' };
                 } else {
                     return { component: 'text-form-input' };
                 }
+            }
             case 'int':
             case 'float':
                 return { component: 'number-form-input' };

diff --git a/...ib/core/src/shared/dynamic-form-inputs/select-form-input/select-form-input.component.html b/...ib/core/src/shared/dynamic-form-inputs/select-form-input/select-form-input.component.html
@@ -1,5 +1,5 @@
 <select clrSelect [formControl]="formControl" [vdrDisabled]="readonly">
     <option *ngFor="let option of config.options" [value]="option.value">
-        {{ option.label || option.value }}
+        {{ (option | customFieldLabel) || option.label || option.value }}
     </option>
 </select>
diff --git a/...ib/core/src/shared/dynamic-form-inputs/select-form-input/select-form-input.component.scss b/...ib/core/src/shared/dynamic-form-inputs/select-form-input/select-form-input.component.scss
@@ -0,0 +1,3 @@
+select {
+    width: 100%;
+}