Updates for namespace section (#128)

* Adds namespace sec with nonlocalized string widget * pr feedback * pr feedback #128
archesproject · Dec 4, 2024 · 7f136e1 · 7f136e1
1 parent c198c7a
commit 7f136e1
Show file tree

Hide file tree

Showing 21 changed files with 441 additions and 59 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,23 @@
+<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 = typeof EDIT | typeof 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
@@ -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
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import NonLocalizedStringViewer from "@/arches_lingo/components/generic/NonLocalizedStringViewer.vue";
+import NonLocalizedStringEditor from "@/arches_lingo/components/generic/NonLocalizedStringEditor.vue";
+
+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) => {
+    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
@@ -0,0 +1,26 @@
+<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
@@ -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
@@ -2,52 +2,124 @@
 import { useGettext } from "vue3-gettext";
 import Button from "primevue/button";
 
-const { $gettext } = useGettext();
+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";
+
+type sectionTypes = typeof SchemeNamespace;
 
+const { $gettext } = useGettext();
+const EDIT = "edit";
 const props = defineProps<{
     editorMax: boolean;
+    activeTab: string;
 }>();
+const childRefs = ref<Array<sectionTypes>>([]);
+const schemeComponents = [
+    {
+        component: SchemeNamespace,
+        id: "namespace",
+        editorTabName: $gettext("Scheme Namespace"),
+    },
+];
 
-const emit = defineEmits(["maximize", "side", "close"]);
+const emit = defineEmits(["maximize", "side", "close", "updated"]);
 
-const toggleSize = () => {
+onBeforeUpdate(() => {
+    childRefs.value = [];
+});
+
+function toggleSize() {
     if (props.editorMax) {
         emit("maximize");
     } else {
         emit("side");
     }
-};
+}
+
+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();
+        }),
+    );
+
+    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="{ mode: EDIT }"
+                                :ref="(el) => getRef(el, index)"
+                                v-on="onUpdated"
+                            />
+                        </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
@@ -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>