From 1e39d4e3ffbf3d679ac73ee94fa31096410a4e46 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 9 Oct 2023 19:11:38 -0500
Subject: [PATCH] separate `FilterMenu` elements into separate components

---
 client/src/components/Common/FilterMenu.vue   | 287 ++++--------------
 .../components/Common/FilterMenuBoolean.vue   |  29 +-
 .../src/components/Common/FilterMenuInput.vue | 100 ++++++
 .../components/Common/FilterMenuMultiTags.vue |  41 +++
 .../components/Common/FilterMenuRanged.vue    | 104 +++++++
 5 files changed, 312 insertions(+), 249 deletions(-)
 create mode 100644 client/src/components/Common/FilterMenuInput.vue
 create mode 100644 client/src/components/Common/FilterMenuMultiTags.vue
 create mode 100644 client/src/components/Common/FilterMenuRanged.vue

diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index 90e5889f19d7..226c61c06a31 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { capitalize, kebabCase } from "lodash";
-import { computed, type Ref, ref, watch } from "vue";
+import { kebabCase } from "lodash";
+import { computed, ref, watch } from "vue";
 
 import type Filtering from "@/utils/filtering";
 import { type Alias, getOperatorForAlias } from "@/utils/filtering";
 
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import FilterMenuBoolean from "@/components/Common/FilterMenuBoolean.vue";
-import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+import FilterMenuInput from "@/components/Common/FilterMenuInput.vue";
+import FilterMenuMultiTags from "@/components/Common/FilterMenuMultiTags.vue";
+import FilterMenuRanged from "@/components/Common/FilterMenuRanged.vue";
 
 interface BackendFilterError {
     err_msg: string;
@@ -70,63 +72,9 @@ const filters = computed(() => Object.fromEntries(props.filterClass.getFiltersFo
 
 const identifier = kebabCase(props.name);
 
-// all filters that have help info
-const helpKeys = Object.keys(validFilters.value).filter((key) => validFilters.value[key]?.helpInfo !== undefined);
-const defaultHelpModalsVal = helpKeys.reduce((acc: { [k: string]: boolean }, item: string) => {
-    acc[item] = false;
-    return acc;
-}, {});
-/**
- * An object of booleans that are used to show/hide the help modals for
- * each filter that has them
- */
-const helpModals: Ref<{ [k: string]: boolean }> = ref({ ...defaultHelpModalsVal });
-
 // Boolean for showing the help modal for the whole filter menu (if provided)
 const showHelp = ref(false);
 
-/**
- * Reactively storing and getting all filters from validFilters which are `.type == Date`
- * and .type == 'MultiTags'
- * (This was done to make the datepickers and tags store values in the `filters` object)
- */
-const dateFilters: Ref<{ [key: string]: string }> = ref({});
-const dateKeys = Object.keys(validFilters.value).filter((key) => validFilters.value[key]?.type == Date);
-dateKeys.forEach((key: string) => {
-    if (validFilters.value[key]?.isRangeInput) {
-        dateKeys.push(key + "_lt");
-        dateKeys.push(key + "_gt");
-    }
-});
-const multiTagFilters: Ref<{ [key: string]: Ref<string[]> }> = ref({});
-const multiTagKeys = Object.keys(validFilters.value).filter((key) => validFilters.value[key]?.type == "MultiTags");
-multiTagKeys.forEach((key: string) => {
-    if (filters.value[key] !== undefined) {
-        multiTagFilters.value[key] = ref(filters.value[key] as string[]);
-    } else {
-        multiTagFilters.value[key] = ref([]);
-    }
-});
-watch(
-    () => filters.value,
-    (newFilters: { [k: string]: any }) => {
-        dateKeys.forEach((key: string) => {
-            if (newFilters[key]) {
-                dateFilters.value[key] = newFilters[key] as string;
-            } else {
-                delete dateFilters.value[key];
-            }
-        });
-        multiTagKeys.forEach((key: string) => {
-            if (newFilters[key]) {
-                (multiTagFilters.value[key] as Ref<string[]>).value = newFilters[key];
-            } else {
-                (multiTagFilters.value[key] as Ref<string[]>).value = [];
-            }
-        });
-    }
-);
-
 const formattedSearchError = computed(() => {
     if (props.searchError) {
         const { column, col, operation, op, value, val, err_msg, ValueError } = props.searchError;
@@ -145,13 +93,6 @@ const formattedSearchError = computed(() => {
     }
 });
 
-function hasError(field: string) {
-    if (formattedSearchError.value && formattedSearchError.value.index == field) {
-        return formattedSearchError.value.typeError || formattedSearchError.value.msg;
-    }
-    return "";
-}
-
 /** Explicitly sets a filter: value
  * (also closes help modal for this filter if it exists)
  * @param filter the filter to set
@@ -159,18 +100,9 @@ function hasError(field: string) {
  */
 function onOption(filter: string, value: any) {
     filters.value[filter] = value;
-    if (helpModals.value[filter]) {
-        helpModals.value[filter] = false;
-    }
 }
 
 function onSearch() {
-    Object.keys(dateFilters.value).forEach((key) => {
-        onOption(key, dateFilters.value[key]);
-    });
-    Object.keys(multiTagFilters.value).forEach((key) => {
-        onOption(key, (multiTagFilters.value[key] as Ref<string[]>).value);
-    });
     const newFilterText = props.filterClass.getFilterText(filters.value);
     const newBackendFilter = props.filterClass.getFilterText(filters.value, true);
     if (props.menuType !== "linked") {
@@ -181,10 +113,6 @@ function onSearch() {
     }
 }
 
-function onTags(filter: string, tags: string[]) {
-    (multiTagFilters.value[filter] as Ref<string[]>).value = tags;
-}
-
 function onToggle() {
     emit("update:show-advanced", !props.showAdvanced);
 }
@@ -193,11 +121,14 @@ function updateFilterText(newFilterText: string) {
     emit("update:filter-text", newFilterText);
 }
 
-// as the filterText changes, emit a backend-filter that can be used as a query
+// as the filterText changes, emit a backend-filter that can be used as a backend query
 watch(
     () => props.filterText,
     (newFilterText: string) => {
-        const defaultBackendFilter = props.filterClass.getFilterText(props.filterClass.defaultFilters, true);
+        const defaultBackendFilter = props.filterClass.getFilterText(
+            props.filterClass.defaultFilters,
+            true
+        );
         const currentBackendFilter = props.filterClass.getFilterText(filters.value, true);
 
         const backendFilter =
@@ -242,168 +173,52 @@ watch(
         <div
             v-if="props.menuType == 'standalone' || props.showAdvanced"
             class="mt-2"
-            data-description="advanced filters"
-            @keyup.enter="onSearch"
-            @keyup.esc="onToggle">
+            data-description="advanced filters">
             <div v-for="filter in Object.keys(validFilters)" :key="filter">
                 <span v-if="validFilters[filter]?.menuItem">
-                    <!-- is a Boolean filter -->
-                    <span v-if="validFilters[filter]?.type == Boolean">
-                        <small>{{ validFilters[filter]?.placeholder }}:</small>
-                        <FilterMenuBoolean
-                            :name="filter"
-                            :filter="validFilters[filter]"
-                            :settings="filters"
-                            @change="onOption" />
-                    </span>
-
-                    <!-- is a Ranged filter -->
-                    <span v-else-if="validFilters[filter]?.isRangeInput" class="m-0">
-                        <small>Filter by {{ validFilters[filter]?.placeholder }}:</small>
-                        <b-input-group>
-                            <!---------------------------- GREATER THAN ---------------------------->
-                            <!-- is type: other than Date -->
-                            <b-form-input
-                                v-if="validFilters[filter]?.type != Date"
-                                :id="`${identifier}-advanced-filter-${filter}_gt`"
-                                v-model="filters[`${filter}_gt`]"
-                                v-b-tooltip.focus.v-danger="hasError(`${filter}_gt`)"
-                                size="sm"
-                                :state="hasError(`${filter}_gt`) ? false : null"
-                                :placeholder="`${validFilters[filter]?.placeholder} greater`" />
-                            <!-- is type: Date -->
-                            <b-form-input
-                                v-else-if="validFilters[filter]?.type == Date"
-                                :id="`${identifier}-advanced-filter-${filter}_gt`"
-                                v-model="dateFilters[`${filter}_gt`]"
-                                v-b-tooltip.focus.v-danger="hasError(`${filter}_gt`)"
-                                size="sm"
-                                :state="hasError(`${filter}_gt`) ? false : null"
-                                :placeholder="`${validFilters[filter]?.placeholder} after`" />
-                            <b-input-group-append v-if="validFilters[filter]?.type == Date">
-                                <b-form-datepicker
-                                    v-model="dateFilters[`${filter}_gt`]"
-                                    reset-button
-                                    button-only
-                                    size="sm" />
-                            </b-input-group-append>
-                            <!--------------------------------------------------------------------->
-
-                            <!---------------------------- LESSER THAN ---------------------------->
-                            <!-- is type: other than Date -->
-                            <b-form-input
-                                v-if="validFilters[filter]?.type != Date"
-                                :id="`${identifier}-advanced-filter-${filter}_lt`"
-                                v-model="filters[`${filter}_lt`]"
-                                v-b-tooltip.focus.v-danger="hasError(`${filter}_lt`)"
-                                size="sm"
-                                :state="hasError(`${filter}_lt`) ? false : null"
-                                :placeholder="`${validFilters[filter]?.placeholder} lower`" />
-                            <!-- is type: Date -->
-                            <b-form-input
-                                v-else-if="validFilters[filter]?.type == Date"
-                                :id="`${identifier}-advanced-filter-${filter}_lt`"
-                                v-model="dateFilters[`${filter}_lt`]"
-                                v-b-tooltip.focus.v-danger="hasError(`${filter}_lt`)"
-                                size="sm"
-                                :state="hasError(`${filter}_lt`) ? false : null"
-                                :placeholder="`${validFilters[filter]?.placeholder} before`" />
-                            <b-input-group-append v-if="validFilters[filter]?.type == Date">
-                                <b-form-datepicker
-                                    v-model="dateFilters[`${filter}_lt`]"
-                                    reset-button
-                                    button-only
-                                    size="sm" />
-                            </b-input-group-append>
-                            <!--------------------------------------------------------------------->
-                        </b-input-group>
-                    </span>
-
-                    <!-- is a MultiTags filter -->
-                    <span v-else-if="validFilters[filter]?.type == 'MultiTags'">
-                        <small>Filter by {{ validFilters[filter]?.placeholder }}:</small>
-                        <b-input-group :id="`${identifier}-advanced-filter-${filter}`">
-                            <StatelessTags
-                                :value="multiTagFilters[filter]?.value"
-                                :placeholder="`any ${validFilters[filter]?.placeholder}`"
-                                @input="(tags) => onTags(filter, tags)" />
-                        </b-input-group>
-                    </span>
-
-                    <!-- is any other non-Ranged/non-Boolean filter -->
-                    <span v-else>
-                        <small>Filter by {{ validFilters[filter]?.placeholder }}:</small>
-                        <b-input-group>
-                            <!-- has a datalist -->
-                            <b-form-input
-                                v-if="validFilters[filter]?.datalist"
-                                :id="`${identifier}-advanced-filter-${filter}`"
-                                v-model="filters[filter]"
-                                v-b-tooltip.focus.v-danger="hasError(filter)"
-                                size="sm"
-                                :state="hasError(filter) ? false : null"
-                                :placeholder="`any ${validFilters[filter]?.placeholder}`"
-                                list="selectList" />
-                            <b-form-datalist
-                                v-if="validFilters[filter]?.datalist"
-                                id="selectList"
-                                :options="validFilters[filter]?.datalist"></b-form-datalist>
-                            <!-- is type: Date -->
-                            <b-form-input
-                                v-else-if="validFilters[filter]?.type == Date"
-                                :id="`${identifier}-advanced-filter-${filter}`"
-                                v-model="dateFilters[filter]"
-                                v-b-tooltip.focus.v-danger="hasError(filter)"
-                                size="sm"
-                                :state="hasError(filter) ? false : null"
-                                :placeholder="`any ${validFilters[filter]?.placeholder}`" />
-                            <!-- is type: other than Date -->
-                            <b-form-input
-                                v-else
-                                :id="`${identifier}-advanced-filter-${filter}`"
-                                v-model="filters[filter]"
-                                v-b-tooltip.focus.v-danger="hasError(filter)"
-                                size="sm"
-                                :state="hasError(filter) ? false : null"
-                                :placeholder="`any ${validFilters[filter]?.placeholder}`" />
-                            <!-- append Help Modal for filter if included or/and datepciker if type: Date -->
-                            <b-input-group-append>
-                                <b-button
-                                    v-if="validFilters[filter]?.helpInfo"
-                                    :title="`${capitalize(validFilters[filter]?.placeholder)} Help`"
-                                    size="sm"
-                                    @click="helpModals[filter] = true">
-                                    <icon icon="question" />
-                                </b-button>
-                                <b-form-datepicker
-                                    v-if="validFilters[filter]?.type == Date"
-                                    v-model="dateFilters[filter]"
-                                    reset-button
-                                    button-only
-                                    size="sm" />
-                            </b-input-group-append>
-                        </b-input-group>
-                    </span>
-
-                    <!-- if a filter has help component, place it within a modal -->
-                    <span v-if="validFilters[filter]?.helpInfo">
-                        <b-modal
-                            v-model="helpModals[filter]"
-                            :title="`${capitalize(validFilters[filter]?.placeholder)} Help`"
-                            ok-only>
-                            <component
-                                :is="validFilters[filter]?.helpInfo"
-                                v-if="typeof validFilters[filter]?.helpInfo == 'object'"
-                                @set-filter="onOption" />
-                            <div v-else-if="typeof validFilters[filter]?.helpInfo == 'string'">
-                                <p>{{ validFilters[filter]?.helpInfo }}</p>
-                            </div>
-                        </b-modal>
-                    </span>
+                    <FilterMenuBoolean
+                        v-if="validFilters[filter]?.type == Boolean"
+                        :name="filter"
+                        :filter="validFilters[filter]"
+                        :filters="filters"
+                        @change="onOption"
+                        @on-enter="onSearch"
+                        @on-esc="onToggle" />
+
+                    <FilterMenuRanged
+                        v-else-if="validFilters[filter]?.isRangeInput"
+                        class="m-0"
+                        :name="filter"
+                        :filter="validFilters[filter]"
+                        :filters="filters"
+                        :error="formattedSearchError"
+                        :identifier="identifier"
+                        @change="onOption"
+                        @on-enter="onSearch"
+                        @on-esc="onToggle" />
+
+                    <FilterMenuMultiTags
+                        v-else-if="validFilters[filter]?.type == 'MultiTags'"
+                        :name="filter"
+                        :filter="validFilters[filter]"
+                        :filters="filters"
+                        :identifier="identifier"
+                        @change="onOption" />
+
+                    <FilterMenuInput
+                        v-else
+                        :name="filter"
+                        :filter="validFilters[filter]"
+                        :filters="filters"
+                        :error="formattedSearchError"
+                        :identifier="identifier"
+                        @change="onOption"
+                        @on-enter="onSearch"
+                        @on-esc="onToggle" />
                 </span>
             </div>
 
-            <!-- Perform search or cancel out (or open help modal for Menu if exists) -->
+            <!-- Perform search or cancel out (or open help modal for whole Menu if exists) -->
             <div class="mt-3">
                 <b-button
                     :id="`${identifier}-advanced-filter-submit`"
diff --git a/client/src/components/Common/FilterMenuBoolean.vue b/client/src/components/Common/FilterMenuBoolean.vue
index 7990159cbf66..8c54665d8a9b 100644
--- a/client/src/components/Common/FilterMenuBoolean.vue
+++ b/client/src/components/Common/FilterMenuBoolean.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-/**
- * REFACTOR CODE HERE, `ANY` FILTER SHOULD BE SET TO UNDEFINED ...
- */
 import { computed } from "vue";
 
 const props = defineProps({
     filter: { type: Object, required: true },
     name: { type: String, required: true },
-    settings: { type: Object, required: true },
+    filters: { type: Object, required: true },
 });
 
 const boolType = computed(() => props.filter.boolType || "default");
@@ -26,11 +23,13 @@ const options =
 
 const emit = defineEmits<{
     (e: "change", name: string, value: boolean | string | undefined): void;
+    (e: "on-enter"): void;
+    (e: "on-esc"): void;
 }>();
 
 const value = computed({
     get: () => {
-        const value = props.settings[props.name];
+        const value = props.filters[props.name];
         return value !== undefined ? value : "any";
     },
     set: (newVal: boolean | string | undefined) => {
@@ -41,12 +40,16 @@ const value = computed({
 </script>
 
 <template>
-    <b-form-group class="m-0">
-        <b-form-radio-group
-            v-model="value"
-            :options="options"
-            size="sm"
-            buttons
-            :data-description="`filter ${props.name}`" />
-    </b-form-group>
+    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
+    <div @keyup.enter="emit('on-enter')" @keyup.esc="emit('on-esc')">
+        <small>{{ props.filter.placeholder }}:</small>
+        <b-form-group class="m-0">
+            <b-form-radio-group
+                v-model="value"
+                :options="options"
+                size="sm"
+                buttons
+                :data-description="`filter ${props.name}`" />
+        </b-form-group>
+    </div>
 </template>
diff --git a/client/src/components/Common/FilterMenuInput.vue b/client/src/components/Common/FilterMenuInput.vue
new file mode 100644
index 000000000000..265997f5a2d6
--- /dev/null
+++ b/client/src/components/Common/FilterMenuInput.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { capitalize } from "lodash";
+import { computed, type PropType, ref, watch } from 'vue';
+
+import { ValidFilter } from '@/utils/filtering';
+
+const props = defineProps({
+    name: { type: String, required: true },
+    filter: { type: Object as PropType<ValidFilter<any>>, required: true },
+    filters: { type: Object, required: true },
+    error: { type: Object, default: null },
+    identifier: { type: String, required: true },
+});
+
+const emit = defineEmits<{
+    (e: "change", name: string, value: string): void;
+    (e: "on-enter"): void;
+    (e: "on-esc"): void;
+}>();
+
+const propValue = computed(() => props.filters[props.name]);
+
+const localValue = ref(propValue.value);
+
+const helpToggle = ref(false);
+const modalTitle = `${capitalize(props.filter.placeholder)} Help`;
+
+watch(() => localValue.value, (newFilter: string) => {
+    emit("change", props.name, newFilter);
+});
+watch(() => propValue.value, (newFilter: string) => {
+    localValue.value = newFilter;
+});
+
+function hasError(field: string) {
+    if (props.error && props.error.index == field) {
+        return props.error.typeError || props.error.msg;
+    }
+    return "";
+}
+
+function onHelp(_: string, value: string) {
+    helpToggle.value = false;
+    localValue.value = value;
+}
+</script>
+
+<template>
+    <div>
+        <small>Filter by {{ props.filter.placeholder }}:</small>
+        <b-input-group>
+            <b-form-input
+                :id="`${identifier}-advanced-filter-${props.name}`"
+                ref="filterMenuInput"
+                v-model="localValue"
+                v-b-tooltip.focus.v-danger="hasError(props.name)"
+                size="sm"
+                :state="hasError(props.name) ? false : null"
+                :placeholder="`any ${props.filter.placeholder}`"
+                :list="props.filter.datalist ? `${identifier}-${props.name}-selectList` : null"
+                @keyup.enter="emit('on-enter')"
+                @keyup.esc="emit('on-esc')" />
+            <b-form-datalist
+                v-if="props.filter.datalist"
+                :id="`${identifier}-${props.name}-selectList`"
+                :options="props.filter.datalist"></b-form-datalist>
+            <!-- append Help Modal for filter if included or/and datepciker if type: Date -->
+            <b-input-group-append>
+                <b-button
+                    v-if="props.filter.helpInfo"
+                    :title="modalTitle"
+                    size="sm"
+                    @click="helpToggle = true">
+                    <icon icon="question" />
+                </b-button>
+                <b-form-datepicker
+                    v-if="props.filter.type == Date"
+                    v-model="localValue"
+                    reset-button
+                    button-only
+                    size="sm" />
+            </b-input-group-append>
+        </b-input-group>
+        <!-- if a filter has help component, place it within a modal -->
+        <span v-if="props.filter.helpInfo">
+            <b-modal
+                v-model="helpToggle"
+                :title="modalTitle"
+                ok-only>
+                <component
+                    :is="props.filter.helpInfo"
+                    v-if="typeof props.filter.helpInfo == 'object'"
+                    @set-filter="onHelp" />
+                <div v-else-if="typeof props.filter.helpInfo == 'string'">
+                    <p>{{ props.filter.helpInfo }}</p>
+                </div>
+            </b-modal>
+        </span>
+    </div>
+</template>
diff --git a/client/src/components/Common/FilterMenuMultiTags.vue b/client/src/components/Common/FilterMenuMultiTags.vue
new file mode 100644
index 000000000000..923534f5c837
--- /dev/null
+++ b/client/src/components/Common/FilterMenuMultiTags.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed, type PropType, ref, watch } from 'vue';
+
+import { ValidFilter } from '@/utils/filtering';
+
+import StatelessTags from "../Tags/StatelessTags.vue";
+
+const props = defineProps({
+    name: { type: String, required: true },
+    filter: { type: Object as PropType<ValidFilter<any>>, required: true },
+    filters: { type: Object, required: true },
+    identifier: { type: String, required: true },
+});
+
+const emit = defineEmits<{
+    (e: "change", name: string, value: string): void;
+}>();
+
+const propValue = computed(() => props.filters[props.name]);
+
+const localValue = ref(propValue.value);
+
+watch(() => localValue.value, (newFilter: string) => {
+    emit("change", props.name, newFilter);
+});
+watch(() => propValue.value, (newFilter: string) => {
+    localValue.value = newFilter;
+});
+</script>
+
+<template>
+    <div>
+        <small>Filter by {{ props.filter.placeholder }}:</small>
+        <b-input-group :id="`${identifier}-advanced-filter-${props.name}`">
+            <StatelessTags
+                :value="localValue"
+                :placeholder="`any ${props.filter.placeholder}`"
+                @input="(tags) => localValue = tags" />
+        </b-input-group>
+    </div>
+</template>
diff --git a/client/src/components/Common/FilterMenuRanged.vue b/client/src/components/Common/FilterMenuRanged.vue
new file mode 100644
index 000000000000..1860ee3599a4
--- /dev/null
+++ b/client/src/components/Common/FilterMenuRanged.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed, type PropType, ref, watch } from 'vue';
+
+import { ValidFilter } from '@/utils/filtering';
+
+const props = defineProps({
+    name: { type: String, required: true },
+    filter: { type: Object as PropType<ValidFilter<any>>, required: true },
+    filters: { type: Object, required: true },
+    error: { type: Object, default: null },
+    identifier: { type: String, required: true },
+});
+
+const emit = defineEmits<{
+    (e: "change", name: string, value: string): void;
+    (e: "on-enter"): void;
+    (e: "on-esc"): void;
+}>();
+
+const localNameLt = computed(() => `${props.name}_lt`);
+const localNameGt = computed(() => `${props.name}_gt`);
+const valueLt = computed(() => props.filters[localNameLt.value]);
+const valueGt = computed(() => props.filters[localNameGt.value]);
+
+const localValueGt = ref(valueGt.value);
+const localValueLt = ref(valueLt.value);
+
+watch(() => localValueGt.value, (newFilter: string) => {
+    emit("change", localNameGt.value, newFilter);
+});
+watch(() => localValueLt.value, (newFilter: string) => {
+    emit("change", localNameLt.value, newFilter);
+});
+watch(() => valueGt.value, (newFilter: string) => {
+    localValueGt.value = newFilter;
+});
+watch(() => valueLt.value, (newFilter: string) => {
+    localValueLt.value = newFilter;
+});
+
+const isDateType = computed(() => props.filter.type == Date);
+
+function hasError(field: string) {
+    if (props.error && props.error.index == field) {
+        return props.error.typeError || props.error.msg;
+    }
+    return "";
+}
+
+function localPlaceholder(comp: 'gt' | 'lt') {
+    if (comp == 'gt') {
+        const field = isDateType.value ? 'after' : 'greater';
+        return `${props.filter.placeholder} ${field}`;
+    } else {
+        const field = isDateType.value ? 'before' : 'lower';
+        return `${props.filter.placeholder} ${field}`;
+    }
+}
+</script>
+
+<template>
+    <div>
+        <small>Filter by {{ props.filter.placeholder }}:</small>
+        <b-input-group>
+            <!---------------------------- GREATER THAN ---------------------------->
+            <b-form-input
+                :id="`${props.identifier}-advanced-filter-${localNameGt}`"
+                v-model="localValueGt"
+                v-b-tooltip.focus.v-danger="hasError(localNameGt)"
+                size="sm"
+                :state="hasError(localNameGt) ? false : null"
+                :placeholder="localPlaceholder('gt')"
+                @keyup.enter="emit('on-enter')"
+                @keyup.esc="emit('on-esc')" />
+            <b-input-group-append v-if="isDateType">
+                <b-form-datepicker
+                    v-model="localValueGt"
+                    reset-button
+                    button-only
+                    size="sm" />
+            </b-input-group-append>
+            <!--------------------------------------------------------------------->
+
+            <!---------------------------- LESSER THAN ---------------------------->
+            <b-form-input
+                :id="`${props.identifier}-advanced-filter-${localNameLt}`"
+                v-model="localValueLt"
+                v-b-tooltip.focus.v-danger="hasError(localNameLt)"
+                size="sm"
+                :state="hasError(localNameLt) ? false : null"
+                :placeholder="localPlaceholder('lt')"
+                @keyup.enter="emit('on-enter')"
+                @keyup.esc="emit('on-esc')" />
+            <b-input-group-append v-if="isDateType">
+                <b-form-datepicker
+                    v-model="localValueLt"
+                    reset-button
+                    button-only
+                    size="sm" />
+            </b-input-group-append>
+            <!--------------------------------------------------------------------->
+        </b-input-group>
+    </div>
+</template>