Change lists in resource relationships widget

arches_lingo/src/arches_lingo/api.ts

@@ -264,6 +264,20 @@ export const updateSchemeNamespace = async (
     return parsed;
 };
 
+export const fetchRelatableResources = async (
+    graphSlug: string,
+    nodeAlias: string,
+    page: number,
+) => {
+    const response = await fetch(
+        `/api/graph/${graphSlug}/node/${nodeAlias}/relatable-resources?page=${page}`,
+    );
+
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};
+
 export const fetchSearchResults = async (
     searchTerm: string,
     items: number,

arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref, toRaw, toRef, useId } from "vue";
+import { computed, onMounted, ref, toRaw, toRef, useId } from "vue";
 
 import Button from "primevue/button";
 import { useGettext } from "vue3-gettext";
@@ -11,9 +11,6 @@ import { fetchLists } from "@/arches_references/api.ts";
 import {
     createScheme,
     createSchemeLabel,
-    fetchGroupRdmSystemList,
-    fetchPersonRdmSystemList,
-    fetchTextualWorkRdmSystemList,
     updateSchemeLabel,
 } from "@/arches_lingo/api.ts";
 
@@ -22,30 +19,21 @@ import NonLocalizedString from "@/arches_lingo/components/generic/NonLocalizedSt
 import ReferenceDatatype from "@/arches_lingo/components/generic/ReferenceDatatype.vue";
 import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
 
-import {
-    EDIT,
-    ERROR,
-    NEW,
-    selectedLanguageKey,
-} from "@/arches_lingo/constants.ts";
+import { EDIT, ERROR, NEW } from "@/arches_lingo/constants.ts";
 
-import type { Ref } from "vue";
 import type {
     AppellativeStatus,
     ControlledListResult,
     ControlledListItem,
     ControlledListItemResult,
     ResourceInstanceReference,
-    ResourceInstanceResult,
     SchemeInstance,
 } 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(
@@ -203,49 +191,9 @@ async function getControlledLists() {
     });
 }
 
