feat(webui): display page size in book import dialog

Author: gotson

Diff for: komga-webui/src/components/PagesTable.vue

@@ -3,15 +3,17 @@
     <thead>
       <tr>
         <th>{{ $t('dialog.transient_book_details.pages_table.index') }}</th>
-        <th>{{ $t('dialog.transient_book_details.pages_table.filename') }}</th>
-        <th>{{ $t('dialog.transient_book_details.pages_table.media_type') }}</th>
-        <th>{{ $t('dialog.transient_book_details.pages_table.width') }}</th>
-        <th>{{ $t('dialog.transient_book_details.pages_table.height') }}</th>
+        <th :class="rightPages.length > 0 ? 'diff' : ''">{{ $t('dialog.transient_book_details.pages_table.filename') }}</th>
+        <th :class="rightPages.length > 0 ? 'diff' : ''">{{ $t('dialog.transient_book_details.pages_table.media_type') }}</th>
+        <th :class="rightPages.length > 0 ? 'diff' : ''">{{ $t('dialog.transient_book_details.pages_table.width') }}</th>
+        <th :class="rightPages.length > 0 ? 'diff' : ''">{{ $t('dialog.transient_book_details.pages_table.height') }}</th>
+        <th :class="rightPages.length > 0 ? 'diff' : ''">{{ $t('dialog.transient_book_details.pages_table.size') }}</th>
         <template v-if="rightPages.length > 0">
           <th>{{ $t('dialog.transient_book_details.pages_table.filename') }}</th>
           <th>{{ $t('dialog.transient_book_details.pages_table.media_type') }}</th>
           <th>{{ $t('dialog.transient_book_details.pages_table.width') }}</th>
           <th>{{ $t('dialog.transient_book_details.pages_table.height') }}</th>
+          <th>{{ $t('dialog.transient_book_details.pages_table.size') }}</th>
         </template>
       </tr>
     </thead>
@@ -21,15 +23,17 @@
         :key="i"
       >
         <td>{{ n }}</td>
-        <td>{{ $_.get(leftPages[n-1], 'fileName', '') }}</td>
-        <td>{{ $_.get(leftPages[n-1], 'mediaType', '') }}</td>
-        <td>{{ $_.get(leftPages[n-1], 'width', '') }}</td>
-        <td>{{ $_.get(leftPages[n-1], 'height', '') }}</td>
+        <td :class="rightPages.length > 0 ? 'diff' : ''">{{ $_.get(leftPages[n-1], 'fileName', '') }}</td>
+        <td :class="rightPages.length > 0 ? 'diff' : ''">{{ $_.get(leftPages[n-1], 'mediaType', '') }}</td>
+        <td :class="rightPages.length > 0 ? 'diff' : ''">{{ $_.get(leftPages[n-1], 'width', '') }}</td>
+        <td :class="rightPages.length > 0 ? 'diff' : ''">{{ $_.get(leftPages[n-1], 'height', '') }}</td>
+        <td :class="rightPages.length > 0 ? 'diff' : ''">{{ $_.get(leftPages[n-1], 'size', '') }}</td>
         <template v-if="rightPages.length > 0">
           <td>{{ $_.get(rightPages[n-1], 'fileName', '') }}</td>
           <td>{{ $_.get(rightPages[n-1], 'mediaType', '') }}</td>
           <td>{{ $_.get(rightPages[n-1], 'width', '') }}</td>
           <td>{{ $_.get(rightPages[n-1], 'height', '') }}</td>
+          <td>{{ $_.get(rightPages[n-1], 'size', '') }}</td>
         </template>
       </tr>
     </tbody>

Diff for: komga-webui/src/components/dialogs/TransientBookDetailsDialog.vue

@@ -19,32 +19,32 @@
               <thead v-if="rightBook">
               <tr>
                 <th></th>
-                <th>{{ $t('dialog.transient_book_details.label_candidate') }}</th>
+                <th :class="rightBook ? 'diff' : ''">{{ $t('dialog.transient_book_details.label_candidate') }}</th>
                 <th>{{ $t('dialog.transient_book_details.label_existing') }}</th>
               </tr>
               </thead>
               <tbody>
               <tr>
                 <td class="font-weight-medium">{{ $t('dialog.transient_book_details.label_name') }}</td>
-                <td>{{ leftBook.name }}</td>
+                <td :class="rightBook ? 'diff' : ''">{{ leftBook.name }}</td>
                 <td v-if="rightBook">{{ rightBook.metadata.title }}</td>
               </tr>
 
               <tr>
                 <td class="font-weight-medium">{{ $t('dialog.transient_book_details.label_size') }}</td>
-                <td>{{ leftBook.size }}</td>
+                <td :class="rightBook ? 'diff' : ''">{{ leftBook.size }}</td>
                 <td v-if="rightBook">{{ rightBook.size }}</td>
               </tr>
 
               <tr>
                 <td class="font-weight-medium">{{ $t('dialog.transient_book_details.label_format') }}</td>
-                <td>{{ getBookFormatFromMediaType(leftBook.mediaType).type }}</td>
+                <td :class="rightBook ? 'diff' : ''">{{ getBookFormatFromMediaType(leftBook.mediaType).type }}</td>
                 <td v-if="rightBook">{{ getBookFormatFromMediaType(rightBook.media.mediaType).type }}</td>
               </tr>
 
               <tr>
                 <td class="font-weight-medium">{{ $t('dialog.transient_book_details.label_pages') }}</td>
-                <td>{{ leftBook.pages.length }}</td>
+                <td :class="rightBook ? 'diff' : ''">{{ leftBook.pages.length }}</td>
                 <td v-if="rightBook">{{ rightBook.media.pagesCount }}</td>
               </tr>
 

Diff for: komga-webui/src/locales/en.json

@@ -505,6 +505,7 @@
         "height": "Height",
         "index": "Index",
         "media_type": "Media type",
+        "size": "Size",
         "width": "Width"
       },
       "title": "Book Details",

Diff for: komga-webui/src/plugins/vuetify.ts

@@ -34,6 +34,7 @@ export default new Vuetify({
         accent: '#ff0335',
         'contrast-1': colors.grey.lighten4,
         'contrast-light-2': colors.grey.darken2,
+        'diff': colors.green.lighten4,
       },
       dark: {
         base: colors.shades.black,
@@ -42,6 +43,7 @@ export default new Vuetify({
         accent: '#ff0335',
         'contrast-1': colors.grey.darken4,
         'contrast-light-2': colors.grey.lighten2,
+        'diff': colors.green.darken4,
       },
     },
   },

Diff for: komga-webui/src/types/komga-books.ts

@@ -33,6 +33,8 @@ export interface PageDto {
   mediaType: string,
   width?: number,
   height?: number,
+  sizeBytes?: number,
+  size: string,
 }
 
 export interface PageDtoWithUrl {
@@ -41,6 +43,8 @@ export interface PageDtoWithUrl {
   mediaType: string,
   width?: number,
   height?: number,
+  sizeBytes?: number,
+  size: string,
   url: string,
 }