Merge pull request #112 from stneveadomi/110-fix-live-validation-for-…

…forms Various bug fixes for new features.
stneveadomi · Sep 30, 2024 · 4a10f52 · 4a10f52
2 parents 59e3b00 + 2565f82
commit 4a10f52
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 39 deletions.
diff --git a/webview-ui/grepc-webview/src/app/rule/child-decoration/child-decoration.component.html b/webview-ui/grepc-webview/src/app/rule/child-decoration/child-decoration.component.html
@@ -44,7 +44,7 @@
         </div>
         <div class="row">
             <div class="indent"></div>
-            <div class="block">
+            <div class="input-label">
                 <label
                     [htmlFor]="rule.id + '-' + getTitle() + '-backgroundColor'">
                     background color:
@@ -67,7 +67,7 @@
         </div>
         <div class="row">
             <div class="indent"></div>
-            <div class="block">
+            <div class="input-label">
                 <label [htmlFor]="rule.id + '-' + getTitle() + '-color'">
                     color:
                     <a
@@ -111,7 +111,7 @@
         </div>
         <div class="row">
             <div class="indent"></div>
-            <div class="block">
+            <div class="input-label">
                 <label [htmlFor]="rule.id + '-' + getTitle() + '-borderColor'">
                     border color:
                 </label>

diff --git a/webview-ui/grepc-webview/src/app/rule/child-decoration/child-decoration.component.ts b/webview-ui/grepc-webview/src/app/rule/child-decoration/child-decoration.component.ts
@@ -44,35 +44,29 @@ export class ChildDecorationComponent
     rule!: Rule;
 
     @Output()
-    ruleChange = new EventEmitter<Rule>();
+    blurred = new EventEmitter<void>();
 
     isEditing = false;
 
-    formGroup = this.fb.nonNullable.group(
-        {
-            contentText: ['' as string | undefined],
-            border: ['', [CSSValidator.classValidator('border')]],
-            borderColor: [
-                '' as string | undefined,
-                [CSSValidator.classValidator('border-color')],
-            ],
-            fontStyle: ['', [CSSValidator.classValidator('font-style')]],
-            fontWeight: ['', [CSSValidator.classValidator('font-weight')]],
-            textDecoration: [
-                '',
-                [CSSValidator.classValidator('text-decoration')],
-            ],
-            color: ['', [CSSValidator.classValidator('color')]],
-            backgroundColor: [
-                '',
-                [CSSValidator.classValidator('background-color')],
-            ],
-            margin: ['', [CSSValidator.classValidator('margin')]],
-            width: ['', [CSSValidator.classValidator('width')]],
-            height: ['', [CSSValidator.classValidator('height')]],
-        },
-        { updateOn: 'blur' },
-    );
+    formGroup = this.fb.nonNullable.group({
+        contentText: ['' as string | undefined],
+        border: ['', [CSSValidator.classValidator('border')]],
+        borderColor: [
+            '' as string | undefined,
+            [CSSValidator.classValidator('border-color')],
+        ],
+        fontStyle: ['', [CSSValidator.classValidator('font-style')]],
+        fontWeight: ['', [CSSValidator.classValidator('font-weight')]],
+        textDecoration: ['', [CSSValidator.classValidator('text-decoration')]],
+        color: ['', [CSSValidator.classValidator('color')]],
+        backgroundColor: [
+            '',
+            [CSSValidator.classValidator('background-color')],
+        ],
+        margin: ['', [CSSValidator.classValidator('margin')]],
+        width: ['', [CSSValidator.classValidator('width')]],
+        height: ['', [CSSValidator.classValidator('height')]],
+    });
 
     constructor(
         private fb: FormBuilder,
@@ -140,6 +134,7 @@ export class ChildDecorationComponent
 
     updateColorPicker(control: string, value: string) {
         this.formGroup.get(control)?.setValue(value);
+        this.blurred.emit();
     }
 
     onFormFocus() {
@@ -150,6 +145,7 @@ export class ChildDecorationComponent
     onFormBlur() {
         this.isEditing = false;
         this.onTouched();
+        this.blurred.emit();
     }
 }
 

diff --git a/webview-ui/grepc-webview/src/app/rule/rule.component.html b/webview-ui/grepc-webview/src/app/rule/rule.component.html
@@ -81,6 +81,7 @@
                         {{ this.occurrenceData.occurrences }}
                     </span>
                     <app-slider-checkbox
+                        (toggles)="onToggle()"
                         [control]="this.ruleForm.controls['enabled']">
                     </app-slider-checkbox>
                 </div>
@@ -195,7 +196,7 @@
                     [style.display]="
                         getExpandedStyle(this.rule.decorationExpanded)
                     ">
-                    <div class="block">
+                    <div class="input-label">
                         <label [htmlFor]="this.rule.id + '-backgroundColor'">
                             background color:
                             <a
@@ -456,18 +457,20 @@
                             [id]="this.rule.id + '-isWholeLine'"
                             type="checkbox"
                             title="Check this to have the decoration apply for the whole line."
-                            (blur)="onFormBlur()"
+                            (change)="onValueChange()"
                             formControlName="isWholeLine" />
                     </div>
 
                     <app-child-decoration
                         formControlName="before"
+                        (blurred)="onFormBlur()"
                         [rule]="rule"
                         [id]="CHILD_DECORATION_TYPE.BEFORE">
                     </app-child-decoration>
 
                     <app-child-decoration
                         formControlName="after"
+                        (blurred)="onFormBlur()"
                         [rule]="rule"
                         [id]="CHILD_DECORATION_TYPE.AFTER">
                     </app-child-decoration>

diff --git a/webview-ui/grepc-webview/src/app/rule/rule.component.ts b/webview-ui/grepc-webview/src/app/rule/rule.component.ts
@@ -107,8 +107,8 @@ export class RuleComponent
         cursor: ['', [CSSValidator.classValidator('cursor')]],
         color: ['', [CSSValidator.classValidator('color')]],
         isWholeLine: [false],
-        before: [{} as ChildDecorationModel, { updateOn: 'blur' }],
-        after: [{} as ChildDecorationModel, { updateOn: 'blur' }],
+        before: [{} as ChildDecorationModel],
+        after: [{} as ChildDecorationModel],
     });
 
     @ViewChild('container')
