Saved filters 2

frontend/src/app/app-routing.module.ts

@@ -8,11 +8,10 @@ import { ConnectDBComponent } from './components/connect-db/connect-db.component
 import { ConnectionSettingsComponent } from './components/connection-settings/connection-settings.component';
 import { ConnectionsListComponent } from './components/connections-list/connections-list.component';
 import { DashboardComponent } from './components/dashboard/dashboard.component'
-import { DbTableActionsComponent } from './components/dashboard/db-table-actions/db-table-actions.component';
-import { DbTableComponent } from './components/dashboard/db-table/db-table.component';
+import { DbTableActionsComponent } from './components/dashboard/db-table-view/db-table-actions/db-table-actions.component';
 import { DbTableRowEditComponent } from './components/db-table-row-edit/db-table-row-edit.component';
-import { DbTableSettingsComponent } from './components/dashboard/db-table-settings/db-table-settings.component';
-import { DbTableWidgetsComponent } from './components/dashboard/db-table-widgets/db-table-widgets.component';
+import { DbTableSettingsComponent } from './components/dashboard/db-table-view/db-table-settings/db-table-settings.component';
+import { DbTableWidgetsComponent } from './components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component';
 import { EmailChangeComponent } from './components/email-change/email-change.component';
 import { EmailVerificationComponent } from './components/email-verification/email-verification.component';
 import { LoginComponent } from './components/login/login.component';

frontend/src/app/components/dashboard/dashboard.component.html

@@ -74,7 +74,7 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
                 </div>
 
                 <app-content-loader *ngIf="dataSource === null"></app-content-loader>
-                <app-db-table *ngIf="dataSource"
+                <app-db-table-view *ngIf="dataSource"
                     [displayName]="selectedTableDisplayName"
                     [activeFilters]="filters"
                     [filterComparators]="comparators"
@@ -89,8 +89,9 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
                     (removeFilter)="removeFilter($event)"
                     (resetAllFilters)="clearAllFilters()"
                     (search)="search($event)"
-                    (activateActions)="activateActions($event)">
-                </app-db-table>
+                    (activateActions)="activateActions($event)"
+                    (applyFilter)="applyFilter($event)">
+                </app-db-table-view>
             </div>
             <app-db-table-row-view *ngIf="selectedRow"
                 [activeFilters]="filters"

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

@@ -7,16 +7,16 @@ import { first, map } from 'rxjs/operators';
 
 import { AlertComponent } from '../ui-components/alert/alert.component';
 import { BannerComponent } from '../ui-components/banner/banner.component';
-import { BbBulkActionConfirmationDialogComponent } from './db-bulk-action-confirmation-dialog/db-bulk-action-confirmation-dialog.component';
+import { BbBulkActionConfirmationDialogComponent } from './db-table-view/db-bulk-action-confirmation-dialog/db-bulk-action-confirmation-dialog.component';
 import { CommonModule } from '@angular/common';
 import { CompanyService } from 'src/app/services/company.service';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { ContentLoaderComponent } from '../ui-components/content-loader/content-loader.component';
-import { DbActionLinkDialogComponent } from './db-action-link-dialog/db-action-link-dialog.component';
-import { DbTableAiPanelComponent } from './db-table-ai-panel/db-table-ai-panel.component';
-import { DbTableComponent } from './db-table/db-table.component';
-import { DbTableFiltersDialogComponent } from './db-table-filters-dialog/db-table-filters-dialog.component';
-import { DbTableRowViewComponent } from './db-table-row-view/db-table-row-view.component';
+import { DbActionLinkDialogComponent } from './db-table-view/db-action-link-dialog/db-action-link-dialog.component';
+import { DbTableAiPanelComponent } from './db-table-view/db-table-ai-panel/db-table-ai-panel.component';
+import { DbTableFiltersDialogComponent } from './db-table-view/db-table-filters-dialog/db-table-filters-dialog.component';
+import { DbTableRowViewComponent } from './db-table-view/db-table-row-view/db-table-row-view.component';
+import { DbTableViewComponent } from './db-table-view/db-table-view.component';
 import { DbTablesListComponent } from './db-tables-list/db-tables-list.component';
 import { HttpErrorResponse } from '@angular/common/http';
 import JsonURL from "@jsonurl/jsonurl";
