From 6a9627e067b6139d02cab646d6460b93cbf60718 Mon Sep 17 00:00:00 2001
From: Johnathan Clementi <johnathan.clementi1@gmail.com>
Date: Fri, 3 Jan 2025 19:13:00 -0500
Subject: [PATCH] Save / update scheme labels #147

---
 arches_lingo/src/arches_lingo/api.ts          | 24 +++++-
 .../components/generic/LabelEditor.vue        | 81 +++++++++++++++----
 .../components/scheme/report/SchemeLabel.vue  | 28 +++----
 3 files changed, 101 insertions(+), 32 deletions(-)

diff --git a/arches_lingo/src/arches_lingo/api.ts b/arches_lingo/src/arches_lingo/api.ts
index 45afef2d..ab9ccd4e 100644
--- a/arches_lingo/src/arches_lingo/api.ts
+++ b/arches_lingo/src/arches_lingo/api.ts
@@ -1,7 +1,6 @@
 import arches from "arches";
 import Cookies from "js-cookie";
-
-import type { SchemeInstance } from "@/arches_lingo/types";
+import type { AppellativeStatus, SchemeInstance } from "@/arches_lingo/types";
 
 function getToken() {
     const token = Cookies.get("csrftoken");
@@ -101,6 +100,27 @@ export const deleteSchemeLabelTile = async (
     }
 };
 
