Add author edit modal & remove from experimental

client/components/modals/authors/EditModal.vue

@@ -0,0 +1,160 @@
+<template>
+  <modals-modal v-model="show" name="edit-author" :width="800" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+    <div class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
+      <form @submit.prevent="submitForm">
+        <div class="flex">
+          <div class="w-40 p-2">
+            <div class="w-full h-45 relative">
+              <covers-author-image :author="author" />
+              <div v-show="!processing" class="absolute top-0 left-0 w-full h-full opacity-0 hover:opacity-100">
+                <span class="absolute top-2 right-2 material-icons text-error transform hover:scale-125 transition-transform cursor-pointer text-lg" @click="removeCover">delete</span>
+              </div>
+            </div>
+          </div>
+          <div class="flex-grow">
+            <div class="flex">
+              <div class="w-3/4 p-2">
+                <ui-text-input-with-label v-model="authorCopy.name" :disabled="processing" label="Name" />
+              </div>
+              <div class="flex-grow p-2">
+                <ui-text-input-with-label v-model="authorCopy.asin" :disabled="processing" label="ASIN" />
+              </div>
+            </div>
+            <div class="p-2">
+              <ui-textarea-with-label v-model="authorCopy.description" :disabled="processing" label="Description" :rows="8" />
+            </div>
+
+            <div class="flex pt-2 px-2">
+              <ui-btn type="button" @click="searchAuthor">Quick Match</ui-btn>
+              <div class="flex-grow" />
+              <ui-btn type="submit">Submit</ui-btn>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    author: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      authorCopy: {
+        name: '',
+        asin: '',
+        description: ''
+      },
+      processing: false
+    }
+  },
+  watch: {
+    author: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    authorId() {
+      if (!this.author) return ''
+      return this.author.id
+    },
+    title() {
+      return 'Edit Author'
+    }
+  },
+  methods: {
+    init() {
+      this.authorCopy.name = this.author.name
+      this.authorCopy.asin = this.author.asin
+      this.authorCopy.description = this.author.description
+    },
+    async submitForm() {
+      var keysToCheck = ['name', 'asin', 'description']
+      var updatePayload = {}
+      keysToCheck.forEach((key) => {
+        if (this.authorCopy[key] !== this.author[key]) {
+          updatePayload[key] = this.authorCopy[key]
+        }
+      })
+      if (!Object.keys(updatePayload).length) {
+        this.$toast.info('No updates are necessary')
+        return
+      }
+      this.processing = true
+      var result = await this.$axios.$patch(`/api/authors/${this.authorId}`, updatePayload).catch((error) => {
+        console.error('Failed', error)
+        this.$toast.error('Failed to update author')
+        return null
+      })
+      if (result) {
+        if (result.updated) this.$toast.success('Author updated')
+        else this.$toast.info('No updates were needed')
+      }
+      this.processing = false
+    },
+    async removeCover() {
+      var updatePayload = {
+        imagePath: null,
+        relImagePath: null
+      }
+      this.processing = true
+      var result = await this.$axios.$patch(`/api/authors/${this.authorId}`, updatePayload).catch((error) => {
+        console.error('Failed', error)
+        this.$toast.error('Failed to remove image')
+        return null
+      })
+      if (result && result.updated) {
+        this.$toast.success('Author image removed')
+      }
+      this.processing = false
+    },
+    async searchAuthor() {
+      if (!this.authorCopy.name) {
+        this.$toast.error('Must enter an author name')
+        return
+      }
+      this.processing = true
+      var response = await this.$axios.$post(`/api/authors/${this.authorId}/match`, { q: this.authorCopy.name }).catch((error) => {
+        console.error('Failed', error)
+        return null
+      })
+      if (!response) {
+        this.$toast.error('Author not found')
+      } else if (response.updated) {
+        if (response.author.imagePath) this.$toast.success('Author was updated')
+        else this.$toast.success('Author was updated (no image found)')
+      } else {
+        this.$toast.info('No updates were made for Author')
+      }
+      this.processing = false
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>

client/components/modals/item/EditModal.vue

@@ -35,32 +35,32 @@ export default {
         {
           id: 'details',
           title: 'Details',
-          component: 'modals-edit-tabs-details'
+          component: 'modals-item-tabs-details'
         },
         {
           id: 'cover',
           title: 'Cover',
-          component: 'modals-edit-tabs-cover'
+          component: 'modals-item-tabs-cover'
         },
         {
           id: 'chapters',
           title: 'Chapters',
-          component: 'modals-edit-tabs-chapters'
+          component: 'modals-item-tabs-chapters'
         },
         {
           id: 'files',
           title: 'Files',
-          component: 'modals-edit-tabs-files'
+          component: 'modals-item-tabs-files'
         },
         {
           id: 'download',
           title: 'Download',
-          component: 'modals-edit-tabs-download'
+          component: 'modals-item-tabs-download'
         },
         {
           id: 'match',
           title: 'Match',
-          component: 'modals-edit-tabs-match'
+          component: 'modals-item-tabs-match'
         }
       ]
     }

client/components/modals/libraries/LibraryItem.vue

@@ -1,108 +0,0 @@
-<template>
-  <div class="w-full px-4 h-12 border border-white border-opacity-10 flex items-center relative -mt-px" :class="selected ? 'bg-primary bg-opacity-50' : 'hover:bg-primary hover:bg-opacity-25'" @mouseover="mouseover = true" @mouseleave="mouseover = false">
-    <div v-show="selected" class="absolute top-0 left-0 h-full w-0.5 bg-warning z-10" />
-    <widgets-library-icon v-if="!libraryScan" :icon="library.icon" :size="6" class="text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" />
-    <svg v-else viewBox="0 0 24 24" class="h-6 w-6 text-white text-opacity-50 animate-spin">
-      <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
-    </svg>
-    <p class="text-xl font-book pl-4 hover:underline cursor-pointer" @click.stop="$emit('click', library)">{{ library.name }}</p>
-    <div class="flex-grow" />
-    <ui-btn v-show="isHovering && !libraryScan && canScan" small color="success" @click.stop="scan">Scan</ui-btn>
-    <ui-btn v-show="isHovering && !libraryScan && canScan" small color="bg" class="ml-2" @click.stop="forceScan">Force Re-Scan</ui-btn>
-
-    <ui-btn v-show="isHovering && !libraryScan && canScan" small color="bg" class="ml-2" @click.stop="matchAll">Match Books</ui-btn>
-
-    <span v-show="isHovering && !libraryScan && showEdit && canEdit" class="material-icons text-xl text-gray-300 hover:text-gray-50 ml-4 cursor-pointer" @click.stop="editClick">edit</span>
-    <span v-show="!libraryScan && isHovering && showEdit && canDelete && !isDeleting" class="material-icons text-xl text-gray-300 ml-3" :class="isMain ? 'text-opacity-5 cursor-not-allowed' : 'hover:text-gray-50 cursor-pointer'" @click.stop="deleteClick">delete</span>
-    <div v-show="isDeleting" class="text-xl text-gray-300 ml-3 animate-spin">
-      <svg viewBox="0 0 24 24" class="w-6 h-6">
-        <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
-      </svg>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    library: {
-      type: Object,
-      default: () => {}
-    },
-    selected: Boolean,
-    showEdit: Boolean,
-    dragging: Boolean
-  },
-  data() {
-    return {
-      mouseover: false,
-      isDeleting: false
-    }
-  },
-  computed: {
-    isHovering() {
-      return this.mouseover && !this.dragging
-    },
-    isMain() {
-      return this.library.id === 'main'
-    },
-    libraryScan() {
-      return this.$store.getters['scanners/getLibraryScan'](this.library.id)
-    },
-    canEdit() {
-      return this.$store.getters['user/getIsRoot']
-    },
-    canDelete() {
-      return this.$store.getters['user/getIsRoot']
-    },
-    canScan() {
-      return this.$store.getters['user/getIsRoot']
-    }
-  },
-  methods: {
-    matchAll() {
-      this.$axios
-        .$post(`/api/libraries/${this.library.id}/matchbooks`)
-        .then(() => {
-          console.log('Starting scan for matches')
-        })
-        .catch((error) => {
-          console.error('Failed', error)
-          var errorMsg = err.response ? err.response.data : ''
-          this.$toast.error(errorMsg || 'Match all failed')
-        })
-    },
-    editClick() {
-      this.$emit('edit', this.library)
-    },
-    scan() {
-      this.$root.socket.emit('scan', this.library.id)
-    },
-    forceScan() {
-      this.$root.socket.emit('scan', this.library.id, { forceRescan: true })
-    },
-    deleteClick() {
-      if (this.isMain) return
-      if (confirm(`Are you sure you want to permanently delete library "${this.library.name}"?`)) {
-        this.isDeleting = true
-        this.$axios
-          .$delete(`/api/libraries/${this.library.id}`)
-          .then((data) => {
-            this.isDeleting = false
-            if (data.error) {
-              this.$toast.error(data.error)
-            } else {
-              this.$toast.success('Library deleted')
-            }
-          })
-          .catch((error) => {
-            console.error('Failed to delete library', error)
-            this.$toast.error('Failed to delete library')
-            this.isDeleting = false
-          })
-      }
-    }
-  },
-  mounted() {}
-}
-</script>