Refactor, remove styling

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,

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>
       }

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

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

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,

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'