mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-06-16 17:54:45 +00:00
create from template dialog
This commit is contained in:
pionnegru
parent
db2a6a7ef7
commit
b3a7c63b45
@ -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>
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
128
src/app/dialogs/node-templates/create-from-template.dialog.ts
Normal file
128
src/app/dialogs/node-templates/create-from-template.dialog.ts
Normal file
@ -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`
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user