create from template dialog

src/app/dialogs/node-templates/create-from-template.dialog.html

@@ -0,0 +1,59 @@
+<h2
+  mat-dialog-title
+  [innerHTML]="'FILE_FROM_TEMPLATE.TITLE' | translate: { template: data.name } "
+></h2>
+<div mat-dialog-content>
+  <form [formGroup]="form" novalidate>
+    <mat-form-field class="adf-full-width">
+      <input
+        cdkFocusInitial
+        placeholder="{{ 'FILE_FROM_TEMPLATE.FORM.PLACEHOLDER.NAME' | translate }}"
+        matInput
+        formControlName="name"
+        required
+      />
+
+      <mat-error *ngIf="form.controls['name'].errors?.message">
+        {{ form.controls['name'].errors?.message | translate }}
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field class="adf-full-width">
+      <input
+        placeholder="{{ 'FILE_FROM_TEMPLATE.FORM.PLACEHOLDER.TITLE' | translate }}"
+        matInput
+        formControlName="title"
+      />
+
+      <mat-error *ngIf="form.controls['title'].hasError('maxlength')">
+        {{ 'FILE_FROM_TEMPLATE.FORM.ERRORS.TITLE_TOO_LONG' | translate }}
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field class="adf-full-width">
+      <textarea
+        matInput
+        placeholder="{{ 'FILE_FROM_TEMPLATE.FORM.PLACEHOLDER.DESCRIPTION' | translate }}"
+        rows="2"
+        formControlName="description"
+      ></textarea>
+
+      <mat-error *ngIf="form.controls['description'].hasError('maxlength')">
+        {{ 'FILE_FROM_TEMPLATE.FORM.ERRORS.DESCRIPTION_TOO_LONG' | translate }}
+      </mat-error>
+    </mat-form-field>
+  </form>
+</div>
+<div mat-dialog-actions>
+  <button mat-button mat-dialog-close>
+    {{ 'FILE_FROM_TEMPLATE.CANCEL' | translate }}
+  </button>
+  <button
+    class="create"
+    [disabled]="form.invalid"
+    mat-button
+    (click)="onSubmit()"
+  >
+    {{ 'FILE_FROM_TEMPLATE.CREATE' | translate }}
+  </button>
+</div>

src/app/dialogs/node-templates/create-from-template.dialog.scss

@@ -0,0 +1,64 @@
+@mixin app-create-file-from-template-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  .aca-file-from-template-dialog {
+    ng-component {
+      overflow: visible;
+    }
+
+    .mat-dialog-title {
+      margin-left: 24px;
+      margin-right: 24px;
+      font-size: 20px;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 1.6;
+      letter-spacing: -0.5px;
+      color: mat-color($foreground, text, 0.87);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      .bold {
+        font-weight: 600;
+      }
+    }
+
+    .mat-form-field {
+      margin-bottom: 20px;
+    }
+
+    .mat-dialog-container {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .mat-dialog-content {
+      margin: 0 2px;
+      overflow: hidden;
+    }
+
+    .mat-dialog-actions {
+      padding: 8px 22px;
+      display: flex;
+      justify-content: flex-end;
+      color: mat-color($foreground, secondary-text);
+
+      button {
+        text-transform: uppercase;
+        font-weight: normal;
+      }
+
+      .create:disabled {
+        color: mat-color($primary);
+      }
+
+      .create {
+        color: mat-color($accent);
+      }
+    }
+  }
+}

src/app/dialogs/node-templates/create-from-template.dialog.ts

@@ -0,0 +1,128 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2019 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, ViewEncapsulation, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { Node } from '@alfresco/js-api';
+import {
+  FormBuilder,
+  FormGroup,
+  Validators,
+  FormControl,
+  ValidationErrors
+} from '@angular/forms';
+
+@Component({
+  templateUrl: './create-from-template.dialog.html',
+  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./create-from-template.dialog.scss']
+})
+export class CreateFileFromTemplateDialogComponent implements OnInit {
+  public form: FormGroup;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private dialogRef: MatDialogRef<CreateFileFromTemplateDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {}
+
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      name: [
+        this.data.name,
+        [
+          Validators.required,
+          this.forbidEndingDot,
+          this.forbidOnlySpaces,
+          this.forbidSpecialCharacters
+        ]
+      ],
+      title: [this.data.properties['cm:title'], Validators.maxLength(256)],
+      description: [
+        this.data.properties['cm:description'],
+        Validators.maxLength(512)
+      ]
+    });
+  }
+
+  onSubmit() {
+    const update = {
+      name: this.form.value.name,
+      properties: {
+        'cm:title': this.form.value.title,
+        'cm:description': this.form.value.description
+      }
+    };
+    const data: Node = Object.assign({}, this.data, update);
+    this.dialogRef.close(data);
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+
+  private forbidSpecialCharacters({
+    value
+  }: FormControl): ValidationErrors | null {
+    const specialCharacters: RegExp = /([\*\"\<\>\\\/\?\:\|])/;
+    const isValid: boolean = !specialCharacters.test(value);
+
+    return isValid
+      ? null
+      : {
+          message: `FILE_FROM_TEMPLATE.FORM.ERRORS.SPECIAL_CHARACTERS`
+        };
+  }
+
+  private forbidEndingDot({ value }: FormControl): ValidationErrors | null {
+    const isValid: boolean =
+      (value || '')
+        .trim()
+        .split('')
+        .pop() !== '.';
+
+    return isValid
+      ? null
+      : {
+          message: `FILE_FROM_TEMPLATE.FORM.ERRORS.ENDING_DOT`
+        };
+  }
+
+  private forbidOnlySpaces({ value }: FormControl): ValidationErrors | null {
+    if (value.length) {
+      const isValid: boolean = !!(value || '').trim();
+
+      return isValid
+        ? null
+        : {
+            message: `FILE_FROM_TEMPLATE.FORM.ERRORS.ONLY_SPACES`
+          };
+    } else {
+      return {
+        message: `FILE_FROM_TEMPLATE.FORM.ERRORS.REQUIRED`
+      };
+    }
+  }
+}