Merge branch 'main' into feature/dev-2490-refactor-sessionservice-to-…

…return-true-observables-that-also * main: feat(list-value): make list menu resemble a dropdrown (#1256) fix(type errors): fix type errors (#1255) # Conflicts: # apps/dsp-app/src/app/workspace/results/list-view/list-view.component.html
dasch-swiss · Nov 1, 2023 · c4f8554 · c4f8554
2 parents 8370de6 + f7a7a8c
commit c4f8554
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 34 deletions.
diff --git a/apps/dsp-app/src/app/workspace/resource/representation/av-timeline/av-timeline.component.ts b/apps/dsp-app/src/app/workspace/resource/representation/av-timeline/av-timeline.component.ts
@@ -238,7 +238,7 @@ export class AvTimelineComponent implements OnChanges {
         // recalculate timeline dimension
         const newDimension: DOMRect = this._getTimelineDimensions();
 
-        if (this.timelineDimension.width !== newDimension.width) {
+        if (this.timelineDimension?.width !== newDimension.width) {
             return newDimension;
         } else {
             return;

diff --git a/apps/dsp-app/src/app/workspace/resource/values/list-value/list-value.component.html b/apps/dsp-app/src/app/workspace/resource/values/list-value/list-value.component.html
@@ -1,28 +1,16 @@
 <span *ngIf="mode !== 'read' && listRootNode !== undefined">
-    <!-- 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>
-
+    <div *ngIf="!selectedNode && !listRootNode.children.length">
+        This controlled vocabulary does not have any items.
+    </div>
+    <div *ngIf="selectedNode || listRootNode.children.length" class="dropdown" [matMenuTriggerFor]="mainMenu">
+        <div class="container">
+            <div class="label">{{ selectedNode ? selectedNode.label : listRootNode.label }}</div>
+            <div class="icon">
+                <mat-icon>arrow_drop_down</mat-icon>
+            </div>
+        </div>
+        <div class="line"></div>
+    </div>
     <mat-menu #mainMenu="matMenu" [overlapTrigger]="false">
         <span *ngFor="let child of listRootNode.children">
             <span *ngIf="child.children && child.children.length > 0">

diff --git a/apps/dsp-app/src/app/workspace/resource/values/list-value/list-value.component.scss b/apps/dsp-app/src/app/workspace/resource/values/list-value/list-value.component.scss
@@ -0,0 +1,27 @@
+.dropdown {
+  width: 100%;
+  cursor: pointer;
+  color: #737373;
+
+  .container {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 16px 16px;
+
+    .label {
+      width: 100%;
+      color: rgba(32, 32, 32, 0.87);
+    }
+
+    .icon {
+      display: inline-flex;
+      width: 17px;
+    }
+  }
+
+  .line {
+    border-bottom: 1px solid;
+  }
+}
diff --git a/apps/dsp-app/src/app/workspace/resource/values/list-value/list-value.component.spec.ts b/apps/dsp-app/src/app/workspace/resource/values/list-value/list-value.component.spec.ts
@@ -24,6 +24,7 @@ import { ListValueComponent } from './list-value.component';
 import { SublistValueComponent } from './subList-value/sublist-value.component';
 import { MockProvider } from 'ng-mocks';
 import { AppLoggingService } from '@dasch-swiss/vre/shared/app-logging';
+import { MatIconModule } from '@angular/material/icon';
 
 /**
  * test host component to simulate parent component.
@@ -107,6 +108,7 @@ describe('ListValueComponent', () => {
             imports: [
                 BrowserAnimationsModule,
                 MatDialogModule,
+                MatIconModule,
                 MatInputModule,
                 MatMenuModule,
                 MatSnackBarModule,
@@ -210,22 +212,19 @@ describe('ListValueComponent', () => {
                     .length
             ).toEqual(0);
 
-            const openListButtonDe = valueComponentDe.query(By.css('button'));
+            const dropdownDe = valueComponentDe.query(By.css('.dropdown'));
+            const dropdownLabel = valueComponentDe.query(By.css('.label'));
 
-            expect(openListButtonDe.nativeElement.textContent.trim()).toBe(
+            expect(dropdownDe).toBeTruthy();
+
+            expect(dropdownLabel.nativeElement.textContent.trim()).toBe(
                 'Tree list node 01'
             );
 
             expect(
                 testHostComponent.inputValueComponent.selectedNode.label
             ).toBe('Tree list node 01');
 
-            const openListButtonEle: HTMLElement =
-                openListButtonDe.nativeElement;
-            openListButtonEle.click();
-            testHostFixture.detectChanges();
-
-            testHostComponent.inputValueComponent.menuTrigger.openMenu();
         });
 
         it('should validate an existing value with an added comment', () => {

diff --git a/apps/dsp-app/src/app/workspace/results/list-view/list-view.component.html b/apps/dsp-app/src/app/workspace/results/list-view/list-view.component.html
@@ -1,5 +1,5 @@
 <!-- header / toolbar to select view and pagination -->
-<div *ngIf="!loading && (numberOfAllResults > 0 && resources?.resources.length)" class="list-view-header">
+<div *ngIf="!loading && (numberOfAllResults > 0 && resources?.resources?.length)" class="list-view-header">
     <div *ngIf="search.mode === 'gravsearch' && search.projectUuid && (numberOfAllResults > 0 && resources.resources.length)" class="back">
         <button mat-button class="back-button" (click)="handleBackButtonClicked()">
             <span>Go Back to Search Form</span>