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 @@
+
+
+
+ {{ concept }}
+
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 @@
+
+
+
+ {{ scheme }}
+
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;
const { setHeader } = inject(headerKey) as HeaderRefAndSetter;
const displayedRow: Ref = 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 = () => {
- {{ conceptLabel }}
+
+
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",
};