Skip to content

Commit

Permalink
Implemented Common Attributes form
Browse files Browse the repository at this point in the history
  • Loading branch information
rmathis committed Jun 29, 2018
1 parent 797072e commit 909719e
Show file tree
Hide file tree
Showing 11 changed files with 129 additions and 19 deletions.
54 changes: 51 additions & 3 deletions ui/src/app/schema-form/registry.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,62 @@
import { DefaultWidgetRegistry } from 'ngx-schema-form';
import { BooleanRadioComponent } from './widget/boolean-radio/boolean-radio.component';
import { FieldsetComponent } from './widget/fieldset/fieldset.component';
import { CustomStringComponent } from './widget/text/string.component';

export class CustomWidgetRegistry extends DefaultWidgetRegistry {
import { WidgetRegistry } from 'ngx-schema-form';

import { ArrayWidget } from 'ngx-schema-form';
import { ButtonWidget } from 'ngx-schema-form';
import { CheckboxWidget } from 'ngx-schema-form';
import { FileWidget } from 'ngx-schema-form';
import { IntegerWidget } from 'ngx-schema-form';
import { ObjectWidget } from 'ngx-schema-form';
import { RadioWidget } from 'ngx-schema-form';
import { RangeWidget } from 'ngx-schema-form';
import { SelectWidget } from 'ngx-schema-form';
import { StringWidget } from 'ngx-schema-form';
import { TextAreaWidget } from 'ngx-schema-form';
import { CustomSelectComponent } from './widget/select/select.component';



export class CustomWidgetRegistry extends WidgetRegistry {
constructor() {
super();

/* Custom */
this.register('string', CustomStringComponent);
this.register('search', CustomStringComponent);
this.register('tel', CustomStringComponent);
this.register('url', CustomStringComponent);
this.register('email', CustomStringComponent);
this.register('password', CustomStringComponent);
this.register('color', CustomStringComponent);
this.register('date', CustomStringComponent);
this.register('date-time', CustomStringComponent);
this.register('time', CustomStringComponent);

this.register('boolean-radio', BooleanRadioComponent);
this.register('fieldset', FieldsetComponent);
this.register('custom-string', CustomStringComponent);

this.register('select', CustomSelectComponent);

/* NGX-Form */
this.register('array', ArrayWidget);
this.register('object', ObjectWidget);

this.register('integer', IntegerWidget);
this.register('number', IntegerWidget);
this.register('range', RangeWidget);

this.register('textarea', TextAreaWidget);

this.register('file', FileWidget);
this.register('radio', RadioWidget);
this.register('boolean', CheckboxWidget);
this.register('checkbox', CheckboxWidget);

this.register('button', ButtonWidget);

this.setDefaultWidget(CustomStringComponent);
}
}
8 changes: 7 additions & 1 deletion ui/src/app/schema-form/schema-form.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,23 @@ import { BooleanRadioComponent } from './widget/boolean-radio/boolean-radio.comp
import { SchemaService } from './service/schema.service';
import { FieldsetComponent } from './widget/fieldset/fieldset.component';
import { CustomStringComponent } from './widget/text/string.component';
import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
import { SharedModule } from '../shared/shared.module';
import { CustomSelectComponent } from './widget/select/select.component';

export const COMPONENTS = [
BooleanRadioComponent,
FieldsetComponent,
CustomStringComponent
CustomStringComponent,
CustomSelectComponent
];

@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,
NgbPopoverModule,
SharedModule,
SchemaFormModule.forRoot()
],
declarations: COMPONENTS,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
<div class="widget form-group">
<label>{{ schema.title }}</label>
<label class="d-flex justify-content-start control-label">
<span>{{ schema.title }}</span>
<span *ngIf="schema.description">
<ng-template #tooltip i18n="@@tooltip--description">{{ schema.description }}</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltip"
i18n-aria-label="@@tooltip--instruction"
aria-label="Information icon - press spacebar to read additional information for this form field"></i>
</span>
</label>
<span *ngIf="schema.description" class="sr-only">{{ schema.description }}</span>
<div *ngFor="let option of schema.oneOf; let i=index;" class="form-check form-check-inline">
<label class="control-label">
Expand Down
22 changes: 22 additions & 0 deletions ui/src/app/schema-form/widget/select/select.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<div class="widget form-group">
<label [attr.for]="id" class="horizontal control-label">
{{ schema.title }}
<span>
<ng-template #tooltip i18n="@@tooltip--description">{{ schema.description }}</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltip"
i18n-aria-label="@@tooltip--instruction"
aria-label="Information icon - press spacebar to read additional information for this form field"></i>
</span>
</label>
<span *ngIf="schema.description" class="sr-only">
{{ schema.description }}
</span>
<select *ngIf="schema.type != 'array'" [formControl]="control" [attr.name]="name" [attr.disabled]="schema.readOnly" class="form-control">
<option *ngFor="let option of schema.oneOf" [ngValue]="option.enum[0]">{{option.description}}</option>
</select>
<select *ngIf="schema.type === 'array'" multiple [formControl]="control" [attr.name]="name" [attr.disabled]="schema.readOnly" class="form-control">
<option *ngFor="let option of schema.items.oneOf" [ngValue]="option.enum[0]">{{option.description}}</option>
</select>
<input *ngIf="schema.readOnly" [attr.name]="name" type="hidden" [formControl]="control">
</div>
9 changes: 9 additions & 0 deletions ui/src/app/schema-form/widget/select/select.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Component } from '@angular/core';

