Skip to content

Commit 399131d

Browse files
karinakharchenkokarinakharchenko
committed
Update saved filters panel styles: reset margin for column names and add comparator text styling
1 parent ee531d4 commit 399131d

3 files changed

Lines changed: 128 additions & 68 deletions

File tree

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,25 @@
5555
}
5656
}
5757

58+
.dashboard-toggle {
59+
display: flex;
60+
align-items: center;
61+
margin-left: 16px;
62+
margin-right: 8px;
63+
}
64+
65+
.dashboard-toggle .toggle-label {
66+
margin-left: 8px;
67+
font-size: 14px;
68+
}
69+
70+
@media (width <= 600px) {
71+
.dashboard-toggle {
72+
margin-left: 0;
73+
margin-top: 8px;
74+
}
75+
}
76+
5877
.table-switcher-option ::ng-deep .mdc-list-item__primary-text {
5978
width: 100%;
6079
}

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

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,15 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
2525
</mat-autocomplete>
2626
</mat-form-field>
2727

28+
<div class="dashboard-toggle">
29+
<mat-slide-toggle
30+
[checked]="showDashboard"
31+
(change)="toggleDashboard()"
32+
matTooltip="Toggle dashboard view">
33+
<span class="toggle-label">Dashboard</span>
34+
</mat-slide-toggle>
35+
</div>
36+
2837
<button mat-icon-button (click)="loadRowsPage()">
2938
<mat-icon>refresh</mat-icon>
3039
</button>
@@ -186,7 +195,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
186195
</mat-chip-row>
187196
</div>
188197

189-
<app-saved-filters-panel *ngIf="tableData && tableData.structure && tableData.widgets"
198+
<app-saved-filters-panel *ngIf="tableData && tableData.structure && tableData.widgets && !showDashboard"
190199
[connectionID]="connectionID"
191200
[selectedTableName]="name"
192201
[selectedTableDisplayName]="displayName"
@@ -198,11 +207,21 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
198207
(filterSelected)="onFilterSelected($event)"
199208
></app-saved-filters-panel>
200209

201-
<div *ngIf="tableData && tableData.loading$ | async" class="skeleton mat-elevation-z4">
210+
<!-- Dashboard View -->
211+
<app-db-table-dashboard
212+
*ngIf="showDashboard && tableData"
213+
[tableData]="tableData"
214+
[connectionID]="connectionID"
215+
[tableName]="name"
216+
[displayName]="displayName">
217+
</app-db-table-dashboard>
218+
219+
<!-- Table View -->
220+
<div *ngIf="!showDashboard && tableData && tableData.loading$ | async" class="skeleton mat-elevation-z4">
202221
<app-placeholder-table-data></app-placeholder-table-data>
203222
</div>
204223

205-
<div [ngClass]="{hidden: !tableData || tableData.loading$ | async}" class="mat-elevation-z4 table-surface">
224+
<div *ngIf="!showDashboard" [ngClass]="{hidden: !tableData || (tableData.loading$ | async)}" class="mat-elevation-z4 table-surface">
206225
<div class="table-box">
207226
<mat-table matSort [dataSource]="tableData" NgMatTableQueryReflector
208227
class="db-table"

‎frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts‎

Lines changed: 87 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -34,54 +34,76 @@ import { MatSort } from '@angular/material/sort';
3434
import { MatSortModule } from '@angular/material/sort';
3535
import { MatTableModule } from '@angular/material/table';
3636
import { MatTooltipModule } from '@angular/material/tooltip';
37+
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
38+
import JsonURL from '@jsonurl/jsonurl';
39+
import { Angulartics2OnModule } from 'angulartics2';
40+
import * as JSON5 from 'json5';
41+
import { DynamicModule } from 'ng-dynamic-component';
42+
import { merge } from 'rxjs';
43+
import { tap } from 'rxjs/operators';
44+
import { formatFieldValue } from 'src/app/lib/format-field-value';
45+
import { getTableTypes } from 'src/app/lib/setup-table-row-structure';
46+
import {
47+
CustomAction,
48+
TableForeignKey,
49+
TablePermissions,
50+
TableProperties,
51+
TableRow,
52+
Widget,
53+
} from 'src/app/models/table';
54+
import { AccessLevel } from 'src/app/models/user';
55+
import { ConnectionsService } from 'src/app/services/connections.service';
3756
import { NotificationsService } from 'src/app/services/notifications.service';
3857
import { PlaceholderTableDataComponent } from '../../skeletons/placeholder-table-data/placeholder-table-data.component';
3958
import { RouterModule } from '@angular/router';
4059
import { SavedFiltersPanelComponent } from './saved-filters-panel/saved-filters-panel.component';
4160
import { SelectionModel } from '@angular/cdk/collections';
4261
import { TableRowService } from 'src/app/services/table-row.service';
4362
import { TableStateService } from 'src/app/services/table-state.service';
44-
import { formatFieldValue } from 'src/app/lib/format-field-value';
45-
import { getTableTypes } from 'src/app/lib/setup-table-row-structure';
46-
import { merge } from 'rxjs';
47-
import { normalizeTableName } from '../../../lib/normalize'
48-
import { tap } from 'rxjs/operators';
63+
import { tableDisplayTypes, UIwidgets } from '../../../consts/table-display-types';
64+
import { normalizeTableName } from '../../../lib/normalize';
65+
import { PlaceholderTableDataComponent } from '../../skeletons/placeholder-table-data/placeholder-table-data.component';
66+
import { ForeignKeyDisplayComponent } from '../../ui-components/table-display-fields/foreign-key/foreign-key.component';
67+
import { DbTableExportDialogComponent } from './db-table-export-dialog/db-table-export-dialog.component';
68+
import { DbTableImportDialogComponent } from './db-table-import-dialog/db-table-import-dialog.component';
69+
import { SavedFiltersPanelComponent } from './saved-filters-panel/saved-filters-panel.component';
4970

