Implement front-end routing

CHANGELOG.md

@@ -8,10 +8,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
--  Added compatibility with PrimeVue 4 [#16](https://github.com/archesproject/arches-references/pull/16)
+-   Add compatibility with PrimeVue 4 [#9](https://github.com/archesproject/arches-references/issues/9)
+-   Add front-end routing [#4](https://github.com/archesproject/arches-references/issues/4)
 
 ### Changed
--  Generate URIs when not supplied [#17](https://github.com/archesproject/arches-references/pull/17)
+-   Generate URIs when not supplied [#8](https://github.com/archesproject/arches-references/issues/8)
 
 ### Fixed
 

arches_references/media/js/views/components/plugins/controlled-list-manager.js

@@ -1,12 +1,21 @@
 import ko from 'knockout';
 
+import { routes } from '@/arches_references/routes.ts';
 import ControlledListManager from '@/arches_references/plugins/ControlledListManager.vue';
 import createVueApplication from 'utils/create-vue-application';
 import ControlledListManagerTemplate from 'templates/views/components/plugins/controlled-list-manager.htm';
 
+import { createRouter, createWebHistory } from 'vue-router';
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
 ko.components.register('controlled-list-manager', {
     viewModel: function() {
         createVueApplication(ControlledListManager).then((vueApp) => {
+            vueApp.use(router);
             vueApp.mount('#controlled-list-manager-mounting-point');
         });
     },

arches_references/src/arches_references/components/ControlledListsMain.vue

@@ -1,31 +1,42 @@
 <script setup lang="ts">
 import arches from "arches";
-import { computed, provide, ref } from "vue";
+import { provide, ref } from "vue";
+import { useRouter } from "vue-router";
 
-import ProgressSpinner from "primevue/progressspinner";
-import Splitter from "primevue/splitter";
-import SplitterPanel from "primevue/splitterpanel";
+import ConfirmDialog from "primevue/confirmdialog";
+import Toast from "primevue/toast";
 
 import {
     displayedRowKey,
     selectedLanguageKey,
 } from "@/arches_references/constants.ts";
+import { routeNames } from "@/arches_references/routes.ts";
 import { dataIsList } from "@/arches_references/utils.ts";
-import ControlledListSplash from "@/arches_references/components/misc/ControlledListSplash.vue";
-import ItemEditor from "@/arches_references/components/editor/ItemEditor.vue";
-import ListCharacteristics from "@/arches_references/components/editor/ListCharacteristics.vue";
+
 import ListHeader from "@/arches_references/components/misc/ListHeader.vue";
-import ListTree from "@/arches_references/components/tree/ListTree.vue";
+import MainSplitter from "@/arches_references/components/MainSplitter.vue";
 
 import type { Ref } from "vue";
 import type { Language } from "@/arches/types";
 import type { Selectable } from "@/arches_references/types";
 
-const splash = "splash";
+const router = useRouter();
 
 const displayedRow: Ref<Selectable | null> = ref(null);
 const setDisplayedRow = (val: Selectable | null) => {
     displayedRow.value = val;
+    if (val === null) {
+        router.push({ name: routeNames.splash });
+        return;
+    }
+    if (typeof val.id === "number") {
+        return;
+    }
+    if (dataIsList(val)) {
+        router.push({ name: routeNames.list, params: { id: val.id } });
+    } else {
+        router.push({ name: routeNames.item, params: { id: val.id } });
+    }
 };
 // @ts-expect-error vue-tsc doesn't like arbitrary properties here
 provide(displayedRowKey, { displayedRow, setDisplayedRow });
@@ -36,50 +47,40 @@ const selectedLanguage: Ref<Language> = ref(
     ) as Language,
 );
 provide(selectedLanguageKey, selectedLanguage);
-
-const panel = computed(() => {
-    if (!displayedRow.value) {
-        return ControlledListSplash;
-    }
-    if (dataIsList(displayedRow.value)) {
-        return ListCharacteristics;
-    }
-    return ItemEditor;
-});
 </script>
 
 <template>
-    <div class="list-editor-container">
-        <ListHeader />
-        <Splitter style="height: 100%">
-            <SplitterPanel
-                :size="34"
-                :min-size="25"
-                style="display: flex; flex-direction: column"
-            >
-                <Suspense>
-                    <ListTree />
-                    <template #fallback>
-                        <ProgressSpinner />
-                    </template>
-                </Suspense>
-            </SplitterPanel>
-            <SplitterPanel
-                :size="66"
-                :min-size="25"
-                :style="{
-                    margin: '1rem 0rem 4rem 1rem',
-                    overflowY: 'auto',
-                    paddingRight: '4rem',
-                }"
-            >
-                <component
-                    :is="panel"
-                    :key="displayedRow?.id ?? splash"
-                />
-            </SplitterPanel>
-        </Splitter>
+    <!-- Subtract size of arches toolbars -->
+    <div style="width: calc(100vw - 50px); height: calc(100vh - 50px)">
+        <div class="list-editor-container">
+            <ListHeader />
+            <MainSplitter />
+        </div>
     </div>
+    <Toast />
+    <ConfirmDialog
+        :draggable="false"
+        :pt="{
+            root: {
+                style: {
+                    fontSize: 'small',
+                },
+            },
+            header: {
+                style: {
+                    background: 'var(--p-navigation)',
+                    color: 'white',
+                    borderRadius: '1rem',
+                    marginBottom: '1rem',
+                },
+            },
+            title: {
+                style: {
+                    fontWeight: 800,
+                },
+            },
+        }"
+    />
 </template>
 
 <style scoped>
@@ -88,4 +89,18 @@ const panel = computed(() => {
     flex-direction: column;
     height: 100%;
 }
+
+:deep(h1, h5, h6) {
+    font-weight: 600;
+}
+
+:deep(h2, h3) {
+    font-weight: 600;
+    font-size: 1.6rem;
+}
+
+:deep(h4) {
+    font-weight: 600;
+    font-size: 1.33rem;
+}
 </style>

arches_references/src/arches_references/components/MainSplitter.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, inject } from "vue";
+
+import ProgressSpinner from "primevue/progressspinner";
+import Splitter from "primevue/splitter";
+import SplitterPanel from "primevue/splitterpanel";
+
+import { displayedRowKey } from "@/arches_references/constants.ts";
+import { routeNames } from "@/arches_references/routes.ts";
+import { dataIsList } from "@/arches_references/utils.ts";
+import ControlledListSplash from "@/arches_references/components/misc/ControlledListSplash.vue";
+import ItemEditor from "@/arches_references/components/editor/ItemEditor.vue";
+import ListCharacteristics from "@/arches_references/components/editor/ListCharacteristics.vue";
+import ListTree from "@/arches_references/components/tree/ListTree.vue";
+
+import type { Ref } from "vue";
+import type { ControlledList } from "@/arches_references/types";
+
+const { displayedRow } = inject(displayedRowKey) as unknown as {
+    displayedRow: Ref<ControlledList>;
+};
+
+const panel = computed(() => {
+    if (!displayedRow.value) {
+        return ControlledListSplash;
+    }
+    if (dataIsList(displayedRow.value)) {
+        return ListCharacteristics;
+    }
+    return ItemEditor;
+});
+</script>
+
+<template>
+    <Splitter style="height: 100%">
+        <SplitterPanel
+            :size="34"
+            :min-size="25"
+            style="display: flex; flex-direction: column"
+        >
+            <Suspense>
+                <ListTree />
+                <template #fallback>
+                    <ProgressSpinner />
+                </template>
+            </Suspense>
+        </SplitterPanel>
+        <SplitterPanel
+            :size="66"
+            :min-size="25"
+            :style="{
+                margin: '1rem 0rem 4rem 1rem',
+                overflowY: 'auto',
+                paddingRight: '4rem',
+            }"
+        >
+            <component
+                :is="panel"
+                :key="displayedRow?.id ?? routeNames.splash"
+            />
+        </SplitterPanel>
+    </Splitter>
+</template>

arches_references/src/arches_references/components/tree/AddDeleteControls.vue

@@ -5,7 +5,6 @@ import { useGettext } from "vue3-gettext";
 import { useConfirm } from "primevue/useconfirm";
 import { useToast } from "primevue/usetoast";
 import Button from "primevue/button";
-import ConfirmDialog from "primevue/confirmdialog";
 import SplitButton from "primevue/splitbutton";
 
 import {
@@ -113,7 +112,6 @@ const createList = () => {
     };
 
     nextNewList.value = newList;
-    newListFormValue.value = "";
     newListCounter.value += 1;
 
     tree.value.push(listAsNode(newList, selectedLanguage.value));
@@ -262,29 +260,6 @@ await fetchListsAndPopulateTree();
         :severity="shouldUseContrast() ? CONTRAST : PRIMARY"
         @click="createList"
     />
-    <ConfirmDialog
-        :draggable="false"
-        :pt="{
-            root: {
-                style: {
-                    fontSize: 'small',
-                },
-            },
-            header: {
-                style: {
-                    background: 'var(--p-navigation)',
-                    color: 'white',
-                    borderRadius: '1rem',
-                    marginBottom: '1rem',
-                },
-            },
-            title: {
-                style: {
-                    fontWeight: 800,
-                },
-            },
-        }"
-    />
     <SplitButton
         class="list-button"
         :label="$gettext('Delete')"