From e2c98678c31712054fafe6c9193b8ca5865792a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= <github@milchkannen.ch>
Date: Mon, 2 Aug 2021 11:06:53 +0200
Subject: [PATCH] feat(resource): update resource's label (DSP-1801) (#492)

* feat(resource): init edit label

* feat(resource): update resource's label (DSP-1801)
---
 src/app/main/dialog/dialog.component.html     | 52 ++++++++----
 src/app/main/dialog/dialog.component.scss     |  4 +
 .../properties/properties.component.html      |  5 ++
 .../properties/properties.component.ts        | 81 ++++++++++++-------
 4 files changed, 99 insertions(+), 43 deletions(-)

diff --git a/src/app/main/dialog/dialog.component.html b/src/app/main/dialog/dialog.component.html
index 3b4b5c18bd..3106899217 100644
--- a/src/app/main/dialog/dialog.component.html
+++ b/src/app/main/dialog/dialog.component.html
@@ -281,21 +281,24 @@
     <div *ngSwitchCase="'updateCardinality'">
         <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
         </app-dialog-header>
-        <app-property-form [propertyInfo]="data.propInfo" [resClassIri]="data.parentIri" [guiOrder]="data.position" [canSetFullCardinality]="data.canBeUpdated" (closeDialog)="dialogRef.close()">
+        <app-property-form [propertyInfo]="data.propInfo" [resClassIri]="data.parentIri" [guiOrder]="data.position"
+            [canSetFullCardinality]="data.canBeUpdated" (closeDialog)="dialogRef.close()">
         </app-property-form>
     </div>
 
     <div *ngSwitchCase="'createProperty'">
         <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
         </app-dialog-header>
-        <app-property-form [propertyInfo]="data.propInfo" [resClassIri]="data.parentIri" [guiOrder]="data.position" [canSetFullCardinality]="data.canBeUpdated" (closeDialog)="dialogRef.close()">
+        <app-property-form [propertyInfo]="data.propInfo" [resClassIri]="data.parentIri" [guiOrder]="data.position"
+            [canSetFullCardinality]="data.canBeUpdated" (closeDialog)="dialogRef.close()">
         </app-property-form>
     </div>
 
     <div *ngSwitchCase="'editProperty'">
         <app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
         </app-dialog-header>
-        <app-property-form [propertyInfo]="data.propInfo" [resClassIri]="data.parentIri" [guiOrder]="data.position" [canSetFullCardinality]="data.canBeUpdated" (closeDialog)="dialogRef.close()">
+        <app-property-form [propertyInfo]="data.propInfo" [resClassIri]="data.parentIri" [guiOrder]="data.position"
+            [canSetFullCardinality]="data.canBeUpdated" (closeDialog)="dialogRef.close()">
         </app-property-form>
     </div>
 
@@ -324,20 +327,40 @@
         </app-resource-instance-form>
     </div>
 
+    <div *ngSwitchCase="'editResource'">
+        <app-dialog-header [title]="data.title" [subtitle]="'Edit resource\'s label'">
+        </app-dialog-header>
+        <mat-dialog-content class="form-content">
+            <mat-form-field class="large-field">
+                <input matInput placeholder="Label" [value]="data.title" (keyup)="onKey($event)">
+            </mat-form-field>
+        </mat-dialog-content>
+        <mat-dialog-actions>
+            <button mat-button mat-dialog-close class="cancel-button center"
+                [mat-dialog-close]="{confirmed: false, comment: comment}">
+                Cancel
+            </button>
+            <span class="fill-remaining-space"></span>
+            <button mat-button mat-raised-button [color]="'primary'" class="confirm-button center"
+                [mat-dialog-close]="{confirmed: true, comment: comment}" [disabled]="!comment">
+                Save
+            </button>
+        </mat-dialog-actions>
+    </div>
+
     <div *ngSwitchCase="'deleteResource'">
         <app-dialog-header [title]="data.title" [subtitle]="'Delete resource instance'"></app-dialog-header>
