Questionnaires list moved to table

IHTSDO · Jan 17, 2024 · 264ef5b · 264ef5b
1 parent 8c6fe5a
commit 264ef5b
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 27 deletions.
diff --git a/src/app/questionnaires/list-questionnaires/list-questionnaires.component.css b/src/app/questionnaires/list-questionnaires/list-questionnaires.component.css
@@ -52,3 +52,7 @@
 .status-pill.retired {
     background-color: #dc3545; /* Red for retired status */
 }
+
+#table-container {
+    padding-bottom: 2rem;
+}
diff --git a/src/app/questionnaires/list-questionnaires/list-questionnaires.component.html b/src/app/questionnaires/list-questionnaires/list-questionnaires.component.html
@@ -1,41 +1,50 @@
-<div>
-    <mat-list>
-        <mat-list-item *ngFor="let questionnaire of questionnaires" class="list-item">
-            <span matLine class="list-text">
-                {{ questionnaire.title || 'No Title' }}
-                <span class="list-subtext">Version: {{ questionnaire.meta.versionId }}</span>
-                <span [ngClass]="['status-pill', questionnaire.status]">{{ questionnaire.status | uppercase }}</span>
-            </span>
-            <button mat-icon-button color="accent" (click)="selectQuestionnaire(questionnaire)" class="action-button"
-            *ngIf="config.select" matTooltip="Load Questionnaire">
-                <mat-icon>cloud_download</mat-icon>
-            </button>
-            <button mat-icon-button color="accent" (click)="selectQuestionnaire(questionnaire)" class="action-button"
-            *ngIf="config.select" matTooltip="Load Questionnaire">
-                <mat-icon>cloud_download</mat-icon>
-            </button>
-            <button mat-icon-button color="accent" (click)="validate(questionnaire)" class="action-button"
+<div id="table-container">
+    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
+
+        <ng-container matColumnDef="title">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th>
+            <td mat-cell *matCellDef="let element"> {{element.title}} </td>
+          </ng-container>
+
+        <ng-container matColumnDef="status">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+          <td mat-cell *matCellDef="let element"> <span [ngClass]="['status-pill', element.status]">{{ element.status | uppercase }}</span> </td>
+        </ng-container>
+
+        <ng-container matColumnDef="version">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Version </th>
+            <td mat-cell *matCellDef="let element"> {{element.meta.versionId}} </td>
+          </ng-container>
+
+        <ng-container matColumnDef="actions">
+          <th mat-header-cell *matHeaderCellDef> Actions </th>
+          <td mat-cell *matCellDef="let element">
+            <button mat-icon-button color="accent" (click)="validate(element)" class="action-button"
             *ngIf="config.validate" matTooltip="Validate Questionnaire">
                 <mat-icon>done</mat-icon>
             </button>
-            <button mat-icon-button color="accent" (click)="preview(questionnaire)" class="action-button"
+            <button mat-icon-button color="accent" (click)="preview(element)" class="action-button"
             *ngIf="config.preview" matTooltip="Preview Questionnaire">
                 <mat-icon>visibility</mat-icon>
             </button>
-            <button mat-icon-button color="accent" (click)="openInNewTab(questionnaire)" class="action-button"
+            <button mat-icon-button color="accent" (click)="openInNewTab(element)" class="action-button"
             *ngIf="config.preview" matTooltip="Open resource in new tab">
                 <mat-icon>open_in_new</mat-icon>
             </button>
-            <button mat-icon-button color="accent" (click)="saveQuestionnaire(questionnaire)" class="action-button"
+            <button mat-icon-button color="accent" (click)="saveQuestionnaire(element)" class="action-button"
             matTooltip="Download Questionnaire">
                 <mat-icon>cloud_download</mat-icon>
             </button>
-            <button mat-icon-button color="accent" (click)="deleteQuestionnaire(questionnaire)" class="action-button"
+            <button mat-icon-button color="accent" (click)="deleteQuestionnaire(element)" class="action-button"
             matTooltip="Delete Questionnaire">
                 <mat-icon>delete</mat-icon>
             </button>