+export const updateSchemeLabel = async (
+    schemeId: string,
+    tileId: string,
+    appellative_status: AppellativeStatus,
+) => {
+    const response = await fetch(
+        arches.urls.api_scheme_label_tile(schemeId, tileId),
+        {
+            method: "PATCH",
+            headers: {
+                "X-CSRFTOKEN": getToken(),
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(appellative_status),
+        },
+    );
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};
+
 export const fetchSchemeNotes = async (schemeId: string) => {
     const response = await fetch(arches.urls.api_scheme_note(schemeId));
     const parsed = await response.json();
diff --git a/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue b/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
index ba6f6061..f3419f65 100644
--- a/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
-import { defineProps, inject, onMounted, ref, type Ref } from "vue";
+import { defineProps, inject, onMounted, ref, toRaw, type Ref } from "vue";
+import Button from "primevue/button";
+import { useGettext } from "vue3-gettext";
+import { useRoute } from "vue-router";
+import { useToast } from "primevue/usetoast";
+
 import {
     fetchControlledListOptions,
     fetchGroupRdmSystemList,
     fetchPersonRdmSystemList,
     fetchTextualWorkRdmSystemList,
+    updateSchemeLabel,
 } from "@/arches_lingo/api.ts";
 
 import NonLocalizedString from "@/arches_lingo/components/generic/NonLocalizedString.vue";
@@ -12,13 +18,14 @@ import ReferenceDatatype from "@/arches_lingo/components/generic/ReferenceDataty
 import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
 
 import {
-    selectedLanguageKey,
     EDIT,
-    LANGUAGE_CONTROLLED_LIST,
+    ERROR,
+    EVENT_TYPES_CONTROLLED_LIST,
     LABEL_CONTROLLED_LIST,
-    STATUSES_CONTROLLED_LIST,
+    LANGUAGE_CONTROLLED_LIST,
     METATYPES_CONTROLLED_LIST,
-    EVENT_TYPES_CONTROLLED_LIST,
+    selectedLanguageKey,
+    STATUSES_CONTROLLED_LIST,
 } from "@/arches_lingo/constants.ts";
 
 import type {
@@ -30,7 +37,12 @@ import type {
 } 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 selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
+const { $gettext } = useGettext();
+
 const props = withDefaults(
     defineProps<{
         value?: AppellativeStatus;
@@ -49,8 +61,32 @@ const eventTypeOptions = ref<ControlledListItem[]>([]);
 const groupAndPersonOptions = ref<ResourceInstanceReference[]>();
 const textualWorkOptions = ref<ResourceInstanceReference[]>();
 
-function onUpdate(newValue: string) {
-    console.log(newValue);
+function onUpdate(
+    node: keyof AppellativeStatus,
+    val: ControlledListItem[] | ResourceInstanceReference[] | string,
+) {
+    if (Array.isArray(val)) {
+        (value.value[node] as unknown) = val.map((item) => toRaw(item));
+    } else {
+        (value.value[node] as unknown) = toRaw(val);
+    }
+}
+
+async function save() {
+    try {
+        await updateSchemeLabel(
+            route.params.id as string,
+            value.value.tileid as string,
+            value.value,
+        );
+        emit("update");
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            summary: $gettext("Error saving scheme"),
+            detail: (error as Error).message,
+        });
+    }
 }
 
 async function getControlledListOptions(
@@ -117,7 +153,9 @@ onMounted(async () => {
     <NonLocalizedString
         :value="value?.appellative_status_ascribed_name_content ?? ''"
         :mode="EDIT"
-        @update="onUpdate"
+        @update="
+            (val) => onUpdate('appellative_status_ascribed_name_content', val)
+        "
     />
     <!-- Label Language: reference datatype -->
     <label for="">{{ $gettext("Label Language") }}</label>
@@ -126,7 +164,9 @@ onMounted(async () => {
         :mode="EDIT"
         :multi-value="false"
         :options="languageOptions"
-        @update="onUpdate"
+        @update="
+            (val) => onUpdate('appellative_status_ascribed_name_language', val)
+        "
     />
     <!-- Label Type: reference datatype -->
     <label for="">{{ $gettext("Label Type") }}</label>
@@ -135,7 +175,7 @@ onMounted(async () => {
         :mode="EDIT"
         :multi-value="false"
         :options="typeOptions"
-        @update="onUpdate"
+        @update="(val) => onUpdate('appellative_status_ascribed_relation', val)"
     />
     <!-- Label Status: reference datatype -->
     <label for="">{{ $gettext("Label Status") }}</label>
@@ -144,7 +184,7 @@ onMounted(async () => {
         :mode="EDIT"
         :multi-value="false"
         :options="statusOptions"
-        @update="onUpdate"
+        @update="(val) => onUpdate('appellative_status_status', val)"
     />
     <!-- Label Status Metatype: reference datatype -->
     <label for="">{{ $gettext("Label Metatype") }}</label>
@@ -153,7 +193,7 @@ onMounted(async () => {
         :mode="EDIT"
         :multi-value="false"
         :options="metatypeOptions"
-        @update="onUpdate"
+        @update="(val) => onUpdate('appellative_status_status_metatype', val)"
     />
     <!-- Label Temporal Validity Start: date -->
     <label for="">{{ $gettext("Label Temporal Validity Start") }}</label>
@@ -167,7 +207,9 @@ onMounted(async () => {
         :value="value?.appellative_status_data_assignment_actor"
         :mode="EDIT"
         :options="groupAndPersonOptions"
-        @update="onUpdate"
+        @update="
+            (val) => onUpdate('appellative_status_data_assignment_actor', val)
+        "
     />
     <!-- Sources: resource instance -->
     <label for="">{{ $gettext("Sources") }}</label>
@@ -175,7 +217,10 @@ onMounted(async () => {
         :value="value?.appellative_status_data_assignment_object_used"
         :mode="EDIT"
         :options="textualWorkOptions"
-        @update="onUpdate"
+        @update="
+            (val) =>
+                onUpdate('appellative_status_data_assignment_object_used', val)
+        "
     />
     <!-- Warrant Type: reference datatype -->
     <label for="">{{ $gettext("Warrant Type") }}</label>
@@ -184,6 +229,12 @@ onMounted(async () => {
         :mode="EDIT"
         :multi-value="false"
         :options="eventTypeOptions"
-        @update="onUpdate"
+        @update="
+            (val) => onUpdate('appellative_status_data_assignment_type', val)
+        "
     />
+    <Button
+        :label="$gettext('Update')"
+        @click="save"
+    ></Button>
 </template>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
index 8c72bffd..a7b1f622 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
@@ -10,13 +10,14 @@ import {
     OPEN_EDITOR,
     NEW,
     VIEW,
+    UPDATED,
 } from "@/arches_lingo/constants.ts";
 import { deleteSchemeLabelTile, fetchSchemeLabel } from "@/arches_lingo/api.ts";
-import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
+import LabelEditor from "@/arches_lingo/components/generic/LabelEditor.vue";
 import MetaStringViewer from "@/arches_lingo/components/generic/MetaStringViewer.vue";
 import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
 import ReferenceDatatype from "@/arches_lingo/components/generic/ReferenceDatatype.vue";
-import LabelEditor from "@/arches_lingo/components/generic/LabelEditor.vue";
+import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
 
 import type {
     AppellativeStatus,
@@ -40,8 +41,6 @@ withDefaults(
         mode?: DataComponentMode;
         tileId?: string | null;
         args?: Array<object>;
-        // todo for Johnathan - if obj empty, create new tile
-        // if obj has values, load those values into the form
     }>(),
     {
         mode: VIEW,
@@ -52,7 +51,7 @@ const schemeInstance = ref<SchemeInstance>();
 
 defineExpose({ getSectionValue });
 
-const emits = defineEmits([OPEN_EDITOR]);
+const emit = defineEmits([OPEN_EDITOR, UPDATED]);
 
 onMounted(() => {
     getSectionValue();
@@ -104,7 +103,7 @@ function editSectionValue(tileId: string) {
         (tile) => tile.tileid === tileId,
     );
     if (appellativeStatus && appellativeStatus.tileid === tileId) {
-        emits(OPEN_EDITOR, appellativeStatus.tileid);
+        emit(OPEN_EDITOR, appellativeStatus.tileid);
     } else {
         toast.add({
             severity: ERROR,
@@ -114,13 +113,9 @@ function editSectionValue(tileId: string) {
     }
 }
 
-// async function save() {
-//     // todo for Johnathan.  This function will save the values of the form back to arches.
-// }
-
-// async function update() {
-//     // todo for Johnathan.  This function will handle the update emit when the user changes values in your form - you store those values in this section.
-// }
+function update() {
+    emit(UPDATED);
+}
 </script>
 
 <template>
@@ -128,7 +123,7 @@ function editSectionValue(tileId: string) {
         <SchemeReportSection
             :title-text="$gettext('Scheme Labels')"
             :button-text="$gettext('Add New Scheme Label')"
-            @open-editor="emits(OPEN_EDITOR)"
+            @open-editor="emit(OPEN_EDITOR)"
         >
             <MetaStringViewer
                 :meta-strings="schemeInstance?.appellative_status"
@@ -190,7 +185,10 @@ function editSectionValue(tileId: string) {
             v-for="appellative_status in schemeInstance?.appellative_status"
             :key="appellative_status.tileid"
         >
-            <LabelEditor :value="appellative_status"></LabelEditor>
+            <LabelEditor
+                :value="appellative_status"
+                @update="update"
+            ></LabelEditor>
         </div>
     </div>
 </template>