projects/web-mev/src/app/features/workspace-detail/components/dialogs/delete-dialog/delete-dialog.component.ts
Delete Workspace Resource Dialog Component
Modal dialog component which is used to delete a resource from the current workspace
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | mev-delete-dialog |
| styleUrls | ./delete-dialog.component.scss |
| templateUrl | ./delete-dialog.component.html |
Properties |
Methods |
constructor(dialogRef: MatDialogRef
|
||||||||||||
|
Parameters :
|
| 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
|
| 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;
}