From 21057dac6cadd72806992907355d8741736aad97 Mon Sep 17 00:00:00 2001
From: Aaron <aaron.gundel@gmail.com>
Date: Thu, 2 Jan 2025 13:06:25 -0700
Subject: [PATCH] Changes to allow for a single form per tile (#160)

* Changes to allow for a single form per tile

* move section types to prep for conflict

* PR feedback

* pr feedback

* purge tab

* purge more tabs
---
 .../components/generic/LabelViewer.vue        |  1 -
 .../components/scheme/editor/SchemeEditor.vue | 92 ++++++++-----------
 .../scheme/report/SchemeAuthority.vue         |  8 +-
 .../components/scheme/report/SchemeLabel.vue  |  8 +-
 .../scheme/report/SchemeLicense.vue           |  2 +-
 .../scheme/report/SchemeNamespace.vue         | 23 +++--
 .../scheme/report/SchemeStandard.vue          | 16 +++-
 .../components/scheme/report/SchemeUri.vue    |  2 +-
 arches_lingo/src/arches_lingo/constants.ts    |  1 +
 .../src/arches_lingo/pages/SchemePage.vue     | 10 +-
 arches_lingo/src/arches_lingo/types.ts        | 14 +--
 11 files changed, 87 insertions(+), 90 deletions(-)

diff --git a/arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue b/arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue
index eea4fb6d..8ea87646 100644
--- a/arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue
@@ -162,4 +162,3 @@ function confirmDelete(tileId: string) {
     margin: 0 0.5rem;
 }
 </style>
-
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 a113a5d4..8beadd54 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
@@ -1,13 +1,7 @@
 <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";
@@ -18,33 +12,53 @@ const { $gettext } = useGettext();
 const EDIT = "edit";
 const props = defineProps<{
     editorMax: boolean;
-    activeTab: string;
+    editorForm: string;
     tileId?: string;
 }>();
+
+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"),
     },
     {
         component: SchemeNote,
         id: "note",
-        editorTabName: $gettext("Scheme Notes"),
+        editorName: $gettext("Scheme Notes"),
     },
 ];
 
+watch(
+    props,
+    (newValue) => {
+        if (newValue) {
+            currentEditor.value = schemeComponents.find((component) => {
+                return component.id === newValue.editorForm;
+            });
+        }
+    },
+    { immediate: true },
+);
+
 const emit = defineEmits(["maximize", "side", "close", "updated"]);
 
 onBeforeUpdate(() => {
@@ -59,17 +73,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>
@@ -104,38 +108,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 7076c69f..005c13f0 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
@@ -39,7 +39,7 @@ withDefaults(
     },
 );
 
-defineExpose({ save, getSectionValue });
+defineExpose({ getSectionValue });
 
 const emits = defineEmits([OPEN_EDITOR]);
 
@@ -100,9 +100,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 a4733ba5..ec8f15c4 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue
@@ -2,20 +2,26 @@
 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,
+    ERROR,
+    UPDATED,
+} from "@/arches_lingo/constants.ts";
+import { useToast } from "primevue/usetoast";
 import type {
     DataComponentMode,
     SchemeNamespaceUpdate,
     SchemeInstance,
 } from "@/arches_lingo/types";
-import { VIEW, EDIT, OPEN_EDITOR, ERROR } from "@/arches_lingo/constants.ts";
-import { useToast } from "primevue/usetoast";
 
 const toast = useToast();
 const { $gettext } = useGettext();
@@ -26,9 +32,9 @@ defineProps<{
     mode?: DataComponentMode;
 }>();
 
-defineEmits([OPEN_EDITOR]);
+const emit = defineEmits([OPEN_EDITOR, UPDATED]);
 
-defineExpose({ save, getSectionValue });
+defineExpose({ getSectionValue });
 
 onMounted(async () => {
     getSectionValue();
@@ -52,6 +58,7 @@ async function save() {
                       ),
         });
     }
+    emit(UPDATED);
 }
 
 async function getSectionValue() {
@@ -91,7 +98,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="schemeInstance?.namespace?.namespace_name"
@@ -107,6 +114,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/SchemeStandard.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue
index 9c382e1b..3897f71e 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,
     ERROR,
 } from "@/arches_lingo/constants.ts";
 import type { Language } from "@/arches_vue_utils/types.ts";
@@ -36,9 +38,9 @@ const { mode = VIEW } = defineProps<{
     mode?: DataComponentMode;
 }>();
 
-const emits = defineEmits([OPEN_EDITOR]);
+const emit = defineEmits([OPEN_EDITOR, UPDATED]);
 
-defineExpose({ save, getSectionValue });
+defineExpose({ getSectionValue });
 
 onMounted(async () => {
     getSectionValue();
@@ -76,6 +78,7 @@ async function save() {
     }
 
     getSectionValue();
+    emit(UPDATED);
 }
 
 async function getCachedOptions(): Promise<
@@ -154,14 +157,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)"
+            @open-editor="emit(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.-->
@@ -174,5 +176,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 f2113083..ba9f2d93 100644
--- a/arches_lingo/src/arches_lingo/pages/SchemePage.vue
+++ b/arches_lingo/src/arches_lingo/pages/SchemePage.vue
@@ -13,7 +13,7 @@ import type { SectionTypes } from "@/arches_lingo/types.ts";
 
 const editorVisible = ref(false);
 const sectionVisible = ref(true);
-const editorTab = ref<string>();
+const editorForm = ref<string>();
 const editorTileId = ref<string>();
 
 const childRefs = ref<Array<SectionTypes>>([]);
@@ -33,8 +33,8 @@ const onClose = () => {
     sectionVisible.value = true;
 };
 
-const onOpenEditor = (tab: string, tileId: string) => {
-    editorTab.value = tab;
+const onOpenEditor = (form: string, tileId: string) => {
+    editorForm.value = form;
     editorVisible.value = true;
     sectionVisible.value = true;
     editorTileId.value = tileId;
@@ -88,9 +88,9 @@ const getRef = (el: object | null, index: number) => {
             :min-size="33"
         >
             <SchemeEditor
-                v-if="editorTab"
+                v-if="editorForm"
                 :editor-max="sectionVisible"
-                :active-tab="editorTab"
+                :editor-form="editorForm"
                 :tile-id="editorTileId"
                 @maximize="onMaximize"
                 @side="onSide"
diff --git a/arches_lingo/src/arches_lingo/types.ts b/arches_lingo/src/arches_lingo/types.ts
index ad9074fe..b5b22234 100644
--- a/arches_lingo/src/arches_lingo/types.ts
+++ b/arches_lingo/src/arches_lingo/types.ts
@@ -1,13 +1,13 @@
 import type { Ref } from "vue";
 import type { TreeNode } from "primevue/treenode";
 import type { Label } from "@/arches_vue_utils/types.ts";
-import SchemeLabel from "@/arches_lingo/components/scheme/report/SchemeLabel.vue";
-import SchemeNamespace from "@/arches_lingo/components/scheme/report/SchemeNamespace.vue";
-import SchemeLicense from "@/arches_lingo/components/scheme/report/SchemeLicense.vue";
-import SchemeStandard from "@/arches_lingo/components/scheme/report/SchemeStandard.vue";
-import SchemeAuthority from "@/arches_lingo/components/scheme/report/SchemeAuthority.vue";
-import SchemeNote from "@/arches_lingo/components/scheme/report/SchemeNote.vue";
-import type { EDIT, VIEW } from "@/constants.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;