Merge pull request #431 from medizininformatik-initiative/413-display-tree-icon-next-to-each-search-result

413 display tree icon next to each search result

Author: Shayan1375

src/app/layout/font-awesome-icons.ts

@@ -1,4 +1,4 @@
-import { faAngleDoubleRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
+import { faAngleDoubleRight, faExternalLinkAlt, faSitemap } from '@fortawesome/free-solid-svg-icons';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { faArrowDown } from '@fortawesome/free-solid-svg-icons';
 import { faArrowUp } from '@fortawesome/free-solid-svg-icons';
@@ -135,4 +135,5 @@ export const FONT_AWESOME_ICONS = [
   faInfo,
   faLink,
   faExternalLinkAlt,
+  faSitemap,
 ];

src/app/modules/feasibility-query/components/search/search.component.ts

@@ -44,6 +44,8 @@ export class FeasibilityQuerySearchComponent implements OnInit, OnDestroy, After
 
   elasticSearchEnabled = false;
 
+  listIetmDetailsSubscription: Subscription;
+
   selectedDetails$: Observable<SearchTermDetails>;
 
   searchFilters$: Observable<SearchFilter[]> = of([]);
@@ -93,6 +95,7 @@ export class FeasibilityQuerySearchComponent implements OnInit, OnDestroy, After
     this.subscription?.unsubscribe();
     this.searchSubscription?.unsubscribe();
     this.searchWithFilterSubscription?.unsubscribe();
+    this.listIetmDetailsSubscription?.unsubscribe();
   }
 
   /** Search Result Handling */
@@ -154,9 +157,14 @@ export class FeasibilityQuerySearchComponent implements OnInit, OnDestroy, After
 
   public setClickedRow(row: InterfaceTableDataRow) {
     const originalEntry = row.originalEntry as CriteriaListEntry;
-    this.searchTermDetailsService
-      .getDetailsForListItem(originalEntry.getId())
-      .subscribe(() => this.openSidenav());
+    this.listIetmDetailsSubscription?.unsubscribe();
+    if (this.isOpen) {
+      this.closeSidenav();
+    } else {
+      this.listIetmDetailsSubscription = this.searchTermDetailsService
+        .getDetailsForListItem(originalEntry.getId())
+        .subscribe(() => this.openSidenav());
+    }
   }
 
   public getElasticSearchFilter(): void {

src/app/shared/components/table/table.component.html

@@ -23,13 +23,21 @@
           <mat-checkbox
             *ngIf="row.hasCheckbox && row.checkboxColumnIndex === j"
             color="primary"
+            matTooltip="{{ 'SHARED_COMPONENTS.TABLE.SELECT_CHECKBOX' | translate }}"
             disableRipple="true"
             [disabled]="!row.isDisabled"
             [checked]="row.isCheckboxSelected"
             (change)="onCheckboxSelect(row)"
             (click)="$event.stopPropagation()"
           ></mat-checkbox>
+          <fa-icon
+            matTooltip="{{ 'SHARED_COMPONENTS.TABLE.ICON' | translate }}"
+            *ngIf="row.treeIcon !== '' && row.treeIconColumnIndex === j"
+            size="1x"
+            icon="{{ row.treeIcon }}"
+          ></fa-icon>
           <div
+            matTooltip="{{ cell | displayTranslation }}"
             [ngClass]="{
               'name-column': j === 0,
               'info-column': j > 0,

src/app/shared/components/table/table.component.scss

@@ -30,7 +30,7 @@ table {
 }
 
 .name-column {
-  padding-left: 20px;
+  padding-left: 10px;
   font-size: medium;
 }
 
@@ -61,3 +61,7 @@ table {
   font-size: smaller;
   color: #6a7483;
 }
+.cursor-click {
+  cursor: pointer;
+  padding-left: 10px;
+}

src/app/shared/models/TableData/Adapter/CriteriaListEntryAdapter.ts

@@ -21,6 +21,8 @@ export class CriteriaListEntryAdapter {
         listEntry.getContext(),
       ],
       hasCheckbox: true,
+      treeIcon: 'sitemap',
+      treeIconColumnIndex: 0,
       isCheckboxSelected: false,
       isClickable: true,
       isDisabled: listEntry.getSelectable(),

src/assets/i18n/de.json

@@ -353,13 +353,15 @@
     },
     "TABLE": {
       "AVAILABILITY": "Verfügbarkeit",
+      "SELECT_CHECKBOX": "Kriterium auswählen",
       "CONTEXT": "Kontext",
       "DISPLAY": "Anzeige",
       "NAME": "Name",
       "PATIENT_COUNT": "Anzahl der Patienten",
       "SITE": "Standort",
       "TERMCODE": "Termcode",
-      "TERMINOLOGY_CODE": "Terminologie"
+      "TERMINOLOGY_CODE": "Terminologie",
+      "ICON": "Verwandte Kriterien anzeigen"
     }
   },
   "SHARED_FILTER": {
@@ -391,4 +393,4 @@
       "SEARCH": "Machbarkeitsabfrage - Suche"
     }
   }
-}
+}

src/assets/i18n/en.json

@@ -352,13 +352,15 @@
     },
     "TABLE": {
       "AVAILABILITY": "Availability",
+      "SELECT_CHECKBOX": "Select Criteria",
       "CONTEXT": "Context",
       "DISPLAY": "Display",
       "NAME": "Name",
       "PATIENT_COUNT": "Number of patients",
       "SITE": "Location",
       "TERMCODE": "Term code",
-      "TERMINOLOGY_CODE": "Terminology"
+      "TERMINOLOGY_CODE": "Terminology",
+      "ICON": "Show related criteria"
     }
   },
   "SHARED_FILTER": {