From c75190513ab4e3a104536d4f5b334cd7bea5ff74 Mon Sep 17 00:00:00 2001
From: Midhun A Darvin <midhunadarvin@gmail.com>
Date: Sat, 3 Feb 2024 12:00:37 +0530
Subject: [PATCH] feat: update padding & styles

- apply padding fixes
- remove `enableTrigger` variable and directly use `simpleTriggerReactiveForm.enabled`
-  apply default styles of matInput
---
 .../logs-panel/logs-panel.component.html      | 10 +++---
 .../progress-panel.component.html             |  2 +-
 .../simple-trigger-config.component.html      | 34 ++++++-------------
 .../simple-trigger-config.component.spec.ts   |  4 +--
 .../simple-trigger-config.component.ts        |  9 +++--
 5 files changed, 22 insertions(+), 37 deletions(-)

diff --git a/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html b/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html
index eccd084b..fbe9cde9 100644
--- a/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html
+++ b/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html
@@ -8,25 +8,25 @@
           <img src="assets/image/logs.svg" alt="no logs" width="320" style="margin-top: 6em;" />
         </div>
       </div>
-      <div id="logs" style="overflow-y: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: auto;">
+      <div id="logs" style="overflow-y: auto; overflow: auto;">
         <div
             *ngFor = "let log of logs; let first = first" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start" fxLayoutGap="10px">
-            <div fxFlex="0 1 300px">
+            <div style="flex:1; max-width: 300px" >
                 <span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}"> [{{log.time|date:'medium'}}]</span>
             </div>
-            <div fxFlex="1 1 16px">
+            <div style="flex:1; max-width: 16px">
                 <span [ngClass]="{'animated zoomIn firstLog': first}">
                 <i class = "fas" [ngClass]="{'fa-check-circle green': log.type == 'INFO',
                                              'fa-exclamation-triangle yellow': log.type == 'WARN',
                                              'fa-times-circle red': log.type == 'ERROR'}"></i>
                 </span>
             </div>
-            <div fxFlex="0 1 250px">
+            <div style="flex:1; max-width: 250px">
                 <span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}">
                 {{log.threadName}}
                 </span>
             </div>
-            <div fxFlex="1 1">
+            <div style="flex:1">
                 <span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}"> {{log.msg}}</span>
             </div>
         </div>
diff --git a/quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.html b/quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.html
index 6816bcfc..8de090f1 100644
--- a/quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.html
+++ b/quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.html
@@ -7,7 +7,7 @@
 </div> -->
 
 <mat-card style="padding-bottom: 0">
-    <mat-card-header>
+    <mat-card-header style="padding-bottom: 16px;">
         <mat-card-subtitle><b>JOB PROGRESS</b></mat-card-subtitle>
     </mat-card-header>
     <mat-card-content>
diff --git a/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html b/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html
index a8109f4b..cdab9228 100644
--- a/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html
+++ b/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html
@@ -1,11 +1,11 @@
 <mat-card fxFlex="1 1 auto">
-  <mat-card-header>
+  <mat-card-header style="padding-bottom: 16px;">
     <mat-card-subtitle><b>TRIGGER DETAILS</b></mat-card-subtitle>
   </mat-card-header>
   <mat-divider></mat-divider>
   <mat-card-content *ngIf="shouldShowTheTriggerCardContent()" style="position: relative; height: 100%">
     <div fxLayout="column" style="overflow-y: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
-    overflow: auto;height: calc(100% - 3em); padding-top: 1em;">
+    overflow: auto;padding: 1em;">
       <mat-card id="noEligibleJobsAlert" *ngIf="jobs?.length === 0" style="background-color: #ff6385">
         <mat-card-content>
           <i class="fas fa-exclamation-circle" style="color: #fff"></i>&nbsp;<strong>WARNING</strong>
@@ -18,11 +18,9 @@
             [formGroup]="simpleTriggerReactiveForm" (ngSubmit)="onSubmitTriggerConfig()">
         <div>
           <mat-form-field
