add ability to delete images
This commit is contained in:
parent
fd24e29c0c
commit
042129e57c
|
@ -1,8 +1,8 @@
|
|||
<mat-progress-spinner *ngIf="images === null"></mat-progress-spinner>
|
||||
|
||||
<h3 *ngIf="images !== null && images.length <= 0">
|
||||
<h2 class="text-center" *ngIf="images !== null && images.length <= 0">
|
||||
There are no images to display
|
||||
</h3>
|
||||
</h2>
|
||||
|
||||
<ng-container *ngIf="images !== null && images.length > 0">
|
||||
<masonry [columns]="columns">
|
||||
|
|
|
@ -4,12 +4,14 @@ import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
|
|||
import { SupportedMime } from 'picsur-shared/dist/dto/mimes.dto';
|
||||
import { EImage } from 'picsur-shared/dist/entities/image.entity';
|
||||
import { HasFailed } from 'picsur-shared/dist/types/failable';
|
||||
import { SnackBarType } from 'src/app/models/dto/snack-bar-type.dto';
|
||||
import { ImageService } from 'src/app/services/api/image.service';
|
||||
import { Logger } from 'src/app/services/logger/logger.service';
|
||||
import {
|
||||
BootstrapService,
|
||||
BSScreenSize
|
||||
} from 'src/app/util/util-module/bootstrap.service';
|
||||
import { UtilService } from 'src/app/util/util-module/util.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './images.component.html',
|
||||
|
@ -28,6 +30,7 @@ export class ImagesComponent implements OnInit {
|
|||
private readonly route: ActivatedRoute,
|
||||
private readonly router: Router,
|
||||
private readonly bootstrapService: BootstrapService,
|
||||
private readonly utilService: UtilService,
|
||||
private readonly imageService: ImageService
|
||||
) {}
|
||||
|
||||
|
@ -76,9 +79,37 @@ export class ImagesComponent implements OnInit {
|
|||
this.router.navigate(['/view', image.id]);
|
||||
}
|
||||
|
||||
deleteImage(image: EImage) {
|
||||
async deleteImage(image: EImage) {
|
||||
const pressedButton = await this.utilService.showDialog({
|
||||
title: `Are you sure you want to delete the image?`,
|
||||
description: 'This action cannot be undone.',
|
||||
buttons: [
|
||||
{
|
||||
color: 'primary',
|
||||
name: 'cancel',
|
||||
text: 'Cancel',
|
||||
},
|
||||
{
|
||||
color: 'red',
|
||||
name: 'delete',
|
||||
text: 'Delete',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
if (pressedButton === 'delete') {
|
||||
const result = await this.imageService.DeleteImage(image.id ?? '');
|
||||
if (HasFailed(result)) {
|
||||
this.utilService.showSnackBar(
|
||||
'Failed to delete image',
|
||||
SnackBarType.Error
|
||||
);
|
||||
} else {
|
||||
this.utilService.showSnackBar('Image deleted', SnackBarType.Success);
|
||||
this.images = this.images?.filter((i) => i.id !== image.id) ?? null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
gotoPage(page: number) {
|
||||
this.router.navigate(['/images', page]).then(() => {
|
||||
|
|
|
@ -65,16 +65,16 @@ export class SettingsRolesComponent implements OnInit, AfterViewInit {
|
|||
title: `Are you sure you want to delete ${role.name}?`,
|
||||
description: 'This action cannot be undone.',
|
||||
buttons: [
|
||||
{
|
||||
color: 'red',
|
||||
name: 'delete',
|
||||
text: 'Delete',
|
||||
},
|
||||
{
|
||||
color: 'primary',
|
||||
name: 'cancel',
|
||||
text: 'Cancel',
|
||||
},
|
||||
{
|
||||
color: 'red',
|
||||
name: 'delete',
|
||||
text: 'Delete',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
|
|
@ -63,16 +63,16 @@ export class SettingsUsersComponent implements OnInit {
|
|||
title: `Are you sure you want to delete ${user.username}?`,
|
||||
description: 'This action cannot be undone.',
|
||||
buttons: [
|
||||
{
|
||||
color: 'red',
|
||||
name: 'delete',
|
||||
text: 'Delete',
|
||||
},
|
||||
{
|
||||
color: 'primary',
|
||||
name: 'cancel',
|
||||
text: 'Cancel',
|
||||
},
|
||||
{
|
||||
color: 'red',
|
||||
name: 'delete',
|
||||
text: 'Delete',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
|
|
@ -20,6 +20,10 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Unstyled links
|
||||
.link-unstyled {
|
||||
&,
|
||||
|
|
Loading…
Reference in a new issue