From 53e644903777496f1b89e429a2872b16feb491b1 Mon Sep 17 00:00:00 2001
From: develite98 <phongcao3091998@gmail.com>
Date: Mon, 30 Oct 2023 13:53:50 +0700
Subject: [PATCH] feat() update filter

---
 .../database-data.component.html              |  6 ++++-
 .../src/app/stores/database-data.store.ts     |  1 +
 libs/mix-share/src/bases/base-crud.store.ts   |  2 +-
 .../dynamic-filter.component.html             | 18 ++++++++++++-
 .../dynamic-filter.component.scss             |  4 +++
 .../dynamic-filter.component.ts               | 27 ++++++++++++++++---
 .../filter-input/filter-input.component.html  |  6 ++++-
 .../filter-item/filter-item.component.html    |  4 ++-
 .../filter-item/filter-item.component.scss    |  3 ++-
 .../filter-item/filter-item.component.ts      |  1 +
 10 files changed, 63 insertions(+), 9 deletions(-)

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
index 14681120..981aad39 100644
--- 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
@@ -88,8 +88,12 @@
         <div class="mix-dbs-table__main-container">
           <div
             class="h-100 w-100"
-            [class.d-none]="vm.status !== 'Success' || vm.loadDataError"
+            [class.d-none]="vm.status === 'Loading' || vm.loadDataError"
           >
+            <div *ngIf="vm.status === 'SilentLoading'" class="mix-progress-bar">
+              <div class="mix-progress-bar-value"></div>
+            </div>
+
             <ag-grid-angular
               class="ag-theme-alpine"
               [animateRows]="true"
diff --git a/apps/mix-cms/src/app/stores/database-data.store.ts b/apps/mix-cms/src/app/stores/database-data.store.ts
index ea31b8f0..500a9cbe 100644
--- a/apps/mix-cms/src/app/stores/database-data.store.ts
+++ b/apps/mix-cms/src/app/stores/database-data.store.ts
@@ -165,6 +165,7 @@ export class DatabaseDataStore extends ComponentStore<DatabaseDataState> {
 
     this.patchState((s) => ({
       ...s,
+      status: 'SilentLoading',
       loadDataError: false,
       request: request,
     }));
diff --git a/libs/mix-share/src/bases/base-crud.store.ts b/libs/mix-share/src/bases/base-crud.store.ts
index 55345c80..ca77bb74 100644
--- a/libs/mix-share/src/bases/base-crud.store.ts
+++ b/libs/mix-share/src/bases/base-crud.store.ts
@@ -26,7 +26,7 @@ export interface BaseState<T> {
   data: T[];
   request: PaginationRequestModel;
   pageInfo: PaginationModel;
-  status: 'Loading' | 'Error' | 'Pending' | 'Success';
+  status: 'Loading' | 'Error' | 'Pending' | 'Success' | 'SilentLoading';
 }
 
 export const DEFAULT_DATA = {
diff --git a/libs/mix-ui/src/dynamic-filter/dynamic-filter.component.html b/libs/mix-ui/src/dynamic-filter/dynamic-filter.component.html
index 4a3909fb..46d5a9d8 100644
--- a/libs/mix-ui/src/dynamic-filter/dynamic-filter.component.html
+++ b/libs/mix-ui/src/dynamic-filter/dynamic-filter.component.html
@@ -21,11 +21,27 @@ <h4 class="mb-3">Filter Record(s)</h4>
         [columns]="columns"
         [filter]="filter"
         (filterChange)="onFilterValueChange($event, i)"
+        (deleteFilter)="deleteFilter(filter, i)"
       ></mix-filter-item>
     </ng-container>
 
+    <div class="d-flex align-items-center gap-2" *ngIf="filters.length >= 2">
+      *Meet
+
+      <mix-select
+        [formControl]="logicalOperateForm"
+        size="s"
+        class="filter-dialog__select"
+        [items]="logicalOperateItems"
+      ></mix-select>
+
+      of these conditions
+    </div>
+
     <div class="filter-dialog__footer">
-      <mix-button type="outline" (click)="add()">Add condition</mix-button>
+      <mix-button type="outline" (click)="add()">
+        <span class="mix-icon">add</span> Add condition</mix-button
+      >
 
       <mix-button class="ms-auto" type="outline" (click)="ref.close()"
         >Close</mix-button
diff --git a/libs/mix-ui/src/dynamic-filter/dynamic-filter.component.scss b/libs/mix-ui/src/dynamic-filter/dynamic-filter.component.scss
index a4cdfc18..ddbec7eb 100644
--- a/libs/mix-ui/src/dynamic-filter/dynamic-filter.component.scss
+++ b/libs/mix-ui/src/dynamic-filter/dynamic-filter.component.scss
@@ -7,4 +7,8 @@
     width: 100%;
     gap: 4px;
   }
+
+  &__select {
+    width: 100px;
+  }
 }
diff --git a/libs/mix-ui/src/dynamic-filter/dynamic-filter.component.ts b/libs/mix-ui/src/dynamic-filter/dynamic-filter.component.ts
index 3d1f3f66..56babec9 100644
--- a/libs/mix-ui/src/dynamic-filter/dynamic-filter.component.ts
+++ b/libs/mix-ui/src/dynamic-filter/dynamic-filter.component.ts
@@ -12,26 +12,33 @@ import {
 import { MixColumn, MixFilter } from '@mixcore/lib/model';
 import { TrackByProp } from '@mixcore/share/pipe';
 
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MixButtonComponent } from '@mixcore/ui/button';
 import { DialogService } from '@ngneat/dialog';
