refactor library dialog (#795)

* refactor library dialog * tests
Alfresco · Nov 14, 2018 · 7734844 · 7734844
1 parent 031198e
commit 7734844
Show file tree

Hide file tree

Showing 6 changed files with 296 additions and 164 deletions.
diff --git a/src/app/dialogs/library/form.validators.spec.ts b/src/app/dialogs/library/form.validators.spec.ts
diff --git a/src/app/dialogs/library/form.validators.ts b/src/app/dialogs/library/form.validators.ts
diff --git a/src/app/dialogs/library/library.dialog.html b/src/app/dialogs/library/library.dialog.html
@@ -1,80 +1,84 @@
-<h2 mat-dialog-title>
-    {{ createTitle | translate }}
-</h2>
+<h2 mat-dialog-title>{{ createTitle | translate }}</h2>
 
 <mat-dialog-content>
-    <form novalidate [formGroup]="form" (submit)="submit()">
-        <mat-form-field>
-            <input
-            placeholder="{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}"
-                required
-                matInput
-                formControlName="title"
-            />
+  <form novalidate [formGroup]="form" (submit)="submit()">
+    <mat-form-field>
+      <input
+        placeholder="{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}"
+        required
+        matInput
+        formControlName="title"
+        autocomplete="off"
+      />
+
+      <mat-hint *ngIf="libraryTitleExists">{{
+        'LIBRARY.HINTS.SITE_TITLE_EXISTS' | translate
+      }}</mat-hint>
+      <mat-error *ngIf="form.controls['title'].hasError('maxlength')">
+        {{ 'LIBRARY.ERRORS.TITLE_TOO_LONG' | translate }}
+      </mat-error>
+    </mat-form-field>
 
-            <mat-hint *ngIf="libraryTitleExists">{{ 'LIBRARY.HINTS.SITE_TITLE_EXISTS' | translate }}</mat-hint>
-            <mat-error *ngIf="form.controls['title'].hasError('maxlength')">
-                {{ 'LIBRARY.ERRORS.TITLE_TOO_LONG' | translate }}
-            </mat-error>
-        </mat-form-field>
+    <mat-form-field>
+      <input
+        required
+        placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}"
+        matInput
+        formControlName="id"
+        autocomplete="off"
+      />
 
-        <mat-form-field>
-            <input
-                required
-                placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}"
-                matInput
-                formControlName="id"
-            />
+      <mat-error *ngIf="form.controls['id'].errors?.message">
+        {{ form.controls['id'].errors?.message | translate }}
+      </mat-error>
 
-            <mat-error *ngIf="form.controls['id'].errors?.message">
-                {{ form.controls['id'].errors?.message | translate }}
-            </mat-error>
+      <mat-error *ngIf="form.controls['id'].hasError('maxlength')">
+        {{ 'LIBRARY.ERRORS.ID_TOO_LONG' | translate }}
+      </mat-error>
+    </mat-form-field>
 
-            <mat-error *ngIf="form.controls['id'].hasError('maxlength')">
-                {{ 'LIBRARY.ERRORS.ID_TOO_LONG' | translate }}
-            </mat-error>
-        </mat-form-field>
+    <mat-form-field>
+      <textarea
+        matInput
+        placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
+        rows="3"
+        formControlName="description"
+      ></textarea>
 
-        <mat-form-field>
-            <textarea
-                matInput
-                placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
-                rows="3"
-                formControlName="description"></textarea>
+      <mat-error *ngIf="form.controls['description'].hasError('maxlength')">
+        {{ 'LIBRARY.ERRORS.DESCRIPTION_TOO_LONG' | translate }}
+      </mat-error>
+    </mat-form-field>
 
-            <mat-error *ngIf="form.controls['description'].hasError('maxlength')">
-                {{ 'LIBRARY.ERRORS.DESCRIPTION_TOO_LONG' | translate }}
-            </mat-error>
-        </mat-form-field>
-
-        <mat-radio-group
-            [ngModelOptions]="{ standalone: true }"
-            [(ngModel)]="visibilityOption"
-            (change)="visibilityChangeHandler($event)">
-            <mat-radio-button
-                color="primary"
-                [disabled]="option.disabled"
-                *ngFor="let option of visibilityOptions"
-                [value]="option.value"
-                [checked]="visibilityOption.value === option.value">
-                {{ option.label | translate }}
-            </mat-radio-button>
-        </mat-radio-group>
-    </form>
+    <mat-radio-group
+      [ngModelOptions]="{ standalone: true }"
+      [(ngModel)]="visibilityOption"
+      (change)="visibilityChangeHandler($event)"
+    >
+      <mat-radio-button
+        color="primary"
+        [disabled]="option.disabled"
+        *ngFor="let option of visibilityOptions"
+        [value]="option.value"
+        [checked]="visibilityOption.value === option.value"
+      >
+        {{ option.label | translate }}
+      </mat-radio-button>
+    </mat-radio-group>
+  </form>
 </mat-dialog-content>
 
 <mat-dialog-actions class="actions-buttons">
-    <button
-        mat-button
-        mat-dialog-close>
-        {{ 'LIBRARY.DIALOG.CANCEL' | translate }}
-    </button>
+  <button mat-button mat-dialog-close>
+    {{ 'LIBRARY.DIALOG.CANCEL' | translate }}
+  </button>
 
-    <button
-            color="primary"
-            mat-button
-            (click)="submit()"
-            [disabled]="!form.valid">
-        {{ 'LIBRARY.DIALOG.CREATE' | translate }}
-    </button>
+  <button
+    color="primary"
+    mat-button
+    (click)="submit()"
+    [disabled]="!form.valid"
+  >
+    {{ 'LIBRARY.DIALOG.CREATE' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/dialogs/library/library.dialog.scss b/src/app/dialogs/library/library.dialog.scss
@@ -20,4 +20,8 @@ mat-form-field {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+
+  .mat-button {
+    text-transform: uppercase;
+  }
 }