From 07b938b345e7af13bb412cc96ca0d870b67108bf Mon Sep 17 00:00:00 2001
From: Johnathan Clementi <johnathan.clementi1@gmail.com>
Date: Mon, 30 Dec 2024 09:24:05 -0500
Subject: [PATCH] Parse refdt options and pass to widget component #147

---
 .../components/generic/LabelEditor.vue        | 43 ++++++++++++++++---
 .../components/generic/ReferenceDatatype.vue  | 10 +++--
 .../ReferenceDatatypeEditor.vue               |  8 +---
 arches_lingo/src/arches_lingo/types.ts        |  9 ++++
 4 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue b/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
index ce9301af..2902bb5d 100644
--- a/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import { defineProps, ref } from "vue";
+import { defineProps, onMounted, ref } from "vue";
+import { fetchControlledListOptions } from "@/arches_lingo/api.ts";
 
 import NonLocalizedString from "@/arches_lingo/components/generic/NonLocalizedString.vue";
-
+import ReferenceDatatype from "@/arches_lingo/components/generic/ReferenceDatatype.vue";
 // import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
 
-import { EDIT } from "@/arches_lingo/constants.ts";
+import { EDIT, LANGUAGE_CONTROLLED_LIST } from "@/arches_lingo/constants.ts";
 
-import type { AppellativeStatus } from "@/arches_lingo/types.ts";
+import type {
+    AppellativeStatus,
+    ControlledListItem,
+    ControlledListItemResult,
+} from "@/arches_lingo/types.ts";
 
 const props = withDefaults(
     defineProps<{
@@ -17,13 +22,34 @@ const props = withDefaults(
         value: () => ({}) as AppellativeStatus,
     },
 );
-
 const appellative_status = ref(props.value);
 
 function onUpdate(newValue: string) {
     // handle the update
     console.log("Update new value here!" + newValue);
 }
+
+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,
+        }),
+    );
+    return options;
+}
+
+const languageOptions = ref<ControlledListItem[]>([]);
+
+onMounted(async () => {
+    const lang_opts = await getOptions(LANGUAGE_CONTROLLED_LIST);
+    languageOptions.value = lang_opts;
+});
 </script>
 
 <template>
@@ -38,7 +64,12 @@ function onUpdate(newValue: string) {
     />
     <!-- Label Language: reference datatype -->
     <label for="">{{ $gettext("Label Language") }}</label>
-
+    <ReferenceDatatype
+        :value="appellative_status?.appellative_status_ascribed_name_language"
+        :mode="EDIT"
+        :multivalue="false"
+        :options="languageOptions"
+    />
     <!-- Label Type: reference datatype -->
     <label for="">{{ $gettext("Label Type") }}</label>
 
diff --git a/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue b/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue
index e9aa4dad..07c9cbc9 100644
--- a/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue
@@ -8,10 +8,10 @@ import ReferenceDatatypeEditor from "@/arches_lingo/components/generic/reference
 import ReferenceDatatypeListEditor from "@/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeListEditor.vue";
 import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
 
-const { mode = VIEW } = defineProps<{
+defineProps<{
     mode?: DataComponentMode;
     value?: ControlledListItem | ControlledListItem[];
-    multiValue?: string;
+    multiValue?: boolean;
     options?: ControlledListItem[];
 }>();
 const emits = defineEmits(["update"]);
@@ -24,15 +24,17 @@ const onUpdate = (val: ControlledListItem) => {
         <div v-if="mode === VIEW">
             <ReferenceDatatypeViewer :value="value" />
         </div>
-        <div v-if="mode === EDIT && multiValue === '1'">
+        <div v-if="mode === EDIT && multiValue === false">
             <ReferenceDatatypeEditor
                 :value="value"
+                :options="options"
                 @update="onUpdate"
             />
         </div>
-        <div v-if="mode === EDIT && multiValue === 'n'">
+        <div v-if="mode === EDIT && multiValue === true">
             <ReferenceDatatypeListEditor
                 :value="value"
+                :options="options"
                 @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 1ff3fb0e..de86d006 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
@@ -20,8 +20,6 @@ const props = withDefaults(
     },
 );
 
-console.log(props);
-
 const emit = defineEmits(["update"]);
 const valRef = toRef(props, "val");
 const value = computed({
@@ -32,12 +30,8 @@ const value = computed({
         emit("update", value);
     },
 });
-// const getOptionLabels = (value) => {
-//     return getItemLabel(value, selectedLanguage.value.code, systemLanguage.code)
-//         .value;
-// };
-// :optionLabel="getOptionLabels"
 </script>
+
 <template>
     <Select
         v-model="value"
diff --git a/arches_lingo/src/arches_lingo/types.ts b/arches_lingo/src/arches_lingo/types.ts
index 2259a24e..bda206cc 100644
--- a/arches_lingo/src/arches_lingo/types.ts
+++ b/arches_lingo/src/arches_lingo/types.ts
@@ -54,6 +54,15 @@ export interface ControlledListItem {
     labels: ControlledListeItemLabelValue[];
 }
 
+export interface ControlledListItemResult {
+    id: string;
+    list_id: string;
+    uri: string;
+    sortorder: number;
+    guide: boolean;
+    values: ControlledListeItemLabelValue[];
+}
+
 export interface ResourceInstanceReference {
     resourceId: string;
     ontologyProperty: string;