From 0693917030da47abd3979497873e29658a71d35f Mon Sep 17 00:00:00 2001
From: Aaron Gundel <aaron.gundel@gmail.com>
Date: Mon, 18 Nov 2024 10:39:23 -0700
Subject: [PATCH 1/3] Adds namespace sec with nonlocalized string widget

---
 .../pkg/graphs/resource_models/Scheme.json    |  15 +-
 .../resource_models/scheme_rdm_system.json    |  13 +-
 arches_lingo/serializers.py                   |   8 +
 arches_lingo/src/arches_lingo/api.ts          |  25 ++++
 .../components/generic/ControlledListItem.vue |  22 +++
 .../generic/ControlledListItemViewer.vue      |   8 +
 .../components/generic/NonLocalizedString.vue |  27 ++++
 .../generic/NonLocalizedStringEditor.vue      |  22 +++
 .../generic/NonLocalizedStringViewer.vue      |   6 +
 .../components/scheme/editor/SchemeEditor.vue | 137 ++++++++++++++----
 .../scheme/report/SchemeAuthority.vue         |   7 +
 .../scheme/report/SchemeLicense.vue           |   8 +
 .../scheme/report/SchemeNamespace.vue         |  84 +++++++++++
 .../components/scheme/report/SchemeNote.vue   |   9 ++
 .../scheme/report/SchemeStandard.vue          |   9 ++
 .../components/scheme/report/SchemeUri.vue    |   1 +
 arches_lingo/src/arches_lingo/constants.ts    |   2 +-
 .../src/arches_lingo/pages/SchemePage.vue     |  50 ++++++-
 arches_lingo/src/arches_lingo/types.ts        |  36 +++++
 arches_lingo/templates/arches_urls.htm        |   1 +
 arches_lingo/urls.py                          |   6 +
 arches_lingo/views/api/pythonic_models.py     |   6 +
 22 files changed, 446 insertions(+), 56 deletions(-)
 create mode 100644 arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue
 create mode 100644 arches_lingo/src/arches_lingo/components/generic/ControlledListItemViewer.vue
 create mode 100644 arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue
 create mode 100644 arches_lingo/src/arches_lingo/components/generic/NonLocalizedStringEditor.vue
 create mode 100644 arches_lingo/src/arches_lingo/components/generic/NonLocalizedStringViewer.vue
 create mode 100644 arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue

