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

This commit is contained in:
Gauthier Roebroeck 2022-01-06 16:15:08 +08:00
parent 432ed4e14c
commit 6f26c2c926
5 changed files with 24 additions and 13 deletions

View file

@ -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>

View file

@ -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>

View file

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

View file

@ -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,
},
},
},

View file

@ -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,
}