From 2305739464a4fae6f0de3ef16f3d18e55cd24685 Mon Sep 17 00:00:00 2001 From: rubikscraft Date: Thu, 12 May 2022 12:06:37 +0200 Subject: [PATCH] start work on customization dialog --- .../customize-dialog.component.html | 6 ++++ .../customize-dialog.component.scss | 0 .../customize-dialog.component.ts | 26 +++++++++++++++ .../src/app/routes/view/view.component.html | 9 +++-- .../src/app/routes/view/view.component.ts | 27 +++++++++++---- frontend/src/app/routes/view/view.module.ts | 5 ++- .../src/app/util/util-module/util.service.ts | 33 ++++++++++++++----- 7 files changed, 87 insertions(+), 19 deletions(-) create mode 100644 frontend/src/app/routes/view/customize-dialog/customize-dialog.component.html create mode 100644 frontend/src/app/routes/view/customize-dialog/customize-dialog.component.scss create mode 100644 frontend/src/app/routes/view/customize-dialog/customize-dialog.component.ts diff --git a/frontend/src/app/routes/view/customize-dialog/customize-dialog.component.html b/frontend/src/app/routes/view/customize-dialog/customize-dialog.component.html new file mode 100644 index 0000000..9831b19 --- /dev/null +++ b/frontend/src/app/routes/view/customize-dialog/customize-dialog.component.html @@ -0,0 +1,6 @@ +
+

Customize Image

+
+
+ +
diff --git a/frontend/src/app/routes/view/customize-dialog/customize-dialog.component.scss b/frontend/src/app/routes/view/customize-dialog/customize-dialog.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/app/routes/view/customize-dialog/customize-dialog.component.ts b/frontend/src/app/routes/view/customize-dialog/customize-dialog.component.ts new file mode 100644 index 0000000..7cf555d --- /dev/null +++ b/frontend/src/app/routes/view/customize-dialog/customize-dialog.component.ts @@ -0,0 +1,26 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { + ConfirmDialogComponent, + ConfirmDialogData +} from 'src/app/util/util-module/confirm-dialog/confirm-dialog.component'; + +@Component({ + selector: 'customize-dialog', + templateUrl: './customize-dialog.component.html', + styleUrls: ['./customize-dialog.component.scss'], +}) +export class CustomizeDialogComponent implements OnInit { + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData + ) {} + + ngOnInit(): void { + console.log(this.data); + } + + close() { + this.dialogRef.close(); + } +} diff --git a/frontend/src/app/routes/view/view.component.html b/frontend/src/app/routes/view/view.component.html index b77337f..1ff2e89 100644 --- a/frontend/src/app/routes/view/view.component.html +++ b/frontend/src/app/routes/view/view.component.html @@ -1,11 +1,11 @@
-

Image uploaded by {{imageUser?.username}}

+

Image uploaded by {{ imageUser?.username }}

-

Uploaded {{(image.created | amTimeAgo)}}

+

Uploaded {{ image.created | amTimeAgo }}

