fix(admin-ui): Correctly handle boolean configurable inputs

Relates to #112
vendure-ecommerce · Jun 11, 2019 · b5d10c1 · b5d10c1
1 parent f136117
commit b5d10c1
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.ts b/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.ts
@@ -264,7 +264,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
         return operations.map((o, i) => {
             return {
                 code: o.code,
-                arguments: Object.values(formValueOperations[i].args).map((value, j) => ({
+                arguments: Object.values(formValueOperations[i].args).map((value: any, j) => ({
                     name: o.args[j].name,
                     value: value.toString(),
                     type: o.args[j].type,

diff --git a/admin-ui/src/app/shared/components/configurable-input/configurable-input.component.html b/admin-ui/src/app/shared/components/configurable-input/configurable-input.component.html
@@ -5,8 +5,10 @@
             <div *ngFor="let arg of operation.args" class="arg-row">
                 <label>{{ arg.name | sentenceCase }}</label>
                 <div *ngIf="arg.type === ConfigArgType.BOOLEAN" class="checkbox">
-                    <input type="checkbox" [formControlName]="arg.name" [id]="arg.name" />
-                    <label [for]="arg.name"></label>
+                    <clr-checkbox-wrapper>
+                        <input type="checkbox" clrCheckbox [formControlName]="arg.name" [id]="arg.name" />
+                        <label>{{ arg.name }}</label>
+                    </clr-checkbox-wrapper>
                 </div>
                 <input
                     *ngIf="arg.type === ConfigArgType.INT"

diff --git a/admin-ui/src/app/shared/components/configurable-input/configurable-input.component.ts b/admin-ui/src/app/shared/components/configurable-input/configurable-input.component.ts
@@ -108,7 +108,11 @@ export class ConfigurableInputComponent implements OnChanges, OnDestroy, Control
         this.form = new FormGroup({});
         if (this.operation.args) {
             for (const arg of this.operation.args) {
-                this.form.addControl(arg.name, new FormControl(arg.value, Validators.required));
+                let value: any = arg.value;
+                if (arg.type === ConfigArgType.BOOLEAN) {
+                    value = arg.value === 'true';
+                }
+                this.form.addControl(arg.name, new FormControl(value, Validators.required));
             }
         }
 

diff --git a/admin-ui/src/app/shared/components/rich-text-editor/rich-text-editor.component.ts b/admin-ui/src/app/shared/components/rich-text-editor/rich-text-editor.component.ts
@@ -86,7 +86,7 @@ export class RichTextEditorComponent implements ControlValueAccessor, AfterViewI
     }
 
     writeValue(value: any) {
-        if (this.trix.innerHTML !== value) {
+        if (this.trix.innerHTML !== value || value === '') {
             if (!this.initialized) {
                 setTimeout(() => {
                     this.trix.editor.loadHTML(value);