add delete button to image view layout
This commit is contained in:
parent
d1419e67cf
commit
69c405c7cc
|
@ -57,9 +57,12 @@
|
|||
(main-click)="download()"
|
||||
>
|
||||
<button mat-mini-fab matTooltip="Customize Image" (click)="customize()">
|
||||
<mat-icon> tune </mat-icon>
|
||||
<mat-icon fontSet="material-icons-outlined"> tune </mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab matTooltip="Share image" (click)="share()">
|
||||
<mat-icon> share </mat-icon>
|
||||
<mat-icon fontSet="material-icons-outlined"> share </mat-icon>
|
||||
</button>
|
||||
<button *ngIf="canDelete" mat-mini-fab matTooltip="Delete image" (click)="deleteImage()">
|
||||
<mat-icon fontSet="material-icons-outlined"> delete </mat-icon>
|
||||
</button>
|
||||
</speed-dial>
|
||||
|
|
|
@ -1,20 +1,26 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
|
||||
import { ImageLinks } from 'picsur-shared/dist/dto/image-links.class';
|
||||
import {
|
||||
AnimFileType,
|
||||
FileType,
|
||||
FileType2Ext,
|
||||
ImageFileType, SupportedFileTypeCategory,
|
||||
ImageFileType,
|
||||
SupportedFileTypeCategory,
|
||||
SupportedFileTypes
|
||||
} from 'picsur-shared/dist/dto/mimes.dto';
|
||||
import { Permission } from 'picsur-shared/dist/dto/permissions.enum';
|
||||
|
||||
import { EImage } from 'picsur-shared/dist/entities/image.entity';
|
||||
import { EUser } from 'picsur-shared/dist/entities/user.entity';
|
||||
import { HasFailed, HasSuccess } from 'picsur-shared/dist/types';
|
||||
import { UUIDRegex } from 'picsur-shared/dist/util/common-regex';
|
||||
import { ParseFileType } from 'picsur-shared/dist/util/parse-mime';
|
||||
import { SnackBarType } from 'src/app/models/dto/snack-bar-type.dto';
|
||||
import { ImageService } from 'src/app/services/api/image.service';
|
||||
import { PermissionService } from 'src/app/services/api/permission.service';
|
||||
import { UserService } from 'src/app/services/api/user.service';
|
||||
import { UtilService } from 'src/app/util/util-module/util.service';
|
||||
import {
|
||||
CustomizeDialogComponent,
|
||||
|
@ -31,6 +37,8 @@ export class ViewComponent implements OnInit {
|
|||
private readonly router: Router,
|
||||
private readonly imageService: ImageService,
|
||||
private readonly utilService: UtilService,
|
||||
private readonly permissionService: PermissionService,
|
||||
private readonly userService: UserService,
|
||||
) {}
|
||||
|
||||
private id: string;
|
||||
|
@ -54,7 +62,12 @@ export class ViewComponent implements OnInit {
|
|||
public image: EImage | null = null;
|
||||
public imageUser: EUser | null = null;
|
||||
|
||||
public canDelete: boolean = false;
|
||||
|
||||
async ngOnInit() {
|
||||
this.subscribePermissions();
|
||||
|
||||
// Extract and verify params
|
||||
const params = this.route.snapshot.paramMap;
|
||||
|
||||
this.id = params.get('id') ?? '';
|
||||
|
@ -62,10 +75,12 @@ export class ViewComponent implements OnInit {
|
|||
return this.utilService.quitError('Invalid image link');
|
||||
}
|
||||
|
||||
// Get metadata
|
||||
const metadata = await this.imageService.GetImageMeta(this.id);
|
||||
if (HasFailed(metadata))
|
||||
return this.utilService.quitError(metadata.getReason());
|
||||
|
||||
// Populate fields with metadata
|
||||
this.previewLink = this.imageService.GetImageURL(
|
||||
this.id,
|
||||
metadata.fileTypes.master,
|
||||
|
@ -76,6 +91,7 @@ export class ViewComponent implements OnInit {
|
|||
this.imageUser = metadata.user;
|
||||
this.image = metadata.image;
|
||||
|
||||
// Populate default selected format
|
||||
const masterFiletype = ParseFileType(metadata.fileTypes.master);
|
||||
if (HasSuccess(masterFiletype)) {
|
||||
this.masterFileType = masterFiletype;
|
||||
|
@ -93,6 +109,7 @@ export class ViewComponent implements OnInit {
|
|||
|
||||
this.selectedFormat(this.setSelectedFormat);
|
||||
this.updateFormatOptions();
|
||||
this.updatePermissions();
|
||||
}
|
||||
|
||||
selectedFormat(format: string) {
|
||||
|
@ -115,6 +132,45 @@ export class ViewComponent implements OnInit {
|
|||
this.utilService.shareFile(this.imageLinks.source);
|
||||
}
|
||||
|
||||
goBackHome() {
|
||||
this.router.navigate(['/']);
|
||||
}
|
||||
|
||||
async deleteImage() {
|
||||
const pressedButton = await this.utilService.showDialog({
|
||||
title: `Are you sure you want to delete the image?`,
|
||||
description: 'This action cannot be undone.',
|
||||
buttons: [
|
||||
{
|
||||
name: 'cancel',
|
||||
text: 'Cancel',
|
||||
},
|
||||
{
|
||||
color: 'warn',
|
||||
name: 'delete',
|
||||
text: 'Delete',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
if (pressedButton === 'delete') {
|
||||
const result = await this.imageService.DeleteImage(this.id);
|
||||
if (HasFailed(result)) {
|
||||
return this.utilService.showSnackBar(
|
||||
'Failed to delete image',
|
||||
SnackBarType.Error,
|
||||
);
|
||||
}
|
||||
|
||||
this.utilService.showSnackBar(
|
||||
'Image deleted',
|
||||
SnackBarType.Success,
|
||||
);
|
||||
|
||||
this.router.navigate(['/']);
|
||||
}
|
||||
}
|
||||
|
||||
async customize() {
|
||||
const options: CustomizeDialogData = {
|
||||
imageID: this.id,
|
||||
|
@ -131,8 +187,31 @@ export class ViewComponent implements OnInit {
|
|||
});
|
||||
}
|
||||
|
||||
goBackHome() {
|
||||
this.router.navigate(['/']);
|
||||
@AutoUnsubscribe()
|
||||
private subscribePermissions() {
|
||||
return this.permissionService.live.subscribe(
|
||||
this.updatePermissions.bind(this),
|
||||
);
|
||||
}
|
||||
|
||||
private updatePermissions() {
|
||||
const permissions = this.permissionService.snapshot;
|
||||
if (permissions.includes(Permission.ImageAdmin)) {
|
||||
this.canDelete = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.imageUser === null) return;
|
||||
|
||||
if (
|
||||
permissions.includes(Permission.ImageUpload) &&
|
||||
this.imageUser.id === this.userService.snapshot?.id
|
||||
) {
|
||||
this.canDelete = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.canDelete = false;
|
||||
}
|
||||
|
||||
private updateFormatOptions() {
|
||||
|
|
Loading…
Reference in a new issue