From 29a6db916cbb619735522e3b0d0e7b411a286d0b Mon Sep 17 00:00:00 2001
From: infacc <st154936@stud.uni-stuttgart.de>
Date: Thu, 3 Aug 2023 15:30:36 +0200
Subject: [PATCH] add search field to choose template dialog

---
 .../experiment/experiment.component.ts          |  2 +-
 .../choose-template.component.html              | 17 ++++++++++++-----
 .../choose-template.component.sass              | 11 +++++++++--
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/app/components/experiment/experiment.component.ts b/src/app/components/experiment/experiment.component.ts
index 8d1249c..f5d95d8 100644
--- a/src/app/components/experiment/experiment.component.ts
+++ b/src/app/components/experiment/experiment.component.ts
@@ -172,7 +172,7 @@ export class ExperimentComponent implements OnInit, OnDestroy {
 
     showSelectDefaultTemplateDialog() {
         const dialogRef = this.dialog.open(ChooseTemplateDialog, {
-            minWidth: "20rem", maxWidth: "40rem", width: "60%", maxHeight: "95%",
+            minWidth: "20rem", maxWidth: "40rem", width: "20%", maxHeight: "95%",
             data: this.uiTemplate
         });
         dialogRef.afterClosed().subscribe(templateId => {
diff --git a/src/app/dialogs/choose-template/choose-template.component.html b/src/app/dialogs/choose-template/choose-template.component.html
index 28b1ee4..51ac5cb 100644
--- a/src/app/dialogs/choose-template/choose-template.component.html
+++ b/src/app/dialogs/choose-template/choose-template.component.html
@@ -1,12 +1,19 @@
-<h1 mat-dialog-title>Select a default template:</h1>
+<h1 mat-dialog-title>Select Default Template</h1>
 <div mat-dialog-content>
-    <div class="template-list">
-        <qhana-growing-list [rels]="['ui-template', 'collection']" [newItemRels]="['ui-template']" 
+    <mat-form-field class="full-width" color="primary">
+        <mat-label>Search templates</mat-label>
+        <input matInput placeholder="search" autocomplete="off" #searchInput>
+        <mat-icon matSuffix>search</mat-icon>
+    </mat-form-field>
+    <div class="template-list mat-elevation-z2">
+        <qhana-growing-list [rels]="['ui-template', 'collection']" [newItemRels]="['ui-template']" [search]="searchInput.value"
             [highlighted]="highlightedTemplateSet" [highlightByKey]="'uiTemplateId'" (clickItem)="selectTemplate($event)">
         </qhana-growing-list>
     </div>
-    <span class="t-title">Selected Template: {{template?.name ?? 'All Plugins'}}</span><br>
-    <span><i>{{template?.description ?? 'This template contains all plugins that are available in Qhana.'}}</i></span>
+    <div class="selected-template">
+        <span class="t-title">Selected Template: {{template?.name ?? 'All Plugins'}}</span><br>
+        <span><i>{{template?.description ?? 'This template contains all plugins that are available in Qhana.'}}</i></span>
+    </div>
 </div>
 <div class="dialog-actions" mat-dialog-actions>
     <button mat-button [mat-dialog-close]="'all-plugins'">Unset</button>
diff --git a/src/app/dialogs/choose-template/choose-template.component.sass b/src/app/dialogs/choose-template/choose-template.component.sass
index 4b2f9d1..806af0a 100644
--- a/src/app/dialogs/choose-template/choose-template.component.sass
+++ b/src/app/dialogs/choose-template/choose-template.component.sass
@@ -1,6 +1,13 @@
 .template-list
-    max-height: 33rem
+    max-height: 14rem
     overflow-y: auto
+    border-radius: 0.25rem
 
 .dialog-actions
-    justify-content: flex-end
\ No newline at end of file
+    justify-content: flex-end
+
+.selected-template
+    padding-top: 1rem
+
+.full-width
+    width: 100%
\ No newline at end of file