feat(webui): adapt card content depending on context

closes #679
gotson · Feb 14, 2022 · 35bf05e · 35bf05e
1 parent 55df968
commit 35bf05e
Show file tree

Hide file tree

Showing 14 changed files with 206 additions and 67 deletions.
diff --git a/komga-webui/src/components/ItemBrowser.vue b/komga-webui/src/components/ItemBrowser.vue
@@ -26,6 +26,7 @@
                 <item-card
                   class="item-card"
                   :item="item"
+                  :item-context="itemContext"
                   :width="itemWidth"
                   :selected="active"
                   :no-link="draggable || deletable"
@@ -76,6 +77,7 @@ import ItemCard from '@/components/ItemCard.vue'
 import {computeCardWidth} from '@/functions/grid-utilities'
 import Vue from 'vue'
 import draggable from 'vuedraggable'
+import {ItemContext} from '@/types/items'
 
 export default Vue.extend({
   name: 'ItemBrowser',
@@ -85,6 +87,10 @@ export default Vue.extend({
       type: Array,
       required: true,
     },
+    itemContext: {
+      type: Array as () => ItemContext[],
+      default: () => [],
+    },
     fixedItemWidth: {
       type: Number,
       required: false,

diff --git a/komga-webui/src/components/ItemCard.vue b/komga-webui/src/components/ItemCard.vue
@@ -101,14 +101,28 @@
 
         <!--      Description-->
         <template v-if="!thumbnailOnly">
-          <router-link :to="to" class="link-underline">
+          <router-link v-if="!Array.isArray(title)" :to="title.to" class="link-underline" @click.native="$event.stopImmediatePropagation()">
             <v-card-subtitle
               v-line-clamp="2"
               v-bind="subtitleProps"
-              v-html="title"
+              v-html="title.title"
+            />
+          </router-link>
+          <template v-if="Array.isArray(title)">
+            <v-card-subtitle
+              v-bind="subtitleProps"
             >
+              <router-link
+                v-for="(t, i) in title"
+                :key="i"
+                :to="t.to"
+                @click.native="$event.stopImmediatePropagation()"
+                class="link-underline text-truncate"
+                v-html="t.title"
+                style="display: block"
+              />
             </v-card-subtitle>
-          </router-link>
+          </template>
           <v-card-text class="px-2" v-html="body">
           </v-card-text>
         </template>
@@ -123,17 +137,21 @@ import CollectionActionsMenu from '@/components/menus/CollectionActionsMenu.vue'
 import SeriesActionsMenu from '@/components/menus/SeriesActionsMenu.vue'
 import {getReadProgress, getReadProgressPercentage} from '@/functions/book-progress'
 import {ReadStatus} from '@/types/enum-books'
-import {createItem, Item, ItemTypes} from '@/types/items'
+import {createItem, Item, ItemContext, ItemTitle, ItemTypes} from '@/types/items'
 import Vue from 'vue'
 import {RawLocation} from 'vue-router'
 import ReadListActionsMenu from '@/components/menus/ReadListActionsMenu.vue'
 import {BookDto} from '@/types/komga-books'
 import {SeriesDto} from '@/types/komga-series'
 import {
-  THUMBNAILBOOK_ADDED, THUMBNAILBOOK_DELETED,
-  THUMBNAILCOLLECTION_ADDED, THUMBNAILCOLLECTION_DELETED,
-  THUMBNAILREADLIST_ADDED, THUMBNAILREADLIST_DELETED,
-  THUMBNAILSERIES_ADDED, THUMBNAILSERIES_DELETED,
+  THUMBNAILBOOK_ADDED,
+  THUMBNAILBOOK_DELETED,
+  THUMBNAILCOLLECTION_ADDED,
+  THUMBNAILCOLLECTION_DELETED,
+  THUMBNAILREADLIST_ADDED,
+  THUMBNAILREADLIST_DELETED,
+  THUMBNAILSERIES_ADDED,
+  THUMBNAILSERIES_DELETED,
 } from '@/types/events'
 import {
   ThumbnailBookSseDto,
@@ -151,6 +169,10 @@ export default Vue.extend({
       type: Object as () => BookDto | SeriesDto | CollectionDto | ReadListDto,
       required: true,
     },
+    itemContext: {
+      type: Array as () => ItemContext[],
+      default: () => [],
+    },
     // hide the bottom part of the card
     thumbnailOnly: {
       type: Boolean,
@@ -248,14 +270,14 @@ export default Vue.extend({
     thumbnailUrl(): string {
       return this.computedItem.thumbnailUrl() + this.thumbnailCacheBust
     },
-    title(): string {
-      return this.computedItem.title()
+    title(): ItemTitle | ItemTitle[] {
+      return this.computedItem.title(this.itemContext)
     },
     subtitleProps(): Object {
       return this.computedItem.subtitleProps()
     },
     body(): string {
-      return this.computedItem.body()
+      return this.computedItem.body(this.itemContext)
     },
     isInProgress(): boolean {
       if (this.computedItem.type() === ItemTypes.BOOK) return getReadProgress(this.item as BookDto) === ReadStatus.IN_PROGRESS

diff --git a/komga-webui/src/components/ReadListsExpansionPanels.vue b/komga-webui/src/components/ReadListsExpansionPanels.vue
@@ -13,6 +13,7 @@
           </template>
           <template v-slot:content>
             <item-browser :items="readListsContent[index]"
+                          :item-context="[ItemContext.SHOW_SERIES]"
                           nowrap
                           :selectable="false"
                           :action-menu="false"
@@ -31,6 +32,7 @@ import ItemBrowser from '@/components/ItemBrowser.vue'
 import Vue from 'vue'
 import {BookDto} from '@/types/komga-books'
 import {ContextOrigin} from '@/types/context'
+import {ItemContext} from '@/types/items'
 
 export default Vue.extend({
   name: 'ReadListsExpansionPanels',
@@ -46,6 +48,7 @@ export default Vue.extend({
   },
   data: () => {
     return {
+      ItemContext,
       readListPanel: undefined as number | undefined,
       readListsContent: [[]] as any[],
     }

diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
@@ -43,7 +43,9 @@
   "book_card": {
     "error": "Error",
     "unknown": "To be analyzed",
-    "unsupported": "Unsupported"
+    "unread": "Unread",
+    "unsupported": "Unsupported",
+    "no_release_date": "No release date"
   },
   "book_import": {
     "button_browse": "Browse",