Get option labels to populate dropdown & align listitem type with til…

…e config #146
archesproject · Dec 31, 2024 · b194a4c · b194a4c
1 parent 9d53b00
commit b194a4c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 22 deletions.
diff --git a/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue b/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
@@ -33,11 +33,8 @@ async function getOptions(listId: string): Promise<ControlledListItem[]> {
     const parsed = await fetchControlledListOptions(listId);
     const options = parsed.items.map(
         (item: ControlledListItemResult): ControlledListItem => ({
-            item_id: item.id,
             list_id: item.list_id,
             uri: item.uri,
-            sortorder: item.sortorder,
-            guide: item.guide,
             labels: item.values,
         }),
     );

diff --git a/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue b/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue
@@ -10,7 +10,7 @@ import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
 
 defineProps<{
     mode?: DataComponentMode;
-    value?: ControlledListItem | ControlledListItem[];
+    value?: ControlledListItem[];
     multiValue?: boolean;
     options?: ControlledListItem[];
 }>();

diff --git a/..._lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue b/..._lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue
@@ -1,42 +1,57 @@
 <script setup lang="ts">
-// import { computed, inject, toRef } from "vue";
-import { computed, toRef } from "vue";
+import { computed, inject, toRef } from "vue";
 import Select from "primevue/select";
-// import { getItemLabel } from "@/arches_vue_utils/utils.ts";
-// import { systemLanguageKey } from "@/arches_references/constants.ts";
 
-import type { ControlledListItem } from "@/arches_lingo/types";
-// import type { Language } from "@/arches_vue_utils/types.ts";
+import { systemLanguageKey } from "@/arches_lingo/constants.ts";
+import { PREF_LABEL } from "@/arches_vue_utils/constants.ts";
 
-// const systemLanguage = inject(systemLanguageKey) as Language;
+import type { ControlledListItem } from "@/arches_lingo/types";
+import type { Language } from "@/arches_vue_utils/types.ts";
 
+const systemLanguage = inject(systemLanguageKey) as Language;
 const props = withDefaults(
     defineProps<{
-        val?: ControlledListItem;
+        value?: ControlledListItem[];
         options?: ControlledListItem[];
     }>(),
     {
+        value: () => [],
         options: () => [],
     },
 );
 
 const emit = defineEmits(["update"]);
-const valRef = toRef(props, "val");
-const value = computed({
+const valRef = toRef(props?.value?.[0]?.uri); // use uri as value
+const val = computed({
     get() {
-        return valRef.value;
+        return valRef.value; // unwrap array n=1
     },
     set(value) {
+        // const item = props.options?.find((item) => item.uri === value);
+        console.log(value);
+        // emit("update", [item]); // rewrap array n=1
         emit("update", value);
     },
 });
+
+const optionLabels = (item: ControlledListItem): string => {
+    const preferredLabel =
+        item.labels.find(
+            (label) =>
+                label.language_id === systemLanguage?.code &&
+                label.valuetype_id === PREF_LABEL,
+        ) || item.labels.find((label) => label.valuetype_id === PREF_LABEL);
+    return preferredLabel?.value ?? "";
+};
 </script>
 
 <template>
     <Select
-        v-model="value"
+        v-model="val"
         :show-toggle-all="!!options?.length"
         :options
+        :option-label="optionLabels"
+        option-value="uri"
         :pt="{
             emptyMessage: { style: { fontFamily: 'sans-serif' } },
             option: { style: { fontFamily: 'sans-serif' } },

diff --git a/arches_lingo/src/arches_lingo/types.ts b/arches_lingo/src/arches_lingo/types.ts
@@ -46,20 +46,20 @@ export interface ControlledListeItemLabelValue {
 }
 
 export interface ControlledListItem {
-    item_id: string;
+    item_id?: string;
     list_id: string;
     uri: string;
-    sortorder: number;
-    guide: boolean;
+    sortorder?: number;
+    guide?: boolean;
     labels: ControlledListeItemLabelValue[];
 }
 
 export interface ControlledListItemResult {
-    id: string;
+    id?: string;
     list_id: string;
     uri: string;
-    sortorder: number;
-    guide: boolean;
+    sortorder?: number;
+    guide?: boolean;
     values: ControlledListeItemLabelValue[];
 }