diff --git a/arches_lingo/pkg/graphs/resource_models/Scheme.json b/arches_lingo/pkg/graphs/resource_models/Scheme.json
index eeb75ab8..50a6675b 100644
--- a/arches_lingo/pkg/graphs/resource_models/Scheme.json
+++ b/arches_lingo/pkg/graphs/resource_models/Scheme.json
@@ -1463,20 +1463,13 @@
                 {
                     "card_id": "92c68f1f-423c-11ee-8a8d-11afefc4bff7",
                     "config": {
-                        "defaultValue": {
-                            "en": {
-                                "direction": "ltr",
-                                "value": ""
-                            }
-                        },
+                        "defaultValue": "",
                         "i18n_properties": [
                             "placeholder"
                         ],
                         "label": "Namespace Name",
                         "maxLength": null,
-                        "placeholder": {
-                            "en": "Enter text"
-                        },
+                        "placeholder":"Enter text",
                         "uneditable": false,
                         "width": "100%"
                     },
@@ -1488,7 +1481,7 @@
                     "sortorder": 0,
                     "source_identifier_id": null,
                     "visible": true,
-                    "widget_id": "10000000-0000-0000-0000-000000000001"
+                    "widget_id": "46ef064b-2611-4708-9f52-60136bd8a65b"
                 },
                 {
                     "card_id": "87fac835-423c-11ee-8a8d-11afefc4bff7",
@@ -3196,7 +3189,7 @@
                 {
                     "alias": "namespace_name",
                     "config": {},
-                    "datatype": "string",
+                    "datatype": "non-localized-string",
                     "description": null,
                     "exportable": false,
                     "fieldname": null,
diff --git a/arches_lingo/pkg/graphs/resource_models/scheme_rdm_system.json b/arches_lingo/pkg/graphs/resource_models/scheme_rdm_system.json
index e900b711..3a9b37c7 100644
--- a/arches_lingo/pkg/graphs/resource_models/scheme_rdm_system.json
+++ b/arches_lingo/pkg/graphs/resource_models/scheme_rdm_system.json
@@ -3393,20 +3393,13 @@
                 {
                     "card_id": "5b8894b3-48aa-11ee-8a8d-11afefc4bff7",
                     "config": {
-                        "defaultValue": {
-                            "en": {
-                                "direction": "ltr",
-                                "value": ""
-                            }
-                        },
+                        "defaultValue": "",
                         "i18n_properties": [
                             "placeholder"
                         ],
                         "label": "Namespace Name",
                         "maxLength": null,
-                        "placeholder": {
-                            "en": "Enter text"
-                        },
+                        "placeholder": "Enter text",
                         "uneditable": false,
                         "width": "100%"
                     },
@@ -3417,7 +3410,7 @@
                     "node_id": "5b8894c0-48aa-11ee-8a8d-11afefc4bff7",
                     "sortorder": 0,
                     "visible": true,
-                    "widget_id": "10000000-0000-0000-0000-000000000001"
+                    "widget_id": "46ef064b-2611-4708-9f52-60136bd8a65b"
                 },
                 {
                     "card_id": "5b8894b6-48aa-11ee-8a8d-11afefc4bff7",
diff --git a/arches_lingo/serializers.py b/arches_lingo/serializers.py
index 3fcd733c..07c2baba 100644
--- a/arches_lingo/serializers.py
+++ b/arches_lingo/serializers.py
@@ -18,6 +18,14 @@ class Meta:
         fields = "__all__"
 
 
+class SchemeNamespaceSerializer(ArchesModelSerializer):
+    class Meta:
+        model = ResourceInstance
+        graph_slug = "scheme"
+        nodegroups = ["namespace"]
+        fields = "__all__"
+
+
 class ConceptStatementSerializer(ArchesTileSerializer):
     class Meta:
         model = TileModel
diff --git a/arches_lingo/src/arches_lingo/api.ts b/arches_lingo/src/arches_lingo/api.ts
index ac148ef9..a75131da 100644
--- a/arches_lingo/src/arches_lingo/api.ts
+++ b/arches_lingo/src/arches_lingo/api.ts
@@ -1,5 +1,6 @@
 import arches from "arches";
 import Cookies from "js-cookie";
+import type { SchemeNamespace } from "@/arches_lingo/types";
 
 function getToken() {
     const token = Cookies.get("csrftoken");
@@ -37,6 +38,30 @@ export const fetchUser = async () => {
     return parsed;
 };
 
+export const fetchSchemeNamespace = async (schemeId: string) => {
+    const response = await fetch(arches.urls.api_uri_namespace(schemeId));
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};
+
+export const updateSchemeNamespace = async (
+    schemeId: string,
+    schemeNamespace: SchemeNamespace,
+) => {
+    const response = await fetch(arches.urls.api_uri_namespace(schemeId), {
+        method: "PATCH",
+        headers: {
+            "X-CSRFTOKEN": getToken(),
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(schemeNamespace),
+    });
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};
+
 export const fetchSearchResults = async (
     searchTerm: string,
     items: number,
diff --git a/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue b/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue
new file mode 100644
index 00000000..377063f0
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue
@@ -0,0 +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";
+
+type DataComponentMode = "edit" | "view";
+const props = defineProps<{
+    mode?: DataComponentMode;
+    value?: ControlledListItem;
+}>();
+defineEmits([UPDATE]);
+</script>
+<template>
+    <div>
+        <div v-if="!props.mode || props.mode === 'view'">
+            <ControlledListItemViewer :value="props.value" />
+        </div>
+        <div v-if="props.mode === 'edit'"></div>
+    </div>
+</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/ControlledListItemViewer.vue b/arches_lingo/src/arches_lingo/components/generic/ControlledListItemViewer.vue
new file mode 100644
index 00000000..063e6465
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/generic/ControlledListItemViewer.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import type { ControlledListItem } from "@/arches_lingo/types";
+
+const props = defineProps<{ value?: ControlledListItem }>();
+</script>
+<template>
+    <p>{{ props.value?.labels }}</p>
+</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue b/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue
new file mode 100644
index 00000000..0dfe8c15
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue
@@ -0,0 +1,27 @@
+<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";
+
+type DataComponentMode = "edit" | "view";
+const props = defineProps<{ mode?: DataComponentMode; value?: string }>();
+const emits = defineEmits([UPDATE]);
+const onUpdate = (val: string) => {
+    emits(UPDATE, val);
+};
+</script>
+<template>
+    <div>
+        <div v-if="!props.mode || props.mode === 'view'">
+            <NonLocalizedStringViewer :value="props.value ?? ''" />
+        </div>
+        <div v-if="props.mode === 'edit'">
+            <NonLocalizedStringEditor
+                :value="props.value ?? ''"
+                @update="onUpdate"
+            />
+        </div>
+    </div>
+</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/NonLocalizedStringEditor.vue b/arches_lingo/src/arches_lingo/components/generic/NonLocalizedStringEditor.vue
new file mode 100644
index 00000000..164fdb91
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/generic/NonLocalizedStringEditor.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+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);
+});
+</script>
+<template>
+    <div>
+        <InputText
+            v-model="updateableValue"
+            type="text"
+        />
+    </div>
+</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/NonLocalizedStringViewer.vue b/arches_lingo/src/arches_lingo/components/generic/NonLocalizedStringViewer.vue
new file mode 100644
index 00000000..b0570b45
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/generic/NonLocalizedStringViewer.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+const props = defineProps<{ value?: string | null }>();
+</script>
+<template>
+    <p>{{ props.value }}</p>
+</template>
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 3fda8c94..6b22e4a2 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
@@ -2,13 +2,40 @@
 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 "../report/SchemeNamespace.vue";
+import { onBeforeUpdate, onUpdated, ref } from "vue";
+import type { DataComponentMode } from "@/arches_lingo/types";
+
 const { $gettext } = useGettext();
 
 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"),
+    },
+];
+
+const emit = defineEmits(["maximize", "side", "close", "updated"]);
 
-const emit = defineEmits(["maximize", "side", "close"]);
 
 const toggleSize = () => {
     if (props.editorMax) {
@@ -17,37 +44,95 @@ const toggleSize = () => {
         emit("side");
     }
 };
+
+schemeComponents.map((x) => {
+    x.props.mode = "edit";
+});
+
+const getRef = (el: object | null, index: number) => {
+    if (el != null) childRefs.value[index] = el as sectionTypes;
+};
+
+onBeforeUpdate(() => {
+    childRefs.value = [];
+});
+
+const updateScheme = async () => {
+    await Promise.all(
+        childRefs.value.map(async (ref) => {
+            return ref.save();
+        }),
+    );
+
+    emit('updated');
+};
+
 </script>
 
 <template>
-    <div class="header">
-        <div>
-            <h3>{{ $gettext("Scheme Editor Tools") }}</h3>
+    <div>
+        <div class="header">
             <div>
-                <Button
-                    :aria-label="$gettext('toggle editor size')"
-                    @click="toggleSize"
-                >
-                    <i
-                        :class="{
-                            pi: true,
-                            'pi-window-maximize': props.editorMax,
-                            'pi-window-minimize': !props.editorMax,
-                        }"
-                        aria-hidden="true"
-                    />
-                </Button>
-                <Button
-                    :aria-label="$gettext('close editor')"
-                    @click="$emit('close')"
-                >
-                    <i
-                        class="pi pi-times"
-                        aria-hidden="true"
-                    />
-                </Button>
+                <h3>{{ $gettext("Editor Tools") }}</h3>
+                <div>
+                    <Button
+                        :aria-label="$gettext('toggle editor size')"
+                        @click="toggleSize"
+                    >
+                        <i
+                            :class="{
+                                pi: true,
+                                'pi-window-maximize': props.editorMax,
+                                'pi-window-minimize': !props.editorMax,
+                            }"
+                            aria-hidden="true"
+                        />
+                    </Button>
+                    <Button
+                        :aria-label="$gettext('close editor')"
+                        @click="$emit('close')"
+                    >
+                        <i
+                            class="pi pi-times"
+                            aria-hidden="true"
+                        />
+                    </Button>
+                </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="component.props"
+                                :ref="(el) => getRef(el, index)"
+                                v-on="component.on"
+                            />
+                        </TabPanel>
+                    </template>
+                </TabPanels>
+            </Tabs>
+            <Button
+                :label="$gettext('Update')"
+                @click="updateScheme"
+            ></Button>
+        </div>
     </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 38f1233c..88912fd3 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeAuthority.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeAuthority.vue
