Upgrade controlled list manager to PrimeVue 4

.gitignore

@@ -9,6 +9,7 @@ arches_references/staticfiles
 arches_references/media/packages
 arches_references/media/build/
 arches_references/uploadedfiles/*
+arches_references/list_item_images
 arches_references/settings_local.py
 webpack-stats.json
 .vscode/

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,14 +1,23 @@
 import ko from 'knockout';
+
+import { routes } from '@/arches_references/routes.ts';
 import ControlledListManager from '@/arches_references/plugins/ControlledListManager.vue';
-import createVueApp from 'utils/create-vue-application';
+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() {
-        createVueApp(ControlledListManager).then((vueApp) => {
+        createVueApplication(ControlledListManager).then((vueApp) => {
+            vueApp.use(router);
             vueApp.mount('#controlled-list-manager-mounting-point');
         });
     },
     template: ControlledListManagerTemplate,
-});
+});

arches_references/src/arches_references/components/ControlledListsMain.vue

@@ -1,32 +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 { LIGHT_GRAY } from "@/arches_references/theme.ts";
 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 });
@@ -37,60 +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
-            :pt="{
-                root: { style: { height: '100%' } },
-                gutter: { style: { background: LIGHT_GRAY } },
-                gutterHandler: { style: { background: LIGHT_GRAY } },
-            }"
-        >
-            <SplitterPanel
-                :size="34"
-                :min-size="25"
-                :pt="{
-                    root: {
-                        style: { display: 'flex', flexDirection: '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>
@@ -99,4 +89,16 @@ const panel = computed(() => {
     flex-direction: column;
     height: 100%;
 }
+
+:deep(h2) {
+    font-size: medium;
+}
+
+:deep(h3) {
+    font-size: medium;
+}
+
+:deep(h4) {
+    font-size: small;
+}
 </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/editor/AddMetadata.vue

@@ -5,9 +5,8 @@ import { useGettext } from "vue3-gettext";
 
 import Button from "primevue/button";
 
-import { ARCHES_CHROME_BLUE } from "@/arches_references/theme.ts";
-import { itemKey } from "@/arches_references/constants.ts";
-import { dataIsNew } from "@/arches_references/utils.ts";
+import { itemKey, CONTRAST, PRIMARY } from "@/arches_references/constants.ts";
+import { dataIsNew, shouldUseContrast } from "@/arches_references/utils.ts";
 
 import type { Ref } from "vue";
 import type {
@@ -67,34 +66,17 @@ const addMetadata = () => {
     <Button
         class="add-metadata"
         raised
+        icon="fa fa-plus-circle"
+        :severity="shouldUseContrast() ? CONTRAST : PRIMARY"
+        :label="$gettext('Add metadata')"
         @click="addMetadata"
-    >
-        <i
-            class="fa fa-plus-circle"
-            aria-hidden="true"
-        />
-        <span class="add-metadata-text">
-            {{ $gettext("Add metadata") }}
-        </span>
-    </Button>
+    />
 </template>
 
 <style scoped>
 .add-metadata {
     display: flex;
     height: 3rem;
-    color: v-bind(ARCHES_CHROME_BLUE);
-    background-color: #f3fbfd;
     margin-top: 1rem;
 }
-.add-metadata > i,
-.add-metadata > span {
-    align-self: center;
-    font-size: small;
-}
-.add-metadata-text {
-    margin: 1rem;
-    font-size: small;
-    font-weight: 600;
-}
 </style>

arches_references/src/arches_references/components/editor/AddValue.vue

@@ -5,14 +5,15 @@ import { useGettext } from "vue3-gettext";
 
 import Button from "primevue/button";
 
-import { ARCHES_CHROME_BLUE } from "@/arches_references/theme.ts";
 import {
     itemKey,
     ALT_LABEL,
+    CONTRAST,
     NOTE_CHOICES,
     PREF_LABEL,
+    PRIMARY,
 } from "@/arches_references/constants.ts";
-import { dataIsNew } from "@/arches_references/utils.ts";
+import { dataIsNew, shouldUseContrast } from "@/arches_references/utils.ts";
 
 import type { Ref } from "vue";
 import type { Language } from "@/arches/types";
@@ -98,33 +99,18 @@ const addValue = () => {
     <Button
         class="add-value"
         raised
+        icon="fa fa-plus-circle"
+        :severity="shouldUseContrast() ? CONTRAST : PRIMARY"
+        :label="buttonLabel"
         @click="addValue"
-    >
-        <i
-            class="fa fa-plus-circle"
-            aria-hidden="true"
-        />
-        <span class="add-value-text">
-            {{ buttonLabel }}
-        </span>
-    </Button>
+    />
 </template>
 
 <style scoped>
 .add-value {
     display: flex;
     height: 3rem;
-    color: v-bind(ARCHES_CHROME_BLUE);
-    background-color: #f3fbfd;
     margin-top: 1rem;
-}
-.add-value > i,
-.add-value > span {
-    align-self: center;
-}
-.add-value-text {
-    margin: 1rem;
-    font-size: small;
-    font-weight: 600;
+    font-size: smaller;
 }
 </style>