Feature/refactor form view (hashgraph#4469)

* refator && fixes Signed-off-by: simvalery <[email protected]> * fix Signed-off-by: simvalery <[email protected]> * fix sentinel hub Signed-off-by: simvalery <[email protected]> * fix Signed-off-by: simvalery <[email protected]> * fixes Signed-off-by: simvalery <[email protected]> * fix document view image Signed-off-by: simvalery <[email protected]> * fix from Signed-off-by: simvalery <[email protected]> * fix time array Signed-off-by: simvalery <[email protected]> * fix Signed-off-by: simvalery <[email protected]> * readOnly dateTime input Signed-off-by: simvalery <[email protected]> * invalid border color Signed-off-by: simvalery <[email protected]> * fixes Signed-off-by: simvalery <[email protected]> * fix Signed-off-by: simvalery <[email protected]> --------- Signed-off-by: simvalery <[email protected]>
InternetOfPeers · Dec 12, 2024 · b90a2a3 · b90a2a3
1 parent a529185
commit b90a2a3
Show file tree

Hide file tree

Showing 15 changed files with 391 additions and 70 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/app/modules/schema-engine/field-control.ts b/frontend/src/app/modules/schema-engine/field-control.ts
@@ -44,7 +44,6 @@ export class FieldControl {
         entityType?: UntypedFormControl,
         name?: string
     ) {
-        console.log(field);
         this._defaultFieldMap = defaultFieldMap;
         this._entityType = entityType;
         this.name = `field${Date.now()}${Math.floor(Math.random() * 1000000)}`;

diff --git a/frontend/src/app/modules/schema-engine/schema-engine.module.ts b/frontend/src/app/modules/schema-engine/schema-engine.module.ts
@@ -43,6 +43,8 @@ import { TooltipModule } from 'primeng/tooltip';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { AccordionModule } from 'primeng/accordion';
 import { DateTimeComponent } from './schema-form/controls/date-time/date-time.component';
+import { EnumComponent } from './schema-form/controls/enum/enum';
+import { InputComponent } from './schema-form/controls/input/input';
 
 @NgModule({
     declarations: [
@@ -66,7 +68,9 @@ import { DateTimeComponent } from './schema-form/controls/date-time/date-time.co
         ServiceUnavailableDialog,
         SchemaTreeComponent,
         SchemaFormDialog,
-        DateTimeComponent
+        DateTimeComponent,
+        EnumComponent,
+        InputComponent
     ],
     imports: [
         CommonModule,
@@ -104,8 +108,7 @@ import { DateTimeComponent } from './schema-form/controls/date-time/date-time.co
         VCViewerDialog,
         ExportSchemaDialog,
         SchemaFieldConfigurationComponent,
-        SchemaFormDialog,
-        DateTimeComponent
+        SchemaFormDialog
     ],
 })
 export class SchemaEngineModule { }
diff --git a/frontend/src/app/modules/schema-engine/schema-form/controls/controls.module.ts b/frontend/src/app/modules/schema-engine/schema-form/controls/controls.module.ts
@@ -0,0 +1,50 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DateTimeComponent } from './date-time/date-time.component';
+import { EnumComponent } from './enum/enum';
+import { InputComponent } from './input/input';
+import { InputTextModule } from 'primeng/inputtext';
+import { CalendarModule } from 'primeng/calendar';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { InputNumberModule } from 'primeng/inputnumber';
+import { CheckboxModule } from 'primeng/checkbox';
+import { DropdownModule } from 'primeng/dropdown';
+import { NgxMatDatetimePickerModule, NgxMatNativeDateModule, NgxMatTimepickerModule, } from '@angular-material-components/datetime-picker';
+import { MaterialModule } from '../../../common/material.module';
+import { CommonComponentsModule } from '../../../common/common-components.module';
+import { ArtifactEngineModule } from '../../../artifact-engine/artifact-engine.module';
+import { CodemirrorModule } from '@ctrl/ngx-codemirror';
+import { GoogleMapsModule } from '@angular/google-maps';
+
+NgModule({
+    declarations: [
+        DateTimeComponent,
+        EnumComponent,
+        InputComponent
+    ],
+    exports: [
+        DateTimeComponent,
+        EnumComponent,
+        InputComponent
+    ],
+    imports: [
+        CommonComponentsModule,
+        CodemirrorModule,
+        ArtifactEngineModule,
+        GoogleMapsModule,
+        MaterialModule,
+        NgxMatDatetimePickerModule,
+        NgxMatNativeDateModule,
+        NgxMatTimepickerModule,
+        InputTextModule,
+        FormsModule,
+        CalendarModule,
+        InputTextareaModule,
+        CheckboxModule,
+        DropdownModule,
+        InputNumberModule
+    ]
+})
+
+export class ControlsModule{
+}
diff --git a/frontend/src/app/modules/schema-engine/schema-form/controls/date-time/date-time.component.ts b/frontend/src/app/modules/schema-engine/schema-form/controls/date-time/date-time.component.ts
@@ -3,23 +3,26 @@ import { UntypedFormControl } from '@angular/forms';
 import * as moment from 'moment';
 import { Subject, Subscription } from 'rxjs';
 
+type InputType = 'default' | 'test' | 'suggest';
+
 @Component({
-    selector: 'date-time',
+    selector: 'date-time-control',
     templateUrl: './date-time.component.html',
     styleUrls: ['./date-time.component.scss'],
 })
 export class DateTimeComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy{
     @Input('control') control: UntypedFormControl;
     @Input('showIcon') showIcon: boolean = true;
     @Input('showSeconds') showSeconds: boolean = true;
-    @Input('showTime') showTime: boolean = true;
+    @Input('showTime') showTime: boolean;
     @Input('timeOnly') timeOnly: boolean = false;
     @Input('dateFormat') dateFormat: string = 'yy-mm-dd';
     @Input('item') item: any;
     @Input('isMany') isMany: boolean = false;
     @Input('index') isDisabled?: number;
     @Input('update') update?: Subject<any>;
     @Input('value') value?: string;
+    @Input('type') type?: InputType;
 
     @ViewChild('calendar') calendar: any
 
@@ -31,18 +34,21 @@ export class DateTimeComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     }
 
     ngOnInit() {
-        if (this.item.subject) {
-            this.item.subject.subscribe(() => {
+        // if (this.item.subject) {
+        this.subscription.add(
+            this.control.valueChanges.subscribe(() => {
                 this.fillField();
             })
-        }
+        );
+        // }
     }
 
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
 
     ngAfterViewInit() {
+        (this.calendar?.el.nativeElement.querySelector('input') as HTMLInputElement).readOnly = true;
         // if (this.isMany) {
             this.fillField();
         // }
@@ -55,28 +61,42 @@ export class DateTimeComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     fillField() {
         const comment = this.item?.field?.comment && JSON.parse(this.item.field.comment);
         let value: any = null;
-        if (this.value) {
-            value = this.value;
-        } else if (this.timeOnly && comment?.suggest) {
-            value = comment.suggest;
+        if (this.timeOnly && this.type && comment && comment[this.type]) {
+            value = comment[this.type];
         } else if (this.calendar?.value) {
             value = this.calendar?.value;
         } else if (this.item.value) {
             value = this.item.value;
+        } else if (this.item.preset) {
+            value = this.item.preset;
         }
 
-        const input = this.calendar?.el.nativeElement.querySelector('input')
-
         setTimeout(() => {
+            const input = this.calendar?.el.nativeElement.querySelector('input');
             if (input && value) {
                 if (this.timeOnly) {
-                    const date = moment(value, 'hh-mm-ss').toDate();
-                    this.control.setValue(date);
-                    input.value = value;
+                    const date = moment(value, 'hh:mm:ss');
+                    this.control.setValue(date.format('HH:mm:ss'), {
+                        emitEvent: false,
+                        emitModelToViewChange: false
+                    });
+                    input.value = moment(value, 'hh:mm:ss').format('HH:mm:ss');
+                } else if (!this.showTime) {
+                    const date = moment(value, 'YYYY-MM-DD');
+                    this.control.setValue(date.format('YYYY-MM-DD'), {
+                        emitEvent: false,
+                        emitModelToViewChange: false
+                    });
+                    input.value = moment(value, 'YYYY-MM-DD').format('YYYY-MM-DD');
                 } else {
-                    input.value = moment(value).format('YYYY-MM-DD HH:mm:ss');
+                    const date = moment(value);
+                    this.control.setValue(date.toISOString(), {
+                        emitEvent: false,
+                        emitModelToViewChange: false
+                    })
+                    input.value = moment(value).toISOString();
                 }
             }
-        })
+        }, 100)
     }
 }
diff --git a/frontend/src/app/modules/schema-engine/schema-form/controls/enum/enum.html b/frontend/src/app/modules/schema-engine/schema-form/controls/enum/enum.html
@@ -0,0 +1,9 @@
+<p-calendar #calendar
+            [dateFormat]="dateFormat"
+            [formControl]="control"
+            [showIcon]="showIcon"
+            [showSeconds]="showSeconds"
+            [showTime]="showTime"
+            [timeOnly]="timeOnly"
+            appendTo='body'
+            class="guardian-datepicker"></p-calendar>
diff --git a/frontend/src/app/modules/schema-engine/schema-form/controls/enum/enum.scss b/frontend/src/app/modules/schema-engine/schema-form/controls/enum/enum.scss
@@ -0,0 +1,20 @@
+.type-selector {
+  width: 100%;
+}
+
+.google-map-container {
+  margin-bottom: 20px;
+  margin-top: 5px;
+  box-shadow: 0px 0px 21px 0px rgba(34, 60, 80, 0.2);
+  border-radius: 5px;
+}
+
+:host .google-map-container ::ng-deep .map-container {
+  border-radius: 5px;
+}
+
+.switch-btn {
+  width: 180px;
+  height: 32px;
+  margin-bottom: 15px;
+}
diff --git a/frontend/src/app/modules/schema-engine/schema-form/controls/enum/enum.ts b/frontend/src/app/modules/schema-engine/schema-form/controls/enum/enum.ts
@@ -0,0 +1,82 @@
+import { AfterViewInit, Component, Input, NgZone, OnChanges, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
+import * as moment from 'moment';
+import { Subject, Subscription } from 'rxjs';
+
+@Component({
+    selector: 'enum-control',
+    templateUrl: './enum.html',
+    styleUrls: ['./enum.scss'],
+})
+export class EnumComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy{
+    @Input('control') control: UntypedFormControl;
+    @Input('showIcon') showIcon: boolean = true;
+    @Input('showSeconds') showSeconds: boolean = true;
+    @Input('showTime') showTime: boolean = true;
+    @Input('timeOnly') timeOnly: boolean = false;
+    @Input('dateFormat') dateFormat: string = 'yy-mm-dd';
+    @Input('item') item: any;
+    @Input('isMany') isMany: boolean = false;
+    @Input('index') isDisabled?: number;
+    @Input('update') update?: Subject<any>;
+    @Input('value') value?: string;
+
+    @ViewChild('calendar') calendar: any
+
+    private subscription = new Subscription();
+
+    constructor(
+        private ngZone: NgZone,
+    ) {
+    }
+
+    ngOnInit() {
+        if (this.item.subject) {
+            this.item.subject.subscribe(() => {
+                this.fillField();
+            })
+        }
+    }
+
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+
+    ngAfterViewInit() {
+        // if (this.isMany) {
+        this.fillField();
+        // }
+    }
+
+    ngOnChanges() {
+        this.fillField();
+    }
+
+    fillField() {
+        const comment = this.item?.field?.comment && JSON.parse(this.item.field.comment);
+        let value: any = null;
+        if (this.value) {
+            value = this.value;
+        } else if (this.timeOnly && comment?.suggest) {
+            value = comment.suggest;
+        } else if (this.calendar?.value) {
+            value = this.calendar?.value;
+        } else if (this.item.value) {
+            value = this.item.value;
+        }
+
+        const input = this.calendar?.el.nativeElement.querySelector('input')
+
+        setTimeout(() => {
+            if (input && value) {
+                if (this.timeOnly) {
+                    const date = moment(value, 'hh-mm-ss').toDate();
+                    this.control.setValue(date);
+                    input.value = value;
+                } else {
+                    input.value = moment(value).format('YYYY-MM-DD HH:mm:ss');
+                }
+            }
+        })
+    }
+}
diff --git a/frontend/src/app/modules/schema-engine/schema-form/controls/input/input.html b/frontend/src/app/modules/schema-engine/schema-form/controls/input/input.html
@@ -0,0 +1,9 @@
+<p-calendar #calendar
+            [dateFormat]="dateFormat"
+            [formControl]="control"
+            [showIcon]="showIcon"
+            [showSeconds]="showSeconds"
+            [showTime]="showTime"
+            [timeOnly]="timeOnly"
+            appendTo='body'
+            class="guardian-datepicker"></p-calendar>
diff --git a/frontend/src/app/modules/schema-engine/schema-form/controls/input/input.scss b/frontend/src/app/modules/schema-engine/schema-form/controls/input/input.scss
@@ -0,0 +1,20 @@
+.type-selector {
+  width: 100%;
+}
+
+.google-map-container {
+  margin-bottom: 20px;
+  margin-top: 5px;
+  box-shadow: 0px 0px 21px 0px rgba(34, 60, 80, 0.2);
+  border-radius: 5px;
+}
+
+:host .google-map-container ::ng-deep .map-container {
+  border-radius: 5px;
+}
+
+.switch-btn {
+  width: 180px;
+  height: 32px;
+  margin-bottom: 15px;
+}