remove FilterMenuQuotaSource and use FilterMenuDropdown instead

client/src/components/Common/FilterMenu.vue

@@ -15,7 +15,6 @@ import FilterMenuDropdown from "@/components/Common/FilterMenuDropdown.vue";
 import FilterMenuInput from "@/components/Common/FilterMenuInput.vue";
 import FilterMenuMultiTags from "@/components/Common/FilterMenuMultiTags.vue";
 import FilterMenuObjectStore from "@/components/Common/FilterMenuObjectStore.vue";
-import FilterMenuQuotaSource from "@/components/Common/FilterMenuQuotaSource.vue";
 import FilterMenuRanged from "@/components/Common/FilterMenuRanged.vue";
 
 library.add(faAngleDoubleUp, faQuestion, faSearch);
@@ -260,15 +259,11 @@ function updateFilterText(newFilterText: string) {
                             :filter="getValidFilter(filter)"
                             :filters="filters"
                             @change="onOption" />
-                        <FilterMenuQuotaSource
-                            v-else-if="validFilters[filter]?.type == 'QuotaSource'"
-                            :name="filter"
-                            :filter="getValidFilter(filter)"
-                            :filters="filters"
-                            :identifier="identifier"
-                            @change="onOption" />
                         <FilterMenuDropdown
-                            v-else-if="validFilters[filter]?.type == 'Dropdown'"
+                            v-else-if="
+                                validFilters[filter]?.type == 'Dropdown' || validFilters[filter]?.type == 'QuotaSource'
+                            "
+                            :type="validFilters[filter]?.type"
                             :name="filter"
                             :error="errorForField(filter) || undefined"
                             :filter="getValidFilter(filter)"

client/src/components/Common/FilterMenuDropdown.vue

@@ -4,34 +4,57 @@ import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BDropdown, BDropdownItem, BInputGroup, BInputGroupAppend, BModal } from "bootstrap-vue";
 import { capitalize } from "lodash";
-import { computed, ref, watch } from "vue";
+import { computed, onMounted, ref, type UnwrapRef, watch } from "vue";
 
-import { type ValidFilter } from "@/utils/filtering";
+import { QuotaUsage } from "@/components/User/DiskUsage/Quota/model";
+import { type FilterType, type ValidFilter } from "@/utils/filtering";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+import { fetch } from "../User/DiskUsage/Quota/services";
+
+import QuotaUsageBar from "@/components/User/DiskUsage/Quota/QuotaUsageBar.vue";
 
 library.add(faQuestion);
 
-type FilterType = string | boolean | undefined;
+type QuotaUsageUnwrapped = UnwrapRef<QuotaUsage>;
+
+type FilterValue = QuotaUsageUnwrapped | string | boolean | undefined;
+
 type DatalistItem = { value: string; text: string };
 
 interface Props {
+    type?: FilterType;
     name: string;
     error?: string;
     filter: ValidFilter<any>;
     filters: {
-        [k: string]: FilterType;
+        [k: string]: FilterValue;
     };
     identifier: string;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    (e: "change", name: string, value: FilterType): void;
+    (e: "change", name: string, value: FilterValue): void;
 }>();
 
-const propValue = computed<FilterType>(() => props.filters[props.name]);
+const propValue = computed<FilterValue>(() => props.filters[props.name]);
 
-const localValue = ref<FilterType>(propValue.value);
+const localValue = ref<FilterValue>(propValue.value);
+
+watch(
+    () => localValue.value,
+    () => {
+        emit("change", props.name, localValue.value);
+    }
+);
+watch(
+    () => propValue.value,
+    () => {
+        localValue.value = propValue.value;
+    }
+);
 
 // datalist refs
 const datalist = computed<(DatalistItem[] | string[]) | undefined>(() => props.filter.datalist);
@@ -56,20 +79,39 @@ function onHelp(_: string, value: string) {
     localValue.value = value;
 }
 
-watch(
-    () => localValue.value,
-    () => {
-        emit("change", props.name, localValue.value);
+// Quota Source refs and operations
+const quotaUsages = ref<QuotaUsage[]>([] as QuotaUsage[]);
+const errorMessage = ref<string>();
+async function loadQuotaUsages() {
+    try {
+        quotaUsages.value = await fetch();
+
+        // if the propValue is a string, find the corresponding QuotaUsage object and update the localValue
+        if (propValue.value && typeof propValue.value === "string") {
+            localValue.value = quotaUsages.value.find(
+                (quotaUsage) => props.filter.handler.converter!(quotaUsage) === propValue.value
+            );
+        }
+    } catch (e) {
+        errorMessage.value = errorMessageAsString(e);
     }
-);
-watch(
-    () => propValue.value,
-    () => {
-        localValue.value = propValue.value;
+}
+const hasMultipleQuotaSources = computed<boolean>(() => {
+    return !!(quotaUsages.value && quotaUsages.value.length > 1);
+});
+onMounted(async () => {
+    if (props.type === "QuotaSource") {
+        await loadQuotaUsages();
     }
-);
+});
+function isQuotaUsageVal(value: FilterValue): value is QuotaUsageUnwrapped {
+    return !!(value && value instanceof Object && "rawSourceLabel" in value);
+}
 
 const dropDownText = computed<string>(() => {
+    if (props.type === "QuotaSource" && isQuotaUsageVal(localValue.value)) {
+        return localValue.value.sourceLabel;
+    }
     if (localValue.value) {
         const stringMatch = stringDatalist.value.find((item) => item === localValue.value);
         const objectMatch = objectDatalist.value.find((item) => item.value === localValue.value);
@@ -82,13 +124,13 @@ const dropDownText = computed<string>(() => {
     return "(any)";
 });
 
-function setValue(val: string | undefined) {
+function setValue(val: string | QuotaUsage | undefined) {
     localValue.value = val;
 }
 </script>
 
 <template>
-    <div v-if="datalist">
+    <div v-if="datalist || hasMultipleQuotaSources">
         <small>Filter by {{ props.filter.placeholder }}:</small>
         <BInputGroup :id="`${identifier}-advanced-filter-${props.name}`" class="flex-nowrap">
             <BDropdown
@@ -119,6 +161,20 @@ function setValue(val: string | undefined) {
                         {{ listItem.text }}
                     </BDropdownItem>
                 </span>
+                <span v-else-if="props.type === 'QuotaSource'">
+                    <BDropdownItem
+                        v-for="quotaUsage in quotaUsages"
+                        :key="quotaUsage.id"
+                        href="#"
+                        @click="setValue(quotaUsage)">
+                        {{ quotaUsage.sourceLabel }}
+                        <QuotaUsageBar
+                            :quota-usage="quotaUsage"
+                            class="quota-usage-bar"
+                            :compact="true"
+                            :embedded="true" />
+                    </BDropdownItem>
+                </span>
             </BDropdown>
             <BInputGroupAppend>
                 <!-- append Help Modal toggle for filter if included -->

client/src/utils/filtering.ts

@@ -40,7 +40,7 @@ export type ErrorType = {
 type OperatorForAlias = typeof operatorForAlias;
 export type Alias = keyof OperatorForAlias;
 type Operator = OperatorForAlias[Alias];
-type FilterType =
+export type FilterType =
     | typeof String
     | typeof Number
     | typeof Boolean