File

projects/web-mev/src/app/features/workspace-detail/components/dialogs/delete-dialog/delete-dialog.component.ts

Description

Delete Workspace Resource Dialog Component

Modal dialog component which is used to delete a resource from the current workspace

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector mev-delete-dialog
styleUrls ./delete-dialog.component.scss
templateUrl ./delete-dialog.component.html

Index

Properties
Methods

Constructor

constructor(dialogRef: MatDialogRef, data: any, service: WorkspaceDetailService)
Parameters :
Name Type Optional
dialogRef MatDialogRef<DeleteDialogComponent> No
data any No
service WorkspaceDetailService 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 : any
Decorators :
@Inject(MAT_DIALOG_DATA)
Public dialogRef
Type : MatDialogRef<DeleteDialogComponent>
resource
Type : WorkspaceResource
Public service
Type : WorkspaceDetailService
import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { WorkspaceDetailService } from '@app/features/workspace-detail/services/workspace-detail.service';
import { WorkspaceResource } from '@app/features/workspace-detail/models/workspace-resource';

/**
 * Delete Workspace Resource Dialog Component
 *
 * Modal dialog component which is used to delete a resource from the current workspace
 */
@Component({
  selector: 'mev-delete-dialog',
  templateUrl: './delete-dialog.component.html',
  styleUrls: ['./delete-dialog.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DeleteDialogComponent {
  resource: WorkspaceResource;

  constructor(
    public dialogRef: MatDialogRef<DeleteDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    public service: WorkspaceDetailService
  ) {
    this.resource = this.data.resource;
  }

  /**
   * 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.service
      .deleteResourceFromWorkspace(this.data.resource.id, this.data.workspaceId)
      .subscribe(
        () => {
          this.dialogRef.close();
        },
        error => {
          console.error(error);
        }
      );
  }
}
<div class="container">
    <h3 mat-dialog-title>This resource will be deleted from your workspace. Are you sure?</h3>
    <div mat-dialog-content>
      <b>File: {{ resource.name }}</b>
      <p>
      Resource type: {{ resource.readable_resource_type }}<br>
      Size: {{ resource.size | byteName}}<br>
      Created: {{ resource.created | date :'medium' }}<br>
      </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-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 ""