split collection manage tabs into separate views; improve performance…

… for listing collection items
rainu · Nov 5, 2024 · e5cb628 · e5cb628
1 parent 368ce27
commit e5cb628
Show file tree

Hide file tree

Showing 5 changed files with 392 additions and 313 deletions.
diff --git a/src/components/layout/Navigation.vue b/src/components/layout/Navigation.vue
@@ -2,19 +2,21 @@
 	<v-list :opened="open" open-strategy="multiple">
 		<!-- Directory (only if supported) -->
 		<template v-if="features.local">
-			<v-list-group v-if="mainDirectory" value="local">
+			<v-list-group v-if="mainDirectory" value="local" fluid>
 				<template v-slot:activator="{ props }">
 					<v-list-item v-bind="props" :title="$t('file.title')" prepend-icon="mdi-folder-open-outline"></v-list-item>
 				</template>
 
 				<v-list-item
 					:to="{ name: RouteDirectoryAnalyse }"
 					:title="$t('vision.analyse.title')"
+					class="ml-2"
 					prepend-icon="mdi-folder-eye-outline"
 				></v-list-item>
 				<v-list-item
 					:to="{ name: RouteDirectorySearch }"
 					:title="$t('search.title')"
+					class="ml-2"
 					prepend-icon="mdi-folder-search-outline"
 				></v-list-item>
 			</v-list-group>
@@ -24,24 +26,40 @@
 		</template>
 
 		<!-- Collection -->
-		<v-list-group v-if="collectionName" value="remote">
+		<v-list-group v-if="collectionName" value="remote" fluid>
 			<template v-slot:activator="{ props }">
 				<v-list-item v-bind="props" :title="$t('collection.title')" prepend-icon="mdi-collage" active></v-list-item>
 			</template>
 
-			<v-list-item
-				:to="{ name: RouteCollectionList, params: { collection: collectionName } }"
-				:title="$t('collection.manage.title')"
-				prepend-icon="mdi-format-list-group"
-			></v-list-item>
+			<v-list-group value="remote-manage" fluid>
+				<template v-slot:activator="{ props }">
+					<v-list-item v-bind="props" :title="$t('collection.manage.title')" prepend-icon="mdi-format-list-group" class="ml-2" active></v-list-item>
+				</template>
+
+				<v-list-item
+					:to="{ name: RouteCollectionManageList, params: { collection: collectionName } }"
+					:title="$t('collection.manage.content')"
+					class="ml-4"
+					prepend-icon="mdi-format-list-checkbox"
+				></v-list-item>
+				<v-list-item
+					:to="{ name: RouteCollectionManageAdd, params: { collection: collectionName } }"
+					:title="$t('collection.manage.add')"
+					class="ml-4"
+					prepend-icon="mdi-image-plus"
+				></v-list-item>
+			</v-list-group>
+
 			<v-list-item
 				:to="{ name: RouteCollectionAnalyse, params: { collection: collectionName } }"
 				:title="$t('vision.analyse.title')"
+				class="ml-2"
 				prepend-icon="mdi-archive-eye-outline"
 			></v-list-item>
 			<v-list-item
 				:to="{ name: RouteCollectionSearch, params: { collection: collectionName } }"
 				:title="$t('search.title')"
+				class="ml-2"
 				prepend-icon="mdi-image-search-outline"
 			></v-list-item>
 		</v-list-group>
@@ -79,16 +97,17 @@ import { defineComponent } from "vue"
 import {
 	RouteCollection,
 	RouteCollectionAnalyse,
-	RouteCollectionManage,
+	RouteCollectionManageList,
+	RouteCollectionManageAdd,
 	RouteCollectionSearch,
 	RouteDirectory,
 	RouteDirectoryAnalyse,
 	RouteDirectorySearch,
 	RouteExport,
 	RouteHome,
 	RouteImport,
-	RouteHelp
-} from "../../router"
+	RouteHelp,
+} from '../../router'
 import { mapState } from "pinia"
 import { useFileStore } from "../../store/file.ts"
 import { isLocalSupported } from "../../support.ts"
@@ -108,7 +127,8 @@ export default defineComponent({
 			RouteDirectorySearch,
 			RouteCollection,
 			RouteCollectionAnalyse,
-			RouteCollectionList: RouteCollectionManage,
+			RouteCollectionManageList,
+			RouteCollectionManageAdd,
 			RouteCollectionSearch,
 			RouteImport,
 			RouteExport

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -19,6 +19,8 @@ export const RouteDirectorySearch = RouteDirectory + '-search'
 export const RouteCollection = 'collection'
 export const RouteCollectionAnalyse = RouteCollection + '-analyse'
 export const RouteCollectionManage = RouteCollection + '-manage'
+export const RouteCollectionManageList = RouteCollectionManage + '-list'
+export const RouteCollectionManageAdd = RouteCollectionManage + '-add'
 export const RouteCollectionSearch = RouteCollection + '-search'
 export const RouteImport = 'import'
 export const RouteExport = 'export'
@@ -87,7 +89,18 @@ export default createRouter({
 						{
 							name: RouteCollectionManage,
 							path: 'manage',
-							component: () => import('../views/collection/Manage.vue'),
+							children: [
+								{
+									name: RouteCollectionManageList,
+									path: 'list',
+									component: () => import('../views/collection/manage/List.vue'),
+								},
+								{
+									name: RouteCollectionManageAdd,
+									path: 'add',
+									component: () => import('../views/collection/manage/Add.vue'),
+								},
+							]
 						},
 						{
 							name: RouteCollectionSearch,