From 8895e831b02ef449491b0705942d904382ab18e4 Mon Sep 17 00:00:00 2001
From: Aaron Gundel <aaron.gundel@gmail.com>
Date: Wed, 8 Jan 2025 11:49:37 -0700
Subject: [PATCH 1/2] Adds note editor (#177)

---
 arches_lingo/src/arches_lingo/api.ts          |  47 ++-
 .../components/generic/NoteEditor.vue         | 318 ++++++++++++++++++
 .../components/scheme/report/SchemeNote.vue   |  35 +-
 arches_lingo/src/arches_lingo/types.ts        |   4 +
 arches_lingo/templates/arches_urls.htm        |   1 +
 arches_lingo/urls.py                          |   6 +
 arches_lingo/views/api/pythonic_models.py     |   5 +
 7 files changed, 409 insertions(+), 7 deletions(-)
 create mode 100644 arches_lingo/src/arches_lingo/components/generic/NoteEditor.vue

diff --git a/arches_lingo/src/arches_lingo/api.ts b/arches_lingo/src/arches_lingo/api.ts
index 5cf0ea51..06169eb7 100644
--- a/arches_lingo/src/arches_lingo/api.ts
+++ b/arches_lingo/src/arches_lingo/api.ts
@@ -1,6 +1,10 @@
 import arches from "arches";
 import Cookies from "js-cookie";
-import type { AppellativeStatus, SchemeInstance } from "@/arches_lingo/types";
+import type {
+    AppellativeStatus,
+    SchemeInstance,
+    SchemeStatement,
+} from "@/arches_lingo/types";
 
 function getToken() {
     const token = Cookies.get("csrftoken");
@@ -100,6 +104,26 @@ export const createSchemeLabel = async (
     return parsed;
 };
 
+export const createSchemeNote = async (
+    schemeId: string,
+    statement: SchemeStatement,
+) => {
+    const response = await fetch(arches.urls.api_scheme_note_create, {
+        method: "POST",
+        headers: {
+            "X-CSRFTOKEN": getToken(),
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            resourceinstance: schemeId,
+            ...statement,
+        }),
+    });
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};
+
 export const deleteSchemeLabelTile = async (
     schemeId: string,
     tileId: string,
@@ -151,6 +175,27 @@ export const fetchSchemeNotes = async (schemeId: string) => {
     return parsed;
 };
 
+export const updateSchemeNote = async (
+    schemeId: string,
+    tileId: string,
+    schemeStatement: SchemeStatement,
+) => {
+    const response = await fetch(
+        arches.urls.api_scheme_note_tile(schemeId, tileId),
+        {
+            method: "PATCH",
+            headers: {
+                "X-CSRFTOKEN": getToken(),
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(schemeStatement),
+        },
+    );
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};
+
 export const deleteSchemeNoteTile = async (
     schemeId: string,
     tileId: string,
diff --git a/arches_lingo/src/arches_lingo/components/generic/NoteEditor.vue b/arches_lingo/src/arches_lingo/components/generic/NoteEditor.vue
new file mode 100644
index 00000000..2da0ab6e
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/generic/NoteEditor.vue
@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import { computed, inject, onMounted, ref, toRaw, toRef, type Ref } from "vue";
+
+import Button from "primevue/button";
+import { useGettext } from "vue3-gettext";
+import { useRoute, useRouter } from "vue-router";
+import { useToast } from "primevue/usetoast";
+
+import {
+    createScheme,
+    createSchemeNote,
+    fetchControlledListOptions,
+    fetchGroupRdmSystemList,
+    fetchPersonRdmSystemList,
+    fetchTextualWorkRdmSystemList,
+    updateSchemeNote,
+} from "@/arches_lingo/api.ts";
+
+import DateDatatype from "@/arches_lingo/components/generic/DateDatatype.vue";
+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,
+    ERROR,
+    EVENT_TYPES_CONTROLLED_LIST,
+    LABEL_CONTROLLED_LIST,
+    LANGUAGE_CONTROLLED_LIST,
+    METATYPES_CONTROLLED_LIST,
+    NEW,
+    selectedLanguageKey,
+    STATUSES_CONTROLLED_LIST,
+} from "@/arches_lingo/constants.ts";
+
+import type {
+    ControlledListItem,
+    ControlledListItemResult,
+    ResourceInstanceReference,
+    ResourceInstanceResult,
+    SchemeInstance,
+    SchemeStatement,
+} from "@/arches_lingo/types.ts";
+import type { Language } from "@/arches_vue_utils/types.ts";
+
+const emit = defineEmits(["update"]);
+const toast = useToast();
+const route = useRoute();
+const router = useRouter();
+const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
+const { $gettext } = useGettext();
+
+const props = withDefaults(
+    defineProps<{
+        value?: SchemeStatement;
+    }>(),
+    {
+        value: () => ({}) as SchemeStatement,
+    },
+);
+const valueRef = toRef(props, "value");
+
+const formValue = computed({
+    get: () => valueRef.value,
+    set: (newVal: SchemeStatement) => {
+        valueRef.value = newVal;
+    },
+});
+
+onMounted(async () => {
+    initializeSelectOptions();
+});
+
+const languageOptions = ref<ControlledListItem[]>([]);
+const typeOptions = ref<ControlledListItem[]>([]);
+const statusOptions = ref<ControlledListItem[]>([]);
+const metatypeOptions = ref<ControlledListItem[]>([]);
+const eventTypeOptions = ref<ControlledListItem[]>([]);
+const groupAndPersonOptions = ref<ResourceInstanceReference[]>();
+const textualWorkOptions = ref<ResourceInstanceReference[]>();
+
+function onUpdateString(node: keyof SchemeStatement, val: string) {
+    (formValue.value[node] as unknown) = toRaw(val);
+}
+
+function onUpdateReferenceDatatype(
+    node: keyof SchemeStatement,
+    val: ControlledListItem[],
+) {
+    (formValue.value[node] as unknown) = val.map((item) => toRaw(item));
+}
+
+function onUpdateResourceInstance(
+    node: keyof SchemeStatement,
+    val: string[],
+    options: ResourceInstanceReference[],
+) {
+    if (val.length > 0) {
+        const selectedOptions = options.filter((option) =>
+            val.includes(option.resourceId),
+        );
+        (formValue.value[node] as unknown) = selectedOptions;
+    }
+}
+
+async function save() {
+    try {
+        if (route.params.id === NEW) {
+            const newSchemeInstance: SchemeInstance = {
+                statement: [toRaw(formValue.value)],
+            };
+            const updated = await createScheme(newSchemeInstance);
+            await router.push({
+                name: "scheme",
+                params: { id: updated.resourceinstanceid },
+            });
+        } else if (!formValue.value.tileid) {
+            const schemeStatement: SchemeStatement = await createSchemeNote(
+                route.params.id as string,
+                { ...formValue.value },
+            );
+            valueRef.value = schemeStatement;
+            emit("update", schemeStatement.tileid);
+            return;
+        } else {
+            await updateSchemeNote(
+                route.params.id as string,
+                formValue.value.tileid,
+                { ...formValue.value },
+            );
+        }
+        emit("update");
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            summary: $gettext("Error saving scheme"),
+            detail: (error as Error).message,
+        });
+    }
+}
+
+async function getControlledListOptions(
+    listId: string,
+): Promise<ControlledListItem[]> {
+    const parsed = await fetchControlledListOptions(listId);
+    const options = parsed.items.map(
+        (item: ControlledListItemResult): ControlledListItem => ({
+            list_id: item.list_id,
+            uri: item.uri,
+            labels: item.values,
+        }),
+    );
+    return options;
+}
+
+async function getResourceInstanceOptions(
+    fetchOptions: () => Promise<ResourceInstanceResult[]>,
+): Promise<ResourceInstanceReference[]> {
+    const options = await fetchOptions();
+    const results = options.map((option: ResourceInstanceResult) => {
+        const result: ResourceInstanceReference = {
+            display_value: option.descriptors[selectedLanguage.value.code].name,
+            resourceId: option.resourceinstanceid,
+            ontologyProperty: "ac41d9be-79db-4256-b368-2f4559cfbe55",
+            inverseOntologyProperty: "ac41d9be-79db-4256-b368-2f4559cfbe55",
+        };
+        return result;
+    });
+    return results;
+}
+
+async function initializeSelectOptions() {
+    const [languageOpts, typeOpts, statusOpts, metatypeOpts, eventTypeOpts] =
+        await Promise.all([
+            getControlledListOptions(LANGUAGE_CONTROLLED_LIST),
+            getControlledListOptions(LABEL_CONTROLLED_LIST),
+            getControlledListOptions(STATUSES_CONTROLLED_LIST),
+            getControlledListOptions(METATYPES_CONTROLLED_LIST),
+            getControlledListOptions(EVENT_TYPES_CONTROLLED_LIST),
+        ]);
+
+    languageOptions.value = languageOpts;
+    typeOptions.value = typeOpts;
+    statusOptions.value = statusOpts;
+    metatypeOptions.value = metatypeOpts;
+    eventTypeOptions.value = eventTypeOpts;
+    groupAndPersonOptions.value = await getResourceInstanceOptions(
+        fetchGroupRdmSystemList,
+    );
+    groupAndPersonOptions.value = [
+        ...(groupAndPersonOptions.value || []),
+        ...(await getResourceInstanceOptions(fetchPersonRdmSystemList)),
+    ];
+    textualWorkOptions.value = await getResourceInstanceOptions(
+        fetchTextualWorkRdmSystemList,
+    );
+}
+</script>
+
+<template>
+    <!-- Statement: string -->
+    <label for="">{{ $gettext("Statement") }}</label>
+    <NonLocalizedString
+        :value="formValue?.statement_content_n1 ?? ''"
+        :mode="EDIT"
+        @update="(val) => onUpdateString('statement_content_n1', val)"
+    />
+    <!-- Statement Language: reference datatype -->
+    <label for="">{{ $gettext("Statement Language") }}</label>
+    <ReferenceDatatype
+        :value="formValue?.statement_language_n1"
+        :mode="EDIT"
+        :multi-value="false"
+        :options="languageOptions"
+        @update="
+            (val) => onUpdateReferenceDatatype('statement_language_n1', val)
+        "
+    />
+    <!-- Statement Type: reference datatype -->
+    <label for="">{{ $gettext("Statement Type") }}</label>
+    <ReferenceDatatype
+        :value="formValue?.statement_type_n1"
+        :mode="EDIT"
+        :multi-value="false"
+        :options="typeOptions"
+        @update="(val) => onUpdateReferenceDatatype('statement_type_n1', val)"
+    />
+
+    <!-- Statement Status Metatype: reference datatype -->
+    <label for="">{{ $gettext("Statement Metatype") }}</label>
+    <ReferenceDatatype
+        :value="formValue?.statement_type_metatype_n1"
+        :mode="EDIT"
+        :multi-value="false"
+        :options="metatypeOptions"
+        @update="
+            (val) =>
+                onUpdateReferenceDatatype('statement_type_metatype_n1', val)
+        "
+    />
+
+    <!-- Statement Temporal Validity Start: date -->
+    <label for="">{{ $gettext("Label Temporal Validity Start") }}</label>
+    <DateDatatype
+        :value="
+            formValue?.statement_data_assignment_timespan_begin_of_the_begin
+        "
+        :mode="EDIT"
+        @update="
+            (val) =>
+                onUpdateString(
+                    'statement_data_assignment_timespan_begin_of_the_begin',
+                    val,
+                )
+        "
+    />
+
+    <!-- Statement Temporal Validity End: date -->
+    <label for="">{{ $gettext("Label Temporal Validity End") }}</label>
+    <DateDatatype
+        :value="formValue?.statement_data_assignment_timespan_end_of_the_end"
+        :mode="EDIT"
+        @update="
+            (val) =>
+                onUpdateString(
+                    'statement_data_assignment_timespan_end_of_the_end',
+                    val,
+                )
+        "
+    />
+
+    <!-- Contributor: resource instance -->
+    <label for="">{{ $gettext("Contributor") }}</label>
+    <ResourceInstanceRelationships
+        :value="formValue?.statement_data_assignment_actor"
+        :mode="EDIT"
+        :options="groupAndPersonOptions"
+        @update="
+            (val) =>
+                onUpdateResourceInstance(
+                    'statement_data_assignment_actor',
+                    val,
+                    groupAndPersonOptions ?? [],
+                )
+        "
+    />
+    <!-- Sources: resource instance -->
+    <label for="">{{ $gettext("Sources") }}</label>
+    <ResourceInstanceRelationships
+        :value="formValue?.statement_data_assignment_object_used"
+        :mode="EDIT"
+        :options="textualWorkOptions"
+        @update="
+            (val) =>
+                onUpdateResourceInstance(
+                    'statement_data_assignment_object_used',
+                    val,
+                    textualWorkOptions ?? [],
+                )
+        "
+    />
+    <!-- Warrant Type: reference datatype -->
+    <label for="">{{ $gettext("Warrant Type") }}</label>
+    <ReferenceDatatype
+        :value="formValue?.statement_data_assignment_type"
+        :mode="EDIT"
+        :multi-value="false"
+        :options="eventTypeOptions"
+        @update="
+            (val) =>
+                onUpdateReferenceDatatype('statement_data_assignment_type', val)
+        "
+    />
+    <Button
+        :label="$gettext('Update')"
+        @click="save"
+    ></Button>
+</template>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNote.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNote.vue
index 5fdfeb45..fcff21bd 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNote.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNote.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useGettext } from "vue3-gettext";
 import { useRoute } from "vue-router";
 import { useToast } from "primevue/usetoast";
