Merge pull request #183 from gctools-outilsgc/input-refactor

Input/WYSIWYG refactor
gctools-outilsgc · Nov 21, 2023 · 43c8360 · 43c8360
2 parents de56238 + 764b961
commit 43c8360
Show file tree

Hide file tree

Showing 29 changed files with 199 additions and 232 deletions.
diff --git a/src/app/features/events/components/event/event.component.html b/src/app/features/events/components/event/event.component.html
@@ -136,8 +136,7 @@ <h2>{{ translations.event.event_registration | translate }}</h2>
                    [placeholder]="translations.event.form.placeholder | translate"
                    [required]="true"
                    [control]="nameFormControl"
-                   [errorMatcher]="matcher"
-                   [disabled]="loading || isPast()">
+                   [errorMatcher]="matcher">
         </app-input>
 
         <!-- Confirm -->
@@ -149,8 +148,7 @@ <h2>{{ translations.event.event_registration | translate }}</h2>
                    [placeholder]="translations.event.form.placeholder | translate"
                    [required]="true"
                    [control]="emailFormControl"
-                   [errorMatcher]="matcher"
-                   [disabled]="loading || isPast()">
+                   [errorMatcher]="matcher">
         </app-input>
 
         <!-- Email Confirm -->
@@ -162,8 +160,7 @@ <h2>{{ translations.event.event_registration | translate }}</h2>
                    [placeholder]="translations.event.form.placeholder | translate"
                    [required]="true"
                    [control]="emailConfirmFormControl"
-                   [errorMatcher]="matcher"
-                   [disabled]="loading || isPast()">
+                   [errorMatcher]="matcher">
         </app-input>
 
         <!-- Occupation -->
@@ -175,8 +172,7 @@ <h2>{{ translations.event.event_registration | translate }}</h2>
                    [hint]="translations.event.form.occupation_hint | translate"
                    [required]="true"
                    [control]="occupationFormControl"
-                   [errorMatcher]="matcher"
-                   [disabled]="loading || isPast()">
+                   [errorMatcher]="matcher">
         </app-input>
 
         <!-- Add to calendar -->

diff --git a/src/app/features/profile/components/post/post.component.html b/src/app/features/profile/components/post/post.component.html
@@ -49,22 +49,22 @@
                        mat-stretch-tabs="false">
             <mat-tab [label]="translations.titles.post | translate" [disabled]="creating">
                 <ng-template matTabContent>
-                    <app-post-form [form]="formGroups[0]" [disabled]="creating"></app-post-form>
+                    <app-post-form [form]="formGroups[0]"></app-post-form>
                 </ng-template>
             </mat-tab>
             <mat-tab [label]="translations.titles.blog | translate" [disabled]="creating">
                 <ng-template matTabContent>
-                    <app-blog-form [form]="formGroups[1]" [disabled]="creating"></app-blog-form>
+                    <app-blog-form [form]="formGroups[1]"></app-blog-form>
                 </ng-template>
             </mat-tab>
             <mat-tab [label]="translations.titles.event | translate" [disabled]="creating">
                 <ng-template matTabContent>
-                    <app-event-form [form]="formGroups[2]" [disabled]="creating"></app-event-form>
+                    <app-event-form [form]="formGroups[2]"></app-event-form>
                 </ng-template>
             </mat-tab>
             <mat-tab [label]="translations.titles.poll | translate" [disabled]="creating">
                 <ng-template matTabContent>
-                    <app-poll-form [form]="formGroups[3]" [disabled]="creating"></app-poll-form>
+                    <app-poll-form [form]="formGroups[3]"></app-poll-form>
                 </ng-template>
             </mat-tab>
         </mat-tab-group>

