From 4d9b74727f8b6eac8be9170b3cc2fcbef30685b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= <github@milchkannen.ch>
Date: Tue, 31 May 2022 15:58:21 +0200
Subject: [PATCH] feat(value): improve list value (DEV-951) (#757)

---
 .../list-value/list-value.component.html       | 18 ++++++++++++++----
 .../list-value/list-value.component.spec.ts    |  2 +-
 .../values/list-value/list-value.component.ts  |  9 ++-------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/app/workspace/resource/values/list-value/list-value.component.html b/src/app/workspace/resource/values/list-value/list-value.component.html
index 26dde2a617..0e26f42879 100644
--- a/src/app/workspace/resource/values/list-value/list-value.component.html
+++ b/src/app/workspace/resource/values/list-value/list-value.component.html
@@ -1,8 +1,17 @@
 <span *ngIf="mode !== 'read' && listRootNode !== undefined">
-    <button class="md-button" mat-stroked-button [matMenuTriggerFor]="mainMenu" type="button" placeholder="List value">
-        <span *ngIf="!selectedNode">Select list value</span>
-        <span *ngIf="selectedNode">{{selectedNode.label}}</span>
-    </button>
+
+    <!-- button to select a list node -->
+    <span [matTooltip]="(!selectedNode && !listRootNode.children.length) ? 'This list doesn\'t have any node values' : 'Select list value'" [matTooltipPosition]="'above'">
+        <button mat-stroked-button [matMenuTriggerFor]="mainMenu" type="button" placeholder="List value" [disabled]="!selectedNode && !listRootNode.children.length">
+
+            <!-- if no node is selected: display list label; if the list does not have any list nodes, the button should be disabled -->
+            <span *ngIf="!selectedNode">{{listRootNode.label}}</span>
+
+            <!-- if a node is selected: display node label -->
+            <span *ngIf="selectedNode">{{selectedNode.label}}</span>
+
+        </button>
+    </span>
 
     <mat-menu #mainMenu="matMenu" [overlapTrigger]="false">
         <span *ngFor="let child of listRootNode.children">
@@ -22,6 +31,7 @@
             </span>
         </span>
     </mat-menu>
+
     <mat-error *ngIf="valueFormControl.hasError('valueNotChanged')  && valueFormControl.dirty">
         <span class="custom-error-message">New value must be different than the current value.</span>
     </mat-error>
diff --git a/src/app/workspace/resource/values/list-value/list-value.component.spec.ts b/src/app/workspace/resource/values/list-value/list-value.component.spec.ts
index 9eb2d319fc..e3b2e83818 100644
--- a/src/app/workspace/resource/values/list-value/list-value.component.spec.ts
+++ b/src/app/workspace/resource/values/list-value/list-value.component.spec.ts
@@ -160,7 +160,7 @@ describe('ListValueComponent', () => {
 
             expect(valuesSpy.v2.list.getList).toHaveBeenCalledTimes(1);
             expect(valuesSpy.v2.list.getList).toHaveBeenCalledWith('http://rdfh.ch/lists/0001/treeList');
-            expect(testHostComponent.inputValueComponent.listRootNode.children.length).toEqual(1);
+            expect(testHostComponent.inputValueComponent.listRootNode.children.length).toEqual(0);
 
             const openListButtonDe = valueComponentDe.query(By.css('button'));
 
diff --git a/src/app/workspace/resource/values/list-value/list-value.component.ts b/src/app/workspace/resource/values/list-value/list-value.component.ts
index ff27bd527b..3fc7bc7785 100644
--- a/src/app/workspace/resource/values/list-value/list-value.component.ts
+++ b/src/app/workspace/resource/values/list-value/list-value.component.ts
@@ -68,14 +68,12 @@ export class ListValueComponent extends BaseValueDirective implements OnInit, On
         }
         if (this.valueFormControl !== undefined) {
             if (this.mode !== 'read') {
-                this.listRootNode = new ListNodeV2();
                 const rootNodeIris = this.propertyDef.guiAttributes;
                 for (const rootNodeIri of rootNodeIris) {
-                    // get rid of the "hlist"
                     const trimmedRootNodeIRI = rootNodeIri.substr(7, rootNodeIri.length - (1 + 7));
                     this._dspApiConnection.v2.list.getList(trimmedRootNodeIRI).subscribe(
-                        (response2: ListNodeV2) => {
-                            this.listRootNode.children.push(response2);
+                        (response: ListNodeV2) => {
+                            this.listRootNode = response;
                         }, (error: ApiResponseError) => {
                             this._errorHandler.showMessage(error);
                         });
@@ -126,11 +124,8 @@ export class ListValueComponent extends BaseValueDirective implements OnInit, On
         }
 
         const newListValue = new CreateListValue();
-
-
         newListValue.listNode = this.valueFormControl.value;
 
-
         if (this.commentFormControl.value !== null && this.commentFormControl.value !== '') {
             newListValue.valueHasComment = this.commentFormControl.value;
         }