From 71d1c4065a2d97b582098e563c1fe8dc9a0d5a6f Mon Sep 17 00:00:00 2001
From: Aaron Gundel <aaron.gundel@gmail.com>
Date: Mon, 23 Dec 2024 11:25:20 -0700
Subject: [PATCH] Changes to allow for a single form per tile

---
 .../generic/ResourceInstanceRelationships.vue |  2 +-
 .../components/scheme/editor/SchemeEditor.vue | 94 ++++++++-----------
 .../scheme/report/SchemeAuthority.vue         |  8 +-
 .../components/scheme/report/SchemeLabel.vue  |  8 +-
 .../scheme/report/SchemeLicense.vue           |  2 +-
 .../scheme/report/SchemeNamespace.vue         | 15 ++-
 .../components/scheme/report/SchemeNote.vue   |  2 +-
 .../scheme/report/SchemeStandard.vue          | 15 ++-
 .../components/scheme/report/SchemeUri.vue    |  2 +-
 arches_lingo/src/arches_lingo/constants.ts    |  1 +
 .../src/arches_lingo/pages/SchemePage.vue     | 12 +--
 arches_lingo/src/arches_lingo/types.ts        | 14 +++
 12 files changed, 88 insertions(+), 87 deletions(-)

diff --git a/arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue b/arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue
index 8d53ec09..a49cec35 100644
--- a/arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue
@@ -7,7 +7,7 @@ import type {
     ResourceInstanceReference,
 } from "@/arches_lingo/types";
 