-        </mat-list-item>
-    </mat-list>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
     <p *ngIf="notFound && !questionnaires.length"><i>No questionnaires found</i></p>
     <mat-spinner diameter="35" *ngIf="loading" class="loading-spinner"></mat-spinner>
 </div>
diff --git a/src/app/questionnaires/list-questionnaires/list-questionnaires.component.ts b/src/app/questionnaires/list-questionnaires/list-questionnaires.component.ts
@@ -1,9 +1,11 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Subject, combineLatest, debounceTime, distinctUntilChanged } from 'rxjs';
 import { SnackAlertComponent } from 'src/app/alerts/snack-alert';
 import { FhirService } from 'src/app/services/fhir.service';
 import * as saveAs from 'file-saver';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 
 @Component({
   selector: 'app-list-questionnaires',
@@ -12,12 +14,17 @@ import * as saveAs from 'file-saver';
 })
 export class ListQuestionnairesComponent implements OnInit, OnChanges {
 
+  @ViewChild(MatSort) sort!: MatSort;
+
   @Output() questionnaireSelected = new EventEmitter<any>();
   @Output() validateQuestionnaire = new EventEmitter<any>();
   @Output() previewQuestionnaire = new EventEmitter<any>();
 
   @Input() config: any = {};
 
+  displayedColumns: string[] = ['title','status', 'version', 'actions'];
+  dataSource = new MatTableDataSource<any>();
+
   questionnaires: any[] = [];
   loading = false;
   selectedFhirServer: string = "";
@@ -60,9 +67,12 @@ export class ListQuestionnairesComponent implements OnInit, OnChanges {
     this.fhirService.getQuestionnairesByTag(this.selectedUserTag).subscribe((data: any) => {
       if (data['entry']) {
         this.questionnaires = data['entry'].map((entry: any) => entry.resource);
+        this.dataSource.data = this.questionnaires; //.slice(0, 11);
+        this.dataSource.sort = this.sort;
         this.loading = false;
       } else {
         this.questionnaires = [];
+        this.dataSource.data = this.questionnaires;
         this.loading = false;
         this.notFound = true;
       }
@@ -76,9 +86,11 @@ export class ListQuestionnairesComponent implements OnInit, OnChanges {
     if (index !== -1) {
       // Questionnaire exists, replace it
       this.questionnaires[index] = newQuestionnaire;
+      this.dataSource.data = this.questionnaires;
     } else {
       // Questionnaire does not exist, add it to the array
       this.questionnaires.push(newQuestionnaire);
+      this.dataSource.data = this.questionnaires;
     }
   }
 
@@ -95,6 +107,7 @@ export class ListQuestionnairesComponent implements OnInit, OnChanges {
     this.fhirService.deleteQuestionnaire(questionnaire.id).subscribe(() => {
       // remove from the list by id
       this.questionnaires = this.questionnaires.filter((q) => q.id !== questionnaire.id);
+      this.dataSource.data = this.questionnaires;
       this._snackBar.openFromComponent(SnackAlertComponent, {
         duration: 5 * 1000,
         data: "Questionnaire deleted successfully",

diff --git a/src/app/questionnaires/questionnaires-main/questionnaires-main.component.html b/src/app/questionnaires/questionnaires-main/questionnaires-main.component.html
@@ -1,7 +1,7 @@
 <div class="header-container">
-  <h3 class="header">
-    FHIR Questionnaire Manager
-  </h3>
+  <h2 class="header">
+    SNOMED CT Terminology Bindings Validator - FHIR Questionnaire Manager
+  </h2>
 
   <div class="breadcrumb">
     <span>

diff --git a/src/app/questionnaires/validate-questionnaire/validate-questionnaire.component.css b/src/app/questionnaires/validate-questionnaire/validate-questionnaire.component.css
@@ -6,6 +6,7 @@
 .table-container {
   margin-left: 2rem;
   margin-right: 2rem;
+  padding-bottom: 2rem;
 }
 
 .button-container {