Skip to content

Commit

Permalink
hide mat-card if filter is empty
Browse files Browse the repository at this point in the history
  • Loading branch information
@infacc
infacc committed Jul 4, 2023
1 parent e55a407 commit 8b1fe43
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 58 deletions.
118 changes: 60 additions & 58 deletions src/app/components-small/plugin-filter-node/plugin-filter-node.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,62 @@
<mat-card class="filter-node mat-elevation-z0" [ngClass]="{'filter-leaf' : type === 'name' || type === 'tag' || type === 'version'}">
<mat-card-header>
<div class="config-header-buttons" *ngIf="isFilterEmpty()">
<button mat-raised-button type="button" (click)="setFilter('and')" color="primary">
<mat-icon>add</mat-icon>
Filter Set
</button>
<button mat-raised-button type="button" (click)="setFilter('name')" color="primary">
<mat-icon>add</mat-icon>
Filter
</button>
</div>
<ng-container *ngIf="children != null">
<div class="config-header">
<mat-button-toggle-group [value]="type" (valueChange)="changeType($event)">
<mat-button-toggle value="and">AND</mat-button-toggle>
<mat-button-toggle value="or">OR</mat-button-toggle>
</mat-button-toggle-group>
<div class="config-header-buttons">
<button mat-raised-button *ngIf="depth < 2" type="button" (click)="addFilter('and')" color="primary">
<mat-icon>add</mat-icon>
Filter Set
</button>
<button mat-raised-button type="button" (click)="addFilter('name')" color="primary">
<mat-icon>add</mat-icon>
Filter
</button>
<button mat-raised-button type="button" (click)="deleteFilter()" color="warn">
<mat-icon>delete</mat-icon>
</button>
<div>
<div *ngIf="isFilterEmpty()" class="create-buttons">
<button mat-raised-button type="button" (click)="setFilter('and')" color="primary">
<mat-icon>add</mat-icon>
Filter Set
</button>
<button mat-raised-button type="button" (click)="setFilter('name')" color="primary">
<mat-icon>add</mat-icon>
Filter
</button>
</div>
<mat-card *ngIf="!isFilterEmpty()" class="filter-node mat-elevation-z0" [ngClass]="{'filter-leaf' : type === 'name' || type === 'tag' || type === 'version'}">
<mat-card-header>
<ng-container *ngIf="children != null">
<div class="config-header">
<mat-button-toggle-group [value]="type" (valueChange)="changeType($event)">
<mat-button-toggle value="and">AND</mat-button-toggle>
<mat-button-toggle value="or">OR</mat-button-toggle>
</mat-button-toggle-group>
<div class="config-header-buttons">
<button mat-raised-button *ngIf="depth < 2" type="button" (click)="addFilter('and')" color="primary">
<mat-icon>add</mat-icon>
Filter Set
</button>
<button mat-raised-button type="button" (click)="addFilter('name')" color="primary">
<mat-icon>add</mat-icon>
Filter
</button>
<button mat-raised-button type="button" (click)="deleteFilter()" color="warn">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</ng-container>
</mat-card-header>
<mat-card-content>
<ng-container *ngIf="children != null">
<qhana-plugin-filter-node *ngFor="let child of children; let i = index" [filterObject]="children[i]" [index]="i"
[depth]="depth + 1" (childChange)="updateChild($event)"></qhana-plugin-filter-node>
</ng-container>
<div class="config-filter" *ngIf="value != null">
<mat-form-field class="inner-form-field">
<mat-label>Filter Type:</mat-label>
<mat-select [value]="type" (valueChange)="changeType($event)">
<mat-option value="name">Name</mat-option>
<mat-option value="tag">Tag</mat-option>
<mat-option value="version">Version</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Filter String:</mat-label>
<textarea matInput [value]="value" (input)="updateFilterString($event)" cdkTextareaAutosize #autosize="cdkTextareaAutosize"
cdkAutosizeMinRows="1" cdkAutosizeMaxRows="15"></textarea>
</mat-form-field>
<button mat-raised-button type="button" (click)="deleteFilter()" color="warn">
<mat-icon>delete</mat-icon>
</button>
</div>
</ng-container>
</mat-card-header>
<mat-card-content>
<ng-container *ngIf="children != null">
<qhana-plugin-filter-node *ngFor="let child of children; let i = index" [filterObject]="children[i]" [index]="i"
[depth]="depth + 1" (childChange)="updateChild($event)"></qhana-plugin-filter-node>
</ng-container>
<div class="config-filter" *ngIf="value != null">
<mat-form-field class="inner-form-field">
<mat-label>Filter Type:</mat-label>
<mat-select [value]="type" (valueChange)="changeType($event)">
<mat-option value="name">Name</mat-option>
<mat-option value="tag">Tag</mat-option>
<mat-option value="version">Version</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Filter String:</mat-label>
<textarea matInput [value]="value" (input)="updateFilterString($event)" cdkTextareaAutosize #autosize="cdkTextareaAutosize"
cdkAutosizeMinRows="1" cdkAutosizeMaxRows="15"></textarea>
</mat-form-field>
<button mat-raised-button type="button" (click)="deleteFilter()" color="warn">
<mat-icon>delete</mat-icon>
</button>
</div>
<mat-checkbox *ngIf="!isFilterEmpty()" [checked]="inverted" (change)="invertFilter()">Invert</mat-checkbox>
</mat-card-content>
</mat-card>
<mat-checkbox [checked]="inverted" (change)="invertFilter()">Invert</mat-checkbox>
</mat-card-content>
</mat-card>
</div>
6 changes: 6 additions & 0 deletions src/app/components-small/plugin-filter-node/plugin-filter-node.component.sass
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
.create-buttons
display: flex
flex-direction: row
justify-content: flex-start
gap: 10px

.form-field
width: 100%

Expand Down

0 comments on commit 8b1fe43

Please sign in to comment.