feat() update code filter

apps/mix-cms/src/app/pages/portal/database-data/database-data.component.html

@@ -61,6 +61,7 @@
           <mix-dynamic-filter
             [size]="'m'"
             [columns]="vm.columns"
+            [filters]="vm.request.queries || []"
             (filtersChange)="onFilterChange($event)"
           ></mix-dynamic-filter>
 

apps/mix-cms/src/app/stores/database-data.store.ts

@@ -127,6 +127,7 @@ export class DatabaseDataStore extends ComponentStore<DatabaseDataState> {
       request: {
         pageIndex: 0,
         pageSize: 25,
+        queries: [],
       },
     }));
     this.loadData(this.get().request, dbName, true);

libs/mix-share/src/components/database-select/database-select.component.scss

@@ -45,7 +45,10 @@
       opacity: 1;
       background: var(--blue-500);
       color: var(--white-0);
-      opacity: 0.7;
+    }
+
+    &:hover {
+      opacity: 0.5;
     }
   }
 }

libs/mix-ui/src/button/button.component.scss

@@ -16,3 +16,7 @@ mix-button {
     line-height: 1;
   }
 }
+
+[tuiButton][data-size='m'] {
+  --tui-padding: 1rem;
+}

libs/mix-ui/src/dynamic-filter/dynamic-filter.component.html

@@ -1,11 +1,18 @@
 <mix-button type="outline" (click)="open(modalTpl)" [size]="size">
   <span class="mix-icon">filter_alt</span>&nbsp;
   <span class="text-500">Filter(s)</span>
+
+  <tui-badge
+    *ngIf="validFilterCount"
+    status="error"
+    class="ms-2"
+    [value]="validFilterCount"
+  ></tui-badge>
 </mix-button>
 
 <ng-template #modalTpl let-ref>
   <div class="filter-dialog">
-    <h3 class="mb-3">Filter Record(s)</h3>
+    <h4 class="mb-3">Filter Record(s)</h4>
 
     <ng-container
       *ngFor="let filter of filters; let i = index; trackByProp: 'fieldName'"

libs/mix-ui/src/dynamic-filter/dynamic-filter.component.ts

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import {
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   Input,
@@ -14,6 +15,7 @@ import { TrackByProp } from '@mixcore/share/pipe';
 import { MixButtonComponent } from '@mixcore/ui/button';
 import { DialogService } from '@ngneat/dialog';
 import { TippyDirective } from '@ngneat/helipopper';
+import { TuiBadgeModule } from '@taiga-ui/kit';
 import { FilterItemComponent } from './filter-item/filter-item.component';
 
 export interface DynamicFilterValue {
@@ -29,18 +31,21 @@ export interface DynamicFilterValue {
     TippyDirective,
     FilterItemComponent,
     TrackByProp,
+    TuiBadgeModule,
   ],
   templateUrl: './dynamic-filter.component.html',
   styleUrls: ['./dynamic-filter.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
 export class DynamicFilterComponent {
   public dialog = inject(DialogService);
+  public cdr = inject(ChangeDetectorRef);
 
   @Input() public size: 's' | 'm' = 's';
   @Input() columns: MixColumn[] = [];
   @Input() public filters: MixFilter[] = [];
   @Output() public filtersChange = new EventEmitter<MixFilter[]>();
+  public validFilterCount = 0;
 
   public open(tpl: TemplateRef<any>) {
     this.dialog.open(tpl, { resizable: true, draggable: true });
@@ -52,10 +57,13 @@ export class DynamicFilterComponent {
       value: null,
       compareOperator: 'Like',
     });
+
+    this.cdr.detectChanges();
   }
 
   public onFilterValueChange(value: MixFilter, index: number) {
     this.filters[index] = value;
     this.filtersChange.emit(this.filters);
+    this.validFilterCount = this.filters.filter((x) => x.value).length;
   }
 }

libs/mix-ui/src/dynamic-filter/filter-input/filter-input.component.ts

@@ -27,6 +27,7 @@ export class FilterInputComponent {
   public inputType: 'Text' | 'DatePicker' | 'Number' = 'Text';
   public control = new FormControl();
 
+  @Input() public value: string | Date | number | null = null;
   @Input() public set dataType(v: DataType) {
     this._dataType = v;
 
@@ -49,7 +50,11 @@ export class FilterInputComponent {
 
   constructor() {
     this.control.valueChanges
-      .pipe(takeUntilDestroyed(), debounceTime(300))
+      .pipe(takeUntilDestroyed(), debounceTime(200))
       .subscribe((v) => this.valueChange.emit(v));
   }
+
+  ngOnInit() {
+    this.control.patchValue(this.value, { emitEvent: false });
+  }
 }

libs/mix-ui/src/dynamic-filter/filter-item/filter-item.component.html

@@ -12,6 +12,7 @@
   ></mix-select>
 
   <mix-filter-input
+    [value]="filter.value"
     [dataType]="form.value.column!.dataType"
     (valueChange)="filterValueChange($event)"
   ></mix-filter-input>