-            [appearance]="enabledTriggerForm && !trigger ? 'outline': 'fill'"
             class="full-size-input">
             <mat-label>Trigger Name</mat-label>
             <input id="triggerName"
-                   [readonly]="!enabledTriggerForm || trigger"
                    matInput placeholder="name of the trigger (unique)"
                    formControlName="triggerName" name="triggerName">
             <mat-error *ngIf="simpleTriggerReactiveForm.controls.triggerName.errors?.required">
@@ -33,11 +31,10 @@
 
         <div>
           <mat-form-field
-            [appearance]="enabledTriggerForm ? 'outline': 'fill'"
             class="full-size-input"
           >
             <mat-label>Job Class</mat-label>
-            <mat-select id="jobClass" name="jobClass" formControlName="jobClass" [disabled]="!enabledTriggerForm">
+            <mat-select id="jobClass" name="jobClass" formControlName="jobClass">
               <mat-option *ngFor="let job of jobs" [value]="job" style="font-size: 0.8em">
                 {{job}}
               </mat-option>
@@ -50,12 +47,11 @@
 
         <div>
           <mat-form-field
-            [appearance]="enabledTriggerForm ? 'outline': 'fill'"
             class="full-size-input"
           >
             <mat-label>Misfire Instruction</mat-label>
             <mat-select id="misfireInstruction" name="misfireInstruction" formControlName="misfireInstruction"
-                        [disabled]="!enabledTriggerForm" style="font-size: 0.8em">
+                        style="font-size: 0.8em">
               <mat-option value="MISFIRE_INSTRUCTION_FIRE_NOW">FIRE NOW</mat-option>
               <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_EXISTING_REPEAT_COUNT">RESCHEDULE NOW WITH
                 EXISTING REPEAT COUNT
@@ -82,12 +78,10 @@
         <div formGroupName="triggerPeriod">
           <div>
             <mat-form-field
-              [appearance]="enabledTriggerForm ? 'outline': 'fill'"
               class="full-size-input"
             >
               <mat-label>Start Date (optional)</mat-label>
               <input id="startDate"
-                     [readonly]="!enabledTriggerForm"
                      matInput
                      [ngxMatDatetimePicker]="startDatePicker" placeholder="Choose a start date"
                      formControlName="startDate" name="startDate">
@@ -99,12 +93,10 @@
 
           <div>
             <mat-form-field
-              [appearance]="enabledTriggerForm ? 'outline': 'fill'"
               class="full-size-input"
             >
               <mat-label>End Date (optional)</mat-label>
               <input id="endDate"
-                     [readonly]="!enabledTriggerForm"
                      matInput
                      [ngxMatDatetimePicker]="endDatePicker" placeholder="Choose a end date"
                      formControlName="endDate" name="endDate"
@@ -122,12 +114,10 @@
         <div formGroupName="triggerRecurrence">
           <div>
             <mat-form-field
-              [appearance]="enabledTriggerForm ? 'outline': 'fill'"
               class="full-size-input"
             >
               <mat-label>Repeat Interval [in mills]</mat-label>
               <input id="repeatInterval"
-                     [readonly]="!enabledTriggerForm"
                      matInput placeholder="Repeat Interval [in mills]" type="number"
                      formControlName="repeatInterval" name="repeatInterval"
               >
@@ -138,12 +128,10 @@
           </div>
           <div>
             <mat-form-field
-              [appearance]="enabledTriggerForm ? 'outline': 'fill'"
               class="full-size-input"
             >
               <mat-label>Repeat Count</mat-label>
               <input id="repeatCount"
-                     [readonly]="!enabledTriggerForm"
                      matInput placeholder="Repeat Count (-1 REPEAT INDEFINITELY)" type="number"
                      formControlName="repeatCount" name="repeatCount"
               >
@@ -158,26 +146,24 @@
         <br/>
 
         <div fxLayout="row" fxFlexAlign="space-evenly center" style="padding-bottom: 1em;">