@@ -58,7 +58,7 @@ interface DataToActivateActions {
     MatDialogModule,
     MatSidenavModule,
     DbTablesListComponent,
-    DbTableComponent,
+    DbTableViewComponent,
     DbTableAiPanelComponent,
     DbTableRowViewComponent,
     AlertComponent,
@@ -151,6 +151,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
         this.shownTableTitles = settings?.connections[this.connectionID]?.shownTableTitles ?? true;
 
         this.getData();
+        console.log('getData from ngOnInit');
     });
   }
 
@@ -159,6 +160,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   async getData() {
+    console.log('getData');
     let tables;
     try {
       tables = await this.getTables();
@@ -185,6 +187,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
             if (tableName) {
               this.selectedTableName = tableName;
               this.setTable(tableName);
+              console.log('setTable from getData paramMap');
               this.title.setTitle(`${this.selectedTableDisplayName} table | ${this._company.companyTabTitle || 'Rocketadmin'}`);
               this.selection.clear();
             } else {
@@ -201,12 +204,14 @@ export class DashboardComponent implements OnInit, OnDestroy {
         this._tableRow.cast.subscribe((arg) => {
           if (arg === 'delete row' && this.selectedTableName) {
             this.setTable(this.selectedTableName);
+            console.log('setTable from getData _tableRow cast');
             this.selection.clear();
           };
         });
         this._tables.cast.subscribe((arg) => {
           if ((arg === 'delete rows' || arg === 'import') && this.selectedTableName) {
             this.setTable(this.selectedTableName);
+            console.log('setTable from getData _tables cast');
             this.selection.clear();
           };
           if (arg === 'activate actions') {
@@ -217,6 +222,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   getTables() {
+    console.log('getTables');
     return this._tables.fetchTables(this.connectionID).toPromise();
   }
 
@@ -243,17 +249,17 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
   setTable(tableName: string) {
     this.selectedTableName = tableName;
-    this.route.queryParams.pipe(first()).subscribe((queryParams) => {
-      this.filters = JsonURL.parse( queryParams.filters );
-      this.comparators = getComparatorsFromUrl(this.filters);
-      this.pageIndex = parseInt(queryParams.page_index) || 0;
-      this.pageSize = parseInt(queryParams.page_size) || 30;
-      this.sortColumn = queryParams.sort_active;
-      this.sortOrder = queryParams.sort_direction;
-
-      const search = queryParams.search;
-      this.getRows(search);
-    })
+    const queryParams = this.route.snapshot.queryParams;
+    this.filters = JsonURL.parse(queryParams.filters);
+    this.comparators = getComparatorsFromUrl(this.filters);
+    this.pageIndex = parseInt(queryParams.page_index) || 0;
+    this.pageSize = parseInt(queryParams.page_size) || 30;
+    this.sortColumn = queryParams.sort_active;
+    this.sortOrder = queryParams.sort_direction;
+
+    const search = queryParams.search;
+    this.getRows(search);
+    console.log('getRows from setTable');
 
     const selectedTableProperties = this.tablesList.find( (table: any) => table.table == this.selectedTableName);
     if (selectedTableProperties) {
@@ -279,21 +285,27 @@ export class DashboardComponent implements OnInit, OnDestroy {
       if (action === 'filter') {
         const filtersFromDialog = {...filterDialodRef.componentInstance.tableRowFieldsShown};
 
+        console.log('Filters from dialog:', filtersFromDialog);
+
         const nonEmptyFilters = omitBy(filtersFromDialog, (value) => value === undefined);
         this.comparators = filterDialodRef.componentInstance.tableRowFieldsComparator;
 
         if (Object.keys(nonEmptyFilters).length) {
           this.filters = {};
           for (const key in nonEmptyFilters) {
-              if (this.comparators[key] !== undefined) {
-                this.filters[key] = {
-                      [this.comparators[key]]: nonEmptyFilters[key]
-                  };
-              }
+            if (this.comparators[key] !== undefined) {
+              this.filters[key] = {
+                [this.comparators[key]]: nonEmptyFilters[key]
+              };
+            }
           }
 
+          console.log('Filters to apply:', this.filters);
+
           const filters = JsonURL.stringify( this.filters );
 
+          console.log('Filters to navigate:', filters);
+
           this.router.navigate([`/dashboard/${this.connectionID}/${this.selectedTableName}`], {
             queryParams: {
               filters,
@@ -302,6 +314,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
             }
           });
           this.getRows();
+          console.log('getRows from afterClosed');
+
 
           this.angulartics2.eventTrack.next({
             action: 'Dashboard: filter is applied',
@@ -310,6 +324,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
       } else if (action === 'reset') {
         this.filters = {};
         this.getRows();
+        console.log('getRows from reset filters afterClosed');
         this.router.navigate([`/dashboard/${this.connectionID}/${this.selectedTableName}`]);
       }
     })
@@ -324,6 +339,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.selection.clear();
 
     this.getRows();
+    console.log('getRows from removeFilter');
     this.router.navigate([`/dashboard/${this.connectionID}/${this.selectedTableName}`], {
       queryParams: {
         filters,
@@ -337,6 +353,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.filters = {};
     this.comparators = {};
     this.getRows();
+    console.log('getRows from clearAllFilters');
     this.router.navigate([`/dashboard/${this.connectionID}/${this.selectedTableName}`], {
       queryParams: {
         page_index: 0,
@@ -347,6 +364,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
   search(value: string) {
     this.getRows(value);
+    console.log('getRows from search');
     this.filters = {};
     this.router.navigate([`/dashboard/${this.connectionID}/${this.selectedTableName}`], {
       queryParams: {
@@ -358,6 +376,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   getRows(search?: string) {
+    console.log('getRows, filters:', this.filters);
     this._uiSettings.getUiSettings()
       .subscribe ((settings: UiSettings) => {
         this.uiSettings = settings?.connections[this.connectionID];
@@ -376,7 +395,13 @@ export class DashboardComponent implements OnInit, OnDestroy {
           shownColumns
         });
     });
+  }
 
+  applyFilter(filters: any) {
+    console.log('applyFilter with filters:', filters);
+    this.filters = filters?.filters;
+    this.getRows();
+    console.log('getRows from applyFilter');
   }
 
   openIntercome() {

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

@@ -4,18 +4,18 @@ import { Component, OnInit } from '@angular/core';
 import { CustomAction, CustomActionMethod, CustomActionType, CustomEvent, EventType, Rule } from 'src/app/models/table';
 
 import { ActionDeleteDialogComponent } from './action-delete-dialog/action-delete-dialog.component';
-import { AlertComponent } from '../../ui-components/alert/alert.component';
-import { BreadcrumbsComponent } from '../../ui-components/breadcrumbs/breadcrumbs.component';
+import { AlertComponent } from '../../../ui-components/alert/alert.component';
+import { BreadcrumbsComponent } from '../../../ui-components/breadcrumbs/breadcrumbs.component';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CodeEditorModule } from '@ngstack/code-editor';
 import { CommonModule } from '@angular/common';
 import { CompanyMember } from 'src/app/models/company';
 import { CompanyService } from 'src/app/services/company.service';
 import { ConnectionsService } from 'src/app/services/connections.service';
-import { ContentLoaderComponent } from '../../ui-components/content-loader/content-loader.component';
+import { ContentLoaderComponent } from '../../../ui-components/content-loader/content-loader.component';
 import { FormsModule } from '@angular/forms';
 import { HttpErrorResponse } from '@angular/common/http';
-import { IconPickerComponent } from '../../ui-components/icon-picker/icon-picker.component';
+import { IconPickerComponent } from '../../../ui-components/icon-picker/icon-picker.component';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';

frontend/src/app/components/dashboard/db-table-filters-dialog/db-table-filters-dialog.component.ts → frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.ts

@@ -24,7 +24,7 @@ import JsonURL from "@jsonurl/jsonurl";
 import { DynamicModule } from 'ng-dynamic-component';
 import { RouterModule } from '@angular/router';
 import { MatDialogModule } from '@angular/material/dialog';
-import { ContentLoaderComponent } from '../../ui-components/content-loader/content-loader.component';
+import { ContentLoaderComponent } from '../../../ui-components/content-loader/content-loader.component';
 import { Angulartics2OnModule } from 'angulartics2';
 
 @Component({
@@ -92,19 +92,33 @@ export class DbTableFiltersDialogComponent implements OnInit {
     }));
 
     const queryParams = this.route.snapshot.queryParams;
-    const filters = JsonURL.parse(queryParams.filters);
-    const filtersValues = getFiltersFromUrl(filters);
 
-    if (Object.keys(filtersValues).length) {
-      this.tableFilters = Object.keys(filtersValues).map(key => key);
-      this.tableRowFieldsShown = filtersValues;
-      this.tableRowFieldsComparator = getComparatorsFromUrl(filters);
+    // If saved_filter is present in queryParams, show empty form without applying filters
+    if (queryParams.saved_filter) {
+      // Show empty form without filters
+      this.tableFilters = [];
+      this.tableRowFieldsShown = {};
+      this.tableRowFieldsComparator = {};
     } else {
-      const fieldsToSearch = this.data.structure.structure.filter((field: TableField) => field.isSearched);
-      if (fieldsToSearch.length) {
-        this.tableFilters = fieldsToSearch.map((field:TableField) => field.column_name);
-        this.tableRowFieldsShown = Object.assign({}, ...fieldsToSearch.map((field: TableField) => ({[field.column_name]: undefined})));
-        this.tableRowFieldsComparator = Object.assign({}, ...fieldsToSearch.map((field: TableField) => ({[field.column_name]: 'eq'})));
+      // Original behavior - parse and apply filters from URL
+      let filters = {};
+      if (queryParams.filters) filters = JsonURL.parse(queryParams.filters);
+      // const filters = JsonURL.parse(queryParams.filters || '{}');
+      const filtersValues = getFiltersFromUrl(filters);
+
+      console.log('Parsed filters from URL:', filtersValues);
+
+      if (Object.keys(filtersValues).length) {
+        this.tableFilters = Object.keys(filtersValues).map(key => key);
+        this.tableRowFieldsShown = filtersValues;
+        this.tableRowFieldsComparator = getComparatorsFromUrl(filters);
+      } else {
+        const fieldsToSearch = this.data.structure.structure.filter((field: TableField) => field.isSearched);
+        if (fieldsToSearch.length) {
+          this.tableFilters = fieldsToSearch.map((field:TableField) => field.column_name);
+          this.tableRowFieldsShown = Object.assign({}, ...fieldsToSearch.map((field: TableField) => ({[field.column_name]: undefined})));
+          this.tableRowFieldsComparator = Object.assign({}, ...fieldsToSearch.map((field: TableField) => ({[field.column_name]: 'eq'})));
+        }
       }
     }
 

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

@@ -14,13 +14,13 @@ import { MatListModule } from '@angular/material/list';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { NotificationsService } from 'src/app/services/notifications.service';
-import { PlaceholderRecordViewComponent } from '../../skeletons/placeholder-record-view/placeholder-record-view.component';
+import { PlaceholderRecordViewComponent } from '../../../skeletons/placeholder-record-view/placeholder-record-view.component';
 import { TableStateService } from 'src/app/services/table-state.service';
 import { TablesService } from 'src/app/services/tables.service';
 import { formatFieldValue } from 'src/app/lib/format-field-value';
-import { ForeignKeyRecordViewComponent } from '../../ui-components/record-view-fields/foreign-key/foreign-key.component';
 import { UIwidgets, recordViewFieldTypes } from 'src/app/consts/record-view-types';
 import { DynamicModule } from 'ng-dynamic-component';
+import { ForeignKeyRecordViewComponent } from 'src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component';
 
 @Component({
   selector: 'app-db-table-row-view',

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

@@ -2,31 +2,31 @@ import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 import { Component, Inject, OnInit } from '@angular/core';
 import { TableField, TableOrdering, TableSettings } from 'src/app/models/table';
 
-import { AlertComponent } from '../../ui-components/alert/alert.component';
+import { AlertComponent } from '../../../ui-components/alert/alert.component';
 import { Angulartics2 } from 'angulartics2';
-import { BreadcrumbsComponent } from '../../ui-components/breadcrumbs/breadcrumbs.component';
+import { BreadcrumbsComponent } from '../../../ui-components/breadcrumbs/breadcrumbs.component';
 import { CommonModule } from '@angular/common';
+import { CompanyService } from 'src/app/services/company.service';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { FormsModule } from '@angular/forms';
-import { IconPickerComponent } from '../../ui-components/icon-picker/icon-picker.component';
+import { IconPickerComponent } from '../../../ui-components/icon-picker/icon-picker.component';
 import { Location } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { NgForm } from '@angular/forms';
-import { PlaceholderTableSettingsComponent } from '../../skeletons/placeholder-table-settings/placeholder-table-settings.component';
+import { PlaceholderTableSettingsComponent } from '../../../skeletons/placeholder-table-settings/placeholder-table-settings.component';
 import { Router } from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { TablesService } from 'src/app/services/tables.service';
 import { Title } from '@angular/platform-browser';
 import { normalizeTableName } from 'src/app/lib/normalize';
-import { MatButtonModule } from '@angular/material/button';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { CompanyService } from 'src/app/services/company.service';
 
 @Component({
   selector: 'app-db-table-settings',