diff --git a/src/app/features/profile/components/post/post.component.ts b/src/app/features/profile/components/post/post.component.ts
@@ -105,11 +105,13 @@ export class PostComponent {
   submit(): void {
     if (this.selectedForm.status === 'VALID') {
       this.creating = true;
+      this.selectedForm.disable();
       this.sessionStorageService.remove('gccollab-make-a-' + this.getTypeFromIndex(this.selectedIndex));
 
       // TODO: Setup mock service for posting forms
       setTimeout(() => {
         this.creating = false;
+        this.selectedForm.enable();
         this.toggleEditing(new Event(''));
       }, 3000);
     }

diff --git a/src/app/shared/components/blog-form/blog-form.component.html b/src/app/shared/components/blog-form/blog-form.component.html
@@ -1,50 +1,42 @@
 <form id="gcc-form-poll" [formGroup]="form">
 
-    <app-input [(value)]="model.name" 
+    <app-input [value]="model.name" 
                [name]="'name'"
                formControlName="name"
-               [control]="$any(form).controls['name']"
+               [control]="form.controls['name'] | formControl"
                [label]="translations.forms.blog.name_of_blog | translate" 
                [placeholder]="translations.forms.placeholder | translate"
-               [errorMatcher]="errorStateMatcher"
                [autofocus]="true"
-               [required]="true"
-               [disabled]="disabled">
+               [required]="true">
     </app-input>
 
-    <app-input [(value)]="model.publisher" 
+    <app-input [value]="model.publisher" 
                [name]="'publisher'"
                formControlName="publisher"
-               [control]="$any(form).controls['publisher']"
+               [control]="form.controls['publisher'] | formControl"
                [label]="translations.forms.blog.name_of_publisher | translate" 
                [placeholder]="translations.forms.placeholder | translate"
-               [errorMatcher]="errorStateMatcher"
-               [required]="true"
-               [disabled]="disabled">
+               [required]="true">
     </app-input>
 
     <app-file-select [label]="translations.forms.blog.upload_cover_photo | translate"
-                     [control]="$any(form).controls['coverPhoto']">
+                     [control]="form.controls['coverPhoto'] | formControl">
     </app-file-select>
 
-    <app-input [(value)]="model.coverPhotoAlt" 
+    <app-input [value]="model.coverPhotoAlt" 
                [name]="'coverPhotoAlt'"
                formControlName="coverPhotoAlt"
-               [control]="$any(form).controls['coverPhotoAlt']"
+               [control]="form.controls['coverPhotoAlt'] | formControl"
                [label]="translations.forms.blog.cover_photo_alt | translate" 
                [placeholder]="translations.forms.placeholder | translate"
-               [errorMatcher]="errorStateMatcher"
-               [required]="true"
-               [disabled]="disabled">
+               [required]="true">
     </app-input>
 
     <app-editor [label]="translations.forms.blog.body | translate"
                 [hint]="translations.forms.placeholder | translate"
                 [(html)]="model.description"
                 [required]="true"
                 [maxCharacters]="maxBlogLength"
-                formControlName="description"
-                [control]="$any(form).controls['description']"
-                [disabled]="disabled">
+                [control]="form.controls['description'] | formControl">
     </app-editor>
 </form>
diff --git a/src/app/shared/components/blog-form/blog-form.component.spec.ts b/src/app/shared/components/blog-form/blog-form.component.spec.ts
@@ -5,15 +5,16 @@ import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-transla
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { TypescriptLoader } from 'src/app/core/helpers/typescript-loader';
 import { RouterTestingModule } from '@angular/router/testing';
-import { TruncateFileNamePipe } from '../../pipes/truncate-file-name.pipe';
+import { TruncateFileNamePipe } from '../../pipes/truncate-file-name/truncate-file-name.pipe';
+import { FormControlPipe } from '../../pipes/form-control/form-control.pipe';
 describe('BlogFormComponent', () => {
   let component: BlogFormComponent;
   let translateService: TranslateService;
   let fixture: ComponentFixture<BlogFormComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [BlogFormComponent, TruncateFileNamePipe],
+      declarations: [BlogFormComponent, TruncateFileNamePipe, FormControlPipe],
       imports: [
         TranslateModule.forRoot({
           loader: {

diff --git a/src/app/shared/components/blog-form/blog-form.component.ts b/src/app/shared/components/blog-form/blog-form.component.ts
@@ -1,6 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
-import { ErrorStateMatcher } from '@angular/material/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { Translations } from 'src/app/core/services/translations.service';
 import { Validators as EditorValidators } from 'ngx-editor';
@@ -19,9 +18,6 @@ export class BlogFormComponent implements OnInit, OnDestroy {
     coverPhotoAlt: '',
     description: ''
   }
-  @Input() disabled: boolean = false;
-
-  errorStateMatcher = new MyErrorStateMatcher();
 
   maxBlogLength: number = 2000;
 
@@ -34,11 +30,12 @@ export class BlogFormComponent implements OnInit, OnDestroy {
       if (!this.form.controls[key]) {
         if (key == 'description')
           this.form.addControl(key, new FormControl(value, [EditorValidators.required(), EditorValidators.maxLength(this.maxBlogLength)]));
+        else if (key == 'coverPhoto')
+        this.form.addControl(key, new FormControl(value, [Validators.required]));
         else
-          this.form.addControl(key, new FormControl(value, [Validators.required]));
+          this.form.addControl(key, new FormControl(value, [Validators.required, Validators.minLength(3), Validators.maxLength(30)]));
       } else {
         this.form.controls[key].setValue(value);
-        console.warn('Duplicate FormControl detected.');
       }
     }
   }
@@ -55,10 +52,3 @@ export interface IBlogForm {
   coverPhotoAlt: string;
   description: string;
 }
-
-class MyErrorStateMatcher implements ErrorStateMatcher {
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
-    const isSubmitted = form && form.submitted;
-    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
-  }
-}
diff --git a/src/app/shared/components/editor/editor.component.html b/src/app/shared/components/editor/editor.component.html
@@ -1,4 +1,4 @@
-<mat-label *ngIf="label" [ngClass]="disabled ? 'disabled' : ''">
+<mat-label *ngIf="label" [ngClass]="control && control.disabled ? 'disabled' : ''">
     {{ label }} 
     <div *ngIf="required" class="required-star">*</div>
     <i *ngIf="hint" 
@@ -12,24 +12,22 @@
 </mat-label>
 
 <div #gccEditor class="NgxEditor__Wrapper"
-     [ngClass]="{focus: hasFocus, error: control && control.touched && !control.valid}">
+     [ngClass]="{focus: hasFocus, disabled: control && control.disabled, error: !hasFocus && control && control.touched && !control.valid}">
     <ngx-editor-menu 
         [editor]="editor" 
         [toolbar]="toolbar"
-        [disabled]="disabled">
+        [disabled]="control && control.disabled">
     </ngx-editor-menu>
     <ngx-editor 
         [editor]="editor" 
         [(ngModel)]="html" 
-        (ngModelChange)="onInputChange($event); updateCharacterCount($event);"
-        [disabled]="disabled" 
+        (ngModelChange)="onInputChange($event); updateCharacterCount($event, false);"
         [placeholder]="this.translations.editor.placeholder | translate"
-        [attr.formControl]="control"
-        [attr.formControlName]="controlName"
+        [formControl]="control"
         [required]="required">
     </ngx-editor>
     <div *ngIf="minCharacters > 0 || maxCharacters != Number.MAX_VALUE" 
-         [ngClass]="(control && control.touched) && ((characterCount > maxCharacters) || (characterCount < minCharacters)) ? 'error' : ''" 
+         [ngClass]="(control && control.touched && !control.valid) && ((characterCount > maxCharacters) || (characterCount < minCharacters)) ? 'error' : ''" 
          class="character-count">
         {{ characterCount }} / {{ maxCharacters }}
     </div>

diff --git a/src/app/shared/components/editor/editor.component.scss b/src/app/shared/components/editor/editor.component.scss
@@ -85,7 +85,7 @@
         }
     }
 
-    .NgxEditor__Wrapper.error {
+    .NgxEditor__Wrapper.error:not(.disabled) {
         border-color: $error-red;
 
         ngx-editor-menu {
@@ -116,9 +116,27 @@
     }
 
     mat-label.disabled {
+        color: $neutral-300;
+
         .required-star, i {
             color: $neutral-300 !important;
         }
+
+        .NgxEditor__Wrapper.error {
+            border-color:  $neutral-300;
+
+            ngx-editor-menu {
+                ::ng-deep {
+                    .NgxEditor__MenuBar {
+                        border-color:  $neutral-300;
+                    }
+                }
+            }
+        }
+    }
+
+    .disabled ngx-editor ::ng-deep .NgxEditor__Content--Disabled {
+        color: $neutral-300 !important;
     }
 
     mat-hint {

diff --git a/src/app/shared/components/editor/editor.component.ts b/src/app/shared/components/editor/editor.component.ts
@@ -22,13 +22,11 @@ import { TooltipDirection } from '../../models/tooltip-direction';
 })
 export class EditorComponent implements OnInit, OnDestroy, AfterViewInit, AfterContentInit, ControlValueAccessor {
   @Input() html!: string;
-  @Input() disabled: boolean = false;
   @Input() required: boolean = false;
-  @Input() label!: string;
+  @Input({required: true}) label!: string;
   @Input() hint!: string;
   @Input() autofocus: boolean = false;
-  @Input() control!: FormControl;
-  @Input() controlName!: string;
+  @Input({required: true}) control!: FormControl;
   @Input() minCharacters: number = 0;
   @Input() maxCharacters: number = Number.MAX_VALUE;
 
@@ -54,7 +52,6 @@ export class EditorComponent implements OnInit, OnDestroy, AfterViewInit, AfterC
   Number = Number;
   focusChange!: MutationObserver;
   tooltipDirection = TooltipDirection;
-  hasRequiredValidator = false;
 
   onChange = (_: any) => {};
   onTouched = () => {};
@@ -106,8 +103,10 @@ export class EditorComponent implements OnInit, OnDestroy, AfterViewInit, AfterC
         if (classList) {
           this.hasFocus = Array.from(classList).includes('ProseMirror-focused') ? true : false;
 
-          if (this.control && !this.hasFocus)
+          if (this.control && !this.hasFocus) {
             this.control.markAsTouched();
+            this.control.updateValueAndValidity();
+          }
         }
       });
     });
@@ -134,16 +133,18 @@ export class EditorComponent implements OnInit, OnDestroy, AfterViewInit, AfterC
       this.focusChange.disconnect();
   }
 
-  updateCharacterCount(content: string) {
+  updateCharacterCount(content: string, markAsTouched: boolean = false) {
     this.characterCount = this.countCharactersInsideHTML(content);
 
     if (this.characterCount === 0) {
       this.html = '';
       this.onInputChange(this.html);
     }
 
-    if (this.control)
+    if (this.control && markAsTouched) {
       this.control.markAsTouched();
+      this.control.updateValueAndValidity();
+    }
   }
 
   onLangChange(): void {