SHIBUI-578 Added required field markers

ui/src/app/schema-form/registry.ts

@@ -15,6 +15,7 @@ import { DatalistComponent } from './widget/datalist/datalist.component';
 import { CustomCheckboxComponent } from './widget/check/checkbox.component';
 import { CustomTextAreaComponent } from './widget/textarea/textarea.component';
 import { CustomArrayComponent } from './widget/array/array.component';
+import { CustomIntegerComponent } from './widget/number/number.component';
 
 
 export class CustomWidgetRegistry extends WidgetRegistry {
@@ -44,13 +45,13 @@ export class CustomWidgetRegistry extends WidgetRegistry {
 
         this.register('textarea', CustomTextAreaComponent);
 
+        this.register('integer', CustomIntegerComponent);
+        this.register('number', CustomIntegerComponent);
+
         this.register('datalist', DatalistComponent);
 
         /* NGX-Form */
         this.register('object', ObjectWidget);
-
-        this.register('integer', IntegerWidget);
-        this.register('number', IntegerWidget);
         this.register('range', RangeWidget);
 
         this.register('file', FileWidget);

ui/src/app/schema-form/schema-form.module.ts

@@ -14,6 +14,7 @@ import { DatalistComponent } from './widget/datalist/datalist.component';
 import { CustomCheckboxComponent } from './widget/check/checkbox.component';
 import { CustomTextAreaComponent } from './widget/textarea/textarea.component';
 import { CustomArrayComponent } from './widget/array/array.component';
+import { CustomIntegerComponent } from './widget/number/number.component';
 
 export const COMPONENTS = [
     BooleanRadioComponent,
@@ -23,7 +24,8 @@ export const COMPONENTS = [
     DatalistComponent,
     CustomCheckboxComponent,
     CustomTextAreaComponent,
-    CustomArrayComponent
+    CustomArrayComponent,
+    CustomIntegerComponent
 ];
 
 @NgModule({

ui/src/app/schema-form/service/schema.service.ts

@@ -12,4 +12,21 @@ export class SchemaService {
     get(path: string): Observable<any> {
         return this.http.get<any>(`${path}`);
     }
+
+    isRequired(formProperty: any): boolean {
+        let required = false;
+        let requiredFields = formProperty.parent.schema.required || [];
+        let fieldPath = formProperty.path;
+        let controlName = fieldPath.substr(fieldPath.lastIndexOf('/') + 1);
+        required = requiredFields.indexOf(controlName) > -1;
+
+        if (!required) {
+            const conditions = formProperty.parent.schema.anyOf || [];
+            conditions.forEach(el => {
+                requiredFields = el.required || [];
+                required = !required ? requiredFields.indexOf(controlName) > -1 : required;
+            });
+        }
+        return required;
+    }
 }

ui/src/app/schema-form/widget/datalist/datalist.component.html

@@ -1,6 +1,9 @@
 <div class="widget form-group">
     <label [attr.for]="id" class="d-flex justify-content-between control-label">
-        <span>{{ schema.title }}</span>
+        <span>
+            {{ schema.title }}
+            <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
+        </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"
@@ -16,6 +19,7 @@
         [matches]="schema.widget.data"
         [required]="true"
         [dropdown]="true"
+        [placeholder]="schema.placeholder"
         role="textbox"
         aria-label="Name ID Format (type for auto-complete)">
     </auto-complete>

ui/src/app/schema-form/widget/datalist/datalist.component.ts

@@ -1,10 +1,20 @@
 import { Component, OnChanges } from '@angular/core';
 
 import { ControlWidget } from 'ngx-schema-form';
-import { OneOf } from '../../model/one-of';
+import { SchemaService } from '../../service/schema.service';
 
 @Component({
     selector: 'datalist-component',
     templateUrl: `./datalist.component.html`
 })
-export class DatalistComponent extends ControlWidget {}
+export class DatalistComponent extends ControlWidget {
+    constructor(
+        private widgetService: SchemaService
+    ) {
+        super();
+    }
+
+    get required(): boolean {
+        return this.widgetService.isRequired(this.formProperty);
+    }
+}

ui/src/app/schema-form/widget/number/number.component.html

@@ -0,0 +1,21 @@
+<div class="widget form-group">
+    <label [attr.for]="id" class="d-flex justify-content-between control-label">
+        <span>{{ schema.title }} <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i></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>
+    <input [attr.readonly]="schema.readOnly?true:null"
+        [name]="name"
+        class="text-widget integer-widget form-control"
+        [formControl]="control"
+        [attr.type]="'number'" [attr.min]="schema.minimum" [attr.max]="schema.maximum"
+        [attr.placeholder]="schema.placeholder"
+        [attr.maxLength]="schema.maxLength || null"
+        [attr.minLength]="schema.minLength || null">
+</div>

ui/src/app/schema-form/widget/number/number.component.ts

@@ -0,0 +1,21 @@
+import {
+    Component,
+} from '@angular/core';
+import { IntegerWidget } from 'ngx-schema-form';
+import { SchemaService } from '../../service/schema.service';
+
+@Component({
+    selector: 'integer-component',
+    templateUrl: `./number.component.html`
+})
+export class CustomIntegerComponent extends IntegerWidget {
+    constructor(
+        private widgetService: SchemaService
+    ) {
+        super();
+    }
+
+    get required(): boolean {
+        return this.widgetService.isRequired(this.formProperty);
+    }
+}

ui/src/app/schema-form/widget/select/select.component.html

@@ -1,6 +1,9 @@
 <div class="widget form-group">
     <label [attr.for]="id" class="horizontal control-label" *ngIf="schema.title">
-        {{ schema.title }}
+        <span>
+            {{ schema.title }}
+            <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
+        </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"
@@ -12,8 +15,12 @@
     <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 disabled selected>{{ schema.title }}</option>
+    <select *ngIf="schema.type !== 'array'"
+        [formControl]="control"
+        [attr.name]="name"
+        [attr.disabled]="schema.readOnly"
+        class="form-control">
+        <option disabled selected>{{ schema.placeholder || schema.title }}</option>
         <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">

ui/src/app/schema-form/widget/select/select.component.ts

@@ -1,9 +1,20 @@
 import { Component } from '@angular/core';
 
-import { ControlWidget } from 'ngx-schema-form';
+import { SelectWidget } from 'ngx-schema-form';
+import { SchemaService } from '../../service/schema.service';
 
 @Component({
     selector: 'select-component',
     templateUrl: `./select.component.html`
 })
-export class CustomSelectComponent extends ControlWidget { }
+export class CustomSelectComponent extends SelectWidget {
+    constructor(
+        private widgetService: SchemaService
+    ) {
+        super();
+    }
+
+    get required(): boolean {
+        return this.widgetService.isRequired(this.formProperty);
+    }
+}

ui/src/app/schema-form/widget/text/string.component.html

@@ -1,6 +1,6 @@
 <div class="widget form-group">
     <label [attr.for]="id" class="d-flex justify-content-between control-label">
-        <span>{{ schema.title }}</span>
+        <span>{{ schema.title }} <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i></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"
@@ -25,7 +25,7 @@
     <small class="form-text text-danger" *ngIf="errorMessages && errorMessages.length && control.touched">
         {{ errorMessages }}
     </small>
-    <small class="form-text text-muted" *ngIf="!(control.touched && errorMessages.length) && schema.widget.help">
+    <small class="form-text text-muted" *ngIf="!(control.touched && errorMessages && errorMessages.length) && schema.widget.help">
         {{ schema.widget.help }}
     </small>
-</div>
+</div>

ui/src/app/schema-form/widget/text/string.component.ts

@@ -1,9 +1,21 @@
 import { Component } from '@angular/core';
 import { StringWidget } from 'ngx-schema-form';
+import { SchemaService } from '../../service/schema.service';
 
 @Component({
     selector: 'custom-string',
     templateUrl: `./string.component.html`,
     styleUrls: ['../widget.component.scss']
 })
-export class CustomStringComponent extends StringWidget {}
+export class CustomStringComponent extends StringWidget {
+
+    constructor(
+        private widgetService: SchemaService
+    ) {
+        super();
+    }
+
+    get required(): boolean {
+        return this.widgetService.isRequired(this.formProperty);
+    }
+}

ui/src/app/schema-form/widget/textarea/textarea.component.html

@@ -1,6 +1,9 @@
 <div class="widget form-group">
     <label [attr.for]="id" class="d-flex justify-content-between control-label">
-        <span>{{ schema.title }}</span>
+        <span>
+            {{ schema.title }}
+            <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
+        </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"

ui/src/app/schema-form/widget/textarea/textarea.component.ts

@@ -1,9 +1,20 @@
 import { Component } from '@angular/core';
 
 import { TextAreaWidget } from 'ngx-schema-form';
+import { SchemaService } from '../../service/schema.service';
 
 @Component({
   selector: 'textarea-component',
   templateUrl: `./textarea.component.html`
 })
-export class CustomTextAreaComponent extends TextAreaWidget {}
+export class CustomTextAreaComponent extends TextAreaWidget {
+    constructor(
+        private widgetService: SchemaService
+    ) {
+        super();
+    }
+
+    get required(): boolean {
+        return this.widgetService.isRequired(this.formProperty);
+    }
+}

ui/src/app/shared/autocomplete/autocomplete.component.html

@@ -11,6 +11,7 @@
             type="text"
             role="textbox"
             [attr.aria-activedescendant]="activeDescendant"
+            [placeholder]="placeholder"
             attr.aria-owns="{{ id }}__listbox"
             (focus)="handleInputFocus()"
             (blur)="handleInputBlur()"

ui/src/app/shared/autocomplete/autocomplete.component.ts

@@ -49,6 +49,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
     @Input() limit = 0;
     @Input() processing = false;
     @Input() dropdown = false;
+    @Input() placeholder = '';
 
     @Output() more: EventEmitter<any> = new EventEmitter<any>();
     @Output() onChange: EventEmitter<string> = new EventEmitter<string>();