-import { TippyDirective } from '@ngneat/helipopper';
 import { TuiBadgeModule } from '@taiga-ui/kit';
+import { MixSelectComponent } from '../select';
 import { FilterItemComponent } from './filter-item/filter-item.component';
 
 export interface DynamicFilterValue {
   column?: MixColumn;
 }
 
+export enum LogicalOperate {
+  All = 'All',
+  AtLeast = 'At least 1',
+}
+
 @Component({
   selector: 'mix-dynamic-filter',
   standalone: true,
   imports: [
     CommonModule,
     MixButtonComponent,
-    TippyDirective,
+    MixSelectComponent,
     FilterItemComponent,
     TrackByProp,
     TuiBadgeModule,
+    ReactiveFormsModule,
   ],
   templateUrl: './dynamic-filter.component.html',
   styleUrls: ['./dynamic-filter.component.scss'],
@@ -46,6 +53,8 @@ export class DynamicFilterComponent {
   @Input() public filters: MixFilter[] = [];
   @Output() public filtersChange = new EventEmitter<MixFilter[]>();
   public validFilterCount = 0;
+  public logicalOperateItems = [LogicalOperate.All, LogicalOperate.AtLeast];
+  public logicalOperateForm = new FormControl(LogicalOperate.AtLeast);
 
   public open(tpl: TemplateRef<any>) {
     this.dialog.open(tpl, { resizable: true, draggable: true });
@@ -56,6 +65,7 @@ export class DynamicFilterComponent {
       fieldName: this.columns[0].systemName,
       value: null,
       compareOperator: 'Like',
+      isRequired: false,
     });
 
     this.cdr.detectChanges();
@@ -66,7 +76,18 @@ export class DynamicFilterComponent {
   }
 
   public applyChange() {
+    this.filters = this.filters
+      .filter((x) => x.value)
+      .map((f) => {
+        f.isRequired = this.logicalOperateForm.value === LogicalOperate.All;
+        return f;
+      });
+
+    this.validFilterCount = this.filters.length;
     this.filtersChange.emit(this.filters);
-    this.validFilterCount = this.filters.filter((x) => x.value).length;
+  }
+
+  public deleteFilter(value: MixFilter, index: number) {
+    this.filters.splice(index, 1);
   }
 }
diff --git a/libs/mix-ui/src/dynamic-filter/filter-input/filter-input.component.html b/libs/mix-ui/src/dynamic-filter/filter-input/filter-input.component.html
index b3bbb2e3..69f39378 100644
--- a/libs/mix-ui/src/dynamic-filter/filter-input/filter-input.component.html
+++ b/libs/mix-ui/src/dynamic-filter/filter-input/filter-input.component.html
@@ -1,4 +1,8 @@
-<mix-input *ngIf="inputType === 'Text'" [formControl]="control"></mix-input>
+<mix-input
+  *ngIf="inputType === 'Text'"
+  [formControl]="control"
+  [placeHolder]="'Type value'"
+></mix-input>
 
 <mix-date-picker
   *ngIf="inputType === 'DatePicker'"
diff --git a/libs/mix-ui/src/dynamic-filter/filter-item/filter-item.component.html b/libs/mix-ui/src/dynamic-filter/filter-item/filter-item.component.html
index da45a931..25925128 100644
--- a/libs/mix-ui/src/dynamic-filter/filter-item/filter-item.component.html
+++ b/libs/mix-ui/src/dynamic-filter/filter-item/filter-item.component.html
@@ -17,5 +17,7 @@
     (valueChange)="filterValueChange($event)"
   ></mix-filter-input>
 
-  <mix-button>X</mix-button>
+  <mix-button [iconBtn]="true" type="icon" (click)="deleteFilter.emit()"
+    ><span class="mix-icon">close</span></mix-button
+  >
 </div>
diff --git a/libs/mix-ui/src/dynamic-filter/filter-item/filter-item.component.scss b/libs/mix-ui/src/dynamic-filter/filter-item/filter-item.component.scss
index 540ebbfb..9ecc5bb6 100644
--- a/libs/mix-ui/src/dynamic-filter/filter-item/filter-item.component.scss
+++ b/libs/mix-ui/src/dynamic-filter/filter-item/filter-item.component.scss
@@ -1,6 +1,7 @@
 .filter-item {
   display: grid;
-  grid-template-columns: 120px 150px auto 50px;
+  grid-template-columns: 120px 150px auto min-content;
   grid-gap: 4px;
   margin-bottom: 6px;
+  align-items: center;
 }
diff --git a/libs/mix-ui/src/dynamic-filter/filter-item/filter-item.component.ts b/libs/mix-ui/src/dynamic-filter/filter-item/filter-item.component.ts
index f5dfb3db..d3d5c40b 100644
--- a/libs/mix-ui/src/dynamic-filter/filter-item/filter-item.component.ts
+++ b/libs/mix-ui/src/dynamic-filter/filter-item/filter-item.component.ts
@@ -48,6 +48,7 @@ export class FilterItemComponent {
   });
 
   @Output() public filterChange = new EventEmitter();
+  @Output() public deleteFilter = new EventEmitter();
 
   ngOnInit() {
     this.form.controls.column.patchValue(