@@ -2,6 +2,13 @@
 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 });
 </script>
 
 <template>
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 e5960c60..90ba3748 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLicense.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLicense.vue
@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import { useGettext } from "vue3-gettext";
 import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
+const save = () => {
+    console.log("save");
+};
+const getSectionValue = async () => {
+    console.log("update");
+};
+
+defineExpose({ save, getSectionValue });
 const { $gettext } = useGettext();
 </script>
 
diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue
new file mode 100644
index 00000000..af6c85da
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue
@@ -0,0 +1,84 @@
+<script lang="ts">
+const OPEN_EDITOR = "openEditor";
+</script>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import { useGettext } from "vue3-gettext";
+
+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 type {
+    DataComponentMode,
+    SchemeNamespaceUpdate,
+    SchemeNamespace,
+} from "@/arches_lingo/types";
+
+const { $gettext } = useGettext();
+
+const schemeNamespace = ref<SchemeNamespace>();
+const route = useRoute();
+defineProps<{
+    mode?: DataComponentMode;
+}>();
+defineEmits([OPEN_EDITOR]);
+
+const save = async () => {
+    await updateSchemeNamespace(
+        route.params.id as string,
+        schemeNamespace.value as SchemeNamespace,
+    );
+};
+const getSectionValue = async () => {
+    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;
+    if (!namespaceValue?.namespace) {
+        namespaceValue.namespace = {
+            namespace_name: val,
+            namespace_type: [{ value: "namespace" }],
+        };
+    } else {
+        namespaceValue.namespace.namespace_name = val;
+        namespaceValue.namespace.namespace_type = [{ value: "namespace" }];
+    }
+};
+</script>
+
+<template>
+    <div>
+        <div v-if="!mode || mode === 'view'">
+            <SchemeReportSection
+                :title-text="$gettext('Scheme Namespace')"
+                @open-editor="$emit(OPEN_EDITOR)"
+            >
+                <NonLocalizedString
+                    :value="schemeNamespace?.namespace?.namespace_name"
+                    mode="view"
+                />
+                <!-- Discussion of namespace_type indicated it should not be displayed or edited manually,
+                 if this changes, the ControlledListItem widget can be used.-->
+            </SchemeReportSection>
+        </div>
+        <div v-if="mode === 'edit'">
+            <NonLocalizedString
+                :value="schemeNamespace?.namespace?.namespace_name ?? ''"
+                mode="edit"
+                @update="onNamespaceNameUpdate"
+            />
+        </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 a8669eab..6483a9de 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNote.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNote.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import { useGettext } from "vue3-gettext";
 import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
