From 1ff187b15f0833ce9e0245a52db4c87a23d5d435 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 2 Sep 2024 09:16:27 -0700
Subject: [PATCH] Refactor, remove styling

---
 src-ui/src/app/app.module.ts                         |  6 ++++--
 .../custom-fields-query-dropdown.component.html}     | 11 +++++++----
 .../custom-fields-query-dropdown.component.scss}     |  0
 .../custom-fields-query-dropdown.component.ts}       | 12 ++++++++----
 .../filter-editor/filter-editor.component.html       |  4 ++--
 .../filter-editor/filter-editor.component.spec.ts    |  4 ++--
 .../filter-editor/filter-editor.component.ts         |  2 +-
 7 files changed, 24 insertions(+), 15 deletions(-)
 rename src-ui/src/app/components/common/{custom-fields-lookup-dropdown/custom-fields-lookup-dropdown.component.html => custom-fields-query-dropdown/custom-fields-query-dropdown.component.html} (87%)
 rename src-ui/src/app/components/common/{custom-fields-lookup-dropdown/custom-fields-lookup-dropdown.component.scss => custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss} (100%)
 rename src-ui/src/app/components/common/{custom-fields-lookup-dropdown/custom-fields-lookup-dropdown.component.ts => custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts} (96%)

diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index 75b050767..737d1f9cf 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -108,7 +108,7 @@ import { FileDropComponent } from './components/file-drop/file-drop.component'
 import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component'
 import { CustomFieldEditDialogComponent } from './components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { CustomFieldsDropdownComponent } from './components/common/custom-fields-dropdown/custom-fields-dropdown.component'
-import { CustomFieldsLookupDropdownComponent } from './components/common/custom-fields-lookup-dropdown/custom-fields-lookup-dropdown.component'
+import { CustomFieldsQueryDropdownComponent } from './components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component'
 import { ProfileEditDialogComponent } from './components/common/profile-edit-dialog/profile-edit-dialog.component'
 import { PdfViewerModule } from 'ng2-pdf-viewer'
 import { DocumentLinkComponent } from './components/common/input/document-link/document-link.component'
@@ -228,6 +228,7 @@ import {
   uiRadios,
   upcScan,
   x,
+  xCircle,
   xLg,
 } from 'ngx-bootstrap-icons'
 
@@ -329,6 +330,7 @@ const icons = {
   uiRadios,
   upcScan,
   x,
+  xCircle,
   xLg,
 }
 
@@ -486,7 +488,7 @@ function initializeApp(settings: SettingsService) {
     CustomFieldsComponent,
     CustomFieldEditDialogComponent,
     CustomFieldsDropdownComponent,
-    CustomFieldsLookupDropdownComponent,
+    CustomFieldsQueryDropdownComponent,
     ProfileEditDialogComponent,
     DocumentLinkComponent,
     PreviewPopupComponent,
diff --git a/src-ui/src/app/components/common/custom-fields-lookup-dropdown/custom-fields-lookup-dropdown.component.html b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
similarity index 87%
rename from src-ui/src/app/components/common/custom-fields-lookup-dropdown/custom-fields-lookup-dropdown.component.html
rename to src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
index 4e591aa32..bf1a1bfd4 100644
--- a/src-ui/src/app/components/common/custom-fields-lookup-dropdown/custom-fields-lookup-dropdown.component.html
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
@@ -2,6 +2,9 @@
   <button class="btn btn-sm btn-outline-primary" id="dropdown_{{name}}" ngbDropdownToggle [disabled]="disabled">
     <i-bs name="{{icon}}"></i-bs>
     <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
+    @if (selectionModel.queries.length > 0) {
+      <pngx-clearable-badge [selected]="selectionModel.queries.length > 0" (cleared)="reset()"></pngx-clearable-badge>
+    }
   </button>
   <div class="dropdown-menu px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
     <div class="btn-group my-2 w-100">
@@ -23,8 +26,8 @@
               <ng-container *ngTemplateOutlet="queryExpression; context: { query: query }"></ng-container>
             }
           }
-          <button class="btn btn-link btn-sm pe-0" type="button" (click)="removeComponent(query)" [disabled]="disabled">
-            <i-bs name="x"></i-bs>
+          <button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeComponent(query)" [disabled]="disabled">
+            <i-bs name="x-circle"></i-bs>
           </button>
         </div>
       }
@@ -78,8 +81,8 @@
               <ng-container *ngTemplateOutlet="queryExpression; context: { query: subquery }"></ng-container>
             }
           }