@@ -21,7 +21,7 @@ Image Format {{ format.value }} @@ -56,6 +56,9 @@ [open-on-hover]="true" (main-click)="download()" > + diff --git a/frontend/src/app/routes/view/view.component.ts b/frontend/src/app/routes/view/view.component.ts index 7ebabc2..883fe33 100644 --- a/frontend/src/app/routes/view/view.component.ts +++ b/frontend/src/app/routes/view/view.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { MatDialog } from '@angular/material/dialog'; import { ActivatedRoute, Router } from '@angular/router'; import { ImageLinks } from 'picsur-shared/dist/dto/image-links.dto'; import { @@ -17,6 +18,7 @@ import { UUIDRegex } from 'picsur-shared/dist/util/common-regex'; import { ParseMime } from 'picsur-shared/dist/util/parse-mime'; import { ImageService } from 'src/app/services/api/image.service'; import { UtilService } from 'src/app/util/util-module/util.service'; +import { CustomizeDialogComponent } from './customize-dialog/customize-dialog.component'; @Component({ templateUrl: './view.component.html', @@ -27,7 +29,8 @@ export class ViewComponent implements OnInit { private route: ActivatedRoute, private router: Router, private imageService: ImageService, - private utilService: UtilService + private utilService: UtilService, + private dialog: MatDialog ) {} private id: string; @@ -36,13 +39,14 @@ export class ViewComponent implements OnInit { mime: ImageMime.JPEG, type: SupportedMimeCategory.Image, }; + private currentSelectedFormat: string = ImageMime.JPEG; public formatOptions: { value: string; key: string; }[] = []; - public setSelectedValue: string = ImageMime.JPEG; + public setSelectedFormat: string = ImageMime.JPEG; public previewLink = ''; public imageLinks = new ImageLinks(); @@ -78,18 +82,19 @@ export class ViewComponent implements OnInit { } if (this.masterMime.type === SupportedMimeCategory.Image) { - this.setSelectedValue = ImageMime.JPEG; + this.setSelectedFormat = ImageMime.JPEG; } else if (this.masterMime.type === SupportedMimeCategory.Animation) { - this.setSelectedValue = AnimMime.GIF; + this.setSelectedFormat = AnimMime.GIF; } else { - this.setSelectedValue = metadata.fileMimes.master; + this.setSelectedFormat = metadata.fileMimes.master; } - this.selectedFormat(this.setSelectedValue); + this.selectedFormat(this.setSelectedFormat); this.updateFormatOptions(); } selectedFormat(format: string) { + this.currentSelectedFormat = format; if (format === 'original') { this.imageLinks = this.imageService.CreateImageLinksFromID(this.id, null); } else { @@ -108,6 +113,16 @@ export class ViewComponent implements OnInit { this.utilService.shareFile(this.imageLinks.source); } + async customize() { + await this.utilService.showCustomDialog( + CustomizeDialogComponent, + { + format: this.currentSelectedFormat, + }, + { dismissable: false } + ); + } + goBackHome() { this.router.navigate(['/']); } diff --git a/frontend/src/app/routes/view/view.module.ts b/frontend/src/app/routes/view/view.module.ts index 1b349c8..b2051b7 100644 --- a/frontend/src/app/routes/view/view.module.ts +++ b/frontend/src/app/routes/view/view.module.ts @@ -1,6 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; +import { MatDialogModule } from '@angular/material/dialog'; import { MatDividerModule } from '@angular/material/divider'; import { MatIconModule } from '@angular/material/icon'; import { MatSelectModule } from '@angular/material/select'; @@ -8,10 +9,11 @@ import { MomentModule } from 'ngx-moment'; import { CopyFieldModule } from 'src/app/components/copy-field/copy-field.module'; import { FabModule } from 'src/app/components/fab/fab.module'; import { PicsurImgModule } from 'src/app/components/picsur-img/picsur-img.module'; +import { CustomizeDialogComponent } from './customize-dialog/customize-dialog.component'; import { ViewComponent } from './view.component'; import { ViewRoutingModule } from './view.routing.module'; @NgModule({ - declarations: [ViewComponent], + declarations: [ViewComponent, CustomizeDialogComponent], imports: [ CommonModule, CopyFieldModule, @@ -19,6 +21,7 @@ import { ViewRoutingModule } from './view.routing.module'; MatButtonModule, MatSelectModule, MatDividerModule, + MatDialogModule, MatIconModule, PicsurImgModule, MatIconModule, diff --git a/frontend/src/app/util/util-module/util.service.ts b/frontend/src/app/util/util-module/util.service.ts index 86790f8..adb27b6 100644 --- a/frontend/src/app/util/util-module/util.service.ts +++ b/frontend/src/app/util/util-module/util.service.ts @@ -1,3 +1,4 @@ +import { ComponentType } from '@angular/cdk/portal'; import { Injectable } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { MatSnackBar } from '@angular/material/snack-bar'; @@ -39,20 +40,28 @@ export class UtilService { ) { let ref = this.snackBar.open(message, '', { panelClass: ['mat-toolbar', 'snackbar', type], - verticalPosition: this.bootstrap.screenSizeSnapshot() > BSScreenSize.xs ? 'bottom' : 'top', + verticalPosition: + this.bootstrap.screenSizeSnapshot() > BSScreenSize.xs + ? 'bottom' + : 'top', ...(duration !== null ? { duration } : {}), }); } - public async showDialog( - options: ConfirmDialogData - ): Promise { + public async showCustomDialog( + component: ComponentType, + data: any, + options?: { + dismissable?: boolean; + } + ): Promise { return new Promise((resolve, reject) => { - const ref = this.dialog.open(ConfirmDialogComponent, { - data: options, - disableClose: true, - closeOnNavigation: false, - panelClass: 'small-dialog-padding' + const ref = this.dialog.open(component, { + data, + panelClass: 'small-dialog-padding', + ...(options?.dismissable === false + ? {} + : { disableClose: true, closeOnNavigation: false }), }); const subscription = ref.beforeClosed().subscribe((result) => { subscription.unsubscribe(); @@ -61,6 +70,12 @@ export class UtilService { }); } + public async showDialog( + options: ConfirmDialogData + ): Promise { + return this.showCustomDialog(ConfirmDialogComponent, options); + } + public showDownloadDialog(filename: string): () => void { const ref = this.dialog.open(DownloadDialogComponent, { data: { name: filename },