+
+const save = () => {
+    console.log("save");
+};
+const getSectionValue = async () => {
+    console.log("update");
+};
+
+defineExpose({ save, getSectionValue });
 const { $gettext } = useGettext();
 </script>
 
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 57f08257..6202ffda 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import { useGettext } from "vue3-gettext";
 import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
+
+const save = () => {
+    console.log("save");
+};
+const getSectionValue = async () => {
+    console.log("update");
+};
+
+defineExpose({ save, getSectionValue });
 const { $gettext } = useGettext();
 </script>
 
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..00d51a5f 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeUri.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeUri.vue
@@ -9,3 +9,4 @@ const { $gettext } = useGettext();
         abc
     </SchemeReportSection>
 </template>
+
diff --git a/arches_lingo/src/arches_lingo/constants.ts b/arches_lingo/src/arches_lingo/constants.ts
index fcbecebc..0bf74a1f 100644
--- a/arches_lingo/src/arches_lingo/constants.ts
+++ b/arches_lingo/src/arches_lingo/constants.ts
@@ -1,5 +1,5 @@
 import type { InjectionKey, Ref } from "vue";
-import type { Language } from "@/arches_vue_utils/types";
+import type { Language } from "@/arches_vue_utils/types.ts";
 import type { Concept, UserRefAndSetter } from "@/arches_lingo/types.ts";
 
 export const ANONYMOUS = "anonymous";
