projects/web-mev/src/app/features/file-manager/components/dialogs/edit-file-dialog/edit-file-dialog.component.ts
Edit File Dialog Component
Modal dialog component which is used to edit a file name or file(resource) type
| selector | mev-edit-file-dialog |
| styleUrls | ./edit-file-dialog.component.scss |
| templateUrl | ./edit-file-dialog.component.html |
Properties |
|
Methods |
constructor(dialogRef: MatDialogRef
|
||||||||||||
|
Parameters :
|
| getErrorMessage |
getErrorMessage()
|
|
Returns :
"" | "Required field" | "Not a valid email"
|
| loadResourceTypes |
loadResourceTypes()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onNoClick |
onNoClick()
|
|
Function is triggered when user clicks the Cancel button
Returns :
void
|
| stopEdit |
stopEdit()
|
|
Function is triggered when user clicks the Save button
Returns :
void
|
| submit |
submit()
|
|
Returns :
void
|
| Public data |
Type : any
|
Decorators :
@Inject(MAT_DIALOG_DATA)
|
| Public dialogRef |
Type : MatDialogRef<EditFileDialogComponent>
|
| Public fileService |
Type : FileService
|
| formControl |
Default value : new FormControl('', [Validators.required])
|
| Public resourceTypes |
Type : object
|
Default value : {}
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Component, Inject, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { FileService } from '@file-manager/services/file-manager.service';
import { FileType } from '@app/shared/models/file-type';
/**
* Edit File Dialog Component
*
* Modal dialog component which is used to edit a file name or file(resource) type
*/
@Component({
selector: 'mev-edit-file-dialog',
templateUrl: './edit-file-dialog.component.html',
styleUrls: ['./edit-file-dialog.component.scss']
})
export class EditFileDialogComponent implements OnInit {
public resourceTypes = {};
formControl = new FormControl('', [Validators.required]);
constructor(
public dialogRef: MatDialogRef<EditFileDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
public fileService: FileService
) {}
ngOnInit() {
this.loadResourceTypes();
}
getErrorMessage() {
return this.formControl.hasError('required')
? 'Required field'
: this.formControl.hasError('email')
? 'Not a valid email'
: '';
}
/**
* Function is triggered when user clicks the Cancel button
*
*/
onNoClick(): void {
this.dialogRef.close();
}
/**
* Function is triggered when user clicks the Save button
*
*/
stopEdit(): void {
this.fileService.updateFile(this.data);
}
loadResourceTypes() {
this.fileService.getFileTypes().subscribe((fileTypes: FileType[]) => {
fileTypes.forEach(
type =>
(this.resourceTypes[type.resource_type_key] = {
title: type.resource_type_title,
description: type.resource_type_description
})
);
});
}
submit() {
// empty stuff
}
}
<div class="container">
<h3 mat-dialog-title>Edit File</h3>
<form class="mat-dialog-content" (ngSubmit)="submit" #formControl="ngForm">
<!--div class="form">
<mat-form-field color="accent">
<input matInput #input class="form-control" placeholder="Id" [(ngModel)]="data.id" name="id" required >
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</div-->
<div class="form">
<mat-form-field color="accent">
<input matInput #input class="form-control" placeholder="File name" [(ngModel)]="data.name" name="name"
required>
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</div>
<div class="form">
<mat-form-field color="accent">
<mat-label>Select a resource type</mat-label>
<mat-select [(ngModel)]=data.resource_type name="resource_type" required>
<mat-option *ngFor="let type of resourceTypes | keyvalue" [value]="type.key">
{{ type.value.title }}
</mat-option>
</mat-select>
<mat-hint *ngIf=resourceTypes[data.resource_type] align="start">
{{ resourceTypes[data.resource_type].description }}</mat-hint>
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</div>
<div mat-dialog-actions>
<button mat-button [type]="submit" [disabled]="!formControl.valid" [mat-dialog-close]="1"
(click)="stopEdit()" mat-raised-button color="accent">Save</button>
<button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>
</div>
</form>
</div>
./edit-file-dialog.component.scss
.mat-dialog-content {
min-height: 300px;
position: relative;
}
.container {
display: flex;
flex-direction: column;
min-width: 450px;
}
.container > * {
width: 100%;
}
.mat-dialog-content {
max-height: none;
overflow: visible;
}
.form {
display: flex;
padding-top: 6px;
}
.mat-form-field {
font-size: 16px;
flex-grow: 1;
}
.mat-dialog-actions {
position: absolute;
bottom: 0;
}