WIP: Feat/book series info

client/components/app/BookShelfToolbar.vue

@@ -63,6 +63,8 @@
         </ui-tooltip>
 
         <ui-context-menu-dropdown v-if="!isBatchSelecting && seriesContextMenuItems.length" :items="seriesContextMenuItems" class="mx-px" @action="seriesContextMenuAction" />
+
+        <modals-edit-series-modal v-model="showEditSeriesModal" :series="this.selectedSeries" />
       </template>
       <!-- library & collections page -->
       <template v-else-if="page !== 'search' && page !== 'podcast-search' && page !== 'recent-episodes' && !isHome && !isAuthorsPage">
@@ -131,14 +133,19 @@ export default {
       totalEntities: 0,
       processingSeries: false,
       processingIssues: false,
-      processingAuthors: false
+      processingAuthors: false,
+      showEditSeriesModal: false
     }
   },
   computed: {
     seriesContextMenuItems() {
       if (!this.selectedSeries) return []
 
       const items = [
+        {
+          text: this.$strings.LabelEditSeries,
+          action: 'edit-series'
+        },
         {
           text: this.isSeriesFinished ? this.$strings.MessageMarkAsNotFinished : this.$strings.MessageMarkAsFinished,
           action: 'mark-series-finished'
@@ -440,6 +447,9 @@ export default {
     exportOPML() {
       this.$downloadFile(`/api/libraries/${this.currentLibraryId}/opml?token=${this.$store.getters['user/getToken']}`, null, true)
     },
+    showEditSeries() {
+      this.showEditSeriesModal = !this.showEditSeriesModal
+    },
     seriesContextMenuAction({ action }) {
       if (action === 'open-rss-feed') {
         this.showOpenSeriesRSSFeed()
@@ -455,6 +465,8 @@ export default {
           return
         }
         this.markSeriesFinished()
+      } else if ((action = 'edit-series')) {
+        this.showEditSeries()
       } else if (this.handleSubtitlesAction(action)) {
         return
       } else if (this.handleCollapseSubSeriesAction(action)) {

client/components/modals/EditSeriesModal.vue

@@ -0,0 +1,65 @@
+<template>
+  <modals-modal v-model="show" name="edit-series" :processing="isProcessing" :width="500" :height="'unset'">
+    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-4" style="max-height: 80vh; min-height: 40vh">
+      <h3 class="text-xl font-semibold mb-8">{{ $strings.LabelEditSeries }}</h3>
+      <div class="flex items-center mb-4">
+        <ui-textarea-with-label v-model="descriptionValue" :label="$strings.LabelSeriesDescription" :rows="8" />
+      </div>
+      <div class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg border-t border-white border-opacity-5">
+        <div class="flex items-center px-4">
+          <div class="flex-grow" />
+
+          <!-- desktop -->
+          <ui-btn @click="save" class="mx-2 hidden md:block">{{ $strings.ButtonSave }}</ui-btn>
+          <ui-btn @click="saveAndClose" class="mx-2 hidden md:block">{{ $strings.ButtonSaveAndClose }}</ui-btn>
+          <!-- mobile -->
+          <ui-btn @click="saveAndClose" class="mx-2 md:hidden">{{ $strings.ButtonSave }}</ui-btn>
+        </div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    series: Object
+  },
+  data() {
+    return {
+      isProcessing: false,
+      descriptionValue: ''
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    async save() {
+      if (this.isProcessing) {
+        return null
+      }
+
+      const payload = {
+        description: this.descriptionValue
+      }
+
+      this.isProcessing = true
+      // Handle series update
+      this.isProcessing = false
+    },
+    async saveAndClose() {
+      const wasUpdated = await this.save()
+      if (wasUpdated !== null) this.show = false
+    }
+  }
+}
+</script>

client/strings/en-us.json

@@ -311,6 +311,7 @@
   "LabelEbook": "Ebook",
   "LabelEbooks": "Ebooks",
   "LabelEdit": "Edit",
+  "LabelEditSeries": "Edit Series",
   "LabelEmail": "Email",
   "LabelEmailSettingsFromAddress": "From Address",
   "LabelEmailSettingsRejectUnauthorized": "Reject unauthorized certificates",
@@ -543,6 +544,7 @@
   "LabelSequence": "Sequence",
   "LabelSerial": "Serial",
   "LabelSeries": "Series",
+  "LabelSeriesDescription": "Series Description",
   "LabelSeriesName": "Series Name",
   "LabelSeriesProgress": "Series Progress",
   "LabelServerLogLevel": "Server Log Level",