-async function getResourceInstanceOptions(
-    fetchOptions: () => Promise<ResourceInstanceResult[]>,
-): Promise<ResourceInstanceReference[]> {
-    let options;
-    try {
-        options = await fetchOptions();
-    } catch (error) {
-        toast.add({
-            severity: ERROR,
-            summary: $gettext("Error"),
-            detail:
-                error instanceof Error
-                    ? error.message
-                    : $gettext("Could not fetch the resource instance options"),
-        });
-        return [];
-    }
-    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() {
+onMounted(async () => {
     getControlledLists();
-    groupAndPersonOptions.value = await getResourceInstanceOptions(
-        fetchGroupRdmSystemList,
-    );
-    groupAndPersonOptions.value = [
-        ...(groupAndPersonOptions.value || []),
-        ...(await getResourceInstanceOptions(fetchPersonRdmSystemList)),
-    ];
-    textualWorkOptions.value = await getResourceInstanceOptions(
-        fetchTextualWorkRdmSystemList,
-    );
-}
-
-onMounted(initializeSelectOptions);
+});
 </script>
 
 <template>
@@ -345,10 +293,11 @@ onMounted(initializeSelectOptions);
     <ResourceInstanceRelationships
         :value="formValue?.appellative_status_data_assignment_actor"
         :mode="EDIT"
-        :options="groupAndPersonOptions"
         :pt-aria-labeled-by="labelContributorId"
+        graph-slug="scheme"
+        node-alias="appellative_status_data_assignment_actor"
         @update="
-            (val) =>
+            (val: string[]) =>
                 onUpdateResourceInstance(
                     'appellative_status_data_assignment_actor',
                     val,
@@ -360,10 +309,11 @@ onMounted(initializeSelectOptions);
     <ResourceInstanceRelationships
         :value="formValue?.appellative_status_data_assignment_object_used"
         :mode="EDIT"
-        :options="textualWorkOptions"
+        graph-slug="scheme"
+        node-alias="appellative_status_data_assignment_object_used"
         :pt-aria-labeled-by="labelSourcesId"
         @update="
-            (val) =>
+            (val: string[]) =>
                 onUpdateResourceInstance(
                     'appellative_status_data_assignment_object_used',
                     val,

arches_lingo/src/arches_lingo/components/generic/NoteEditor.vue

@@ -1,14 +1,5 @@
 <script setup lang="ts">
-import {
-    computed,
-    inject,
-    onMounted,
-    ref,
-    toRaw,
-    toRef,
-    useId,
-    type Ref,
-} from "vue";
+import { computed, onMounted, ref, toRaw, toRef, useId } from "vue";
 
 import Button from "primevue/button";
 import { useGettext } from "vue3-gettext";
@@ -18,9 +9,6 @@ import { useToast } from "primevue/usetoast";
 import {
     createScheme,
     createSchemeNote,
-    fetchGroupRdmSystemList,
-    fetchPersonRdmSystemList,
-    fetchTextualWorkRdmSystemList,
     updateSchemeNote,
 } from "@/arches_lingo/api.ts";
 import { fetchLists } from "@/arches_references/api.ts";
@@ -29,29 +17,21 @@ import NonLocalizedString from "@/arches_lingo/components/generic/NonLocalizedSt
 import ReferenceDatatype from "@/arches_lingo/components/generic/ReferenceDatatype.vue";
 import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
 
-import {
-    EDIT,
-    ERROR,
-    NEW,
-    selectedLanguageKey,
-} from "@/arches_lingo/constants.ts";
+import { EDIT, ERROR, NEW } from "@/arches_lingo/constants.ts";
 
 import type {
     ControlledListItem,
     ControlledListItemResult,
     ControlledListResult,
     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(
@@ -208,34 +188,8 @@ async function save() {
     }
 }
 
-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() {
     getControlledLists();
-    groupAndPersonOptions.value = await getResourceInstanceOptions(
-        fetchGroupRdmSystemList,
-    );
-    groupAndPersonOptions.value = [
-        ...(groupAndPersonOptions.value || []),
-        ...(await getResourceInstanceOptions(fetchPersonRdmSystemList)),
-    ];
-    textualWorkOptions.value = await getResourceInstanceOptions(
-        fetchTextualWorkRdmSystemList,
-    );
 }
 </script>
 
@@ -247,6 +201,7 @@ async function initializeSelectOptions() {
         :mode="EDIT"
         @update="(val) => onUpdateString('statement_content_n1', val)"
     />
+
     <!-- Statement Language: reference datatype -->
     <label :for="labelLanguageId">{{ $gettext("Statement Language") }}</label>
     <ReferenceDatatype
@@ -259,6 +214,7 @@ async function initializeSelectOptions() {
             (val) => onUpdateReferenceDatatype('statement_language_n1', val)
         "
     />
+
     <!-- Statement Type: reference datatype -->
     <label :for="labelTypeId">{{ $gettext("Statement Type") }}</label>
     <ReferenceDatatype
@@ -325,33 +281,37 @@ async function initializeSelectOptions() {
     <ResourceInstanceRelationships
         :value="formValue?.statement_data_assignment_actor"
         :mode="EDIT"
-        :options="groupAndPersonOptions"
+        graph-slug="scheme"
+        node-alias="statement_data_assignment_actor"
         :pt-aria-labeled-by="labelContributorId"
-        @update="
-            (val) =>
+        @updated="
+            (val: string[]) =>
                 onUpdateResourceInstance(
                     'statement_data_assignment_actor',
                     val,
                     groupAndPersonOptions ?? [],
                 )
         "
     />
+
     <!-- Sources: resource instance -->
     <label :for="labelSourcesId">{{ $gettext("Sources") }}</label>
     <ResourceInstanceRelationships
         :value="formValue?.statement_data_assignment_object_used"
         :mode="EDIT"
-        :options="textualWorkOptions"
+        graph-slug="scheme"
+        node-alias="statement_data_assignment_object_used"
         :pt-aria-labeled-by="labelSourcesId"
-        @update="
-            (val) =>
+        @updated="
+            (val: string[]) =>
                 onUpdateResourceInstance(
                     'statement_data_assignment_object_used',
                     val,
                     textualWorkOptions ?? [],
                 )
         "
     />
+
     <!-- Warrant Type: reference datatype -->
     <label :for="labelWarrantId">{{ $gettext("Warrant Type") }}</label>
     <ReferenceDatatype
@@ -365,6 +325,7 @@ async function initializeSelectOptions() {
                 onUpdateReferenceDatatype('statement_data_assignment_type', val)
         "
     />
+
     <Button
         :label="$gettext('Update')"
         @click="save"

arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import ResourceInstanceRelationshipsViewer from "@/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsViewer.vue";
 import ResourceInstanceRelationshipsEditor from "@/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsEditor.vue";
-import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
+import { EDIT, UPDATED, VIEW } from "@/arches_lingo/constants.ts";
 import type {
     DataComponentMode,
     ResourceInstanceReference,
@@ -10,28 +10,30 @@ import type {
 const { mode = VIEW } = defineProps<{
     mode?: DataComponentMode;
     value?: ResourceInstanceReference[];
-    options?: ResourceInstanceReference[];
+    graphSlug?: string;
+    nodeAlias?: string;
     ptAriaLabeledBy?: string;
 }>();
 
-const emits = defineEmits(["update"]);
+const emit = defineEmits([UPDATED]);
 
-function onUpdate(val: string[]) {
-    emits("update", val);
+function onUpdate(val: ResourceInstanceReference[]) {
+    emit(UPDATED, val);
 }
 </script>
 <template>
     <div v-if="mode === VIEW">
         <ResourceInstanceRelationshipsViewer :value="value" />
     </div>
-    <div v-if="mode === EDIT">
+    <div v-if="mode === EDIT && graphSlug && nodeAlias">
         <ResourceInstanceRelationshipsEditor
-            :options="options"
             :val="
                 value?.map((referenceValue) => referenceValue.resourceId) ?? []
             "
             :pt-aria-labeled-by="ptAriaLabeledBy"
-            @update="onUpdate"
+            :graph-slug="graphSlug"
+            :node-alias="nodeAlias"
+            @updated="onUpdate"
         />
     </div>
 </template>