From 6c08f5ecc7a7205ddcf26639de4446a78fad0b92 Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Wed, 31 Jul 2024 10:25:39 -0400
Subject: [PATCH] Implement front-end routing #18

---
 CHANGELOG.md                                  |   5 +-
 .../plugins/controlled-list-manager.js        |  15 +++
 .../components/ControlledListsMain.vue        | 109 ++++++++++++------
 .../components/tree/AddDeleteControls.vue     |  32 +----
 .../components/tree/ListTree.vue              |   8 +-
 .../components/tree/ListTreeControls.vue      |  98 +++++++++++++++-
 .../components/tree/MoveRow.vue               |  26 ++---
 .../components/tree/TreeRow.vue               |   7 +-
 .../src/arches-references/constants.ts        |   6 +
 .../plugins/ControlledListManager.vue         |  14 +--
 .../src/arches-references/utils.ts            |  20 +++-
 11 files changed, 233 insertions(+), 107 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4ef1c9..959b805 100644
--- a/CHANGELOG.md
+++ b/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 [#16](https://github.com/archesproject/arches-references/pull/16)
+-   Add front-end routing [#18](https://github.com/archesproject/arches-references/pull/18)
 
 ### Changed
--  Generate URIs when not supplied [#17](https://github.com/archesproject/arches-references/pull/17)
+-   Generate URIs when not supplied [#17](https://github.com/archesproject/arches-references/pull/17)
 
 ### Fixed
 
diff --git a/arches_references/media/js/views/components/plugins/controlled-list-manager.js b/arches_references/media/js/views/components/plugins/controlled-list-manager.js
index b4e25e8..0d23956 100644
--- a/arches_references/media/js/views/components/plugins/controlled-list-manager.js
+++ b/arches_references/media/js/views/components/plugins/controlled-list-manager.js
@@ -1,4 +1,5 @@
 import ko from 'knockout';
+import ControlledListsMain from '@/arches-references/components/ControlledListsMain.vue';
 import { definePreset } from '@primevue/themes';
 import Aura from '@primevue/themes/aura';
 
@@ -6,6 +7,19 @@ import ControlledListManager from '@/arches-references/plugins/ControlledListMan
 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 routes = [
+  { path: '/plugins/controlled-list-manager', name: 'splash', component: ControlledListsMain },
+  { path: '/plugins/controlled-list-manager/list/:id', name: 'list', component: ControlledListsMain },
+  { path: '/plugins/controlled-list-manager/item/:id', name: 'item', component: ControlledListsMain },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
 // Much of this might get merged upstream to core arches in 8.0?
 const ControlledListsPreset = definePreset(Aura, {
     primitive: {
@@ -65,6 +79,7 @@ const controlledListsTheme = {
 ko.components.register('controlled-list-manager', {
     viewModel: function() {
         createVueApplication(ControlledListManager, controlledListsTheme).then((vueApp) => {
+            vueApp.use(router);
             vueApp.mount('#controlled-list-manager-mounting-point');
         });
     },
diff --git a/arches_references/src/arches-references/components/ControlledListsMain.vue b/arches_references/src/arches-references/components/ControlledListsMain.vue
index 798d917..1c95915 100644
--- a/arches_references/src/arches-references/components/ControlledListsMain.vue
+++ b/arches_references/src/arches-references/components/ControlledListsMain.vue
@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import arches from "arches";
 import { computed, provide, ref } from "vue";
+import { useRouter } from "vue-router";
 
+import ConfirmDialog from "primevue/confirmdialog";
 import ProgressSpinner from "primevue/progressspinner";
 import Splitter from "primevue/splitter";
 import SplitterPanel from "primevue/splitterpanel";
+import Toast from "primevue/toast";
 
 import {
     displayedRowKey,
+    routes,
     selectedLanguageKey,
 } from "@/arches-references/constants.ts";
 import { dataIsList } from "@/arches-references/utils.ts";
@@ -21,11 +25,23 @@ import type { Ref } from "vue";
 import type { Language } from "arches/arches/app/src/arches/types";
 import type { Selectable } from "@/arches-references/types";
 
-const splash = "splash";
+const router = useRouter();
 
 const displayedRow: Ref<Selectable | null> = ref(null);
-function setDisplayedRow(val: Selectable | null) {
-    displayedRow.value = val;
+function setDisplayedRow(row: Selectable | null) {
+    displayedRow.value = row;
+    if (row === null) {
+        router.push({ name: routes.splash });
+        return;
+    }
+    if (typeof row.id === "number") {
+        return;
+    }
+    if (dataIsList(row)) {
+        router.push({ name: routes.list, params: { id: row.id } });
+    } else {
+        router.push({ name: routes.item, params: { id: row.id } });
+    }
 }
 provide(displayedRowKey, { displayedRow, setDisplayedRow });
 
@@ -48,37 +64,64 @@ const panel = computed(() => {
 </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 />
+            <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 ?? routes.splash"
+                    />
+                </SplitterPanel>
+            </Splitter>
+        </div>
     </div>
+    <Toast />
+    <ConfirmDialog
+        :draggable="false"
+        :pt="{
+            root: {
+                style: {
+                    fontSize: 'small',
+                },
+            },
+            header: {
+                style: {
+                    background: 'var(--p-primary-950)',
+                    color: 'white',
+                    borderRadius: '1rem',
+                    marginBottom: '1rem',
+                },
+            },
+            title: {
+                style: {
+                    fontWeight: 800,
+                },
+            },
+        }"
+    />
 </template>
 
 <style scoped>
diff --git a/arches_references/src/arches-references/components/tree/AddDeleteControls.vue b/arches_references/src/arches-references/components/tree/AddDeleteControls.vue
index 3e975cb..7bcff87 100644
--- a/arches_references/src/arches-references/components/tree/AddDeleteControls.vue
+++ b/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 {
@@ -53,9 +52,8 @@ const isMultiSelecting = defineModel<boolean>("isMultiSelecting", {
     required: true,
 });
 const nextNewList = defineModel<NewControlledList>("nextNewList");
-const newListFormValue = defineModel<string>("newListFormValue", {
-    required: true,
-});
+
+const { newListName } = defineProps<{ newListName: string }>();
 
 // For new list entry (input textbox)
 const newListCounter = ref(1);
@@ -102,7 +100,7 @@ const deleteSelectOptions = [
 const createList = () => {
     const newList: NewControlledList = {
         id: newListCounter.value,
-        name: newListFormValue.value,
+        name: newListName,
         dynamic: false,
         search_only: false,
         items: [],
@@ -110,7 +108,6 @@ const createList = () => {
     };
 
     nextNewList.value = newList;
-    newListFormValue.value = "";
     newListCounter.value += 1;
 
     tree.value.push(listAsNode(newList, selectedLanguage.value));
@@ -259,29 +256,6 @@ await fetchListsAndPopulateTree();
         :severity="shouldUseContrast() ? CONTRAST : PRIMARY"
         @click="createList"
     />
-    <ConfirmDialog
-        :draggable="false"
-        :pt="{
-            root: {
-                style: {
-                    fontSize: 'small',
-                },
-            },
-            header: {
-                style: {
-                    background: 'var(--p-primary-950)',
-                    color: 'white',
-                    borderRadius: '1rem',
-                    marginBottom: '1rem',
-                },
-            },
-            title: {
-                style: {
-                    fontWeight: 800,
-                },
-            },
-        }"
-    />
     <SplitButton
         class="list-button"
         :label="$gettext('Delete')"
diff --git a/arches_references/src/arches-references/components/tree/ListTree.vue b/arches_references/src/arches-references/components/tree/ListTree.vue
index 8066cff..6c37760 100644
--- a/arches_references/src/arches-references/components/tree/ListTree.vue
+++ b/arches_references/src/arches-references/components/tree/ListTree.vue
@@ -59,6 +59,10 @@ const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
 const { setDisplayedRow } = inject(displayedRowKey) as DisplayedRowRefAndSetter;
 
 const updateSelectedAndExpanded = (node: TreeNode) => {
+    if (isMultiSelecting.value || movingItem.value?.key) {
+        return;
+    }
+
     setDisplayedRow(node.data);
     expandedKeys.value = {
         ...expandedKeys.value,
@@ -170,14 +174,14 @@ const ptNodeContent = ({ instance }: TreePassThroughMethodOptions) => {
 <template>
     <ListTreeControls
         :key="refetcher"
-        v-model="tree"
+        v-model:tree="tree"
         v-model:rerender-tree="rerenderTree"
         v-model:expanded-keys="expandedKeys"
         v-model:selected-keys="selectedKeys"
         v-model:moving-item="movingItem"
         v-model:is-multi-selecting="isMultiSelecting"
         v-model:nextNewList="nextNewList"
-        v-model:newListFormValue="newListFormValue"
+        :new-list-name="newListFormValue"
     />
     <Tree
         v-if="tree"
diff --git a/arches_references/src/arches-references/components/tree/ListTreeControls.vue b/arches_references/src/arches-references/components/tree/ListTreeControls.vue
index d3ab829..2edfaa5 100644
--- a/arches_references/src/arches-references/components/tree/ListTreeControls.vue
+++ b/arches_references/src/arches-references/components/tree/ListTreeControls.vue
@@ -1,13 +1,24 @@
 <script setup lang="ts">
+import { inject, watch } from "vue";
+import { useRoute } from "vue-router";
+
+import { displayedRowKey, routes } from "@/arches-references/constants.ts";
+import { findNodeInTree } from "@/arches-references/utils.ts";
 import ActionBanner from "@/arches-references/components/tree/ActionBanner.vue";
 import AddDeleteControls from "@/arches-references/components/tree/AddDeleteControls.vue";
 import PresentationControls from "@/arches-references/components/tree/PresentationControls.vue";
 
+import type { RouteLocationNormalizedLoadedGeneric } from "vue-router";
 import type { TreeExpandedKeys, TreeSelectionKeys } from "primevue/tree";
 import type { TreeNode } from "primevue/treenode";
-import type { NewControlledList } from "@/arches-references/types";
+import type {
+    DisplayedListItemRefAndSetter,
+    NewControlledList,
+} from "@/arches-references/types";
 
-const controlledListItemsTree = defineModel<TreeNode[]>({ required: true });
+const controlledListItemsTree = defineModel<TreeNode[]>("tree", {
+    required: true,
+});
 const rerenderTree = defineModel<number>("rerenderTree", { required: true });
 const expandedKeys = defineModel<TreeExpandedKeys>("expandedKeys", {
     required: true,
@@ -20,9 +31,75 @@ const isMultiSelecting = defineModel<boolean>("isMultiSelecting", {
     required: true,
 });
 const nextNewList = defineModel<NewControlledList>("nextNewList");
-const newListFormValue = defineModel<string>("newListFormValue", {
-    required: true,
-});
+const { newListName } = defineProps<{ newListName: string }>();
+const { setDisplayedRow } = inject(
+    displayedRowKey,
+) as DisplayedListItemRefAndSetter;
+const route = useRoute();
+watch(
+    [
+        () => {
+            return { ...route };
+        },
+    ],
+    ([newRoute]) => {
+        navigate(newRoute);
+    },
+);
+const navigate = (newRoute: RouteLocationNormalizedLoadedGeneric) => {
+    switch (newRoute.name) {
+        case routes.splash:
+            setDisplayedRow(null);
+            expandedKeys.value = {};
+            selectedKeys.value = {};
+            break;
+        case routes.list: {
+            if (!controlledListItemsTree.value.length) {
+                return;
+            }
+            const list = controlledListItemsTree.value.find(
+                (node) => node.data.id === newRoute.params.id,
+            );
+            if (list) {
+                setDisplayedRow(list.data);
+                expandedKeys.value = {
+                    ...expandedKeys.value,
+                    [list.data.id]: true,
+                };
+                selectedKeys.value = { [list.data.id]: true };
+            } else {
+                setDisplayedRow(null);
+            }
+            break;
+        }
+        case routes.item: {
+            if (!controlledListItemsTree.value.length) {
+                return;
+            }
+            const { found, path } = findNodeInTree(
+                controlledListItemsTree.value,
+                newRoute.params.id,
+            );
+            if (found) {
+                setDisplayedRow(found.data);
+                const itemsToExpandIds = path.map(
+                    (itemInPath: TreeNode) => itemInPath.key,
+                );
+                expandedKeys.value = {
+                    ...expandedKeys.value,
+                    ...Object.fromEntries(
+                        [
+                            found.data.controlled_list_id,
+                            ...itemsToExpandIds,
+                        ].map((x) => [x, true]),
+                    ),
+                };
+                selectedKeys.value = { [found.data.id]: true };
+            }
+            break;
+        }
+    }
+};
 
 const expandAll = () => {
     for (const node of controlledListItemsTree.value) {
@@ -43,6 +120,15 @@ const expandNode = (node: TreeNode) => {
         }
     }
 };
+
+// Navigate on initial load of the tree.
+watch(
+    controlledListItemsTree,
+    () => {
+        navigate(route);
+    },
+    { once: true },
+);
 </script>
 
 <template>
@@ -52,7 +138,7 @@ const expandNode = (node: TreeNode) => {
             v-model:is-multi-selecting="isMultiSelecting"
             v-model:selected-keys="selectedKeys"
             v-model:next-new-list="nextNewList"
-            v-model:new-list-form-value="newListFormValue"
+            :new-list-name
         />
     </div>
     <ActionBanner
diff --git a/arches_references/src/arches-references/components/tree/MoveRow.vue b/arches_references/src/arches-references/components/tree/MoveRow.vue
index 95d7fe8..a8e2585 100644
--- a/arches_references/src/arches-references/components/tree/MoveRow.vue
+++ b/arches_references/src/arches-references/components/tree/MoveRow.vue
@@ -57,11 +57,8 @@ const expandedKeys = defineModel<TreeExpandedKeys>("expandedKeys", {
 const selectedKeys = defineModel<TreeSelectionKeys>("selectedKeys", {
     required: true,
 });
-const movingItem = defineModel<TreeNode>("movingItem", { required: true });
+const movingItem = defineModel<TreeNode>("movingItem");
 const nextNewItem = defineModel<NewControlledListItem>("nextNewItem");
-const newLabelFormValue = defineModel<string>("newLabelFormValue", {
-    required: true,
-});
 const newLabelCounter = ref(1);
 const shouldRefocusUpArrow = ref(false);
 const shouldRefocusDownArrow = ref(false);
@@ -73,8 +70,8 @@ watch(displayedRow, () => {
 
 const isFirstItem = (item: ControlledListItem) => {
     const siblings: TreeNode[] = item.parent_id
-        ? findNodeInTree(tree.value, item.parent_id).data.children
-        : findNodeInTree(tree.value, item.list_id).data.items;
+        ? findNodeInTree(tree.value, item.parent_id).found.data.children
+        : findNodeInTree(tree.value, item.list_id).found.data.items;
     if (!siblings) {
         throw new Error();
     }
@@ -83,8 +80,8 @@ const isFirstItem = (item: ControlledListItem) => {
 
 const isLastItem = (item: ControlledListItem) => {
     const siblings: TreeNode[] = item.parent_id
-        ? findNodeInTree(tree.value, item.parent_id).data.children
-        : findNodeInTree(tree.value, item.list_id).data.items;
+        ? findNodeInTree(tree.value, item.parent_id).found.data.children
+        : findNodeInTree(tree.value, item.list_id).found.data.items;
     if (!siblings) {
         throw new Error();
     }
@@ -95,7 +92,7 @@ const setMovingItem = (node: TreeNode) => {
     movingItem.value = findNodeInTree(
         [itemAsNode(displayedRow.value, selectedLanguage.value)],
         node.key,
-    );
+    ).found;
 };
 
 const addItem = (parent: TreeNode) => {
@@ -121,7 +118,6 @@ const addItem = (parent: TreeNode) => {
     };
 
     nextNewItem.value = newItem;
-    newLabelFormValue.value = "";
     newLabelCounter.value += 1;
 
     parent.children!.push(itemAsNode(newItem, selectedLanguage.value));
@@ -135,13 +131,15 @@ const addItem = (parent: TreeNode) => {
 };
 
 const reorder = async (item: ControlledListItem, up: boolean) => {
-    const list: ControlledList = findNodeInTree(tree.value, item.list_id).data;
+    const list: ControlledList = findNodeInTree(tree.value, item.list_id).found
+        .data;
 
     let siblings: ControlledListItem[];
     if (item.parent_id) {
-        siblings = findNodeInTree(tree.value, item.parent_id).children.map(
-            (child: TreeNode) => child.data,
-        );
+        siblings = findNodeInTree(
+            tree.value,
+            item.parent_id,
+        ).found.children.map((child: TreeNode) => child.data);
     } else {
         siblings = list.items;
     }
diff --git a/arches_references/src/arches-references/components/tree/TreeRow.vue b/arches_references/src/arches-references/components/tree/TreeRow.vue
index 457f2d0..e75cc20 100644
--- a/arches_references/src/arches-references/components/tree/TreeRow.vue
+++ b/arches_references/src/arches-references/components/tree/TreeRow.vue
@@ -136,7 +136,7 @@ const setParent = async (parentNode: TreeNode) => {
         siblings.push(item);
     } else {
         item.parent_id = parentNode.key;
-        list = findNodeInTree(tree.value, item.list_id).data;
+        list = findNodeInTree(tree.value, item.list_id).found.data;
         siblings = parentNode.data.children;
         siblings.push(item);
     }
@@ -208,7 +208,7 @@ const acceptNewItemShortcutEntry = async () => {
     const parent = findNodeInTree(
         tree.value,
         newItem.parent_id ?? newItem.list_id,
-    );
+    ).found;
     parent.children = [
         ...parent.children.filter(
             (child: TreeNode) => typeof child.key === "string",
@@ -223,6 +223,7 @@ const acceptNewItemShortcutEntry = async () => {
 
     selectedKeys.value = { [newItem.id]: true };
     setDisplayedRow(newItem);
+    newLabelFormValue.value = "";
 };
 
 const triggerAcceptNewItemShortcut = () => {
@@ -256,6 +257,7 @@ const acceptNewListShortcutEntry = async () => {
     ];
     selectedKeys.value = { [newList.id]: true };
     setDisplayedRow(newList);
+    newLabelFormValue.value = "";
 };
 </script>
 
@@ -329,7 +331,6 @@ const acceptNewListShortcutEntry = async () => {
                 v-model:selected-keys="selectedKeys"
                 v-model:moving-item="movingItem"
                 v-model:next-new-item="nextNewItem"
-                v-model:new-label-form-value="newLabelFormValue"
                 :node
                 :move-labels
             />
diff --git a/arches_references/src/arches-references/constants.ts b/arches_references/src/arches-references/constants.ts
index a3d4620..b8db722 100644
--- a/arches_references/src/arches-references/constants.ts
+++ b/arches_references/src/arches-references/constants.ts
@@ -22,6 +22,12 @@ export const SECONDARY = "secondary";
 export const SUCCESS = "success";
 export const DEFAULT_ERROR_TOAST_LIFE = 8000;
 
+export const routes = {
+    splash: "splash",
+    list: "list",
+    item: "item",
+};
+
 // Django model choices
 export const METADATA_CHOICES = {
     title: "title",
diff --git a/arches_references/src/arches-references/plugins/ControlledListManager.vue b/arches_references/src/arches-references/plugins/ControlledListManager.vue
index d8932a8..19a6ce7 100644
--- a/arches_references/src/arches-references/plugins/ControlledListManager.vue
+++ b/arches_references/src/arches-references/plugins/ControlledListManager.vue
@@ -1,17 +1,5 @@
-<script setup lang="ts">
-import Toast from "primevue/toast";
-
-import ControlledListsMain from "@/arches-references/components/ControlledListsMain.vue";
-</script>
-
 <template>
-    <!-- Subtract size of arches toolbars -->
-    <div style="width: calc(100vw - 50px); height: calc(100vh - 50px)">
-        <div style="height: 100%">
-            <ControlledListsMain />
-        </div>
-    </div>
-    <Toast />
+    <RouterView />
 </template>
 
 <!-- Not scoped: workaround for lack of font-family in <body> -->
diff --git a/arches_references/src/arches-references/utils.ts b/arches_references/src/arches-references/utils.ts
index b76b0df..78cbb6a 100644
--- a/arches_references/src/arches-references/utils.ts
+++ b/arches_references/src/arches-references/utils.ts
@@ -40,22 +40,32 @@ export const languageNameFromCode = (code: string) => {
     return arches.languages.find((lang: Language) => lang.code === code).name;
 };
 
-export const findNodeInTree = (tree: TreeNode[], itemId: string) => {
+export const findNodeInTree = (
+    tree: TreeNode[],
+    itemId: string,
+): {
+    found: TreeNode | undefined;
+    path: TreeNode[];
+} => {
+    const path: TreeNode[] = [];
+
     function recurse(items: TreeNode[]): TreeNode | undefined {
         for (const item of items) {
             if (item.data.id === itemId) {
                 return item;
             }
             for (const child of item.items ?? item.children) {
-                const maybeFound = recurse([child]);
-                if (maybeFound) {
-                    return maybeFound;
+                const found = recurse([child]);
+                if (found) {
+                    path.push(item);
+                    return found;
                 }
             }
         }
     }
 
-    return recurse(tree);
+    const found = recurse(tree);
+    return { found, path };
 };
 
 export const itemAsNode = (