@@ -12,7 +12,9 @@ import {
     OPEN_EDITOR,
     VIEW,
     EDIT,
+    UPDATED,
 } from "@/arches_lingo/constants.ts";
+import NoteEditor from "@/arches_lingo/components/generic/NoteEditor.vue";
 import type {
     DataComponentMode,
     MetaStringText,
@@ -34,7 +36,7 @@ const metaStringLabel: MetaStringText = {
     noRecords: $gettext("No scheme notes were found."),
 };
 
-withDefaults(
+const props = withDefaults(
     defineProps<{
         mode?: DataComponentMode;
         tileId?: string | null;
@@ -45,7 +47,11 @@ withDefaults(
     },
 );
 
-const emits = defineEmits([OPEN_EDITOR]);
+watch(props, () => {
+    getSectionValue();
+});
+
+const emit = defineEmits([OPEN_EDITOR, UPDATED]);
 
 defineExpose({ getSectionValue });
 
@@ -53,6 +59,12 @@ onMounted(() => {
     getSectionValue();
 });
 
+const selectedNote = computed(() => {
+    return schemeInstance.value?.statement?.find(
+        (tile) => tile.tileid === props.tileId,
+    );
+});
+
 async function getSectionValue() {
     if (route.params.id === NEW) {
         return;
@@ -99,7 +111,7 @@ function editSectionValue(tileId: string) {
         (tile) => tile.tileid === tileId,
     );
     if (schemeStatement && schemeStatement.tileid === tileId) {
-        emits(OPEN_EDITOR, schemeStatement.tileid);
+        emit(OPEN_EDITOR, schemeStatement.tileid);
     } else {
         toast.add({
             severity: ERROR,
@@ -108,6 +120,12 @@ function editSectionValue(tileId: string) {
         });
     }
 }
+async function update(tileId: string | undefined) {
+    await emit(UPDATED);
+    if (tileId) {
+        await emit(OPEN_EDITOR, tileId);
+    }
+}
 </script>
 
 <template>
@@ -115,7 +133,7 @@ function editSectionValue(tileId: string) {
         <SchemeReportSection
             :title-text="$gettext('Scheme Notes')"
             :button-text="$gettext('Add New Scheme Note')"
-            @open-editor="emits(OPEN_EDITOR)"
+            @open-editor="emit(OPEN_EDITOR)"
         >
             <MetaStringViewer
                 :meta-strings="schemeInstance?.statement"
@@ -165,5 +183,10 @@ function editSectionValue(tileId: string) {
             </MetaStringViewer>
         </SchemeReportSection>
     </div>
-    <div v-if="mode === EDIT"></div>
+    <div v-if="mode === EDIT">
+        <NoteEditor
+            :value="selectedNote"
+            @update="update"
+        />
+    </div>
 </template>
diff --git a/arches_lingo/src/arches_lingo/types.ts b/arches_lingo/src/arches_lingo/types.ts
index b19de89d..d2c28b08 100644
--- a/arches_lingo/src/arches_lingo/types.ts
+++ b/arches_lingo/src/arches_lingo/types.ts
@@ -131,8 +131,12 @@ export interface SchemeStatement {
     statement_content_n1: string;
     statement_language_n1?: ControlledListItem[];
     statement_type_n1?: ControlledListItem[];
+    statement_type_metatype_n1?: ControlledListItem[];
     statement_data_assignment_object_used: ResourceInstanceReference[];
     statement_data_assignment_actor: ResourceInstanceReference[];
+    statement_data_assignment_type: ControlledListItem[];
+    statement_data_assignment_timespan_begin_of_the_begin: string;
+    statement_data_assignment_timespan_end_of_the_end: string;
 }
 
 export interface SchemeInstance {
diff --git a/arches_lingo/templates/arches_urls.htm b/arches_lingo/templates/arches_urls.htm
index 1f968285..d17610c1 100644
--- a/arches_lingo/templates/arches_urls.htm
+++ b/arches_lingo/templates/arches_urls.htm
@@ -16,6 +16,7 @@
     api_scheme_label_list_create="{% url 'api-scheme-label-list-create' %}"
     api_scheme_note='(resourceid)=>{return "{% url "api-scheme-note" "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa" %}".replace("aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa", resourceid)}'
     api_scheme_note_tile='(resourceid, tileid)=>{return "{% url "api-scheme-note-tile" "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa" "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaab" %}".replace("aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa", resourceid).replace("aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaab", tileid)}'
+    api_scheme_note_create="{% url 'api-scheme-note-create' %}"
     api_scheme_creation='(resourceid)=>{return "{% url "api-scheme-creation" "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa" %}".replace("aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa", resourceid)}'
     api_textualwork_list="{% url 'api-textualwork-list' %}"
     api_group_list="{% url 'api-group-list' %}"
diff --git a/arches_lingo/urls.py b/arches_lingo/urls.py
index 33e3de87..0cc20a85 100644
--- a/arches_lingo/urls.py
+++ b/arches_lingo/urls.py
@@ -21,6 +21,7 @@
     SchemeNamespaceView,
     SchemeNoteTileView,
     SchemeNoteView,
+    SchemeNoteCreateView,
     SchemeStatementDetailView,
     SchemeStatementListCreateView,
     TextualWorkRdmSystemSerializerView,
@@ -86,6 +87,11 @@
         SchemeNoteTileView.as_view(),
         name="api-scheme-note-tile",
     ),
+    path(
+        "api/scheme/note",
+        SchemeNoteCreateView.as_view(),
+        name="api-scheme-note-create",
+    ),
     path(
         "api/textual-work",
         TextualWorkRdmSystemSerializerView.as_view(),
diff --git a/arches_lingo/views/api/pythonic_models.py b/arches_lingo/views/api/pythonic_models.py
index aa3ed1d7..ccdf108f 100644
--- a/arches_lingo/views/api/pythonic_models.py
+++ b/arches_lingo/views/api/pythonic_models.py
@@ -85,6 +85,11 @@ class SchemeNoteTileView(ArchesModelAPIMixin, RetrieveUpdateDestroyAPIView):
     serializer_class = SchemeNoteTileSerializer
 
 
+class SchemeNoteCreateView(ArchesModelAPIMixin, ListCreateAPIView):
+    permission_classes = [RDMAdministrator]
+    serializer_class = SchemeNoteTileSerializer
+
+
 class TextualWorkRdmSystemSerializerView(ArchesModelAPIMixin, ListAPIView):
     permission_classes = [RDMAdministrator]
     serializer_class = TextualWorkRdmSystemSerializer

From 57f31e2737fe26aa66cc8c87114d94719adbf20f Mon Sep 17 00:00:00 2001
From: Aaron Gundel <aaron.gundel@gmail.com>
Date: Tue, 21 Jan 2025 10:26:58 -0700
Subject: [PATCH 2/2] fixup! Adds note editor (#177)

---
 .../components/generic/NoteEditor.vue         | 146 ++++++++++++------
 1 file changed, 100 insertions(+), 46 deletions(-)

diff --git a/arches_lingo/src/arches_lingo/components/generic/NoteEditor.vue b/arches_lingo/src/arches_lingo/components/generic/NoteEditor.vue
index 2da0ab6e..87b3a934 100644
--- a/arches_lingo/src/arches_lingo/components/generic/NoteEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/NoteEditor.vue
@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref, toRaw, toRef, type Ref } from "vue";
+import {
+    computed,
+    inject,
+    onMounted,
+    ref,
+    toRaw,
+    toRef,
+    useId,
+    type Ref,
+} from "vue";
 
 import Button from "primevue/button";
 import { useGettext } from "vue3-gettext";
@@ -9,13 +18,12 @@ import { useToast } from "primevue/usetoast";
 import {
     createScheme,
     createSchemeNote,
-    fetchControlledListOptions,
     fetchGroupRdmSystemList,
     fetchPersonRdmSystemList,
     fetchTextualWorkRdmSystemList,
     updateSchemeNote,
 } from "@/arches_lingo/api.ts";
-
+import { fetchLists } from "@/arches_references/api.ts";
 import DateDatatype from "@/arches_lingo/components/generic/DateDatatype.vue";
 import NonLocalizedString from "@/arches_lingo/components/generic/NonLocalizedString.vue";
 import ReferenceDatatype from "@/arches_lingo/components/generic/ReferenceDatatype.vue";
@@ -24,18 +32,14 @@ import ResourceInstanceRelationships from "@/arches_lingo/components/generic/Res
 import {
     EDIT,
     ERROR,
-    EVENT_TYPES_CONTROLLED_LIST,
-    LABEL_CONTROLLED_LIST,
-    LANGUAGE_CONTROLLED_LIST,
-    METATYPES_CONTROLLED_LIST,
     NEW,
     selectedLanguageKey,
-    STATUSES_CONTROLLED_LIST,
 } from "@/arches_lingo/constants.ts";
 
 import type {
     ControlledListItem,
     ControlledListItemResult,
+    ControlledListResult,
     ResourceInstanceReference,
     ResourceInstanceResult,
     SchemeInstance,
@@ -73,12 +77,44 @@ onMounted(async () => {
 
 const languageOptions = ref<ControlledListItem[]>([]);
 const typeOptions = ref<ControlledListItem[]>([]);
-const statusOptions = ref<ControlledListItem[]>([]);
 const metatypeOptions = ref<ControlledListItem[]>([]);
 const eventTypeOptions = ref<ControlledListItem[]>([]);
 const groupAndPersonOptions = ref<ResourceInstanceReference[]>();
 const textualWorkOptions = ref<ResourceInstanceReference[]>();
 
+const labelId = useId();
+const labelLanguageId = useId();
+const labelTypeId = useId();
+const labelMetatypeId = useId();
+const labelStartId = useId();
+const labelEndId = useId();
+const labelContributorId = useId();
+const labelSourcesId = useId();
+const labelWarrantId = useId();
+
+const referenceNodeConfig = [
+    {
+        nodeAlias: "statement_language_n1",
+        listRef: languageOptions,
+        listName: "Languages",
+    },
+    {
+        nodeAlias: "statement_type_n1",
+        listRef: typeOptions,
+        listName: "note",
+    },
+    {
+        nodeAlias: "statement_type_metatype_n1",
+        listRef: metatypeOptions,
+        listName: "Metatypes",
+    },
+    {
+        nodeAlias: "statement_data_assignment_type",
+        listRef: eventTypeOptions,
+        listName: "Event Types",
+    },
+];
+
 function onUpdateString(node: keyof SchemeStatement, val: string) {
     (formValue.value[node] as unknown) = toRaw(val);
 }
@@ -103,6 +139,39 @@ function onUpdateResourceInstance(
     }
 }
 
+async function getControlledLists() {
+    let parsed;
+    try {
+        parsed = await fetchLists(
+            referenceNodeConfig.map((node) => node.nodeAlias),
+        );
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            summary: $gettext("Error"),
+            detail:
+                error instanceof Error
+                    ? error.message
+                    : $gettext("Could not fetch the controlled list options"),
+        });
+        return [];
+    }
+    const controlledLists = parsed.controlled_lists;
+    referenceNodeConfig.forEach((node) => {
+        const matchingList = controlledLists.find(
+            (list: ControlledListResult) => list.name === node.listName,
+        );
+        const options = matchingList.items.map(
+            (item: ControlledListItemResult): ControlledListItem => ({
+                list_id: item.list_id,
+                uri: item.uri,
+                labels: item.values,
+            }),
+        );
+        node.listRef.value = options;
+    });
+}
+
 async function save() {
     try {
         if (route.params.id === NEW) {
@@ -139,20 +208,6 @@ async function save() {
     }
 }
 
-async function getControlledListOptions(
-    listId: string,
-): Promise<ControlledListItem[]> {
-    const parsed = await fetchControlledListOptions(listId);
-    const options = parsed.items.map(
-        (item: ControlledListItemResult): ControlledListItem => ({
-            list_id: item.list_id,
-            uri: item.uri,
-            labels: item.values,
-        }),
-    );
-    return options;
-}
-
 async function getResourceInstanceOptions(
     fetchOptions: () => Promise<ResourceInstanceResult[]>,
 ): Promise<ResourceInstanceReference[]> {
@@ -170,20 +225,7 @@ async function getResourceInstanceOptions(
 }
 
 async function initializeSelectOptions() {
-    const [languageOpts, typeOpts, statusOpts, metatypeOpts, eventTypeOpts] =
-        await Promise.all([
-            getControlledListOptions(LANGUAGE_CONTROLLED_LIST),
-            getControlledListOptions(LABEL_CONTROLLED_LIST),
-            getControlledListOptions(STATUSES_CONTROLLED_LIST),
-            getControlledListOptions(METATYPES_CONTROLLED_LIST),
-            getControlledListOptions(EVENT_TYPES_CONTROLLED_LIST),
-        ]);
-
-    languageOptions.value = languageOpts;
-    typeOptions.value = typeOpts;
-    statusOptions.value = statusOpts;
-    metatypeOptions.value = metatypeOpts;
-    eventTypeOptions.value = eventTypeOpts;
+    getControlledLists();
     groupAndPersonOptions.value = await getResourceInstanceOptions(
         fetchGroupRdmSystemList,
     );
@@ -199,40 +241,43 @@ async function initializeSelectOptions() {
 
 <template>
     <!-- Statement: string -->
-    <label for="">{{ $gettext("Statement") }}</label>
+    <label :for="labelId">{{ $gettext("Statement") }}</label>
     <NonLocalizedString
         :value="formValue?.statement_content_n1 ?? ''"
         :mode="EDIT"
         @update="(val) => onUpdateString('statement_content_n1', val)"
     />
     <!-- Statement Language: reference datatype -->
-    <label for="">{{ $gettext("Statement Language") }}</label>
+    <label :for="labelLanguageId">{{ $gettext("Statement Language") }}</label>
     <ReferenceDatatype
         :value="formValue?.statement_language_n1"
         :mode="EDIT"
         :multi-value="false"
         :options="languageOptions"
+        :pt-aria-labeled-by="labelLanguageId"
         @update="
             (val) => onUpdateReferenceDatatype('statement_language_n1', val)
         "
     />
     <!-- Statement Type: reference datatype -->
-    <label for="">{{ $gettext("Statement Type") }}</label>
+    <label :for="labelTypeId">{{ $gettext("Statement Type") }}</label>
     <ReferenceDatatype
         :value="formValue?.statement_type_n1"
         :mode="EDIT"
         :multi-value="false"
         :options="typeOptions"
+        :pt-aria-labeled-by="labelTypeId"
         @update="(val) => onUpdateReferenceDatatype('statement_type_n1', val)"
     />
 
     <!-- Statement Status Metatype: reference datatype -->
-    <label for="">{{ $gettext("Statement Metatype") }}</label>
+    <label :for="labelMetatypeId">{{ $gettext("Statement Metatype") }}</label>
     <ReferenceDatatype
         :value="formValue?.statement_type_metatype_n1"
         :mode="EDIT"
         :multi-value="false"
         :options="metatypeOptions"
+        :pt-aria-labeled-by="labelMetatypeId"
         @update="
             (val) =>
                 onUpdateReferenceDatatype('statement_type_metatype_n1', val)
@@ -240,12 +285,15 @@ async function initializeSelectOptions() {
     />
 
     <!-- Statement Temporal Validity Start: date -->
-    <label for="">{{ $gettext("Label Temporal Validity Start") }}</label>
+    <label :for="labelStartId">{{
+        $gettext("Statement Temporal Validity Start")
+    }}</label>
     <DateDatatype
         :value="
             formValue?.statement_data_assignment_timespan_begin_of_the_begin
         "
         :mode="EDIT"
+        :pt-aria-labeled-by="labelStartId"
         @update="
             (val) =>
                 onUpdateString(
@@ -256,10 +304,13 @@ async function initializeSelectOptions() {
     />
 
     <!-- Statement Temporal Validity End: date -->
-    <label for="">{{ $gettext("Label Temporal Validity End") }}</label>
+    <label :for="labelEndId">{{
+        $gettext("Label Temporal Validity End")
+    }}</label>
     <DateDatatype
         :value="formValue?.statement_data_assignment_timespan_end_of_the_end"
         :mode="EDIT"
+        :pt-aria-labeled-by="labelEndId"
         @update="
             (val) =>
                 onUpdateString(
@@ -270,11 +321,12 @@ async function initializeSelectOptions() {
     />
 
     <!-- Contributor: resource instance -->
-    <label for="">{{ $gettext("Contributor") }}</label>
+    <label :for="labelContributorId">{{ $gettext("Contributor") }}</label>
     <ResourceInstanceRelationships
         :value="formValue?.statement_data_assignment_actor"
         :mode="EDIT"
         :options="groupAndPersonOptions"
+        :pt-aria-labeled-by="labelContributorId"
         @update="
             (val) =>
                 onUpdateResourceInstance(
@@ -285,11 +337,12 @@ async function initializeSelectOptions() {
         "
     />
     <!-- Sources: resource instance -->
-    <label for="">{{ $gettext("Sources") }}</label>
+    <label :for="labelSourcesId">{{ $gettext("Sources") }}</label>
     <ResourceInstanceRelationships
         :value="formValue?.statement_data_assignment_object_used"
         :mode="EDIT"
         :options="textualWorkOptions"
+        :pt-aria-labeled-by="labelSourcesId"
         @update="
             (val) =>
                 onUpdateResourceInstance(
@@ -300,12 +353,13 @@ async function initializeSelectOptions() {
         "
     />
     <!-- Warrant Type: reference datatype -->
-    <label for="">{{ $gettext("Warrant Type") }}</label>
+    <label :for="labelWarrantId">{{ $gettext("Warrant Type") }}</label>
     <ReferenceDatatype
         :value="formValue?.statement_data_assignment_type"
         :mode="EDIT"
         :multi-value="false"
         :options="eventTypeOptions"
+        :pt-aria-labeled-by="labelWarrantId"
         @update="
             (val) =>
                 onUpdateReferenceDatatype('statement_data_assignment_type', val)