refactoring: replace mat-menu with dialog (#222)

* refactor: replace mat-menu with dialog * refactor: format code
dasch-swiss · Dec 22, 2023 · 8edbadc · 8edbadc
1 parent 37b4196
commit 8edbadc
Show file tree

Hide file tree

Showing 34 changed files with 327 additions and 375 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -64,6 +64,7 @@ import { CommentComponent } from './resource/comment/comment.component';
 import { HttpClientModule } from '@angular/common/http';
 import { BiographyComponent } from './biography/biography.component';
 import { LeceLeooComponent } from './lece-leoo/lece-leoo.component';
+import { ArkUrlDialogComponent } from './dialog/ark-url-dialog.component';
 
 @NgModule({
     declarations: [
@@ -102,6 +103,7 @@ import { LeceLeooComponent } from './lece-leoo/lece-leoo.component';
         PublishedLetterComponent,
         BiographyComponent,
         LeceLeooComponent,
+        ArkUrlDialogComponent
     ],
     imports: [
         AppRouting,

diff --git a/src/app/dialog/ark-url-dialog.component.html b/src/app/dialog/ark-url-dialog.component.html
@@ -0,0 +1,11 @@
+<h3 mat-dialog-title>Citation Link</h3>
+<mat-dialog-content>
+    <mat-form-field>
+        <mat-label>ARK URL</mat-label>
+        <input matInput [(ngModel)]="arkURL"/>
+    </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-button mat-dialog-close>Cancel</button>
+    <button mat-button class="btn-copy-arkurl" (click)="copyToClipBoard()">Copy To Clipboard</button>
+</mat-dialog-actions>
diff --git a/src/app/dialog/ark-url-dialog.component.scss b/src/app/dialog/ark-url-dialog.component.scss
@@ -0,0 +1,7 @@
+mat-form-field {
+  width: 100%;
+}
+
+mat-dialog-actions {
+  justify-content: space-between;
+}
diff --git a/src/app/dialog/ark-url-dialog.component.ts b/src/app/dialog/ark-url-dialog.component.ts
@@ -0,0 +1,44 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Clipboard } from '@angular/cdk/clipboard';
+
+@Component({
+    selector: 'ark-url-dialog',
+    templateUrl: 'ark-url-dialog.component.html',
+    styleUrls: ['ark-url-dialog.component.scss']
+})
+export class ArkUrlDialogComponent implements OnInit {
+    arkURL: string;
+    constructor(
+        @Inject(MAT_DIALOG_DATA) public data,
+        private _snackBar: MatSnackBar,
+        private _clipboard: Clipboard,
+        private _dialogRef: MatDialogRef<ArkUrlDialogComponent>
+        ) {
+    }
+
+    ngOnInit() {
+        this.arkURL = this.data.arkURL;
+    }
+
+    copyToClipBoard() {
+        this._clipboard.copy(this.arkURL);
+        this.openSnackBar();
+        this._dialogRef.close();
+    }
+
+    /**
+     * Display message to confirm the copy of the citation link (ARK URL)
+     */
+    openSnackBar() {
+        this._snackBar.open(
+            'Copied to clipboard!',
+            'Citation Link',
+            {
+                duration: 3000,
+                horizontalPosition: 'center',
+                verticalPosition: 'top'
+            });
+    }
+}
diff --git a/src/app/resource/beol-resource.ts b/src/app/resource/beol-resource.ts
@@ -14,7 +14,6 @@ import { Region, StillImageComponent, StillImageRepresentation} from '../dsp-ui-
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { IncomingService } from '../services/incoming.service';
 import { BeolService } from '../services/beol.service';
-import { MatSnackBar } from '@angular/material/snack-bar';
 
 export class BeolCompoundResource {
 
@@ -58,15 +57,11 @@ export abstract class BeolResource implements OnInit, OnDestroy {
 
     abstract propIris: PropIriToNameMapping;
 
-    message: string; // message to show in the snackbar to confirm the copy of the ARK URL
-    action: string; // label for the snackbar action
-
     constructor(
         @Inject(DspApiConnectionToken) protected _dspApiConnection: KnoraApiConnection,
         protected _route: ActivatedRoute,
         protected _incomingService: IncomingService,
-        protected _beolService: BeolService,
-        protected _snackBar: MatSnackBar) {
+        protected _beolService: BeolService) {
     }
 
     /**
@@ -368,18 +363,4 @@ export abstract class BeolResource implements OnInit, OnDestroy {
                 }
             );
     }
-
-    /**
-     * Display message to confirm the copy of the citation link (ARK URL)
-     */
-    openARKURLSnackBar() {
-        this.message = 'Copied to clipboard!';
-        this.action = 'Citation Link';
-        this._snackBar.open(this.message, this.action, {
-            duration: 3000,
-            horizontalPosition: 'center',
-            verticalPosition: 'top'
-        });
-    }
-
 }
diff --git a/src/app/resource/biblio-items/biblio-items.component.html b/src/app/resource/biblio-items/biblio-items.component.html
@@ -16,25 +16,9 @@
         <div class="main-content">
 
             <section class="cite-link">
-                <button mat-button class="share-res" matTooltip="Share resource by copying ARK url" matTooltipPosition="above"
-                        [matMenuTriggerFor]="share">
-                    <mat-icon>share</mat-icon>
-                    <span class="desktop-only">Citation Link</span>
+                <button mat-stroked-button class="share-res" (click)="openDialog(resource.readResource.versionArkUrl)">
+                    <mat-icon>share</mat-icon>Citation Link
                 </button>
-                <mat-menu #share="matMenu" class="res-share-menu">
-                    <!-- citation link - ARK URL -->
-                    <div class="ark-url-label mat-body">
-                        <label for="clipboard-arkurl">Citation Link (ARK URL)</label>
-                    </div>
-                    <div class="ark-url-input">
-                        <input id="clipboard-arkurl" class="clipboard-arkurl" cols="30" rows="10" readonly
-                               [(ngModel)]="resource.readResource.versionArkUrl" />
-                        <button mat-button class="btn-copy-arkurl" [cdkCopyToClipboard]="resource.readResource.versionArkUrl"
-                                matTooltip="Copy ARK url" matTooltipPosition="below" (click)="openARKURLSnackBar()">
-                            <mat-icon class="icon-arkurl">copy</mat-icon>
-                        </button>
-                    </div>
-                </mat-menu>
             </section>
 
 

diff --git a/src/app/resource/biblio-items/biblio-items.component.ts b/src/app/resource/biblio-items/biblio-items.component.ts
@@ -15,7 +15,8 @@ import { Subscription } from 'rxjs';
 import { IncomingService } from 'src/app/services/incoming.service';
 import { BeolService } from '../../services/beol.service';
 import { BeolCompoundResource, BeolResource, PropertyValues, PropIriToNameMapping } from '../beol-resource';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { ArkUrlDialogComponent } from '../../dialog/ark-url-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
 
 class BiblioItemsProps implements PropertyValues {
     startPage: ReadTextValue[] = [];
@@ -131,16 +132,14 @@ export class BiblioItemsComponent extends BeolResource {
 
     constructor(
         @Inject(DspApiConnectionToken) protected _dspApiConnection: KnoraApiConnection,
+        private _appInitService: AppInitService,
         protected _route: ActivatedRoute,
         protected _incomingService: IncomingService,
-        public location: Location,
         protected _beolService: BeolService,
-        private _appInitService: AppInitService,
-        protected _snackBar: MatSnackBar
+        public location: Location,
+        public dialog: MatDialog
     ) {
-
-        super(_dspApiConnection, _route, _incomingService, _beolService, _snackBar);
-
+        super(_dspApiConnection, _route, _incomingService, _beolService);
     }
 
     initProps() {
@@ -155,4 +154,14 @@ export class BiblioItemsComponent extends BeolResource {
     showIncomingRes(resIri, resType, res) {
         this._beolService.routeByResourceType(resType, resIri, res);
     }
+
+    openDialog(arkURL: string) {
+        this.dialog.open(ArkUrlDialogComponent, {
+            hasBackdrop: true,
+            width: '600px',
+            data: {
+                arkURL: arkURL
+            }
+        });
+    }
 }
diff --git a/src/app/resource/comment/comment.component.html b/src/app/resource/comment/comment.component.html
@@ -19,25 +19,9 @@ <h4 class="subheading-2">{{props?.commentOf[0].propertyLabel}}</h4>
         <div class="main-content">
 
             <section class="cite-link">
-                <button mat-button class="share-res" matTooltip="Share resource by copying ARK url" matTooltipPosition="above"
-                        [matMenuTriggerFor]="share">
-                    <mat-icon>share</mat-icon>
-                    <span class="desktop-only">Citation Link</span>
+                <button mat-stroked-button class="share-res" (click)="openDialog(resource.readResource.versionArkUrl)">
+                    <mat-icon>share</mat-icon>Citation Link
                 </button>
-                <mat-menu #share="matMenu" class="res-share-menu">
-                    <!-- citation link - ARK URL -->
-                    <div class="ark-url-label mat-body">
-                        <label for="clipboard-arkurl">Citation Link (ARK URL)</label>
-                    </div>
-                    <div class="ark-url-input">
-                        <input id="clipboard-arkurl" class="clipboard-arkurl" cols="30" rows="10" readonly
-                               [(ngModel)]="resource.readResource.versionArkUrl" />
-                        <button mat-button class="btn-copy-arkurl" [cdkCopyToClipboard]="resource.readResource.versionArkUrl"
-                                matTooltip="Copy ARK url" matTooltipPosition="below" (click)="openARKURLSnackBar()">
-                            <mat-icon class="icon-arkurl">copy</mat-icon>
-                        </button>
-                    </div>
-                </mat-menu>
             </section>
 
             <h4>{{resource?.readResource.label}}</h4>

diff --git a/src/app/resource/comment/comment.component.ts b/src/app/resource/comment/comment.component.ts
@@ -14,7 +14,8 @@ import { Subscription } from 'rxjs';
 import { IncomingService } from 'src/app/services/incoming.service';
 import { BeolService } from '../../services/beol.service';
 import { BeolCompoundResource, BeolResource, PropertyValues, PropIriToNameMapping } from '../beol-resource';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { ArkUrlDialogComponent } from '../../dialog/ark-url-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
 
 class CommentProps implements PropertyValues {
     commentOf: ReadLinkValue[] = [];
@@ -50,15 +51,14 @@ export class CommentComponent extends BeolResource {
 
     constructor(
         @Inject(DspApiConnectionToken) protected _dspApiConnection: KnoraApiConnection,
+        private _appInitService: AppInitService,
         protected _route: ActivatedRoute,
         protected _incomingService: IncomingService,
-        public location: Location,
         protected _beolService: BeolService,
-        private _appInitService: AppInitService,
-        protected _snackBar: MatSnackBar
+        public location: Location,
+        public dialog: MatDialog
     ) {
-
-        super(_dspApiConnection, _route, _incomingService, _beolService, _snackBar);
+        super(_dspApiConnection, _route, _incomingService, _beolService);
     }
 
     initProps() {
@@ -70,4 +70,14 @@ export class CommentComponent extends BeolResource {
         this.props = props;
 
     }
+
+    openDialog(arkURL: string) {
+        this.dialog.open(ArkUrlDialogComponent, {
+            hasBackdrop: true,
+            width: '600px',
+            data: {
+                arkURL: arkURL
+            }
+        });
+    }
 }
diff --git a/src/app/resource/endnote/endnote.component.html b/src/app/resource/endnote/endnote.component.html
@@ -21,25 +21,9 @@ <h4 class="subheading-2">{{props?.figure[0].propertyLabel}}</h4>
         <div class="main-content">
 
             <section class="cite-link">
-                <button mat-button class="share-res" matTooltip="Share resource by copying ARK url" matTooltipPosition="above"
-                        [matMenuTriggerFor]="share">
-                    <mat-icon>share</mat-icon>
-                    <span class="desktop-only">Citation Link</span>
+                <button mat-stroked-button class="share-res" (click)="openDialog(resource.readResource.versionArkUrl)">
+                    <mat-icon>share</mat-icon>Citation Link
                 </button>
-                <mat-menu #share="matMenu" class="res-share-menu">
-                    <!-- citation link - ARK URL -->
-                    <div class="ark-url-label mat-body">
-                        <label for="clipboard-arkurl">Citation Link (ARK URL)</label>
-                    </div>
-                    <div class="ark-url-input">
-                        <input id="clipboard-arkurl" class="clipboard-arkurl" cols="30" rows="10" readonly
-                               [(ngModel)]="resource.readResource.versionArkUrl" />
-                        <button mat-button class="btn-copy-arkurl" [cdkCopyToClipboard]="resource.readResource.versionArkUrl"
-                                matTooltip="Copy ARK url" matTooltipPosition="below" (click)="openARKURLSnackBar()">
-                            <mat-icon class="icon-arkurl">copy</mat-icon>
-                        </button>
-                    </div>
-                </mat-menu>
             </section>
 
             <section class="title center">

diff --git a/src/app/resource/endnote/endnote.component.ts b/src/app/resource/endnote/endnote.component.ts
@@ -13,7 +13,8 @@ import { Subscription } from 'rxjs';
 import { IncomingService } from 'src/app/services/incoming.service';
 import { BeolService } from '../../services/beol.service';
 import { BeolCompoundResource, BeolResource, PropertyValues, PropIriToNameMapping } from '../beol-resource';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { ArkUrlDialogComponent } from '../../dialog/ark-url-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
 
 class EndnoteProps implements PropertyValues {
     number: ReadTextValue[] = [];
@@ -49,16 +50,14 @@ export class EndnoteComponent extends BeolResource {
 
     constructor(
         @Inject(DspApiConnectionToken) protected _dspApiConnection: KnoraApiConnection,
+        private _appInitService: AppInitService,
         protected _route: ActivatedRoute,
         protected _incomingService: IncomingService,
-        public location: Location,
         protected _beolService: BeolService,
-        private _appInitService: AppInitService,
-        protected _snackBar: MatSnackBar
+        public location: Location,
+        public dialog: MatDialog
     ) {
-
-        super(_dspApiConnection, _route, _incomingService, _beolService, _snackBar);
-
+        super(_dspApiConnection, _route, _incomingService, _beolService);
     }
 
     initProps() {
@@ -70,4 +69,13 @@ export class EndnoteComponent extends BeolResource {
         this.props = props;
     }
 
+    openDialog(arkURL: string) {
+        this.dialog.open(ArkUrlDialogComponent, {
+            hasBackdrop: true,
+            width: '600px',
+            data: {
+                arkURL: arkURL
+            }
+        });
+    }
 }
diff --git a/src/app/resource/figure/figure.component.html b/src/app/resource/figure/figure.component.html
@@ -14,25 +14,9 @@
         <div class="main-content">
 
             <section class="cite-link">
-                <button mat-button class="share-res" matTooltip="Share resource by copying ARK url" matTooltipPosition="above"
-                        [matMenuTriggerFor]="share">
-                    <mat-icon>share</mat-icon>
-                    <span class="desktop-only">Citation Link</span>
+                <button mat-stroked-button class="share-res" (click)="openDialog(resource.readResource.versionArkUrl)">
+                    <mat-icon>share</mat-icon>Citation Link
                 </button>
-                <mat-menu #share="matMenu" class="res-share-menu">
-                    <!-- citation link - ARK URL -->
-                    <div class="ark-url-label mat-body">
-                        <label for="clipboard-arkurl">Citation Link (ARK URL)</label>
-                    </div>
-                    <div class="ark-url-input">
-                        <input id="clipboard-arkurl" class="clipboard-arkurl" cols="30" rows="10" readonly
-                               [(ngModel)]="resource.readResource.versionArkUrl" />
-                        <button mat-button class="btn-copy-arkurl" [cdkCopyToClipboard]="resource.readResource.versionArkUrl"
-                                matTooltip="Copy ARK url" matTooltipPosition="below" (click)="openARKURLSnackBar()">
-                            <mat-icon class="icon-arkurl">copy</mat-icon>
-                        </button>
-                    </div>
-                </mat-menu>
             </section>
 
             <section class="title center">