Handle multiValue reference datatype in widget editor #147

arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue

@@ -5,7 +5,6 @@ import type {
 } from "@/arches_lingo/types";
 import ReferenceDatatypeViewer from "@/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeViewer.vue";
 import ReferenceDatatypeEditor from "@/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue";
-import ReferenceDatatypeListEditor from "@/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeListEditor.vue";
 import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
 
 defineProps<{
@@ -24,17 +23,11 @@ const onUpdate = (val: ControlledListItem[]) => {
         <div v-if="mode === VIEW">
             <ReferenceDatatypeViewer :value="value" />
         </div>
-        <div v-if="mode === EDIT && multiValue === false">
+        <div v-if="mode === EDIT">
             <ReferenceDatatypeEditor
                 :value="value"
                 :options="options"
-                @update="onUpdate"
-            />
-        </div>
-        <div v-if="mode === EDIT && multiValue === true">
-            <ReferenceDatatypeListEditor
-                :value="value"
-                :options="options"
+                :multi-value="multiValue"
                 @update="onUpdate"
             />
         </div>

arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, inject, ref } from "vue";
 import Select from "primevue/select";
+import MultiSelect from "primevue/multiselect";
 
 import { systemLanguageKey } from "@/arches_lingo/constants.ts";
 import { PREF_LABEL } from "@/arches_vue_utils/constants.ts";
@@ -13,6 +14,7 @@ const props = withDefaults(
     defineProps<{
         value?: ControlledListItem[];
         options?: ControlledListItem[];
+        multiValue?: boolean;
     }>(),
     {
         value: () => [],
@@ -21,15 +23,26 @@ const props = withDefaults(
 );
 
 const emit = defineEmits(["update"]);
-const uriRef = ref(props?.value?.[0]?.uri); // unwrap array n=1 && use uri as value
+const uriRef = ref(
+    props?.value.length === 1 && !props.multiValue
+        ? props?.value[0].uri
+        : props?.value.map((item) => item.uri),
+);
 const val = computed({
     get() {
         return uriRef.value;
     },
     set(newVal) {
-        uriRef.value = newVal; // update uri
-        const item = props.options?.find((item) => item.uri === newVal);
-        emit("update", item ? [item] : []); // emit the updated value as a list item
+        uriRef.value = newVal;
+        if (!props.multiValue) {
+            const item = props.options?.find((item) => item.uri === newVal);
+            emit("update", item ? [item] : []);
+        } else {
+            const items = props.options?.filter((item) =>
+                newVal.includes(item.uri),
+            );
+            emit("update", items ?? []);
+        }
     },
 });
 
@@ -46,6 +59,20 @@ const optionLabels = (item: ControlledListItem): string => {
 
 <template>
     <Select
+        v-model="val"
+        v-if:="!props.multiValue"
+        :show-toggle-all="!!options?.length"
+        :options
+        :option-label="optionLabels"
+        option-value="uri"
+        :pt="{
+            emptyMessage: { style: { fontFamily: 'sans-serif' } },
+            option: { style: { fontFamily: 'sans-serif' } },
+        }"
+        :placeholder="$gettext('Select References')"
+    />
+    <MultiSelect
+        v-if="props.multiValue"
         v-model="val"
         :show-toggle-all="!!options?.length"
         :options