Skip to content

Commit 8ef3b9c

Browse files
karinakharchenkokarinakharchenko
committed
//
1 parent 5b6f9a1 commit 8ef3b9c

5 files changed

Lines changed: 163 additions & 57 deletions

File tree

‎frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css‎

Lines changed: 73 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@
77
padding-top: 4px !important;
88
}
99

10+
::ng-deep mat-dialog-content.filters-content {
11+
padding-left: 24px !important;
12+
padding-right: 24px !important;
13+
}
14+
1015
.filters-select {
1116
grid-column: 2 / span 5;
1217
margin-bottom: 16px;
@@ -25,6 +30,15 @@
2530
margin-bottom: 16px;
2631
}
2732

33+
.add-condition-container {
34+
grid-column: 1 / span 6;
35+
display: flex;
36+
align-items: center;
37+
gap: 12px;
38+
margin-top: 8px;
39+
margin-bottom: 16px;
40+
}
41+
2842
.where-label {
2943
font-weight: 500;
3044
color: rgba(0, 0, 0, 0.87);
@@ -37,7 +51,7 @@
3751
}
3852
}
3953

40-
.empty-conditions-container .add-condition-button {
54+
.add-condition-button {
4155
width: auto;
4256
min-width: auto;
4357
min-height: 36px;
@@ -51,15 +65,15 @@
5165
gap: 4px;
5266
}
5367

54-
.empty-conditions-container .add-condition-button.accent-button {
68+
.add-condition-button.accent-button {
5569
color: #C177FC;
5670
}
5771

58-
.empty-conditions-container .add-condition-button.accent-button:hover {
72+
.add-condition-button.accent-button:hover {
5973
background-color: rgba(193, 119, 252, 0.04);
6074
}
6175

62-
.empty-conditions-container .add-condition-button.accent-button .add-icon {
76+
.add-condition-button.accent-button .add-icon {
6377
font-size: 20px;
6478
width: 20px;
6579
height: 20px;
@@ -247,6 +261,24 @@
247261
flex-direction: column;
248262
}
249263

264+
.filters-header-description {
265+
margin: 0 24px 16px 24px;
266+
font-size: 14px;
267+
line-height: 1.5;
268+
}
269+
270+
@media (prefers-color-scheme: light) {
271+
.filters-header-description {
272+
color: rgba(0, 0, 0, 0.6);
273+
}
274+
}
275+
276+
@media (prefers-color-scheme: dark) {
277+
.filters-header-description {
278+
color: rgba(255, 255, 255, 0.6);
279+
}
280+
}
281+
250282
::ng-deep .mat-dialog-container {
251283
display: flex;
252284
}
@@ -256,11 +288,44 @@
256288
margin-top: 12px;
257289
}
258290

291+
.conditions-vertical-line {
292+
grid-column: 1;
293+
grid-row: 2 / -1;
294+
width: 1px;
295+
background-color: rgba(0, 0, 0, 0.12);
296+
margin-left: 9px;
297+
margin-top: 0;
298+
margin-bottom: 0;
299+
z-index: 0;
300+
}
301+
302+
@media (prefers-color-scheme: dark) {
303+
.conditions-vertical-line {
304+
background-color: rgba(255, 255, 255, 0.12);
305+
}
306+
}
307+
259308
.filter-delete-button {
260309
grid-column: 1;
261310
margin-top: 4px;
262-
margin-right: 8px;
311+
margin-right: 0;
312+
margin-left: 0;
263313
align-self: flex-start;
314+
justify-self: center;
315+
position: relative;
316+
z-index: 1;
317+
width: 18px;
318+
height: 18px;
319+
display: flex;
320+
align-items: center;
321+
justify-content: center;
322+
}
323+
324+
.filter-delete-button ::ng-deep .mat-icon {
325+
font-size: 18px;
326+
width: 18px;
327+
height: 18px;
328+
line-height: 18px;
264329
}
265330

266331
.settings-form__reset-button {
@@ -307,6 +372,7 @@
307372
display: flex;
308373
justify-content: space-between;
309374
align-items: center;
375+
position: relative;
310376
}
311377

312378
.comparator-select-field ::ng-deep .mat-mdc-select-value-text {
@@ -317,9 +383,10 @@
317383

318384
.comparator-select-field ::ng-deep .mat-mdc-select-arrow-wrapper {
319385
position: absolute;
320-
right: 0;
386+
right: 12px;
321387
top: 50%;
322388
transform: translateY(-50%);
389+
pointer-events: none;
323390
}
324391

325392
.comparator-select-field ::ng-deep .mat-mdc-select-panel {

‎frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.html‎

Lines changed: 42 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
<h1 mat-dialog-title class="filters-header">
33
<span>New fast filter for <strong>{{ data.displayTableName }}</strong></span>
44
</h1>
5+
<p class="filters-header-description mat-body-2">
6+
Use conditions to quickly filter {{ data.displayTableName.toLowerCase() }} and optionally edit one column.
7+
</p>
58
<app-content-loader *ngIf="!fields || !tableTypes; else filterControls"></app-content-loader>
69
<ng-template #filterControls>
710
<mat-dialog-content class="filters-content">
@@ -17,11 +20,6 @@ <h1 mat-dialog-title class="filters-header">
1720
</mat-error>
1821
</mat-form-field>
1922

20-
<h3 class="section-title">Conditions & editable column</h3>
21-
<p class="section-description">
22-
Add conditions and choose one column to use for editing. Only one editable column can be selected.
23-
</p>
24-
2523
<ng-template #conditionInputField>
2624
<mat-form-field class="filters-select" appearance="outline">
2725
<mat-label>Click here to add condition</mat-label>
@@ -50,42 +48,10 @@ <h3 class="section-title">Conditions & editable column</h3>
5048
<div class="empty-conditions-container">
5149
<mat-icon class="column-name-icon">subdirectory_arrow_right</mat-icon>
5250
<span class="where-label">where</span>
53-
<button *ngIf="!showAddConditionField" mat-stroked-button type="button" (click)="handleAddConditionButtonClick()" class="add-condition-button accent-button">
54-
<mat-icon class="add-icon">add</mat-icon>
55-
<span>Add condition</span>
56-
</button>
57-
<mat-form-field *ngIf="showAddConditionField" class="filters-select empty-condition-input" appearance="outline" [class.mat-form-field-invalid]="showConditionsError">
58-
<mat-label>Click here to add condition</mat-label>
59-
<input type="text" matInput name="filter_columns"
60-
[matAutocomplete]="auto"
61-
[formControl]="fieldSearchControl"
62-
(blur)="handleInputBlur()"
63-
(input)="showConditionsError = false">
64-
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="addFilter($event)">
65-
<mat-option *ngFor="let field of foundFields | async"
66-
[ngClass]="{'disabled': field === 'No matches'}"
67-
[value]="field">
68-
{{field}}
69-
</mat-option>
70-
</mat-autocomplete>
71-
<button *ngIf="hasSelectedFilters"
72-
mat-icon-button
73-
matSuffix
74-
type="button"
75-
aria-label="Cancel adding condition"
76-
(click)="cancelAddConditionInput()">
77-
<mat-icon>close</mat-icon>
78-
</button>
79-
<mat-error *ngIf="showConditionsError">
80-
At least one condition is required
81-
</mat-error>
82-
</mat-form-field>
83-
<p *ngIf="showConditionsError && !showAddConditionField" class="conditions-error-message">
84-
At least one condition is required
85-
</p>
8651
</div>
8752

8853
<!-- Added Filters -->
54+
<div class="conditions-vertical-line" *ngIf="hasSelectedFilters"></div>
8955
<ng-container *ngFor="let value of tableRowFieldsShown | keyvalue; trackBy:trackByFn">
9056
<button mat-icon-button type="button" class="filter-delete-button"
9157
matTooltip="Remove"
@@ -208,10 +174,47 @@ <h3 class="section-title">Conditions & editable column</h3>
208174
<mat-checkbox
209175
[checked]="dynamicColumn === value.key"
210176
(change)="toggleDynamicColumn(value.key)">
211-
Use for editing
177+
Editable
212178
</mat-checkbox>
213179
</div>
214180
</ng-container>
181+
182+
<!-- Add Condition Button -->
183+
<div class="add-condition-container">
184+
<button *ngIf="!showAddConditionField" mat-stroked-button type="button" (click)="handleAddConditionButtonClick()" class="add-condition-button accent-button">
185+
<mat-icon class="add-icon">add</mat-icon>
186+
<span>Add condition</span>
187+
</button>
188+
<mat-form-field *ngIf="showAddConditionField" class="filters-select empty-condition-input" appearance="outline" [class.mat-form-field-invalid]="showConditionsError">
189+
<mat-label>Click here to add condition</mat-label>
190+
<input type="text" matInput name="filter_columns"
191+
[matAutocomplete]="auto"
192+
[formControl]="fieldSearchControl"
193+
(blur)="handleInputBlur()"
194+
(input)="showConditionsError = false">
195+
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="addFilter($event)">
196+
<mat-option *ngFor="let field of foundFields | async"
197+
[ngClass]="{'disabled': field === 'No matches'}"
198+
[value]="field">
199+
{{field}}
200+
</mat-option>
201+
</mat-autocomplete>
202+
<button *ngIf="hasSelectedFilters"
203+
mat-icon-button
204+
matSuffix
205+
type="button"
206+
aria-label="Cancel adding condition"
207+
(click)="cancelAddConditionInput()">
208+
<mat-icon>close</mat-icon>
209+
</button>
210+
<mat-error *ngIf="showConditionsError">
211+
At least one condition is required
212+
</mat-error>
213+
</mat-form-field>
214+
<p *ngIf="showConditionsError && !showAddConditionField" class="conditions-error-message">
215+
At least one condition is required
216+
</p>
217+
</div>
215218
</mat-dialog-content>
216219
</ng-template>
217220

‎frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { DynamicModule } from 'ng-dynamic-component';
66
import { MatAutocompleteModule } from '@angular/material/autocomplete';
77
import { MatButtonModule } from '@angular/material/button';
88
import { MatCheckboxModule } from '@angular/material/checkbox';
9+
import { MatRadioModule } from '@angular/material/radio';
910
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
1011
import { MatFormFieldModule } from '@angular/material/form-field';
1112
import { MatIconModule } from '@angular/material/icon';
@@ -37,6 +38,7 @@ import { Angulartics2, Angulartics2OnModule } from 'angulartics2';
3738
MatIconModule,
3839
MatSelectModule,
3940
MatCheckboxModule,
41+
MatRadioModule,
4042
DynamicModule,
4143
RouterModule,
4244
MatDialogModule,

‎frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css‎

Lines changed: 38 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -158,14 +158,45 @@
158158

159159
.filters-container {
160160
display: flex;
161+
align-items: center;
161162
gap: 20px;
162163
transform: translateX(-10%) scale(0.8);
163164
}
164165

166+
.filters-where-label {
167+
display: flex;
168+
align-items: center;
169+
gap: 4px;
170+
font-weight: 500;
171+
white-space: nowrap;
172+
flex-shrink: 0;
173+
}
174+
175+
.filters-where-label .column-name-icon {
176+
font-size: 18px;
177+
width: 18px;
178+
height: 18px;
179+
line-height: 18px;
180+
vertical-align: middle;
181+
}
182+
183+
@media (prefers-color-scheme: light) {
184+
.filters-where-label {
185+
color: rgba(0, 0, 0, 0.87);
186+
}
187+
}
188+
189+
@media (prefers-color-scheme: dark) {
190+
.filters-where-label {
191+
color: rgba(255, 255, 255, 0.87);
192+
}
193+
}
194+
165195
.dynamic-column-editor {
166196
display: flex;
167197
align-items: center;
168198
gap: 16px;
199+
margin-left: 0;
169200
/* transform: translateX(-20%) scale(0.8); */
170201
/* transform-origin: center right; */
171202
}
@@ -175,13 +206,15 @@
175206
display: flex;
176207
align-items: center;
177208
gap: 4px;
209+
font-weight: 500;
178210
}
179211

180212
.column-name-icon {
181-
font-size: 16px;
182-
width: 16px;
183-
height: 16px;
184-
line-height: 16px;
213+
font-size: 18px;
214+
width: 18px;
215+
height: 18px;
216+
line-height: 18px;
217+
vertical-align: middle;
185218
}
186219

187220
.comparator-icon {
@@ -230,6 +263,7 @@
230263
gap: 8px;
231264
transform: translateX(5%) scale(1.1);
232265
padding-bottom: 16px;
266+
margin-left: 0;
233267
}
234268

235269
.static-filter-chip {

‎frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,16 @@
5050
</mat-menu>
5151
</div>
5252

53-
<div class="filters-container">
53+
<div class="filters-container" *ngIf="savedFilterMap[selectedFilterSetId]?.dynamicColumn || savedFilterMap[selectedFilterSetId]?.staticFilters?.length">
54+
<span class="filters-where-label mat-body-1">
55+
<mat-icon class="column-name-icon">subdirectory_arrow_right</mat-icon>
56+
where
57+
</span>
5458
<form *ngIf="savedFilterMap[selectedFilterSetId]?.dynamicColumn"
5559
class="dynamic-column-editor"
5660
(ngSubmit)="applyDynamicColumnChanges()">
57-
<span class="column-name mat-body-1">
58-
<mat-icon class="column-name-icon">subdirectory_arrow_right</mat-icon>
59-
where
60-
<strong *ngIf="getComparatorType(getInputType(savedFilterMap[selectedFilterSetId]?.dynamicColumn.column)) !== 'nonComparable'">
61-
{{ savedFilterMap[selectedFilterSetId]?.dynamicColumn.column }}
62-
</strong>
61+
<span class="column-name mat-body-1" *ngIf="getComparatorType(getInputType(savedFilterMap[selectedFilterSetId]?.dynamicColumn.column)) !== 'nonComparable'">
62+
<strong>{{ savedFilterMap[selectedFilterSetId]?.dynamicColumn.column }}</strong>
6363
</span>
6464
<mat-form-field *ngIf="getComparatorType(getInputType(savedFilterMap[selectedFilterSetId]?.dynamicColumn.column)) === 'text'" appearance="outline">
6565
<mat-select [(ngModel)]="savedFilterMap[selectedFilterSetId].dynamicColumn.operator"
@@ -172,7 +172,7 @@
172172
></ndc-dynamic>
173173
</div>
174174
</form>
175-
<div class="static-filters">
175+
<div class="static-filters" *ngIf="savedFilterMap[selectedFilterSetId]?.staticFilters?.length">
176176
<mat-chip *ngFor="let filter of savedFilterMap[selectedFilterSetId]?.staticFilters" class="static-filter-chip" data-hj-suppress>
177177
{{ getFilter(filter) }}
178178
</mat-chip>

0 commit comments

Comments
 (0)