Add template tab form and use it to create/update tabs

UST-QuAntiL · Aug 15, 2024 · a51faf7 · a51faf7
1 parent a417023
commit a51faf7
Show file tree

Hide file tree

Showing 13 changed files with 781 additions and 33 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -91,6 +91,8 @@ import { UiTemplateComponent } from "./components-small/ui-template/ui-template.
 import { UiTemplateTabListComponent } from './components-small/ui-template-tab-list/ui-template-tab-list.component';
 import { UiTemplateTabComponent } from './components-small/ui-template-tab/ui-template-tab.component';
 import { PluginFilterViewComponent } from './components-small/plugin-filter-view/plugin-filter-view.component';
+import { UiTemplateTabFormComponent } from './components-small/ui-template-tab-form/ui-template-tab-form.component';
+import { PluginFilterFormComponent } from './components-small/plugin-filter-form/plugin-filter-form.component';
 
 @NgModule({
     declarations: [
@@ -141,7 +143,9 @@ import { PluginFilterViewComponent } from './components-small/plugin-filter-view
         UiTemplateComponent,
         UiTemplateTabListComponent,
         UiTemplateTabComponent,
+        UiTemplateTabFormComponent,
         PluginFilterViewComponent,
+        PluginFilterFormComponent,
     ],
     imports: [
         BrowserModule,

diff --git a/src/app/components-small/plugin-filter-form/plugin-filter-form.component.html b/src/app/components-small/plugin-filter-form/plugin-filter-form.component.html
@@ -0,0 +1,90 @@
+@if (filterValue == null) {
+    <p>Flter Plugins by:</p>
+    <mat-button-toggle-group class="toggle-group" aria-label="Filter Type">
+        <mat-button-toggle (click)="setType('id')">Identifier</mat-button-toggle>
+        <mat-button-toggle (click)="setType('name')">Name</mat-button-toggle>
+        <mat-button-toggle (click)="setType('version')">Version</mat-button-toggle>
+        <mat-button-toggle (click)="setType('type')">Type</mat-button-toggle>
+        <mat-button-toggle (click)="setType('tag')">Tag</mat-button-toggle>
+    </mat-button-toggle-group>
+    @if(depth < 4) {
+        <p>Or combine multiple filters with:</p>
+        <mat-button-toggle-group class="toggle-group" aria-label="Filter combinator">
+            <mat-button-toggle (click)="setType('and')">AND (match all filters)</mat-button-toggle>
+            <mat-button-toggle (click)="setType('or')">OR (match any filter)</mat-button-toggle>
+        </mat-button-toggle-group>
+    }
+} @else {
+    <div class="filter-head">
+        <mat-slide-toggle [checked]="isNegated" (toggleChange)="isNegated = !isNegated; updateFilterObject()">Exclude plugins matching this filter</mat-slide-toggle>
+        <button mat-icon-button (click)="resetCurrentFilter(); updateFilterObject()"><mat-icon>clear</mat-icon></button>
+    </div>
+}
+@if (isNestedFilter) {
+    <mat-button-toggle-group class="toggle-group" [value]="nestedFilterCombinator" (valueChange)="changeFilterCombinator($event)" aria-label="Filter combinator" >
+        <mat-button-toggle [value]="'and'">AND (match all filters)</mat-button-toggle>
+        <mat-button-toggle [value]="'or'">OR (match any filter)</mat-button-toggle>
+    </mat-button-toggle-group>
+
+    <div class="nested-filter-container">
+        <div class="filter-combinator">
+            <div class="line"></div>
+            <div>{{nestedFilterCombinator.toUpperCase()}}</div>
+            <div class="line"></div>
+        </div>
+        <div class="child-filter-list">
+            @if (filterValue?.length === 0) {
+                <p class="warning">Must have at least one plugin filter!</p>
+            }
+            @for (f of filterValue; track $index) {
+                <div class="child-filter-container">
+                    <mat-card class="child-filter">
+                        <mat-card-content>
+                            <qhana-plugin-filter-form [depth]="depth + 1" [filterIn]="f" (filterOut)="childFiltersOutput[$index] = $event; updateFilterObject()" (valid)="childFiltersValid[$index] = $event"></qhana-plugin-filter-form>
+                        </mat-card-content>
+                    </mat-card>
+                    <button mat-flat-button class="child-filter-remove-button" (click)="deleteChild($index)"><div><mat-icon>delete</mat-icon></div></button>
+                </div>
+            }
+            <button mat-raised-button class="add-child-filter-button" (click)="addChildFilter()"><mat-icon>plus</mat-icon>Add new filter</button>
+        </div>
+    </div>
+}
+@if (!isNestedFilter && filterType != null) {
+    <div class="simple-filter">
+        <mat-form-field class="filter-type-select">
+            <mat-label>Filter By:</mat-label>
+            <mat-select [value]="filterType" (valueChange)="changeSimpleFilterType($event)">
+                <mat-option value="id">Identifier</mat-option>
+                <mat-option value="name">Name</mat-option>
+                <mat-option value="tag">Tag</mat-option>
+                <mat-option value="version">Version</mat-option>
+                <mat-option value="type">Type</mat-option>
+            </mat-select>
+        </mat-form-field>
+        <mat-form-field class="filter-value">
+            <mat-label>Match against:</mat-label>
+            <input matInput [ngModel]="filterValue" (ngModelChange)="filterValue = $event; updateFilterObject()" [attr.list]="filterType === 'type' ? 'plugin-types' : null">
+            <datalist *ngIf="filterType === 'type'" id="plugin-types">
+                <option value="processing"></option>
+                <option value="visualization"></option>
+                <option value="conversion"></option>
+                <option value="dataloader"></option>
+                <option value="interaction"></option>
+            </datalist>
+            <mat-hint *ngIf="filterType === 'version'">
+                Examples: ">= 0.1.0", "== 1.0.2", "< 2.0.0", ">= 1.0.0, < 2.0.0" , "!= 1.0.14"
+            </mat-hint>
+            <mat-hint *ngIf="filterType === 'type'">
+                Examples: "processing", "conversion", "dataloader", "visualization", "interaction"
+            </mat-hint>
+        </mat-form-field>
+        <button mat-raised-button class="filter-button" (click)="openPluginChooser()" *ngIf="filterType === 'name' || filterType === 'id'">
+            choose
+        </button>
+    </div>
+}
+@if (depth > 0 && (filterValue == null || filterValue === "")) {
+    <p class="warning">Filter may not be empty!</p>
+}
+
diff --git a/src/app/components-small/plugin-filter-form/plugin-filter-form.component.sass b/src/app/components-small/plugin-filter-form/plugin-filter-form.component.sass
@@ -0,0 +1,67 @@
+.toggle-group
+    height: 3em
+
+.filter-head
+    display: flex
+    align-items: center
+    justify-content: space-between
+    width: 100%
+    margin-block-end: 0.5rem
+
+.simple-filter
+    display: flex
+    align-items: start
+    gap: 0.5rem
+    width: 100%
+
+.filter-type-selec
+    width: 8rem
+
+.filter-value
+    width: unset
+    flex-grow: 1
+
+.filter-button
+    height: 3.5rem
+
+.nested-filter-container
+    display: flex
+    gap: 1rem
+    align-items: stretch
+    margin-block: 1rem
+
+.filter-combinator
+    display: flex
+    flex-direction: column
+    align-items: center
+    min-width: 2.1rem
+
+    .line
+        flex-grow: 1
+        width: 0px
+        border-inline-start: 1px solid var(--text-washed)
+
+.child-filter-list
+    display: flex
+    flex-direction: column
+    gap: 0.8rem
+    flex-grow: 1
+
+.child-filter-container
+    display: flex
+    align-items: stretch
+    gap: 0.5rem
+
+.child-filter
+    flex-grow: 1
+
+.child-filter-remove-button
+    height: unset
+    min-width: 2rem
+    padding: 0px
+    display: flex
+    flex-direction: column
+    align-items: center
+
+.warning
+    color: var(--accent-text)