-          <button class="btn btn-link btn-sm pe-0" type="button" (click)="removeComponent(subquery)" [disabled]="disabled">
-            <i-bs name="x"></i-bs>
+          <button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeComponent(subquery)" [disabled]="disabled">
+            <i-bs name="x-circle"></i-bs>
           </button>
         </div>
       }
diff --git a/src-ui/src/app/components/common/custom-fields-lookup-dropdown/custom-fields-lookup-dropdown.component.scss b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
similarity index 100%
rename from src-ui/src/app/components/common/custom-fields-lookup-dropdown/custom-fields-lookup-dropdown.component.scss
rename to src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
diff --git a/src-ui/src/app/components/common/custom-fields-lookup-dropdown/custom-fields-lookup-dropdown.component.ts b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts
similarity index 96%
rename from src-ui/src/app/components/common/custom-fields-lookup-dropdown/custom-fields-lookup-dropdown.component.ts
rename to src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts
index 570fe6150..f4b4c9fbe 100644
--- a/src-ui/src/app/components/common/custom-fields-lookup-dropdown/custom-fields-lookup-dropdown.component.ts
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts
@@ -196,11 +196,11 @@ export class CustomFieldQueriesModel {
 }
 
 @Component({
-  selector: 'pngx-custom-fields-lookup-dropdown',
-  templateUrl: './custom-fields-lookup-dropdown.component.html',
-  styleUrls: ['./custom-fields-lookup-dropdown.component.scss'],
+  selector: 'pngx-custom-fields-query-dropdown',
+  templateUrl: './custom-fields-query-dropdown.component.html',
+  styleUrls: ['./custom-fields-query-dropdown.component.scss'],
 })
-export class CustomFieldsLookupDropdownComponent {
+export class CustomFieldsQueryDropdownComponent {
   public CustomFieldQueryComponentType = CustomFieldQueryComponentType
 
   @Input()
@@ -281,6 +281,10 @@ export class CustomFieldsLookupDropdownComponent {
     this.selectionModel.removeComponent(component)
   }
 
+  public reset() {
+    this.selectionModel.clear()
+  }
+
   getOperatorsForField(field: CustomField): string[] {
     return ['exact', 'in', 'icontains', 'isnull', 'exists']
     // TODO: implement this
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
index 9308733ec..39e51a123 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
@@ -86,10 +86,10 @@
         }
 
         @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.CustomField) && customFields.length > 0) {
-          <pngx-custom-fields-lookup-dropdown class="flex-fill" title="Custom fields" icon="ui-radios" i18n-title
+          <pngx-custom-fields-query-dropdown class="flex-fill" title="Custom fields" icon="ui-radios" i18n-title
           [(selectionModel)]="customFieldQueriesModel"
           (selectionModelChange)="updateRules()"
-          ></pngx-custom-fields-lookup-dropdown>
+          ></pngx-custom-fields-query-dropdown>
         }
         <pngx-dates-dropdown
           title="Dates" i18n-title
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts
index 0e6da3d6b..ffae1ce3b 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts
@@ -95,7 +95,7 @@ import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service
 import { RouterModule } from '@angular/router'
 import { SearchService } from 'src/app/services/rest/search.service'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
-import { CustomFieldsLookupDropdownComponent } from '../../common/custom-fields-lookup-dropdown/custom-fields-lookup-dropdown.component'
+import { CustomFieldsQueryDropdownComponent } from '../../common/custom-fields-query-dropdown/custom-fields-query-dropdown.component'
 
 const tags: Tag[] = [
   {
@@ -182,7 +182,7 @@ describe('FilterEditorComponent', () => {
         ToggleableDropdownButtonComponent,
         DatesDropdownComponent,
         CustomDatePipe,
-        CustomFieldsLookupDropdownComponent,
+        CustomFieldsQueryDropdownComponent,
       ],
       imports: [
         RouterModule,
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
index 40d93fc9b..2099e9a87 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
@@ -97,7 +97,7 @@ import {
   CustomFieldQueriesModel,
   CustomFieldQueryAtom,
   CustomFieldQueryExpression,
-} from '../../common/custom-fields-lookup-dropdown/custom-fields-lookup-dropdown.component'
+} from '../../common/custom-fields-query-dropdown/custom-fields-query-dropdown.component'
 
 const TEXT_FILTER_TARGET_TITLE = 'title'
 const TEXT_FILTER_TARGET_TITLE_CONTENT = 'title-content'