From b3a7c63b45560253cb39ce618d7874117ade193c Mon Sep 17 00:00:00 2001 From: pionnegru Date: Mon, 23 Dec 2019 10:56:48 +0200 Subject: [PATCH] create from template dialog --- .../create-from-template.dialog.html | 59 ++++++++ .../create-from-template.dialog.scss | 64 +++++++++ .../create-from-template.dialog.ts | 128 ++++++++++++++++++ 3 files changed, 251 insertions(+) create mode 100644 src/app/dialogs/node-templates/create-from-template.dialog.html create mode 100644 src/app/dialogs/node-templates/create-from-template.dialog.scss create mode 100644 src/app/dialogs/node-templates/create-from-template.dialog.ts diff --git a/src/app/dialogs/node-templates/create-from-template.dialog.html b/src/app/dialogs/node-templates/create-from-template.dialog.html new file mode 100644 index 000000000..a542bebd2 --- /dev/null +++ b/src/app/dialogs/node-templates/create-from-template.dialog.html @@ -0,0 +1,59 @@ +

+
+
+ + + + + {{ form.controls['name'].errors?.message | translate }} + + + + + + + + {{ 'FILE_FROM_TEMPLATE.FORM.ERRORS.TITLE_TOO_LONG' | translate }} + + + + + + + + {{ 'FILE_FROM_TEMPLATE.FORM.ERRORS.DESCRIPTION_TOO_LONG' | translate }} + + +
+
+
+ + +
diff --git a/src/app/dialogs/node-templates/create-from-template.dialog.scss b/src/app/dialogs/node-templates/create-from-template.dialog.scss new file mode 100644 index 000000000..b88024c6e --- /dev/null +++ b/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); + } + } + } +} diff --git a/src/app/dialogs/node-templates/create-from-template.dialog.ts b/src/app/dialogs/node-templates/create-from-template.dialog.ts new file mode 100644 index 000000000..9e7562d57 --- /dev/null +++ b/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 . + */ + +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, + @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` + }; + } + } +}