Adds scheme standard section with widgets

arches_lingo/serializers.py

@@ -26,6 +26,22 @@ class Meta:
         fields = "__all__"
 
 
+class SchemeCreationSerializer(ArchesModelSerializer):
+    class Meta:
+        model = ResourceInstance
+        graph_slug = "scheme"
+        nodegroups = ["creation"]
+        fields = "__all__"
+
+
+class TextualWorkRdmSystemSerializer(ArchesModelSerializer):
+    class Meta:
+        model = ResourceInstance
+        graph_slug = "textual_work"
+        nodegroups = "__all__"
+        fields = "__all__"
+
+
 class ConceptStatementSerializer(ArchesTileSerializer):
     class Meta:
         model = TileModel

arches_lingo/src/arches_lingo/api.ts

@@ -1,6 +1,6 @@
 import arches from "arches";
 import Cookies from "js-cookie";
-import type { SchemeNamespace } from "@/arches_lingo/types";
+import type { SchemeInstance } from "@/arches_lingo/types";
 
 function getToken() {
     const token = Cookies.get("csrftoken");
@@ -45,9 +45,40 @@ export const fetchSchemeNamespace = async (schemeId: string) => {
     return parsed;
 };
 
+export const fetchTextualWorkRdmSystemList = async () => {
+    const response = await fetch(arches.urls.api_textualwork_list);
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};
+
+export const fetchSchemeCreation = async (schemeId: string) => {
+    const response = await fetch(arches.urls.api_scheme_creation(schemeId));
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};
+
+export const updateSchemeCreation = async (
+    schemeId: string,
+    schemeInstance: SchemeInstance,
+) => {
+    const response = await fetch(arches.urls.api_scheme_creation(schemeId), {
+        method: "PATCH",
+        headers: {
+            "X-CSRFTOKEN": getToken(),
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(schemeInstance),
+    });
+    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,
+    schemeNamespace: SchemeInstance,
 ) => {
     const response = await fetch(arches.urls.api_uri_namespace(schemeId), {
         method: "PATCH",

arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue

@@ -1,23 +1,22 @@
 <script setup lang="ts">
-import type { ControlledListItem } from "@/arches_lingo/types";
+import type {
+    ControlledListItem,
+    DataComponentMode,
+} from "@/arches_lingo/types";
 import ControlledListItemViewer from "@/arches_lingo/components/generic/ControlledListItemViewer.vue";
+import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
 
-const VIEW = "view";
-const EDIT = "edit";
-
-type DataComponentMode = typeof EDIT | typeof VIEW;
-
-const props = defineProps<{
+const { mode = EDIT } = defineProps<{
     mode?: DataComponentMode;
     value?: ControlledListItem;
 }>();
 defineEmits(["update"]);
 </script>
 <template>
     <div>
-        <div v-if="!props.mode || props.mode === VIEW">
-            <ControlledListItemViewer :value="props.value" />
+        <div v-if="mode === VIEW">
+            <ControlledListItemViewer :value="value" />
         </div>
-        <div v-if="props.mode === EDIT"></div>
+        <div v-if="mode === EDIT"></div>
     </div>
 </template>

arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue

@@ -1,25 +1,26 @@
 <script setup lang="ts">
 import NonLocalizedStringViewer from "@/arches_lingo/components/generic/NonLocalizedStringViewer.vue";
 import NonLocalizedStringEditor from "@/arches_lingo/components/generic/NonLocalizedStringEditor.vue";
+import type { DataComponentMode } from "@/arches_lingo/types.ts";
+import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
 
-const EDIT = "edit";
-const VIEW = "view";
-
-type DataComponentMode = typeof EDIT | typeof VIEW;
-const props = defineProps<{ mode?: DataComponentMode; value?: string }>();
+const { mode = EDIT } = 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 v-if="mode === VIEW">
+            <NonLocalizedStringViewer :value="value ?? ''" />
         </div>
-        <div v-if="props.mode === EDIT">
+        <div v-if="mode === EDIT">
             <NonLocalizedStringEditor
-                :value="props.value ?? ''"
+                :value="value ?? ''"
                 @update="onUpdate"
             />
         </div>

arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import ResourceInstanceRelationshipsViewer from "@/arches_lingo/components/generic/ResourceInstanceRelationshipsViewer.vue";
+import ResourceInstanceRelationshipsEditor from "@/arches_lingo/components/generic/ResourceInstanceRelationshipsEditor.vue";
+import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
+import type {
+    DataComponentMode,
+    ResourceInstanceReference,
+} from "@/arches_lingo/types";
+
+const { mode = EDIT } = defineProps<{
+    mode?: DataComponentMode;
+    value?: ResourceInstanceReference[];
+    options?: ResourceInstanceReference[];
+}>();
+
+const emits = defineEmits(["update"]);
+
+function onUpdate(val: string[]) {
+    emits("update", val);
+}
+</script>
+<template>
+    <div v-if="mode === VIEW">
+        <ResourceInstanceRelationshipsViewer :value="value" />
+    </div>
+    <div v-if="mode === EDIT">
+        <ResourceInstanceRelationshipsEditor
+            :options="options"
+            :val="value?.map((x) => x.resourceId) ?? []"
+            @update="onUpdate"
+        />
+    </div>
+</template>

arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationshipsEditor.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed, toRef } from "vue";
+import MultiSelect from "primevue/multiselect";
+import type { ResourceInstanceReference } from "@/arches_lingo/types";
+import { useGettext } from "vue3-gettext";
+
+const { $gettext } = useGettext();
+
+const props = withDefaults(
+    defineProps<{
+        val?: string[];
+        options?: ResourceInstanceReference[];
+    }>(),
+    {
+        options: () => [],
+    },
+);
+
+const emit = defineEmits(["update"]);
+
+const valRef = toRef(props, "val");
+
+const value = computed({
+    get() {
+        return valRef.value;
+    },
+    set(value) {
+        emit("update", value);
+    },
+});
+</script>
+<template>
+    <MultiSelect
+        v-model="value"
+        :show-toggle-all="!!options?.length"
+        :options
+        option-label="display_value"
+        option-value="resourceId"
+        :pt="{
+            emptyMessage: { style: { fontFamily: 'sans-serif' } },
+            option: { style: { fontFamily: 'sans-serif' } },
+        }"
+        :placeholder="$gettext('Select Resources')"
+    />
+</template>

arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationshipsViewer.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ResourceInstanceReference } from "@/arches_lingo/types";
+
+const props = defineProps<{ value?: ResourceInstanceReference[] }>();
+</script>
+<template>
+    <div v-if="props.value">
+        <div
+            v-for="val in props.value"
+            :key="val.resourceXresourceId"
+        >
+            {{ val.display_value }}
+        </div>
+    </div>
+</template>

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

@@ -9,7 +9,7 @@ import TabPanels from "primevue/tabpanels";
 import TabPanel from "primevue/tabpanel";
 import SchemeNamespace from "../report/SchemeNamespace.vue";
 import { onBeforeUpdate, onUpdated, ref } from "vue";
-
+import SchemeStandard from "../report/SchemeStandard.vue";
 type sectionTypes = typeof SchemeNamespace;
 
 const { $gettext } = useGettext();
@@ -25,6 +25,11 @@ const schemeComponents = [
         id: "namespace",
         editorTabName: $gettext("Scheme Namespace"),
     },
+    {
+        component: SchemeStandard,
+        id: "standard",
+        editorTabName: $gettext("Scheme Standards Followed"),
+    },
 ];
 
 const emit = defineEmits(["maximize", "side", "close", "updated"]);
@@ -57,81 +62,76 @@ async function updateScheme() {
 </script>
 
 <template>
-    <div>
-        <div class="header">
+    <div class="header">
+        <div>
+            <h3>{{ $gettext("Editor Tools") }}</h3>
             <div>
-                <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>
+                <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 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>
+    <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="{ updated: onUpdated }"
+                        />
+                    </TabPanel>
+                </template>
+            </TabPanels>
+        </Tabs>
+        <Button
+            :label="$gettext('Update')"
+            @click="updateScheme"
+        ></Button>
     </div>
 </template>
 <style scoped>
-.header {
-    background-color: var(--p-surface-200);
-}
 .header div {
     margin: 0 1rem;
     display: flex;
     align-items: center;
 }
-.header div h2 {
+.header div h3 {
     flex: 1;
 }
 </style>