-        <mat-dialog-content>
+        <mat-dialog-content class="form-content">
+            <mat-form-field class="large-field">
+                <mat-label>Comment why resource is being deleted</mat-label>
+                <textarea matInput class="deletion-comment" type="text" (keyup)="onKey($event)"
+                    [placeholder]="'Ex. Resource was created by mistake...'"></textarea>
+            </mat-form-field>
             Do you want to delete this resource?
-            <textarea
-                matinput
-                class="deletion-comment"
-                type="text"
-                (keyup)="onKey($event)"
-                [placeholder]="'Comment why resource is being deleted'"
-            ></textarea>
         </mat-dialog-content>
         <mat-dialog-actions>
-            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="{confirmed: false, comment: comment}">
+            <button mat-button mat-dialog-close class="cancel-button center"
+                [mat-dialog-close]="{confirmed: false, comment: comment}">
                 No, keep it
             </button>
             <span class="fill-remaining-space"></span>
@@ -350,9 +373,10 @@
 
     <div *ngSwitchCase="'eraseResource'">
         <app-dialog-header [title]="data.title" [subtitle]="'Delete resource'"></app-dialog-header>
-        Do you want to erase this resource forever?<br>WARNING: This action cannot be undone, so use it with care.
+        Do you want to erase this resource forever?<br><br>WARNING: This action cannot be undone, so use it with care.
         <mat-dialog-actions>
-            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="{confirmed: false, comment: comment}">
+            <button mat-button mat-dialog-close class="cancel-button center"
+                [mat-dialog-close]="{confirmed: false, comment: comment}">
                 No, keep it
             </button>
             <span class="fill-remaining-space"></span>
diff --git a/src/app/main/dialog/dialog.component.scss b/src/app/main/dialog/dialog.component.scss
index aef24dac6b..584fa38f7f 100644
--- a/src/app/main/dialog/dialog.component.scss
+++ b/src/app/main/dialog/dialog.component.scss
@@ -11,3 +11,7 @@
   padding: 8px;
   height: 64px;
 }
+
+.mat-dialog-content {
+  margin: 0 auto;
+}
diff --git a/src/app/workspace/resource/properties/properties.component.html b/src/app/workspace/resource/properties/properties.component.html
index 6928e34c6e..0fbc9c4f44 100644
--- a/src/app/workspace/resource/properties/properties.component.html
+++ b/src/app/workspace/resource/properties/properties.component.html
@@ -5,6 +5,7 @@
     <h3 class="label mat-title">
         {{resource.res.label}} <span *ngIf="deletedResource">(deleted)</span>
     </h3>
+
     <span class="fill-remaining-space"></span>
 
     <!-- tools: share, add to favorites, edit, delete etc. -->
@@ -55,6 +56,10 @@ <h3 class="label mat-title">
             <mat-icon>more_vert</mat-icon>
         </button>
         <mat-menu #more="matMenu" class="res-more-menu">
+            <button mat-menu-item matTooltip="Edit the label of this resource" matTooltipPosition="above" (click)="openDialog('edit')">
+                <mat-icon>edit</mat-icon>
+                Edit label
+            </button>
             <button mat-menu-item matTooltip="Move resource to trash bin." matTooltipPosition="above" (click)="openDialog('delete')">
                 <mat-icon>delete</mat-icon>
                 Delete resource
diff --git a/src/app/workspace/resource/properties/properties.component.ts b/src/app/workspace/resource/properties/properties.component.ts
index 2b8afb20ec..0a7c4f6835 100644
--- a/src/app/workspace/resource/properties/properties.component.ts
+++ b/src/app/workspace/resource/properties/properties.component.ts
@@ -20,6 +20,8 @@ import {
     ReadUser,
     ReadValue,
     ResourcePropertyDefinition,
+    UpdateResourceMetadata,
+    UpdateResourceMetadataResponse,
     UserResponse
 } from '@dasch-swiss/dsp-js';
 import {
@@ -226,7 +228,7 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
         // --> TODO: pop up resource preview on hover
     }
 
