Adding checkbox component

TIER · Jul 2, 2018 · f3b97a7 · f3b97a7
1 parent eea081e
commit f3b97a7
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 3 deletions.
diff --git a/ui/src/app/schema-form/registry.ts b/ui/src/app/schema-form/registry.ts
@@ -15,6 +15,7 @@ import { RangeWidget } from 'ngx-schema-form';
 import { TextAreaWidget } from 'ngx-schema-form';
 import { CustomSelectComponent } from './widget/select/select.component';
 import { DatalistComponent } from './widget/datalist/datalist.component';
+import { CustomCheckboxComponent } from './widget/check/checkbox.component';
 
 
 export class CustomWidgetRegistry extends WidgetRegistry {
@@ -37,6 +38,8 @@ export class CustomWidgetRegistry extends WidgetRegistry {
         this.register('fieldset', FieldsetComponent);
 
         this.register('select', CustomSelectComponent);
+        this.register('boolean', CustomCheckboxComponent);
+        this.register('checkbox', CustomCheckboxComponent);
 
         this.register('datalist', DatalistComponent);
 
@@ -52,8 +55,6 @@ export class CustomWidgetRegistry extends WidgetRegistry {
 
         this.register('file', FileWidget);
         this.register('radio', RadioWidget);
-        this.register('boolean', CheckboxWidget);
-        this.register('checkbox', CheckboxWidget);
 
         this.register('button', ButtonWidget);
 

diff --git a/ui/src/app/schema-form/schema-form.module.ts b/ui/src/app/schema-form/schema-form.module.ts
@@ -11,13 +11,15 @@ import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { SharedModule } from '../shared/shared.module';
 import { CustomSelectComponent } from './widget/select/select.component';
 import { DatalistComponent } from './widget/datalist/datalist.component';
+import { CustomCheckboxComponent } from './widget/check/checkbox.component';
 
 export const COMPONENTS = [
     BooleanRadioComponent,
     FieldsetComponent,
     CustomStringComponent,
     CustomSelectComponent,
-    DatalistComponent
+    DatalistComponent,
+    CustomCheckboxComponent
 ];
 
 @NgModule({

diff --git a/ui/src/app/schema-form/widget/check/checkbox.component.html b/ui/src/app/schema-form/widget/check/checkbox.component.html
@@ -0,0 +1,28 @@
+<div class="widget form-group">
+    <label [attr.for]="id" class="horizontal control-label">
+        {{ schema.title }}
+    </label>
+    <div *ngIf="schema.type!='array'" class="checkbox">
+        <label class="horizontal control-label">
+            <input [formControl]="control"
+                [attr.name]="name"
+                [indeterminate]="control.value !== false && control.value !== true ? true :null"
+                type="checkbox"
+                [attr.disabled]="schema.readOnly">
+            <input *ngIf="schema.readOnly" [attr.name]="name" type="hidden" [formControl]="control"> {{schema.description}}
+        </label>
+    </div>
+    <ng-container *ngIf="schema.type==='array'">
+        <div *ngFor="let option of schema.items.oneOf" class="checkbox">
+            <label class="horizontal control-label">
+                <input [attr.name]="name" 
+                    value="{{option.enum[0]}}"
+                    type="checkbox"
+                    [attr.disabled]="schema.readOnly"
+                    (change)="onCheck($event.target)"
+                    [attr.checked]="checked[option.enum[0]] ? true : null">
+                {{option.description}}
+            </label>
+        </div>
+    </ng-container>
+</div>
diff --git a/ui/src/app/schema-form/widget/check/checkbox.component.ts b/ui/src/app/schema-form/widget/check/checkbox.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+import { CheckboxWidget } from 'ngx-schema-form';
+
+@Component({
+    selector: 'checkbox-component',
+    templateUrl: `./checkbox.component.html`
+})
+export class CustomCheckboxComponent extends CheckboxWidget { }