fix: datapicker issues in ghg policy[3141]

hashgraph · Dec 28, 2024 · ea76b28 · ea76b28
1 parent b166083
commit ea76b28
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 36 deletions.
diff --git a/frontend/src/app/modules/common/datetime-picker/datetime-picker.component.html b/frontend/src/app/modules/common/datetime-picker/datetime-picker.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-    <p-calendar [(ngModel)]="value"
+    <p-calendar [(ngModel)]="currentDate"
                 (onSelect)="onValue($event)"
                 [placeholder]="placeholder"
                 [disabled]="readonly"
@@ -10,6 +10,8 @@
                 [stepMinute]="stepMinute"
                 [stepSecond]="stepSecond"
                 [touchUI]="touchUi"
-                class="p-inputtext">
+                class="p-inputtext"
+                [appendTo]="appendTo ? 'body' : null"
+    >
     </p-calendar>
 </div>
diff --git a/frontend/src/app/modules/common/datetime-picker/datetime-picker.component.ts b/frontend/src/app/modules/common/datetime-picker/datetime-picker.component.ts
@@ -12,8 +12,9 @@ import moment from 'moment';
 export class DatetimePicker {
     @Input() placeholder!: string;
     @Input() readonly!: boolean;
-    @Input() value!: Date;
+    @Input() value!: string;
     @Input() format!: any;
+    @Input() appendTo: string | null = null;
     @Output() valueChange = new EventEmitter<string>();
 
     private _currentValue!: string;
@@ -27,17 +28,22 @@ export class DatetimePicker {
     public stepMinute = 5;
     public stepSecond = 1;
     public defaultTime = [new Date().getHours(), 0, 0]
+    public currentDate: Date
 
     constructor() {
     }
 
     ngOnInit() {
         this.placeholder = this.placeholder || 'Choose a date & time';
+        if (this.value) {
+            this.currentDate = new Date(this.value);
+        }
     }
 
     onValue(event: Date) {
         const utcValue = moment(event).utc().toISOString();
-        if (this.value !== event) {
+
+        if (this.value !== utcValue) {
             this.valueChange.emit(utcValue);
         }
     }

diff --git a/...rc/app/modules/policy-engine/dialogs/cron-config-dialog/cron-config-dialog.component.html b/...rc/app/modules/policy-engine/dialogs/cron-config-dialog/cron-config-dialog.component.html
@@ -1,18 +1,22 @@
-<h1 mat-dialog-title>Custom Period</h1>
-<div mat-dialog-content class="dialog-content" [attr.started]="started">
+<h1 class="dialog-title">Custom Period</h1>
+<div class="dialog-content" [attr.started]="started">
     <form [formGroup]="dataForm" (ngSubmit)="onSubmit()">
         <div class="c1">
-            <div class="f1" style="padding: 6px 4px; margin-right: 8px;">
+            <div class="f1">
                 <label for="startDate">Start Date:</label>
                 <p-calendar
                     id="startDate"
-                    [(ngModel)]="startDate"
-                    [readonlyInput]="true"
-                    dateFormat="dd/mm/yy">
-                </p-calendar>
+                    formControlName="startDate"
+                    dateFormat="dd/mm/yy"
+                    [appendTo]="'body'"
+                    [hourFormat]="'12'"
+                    [showTime]="true"
+                    [stepHour]="true"
+                    [stepMinute]="true"
+                ></p-calendar>
             </div>
 
-            <div class="f1" style="padding: 15px 10px; margin-left: 28px;">
+            <div class="f1">
                 <label for="interval">Interval:</label>
                 <input
                     id="interval"
@@ -24,19 +28,20 @@ <h1 mat-dialog-title>Custom Period</h1>
                     (change)="selectPeriod()">
             </div>
 
-            <div class="f1" style="padding: 15px 10px; margin-left: 8px;">
+            <div class="f1">
                 <label for="period">Period:</label>
                 <p-dropdown
                     id="period"
-                    [(ngModel)]="period"
+                    formControlName="period"
                     [options]="periodOptions"
                     placeholder="Select a period"
-                    (onChange)="selectPeriod()">
-                </p-dropdown>
+                    (onChange)="selectPeriod()"
+                    [appendTo]="'body'"
+                ></p-dropdown>
             </div>
         </div>
 
-        <div class="delimiter"></div>
+            <div class="delimiter"></div>
 
         <div *ngIf="period=='week'" style="height: 80px;width: 100%;"></div>
         <div *ngIf="period=='month'" style="height: 120px;width: 100%;"></div>
@@ -47,19 +52,19 @@ <h1 mat-dialog-title>Custom Period</h1>
         <div class="delimiter"></div>
         <p-accordion [multiple]="true">
             <p-accordionTab header="Cron Mask (advanced)">
-                <div class="form-group">
+                <div class="form-group input-mask-container">
                     <label>* Mask: minute hour day(month) month day(week)</label>
                     <input pInputText type="text" placeholder="* * * * *" formControlName="mask"
                            class="example-full-width"/>
                 </div>
             </p-accordionTab>
         </p-accordion>
 
-        <div mat-dialog-actions>
-            <button mat-raised-button color="primary" type="submit" [attr.started]="started"
-                    [disabled]="!dataForm.valid">Ok
-            </button>
-            <button mat-button type="button" (click)="onNoClick()">Cancel</button>
+        <div class="dialog-actions">
+            <p-button label="Ok" icon="pi pi-check" type="submit" [attr.started]="started"
+                      [disabled]="!dataForm.valid" styleClass="p-button-ok p-button-primary"></p-button>
+            <p-button label="Cancel" icon="pi pi-times" type="button" (click)="onNoClick()"
+                      styleClass="p-button-cancel"></p-button>
         </div>
     </form>
 

diff --git a/...rc/app/modules/policy-engine/dialogs/cron-config-dialog/cron-config-dialog.component.scss b/...rc/app/modules/policy-engine/dialogs/cron-config-dialog/cron-config-dialog.component.scss
@@ -36,24 +36,24 @@ form {
 
 .f1 {
     height: 50px;
-    border: 1px solid #dfdfdf;
     border-radius: 4px;
     margin-bottom: 10px;
     position: relative;
-    margin-top: 10px;
+    margin-top: 20px;
     box-sizing: border-box;
 }
 
 
-.f1 mat-label {
+.f1 label {
     position: absolute;
     background: #fff;
     font-size: 11px;
     color: rgb(0 0 0 / 60%);
     line-height: 11px;
-    top: -4px;
-    left: 4px;
+    top: -5px;
+    left: 15px;
     padding: 0 5px;
+    z-index: 100;
 }
 
 .delimiter {
@@ -139,4 +139,57 @@ mat-accordion {
     position: relative;
     left: -6px;
     width: 516px;
-}
+}
+
+.dialog-title {
+    margin: 0 0 10px 0;
+    font-size: 22px;
+    font-weight: 500;
+    font-family: 'Roboto', sans-serif;
+}
+
+.input-mask-container {
+    position: relative;
+}
+
+.input-mask-container label {
+    position: absolute;
+    font-size: 12px;
+    top: -7px;
+    left: 15px;
+    background: white;
+    color: gray;
+    padding: 0 4px;
+}
+
+.input-mask-container input {
+    width: 465px;
+}
+
+.dialog-actions {
+    display: flex;
+    justify-content: flex-start;
+    gap: 10px;
+    margin-top: 30px;
+}
+
+::ng-deep .p-dialog .p-button {
+    background-color: var(--color-grey-white);
+    color: var(--primary-color);
+    border-radius: 20px;
+    padding: 8px 24px;
+    font-weight: bold;
+}
+
+::ng-deep .p-dialog .p-button-ok {
+    background-color: var(--primary-color);
+    color: var(--color-grey-white);
+}
+
+::ng-deep .p-dialog .p-button:hover {
+    background-color: var(--blue-100);
+}
+
+::ng-deep .p-dialog .p-button-ok:hover {
+    background-color: var(--blue-700);
+}
diff --git a/.../src/app/modules/policy-engine/dialogs/cron-config-dialog/cron-config-dialog.component.ts b/.../src/app/modules/policy-engine/dialogs/cron-config-dialog/cron-config-dialog.component.ts
@@ -1,5 +1,5 @@
 import {Component, Inject} from '@angular/core';
-import {UntypedFormBuilder, Validators} from '@angular/forms';
+import {FormControl, UntypedFormBuilder, Validators} from '@angular/forms';
 import moment from 'moment';
 import cronstrue from 'cronstrue';
 import {DynamicDialogConfig, DynamicDialogRef} from 'primeng/dynamicdialog';
@@ -20,6 +20,11 @@ export class CronConfigDialog {
     dataForm = this.fb.group({
         mask: ['* * * * *', Validators.required],
         interval: [1, Validators.required],
+        period: ['week', Validators.required],
+        startDate: new FormControl(
+            { value: new Date(), disabled: true },
+            Validators.required
+        ),
     });
 
     weekDay = {
@@ -66,8 +71,7 @@ export class CronConfigDialog {
 
         if (data.startDate) {
             this.startDate = new Date(data.startDate) as Date;
-        } else {
-            this.startDate = new Date() as Date;
+            this.dataForm.patchValue({ startDate: this.startDate })
         }
 
         this.period = 'week';
@@ -247,6 +251,8 @@ export class CronConfigDialog {
     }
 
     selectPeriod() {
+        this.period = this.dataForm.get('period')?.value;
+        console.log("this.period", this.period);
         this.setMask(this.getMask());
         this.setText(this.getMaskByInterval());
     }
@@ -263,7 +269,7 @@ export class CronConfigDialog {
 
     setMask(mask: string) {
         const data = this.dataForm.value;
-        this.dataForm.setValue({mask: mask, interval: data.interval});
+        this.dataForm.patchValue({ mask, interval: data.interval })
     }
 
     setText(mask: string) {

diff --git a/...icy-engine/policy-configuration/blocks/documents/timer-config/timer-config.component.html b/...icy-engine/policy-configuration/blocks/documents/timer-config/timer-config.component.html
@@ -12,14 +12,22 @@
         <td class="propRowCol"></td>
         <td class="propRowCell cellName">Start Date</td>
         <td class="propRowCell">
-            <datetime-picker [(value)]="properties.startDate" [readonly]="readonly"></datetime-picker>
+            <datetime-picker
+                [(value)]="properties.startDate"
+                [readonly]="readonly"
+                [appendTo]="'body'"
+            ></datetime-picker>
         </td>
     </tr>
     <tr class="propRow" [attr.collapse]="propHidden.options">
         <td class="propRowCol"></td>
         <td class="propRowCell cellName">End Date</td>
         <td class="propRowCell">
-            <datetime-picker [(value)]="properties.endDate" [readonly]="readonly"></datetime-picker>
+            <datetime-picker
+                [(value)]="properties.endDate"
+                [readonly]="readonly"
+                [appendTo]="'body'"
+            ></datetime-picker>
         </td>
     </tr>
     <tr class="propRow" [attr.collapse]="propHidden.options">
@@ -31,7 +39,9 @@
                 [disabled]="readonly"
                 (onHide)="selectPeriod()"
                 placeholder="Select a period"
-                [options]="periodOptions">
+                [options]="periodOptions"
+                [appendTo]="'body'"
+            >
             </p-dropdown>
         </td>
     </tr>

diff --git a/...icy-engine/policy-configuration/blocks/documents/timer-config/timer-config.component.scss b/...icy-engine/policy-configuration/blocks/documents/timer-config/timer-config.component.scss
@@ -0,0 +1,3 @@
+.propRowCell {
+    height: 38px
+}