From 95a97c5c58c772995ebf83e2775eacef50259409 Mon Sep 17 00:00:00 2001
From: Aaron Gundel <aaron.gundel@gmail.com>
Date: Tue, 3 Dec 2024 15:24:12 -0700
Subject: [PATCH] pr feedback

---
 .../components/generic/ControlledListItem.vue | 12 ++---
 .../components/generic/NonLocalizedString.vue |  9 ++--
 .../generic/NonLocalizedStringEditor.vue      |  4 ++
 .../components/scheme/editor/SchemeEditor.vue | 44 +++++++------------
 .../scheme/report/SchemeNamespace.vue         | 24 +++++-----
 5 files changed, 42 insertions(+), 51 deletions(-)

diff --git a/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue b/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue
index 377063f0..d92da5e6 100644
--- a/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue
@@ -1,22 +1,22 @@
-<script lang="ts">
-const UPDATE = "update";
-</script>
 <script setup lang="ts">
 import type { ControlledListItem } from "@/arches_lingo/types";
 import ControlledListItemViewer from "@/arches_lingo/components/generic/ControlledListItemViewer.vue";
+const VIEW = "view";
+const EDIT = "edit";
 
 type DataComponentMode = "edit" | "view";
+
 const props = defineProps<{
     mode?: DataComponentMode;
     value?: ControlledListItem;
 }>();
-defineEmits([UPDATE]);
+defineEmits(["update"]);
 </script>
 <template>
     <div>
-        <div v-if="!props.mode || props.mode === 'view'">
+        <div v-if="!props.mode || props.mode === VIEW">
             <ControlledListItemViewer :value="props.value" />
         </div>
-        <div v-if="props.mode === 'edit'"></div>
+        <div v-if="props.mode === EDIT"></div>
     </div>
 </template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue b/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue
index 0dfe8c15..c8a7bdcd 100644
--- a/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue
@@ -1,15 +1,12 @@
-<script lang="ts">
-const UPDATE = "update";
-</script>
 <script setup lang="ts">
 import NonLocalizedStringViewer from "@/arches_lingo/components/generic/NonLocalizedStringViewer.vue";
-import NonLocalizedStringEditor from "@/arches_lingo/components/generic//NonLocalizedStringEditor.vue";
+import NonLocalizedStringEditor from "@/arches_lingo/components/generic/NonLocalizedStringEditor.vue";
 
 type DataComponentMode = "edit" | "view";
 const props = defineProps<{ mode?: DataComponentMode; value?: string }>();
-const emits = defineEmits([UPDATE]);
+const emits = defineEmits(["update"]);
 const onUpdate = (val: string) => {
-    emits(UPDATE, val);
+    emits("update", val);
 };
 </script>
 <template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/NonLocalizedStringEditor.vue b/arches_lingo/src/arches_lingo/components/generic/NonLocalizedStringEditor.vue
index 164fdb91..c862dd9d 100644
--- a/arches_lingo/src/arches_lingo/components/generic/NonLocalizedStringEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/NonLocalizedStringEditor.vue
@@ -3,11 +3,15 @@ import { ref, watch } from "vue";
 import InputText from "primevue/inputtext";
 
 const props = defineProps<{ value: string }>();
+
 const updateableValue = ref<string>(props.value as string);
+
 const emit = defineEmits(["update"]);
+
 watch(props, (newValue) => {
     updateableValue.value = newValue.value;
 });
+
 watch(updateableValue, (newValue) => {
     emit("update", newValue);
 });
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 6b22e4a2..5ab78580 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
@@ -9,26 +9,19 @@ import TabPanels from "primevue/tabpanels";
 import TabPanel from "primevue/tabpanel";
 import SchemeNamespace from "../report/SchemeNamespace.vue";
 import { onBeforeUpdate, onUpdated, ref } from "vue";
-import type { DataComponentMode } from "@/arches_lingo/types";
 
-const { $gettext } = useGettext();
+type sectionTypes = typeof SchemeNamespace;
 
+const { $gettext } = useGettext();
+const EDIT = "edit";
 const props = defineProps<{
     editorMax: boolean;
     activeTab: string;
 }>();
-type sectionTypes = typeof SchemeNamespace;
 const childRefs = ref<Array<sectionTypes>>([]);
-const editMode: DataComponentMode = "edit";
 const schemeComponents = [
     {
         component: SchemeNamespace,
-        props: {
-            mode: editMode,
-        },
-        on: {
-            update: onUpdated,
-        },
         id: "namespace",
         editorTabName: $gettext("Scheme Namespace"),
     },
@@ -37,36 +30,31 @@ const schemeComponents = [
 const emit = defineEmits(["maximize", "side", "close", "updated"]);
 
 
-const toggleSize = () => {
+onBeforeUpdate(() => {
+    childRefs.value = [];
+});
+
+function toggleSize() {
     if (props.editorMax) {
         emit("maximize");
     } else {
         emit("side");
     }
-};
-
-schemeComponents.map((x) => {
-    x.props.mode = "edit";
-});
+}
 
-const getRef = (el: object | null, index: number) => {
+function getRef(el: object | null, index: number) {
     if (el != null) childRefs.value[index] = el as sectionTypes;
-};
-
-onBeforeUpdate(() => {
-    childRefs.value = [];
-});
+}
 
-const updateScheme = async () => {
+async function updateScheme() {
     await Promise.all(
         childRefs.value.map(async (ref) => {
             return ref.save();
         }),
     );
 
-    emit('updated');
-};
-
+    emit("updated");
+}
 </script>
 
 <template>
@@ -120,9 +108,9 @@ const updateScheme = async () => {
                         <TabPanel :value="component.id">
                             <component
                                 :is="component.component"
-                                v-bind="component.props"
+                                v-bind="{ mode: EDIT }"
                                 :ref="(el) => getRef(el, index)"
-                                v-on="component.on"
+                                v-on="onUpdated"
                             />
                         </TabPanel>
                     </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 af6c85da..b19a3356 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue
@@ -19,30 +19,32 @@ import type {
 } from "@/arches_lingo/types";
 
 const { $gettext } = useGettext();
-
 const schemeNamespace = ref<SchemeNamespace>();
 const route = useRoute();
+
 defineProps<{
     mode?: DataComponentMode;
 }>();
+
 defineEmits([OPEN_EDITOR]);
 
-const save = async () => {
+defineExpose({ save, getSectionValue });
+
+onMounted(async () => {
+    getSectionValue();
+});
+
+async function save() {
     await updateSchemeNamespace(
         route.params.id as string,
         schemeNamespace.value as SchemeNamespace,
     );
-};
-const getSectionValue = async () => {
+}
+
+async function getSectionValue() {
     const response = await fetchSchemeNamespace(route.params.id as string);
     schemeNamespace.value = response;
-};
-
-defineExpose({ save, getSectionValue });
-
-onMounted(async () => {
-    getSectionValue();
-});
+}
 
 const onNamespaceNameUpdate = (val: string) => {
     const namespaceValue = schemeNamespace.value as SchemeNamespaceUpdate;