From c223090180157660a04f1262e7b597d5f63f9346 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 9 Sep 2024 12:30:26 -0700
Subject: [PATCH] In operator

---
 .../custom-fields-query-dropdown.component.html          | 9 +++++++++
 .../custom-fields-query-dropdown.component.scss          | 7 +++++++
 .../custom-fields-query-dropdown.component.ts            | 8 ++++++++
 src-ui/src/app/data/custom-field-query.ts                | 2 +-
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
index 4fd2241f8..6c46275cc 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
@@ -81,6 +81,15 @@
       @case (CustomFieldQueryOperator.Contains) {
         <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true"></pngx-input-document-link>
       }
+      @case (CustomFieldQueryOperator.In) {
+        <ng-select
+          class="paperless-input-select rounded-end"
+          [items]="getSelectOptionsForField(atom.field)"
+          [(ngModel)]="atom.value"
+          [disabled]="disabled"
+          [multiple]="true"
+        ></ng-select>
+      }
       @default {
         <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="atom.value" [disabled]="disabled">
       }
diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
index 8c2fd9f73..706106e87 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
@@ -11,6 +11,13 @@
   height: 100% !important;
 }
 
+::ng-deep .rounded-end .ng-select-container {
+  border-top-right-radius: var(--bs-border-radius) !important;
+  border-bottom-right-radius: var(--bs-border-radius) !important;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
 ::ng-deep .ng-select {
   max-width: 100px;
   min-width: 35%;
diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts
index d5eacd1bf..dbad02e4c 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts
@@ -252,4 +252,12 @@ export class CustomFieldsQueryDropdownComponent {
       label: CUSTOM_FIELD_QUERY_OPERATOR_LABELS[operator],
     }))
   }
+
+  getSelectOptionsForField(fieldID: number): string[] {
+    const field = this.customFields.find((field) => field.id === fieldID)
+    if (field) {
+      return field.extra_data['select_options']
+    }
+    return []
+  }
 }
diff --git a/src-ui/src/app/data/custom-field-query.ts b/src-ui/src/app/data/custom-field-query.ts
index 5a9a98b4d..06c6ac3e4 100644
--- a/src-ui/src/app/data/custom-field-query.ts
+++ b/src-ui/src/app/data/custom-field-query.ts
@@ -116,7 +116,7 @@ export const CUSTOM_FIELD_QUERY_VALUE_TYPES_BY_OPERATOR = {
   [CustomFieldQueryOperator.GreaterThan]: 'number',
   [CustomFieldQueryOperator.LessThan]: 'number',
   [CustomFieldQueryOperator.Contains]: 'array',
-  // [CustomFieldQueryOperator.In]: 'array', // TODO: Implement
+  [CustomFieldQueryOperator.In]: 'array',
 }
 
 export const CUSTOM_FIELD_QUERY_MAX_DEPTH = 4