update library

next-ui/src/components.d.ts

@@ -61,6 +61,7 @@ declare module 'vue' {
     LibraryFormStepOptions: typeof import('./components/library/form/StepOptions.vue')['default']
     LibraryFormStepScanner: typeof import('./components/library/form/StepScanner.vue')['default']
     LibraryMenuLibraries: typeof import('./components/library/MenuLibraries.vue')['default']
+    LibraryMenuLibrary: typeof import('./components/library/MenuLibrary.vue')['default']
     LocaleSelector: typeof import('./components/LocaleSelector.vue')['default']
     MenuLibraries: typeof import('./components/menu/MenuLibraries.vue')['default']
     PageHashKnownTable: typeof import('./components/pageHash/KnownTable.vue')['default']

next-ui/src/components/layout/app/drawer/menu/Libraries.vue

@@ -24,7 +24,7 @@
         @click="createLibrary"
       />
       <v-icon-btn
-        id="menu-libraries-drawer"
+        id="ID01KC5N8S3V35QV04SYETY01M9H"
         icon="i-mdi:dots-vertical"
         :aria-label="
           $formatMessage({
@@ -34,7 +34,7 @@
           })
         "
       />
-      <LibraryMenuLibraries activator-id="#menu-libraries-drawer" />
+      <LibraryMenuLibraries activator-id="#ID01KC5N8S3V35QV04SYETY01M9H" />
     </template>
   </v-list-item>
 
@@ -47,6 +47,7 @@
     <template #append>
       <v-icon-btn
         v-if="isAdmin"
+        :id="`ID01KC5NTP02S3CMF12ZS2R4HNWX${library.id}`"
         icon="i-mdi:dots-vertical"
         :aria-label="
           $formatMessage({
@@ -56,6 +57,10 @@
           })
         "
       />
+      <LibraryMenuLibrary
+        :activator-id="`#ID01KC5NTP02S3CMF12ZS2R4HNWX${library.id}`"
+        :library="library"
+      />
     </template>
   </v-list-item>
 
@@ -86,6 +91,7 @@
       <template #append>
         <v-icon-btn
           v-if="isAdmin"
+          :id="`ID01KC5QH18T79WTFFJWJ6ES4SFE${library.id}`"
           icon="i-mdi:dots-vertical"
           :aria-label="
             $formatMessage({
@@ -95,6 +101,10 @@
             })
           "
         />
+        <LibraryMenuLibrary
+          :activator-id="`#ID01KC5QH18T79WTFFJWJ6ES4SFE${library.id}`"
+          :library="library"
+        />
       </template>
     </v-list-item>
   </v-list-group>
@@ -145,39 +155,38 @@ function createLibrary() {
     props: { createMode: true },
   }
   dialogConfirmEdit.value.record = getLibraryDefaults()
-  dialogConfirmEdit.value.callback = handleDialogConfirmation
-}
+  dialogConfirmEdit.value.callback = (
+    hideDialog: () => void,
+    setLoading: (isLoading: boolean) => void,
+  ) => {
+    setLoading(true)
 
-function handleDialogConfirmation(
-  hideDialog: () => void,
-  setLoading: (isLoading: boolean) => void,
-) {
-  setLoading(true)
+    const newLib = dialogConfirmEdit.value.record as components['schemas']['LibraryCreationDto']
 
-  const newLib = dialogConfirmEdit.value.record as components['schemas']['LibraryCreationDto']
-
-  mutateCreateLibrary(newLib)
-    .then(() => {
-      hideDialog()
-      messagesStore.messages.push({
-        text: intl.formatMessage(
-          {
-            description: 'Snackbar notification shown upon successful library creation',
-            defaultMessage: 'Library created: {library}',
-            id: '+8++PW',
-          },
-          {
-            library: newLib.name,
-          },
-        ),
+    mutateCreateLibrary(newLib)
+      .then(() => {
+        hideDialog()
+        messagesStore.messages.push({
+          text: intl.formatMessage(
+            {
+              description: 'Snackbar notification shown upon successful library creation',
+              defaultMessage: 'Library created: {library}',
+              id: '+8++PW',
+            },
+            {
+              library: newLib.name,
+            },
+          ),
+        })
       })
-    })
-    .catch((error) => {
-      messagesStore.messages.push({
-        text:
-          (error?.cause as ErrorCause)?.message || intl.formatMessage(commonMessages.networkError),
+      .catch((error) => {
+        messagesStore.messages.push({
+          text:
+            (error?.cause as ErrorCause)?.message ||
+            intl.formatMessage(commonMessages.networkError),
+        })
+        setLoading(false)
       })
-      setLoading(false)
-    })
+  }
 }
 </script>

next-ui/src/components/library/MenuLibraries.vue

@@ -1,5 +1,8 @@
 <template>
-  <v-menu :activator="activatorId">
+  <v-menu
+    :activator="activatorId"
+    location="end"
+  >
     <v-list density="compact">
       <v-list-item
         v-for="(action, i) in actions"

next-ui/src/components/library/MenuLibrary.vue

@@ -0,0 +1,146 @@
+<template>
+  <v-menu
+    :activator="activatorId"
+    location="end"
+  >
+    <v-list density="compact">
+      <v-list-item
+        v-for="(action, i) in actions"
+        :key="i"
+        v-bind="action"
+      />
+
+      <v-list-item
+        :title="
+          $formatMessage({
+            description: 'Library menu: manage',
+            defaultMessage: 'Manage library',
+            id: 'HNu1rT',
+          })
+        "
+        append-icon="i-mdi:menu-right"
+      >
+        <v-menu
+          activator="parent"
+          open-on-click
+          open-on-hover
+          location="end"
+          submenu
+        >
+          <v-list density="compact">
+            <v-list-item
+              :title="
+                $formatMessage({
+                  description: 'Library menu: manage > edit',
+                  defaultMessage: 'Edit',
+                  id: 'n4w2CE',
+                })
+              "
+              @mouseenter="dialogConfirmEdit.activator = $event.currentTarget"
+              @click="updateLibrary()"
+            />
+          </v-list>
+        </v-menu>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { useIntl } from 'vue-intl'
+import { storeToRefs } from 'pinia'
+import { useDialogsStore } from '@/stores/dialogs'
+import { useUpdateLibrary } from '@/colada/libraries'
+import { useMessagesStore } from '@/stores/messages'
+import CreateEdit from '@/components/library/form/CreateEdit.vue'
+import type { components } from '@/generated/openapi/komga'
+import { useDisplay } from 'vuetify'
+import type { ErrorCause } from '@/api/komga-client'
+import { commonMessages } from '@/utils/i18n/common-messages'
+
+const { activatorId, library } = defineProps<{
+  activatorId: string
+  library: components['schemas']['LibraryDto']
+}>()
+
+const intl = useIntl()
+const { confirmEdit: dialogConfirmEdit } = storeToRefs(useDialogsStore())
+const messagesStore = useMessagesStore()
+const display = useDisplay()
+
+//region actions
+const actions = [
+  {
+    title: intl.formatMessage({
+      description: 'Library menu: scan',
+      defaultMessage: 'Scan library files',
+      id: 'GCwZB2',
+    }),
+    // onClick: () => (appStore.reorderLibraries = true),
+  },
+]
+//endregion
+
+//region Update Library
+const { mutateAsync: mutateUpdateLibrary } = useUpdateLibrary()
+
+function updateLibrary() {
+  dialogConfirmEdit.value.dialogProps = {
+    title: intl.formatMessage({
+      description: 'Update library dialog title',
+      defaultMessage: 'Update library',
+      id: 'am3r7e',
+    }),
+    maxWidth: 600,
+    okText: 'Save',
+    cardTextClass: 'px-0',
+    closeOnSave: false,
+    scrollable: true,
+    fullscreen: display.xs.value,
+  }
+  dialogConfirmEdit.value.slot = {
+    component: markRaw(CreateEdit),
+    props: { createMode: false },
+  }
+  dialogConfirmEdit.value.record = library
+  dialogConfirmEdit.value.callback = (
+    hideDialog: () => void,
+    setLoading: (isLoading: boolean) => void,
+  ) => {
+    setLoading(true)
+
+    const updatedLib = dialogConfirmEdit.value.record as components['schemas']['LibraryDto']
+
+    mutateUpdateLibrary(updatedLib)
+      .then(() => {
+        hideDialog()
+        messagesStore.messages.push({
+          text: intl.formatMessage(
+            {
+              description: 'Snackbar notification shown upon successful library update',
+              defaultMessage: 'Library updated: {library}',
+              id: 'aOiU5f',
+            },
+            {
+              library: updatedLib.name,
+            },
+          ),
+        })
+      })
+      .catch((error) => {
+        messagesStore.messages.push({
+          text:
+            (error?.cause as ErrorCause)?.message ||
+            intl.formatMessage(commonMessages.networkError),
+        })
+        setLoading(false)
+      })
+  }
+}
+
+//endregion
+</script>
+
+<script lang="ts"></script>
+
+<style scoped></style>