-          <div fxFlex="1 1 auto" style="text-align: center" *ngIf="enabledTriggerForm">
+          <div fxFlex="1 1 auto" style="text-align: center" *ngIf="simpleTriggerReactiveForm.enabled">
             <button mat-raised-button
                     type="button"
-                    *ngIf="enabledTriggerForm"
                     (click)="onResetReactiveForm()">
               Cancel
             </button>
           </div>
-          <div fxFlex="1 1 auto" style="text-align: center" *ngIf="enabledTriggerForm">
+          <div fxFlex="1 1 auto" style="text-align: center" *ngIf="simpleTriggerReactiveForm.enabled">
             <button mat-raised-button
                     type="submit" color="primary"
-                    [disabled]="simpleTriggerReactiveForm.invalid"
-                    *ngIf="enabledTriggerForm">
+                    [disabled]="simpleTriggerReactiveForm.invalid">
               Submit
             </button>
           </div>
-          <div fxFlex="1 1 auto" style="text-align: center" *ngIf="!enabledTriggerForm">
+          <div fxFlex="1 1 auto" style="text-align: center" *ngIf="!simpleTriggerReactiveForm.enabled">
             <button mat-raised-button type="button"
-            *ngIf="!enabledTriggerForm"
-            (click)="enabledTriggerForm = true">
+            
+            (click)="simpleTriggerReactiveForm.enable()">
             Reschedule
             </button>
           </div>
diff --git a/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.spec.ts b/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.spec.ts
index 0cf93a7a..30c7b349 100644
--- a/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.spec.ts
+++ b/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.spec.ts
@@ -202,14 +202,14 @@ describe('SimpleTriggerConfig', () => {
     component.trigger = new SimpleTrigger();
     component.trigger.triggerKeyDTO = mockTriggerKey;
 
-    fixture.detectChanges();
-
     const mockTrigger = new Trigger();
     mockTrigger.triggerKeyDTO = mockTriggerKey;
     mockTrigger.jobDetailDTO = <JobDetail>{jobClassName: 'TestJob', description: null};
     const getSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/my-simple-trigger`);
     getSimpleTriggerReq.flush(mockTrigger);
 
+    fixture.detectChanges();
+
     const componentDe: DebugElement = fixture.debugElement;
     const submitButton = componentDe.query(By.css('form button'));
     expect(submitButton.nativeElement.textContent.trim()).toEqual('Reschedule');
diff --git a/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.ts b/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.ts
index 1b643aed..905684f3 100644
--- a/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.ts
+++ b/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.ts
@@ -43,8 +43,6 @@ export class SimpleTriggerConfigComponent implements OnInit {
 
   private jobs: Array<String>;
 
-  enabledTriggerForm = false;
-
   @Output()
   onNewTrigger = new EventEmitter<SimpleTrigger>();
 
@@ -64,11 +62,11 @@ export class SimpleTriggerConfigComponent implements OnInit {
   }
 
   openTriggerForm() {
-    this.enabledTriggerForm = true;
+    this.simpleTriggerReactiveForm.enable();
   }
 
   private closeTriggerForm() {
-    this.enabledTriggerForm = false;
+    this.simpleTriggerReactiveForm.disable();
   }
 
   @Input()
@@ -86,10 +84,11 @@ export class SimpleTriggerConfigComponent implements OnInit {
         this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(retTrigger))
         this.triggerLoading = false;
         this.triggerInProgress = this.trigger.mayFireAgain;
+        this.simpleTriggerReactiveForm.disable();
       })
   }
 
-  shouldShowTheTriggerCardContent = (): boolean => this.trigger !== null || this.enabledTriggerForm;
+  shouldShowTheTriggerCardContent = (): boolean => this.trigger !== null || this.simpleTriggerReactiveForm.enabled;
 
   existsATriggerInProgress = (): boolean => this.trigger && this.triggerInProgress;