Add scheme route and detail pages #15

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   Add front-end router [#11](https://github.com/archesproject/arches-lingo/issues/11)
 -   Add dark mode toggle [#91](https://github.com/archesproject/arches-lingo/issues/91)
 -   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)
 
 ### Fixed

arches_lingo/src/arches_lingo/components/detail/ConceptDetail.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import type { Concept } from "@/arches_lingo/types";
+
+const { concept } = defineProps<{ concept: Concept }>();
+</script>
+
+<template>
+    {{ concept }}
+</template>

arches_lingo/src/arches_lingo/components/detail/SchemeDetail.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import type { Scheme } from "@/arches_lingo/types";
+
+const { scheme } = defineProps<{ scheme: Scheme }>();
+</script>
+
+<template>
+    {{ scheme }}
+</template>

arches_lingo/src/arches_lingo/pages/ConceptDetail.vue → arches_lingo/src/arches_lingo/pages/ConceptOrSchemeBase.vue

@@ -17,12 +17,23 @@ import {
     selectedLanguageKey,
 } from "@/arches_lingo/constants.ts";
 import { routeNames } from "@/arches_lingo/routes.ts";
-import { bestLabel, dataIsConcept } from "@/arches_lingo/utils.ts";
+import {
+    bestLabel,
+    dataIsConcept,
+    dataIsScheme,
+} from "@/arches_lingo/utils.ts";
+import ConceptDetail from "@/arches_lingo/components/detail/ConceptDetail.vue";
 import ConceptTree from "@/arches_lingo/components/tree/ConceptTree.vue";
+import SchemeDetail from "@/arches_lingo/components/detail/SchemeDetail.vue";
 
 import type { Ref } from "vue";
 import type { Language } from "@/arches/types";
-import type { HeaderRefAndSetter, Labellable } from "@/arches_lingo/types";
+import type {
+    Concept,
+    HeaderRefAndSetter,
+    Labellable,
+    Scheme,
+} from "@/arches_lingo/types";
 
 const { $gettext } = useGettext();
 const router = useRouter();
@@ -31,7 +42,7 @@ const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
 const { setHeader } = inject(headerKey) as HeaderRefAndSetter;
 
 const displayedRow: Ref<Labellable | null> = ref(null);
-const conceptLabel = computed(() => {
+const rowLabel = computed(() => {
     if (!displayedRow.value) {
         return "Concept detail placeholder";
     }
@@ -42,10 +53,12 @@ const setDisplayedRow = (val: Labellable | null) => {
     if (val === null) {
         return;
     }
-    if (dataIsConcept(val)) {
+    if (dataIsScheme(val)) {
+        router.push({ name: routeNames.scheme, params: { id: val.id } });
+    } else if (dataIsConcept(val)) {
         router.push({ name: routeNames.concept, params: { id: val.id } });
-        setHeader(conceptLabel.value);
     }
+    setHeader(rowLabel.value);
 };
 provide(displayedRowKey, { displayedRow, setDisplayedRow });
 
@@ -83,7 +96,14 @@ const toggleHierarchy = () => {
             </Suspense>
         </SplitterPanel>
         <SplitterPanel :min-size="25">
-            {{ conceptLabel }}
+            <ConceptDetail
+                v-if="displayedRow && dataIsConcept(displayedRow)"
+                :concept="displayedRow as Concept"
+            />
+            <SchemeDetail
+                v-else-if="displayedRow && dataIsScheme(displayedRow)"
+                :scheme="displayedRow as Scheme"
+            />
         </SplitterPanel>
     </Splitter>
 </template>

arches_lingo/src/arches_lingo/routes.ts

@@ -38,7 +38,16 @@ export const routes = [
     {
         path: "/concept/:id",
         name: "concept",
-        component: () => import("@/arches_lingo/pages/ConceptDetail.vue"),
+        component: () => import("@/arches_lingo/pages/ConceptOrSchemeBase.vue"),
+        meta: {
+            shouldShowNavigation: true,
+            requiresAuthentication: true,
+        },
+    },
+    {
+        path: "/scheme/:id",
+        name: "scheme",
+        component: () => import("@/arches_lingo/pages/ConceptOrSchemeBase.vue"),
         meta: {
             shouldShowNavigation: true,
             requiresAuthentication: true,
@@ -53,4 +62,5 @@ export const routeNames = {
     advancedSearch: "advanced-search",
     schemes: "schemes",
     concept: "concept",
+    scheme: "scheme",
 };