Implement scheme creation #157

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   Add backend for search [#67](https://github.com/archesproject/arches-lingo/issues/67)
 -   Add concept and scheme pages [#15](https://github.com/archesproject/arches-lingo/issues/15)
 -   Add concept hierarchy component [#18](https://github.com/archesproject/arches-lingo/issues/18)
+-   Add scheme creation [#157](https://github.com/archesproject/arches-lingo/issues/157)
 
 ### Fixed
 -   Merge language finder implementations [#92](https://github.com/archesproject/arches-lingo/issues/92)

arches_lingo/src/arches_lingo/api.ts

@@ -1,5 +1,6 @@
 import arches from "arches";
 import Cookies from "js-cookie";
+
 import type { SchemeInstance } from "@/arches_lingo/types";
 
 function getToken() {
@@ -113,6 +114,20 @@ export const deleteSchemeNoteTile = async (
     }
 };
 
+export const createScheme = async (newScheme: SchemeInstance) => {
+    const response = await fetch(arches.urls.api_schemes, {
+        method: "POST",
+        headers: {
+            "X-CSRFTOKEN": getToken(),
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(newScheme),
+    });
+    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,

arches_lingo/src/arches_lingo/components/scheme/SchemeCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { inject } from "vue";
-import { systemLanguageKey } from "@/arches_lingo/constants.ts";
+import { systemLanguageKey, NEW } from "@/arches_lingo/constants.ts";
 import { routeNames } from "@/arches_lingo/routes.ts";
 
 import Card from "primevue/card";
@@ -24,19 +24,24 @@ let schemeDescriptor: ResourceDescriptor = {
 if (descriptors) {
     const descriptor =
         descriptors[systemLanguage.code] ?? Object.values(descriptors)[0];
-    schemeDescriptor.name = descriptor.name ?? "";
-    schemeDescriptor.description = descriptor.description ?? "";
+    if (descriptor) {
+        schemeDescriptor.name = descriptor.name ?? "";
+        schemeDescriptor.description = descriptor.description ?? "";
+    }
 }
 </script>
 
 <template>
     <RouterLink :to="schemeURL">
         <Card>
             <template #title>
-                {{ schemeDescriptor.name }}
+                <p v-if="scheme.resourceinstanceid === NEW">
+                    {{ $gettext("Create a new scheme") }}
+                </p>
+                <p v-else>{{ schemeDescriptor.name }}</p>
             </template>
             <template #content>
-                {{ schemeDescriptor.description }}
+                <p>{{ schemeDescriptor.description }}</p>
             </template>
         </Card>
     </RouterLink>

arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue

@@ -3,7 +3,13 @@ import { useGettext } from "vue3-gettext";
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
 
-import { VIEW, EDIT, OPEN_EDITOR, ERROR } from "@/arches_lingo/constants.ts";
+import {
+    EDIT,
+    ERROR,
+    OPEN_EDITOR,
+    NEW,
+    VIEW,
+} from "@/arches_lingo/constants.ts";
 import type {
     AppellativeStatus,
     DataComponentMode,
@@ -17,7 +23,7 @@ import ResourceInstanceRelationships from "@/arches_lingo/components/generic/Res
 import ControlledListItem from "@/arches_lingo/components/generic/ControlledListItem.vue";
 import { useToast } from "primevue/usetoast";
 
-const schemeInstance = ref<SchemeInstance>();
+const schemeInstance = ref<SchemeInstance>({});
 const { $gettext } = useGettext();
 const toast = useToast();
 const route = useRoute();
@@ -49,6 +55,9 @@ onMounted(() => {
 });
 
 async function getSectionValue() {
+    if (route.params.id === NEW) {
+        return;
+    }
     try {
         const result = await fetchSchemeLabel(route.params.id as string);
         schemeInstance.value = {

arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue

@@ -1,22 +1,25 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { useGettext } from "vue3-gettext";
 import Button from "primevue/button";
 import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
 import NonLocalizedString from "@/arches_lingo/components/generic/NonLocalizedString.vue";
 import {
+    createScheme,
     fetchSchemeNamespace,
     updateSchemeNamespace,
 } from "@/arches_lingo/api.ts";
 import {
-    VIEW,
     EDIT,
-    OPEN_EDITOR,
     ERROR,
+    NEW,
+    OPEN_EDITOR,
     UPDATED,
+    VIEW,
 } from "@/arches_lingo/constants.ts";
 import { useToast } from "primevue/usetoast";
+
 import type {
     DataComponentMode,
     SchemeNamespaceUpdate,
@@ -25,8 +28,9 @@ import type {
 
 const toast = useToast();
 const { $gettext } = useGettext();
-const schemeInstance = ref<SchemeInstance>();
+const schemeInstance = ref<SchemeInstance>({});
 const route = useRoute();
+const router = useRouter();
 
 defineProps<{
     mode?: DataComponentMode;
@@ -42,26 +46,34 @@ onMounted(async () => {
 
 async function save() {
     try {
-        await updateSchemeNamespace(
-            route.params.id as string,
-            schemeInstance.value as SchemeInstance,
-        );
+        let updated;
+        if (route.params.id === NEW) {
+            updated = await createScheme(schemeInstance.value);
+            await router.push({
+                name: "scheme",
+                params: { id: updated.resourceinstanceid },
+            });
+        } else {
+            updated = await updateSchemeNamespace(
+                route.params.id as string,
+                schemeInstance.value,
+            );
+        }
+        schemeInstance.value = updated;
         emit(UPDATED);
     } catch (error) {
         toast.add({
             severity: ERROR,
-            summary: $gettext("Error"),
-            detail:
-                error instanceof Error
-                    ? error.message
-                    : $gettext(
-                          "Could not update the namespace for the resource",
-                      ),
+            summary: $gettext("Error saving scheme"),
+            detail: (error as Error).message,
         });
     }
 }
 
 async function getSectionValue() {
+    if (route.params.id === NEW) {
+        return;
+    }
     try {
         const response = await fetchSchemeNamespace(route.params.id as string);
         schemeInstance.value = response;

arches_lingo/src/arches_lingo/components/scheme/report/SchemeNote.vue

@@ -6,7 +6,13 @@ import { useToast } from "primevue/usetoast";
 import MetaStringViewer from "@/arches_lingo/components/generic/MetaStringViewer.vue";
 import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
 import { deleteSchemeNoteTile, fetchSchemeNotes } from "@/arches_lingo/api.ts";
-import { ERROR, OPEN_EDITOR, VIEW, EDIT } from "@/arches_lingo/constants.ts";
+import {
+    ERROR,
+    NEW,
+    OPEN_EDITOR,
+    VIEW,
+    EDIT,
+} from "@/arches_lingo/constants.ts";
 import type {
     DataComponentMode,
     MetaStringText,
@@ -48,6 +54,9 @@ onMounted(() => {
 });
 
 async function getSectionValue() {
+    if (route.params.id === NEW) {
+        return;
+    }
     try {
         const result = await fetchSchemeNotes(route.params.id as string);
         schemeInstance.value = {

arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { inject, onMounted, ref, type Ref } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { useGettext } from "vue3-gettext";
 import Button from "primevue/button";
 import type {
@@ -11,6 +11,7 @@ import type {
 } from "@/arches_lingo/types";
 import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
 import {
+    createScheme,
     fetchSchemeCreation,
     fetchTextualWorkRdmSystemList,
     updateSchemeCreation,
@@ -21,16 +22,18 @@ import {
     VIEW,
     EDIT,
     OPEN_EDITOR,
+    NEW,
     UPDATED,
     ERROR,
 } from "@/arches_lingo/constants.ts";
 import type { Language } from "@/arches_vue_utils/types.ts";
 import { useToast } from "primevue/usetoast";
 
 const toast = useToast();
-const schemeInstance = ref<SchemeInstance>();
+const schemeInstance = ref<SchemeInstance>({});
 const textualWorkOptions = ref<ResourceInstanceReference[]>();
 const route = useRoute();
+const router = useRouter();
 const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
 const { $gettext } = useGettext();
 
@@ -62,28 +65,36 @@ async function getOptions(): Promise<ResourceInstanceReference[]> {
 
 async function save() {
     try {
-        await updateSchemeCreation(
-            route.params.id as string,
-            schemeInstance.value as SchemeInstance,
-        );
-
-        getSectionValue();
+        let updated;
+        if (route.params.id === NEW) {
+            updated = await createScheme(schemeInstance.value);
+            await router.push({
+                name: "scheme",
+                params: { id: updated.resourceinstanceid },
+            });
+        } else {
+            updated = await updateSchemeCreation(
+                route.params.id as string,
+                schemeInstance.value,
+            );
+        }
+        schemeInstance.value = updated;
         emit(UPDATED);
     } catch (error) {
         toast.add({
             severity: ERROR,
-            summary: $gettext("Error"),
-            detail:
-                error instanceof Error
-                    ? error.message
-                    : $gettext("Could not save the scheme standard"),
+            summary: $gettext("Error saving scheme"),
+            detail: (error as Error).message,
         });
     }
 }
 
 async function getCachedOptions(): Promise<
     ResourceInstanceReference[] | undefined
 > {
+    if (route.params.id === NEW) {
+        return;
+    }
     try {
         const options = textualWorkOptions.value || (await getOptions());
         return options;

arches_lingo/src/arches_lingo/components/sidenav/SideNav.vue

@@ -22,7 +22,10 @@ const items = ref([
             :key="item.routeName"
         >
             <RouterLink
-                v-tooltip="item.linkName"
+                v-tooltip="{
+                    value: item.linkName,
+                    pt: { text: { style: { fontFamily: 'sans-serif' } } },
+                }"
                 :to="{ name: item.routeName }"
                 class="p-button p-component p-button-primary"
                 style="text-decoration: none"

arches_lingo/src/arches_lingo/constants.ts

@@ -10,6 +10,7 @@ export const EDIT = "edit";
 export const VIEW = "view";
 export const OPEN_EDITOR = "openEditor";
 export const UPDATED = "updated";
+export const NEW = "new";
 
 export const DEFAULT_ERROR_TOAST_LIFE = 8000;
 export const SEARCH_RESULTS_PER_PAGE = 25;

arches_lingo/src/arches_lingo/pages/SchemeList.vue

@@ -10,6 +10,7 @@ import {
 
 import SchemeCard from "@/arches_lingo/components/scheme/SchemeCard.vue";
 import { fetchSchemes } from "@/arches_lingo/api.ts";
+import { NEW } from "@/arches_lingo/constants.ts";
 
 import type { SchemeResource } from "@/arches_lingo/types";
 
@@ -30,13 +31,8 @@ onMounted(async () => {
         });
     }
     schemes.value.unshift({
-        resourceinstanceid: "placeholder-id",
-        descriptors: {
-            en: {
-                name: "Create a new scheme",
-                description: "This is a placeholder to create a new scheme",
-            },
-        },
+        resourceinstanceid: NEW,
+        descriptors: {},
     });
 });
 </script>

arches_lingo/urls.py

@@ -30,6 +30,7 @@
     path("advanced-search", LingoRootView.as_view(), name="advanced-search"),
     path("schemes", LingoRootView.as_view(), name="schemes"),
     path("scheme/<uuid:id>", LingoRootView.as_view(), name="scheme"),
+    path("scheme/new", LingoRootView.as_view(), name="new-scheme"),
     path("concept/<uuid:id>", LingoRootView.as_view(), name="concept"),
     path("api/concept-tree", ConceptTreeView.as_view(), name="api-concepts"),
     path("api/search", ValueSearchView.as_view(), name="api-search"),