5071
interface Column {
5172
title: string,
5273
selected: boolean
5374
}
5475

5576
@Component({
56-
selector: 'app-db-table-view',
57-
templateUrl: './db-table-view.component.html',
58-
styleUrls: ['./db-table-view.component.css'],
59-
imports: [
60-
CommonModule,
61-
FormsModule,
62-
RouterModule,
63-
MatTableModule,
64-
MatPaginatorModule,
65-
MatSortModule,
66-
MatButtonModule,
67-
MatIconModule,
68-
MatCheckboxModule,
69-
MatChipsModule,
70-
MatDialogModule,
71-
MatFormFieldModule,
72-
ReactiveFormsModule,
73-
MatInputModule,
74-
MatAutocompleteModule,
75-
MatMenuModule,
76-
MatTooltipModule,
77-
ClipboardModule,
78-
DragDropModule,
79-
Angulartics2OnModule,
80-
PlaceholderTableDataComponent,
81-
DynamicModule,
82-
ForeignKeyDisplayComponent,
83-
SavedFiltersPanelComponent
84-
]
77+
selector: 'app-db-table-view',
78+
templateUrl: './db-table-view.component.html',
79+
styleUrls: ['./db-table-view.component.css'],
80+
imports: [
81+
CommonModule,
82+
FormsModule,
83+
RouterModule,
84+
MatTableModule,
85+
MatPaginatorModule,
86+
MatSortModule,
87+
MatButtonModule,
88+
MatIconModule,
89+
MatCheckboxModule,
90+
MatChipsModule,
91+
MatDialogModule,
92+
MatFormFieldModule,
93+
ReactiveFormsModule,
94+
MatInputModule,
95+
MatAutocompleteModule,
96+
MatSelectModule,
97+
MatMenuModule,
98+
MatTooltipModule,
99+
ClipboardModule,
100+
DragDropModule,
101+
Angulartics2OnModule,
102+
PlaceholderTableDataComponent,
103+
DynamicModule,
104+
ForeignKeyDisplayComponent,
105+
SavedFiltersPanelComponent,
106+
],
85107
})
86108

87109
export class DbTableViewComponent implements OnInit {
@@ -110,31 +132,31 @@ export class DbTableViewComponent implements OnInit {
110132

111133
@Output() applyFilter = new EventEmitter();
112134

113-
// public tablesSwitchControl = new FormControl('');
114-
public tableData: any;
115-
public filteredTables: TableProperties[];
116-
// public selection: any;
117-
public columns: Column[];
118-
public displayedColumns: string[] = [];
119-
public columnsToDisplay: string[] = [];
120-
public searchString: string;
121-
public staticSearchString: string;
122-
public actionsColumnWidth: string;
123-
public bulkActions: CustomAction[];
124-
public bulkRows: string[];
125-
public displayedComparators = {
126-
eq: "=",
127-
gt: ">",
128-
lt: "<",
129-
gte: ">=",
130-
lte: "<="
131-
}
132-
public selectedRow: TableRow = null;
133-
public selectedRowType: 'record' | 'foreignKey' = 'record';
134-
public tableRelatedRecords: any = null;
135-
public displayCellComponents;
136-
public UIwidgets = UIwidgets;
137-
// public tableTypes: object;
135+
// public tablesSwitchControl = new FormControl('');
136+
public tableData: any;
137+
public filteredTables: TableProperties[];
138+
// public selection: any;
139+
public columns: Column[];
140+
public displayedColumns: string[] = [];
141+
public columnsToDisplay: string[] = [];
142+
public searchString: string;
143+
public staticSearchString: string;
144+
public actionsColumnWidth: string;
145+
public bulkActions: CustomAction[];
146+
public bulkRows: string[];
147+
public displayedComparators = {
148+
eq: '=',
149+
gt: '>',
150+
lt: '<',
151+
gte: '>=',
152+
lte: '<=',
153+
};
154+
public selectedRow: TableRow = null;
155+
public selectedRowType: 'record' | 'foreignKey' = 'record';
156+
public tableRelatedRecords: any = null;
157+
public displayCellComponents;
158+
public UIwidgets = UIwidgets;
159+
// public tableTypes: object;
138160

139161
@Input() set table(value){
140162
if (value) this.tableData = value;
@@ -628,10 +650,10 @@ export class DbTableViewComponent implements OnInit {
628650
const blob = new Blob([csvArray], { type: 'text/csv' });
629651
const url = window.URL.createObjectURL(blob);
630652

631-
a.href = url;
632-
a.download = 'myFile.csv';
633-
a.click();
634-
window.URL.revokeObjectURL(url);
635-
a.remove();
636-
}
653+
a.href = url;
654+
a.download = 'myFile.csv';
655+
a.click();
656+
window.URL.revokeObjectURL(url);
657+
a.remove();
658+
}
637659
}

0 commit comments

Comments
 (0)