From 8a88428de0556db48acc99a836c26eeac6191b4e Mon Sep 17 00:00:00 2001
From: Johnathan Clementi <johnathan.clementi1@gmail.com>
Date: Thu, 2 Jan 2025 11:33:21 -0500
Subject: [PATCH] Handle multiValue reference datatype in widget editor #147

---
 .../components/generic/ReferenceDatatype.vue  | 11 +----
 .../ReferenceDatatypeEditor.vue               | 35 ++++++++++++--
 .../ReferenceDatatypeListEditor.vue           | 46 -------------------
 3 files changed, 33 insertions(+), 59 deletions(-)
 delete mode 100644 arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeListEditor.vue

diff --git a/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue b/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue
index 37ab76b3..0ea42ce9 100644
--- a/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue
+++ b/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>
diff --git a/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue b/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue
index 2ad48a33..66c55b75 100644
--- a/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue
+++ b/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
diff --git a/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeListEditor.vue b/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeListEditor.vue
deleted file mode 100644
index c9e0228e..00000000
--- a/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeListEditor.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { computed, toRef } from "vue";
-import MultiSelect from "primevue/multiselect";
-// import { getItemLabel } from "@/arches_vue_utils/utils.ts";
-
-import type { ControlledListItem } from "@/arches_lingo/types";
-
-const props = withDefaults(
-    defineProps<{
-        val?: ControlledListItem;
-        options?: ControlledListItem[];
-    }>(),
-    {
-        options: () => [],
-    },
-);
-
-const emit = defineEmits(["update"]);
-
-const valRef = toRef(props, "val");
-
-const value = computed({
-    get() {
-        return valRef.value;
-    },
-    set(value) {
-        emit("update", value);
-    },
-});
-// const getOptionLabels = (option: ControlledListItem) => {
-//     return getItemLabel(option);
-// };
-// :option-label="getOptionLabels"
-</script>
-<template>
-    <MultiSelect
-        v-model="value"
-        :show-toggle-all="!!options?.length"
-        :options
-        :pt="{
-            emptyMessage: { style: { fontFamily: 'sans-serif' } },
-            option: { style: { fontFamily: 'sans-serif' } },
-        }"
-        :placeholder="$gettext('Select References')"
-    />
-</template>