File

projects/web-mev/src/app/features/file-manager/components/dialogs/delete-file-dialog/delete-file-dialog.component.ts

Description

Delete File Dialog Component

Modal dialog component which is used to delete a file from the file list

Metadata

selector mev-delete-file-dialog
styleUrls ./delete-file-dialog.component.scss
templateUrl ./delete-file-dialog.component.html

Index

Properties
Methods

Constructor

constructor(dialogRef: MatDialogRef, data: File, fileService: FileService)
Parameters :
Name Type Optional
dialogRef MatDialogRef<DeleteFileDialogComponent> No
data File No
fileService FileService No

Methods

confirmDelete
confirmDelete()

Function is triggered when user clicks the Delete button

Returns : void
onNoClick
onNoClick()

Function is triggered when user clicks the Cancel button

Returns : void

Properties

Public data
Type : File
Decorators :
@Inject(MAT_DIALOG_DATA)
Public dialogRef
Type : MatDialogRef<DeleteFileDialogComponent>
Public fileService
Type : FileService
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Component, Inject } from '@angular/core';
import { FileService } from '@file-manager/services/file-manager.service';
import { File } from '@app/shared/models/file';

/**
 * Delete File Dialog Component
 *
 * Modal dialog component which is used to delete a file from the file list
 */
@Component({
  selector: 'mev-delete-file-dialog',
  templateUrl: './delete-file-dialog.component.html',
  styleUrls: ['./delete-file-dialog.component.scss']
})
export class DeleteFileDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<DeleteFileDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: File,
    public fileService: FileService
  ) {}

  /**
   * Function is triggered when user clicks the Cancel button
   *
   */
  onNoClick(): void {
    this.dialogRef.close();
  }

  /**
   * Function is triggered when user clicks the Delete button
   *
   */
  confirmDelete(): void {
    this.fileService.deleteFile(this.data.id);
  }
}
<div class="container">
  <h3 mat-dialog-title>This file will be deleted. Are you sure?</h3>
  <div mat-dialog-content>
    File name: {{data.name}}
    <p></p>
    File type: {{ data.readable_resource_type || 'N/A' }}
    <p></p>
  </div>

  <div mat-dialog-actions>
    <button mat-button [mat-dialog-close]="1" (click)="confirmDelete()">Delete</button>
    <button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>
  </div>
</div>

./delete-file-dialog.component.scss

.container {
  display: flex;
  flex-direction: column;
  min-width: 450px;
}

.container > * {
  width: 100%;
}

.mat-dialog-content {
  max-height: none;
  overflow: visible;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""