Skip to content

Commit f6f553c

Browse files
lyubov-voloshkolyubov-voloshko
authored
Merge pull request #1499 from karinakharchenko/frontend_column_sorting
Frontend column sorting
2 parents 25759cb + deb2368 commit f6f553c

14 files changed

+948
-578
lines changed

‎frontend/src/app/components/dashboard/dashboard.component.ts‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1+
import { Component, OnDestroy, OnInit } from '@angular/core';
2+
import { ConnectionSettingsUI, UiSettings } from 'src/app/models/ui-settings';
3+
import { CustomEvent, TableProperties } from 'src/app/models/table';
4+
5+
import { AlertComponent } from '../ui-components/alert/alert.component';
16
import { SelectionModel } from '@angular/cdk/collections';
27
import { CommonModule } from '@angular/common';
38
import { HttpErrorResponse } from '@angular/common/http';
4-
import { Component, OnDestroy, OnInit } from '@angular/core';
59
import { MatButtonModule } from '@angular/material/button';
610
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
711
import { MatIconModule } from '@angular/material/icon';
@@ -15,8 +19,6 @@ import { first, map } from 'rxjs/operators';
1519
import { getComparatorsFromUrl } from 'src/app/lib/parse-filter-params';
1620
import { ServerError } from 'src/app/models/alert';
1721
import { TableCategory } from 'src/app/models/connection';
18-
import { CustomEvent, TableProperties } from 'src/app/models/table';
19-
import { ConnectionSettingsUI, UiSettings } from 'src/app/models/ui-settings';
2022
import { User } from 'src/app/models/user';
2123
import { CompanyService } from 'src/app/services/company.service';
2224
import { ConnectionsService } from 'src/app/services/connections.service';
@@ -27,7 +29,6 @@ import { UiSettingsService } from 'src/app/services/ui-settings.service';
2729
import { environment } from 'src/environments/environment';
2830
import { normalizeTableName } from '../../lib/normalize';
2931
import { PlaceholderTableViewComponent } from '../skeletons/placeholder-table-view/placeholder-table-view.component';
30-
import { AlertComponent } from '../ui-components/alert/alert.component';
3132
import { BannerComponent } from '../ui-components/banner/banner.component';
3233
import { ContentLoaderComponent } from '../ui-components/content-loader/content-loader.component';
3334
import { DbActionLinkDialogComponent } from './db-table-view/db-action-link-dialog/db-action-link-dialog.component';
@@ -76,14 +77,12 @@ export class DashboardComponent implements OnInit, OnDestroy {
7677
public currentPage: number = 1;
7778
public shownTableTitles: boolean = true;
7879
public connectionID: string;
79-
// public isTestConnection: boolean = false;
8080
public filters: object = {};
8181
public comparators: object;
8282
public pageIndex: number;
8383
public pageSize: number;
8484
public sortColumn: string;
8585
public sortOrder: 'ASC' | 'DESC';
86-
8786
public loading: boolean = true;
8887
public isServerError: boolean = false;
8988
public serverError: ServerError;
@@ -131,10 +130,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
131130
}
132131

133132
ngOnInit() {
134-
this.connectionID = this._connections.currentConnectionID;
135-
// this.isTestConnection = this._connections.currentConnection.isTestConnection;
136-
this.dataSource = new TablesDataSource(this._tables, this._connections, this._uiSettings, this._tableRow);
137-
133+
this.connectionID = this._connections.currentConnectionID;
134+
this.dataSource = new TablesDataSource(this._tables, this._connections, this._tableRow);
138135
this._tableState.cast.subscribe((row) => {
139136
this.selectedRow = row;
140137
});
@@ -384,7 +381,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
384381
this.uiSettings = settings?.connections[this.connectionID];
385382
this.shownTableTitles = settings?.connections[this.connectionID]?.shownTableTitles ?? true;
386383

387-
const shownColumns = this.uiSettings?.tables[this.selectedTableName]?.shownColumns;
388384
this.dataSource.fetchRows({
389385
connectionID: this.connectionID,
390386
tableName: this.selectedTableName,
@@ -393,8 +389,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
393389
sortColumn: this.sortColumn,
394390
sortOrder: this.sortOrder,
395391
filters: this.filters,
396-
search,
397-
shownColumns,
392+
search
398393
});
399394
});
400395
}

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -62,17 +62,17 @@ <h2 class="mat-heading-2 settings-fields__heading">General settings</h2>
6262
</mat-slide-toggle>
6363

6464
<h2 class="mat-heading-2 settings-fields__heading">Table view</h2>
65-
<mat-form-field appearance="outline">
65+
<!--<mat-form-field appearance="outline">
6666
<mat-label>Columns visible by default</mat-label>
6767
<mat-select multiple
6868
name="columns_view"
6969
[(ngModel)]="tableSettings.columns_view">
7070
<mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
7171
</mat-select>
7272
<mat-hint>Choose the columns you want users to see when they first open this table. Changes made to a table's Columns view are saved over the default values.</mat-hint>
73-
</mat-form-field>
73+
</mat-form-field>-->
7474

75-
<div class="order-settings">
75+
<!--<div class="order-settings">
7676
<div class="order-settings__panel">
7777
<span class="order__title">
7878
Columns order
@@ -103,7 +103,7 @@ <h2 class="mat-heading-2 settings-fields__heading">Table view</h2>
103103
(click)="resetColumnsOrder()">
104104
<mat-icon>restart_alt</mat-icon>
105105
</button>
106-
</div>
106+
</div>-->
107107

