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() {
@@ -80,6 +81,20 @@ export const deleteSchemeLabelTile = async (tileId: string) => {
     }
 };
 
+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/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 {
     DataComponentMode,
     SchemeInstance,
@@ -13,7 +19,7 @@ import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeS
 import LabelViewer from "@/arches_lingo/components/generic/LabelViewer.vue";
 import { useToast } from "primevue/usetoast";
 
-const schemeInstance = ref<SchemeInstance>();
+const schemeInstance = ref<SchemeInstance>({});
 const { $gettext } = useGettext();
 const toast = useToast();
 const route = useRoute();
@@ -38,6 +44,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,
         });
     }
-    emit(UPDATED);
 }
 
 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/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,24 +22,26 @@ 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();
 
 const { mode = VIEW } = defineProps<{
     mode?: DataComponentMode;
 }>();
 
-const emits = defineEmits([OPEN_EDITOR, UPDATED]);
+const emit = defineEmits([OPEN_EDITOR, UPDATED]);
 
 defineExpose({ getSectionValue });
 
@@ -62,25 +65,36 @@ async function getOptions(): Promise<ResourceInstanceReference[]> {
 
 async function save() {
     try {
-        await updateSchemeCreation(
-            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 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,
         });
     }
 
     getSectionValue();
 }
 
 async function getSectionValue() {
+    if (route.params.id === NEW) {
+        return;
+    }
     let options = null;
     try {
         options = !textualWorkOptions.value
@@ -144,7 +158,7 @@ function onCreationUpdate(val: string[]) {
     <div v-if="mode === VIEW">
         <SchemeReportSection
             :title-text="$gettext('Scheme Standards Followed')"
-            @open-editor="emits(OPEN_EDITOR)"
+            @open-editor="emit(OPEN_EDITOR)"
         >
             <ResourceInstanceRelationships
                 :value="schemeInstance?.creation?.creation_sources"

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,11 +31,11 @@ onMounted(async () => {
         });
     }
     schemes.value.unshift({
-        resourceinstanceid: "placeholder-id",
+        resourceinstanceid: NEW,
         descriptors: {
             en: {
                 name: "Create a new scheme",
-                description: "This is a placeholder to create a new scheme",
+                description: "",
             },
         },
     });

arches_lingo/urls.py

@@ -28,6 +28,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"),