-const { mode = EDIT } = defineProps<{
+const { mode = VIEW } = defineProps<{
     mode?: DataComponentMode;
     value?: ResourceInstanceReference[];
     options?: ResourceInstanceReference[];
diff --git a/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue b/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
index 4ccfc286..5484a3a3 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
@@ -1,17 +1,11 @@
 <script setup lang="ts">
-import { onBeforeUpdate, onUpdated, ref } from "vue";
+import { onBeforeUpdate, ref, watch } from "vue";
 import { useGettext } from "vue3-gettext";
 import Button from "primevue/button";
-
-import Tabs from "primevue/tabs";
-import TabList from "primevue/tablist";
-import Tab from "primevue/tab";
-import TabPanels from "primevue/tabpanels";
-import TabPanel from "primevue/tabpanel";
 import SchemeNamespace from "@/arches_lingo/components/scheme/report/SchemeNamespace.vue";
 import SchemeStandard from "@/arches_lingo/components/scheme/report/SchemeStandard.vue";
 import SchemeLabel from "@/arches_lingo/components/scheme/report/SchemeLabel.vue";
-type sectionTypes = typeof SchemeNamespace;
+import type { SectionTypes } from "@/arches_lingo/types.ts";
 
 const { $gettext } = useGettext();
 const EDIT = "edit";
@@ -20,25 +14,47 @@ const props = defineProps<{
     activeTab: string;
     tileId?: string;
 }>();
-const childRefs = ref<Array<sectionTypes>>([]);
+
+type SchemeComponent = {
+    component: SectionTypes;
+    id: string;
+    editorName: string;
+};
+
+const childRefs = ref<Array<SectionTypes>>([]);
+const currentEditor = ref<SchemeComponent>();
 const schemeComponents = [
     {
         component: SchemeLabel,
         id: "label",
-        editorTabName: $gettext("Scheme Label"),
+        editorName: $gettext("Scheme Label"),
     },
     {
         component: SchemeNamespace,
         id: "namespace",
-        editorTabName: $gettext("Scheme Namespace"),
+        editorName: $gettext("Scheme Namespace"),
     },
     {
         component: SchemeStandard,
         id: "standard",
-        editorTabName: $gettext("Scheme Standards Followed"),
+        editorName: $gettext("Scheme Standards Followed"),
     },
 ];
 
+watch(
+    props,
+    (newValue) => {
+        if (newValue) {
+            currentEditor.value =
+                schemeComponents.find((component) => {
+                    return component.id === newValue.activeTab;
+                }) || schemeComponents[0];
+            console.log(currentEditor.value);
+        }
+    },
+    { immediate: true },
+);
+
 const emit = defineEmits(["maximize", "side", "close", "updated"]);
 
 onBeforeUpdate(() => {
@@ -53,17 +69,7 @@ function toggleSize() {
     }
 }
 
-function getRef(el: object | null, index: number) {
-    if (el != null) childRefs.value[index] = el as sectionTypes;
-}
-
-async function updateScheme() {
-    await Promise.all(
-        childRefs.value.map(async (ref) => {
-            return ref.save();
-        }),
-    );
-
+function onSectionUpdate() {
     emit("updated");
 }
 </script>
@@ -98,38 +104,16 @@ async function updateScheme() {
             </div>
         </div>
     </div>
-    <div class="content">
-        <Tabs :value="activeTab">
-            <TabList>
-                <template
-                    v-for="component in schemeComponents"
-                    :key="component.id"
-                >
-                    <Tab :value="component.id">{{
-                        component.editorTabName
-                    }}</Tab>
-                </template>
-            </TabList>
-            <TabPanels>
-                <template
-                    v-for="(component, index) in schemeComponents"
-                    :key="component.id"
-                >
-                    <TabPanel :value="component.id">
-                        <component
-                            :is="component.component"
-                            v-bind="{ mode: EDIT, tileId: props.tileId }"
-                            :ref="(el) => getRef(el, index)"
-                            v-on="{ updated: onUpdated }"
-                        />
-                    </TabPanel>
-                </template>
-            </TabPanels>
-        </Tabs>
-        <Button
-            :label="$gettext('Update')"
-            @click="updateScheme"
-        ></Button>
+    <div
+        v-if="currentEditor"
+        class="content"
+    >
+        <h3>{{ currentEditor.editorName }}</h3>
+        <component
+            :is="currentEditor.component"
+            v-bind="{ mode: EDIT, tileId: tileId }"
+            v-on="{ updated: onSectionUpdate }"
+        />
     </div>
 </template>
 <style scoped>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeAuthority.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeAuthority.vue
index 88912fd3..855fc798 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeAuthority.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeAuthority.vue
@@ -2,17 +2,15 @@
 import { useGettext } from "vue3-gettext";
 import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
 const { $gettext } = useGettext();
-const save = () => {
-    console.log("save");
-};
+
 const getSectionValue = async () => {
     console.log("update");
 };
-defineExpose({ save, getSectionValue });
+defineExpose({ getSectionValue });
 </script>
 
 <template>
     <SchemeReportSection :title-text="$gettext('Trusted Authorities')">
-        abc
+        todo
     </SchemeReportSection>
 </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 dfa3e463..8e4a7eff 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
@@ -29,7 +29,7 @@ withDefaults(
     },
 );
 
-defineExpose({ save, getSectionValue });
+defineExpose({ getSectionValue });
 
 const emits = defineEmits([OPEN_EDITOR]);
 
@@ -65,9 +65,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 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.
diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLicense.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLicense.vue
index 90ba3748..02d1892e 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLicense.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLicense.vue
@@ -14,6 +14,6 @@ const { $gettext } = useGettext();
 
 <template>
     <SchemeReportSection :title-text="$gettext('License')">
-        abc
+        todo
     </SchemeReportSection>
 </template>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue
index f7e80b08..206c5f3d 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue
@@ -2,19 +2,19 @@
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
 import { useGettext } from "vue3-gettext";
-
+import Button from "primevue/button";
 import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
 import NonLocalizedString from "@/arches_lingo/components/generic/NonLocalizedString.vue";
 import {
     fetchSchemeNamespace,
     updateSchemeNamespace,
 } from "@/arches_lingo/api.ts";
+import { VIEW, EDIT, OPEN_EDITOR } from "@/arches_lingo/constants.ts";
 import type {
     DataComponentMode,
     SchemeNamespaceUpdate,
     SchemeInstance,
 } from "@/arches_lingo/types";
-import { VIEW, EDIT, OPEN_EDITOR } from "@/arches_lingo/constants.ts";
 
 const { $gettext } = useGettext();
 const schemeNamespace = ref<SchemeInstance>();
@@ -24,9 +24,9 @@ defineProps<{
     mode?: DataComponentMode;
 }>();
 
-defineEmits([OPEN_EDITOR]);
+const emit = defineEmits([OPEN_EDITOR, "updated"]);
 
-defineExpose({ save, getSectionValue });
+defineExpose({ getSectionValue });
 
 onMounted(async () => {
     getSectionValue();
@@ -37,6 +37,7 @@ async function save() {
         route.params.id as string,
         schemeNamespace.value as SchemeInstance,
     );
+    emit("updated");
 }
 
 async function getSectionValue() {
@@ -63,7 +64,7 @@ function onNamespaceNameUpdate(val: string) {
         <div v-if="!mode || mode === VIEW">
             <SchemeReportSection
                 :title-text="$gettext('Scheme Namespace')"
-                @open-editor="$emit(OPEN_EDITOR)"
+                @open-editor="emit(OPEN_EDITOR)"
             >
                 <NonLocalizedString
                     :value="schemeNamespace?.namespace?.namespace_name"
@@ -79,6 +80,10 @@ function onNamespaceNameUpdate(val: string) {
                 :mode="EDIT"
                 @update="onNamespaceNameUpdate"
             />
+            <Button
+                :label="$gettext('Update')"
+                @click="save"
+            ></Button>
         </div>
     </div>
 </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 6483a9de..5928d184 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNote.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNote.vue
@@ -15,6 +15,6 @@ const { $gettext } = useGettext();
 
 <template>
     <SchemeReportSection :title-text="$gettext('Scheme Notes')">
-        abc
+        todo
     </SchemeReportSection>
 </template>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue
index 3e617b4e..09aab8d5 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue
@@ -2,6 +2,7 @@
 import { inject, onMounted, ref, type Ref } from "vue";
 import { useRoute } from "vue-router";
 import { useGettext } from "vue3-gettext";
+import Button from "primevue/button";
 import type {
     DataComponentMode,
     ResourceInstanceReference,
@@ -20,6 +21,7 @@ import {
     VIEW,
     EDIT,
     OPEN_EDITOR,
+    UPDATED,
 } from "@/arches_lingo/constants.ts";
 import type { Language } from "@/arches_vue_utils/types.ts";
 
@@ -33,9 +35,9 @@ const { mode = VIEW } = defineProps<{
     mode?: DataComponentMode;
 }>();
 
-const emits = defineEmits([OPEN_EDITOR]);
+const emits = defineEmits([OPEN_EDITOR, UPDATED]);
 
-defineExpose({ save, getSectionValue });
+defineExpose({ getSectionValue });
 
 onMounted(async () => {
     getSectionValue();
@@ -60,7 +62,6 @@ async function save() {
         route.params.id as string,
         schemeInstance.value as SchemeInstance,
     );
-
     getSectionValue();
 }
 
@@ -84,6 +85,7 @@ async function getSectionValue() {
     });
     textualWorkOptions.value = hydratedResults;
     schemeInstance.value = scheme;
+    emits(UPDATED);
 }
 
 function onCreationUpdate(val: string[]) {
@@ -102,14 +104,13 @@ function onCreationUpdate(val: string[]) {
 </script>
 
 <template>
-    <div v-if="!mode || mode === VIEW">
+    <div v-if="mode === VIEW">
         <SchemeReportSection
             :title-text="$gettext('Scheme Standards Followed')"
             @open-editor="emits(OPEN_EDITOR)"
         >
             <ResourceInstanceRelationships
                 :value="schemeInstance?.creation?.creation_sources"
-                :mode="VIEW"
             />
             <!-- Discussion of namespace_type indicated it should not be displayed or edited manually,
                  if this changes, the ControlledListItem widget can be used.-->
@@ -122,5 +123,9 @@ function onCreationUpdate(val: string[]) {
             :mode="EDIT"
             @update="onCreationUpdate"
         />
+        <Button
+            :label="$gettext('Update')"
+            @click="save"
+        ></Button>
     </div>
 </template>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeUri.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeUri.vue
index b31483f3..072b92c2 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeUri.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeUri.vue
@@ -6,6 +6,6 @@ const { $gettext } = useGettext();
 
 <template>
     <SchemeReportSection :title-text="$gettext('Scheme URI')">
-        abc
+        todo
     </SchemeReportSection>
 </template>
diff --git a/arches_lingo/src/arches_lingo/constants.ts b/arches_lingo/src/arches_lingo/constants.ts
index a197c2a7..c1b4c758 100644
--- a/arches_lingo/src/arches_lingo/constants.ts
+++ b/arches_lingo/src/arches_lingo/constants.ts
@@ -9,6 +9,7 @@ export const CONTRAST = "contrast";
 export const EDIT = "edit";
 export const VIEW = "view";
 export const OPEN_EDITOR = "openEditor";
+export const UPDATED = "updated";
 
 export const DEFAULT_ERROR_TOAST_LIFE = 8000;
 export const SEARCH_RESULTS_PER_PAGE = 25;
diff --git a/arches_lingo/src/arches_lingo/pages/SchemePage.vue b/arches_lingo/src/arches_lingo/pages/SchemePage.vue
index d77d2e7c..de691946 100644
--- a/arches_lingo/src/arches_lingo/pages/SchemePage.vue
+++ b/arches_lingo/src/arches_lingo/pages/SchemePage.vue
@@ -9,20 +9,14 @@ import SchemeNamespace from "@/arches_lingo/components/scheme/report/SchemeNames
 import SchemeStandard from "@/arches_lingo/components/scheme/report/SchemeStandard.vue";
 import SchemeAuthority from "@/arches_lingo/components/scheme/report/SchemeAuthority.vue";
 import SchemeEditor from "@/arches_lingo/components/scheme/editor/SchemeEditor.vue";
+import type { SectionTypes } from "@/arches_lingo/types.ts";
 
 const editorVisible = ref(false);
 const sectionVisible = ref(true);
 const editorTab = ref<string>();
 const editorTileId = ref<string>();
 
-type sectionTypes =
-    | typeof SchemeLabel
-    | typeof SchemeNamespace
-    | typeof SchemeLicense
-    | typeof SchemeStandard
-    | typeof SchemeAuthority
-    | typeof SchemeNote;
-const childRefs = ref<Array<sectionTypes>>([]);
+const childRefs = ref<Array<SectionTypes>>([]);
 const onMaximize = () => {
     editorVisible.value = true;
     sectionVisible.value = false;
@@ -61,7 +55,7 @@ const components = [
 ];
 
 const getRef = (el: object | null, index: number) => {
-    if (el != null) childRefs.value[index] = el as sectionTypes;
+    if (el != null) childRefs.value[index] = el as SectionTypes;
 };
 </script>
 
diff --git a/arches_lingo/src/arches_lingo/types.ts b/arches_lingo/src/arches_lingo/types.ts
index 088f5a08..898ca1b2 100644
--- a/arches_lingo/src/arches_lingo/types.ts
+++ b/arches_lingo/src/arches_lingo/types.ts
@@ -2,6 +2,12 @@ import type { Ref } from "vue";
 import type { TreeNode } from "primevue/treenode";
 import type { Label } from "@/arches_vue_utils/types.ts";
 import type { EDIT, VIEW } from "./constants";
+import SchemeNamespace from "@/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue";
+import SchemeLabel from "@/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue";
+import SchemeLicense from "@/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLicense.vue";
+import SchemeStandard from "@/arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue";
+import SchemeAuthority from "@/arches_lingo/src/arches_lingo/components/scheme/report/SchemeAuthority.vue";
+import SchemeNote from "@/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNote.vue";
 
 export interface User {
     first_name: string;
@@ -128,3 +134,11 @@ export interface SearchResultItem {
     }[];
     polyhierarchical: boolean;
 }
+
+export type SectionTypes =
+    | typeof SchemeLabel
+    | typeof SchemeNamespace
+    | typeof SchemeLicense
+    | typeof SchemeStandard
+    | typeof SchemeAuthority
+    | typeof SchemeNote;