feat() update filter

mixcore · Oct 27, 2023 · fe0445e · fe0445e
1 parent afed976
commit fe0445e
Show file tree

Hide file tree

Showing 40 changed files with 256 additions and 581 deletions.
diff --git a/...cms/src/app/pages/portal/database-data/database-data-form/database-data-form.component.ts b/...cms/src/app/pages/portal/database-data/database-data-form/database-data-form.component.ts
@@ -19,7 +19,6 @@ import { TuiLoaderModule, TuiScrollbarModule } from '@taiga-ui/core';
 import { TuiFileLike, TuiTabsModule, TuiToggleModule } from '@taiga-ui/kit';
 import { combineLatest, debounceTime, forkJoin, of, switchMap } from 'rxjs';
 import { CMS_ROUTES } from '../../../../app.routes';
-import { BasicMixFilterComponent } from '../../../../components/basic-mix-filter/basic-mix-filter.component';
 import { DynamicDbListComponent } from '../../../../components/dynamic-db-list/dynamic-db-list.component';
 import { MixSubToolbarComponent } from '../../../../components/sub-toolbar/sub-toolbar.component';
 import { FormlyMixModule } from '../../../../shares/kits/formly-mix.module';
@@ -39,7 +38,6 @@ import { FormlyMixModule } from '../../../../shares/kits/formly-mix.module';
     FormlyMixModule,
     MixSubToolbarComponent,
     DynamicDbListComponent,
-    BasicMixFilterComponent,
   ],
   templateUrl: './database-data-form.component.html',
   styleUrls: ['./database-data-form.component.scss'],

diff --git a/apps/mix-cms/src/app/pages/portal/database-data/database-data.component.html b/apps/mix-cms/src/app/pages/portal/database-data/database-data.component.html
@@ -1,82 +1,108 @@
-<div *ngIf="store.vm$ | async as vm"
-     class="data-table-page">
+<div *ngIf="store.vm$ | async as vm" class="data-table-page">
   <div class="data-table-page__sidebar">
-    <mix-database-select [isCreate]="false"
-                         [prefix]="'Query'"
-                         [selectedItemId]="vm.db?.id"
-                         [selectedItemName]="dbSysName"
-                         (selectedItemChange)="selectedTableChange($event)"></mix-database-select>
+    <mix-database-select
+      [isCreate]="false"
+      [prefix]="'Query'"
+      [selectedItemId]="vm.db?.id"
+      [selectedItemName]="dbSysName"
+      (selectedItemChange)="selectedTableChange($event)"
+    ></mix-database-select>
   </div>
 
   <div class="data-table-page__main-container">
     <ng-container *ngIf="vm.status === 'Pending'">
-      <div class="h-100 w-100 d-flex flex-column justify-content-center align-items-center">
-        <img src="assets/images/empty-box.png"
-             alt="No data found"
-             width="150px">
+      <div
+        class="h-100 w-100 d-flex flex-column justify-content-center align-items-center"
+      >
+        <img
+          src="assets/images/empty-box.png"
+          alt="No data found"
+          width="150px"
+        />
         <p class="mt-2">Please choose a Database to view result</p>
       </div>
     </ng-container>
 
     <ng-container *ngIf="vm.status !== 'Pending'">
-      <mix-sub-toolbar [description]="'QUERY ON'"
-                       [loading]="vm.status === 'Loading' && vm.db === undefined"
-                       [title]="vm.db?.displayName || 'Db Data'">
+      <mix-sub-toolbar
+        [description]="'QUERY ON'"
+        [loading]="vm.status === 'Loading' && vm.db === undefined"
+        [title]="vm.db?.displayName || 'Db Data'"
+      >
         <div class="toolbar-separator"></div>
-        <mix-action-collapse [actionMaps]="actionMaps"
-                             [actions]="actions"></mix-action-collapse>
+        <mix-action-collapse
+          [actionMaps]="actionMaps"
+          [actions]="actions"
+        ></mix-action-collapse>
       </mix-sub-toolbar>
 
       <div class="data-table-page__body d-flex flex-column">
         <div class="mix-dbs-table__toolbar">
