feat(webui): move some views into media management section

gotson · Feb 18, 2022 · 90caee9 · 90caee9
1 parent f8bea23
commit 90caee9
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 56 deletions.
diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
@@ -683,6 +683,9 @@
     "status": "Status",
     "url": "URL"
   },
+  "media_management": {
+    "title": "Media Management"
+  },
   "menu": {
     "add_to_collection": "Add to collection",
     "add_to_readlist": "Add to read list",

diff --git a/komga-webui/src/router.ts b/komga-webui/src/router.ts
@@ -66,7 +66,7 @@ const router = new Router({
         {
           path: '/settings',
           name: 'settings',
-          redirect: {name: 'settings-analysis'},
+          redirect: {name: 'settings-users'},
           component: () => import(/* webpackChunkName: "settings" */ './views/SettingsHolder.vue'),
           children: [
             {
@@ -83,49 +83,57 @@ const router = new Router({
               ],
             },
             {
-              path: '/settings/analysis',
-              name: 'settings-analysis',
+              path: '/settings/server',
+              name: 'settings-server',
+              beforeEnter: adminGuard,
+              component: () => import(/* webpackChunkName: "settings-server" */ './views/SettingsServer.vue'),
+            },
+            {
+              path: '/settings/metrics',
+              name: 'metrics',
+              beforeEnter: adminGuard,
+              component: () => import(/* webpackChunkName: "metrics" */ './views/Metrics.vue'),
+            },
+          ],
+        },
+        {
+          path: '/media-management',
+          name: 'media-management',
+          redirect: {name: 'media-analysis'},
+          component: () => import(/* webpackChunkName: "media-management" */ './views/MediaManagement.vue'),
+          children: [
+            {
+              path: '/media-management/analysis',
+              name: 'media-analysis',
               beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "settings-analysis" */ './views/SettingsMediaAnalysis.vue'),
+              component: () => import(/* webpackChunkName: "media-analysis" */ './views/MediaAnalysis.vue'),
             },
             {
-              path: '/settings/duplicates',
-              name: 'settings-duplicates',
+              path: '/media-management/duplicate-files',
+              name: 'duplicate-files',
               beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "settings-duplicates" */ './views/SettingsDuplicates.vue'),
+              component: () => import(/* webpackChunkName: "duplicate-files" */ './views/DuplicateFiles.vue'),
             },
             {
-              path: '/settings/duplicate-pages',
-              name: 'settings-duplicate-pages',
+              path: '/media-management/duplicate-pages',
+              name: 'duplicate-pages',
               redirect: {name: 'settings-duplicate-pages-known'},
-              component: () => import(/* webpackChunkName: "settings-duplicate-pages" */ './views/SettingsDuplicatePagesHolder.vue'),
+              component: () => import(/* webpackChunkName: "duplicate-pages" */ './views/DuplicatePagesHolder.vue'),
               children: [
                 {
-                  path: '/settings/duplicate-pages/known',
+                  path: '/media-management/duplicate-pages/known',
                   name: 'settings-duplicate-pages-known',
                   beforeEnter: adminGuard,
-                  component: () => import(/* webpackChunkName: "settings-duplicate-pages" */ './views/SettingsDuplicatePagesKnown.vue'),
+                  component: () => import(/* webpackChunkName: "duplicate-pages" */ './views/DuplicatePagesKnown.vue'),
                 },
                 {
-                  path: '/settings/duplicate-pages/unknown',
+                  path: '/media-management/duplicate-pages/unknown',
                   name: 'settings-duplicate-pages-unknown',
                   beforeEnter: adminGuard,
-                  component: () => import(/* webpackChunkName: "settings-duplicate-pages" */ './views/SettingsDuplicatePagesUnknown.vue'),
+                  component: () => import(/* webpackChunkName: "duplicate-pages" */ './views/DuplicatePagesUnknown.vue'),
                 },
               ],
             },
-            {
-              path: '/settings/server',
-              name: 'settings-server',
-              beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "settings-server" */ './views/SettingsServer.vue'),
-            },
-            {
-              path: '/settings/metrics',
-              name: 'metrics',
-              beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "metrics" */ './views/Metrics.vue'),
-            },
           ],
         },
         {

diff --git a/komga-webui/src/views/SettingsDuplicates.vue → komga-webui/src/views/DuplicateFiles.vue b/komga-webui/src/views/SettingsDuplicates.vue → komga-webui/src/views/DuplicateFiles.vue
@@ -49,7 +49,7 @@ import Vue from 'vue'
 import {BookDto} from '@/types/komga-books'
 
 export default Vue.extend({
-  name: 'SettingsDuplicates',
+  name: 'DuplicateFiles',
   data: function () {
     return {
       books: [] as BookDto[],

diff --git a/...rc/views/SettingsDuplicatePagesHolder.vue → ...-webui/src/views/DuplicatePagesHolder.vue b/...rc/views/SettingsDuplicatePagesHolder.vue → ...-webui/src/views/DuplicatePagesHolder.vue
@@ -12,7 +12,7 @@
 import Vue from 'vue'
 
 export default Vue.extend({
-  name: 'SettingsDuplicatePagesHolder',
+  name: 'DuplicatePagesHolder',
 })
 </script>
 

diff --git a/...src/views/SettingsDuplicatePagesKnown.vue → ...a-webui/src/views/DuplicatePagesKnown.vue b/...src/views/SettingsDuplicatePagesKnown.vue → ...a-webui/src/views/DuplicatePagesKnown.vue
@@ -119,7 +119,7 @@ import {PageHashAction} from '@/types/enum-pagehashes'
 import PageHashMatchesTable from '@/components/PageHashMatchesTable.vue'
 
 export default Vue.extend({
-  name: 'SettingsDuplicatePagesKnown',
+  name: 'DuplicatePagesKnown',
   components: {PageHashKnownCard, PageHashMatchesTable},
   data: function () {
     return {

diff --git a/...c/views/SettingsDuplicatePagesUnknown.vue → ...webui/src/views/DuplicatePagesUnknown.vue b/...c/views/SettingsDuplicatePagesUnknown.vue → ...webui/src/views/DuplicatePagesUnknown.vue
@@ -112,7 +112,7 @@ import PageHashUnknownCard from '@/components/PageHashUnknownCard.vue'
 import PageSizeSelect from '@/components/PageSizeSelect.vue'
 
 export default Vue.extend({
-  name: 'SettingsDuplicatePagesUnknown',
+  name: 'DuplicatePagesUnknown',
   components: {PageHashUnknownCard, PageHashMatchesTable, PageSizeSelect},
   data: function () {
     return {

diff --git a/komga-webui/src/views/HomeView.vue b/komga-webui/src/views/HomeView.vue
@@ -105,6 +105,22 @@
           </v-list-item-content>
         </v-list-item>
 
+        <v-list-item :to="{name: 'media-management'}" v-if="isAdmin">
+          <v-list-item-action>
+            <v-icon>mdi-book-cog</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-badge
+              dot
+              inline
+              :value="booksToCheck"
+              color="accent"
+            >
+              <v-list-item-title>{{ $t('media_management.title') }}</v-list-item-title>
+            </v-badge>
+          </v-list-item-content>
+        </v-list-item>
+
         <v-list-item :to="{name: 'history'}" v-if="isAdmin">
           <v-list-item-icon>
             <v-icon>mdi-clock-time-four-outline</v-icon>
@@ -119,14 +135,7 @@
             <v-icon>mdi-cog</v-icon>
           </v-list-item-action>
           <v-list-item-content>
-            <v-badge
-              dot
-              inline
-              :value="booksToCheck"
-              color="accent"
-            >
-              <v-list-item-title>{{ $t('server_settings.server_settings') }}</v-list-item-title>
-            </v-badge>
+            <v-list-item-title>{{ $t('server_settings.server_settings') }}</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
 

diff --git a/komga-webui/src/views/ImportHolder.vue b/komga-webui/src/views/ImportHolder.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-tabs>
+    <v-tabs grow>
       <v-tab :to="{name: 'import-books'}">{{ $t('common.books') }}</v-tab>
       <v-tab :to="{name: 'import-readlists'}">{{ $t('common.readlists') }}</v-tab>
     </v-tabs>

diff --git a/...webui/src/views/SettingsMediaAnalysis.vue → komga-webui/src/views/MediaAnalysis.vue b/...webui/src/views/SettingsMediaAnalysis.vue → komga-webui/src/views/MediaAnalysis.vue
@@ -39,7 +39,7 @@ import {BookDto} from '@/types/komga-books'
 import {convertErrorCodes} from '@/functions/error-codes'
 
 export default Vue.extend({
-  name: 'SettingsMediaAnalysis',
+  name: 'MediaAnalysis',
   data: function () {
     return {
       books: [] as BookDto[],

diff --git a/komga-webui/src/views/MediaManagement.vue b/komga-webui/src/views/MediaManagement.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <v-tabs grow>
+      <v-tab :to="{name: 'media-analysis'}">
+        <v-badge
+          dot
+          :value="booksToCheck"
+          color="accent"
+        >
+          {{ $t('media_analysis.media_analysis') }}
+        </v-badge>
+      </v-tab>
+      <v-tab :to="{name: 'duplicate-files'}">{{ $t('duplicates.title') }}</v-tab>
+      <v-tab :to="{name: 'duplicate-pages'}">{{ $t('duplicate_pages.title') }}</v-tab>
+    </v-tabs>
+    <router-view/>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'MediaManagement',
+  computed: {
+    booksToCheck(): number {
+      return this.$store.state.booksToCheck
+    },
+  },
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/komga-webui/src/views/SettingsHolder.vue b/komga-webui/src/views/SettingsHolder.vue
@@ -1,17 +1,6 @@
 <template>
   <div>
     <v-tabs grow>
-      <v-tab :to="{name: 'settings-analysis'}">
-        <v-badge
-          dot
-          :value="booksToCheck"
-          color="accent"
-        >
-          {{ $t('media_analysis.media_analysis') }}
-        </v-badge>
-      </v-tab>
-      <v-tab :to="{name: 'settings-duplicates'}">{{ $t('duplicates.title') }}</v-tab>
-      <v-tab :to="{name: 'settings-duplicate-pages'}">{{ $t('duplicate_pages.title') }}</v-tab>
       <v-tab :to="{name: 'settings-users'}">{{ $t('users.users') }}</v-tab>
       <v-tab :to="{name: 'settings-server'}">{{ $t('server.tab_title') }}</v-tab>
       <v-tab :to="{name: 'metrics'}">{{ $t('metrics.title') }}</v-tab>
@@ -25,11 +14,6 @@ import Vue from 'vue'
 
 export default Vue.extend({
   name: 'SettingsHolder',
-  computed: {
-    booksToCheck(): number {
-      return this.$store.state.booksToCheck
-    },
-  },
 })
 </script>