import { ControlWidget } from 'ngx-schema-form';

@Component({
selector: 'select-component',
templateUrl: `./select.component.html`
})
export class CustomSelectComponent extends ControlWidget { }
15 changes: 11 additions & 4 deletions ui/src/app/schema-form/widget/text/string.component.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
<div class="widget form-group">
<label [attr.for]="id" class="horizontal control-label">
{{ schema.title }}
<label [attr.for]="id" class="d-flex justify-content-between control-label">
<span>{{ schema.title }}</span>
<span *ngIf="schema.description">
<ng-template #tooltip i18n="@@tooltip--description">{{ schema.description }}</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltip"
i18n-aria-label="@@tooltip--instruction"
aria-label="Information icon - press spacebar to read additional information for this form field"></i>
</span>
</label>
<span *ngIf="schema.description" class="formHelp">{{schema.description}}</span>
<span *ngIf="schema.description" class="sr-only">{{ schema.description }}</span>
<input [name]="name"
[attr.readonly]="schema.readOnly?true:null"
class="text-widget.id textline-widget form-control"
Expand All @@ -12,6 +19,6 @@
[attr.placeholder]="schema.placeholder"
[attr.maxLength]="schema.maxLength || null"
[attr.minLength]="schema.minLength || null"
[attr.disabled]="!formProperty.visible">
[attr.disabled]="(schema.widget.id=='color' && schema.readOnly)?true:null">
<input *ngIf="(schema.widget.id === 'color' && schema.readOnly)" [attr.name]="name" type="hidden" [formControl]="control">
</div>
Empty file.
3 changes: 2 additions & 1 deletion ui/src/app/schema-form/widget/text/string.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { ControlWidget } from 'ngx-schema-form';

@Component({
selector: 'custom-string',
templateUrl: `./string.component.html`
templateUrl: `./string.component.html`,
styleUrls: ['../widget.component.scss']
})
export class CustomStringComponent extends ControlWidget {

Expand Down
7 changes: 7 additions & 0 deletions ui/src/app/schema-form/widget/widget.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
:host {
.widget {
.popover {

}
}
}
3 changes: 2 additions & 1 deletion ui/src/app/shared/shared.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ import { PrettyXml } from './pipe/pretty-xml.pipe';
FormsModule,
InputDefaultsDirective,
I18nTextComponent,
ValidFormIconComponent
ValidFormIconComponent,
InfoLabelDirective
]
})
export class SharedModule { }
16 changes: 8 additions & 8 deletions ui/src/assets/schema/provider/filebacked-http-common.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@
},
"metadataURL": {
"title": "Metadata URL",
"description": "",
"description": "Metadata URL",
"type": "string"
},
"initializeFromBackupFile": {
"title": "Initialize From Backup File?",
"description": "",
"description": "Initialize From Backup File?",
"type": "boolean",
"widget": {
"id": "boolean-radio"
Expand All @@ -47,7 +47,7 @@
},
"backingFile": {
"title": "Backing File",
"description": "",
"description": "Backing File",
"type": "string",
"visibleIf": {
"initializeFromBackupFile": [
Expand All @@ -57,7 +57,7 @@
},
"backupFileInitNextRefreshDelay": {
"title": "Backup File Init Next Refresh Delay",
"description": "",
"description": "Backup File Init Next Refresh Delay",
"type": "string",
"visibleIf": {
"initializeFromBackupFile": [
Expand All @@ -67,7 +67,7 @@
},
"requireValidMetadata": {
"title": "Require Valid Metadata?",
"description": "",
"description": "Require Valid Metadata?",
"type": "boolean",
"widget": {
"id": "boolean-radio"
Expand All @@ -90,7 +90,7 @@
},
"failFastInitialization": {
"title": "Fail Fast Initialization?",
"description": "",
"description": "Fail Fast Initialization?",
"type": "boolean",
"widget": {
"id": "boolean-radio"
Expand All @@ -113,7 +113,7 @@
},
"useDefaultPredicateRegistry": {
"title": "Use Default Predicate Registry?",
"description": "",
"description": "Use Default Predicate Registry?",
"type": "boolean",
"widget": {
"id": "boolean-radio"
Expand All @@ -136,7 +136,7 @@
},
"satisfyAnyPredicates": {
"title": "Satisy Any Predicates?",
"description": "",
"description": "Satisy Any Predicates?",
"type": "boolean",
"widget": {
"id": "boolean-radio"
Expand Down

0 comments on commit 909719e

Please sign in to comment.