-          <mix-input class="search"
-                     [formControl]="searchForm"
-                     [searchIcon]="true"
-                     placeHolder="Search on string fields"></mix-input>
+          <mix-input
+            class="search"
+            [formControl]="searchForm"
+            [searchIcon]="true"
+            placeHolder="Search on string fields"
+          ></mix-input>
 
-          <mix-button type="secondary"
-                      [tp]="tpl"
-                      tpPlacement="bottom"
-                      tpVariation="popper"
-                      tuiButton
-                      size="m">
+          <mix-button
+            type="secondary"
+            [tp]="tpl"
+            tpPlacement="bottom"
+            tpVariation="popper"
+            tuiButton
+            size="m"
+          >
             Columns ({{ displayColumns.length || 0 }}/{{
               columnNames.length || 0
             }})
           </mix-button>
 
-          <ng-template #tpl
-                       let-hide>
-            <tui-reorder [(enabled)]="displayColumns"
-                         [(items)]="columnNames"
-                         (enabledChange)="displayColumns$.next(displayColumns)"
-                         style="width: 300px;"></tui-reorder>
+          <mix-dynamic-filter
+            [size]="'m'"
+            [columns]="vm.columns"
+          ></mix-dynamic-filter>
+
+          <ng-template #tpl let-hide>
+            <tui-reorder
+              [(enabled)]="displayColumns"
+              [(items)]="columnNames"
+              (enabledChange)="displayColumns$.next(displayColumns)"
+              style="width: 300px"
+            ></tui-reorder>
           </ng-template>
 
-          <mix-button *ngIf="vm.db"
-                      class="ms-auto"
-                      type="outline"
-                      (click)="onPreviewData(vm.db)"
-                      size="m">
-            <span class="mix-icon">code</span>&nbsp; API Document</mix-button>
+          <mix-button
+            *ngIf="vm.db"
+            class="ms-auto"
+            type="outline"
+            (click)="onPreviewData(vm.db)"
+            size="m"
+          >
+            <span class="mix-icon">code</span>&nbsp; API Document</mix-button
+          >
         </div>
 
         <div class="mix-dbs-table__main-container">
-          <div class="h-100 w-100"
-               [class.d-none]="vm.status !== 'Success' || vm.loadDataError">
-            <ag-grid-angular class="ag-theme-alpine"
-                             [animateRows]="true"
-                             [columnDefs]="columnDefs"
-                             [components]="components"
-                             [context]="context"
-                             [defaultColDef]="defaultColDef"
-                             [rowData]="rowData$ | async"
-                             [rowDragManaged]="true"
-                             [rowSelection]="'multiple'"
-                             [suppressMoveWhenRowDragging]="true"
-                             (gridReady)="onGridReady($event)"
-                             (selectionChanged)="onSelectionChanged()"
-                             style="width: 100%; height: 100%">
+          <div
+            class="h-100 w-100"
+            [class.d-none]="vm.status !== 'Success' || vm.loadDataError"
+          >
+            <ag-grid-angular
+              class="ag-theme-alpine"
+              [animateRows]="true"
+              [columnDefs]="columnDefs"
+              [components]="components"
+              [context]="context"
+              [defaultColDef]="defaultColDef"
+              [rowData]="rowData$ | async"
+              [rowDragManaged]="true"
+              [rowSelection]="'multiple'"
+              [suppressMoveWhenRowDragging]="true"
+              (gridReady)="onGridReady($event)"
+              (selectionChanged)="onSelectionChanged()"
+              style="width: 100%; height: 100%"
+            >
             </ag-grid-angular>
           </div>
 
@@ -89,7 +115,8 @@
           <ng-container *ngIf="vm.loadDataError">
             <div class="p-3">
               <div class="notification --error">
-                Something error when try to load data, your table may not be migrate to single table.
+                Something error when try to load data, your table may not be
+                migrate to single table.
               </div>
             </div>
           </ng-container>
@@ -101,9 +128,11 @@
             Page size: <strong>{{ vm.pageInfo.pageSize || '0' }}</strong>
           </div>
 
-          <tui-pagination *ngIf="!!vm.pageInfo?.totalPage"
-                          [index]="vm.pageInfo.pageIndex"
-                          [length]="vm.pageInfo.totalPage ?? 0"></tui-pagination>
+          <tui-pagination
+            *ngIf="!!vm.pageInfo?.totalPage"
+            [index]="vm.pageInfo.pageIndex"
+            [length]="vm.pageInfo.totalPage ?? 0"
+          ></tui-pagination>
         </div>
       </div>
     </ng-container>