@@ -132,12 +132,20 @@ export class RuleComponent
     }
 
     /**
-     * TODO: REVIEW THAT updateOn 'blur' didnt break everything...
-     * we got most fo the control stuff working.
+     * This method should only be called when we want to update local and extension rule states.
+     * This method will only update states when there is a confirmed difference between this.rule and the ruleForm value.
      *
-     * @returns
+     * For example, this is a separate method from onToggle as we only want onToggle to push rule state to the extension.
      */
     onValueChange = () => {
+        if (this.ruleForm.status !== 'VALID') {
+            this.logger.debug(
+                'rule.component.ts - status is not valid: ',
+                this.ruleForm.status,
+            );
+            return;
+        }
+
         if (this.isEditingTitle) {
             this.logger.debug(
                 'rule.component.ts - isEditingTitle, not pushing value change.',
@@ -160,6 +168,16 @@ export class RuleComponent
         this.ruleService.pushRules();
     };
 
+    /**
+     * Specifically only used for toggle enabled.
+     */
+    onToggle = () => {
+        this.rule.enabled = !this.rule.enabled;
+
+        this.ruleService.updateRule(this.rule);
+        this.ruleService.pushRulesToExtension();
+    };
+
     ngOnChanges(changes: SimpleChanges): void {
         const change = changes['rule'];
         if (change) {
@@ -174,7 +192,6 @@ export class RuleComponent
     ngOnInit() {
         this.dragData = this.rule.id;
         this.ruleForm.patchValue(this.rule);
-        this.ruleForm.valueChanges.subscribe(this.onValueChange);
         this.ruleService.register(this.rule.id, this);
     }
 
@@ -204,7 +221,7 @@ export class RuleComponent
     }
 
     onFormBlur() {
-        // NO-OP
+        this.onValueChange();
     }
 
     toggleExpand(event: Event) {

diff --git a/webview-ui/grepc-webview/src/app/slider-checkbox/slider-checkbox.component.ts b/webview-ui/grepc-webview/src/app/slider-checkbox/slider-checkbox.component.ts
@@ -6,7 +6,7 @@ import {
     transition,
 } from '@angular/animations';
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 
 @Component({
@@ -37,7 +37,11 @@ export class SliderCheckboxComponent {
     @Input({ required: true })
     control!: FormControl;
 
+    @Output()
+    toggles = new EventEmitter<void>();
+
     toggle() {
         this.control.setValue(!this.control.value);
+        this.toggles.emit();
     }
 }
diff --git a/webview-ui/grepc-webview/src/styles.css b/webview-ui/grepc-webview/src/styles.css
@@ -58,6 +58,7 @@ app-occurrence {
     align-items: center;
     flex-wrap: nowrap;
     padding: 4px;
+    min-height: 1.6em;
 
     border-top: 1px solid rgb(73, 73, 73);
     border-bottom: 1px solid rgb(73, 73, 73);
@@ -88,6 +89,15 @@ app-occurrence {
     position: relative;
 }
 
+.color-picker * {
+    display: block;
+}
+
+.color-picker.open {
+    top: 2em !important;
+    left: 0 !important;
+}
+
 .fixed {
     display: none !important;
 }