diff --git a/arches_lingo/src/arches_lingo/pages/SchemePage.vue b/arches_lingo/src/arches_lingo/pages/SchemePage.vue
index a6336c75..b322b5a2 100644
--- a/arches_lingo/src/arches_lingo/pages/SchemePage.vue
+++ b/arches_lingo/src/arches_lingo/pages/SchemePage.vue
@@ -4,14 +4,21 @@ import Splitter from "primevue/splitter";
 import SplitterPanel from "primevue/splitterpanel";
 import SchemeLicense from "@/arches_lingo/components/scheme/report/SchemeLicense.vue";
 import SchemeNote from "@/arches_lingo/components/scheme/report/SchemeNote.vue";
-import SchemeUri from "@/arches_lingo/components/scheme/report/SchemeUri.vue";
+import SchemeNamespace from "@/arches_lingo/components/scheme/report/SchemeNamespace.vue";
 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";
 
 const editorVisible = ref(true);
 const sectionVisible = ref(true);
-
+const editorTab = ref<string>();
+type sectionTypes =
+    | typeof SchemeNamespace
+    | typeof SchemeLicense
+    | typeof SchemeStandard
+    | typeof SchemeAuthority
+    | typeof SchemeNote;
+const childRefs = ref<Array<sectionTypes>>([]);
 const onMaximize = () => {
     editorVisible.value = true;
     sectionVisible.value = false;
@@ -28,10 +35,28 @@ const onClose = () => {
     sectionVisible.value = true;
 };
 
-const onOpenEditor = () => {
+const onOpenEditor = (tab: string) => {
+    editorTab.value = tab;
     editorVisible.value = true;
     sectionVisible.value = true;
 };
+const onUpdated = () => {
+    childRefs.value.forEach((ref) => {
+        ref?.getSectionValue();
+    });
+};
+
+const components = [
+    { component: SchemeNote, id: "note", props: {} },
+    { component: SchemeAuthority, id: "authority", props: {} },
+    { component: SchemeStandard, id: "standard", props: {} },
+    { component: SchemeLicense, id: "license", props: {} },
+    { component: SchemeNamespace, id: "namespace", props: {} },
+];
+
+const getRef = (el: object | null, index: number) => {
+    if (el != null) childRefs.value[index] = el as sectionTypes;
+};
 </script>
 
 <template>
@@ -41,21 +66,30 @@ const onOpenEditor = () => {
                 v-if="sectionVisible"
                 size="75"
             >
-                <SchemeNote @open-editor="onOpenEditor" />
-                <SchemeAuthority @open-editor="onOpenEditor" />
-                <SchemeStandard @open-editor="onOpenEditor" />
-                <SchemeLicense @open-editor="onOpenEditor" />
-                <SchemeUri @open-editor="onOpenEditor" />
+                <template
+                    v-for="(component, index) in components"
+                    :key="component.id"
+                >
+                    <component
+                        :is="component.component"
+                        :ref="(el) => getRef(el, index)"
+                        v-bind="component.props"
+                        @open-editor="onOpenEditor(component.id)"
+                    />
+                </template>
             </SplitterPanel>
             <SplitterPanel
                 v-if="editorVisible"
                 size="25"
             >
                 <SchemeEditor
+                    v-if="editorTab"
                     :editor-max="sectionVisible"
+                    :active-tab="editorTab"
                     @maximize="onMaximize"
                     @side="onSide"
                     @close="onClose"
+                    @updated="onUpdated"
                 />
             </SplitterPanel>
         </Splitter>
diff --git a/arches_lingo/src/arches_lingo/types.ts b/arches_lingo/src/arches_lingo/types.ts
index 06f1c6ce..8b22ac54 100644
--- a/arches_lingo/src/arches_lingo/types.ts
+++ b/arches_lingo/src/arches_lingo/types.ts
@@ -30,6 +30,42 @@ export interface Scheme {
     top_concepts: Concept[];
 }
 
+export interface ControlledListeItemLabelValue {
+    id: string;
+    valuetype_id: string;
+    language_id: string;
+    value: string;
+    list_item_id: string;
+}
+
+export interface ControlledListItem {
+    list_id: string;
+    uri: string;
+    sortorder: number;
+    guide: boolean;
+    labels: ControlledListeItemLabelValue[];
+}
+
+interface ControlledListItemValue {
+    value: string;
+}
+
+export interface SchemeNamespaceUpdate {
+    namespace?: {
+        namespace_name: string;
+        namespace_type: ControlledListItemValue[] | ControlledListItem[];
+    };
+}
+
+export interface SchemeNamespace {
+    namespace?: {
+        namespace_name: string;
+        namespace_type: ControlledListItem[];
+    };
+}
+
+export type DataComponentMode = "edit" | "view";
+
 export interface NodeAndParentInstruction {
     node: TreeNode;
     shouldHideSiblings: boolean;
diff --git a/arches_lingo/templates/arches_urls.htm b/arches_lingo/templates/arches_urls.htm
index c739d6f7..4c479a3b 100644
--- a/arches_lingo/templates/arches_urls.htm
+++ b/arches_lingo/templates/arches_urls.htm
@@ -9,5 +9,6 @@
 <div class="arches-urls"
     api_concepts="{% url 'api-concepts' %}"
     api_search="{% url 'api-search' %}"
+    api_uri_namespace='(pluginid)=>{return "{% url "api-uri-components" "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa" %}".replace("aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa", pluginid)}'
 ></div>
 {% endblock arches_urls %}
diff --git a/arches_lingo/urls.py b/arches_lingo/urls.py
index 3c0ae3a7..487c1bb8 100644
--- a/arches_lingo/urls.py
+++ b/arches_lingo/urls.py
@@ -12,6 +12,7 @@
     ConceptStatementListCreateView,
     SchemeDetailView,
     SchemeListCreateView,
+    SchemeNamespaceView,
     SchemeStatementDetailView,
     SchemeStatementListCreateView,
 )
@@ -39,6 +40,11 @@
     ),
     path("api/schemes", SchemeListCreateView.as_view(), name="schemes-list-create"),
     path("api/scheme/<uuid:pk>", SchemeDetailView.as_view(), name="scheme-detail"),
+    path(
+        "api/scheme/<uuid:pk>/namespace",
+        SchemeNamespaceView.as_view(),
+        name="api-uri-components",
+    ),
     path(
         "api/scheme/statements",
         SchemeStatementListCreateView.as_view(),
diff --git a/arches_lingo/views/api/pythonic_models.py b/arches_lingo/views/api/pythonic_models.py
index 14e4f3bf..3fbb657e 100644
--- a/arches_lingo/views/api/pythonic_models.py
+++ b/arches_lingo/views/api/pythonic_models.py
@@ -5,6 +5,7 @@
 
 from arches_lingo.serializers import (
     ConceptSerializer,
+    SchemeNamespaceSerializer,
     SchemeSerializer,
     ConceptStatementSerializer,
     SchemeStatementSerializer,
@@ -36,6 +37,11 @@ class ConceptListCreateView(ArchesModelAPIMixin, ListCreateAPIView):
     serializer_class = ConceptSerializer
 
 
+class SchemeNamespaceView(ArchesModelAPIMixin, RetrieveUpdateDestroyAPIView):
+    permission_classes = [RDMAdministrator]
+    serializer_class = SchemeNamespaceSerializer
+
+
 class ConceptDetailView(ArchesModelAPIMixin, RetrieveUpdateDestroyAPIView):
     permission_classes = [RDMAdministrator]
     serializer_class = ConceptSerializer

From eb1fce742f6be6c5661fd4241f9106bf8962e60a 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 2/3] 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;

From 309fb0ec1ecdd5aae041670bcbbbacfb272e6c27 Mon Sep 17 00:00:00 2001
From: Aaron Gundel <aaron.gundel@gmail.com>
Date: Tue, 3 Dec 2024 16:32:39 -0700
Subject: [PATCH 3/3] pr feedback #128

---
 .../components/generic/ControlledListItem.vue   |  3 ++-
 .../components/generic/NonLocalizedString.vue   |  9 ++++++---
 .../components/scheme/editor/SchemeEditor.vue   |  1 -
 .../scheme/report/SchemeNamespace.vue           | 17 ++++++++---------
 .../components/scheme/report/SchemeUri.vue      |  1 -
 5 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue b/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue
index d92da5e6..f530f5a7 100644
--- a/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue
@@ -1,10 +1,11 @@
 <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";
+type DataComponentMode = typeof EDIT | typeof VIEW;
 
 const props = defineProps<{
     mode?: DataComponentMode;
diff --git a/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue b/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue
index c8a7bdcd..3836eb9d 100644
--- a/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue
@@ -2,7 +2,10 @@
 import NonLocalizedStringViewer from "@/arches_lingo/components/generic/NonLocalizedStringViewer.vue";
 import NonLocalizedStringEditor from "@/arches_lingo/components/generic/NonLocalizedStringEditor.vue";
 
-type DataComponentMode = "edit" | "view";
+const EDIT = "edit";
+const VIEW = "view";
+
+type DataComponentMode = typeof EDIT | typeof VIEW;
 const props = defineProps<{ mode?: DataComponentMode; value?: string }>();
 const emits = defineEmits(["update"]);
 const onUpdate = (val: string) => {
@@ -11,10 +14,10 @@ const onUpdate = (val: string) => {
 </script>
 <template>
     <div>
-        <div v-if="!props.mode || props.mode === 'view'">
+        <div v-if="!props.mode || props.mode === VIEW">
             <NonLocalizedStringViewer :value="props.value ?? ''" />
         </div>
-        <div v-if="props.mode === 'edit'">
+        <div v-if="props.mode === EDIT">
             <NonLocalizedStringEditor
                 :value="props.value ?? ''"
                 @update="onUpdate"
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 5ab78580..06f741c4 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
@@ -29,7 +29,6 @@ const schemeComponents = [
 
 const emit = defineEmits(["maximize", "side", "close", "updated"]);
 
-
 onBeforeUpdate(() => {
     childRefs.value = [];
 });
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 b19a3356..e1f804b5 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue
@@ -1,6 +1,3 @@
-<script lang="ts">
-const OPEN_EDITOR = "openEditor";
-</script>
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
@@ -19,6 +16,8 @@ import type {
 } from "@/arches_lingo/types";
 
 const { $gettext } = useGettext();
+const VIEW = "view";
+const EDIT = "edit";
 const schemeNamespace = ref<SchemeNamespace>();
 const route = useRoute();
 
@@ -26,7 +25,7 @@ defineProps<{
     mode?: DataComponentMode;
 }>();
 
-defineEmits([OPEN_EDITOR]);
+defineEmits(["openEditor"]);
 
 defineExpose({ save, getSectionValue });
 
@@ -62,23 +61,23 @@ const onNamespaceNameUpdate = (val: string) => {
 
 <template>
     <div>
-        <div v-if="!mode || mode === 'view'">
+        <div v-if="!mode || mode === VIEW">
             <SchemeReportSection
                 :title-text="$gettext('Scheme Namespace')"
-                @open-editor="$emit(OPEN_EDITOR)"
+                @open-editor="$emit('openEditor')"
             >
                 <NonLocalizedString
                     :value="schemeNamespace?.namespace?.namespace_name"
-                    mode="view"
+                    :mode="VIEW"
                 />
                 <!-- Discussion of namespace_type indicated it should not be displayed or edited manually,
                  if this changes, the ControlledListItem widget can be used.-->
             </SchemeReportSection>
         </div>
-        <div v-if="mode === 'edit'">
+        <div v-if="mode === EDIT">
             <NonLocalizedString
                 :value="schemeNamespace?.namespace?.namespace_name ?? ''"
-                mode="edit"
+                :mode="EDIT"
                 @update="onNamespaceNameUpdate"
             />
         </div>
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 00d51a5f..b31483f3 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeUri.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeUri.vue
@@ -9,4 +9,3 @@ const { $gettext } = useGettext();
         abc
     </SchemeReportSection>
 </template>
-