Add:Authors landing page #187

client/components/app/BookShelfRow.vue

@@ -199,10 +199,7 @@ export default {
   scroll-behavior: smooth;
   width: calc(100vw - 80px);
 
-  /* background-color: rgb(214, 116, 36); */
   background-image: var(--bookshelf-texture-img);
-  /* background-position: center; */
-  /* background-size: contain; */
   background-repeat: repeat-x;
 }
 @media (max-width: 768px) {
@@ -213,9 +210,7 @@ export default {
 
 .bookshelfDividerCategorized {
   background: rgb(149, 119, 90);
-  /* background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%); */
   background: linear-gradient(180deg, rgb(122, 94, 68) 0%, rgb(92, 62, 31) 17%, rgb(82, 54, 26) 88%, rgba(71, 48, 25, 1) 100%);
-  /* background: linear-gradient(180deg, rgb(114, 85, 59) 0%, rgb(73, 48, 22) 17%, rgb(71, 43, 15) 88%, rgb(61, 41, 20) 100%); */
   box-shadow: 2px 14px 8px #111111aa;
 }
 

client/components/modals/authors/EditModal.vue

@@ -43,13 +43,13 @@
 
 <script>
 export default {
-  props: {
-    value: Boolean,
-    author: {
-      type: Object,
-      default: () => {}
-    }
-  },
+  // props: {
+  //   value: Boolean,
+  //   author: {
+  //     type: Object,
+  //     default: () => {}
+  //   }
+  // },
   data() {
     return {
       authorCopy: {
@@ -73,12 +73,15 @@ export default {
   computed: {
     show: {
       get() {
-        return this.value
+        return this.$store.state.globals.showEditAuthorModal
       },
       set(val) {
-        this.$emit('input', val)
+        this.$store.commit('globals/setShowEditAuthorModal', val)
       }
     },
+    author() {
+      return this.$store.state.globals.selectedAuthor
+    },
     authorId() {
       if (!this.author) return ''
       return this.author.id

client/components/widgets/ItemSlider.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="w-full">
+    <div class="flex items-center py-3">
+      <slot />
+      <div class="flex-grow" />
+      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
+        <span class="material-icons text-2xl">chevron_left</span>
+      </button>
+      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
+        <span class="material-icons text-2xl">chevron_right</span>
+      </button>
+    </div>
+    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled">
+      <div class="flex" :style="{ height: height + 'px' }">
+        <template v-for="(item, index) in items">
+          <cards-lazy-book-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :book-mount="item" :height="cardHeight" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" :bookshelf-view="$constants.BookshelfView.TITLES" class="relative mx-2" @edit="editItem" @select="selectItem" />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    height: {
+      type: Number,
+      default: 192
+    }
+  },
+  data() {
+    return {
+      isScrollable: false,
+      canScrollLeft: false,
+      canScrollRight: false,
+      clientWidth: 0
+    }
+  },
+  computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['getBookCoverAspectRatio']
+    },
+    cardHeight() {
+      return this.height - 40
+    },
+    cardWidth() {
+      return this.cardHeight / this.bookCoverAspectRatio
+    },
+    booksPerPage() {
+      return Math.floor(this.clientWidth / (this.cardWidth + 16))
+    },
+    isSelectionMode() {
+      return this.$store.getters['getNumLibraryItemsSelected'] > 0
+    }
+  },
+  methods: {
+    clearSelectedEntities() {
+      this.updateSelectionMode(false)
+    },
+    editItem(libraryItem) {
+      var itemIds = this.items.map((e) => e.id)
+      this.$store.commit('setBookshelfBookIds', itemIds)
+      this.$store.commit('showEditModal', libraryItem)
+    },
+    selectItem(libraryItem) {
+      this.$store.commit('toggleLibraryItemSelected', libraryItem.id)
+      this.$nextTick(() => {
+        this.$eventBus.$emit('item-selected', libraryItem)
+      })
+    },
+    itemSelectedEvt() {
+      this.updateSelectionMode(this.isSelectionMode)
+    },
+    updateSelectionMode(val) {
+      var selectedLibraryItems = this.$store.state.selectedLibraryItems
+
+      this.items.forEach((item) => {
+        var component = this.$refs[`slider-item-${item.id}`]
+        if (!component || !component.length) return
+        component = component[0]
+        component.setSelectionMode(val)
+        component.selected = selectedLibraryItems.includes(item.id)
+      })
+    },
+    scrolled() {
+      this.setScrollVars()
+    },
+    scrollRight() {
+      if (!this.canScrollRight) return
+      const slider = this.$refs.slider
+      if (!slider) return
+      const scrollAmount = this.booksPerPage * this.cardWidth
+      const maxScrollLeft = slider.scrollWidth - slider.clientWidth
+
+      const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount)
+      slider.scrollLeft = newScrollLeft
+    },
+    scrollLeft() {
+      if (!this.canScrollLeft) return
+      const slider = this.$refs.slider
+      if (!slider) return
+
+      const scrollAmount = this.booksPerPage * this.cardWidth
+
+      const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount)
+      slider.scrollLeft = newScrollLeft
+    },
+    setScrollVars() {
+      const slider = this.$refs.slider
+      if (!slider) return
+      const { scrollLeft, scrollWidth, clientWidth } = slider
+      const scrollPercent = (scrollLeft + clientWidth) / scrollWidth
+
+      this.clientWidth = clientWidth
+      this.isScrollable = scrollWidth > clientWidth
+      this.canScrollRight = scrollPercent < 1
+      this.canScrollLeft = scrollLeft > 0
+    }
+  },
+  updated() {
+    this.setScrollVars()
+  },
+  mounted() {
+    this.setScrollVars()
+
+    this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
+    this.$eventBus.$on('item-selected', this.itemSelectedEvt)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('bookshelf-clear-selection', this.clearSelectedEntities)
+    this.$eventBus.$off('item-selected', this.itemSelectedEvt)
+  }
+}
+</script>