From 9636ca1bc916aa8682608a150da26e13ed3f9f29 Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Thu, 12 Sep 2024 16:56:50 -0400
Subject: [PATCH] Add scheme route and detail pages #15

---
 CHANGELOG.md                                  |  1 +
 .../components/detail/ConceptDetail.vue       |  9 ++++++
 .../components/detail/SchemeDetail.vue        |  9 ++++++
 ...ceptDetail.vue => ConceptOrSchemeBase.vue} | 32 +++++++++++++++----
 arches_lingo/src/arches_lingo/routes.ts       | 12 ++++++-
 5 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 arches_lingo/src/arches_lingo/components/detail/ConceptDetail.vue
 create mode 100644 arches_lingo/src/arches_lingo/components/detail/SchemeDetail.vue
 rename arches_lingo/src/arches_lingo/pages/{ConceptDetail.vue => ConceptOrSchemeBase.vue} (73%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bc52e709..68681b49 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/arches_lingo/src/arches_lingo/components/detail/ConceptDetail.vue b/arches_lingo/src/arches_lingo/components/detail/ConceptDetail.vue
new file mode 100644
index 00000000..5d155155
--- /dev/null
+++ b/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>
diff --git a/arches_lingo/src/arches_lingo/components/detail/SchemeDetail.vue b/arches_lingo/src/arches_lingo/components/detail/SchemeDetail.vue
new file mode 100644
index 00000000..d8d5aa18
--- /dev/null
+++ b/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>
diff --git a/arches_lingo/src/arches_lingo/pages/ConceptDetail.vue b/arches_lingo/src/arches_lingo/pages/ConceptOrSchemeBase.vue
similarity index 73%
rename from arches_lingo/src/arches_lingo/pages/ConceptDetail.vue
rename to arches_lingo/src/arches_lingo/pages/ConceptOrSchemeBase.vue
index 13d2ab35..a32fdd9f 100644
--- a/arches_lingo/src/arches_lingo/pages/ConceptDetail.vue
+++ b/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>
diff --git a/arches_lingo/src/arches_lingo/routes.ts b/arches_lingo/src/arches_lingo/routes.ts
index f5534830..94635379 100644
--- a/arches_lingo/src/arches_lingo/routes.ts
+++ b/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",
 };