Move navigation up one component

archesproject · Aug 13, 2024 · f28144e · f28144e
1 parent c098b76
commit f28144e
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 87 deletions.
diff --git a/arches_references/src/arches_references/components/tree/ListTree.vue b/arches_references/src/arches_references/components/tree/ListTree.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import { computed, inject, ref } from "vue";
+import { computed, inject, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 import { useGettext } from "vue3-gettext";
 
 import Tree from "primevue/tree";
 
 import {
     displayedRowKey,
+    routes,
     selectedLanguageKey,
 } from "@/arches_references/constants.ts";
-import { bestLabel, nodeIsList } from "@/arches_references/utils.ts";
+import {
+    bestLabel,
+    findNodeInTree,
+    nodeIsList,
+} from "@/arches_references/utils.ts";
 import LetterCircle from "@/arches_references/components/misc/LetterCircle.vue";
 import ListTreeControls from "@/arches_references/components/tree/ListTreeControls.vue";
 import TreeRow from "@/arches_references/components/tree/TreeRow.vue";
 
 import type { ComponentPublicInstance, Ref } from "vue";
+import type { RouteLocationNormalizedLoadedGeneric } from "vue-router";
 import type { TreePassThroughMethodOptions } from "primevue/tree";
 import type { TreeExpandedKeys, TreeSelectionKeys } from "primevue/tree";
 import type { TreeNode } from "primevue/treenode";
@@ -57,6 +64,81 @@ const { setDisplayedRow } = inject(displayedRowKey) as unknown as {
     setDisplayedRow: RowSetter;
 };
 
+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 (!tree.value.length) {
+                return;
+            }
+            const list = tree.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 (!tree.value.length) {
+                return;
+            }
+            const { found, path } = findNodeInTree(
+                tree.value,
+                newRoute.params.id as string,
+            );
+            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;
+        }
+    }
+};
+
+// Navigate on initial load of the tree.
+watch(
+    tree,
+    () => {
+        navigate(route);
+    },
+    { once: true },
+);
+
 const updateSelectedAndExpanded = (node: TreeNode) => {
     if (isMultiSelecting.value || movingItem.value?.key) {
         return;

diff --git a/arches_references/src/arches_references/components/tree/ListTreeControls.vue b/arches_references/src/arches_references/components/tree/ListTreeControls.vue
@@ -1,17 +1,11 @@
 <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 { ControlledList, RowSetter } from "@/arches_references/types";
+import type { ControlledList } from "@/arches_references/types";
 
 const controlledListItemsTree = defineModel<TreeNode[]>("tree", {
     required: true,
@@ -32,75 +26,6 @@ const newListFormValue = defineModel<string>("newListFormValue", {
     required: true,
 });
 
-const { setDisplayedRow } = inject(displayedRowKey) as unknown as {
-    setDisplayedRow: RowSetter;
-};
-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 as string,
-            );
-            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) {
         expandNode(node);
@@ -120,15 +45,6 @@ const expandNode = (node: TreeNode) => {
         }
     }
 };
-
-// Navigate on initial load of the tree.
-watch(
-    controlledListItemsTree,
-    () => {
-        navigate(route);
-    },
-    { once: true },
-);
 </script>
 
 <template>