-    openDialog(type: 'delete' | 'erase') {
+    openDialog(type: 'delete' | 'erase' | 'edit') {
         const dialogConfig: MatDialogConfig = {
             width: '560px',
             maxHeight: '80vh',
@@ -245,39 +247,60 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
 
             if (answer.confirmed === true) {
 
-                const payload = new DeleteResource();
-                payload.id = this.resource.res.id;
-                payload.type = this.resource.res.type;
-                payload.deleteComment = answer.comment ? answer.comment : undefined;
-                payload.lastModificationDate = this.lastModificationDate;
-                switch (type) {
-                    case 'delete':
-                        // delete the resource and refresh the view
-                        this._dspApiConnection.v2.res.deleteResource(payload).subscribe(
-                            (response: DeleteResourceResponse) => {
-                                // display notification and mark resource as 'deleted'
-                                this._notification.openSnackBar(`${response.result}: ${this.resource.res.label}`);
-                                this.deletedResource = true;
+                if (type !== 'edit') {
+
+                    const payload = new DeleteResource();
+                    payload.id = this.resource.res.id;
+                    payload.type = this.resource.res.type;
+                    payload.deleteComment = answer.comment ? answer.comment : undefined;
+                    payload.lastModificationDate = this.lastModificationDate;
+                    switch (type) {
+                        case 'delete':
+                            // delete the resource and refresh the view
+                            this._dspApiConnection.v2.res.deleteResource(payload).subscribe(
+                                (response: DeleteResourceResponse) => {
+                                    // display notification and mark resource as 'deleted'
+                                    this._notification.openSnackBar(`${response.result}: ${this.resource.res.label}`);
+                                    this.deletedResource = true;
+                                },
+                                (error: ApiResponseError) => {
+                                    this._errorHandler.showMessage(error);
+                                }
+                            );
+                            break;
+
+                        case 'erase':
+                            // erase the resource and refresh the view
+                            this._dspApiConnection.v2.res.eraseResource(payload).subscribe(
+                                (response: DeleteResourceResponse) => {
+                                    // display notification and mark resource as 'erased'
+                                    this._notification.openSnackBar(`${response.result}: ${this.resource.res.label}`);
+                                    this.deletedResource = true;
+                                },
+                                (error: ApiResponseError) => {
+                                    this._errorHandler.showMessage(error);
+                                }
+                            );
+                            break;
+                    }
+                } else {
+
+                    // update resource's label if it has changed
+                    if (this.resource.res.label !== answer.comment) {
+                        const payload = new UpdateResourceMetadata();
+                        payload.id = this.resource.res.id;
+                        payload.type = this.resource.res.type;
+                        payload.lastModificationDate = this.lastModificationDate;
+                        payload.label = answer.comment;
+                        this._dspApiConnection.v2.res.updateResourceMetadata(payload).subscribe(
+                            (response: UpdateResourceMetadataResponse) => {
+                                this.resource.res.label = payload.label;
                             },
                             (error: ApiResponseError) => {
                                 this._errorHandler.showMessage(error);
                             }
                         );
-                        break;
-
-                    case 'erase':
-                        // erase the resource and refresh the view
-                        this._dspApiConnection.v2.res.eraseResource(payload).subscribe(
-                            (response: DeleteResourceResponse) => {
-                                // display notification and mark resource as 'erased'
-                                this._notification.openSnackBar(`${response.result}: ${this.resource.res.label}`);
-                                this.deletedResource = true;
-                            },
-                            (error: ApiResponseError) => {
-                                this._errorHandler.showMessage(error);
-                            }
-                        );
-                        break;
+                    }
                 }
 
             }