diff --git a/apps/mix-cms/src/app/pages/portal/database-data/database-data.component.ts b/apps/mix-cms/src/app/pages/portal/database-data/database-data.component.ts
@@ -9,9 +9,11 @@ import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { MixDatabase, MixDynamicData } from '@mixcore/lib/model';
 import { MixApiFacadeService } from '@mixcore/share/api';
+import { BasicMixFilterComponent } from '@mixcore/share/components';
 import { DomHelper, toastObserverProcessing } from '@mixcore/share/helper';
 import { RelativeTimeSpanPipe } from '@mixcore/share/pipe';
 import { MixButtonComponent } from '@mixcore/ui/button';
+import { DynamicFilterComponent } from '@mixcore/ui/filter';
 import { MixInputComponent } from '@mixcore/ui/input';
 import { ModalService } from '@mixcore/ui/modal';
 import { SkeletonLoadingComponent } from '@mixcore/ui/skeleton';
@@ -37,7 +39,6 @@ import {
 } from 'rxjs';
 import { CMS_ROUTES } from '../../../app.routes';
 import { ActionCollapseComponent } from '../../../components/action-collapse/action-collapse.component';
-import { BasicMixFilterComponent } from '../../../components/basic-mix-filter/basic-mix-filter.component';
 import { DatabaseSelectComponent } from '../../../components/database-select/database-select.component';
 import { RecordFormComponent } from '../../../components/record-form/record-form.component';
 import { MixStatusIndicatorComponent } from '../../../components/status-indicator/mix-status-indicator.component';
@@ -70,6 +71,7 @@ import { CustomHeaderComponent } from './components/custom-header/custom-header.
     TuiReorderModule,
     TippyDirective,
     ReactiveFormsModule,
+    DynamicFilterComponent,
   ],
   templateUrl: './database-data.component.html',
   styleUrls: ['./database-data.component.scss'],
@@ -355,7 +357,10 @@ export class DatabaseDataComponent
       });
 
       dialogRef.afterClosed$.subscribe((value) => {
-        if (value) this.store.updateData(dataIndex, value);
+        if (value) {
+          this.store.updateData(dataIndex, value);
+          this.gridApi.refreshCells();
+        }
       });
     });
   }

diff --git a/apps/mix-cms/src/app/pages/portal/post/post-detail/post-detail.component.ts b/apps/mix-cms/src/app/pages/portal/post/post-detail/post-detail.component.ts
@@ -26,6 +26,7 @@ import {
   PaginationRequestModel,
   RelationShipType,
 } from '@mixcore/lib/model';
+import { BasicMixFilterComponent } from '@mixcore/share/components';
 import { FormHelper } from '@mixcore/share/form';
 import { Utils } from '@mixcore/share/utils';
 import { MixArrayMediaComponent } from '@mixcore/ui/array-media';
@@ -59,7 +60,6 @@ import {
   TuiToggleModule,
 } from '@taiga-ui/kit';
 import { Observable, combineLatest, forkJoin, takeUntil } from 'rxjs';
-import { BasicMixFilterComponent } from '../../../../components/basic-mix-filter/basic-mix-filter.component';
 import { DynamicDbListComponent } from '../../../../components/dynamic-db-list/dynamic-db-list.component';
 import { MetadataAssociationComponent } from '../../../../components/metadata-association/metadata-association.component';
 import { RelatedPostComponent } from '../../../../components/related-post/related-post.component';

diff --git a/apps/mix-cms/src/app/pages/portal/task-manage/store/task.store.ts b/apps/mix-cms/src/app/pages/portal/task-manage/store/task.store.ts
@@ -4,9 +4,9 @@ import {
   PaginationRequestModel,
   TaskStatus,
 } from '@mixcore/lib/model';
+import { BaseCRUDStore } from '@mixcore/share/base';
 import { map } from 'rxjs';
 import { MixSystemDbName } from '../../../../shares/consts/system-database-name';
-import { BaseCRUDStore } from '../../../../stores/base-crud.store';
 
 @Injectable({ providedIn: 'root' })
 export class TaskStore extends BaseCRUDStore<MixTaskNew> {