From bc45d0c3c18fe96944676d442a71e204d33c59d4 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Sun, 28 Jun 2020 19:45:52 +0800
Subject: [PATCH] refactor(webui): use ItemBrowser in horizontal scroller

---
 komga-webui/src/components/ItemBrowser.vue | 14 ++++++++--
 komga-webui/src/views/Dashboard.vue        | 32 +++++-----------------
 komga-webui/src/views/Search.vue           | 19 ++++---------
 3 files changed, 23 insertions(+), 42 deletions(-)

diff --git a/komga-webui/src/components/ItemBrowser.vue b/komga-webui/src/components/ItemBrowser.vue
index 7f98b5c60..831467ba9 100644
--- a/komga-webui/src/components/ItemBrowser.vue
+++ b/komga-webui/src/components/ItemBrowser.vue
@@ -5,12 +5,13 @@
          v-resize="onResize"
     >
       <draggable v-model="localItems"
-                 class="d-flex flex-wrap"
+                 :class="flexClass"
                  handle=".handle"
                  v-bind="dragOptions"
       >
-        <transition-group type="transition" :name="!draggable ? 'flip-list' : null"
-                          class="d-flex flex-wrap"
+        <transition-group type="transition"
+                          :name="!draggable ? 'flip-list' : null"
+                          :class="flexClass"
         >
           <v-item
             v-for="item in localItems"
@@ -105,6 +106,10 @@ export default Vue.extend({
       type: Boolean,
       default: false,
     },
+    nowrap: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: () => {
     return {
@@ -140,6 +145,9 @@ export default Vue.extend({
     },
   },
   computed: {
+    flexClass (): string {
+      return this.nowrap ? 'd-flex flex-nowrap' : 'd-flex flex-wrap'
+    },
     hasItems (): boolean {
       return this.items.length > 0
     },
diff --git a/komga-webui/src/views/Dashboard.vue b/komga-webui/src/views/Dashboard.vue
index 0ebe1f897..e86463f2e 100644
--- a/komga-webui/src/views/Dashboard.vue
+++ b/komga-webui/src/views/Dashboard.vue
@@ -13,11 +13,7 @@
         <div class="title">Keep Reading</div>
       </template>
       <template v-slot:content>
-        <div v-for="(b, i) in inProgressBooks"
-             :key="i"
-        >
-          <item-card class="ma-2 card" :item="b" :on-edit="singleEditBook"/>
-        </div>
+        <item-browser :items="inProgressBooks" nowrap :edit-function="singleEditBook" :selectable="false"/>
       </template>
     </horizontal-scroller>
 
@@ -26,11 +22,7 @@
         <div class="title">On Deck</div>
       </template>
       <template v-slot:content>
-        <div v-for="(b, i) in onDeckBooks"
-             :key="i"
-        >
-          <item-card class="ma-2 card" :item="b" :on-edit="singleEditBook"/>
-        </div>
+        <item-browser :items="onDeckBooks" nowrap :edit-function="singleEditBook" :selectable="false"/>
       </template>
     </horizontal-scroller>
 
@@ -39,10 +31,7 @@
         <div class="title">Recently Added Series</div>
       </template>
       <template v-slot:content>
-        <div v-for="(s, i) in newSeries"
-             :key="i">
-          <item-card class="ma-2 card" :item="s" :on-edit="singleEditSeries"/>
-        </div>
+        <item-browser :items="newSeries" nowrap :edit-function="singleEditSeries" :selectable="false"/>
       </template>
     </horizontal-scroller>
 
@@ -51,10 +40,7 @@
         <div class="title">Recently Updated Series</div>
       </template>
       <template v-slot:content>
-        <div v-for="(s, i) in updatedSeries"
-             :key="i">
-          <item-card class="ma-2 card" :item="s" :on-edit="singleEditSeries"/>
-        </div>
+        <item-browser :items="updatedSeries" nowrap :edit-function="singleEditSeries" :selectable="false"/>
       </template>
     </horizontal-scroller>
 
@@ -63,11 +49,7 @@
         <div class="title">Recently Added Books</div>
       </template>
       <template v-slot:content>
-        <div v-for="(b, i) in latestBooks"
-             :key="i"
-        >
-          <item-card class="ma-2 card" :item="b" :on-edit="singleEditBook"/>
-        </div>
+        <item-browser :items="latestBooks" nowrap :edit-function="singleEditBook" :selectable="false"/>
       </template>
     </horizontal-scroller>
 
@@ -77,14 +59,14 @@
 <script lang="ts">
 import EmptyState from '@/components/EmptyState.vue'
 import HorizontalScroller from '@/components/HorizontalScroller.vue'
-import ItemCard from '@/components/ItemCard.vue'
 import { ReadStatus } from '@/types/enum-books'
 import { BOOK_CHANGED, LIBRARY_DELETED, SERIES_CHANGED } from '@/types/events'
 import Vue from 'vue'
+import ItemBrowser from '@/components/ItemBrowser.vue'
 
 export default Vue.extend({
   name: 'Dashboard',
-  components: { ItemCard, HorizontalScroller, EmptyState },
+  components: { HorizontalScroller, EmptyState, ItemBrowser },
   data: () => {
     return {
       newSeries: [] as SeriesDto[],
diff --git a/komga-webui/src/views/Search.vue b/komga-webui/src/views/Search.vue
index 840d341d4..4ad2d8c11 100644
--- a/komga-webui/src/views/Search.vue
+++ b/komga-webui/src/views/Search.vue
@@ -23,10 +23,7 @@
             <div class="title">Series</div>
           </template>
           <template v-slot:content>
-            <div v-for="(item, index) in series"
-                 :key="index">
-              <item-card class="ma-2 card" :item="item" :on-edit="singleEditSeries"/>
-            </div>
+            <item-browser :items="series" nowrap :edit-function="singleEditSeries" :selectable="false"/>
           </template>
         </horizontal-scroller>
 
@@ -35,10 +32,7 @@
             <div class="title">Books</div>
           </template>
           <template v-slot:content>
-            <div v-for="(item, index) in books"
-                 :key="index">
-              <item-card class="ma-2 card" :item="item" :on-edit="singleEditBook"/>
-            </div>
+            <item-browser :items="books" nowrap :edit-function="singleEditBook" :selectable="false"/>
           </template>
         </horizontal-scroller>
 
@@ -47,10 +41,7 @@
             <div class="title">Collections</div>
           </template>
           <template v-slot:content>
-            <div v-for="(item, index) in collections"
-                 :key="index">
-              <item-card class="ma-2 card" :item="item" :on-edit="singleEditCollection"/>
-            </div>
+            <item-browser :items="collections" nowrap :edit-function="singleEditCollection" :selectable="false"/>
           </template>
         </horizontal-scroller>
 
@@ -63,10 +54,10 @@
 <script lang="ts">
 import EmptyState from '@/components/EmptyState.vue'
 import HorizontalScroller from '@/components/HorizontalScroller.vue'
-import ItemCard from '@/components/ItemCard.vue'
 import ToolbarSticky from '@/components/ToolbarSticky.vue'
 import { BOOK_CHANGED, COLLECTION_CHANGED, LIBRARY_DELETED, SERIES_CHANGED } from '@/types/events'
 import Vue from 'vue'
+import ItemBrowser from '@/components/ItemBrowser.vue'
 
 export default Vue.extend({
   name: 'Search',
@@ -74,7 +65,7 @@ export default Vue.extend({
     EmptyState,
     ToolbarSticky,
     HorizontalScroller,
-    ItemCard,
+    ItemBrowser,
   },
   data: () => {
     return {