Changes to allow for a single form per tile

archesproject · Dec 23, 2024 · 71d1c40 · 71d1c40
1 parent b56e4aa
commit 71d1c40
Show file tree

Hide file tree

Showing 12 changed files with 88 additions and 87 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>