Stub out reference dt widget rename from controlledlistitem

arches_lingo/src/arches_lingo/api.ts

@@ -145,3 +145,10 @@ export const fetchSchemes = async () => {
     if (!response.ok) throw new Error(parsed.message || response.statusText);
     return parsed;
 };
+
+export const fetchControlledListOptions = async (controlledListId: string) => {
+    const response = await fetch(arches.urls.controlled_list(controlledListId));
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type {
+    ControlledListItem,
+    DataComponentMode,
+} 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";
+
+const { mode = VIEW } = defineProps<{
+    mode?: DataComponentMode;
+    value?: ControlledListItem | ControlledListItem[];
+    multiValue?: string;
+    options?: ControlledListItem[];
+}>();
+const emits = defineEmits(["update"]);
+const onUpdate = (val: ControlledListItem) => {
+    emits("update", val);
+};
+</script>
+<template>
+    <div>
+        <div v-if="mode === VIEW">
+            <ReferenceDatatypeViewer :value="value" />
+        </div>
+        <div v-if="mode === EDIT && multiValue === '1'">
+            <ReferenceDatatypeEditor
+                :value="value"
+                @update="onUpdate"
+            />
+        </div>
+        <div v-if="mode === EDIT && multiValue === 'n'">
+            <ReferenceDatatypeListEditor
+                :value="value"
+                @update="onUpdate"
+            />
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+// import { computed, inject, toRef } from "vue";
+import { computed, 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";
+
+// const systemLanguage = inject(systemLanguageKey) as Language;
+
+const props = withDefaults(
+    defineProps<{
+        val?: ControlledListItem;
+        options?: ControlledListItem[];
+    }>(),
+    {
+        options: () => [],
+    },
+);
+
+console.log(props);
+
+const emit = defineEmits(["update"]);
+const valRef = toRef(props, "val");
+const value = computed({
+    get() {
+        return valRef.value;
+    },
+    set(value) {
+        emit("update", value);
+    },
+});
+// const getOptionLabels = (value) => {
+//     return getItemLabel(value, selectedLanguage.value.code, systemLanguage.code)
+//         .value;
+// };
+// :optionLabel="getOptionLabels"
+</script>
+<template>
+    <Select
+        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>

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

@@ -0,0 +1,46 @@
+<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>

arches_lingo/src/arches_lingo/constants.ts

@@ -28,3 +28,5 @@ export const ENGLISH = {
     name: "English",
     scope: "system",
 };
+
+export const LANGUAGE_CONTROLLED_LIST = "55ce793b-a51a-4b25-811d-d08ea797f8c3";

arches_lingo/src/arches_lingo/types.ts

@@ -46,6 +46,7 @@ export interface ControlledListeItemLabelValue {
 }
 
 export interface ControlledListItem {
+    item_id: string;
     list_id: string;
     uri: string;
     sortorder: number;