Updates for namespace section

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,

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",

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

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,

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>

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>

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>

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>

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>

arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue

@@ -2,51 +2,136 @@
 const MAXIMIZE = "maximize";
 const SIDE = "side";
 const CLOSE = "close";
+const UPDATED = "updated"
 </script>
 
 <script setup lang="ts">
 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) {
         emit(MAXIMIZE);
     } else {
         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>
-            <h2>{{ $gettext("Scheme Editor Tools") }}</h2>
+    <div>
+        <div class="header">
             <div>
-                <Button @click="toggleSize"
-                    ><i
-                        :class="{
-                            pi: true,
-                            'pi-window-maximize': props.editorMax,
-                            'pi-window-minimize': !props.editorMax,
-                        }"
-                        aria-hidden="true"
-                    />
-                </Button>
-                <Button @click="$emit(CLOSE)"
-                    ><i
-                        class="pi pi-times"
-                        aria-hidden="true"
-                    />
-                </Button>
+                <h2>{{ $gettext("Editor Tools") }}</h2>
+                <div>
+                    <Button @click="toggleSize"
+                        ><i
+                            :class="{
+                                pi: true,
+                                'pi-window-maximize': props.editorMax,
+                                'pi-window-minimize': !props.editorMax,
+                            }"
+                            aria-hidden="true"
+                        />
+                    </Button>
+                    <Button @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>

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>