108108
<mat-form-field appearance="outline">
109109
<mat-label>Searchable columns</mat-label>
@@ -115,7 +115,7 @@ <h2 class="mat-heading-2 settings-fields__heading">Table view</h2>
115115
<mat-hint>Choose the columns Rocketadmin scans when using the Search bar.</mat-hint>
116116
</mat-form-field>
117117

118-
<div class="form-group-ordering">
118+
<!--<div class="form-group-ordering">
119119
<mat-form-field appearance="outline" class="form-group-ordering__ordering-by">
120120
<mat-label>Order by</mat-label>
121121
<mat-select name="ordering_field" [(ngModel)]="tableSettings.ordering_field">
@@ -132,7 +132,7 @@ <h2 class="mat-heading-2 settings-fields__heading">Table view</h2>
132132
<mat-radio-button value="ASC" checked>Ascending</mat-radio-button>
133133
<mat-radio-button value="DESC">Descending</mat-radio-button>
134134
</mat-radio-group>
135-
</div>
135+
</div>-->
136136

137137
<mat-form-field appearance="outline">
138138
<mat-label>Sortable columns</mat-label>
@@ -189,7 +189,7 @@ <h2 class="mat-heading-2" style="margin-bottom: -4px; margin-top: 12px">"Edit ro
189189
<button mat-flat-button color="primary"
190190
type="submit"
191191
class="settings-form__save-button"
192-
[disabled]="(submitting || tableSettingsForm.form.invalid || tableSettingsForm.form.pristine) && !orderChanged && !iconChanged">
192+
[disabled]="(submitting || tableSettingsForm.form.invalid || tableSettingsForm.form.pristine) && !iconChanged">
193193
Save
194194
</button>
195195
</div>

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,16 +79,12 @@ describe('DbTableSettingsComponent', () => {
7979
icon: '',
8080
search_fields: [],
8181
excluded_fields: [],
82-
list_fields: [],
8382
// identification_fields: [],
8483
// list_per_page: null,
85-
ordering: TableOrdering.Ascending,
86-
ordering_field: '',
8784
identity_column: '',
8885
readonly_fields: [],
8986
sortable_by: [],
9087
autocomplete_columns: ['FirstName'],
91-
columns_view: [],
9288
sensitive_fields: [],
9389
connection_id: '63f804e4-8588-4957-8d7f-655e2309fef7',
9490
allow_csv_export: true,

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

Lines changed: 2 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
21
import { Component, OnInit } from '@angular/core';
3-
import { TableField, TableOrdering, TableSettings } from 'src/app/models/table';
2+
import { TableField, TableSettings } from 'src/app/models/table';
43

54
import { AlertComponent } from '../../../ui-components/alert/alert.component';
65
import { Angulartics2 } from 'angulartics2';
@@ -61,9 +60,7 @@ export class DbTableSettingsComponent implements OnInit {
6160
public loading: boolean = true;
6261
public fields: string[];
6362
public fields_to_exclude: string[];
64-
public orderChanged: boolean = false;
6563
public iconChanged: boolean = false;
66-
public listFieldsOrder: string[];
6764
public tableSettingsInitial: TableSettings = {
6865
connection_id: '',
6966
table_name: '',
@@ -73,12 +70,8 @@ export class DbTableSettingsComponent implements OnInit {
7370
identity_column: '',
7471
search_fields: [],
7572
excluded_fields: [],
76-
list_fields: [],
77-
ordering: TableOrdering.Ascending,
78-
ordering_field: '',
7973
readonly_fields: [],
8074
sortable_by: [],
81-
columns_view: [],
8275
sensitive_fields: [],
8376
allow_csv_export: true,
8477
allow_csv_import: true,
@@ -144,13 +137,9 @@ export class DbTableSettingsComponent implements OnInit {
144137
if (Object.keys(res).length !== 0) {
145138
this.isSettingsExist = true
146139
this.tableSettings = res;
147-
this.listFieldsOrder = [...res.list_fields];
148140
} else {
149141
this.tableSettings = this.tableSettingsInitial;
150142
};
151-
if (Object.keys(res).length === 0 || (res?.list_fields && !res.list_fields.length)) {
152-
this.listFieldsOrder = [...this.fields];
153-
};
154143
this.title.setTitle(`${res.display_name || this.displayTableName} - Table settings | ${this._company.companyTabTitle || 'Rocketadmin'}`);
155144
}
156145
);
@@ -161,18 +150,6 @@ export class DbTableSettingsComponent implements OnInit {
161150
this.iconChanged = true;
162151
}
163152

164-
drop(event: CdkDragDrop<string[]>) {
165-
moveItemInArray(this.listFieldsOrder, event.previousIndex, event.currentIndex);
166-
this.tableSettings.list_fields = [...this.listFieldsOrder];
167-
this.orderChanged = true;
168-
}
169-
170-
resetColumnsOrder() {
171-
this.tableSettings.list_fields = [];
172-
this.listFieldsOrder = [...this.fields];
173-
this.orderChanged = true;
174-
}
175-
176153
updateSettings() {
177154
this.submitting = true;
178155
this.tableSettings.connection_id = this.connectionID;
@@ -183,11 +160,7 @@ export class DbTableSettingsComponent implements OnInit {
183160
for (const [key, value] of Object.entries(this.tableSettings)) {
184161
if (key !== 'connection_id' && key !== 'table_name' && key !== 'ordering') {
185162
if (Array.isArray(value)) {
186-
if (key === 'list_fields') {
187-
updatedSettings[key] = this.orderChanged;
188-
} else {
189-
updatedSettings[key] = value.length > 0;
190-
}
163+
updatedSettings[key] = value.length > 0
191164
} else {
192165
updatedSettings[key] = Boolean(value);
193166
}

0 commit comments

Comments
 (0)