Skip to content

Commit

Permalink
fix(webui): lazy load collections on browse series
Browse files Browse the repository at this point in the history 
also adjusted layout for smaller screens
  • Loading branch information
@gotson
gotson committed Jun 29, 2020
1 parent 938c923 commit d89533d
Show file tree
Hide file tree
Showing 5 changed files with 140 additions and 92 deletions.
71 changes: 71 additions & 0 deletions komga-webui/src/components/CollectionsExpansionPanels.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<template>
<v-expansion-panels v-model="collectionPanel">
<v-expansion-panel v-for="(c, index) in collections"
:key="index"
>
<v-expansion-panel-header>{{ c.name }} collection</v-expansion-panel-header>
<v-expansion-panel-content>
<horizontal-scroller>
<template v-slot:prepend>
<router-link class="overline"
:to="{name: 'browse-collection', params: {collectionId: c.id}}"
>Manage collection
</router-link>
</template>
<template v-slot:content>
<item-browser :items="collectionsContent[index]"
nowrap
:selectable="false"
:action-menu="false"
:fixed-item-width="100"
/>
</template>
</horizontal-scroller>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</template>

<script lang="ts">
import HorizontalScroller from '@/components/HorizontalScroller.vue'
import ItemBrowser from '@/components/ItemBrowser.vue'
import Vue from 'vue'
export default Vue.extend({
name: 'CollectionsExpansionPanels',
components: {
HorizontalScroller,
ItemBrowser,
},
props: {
collections: {
type: Array as () => CollectionDto[],
required: true,
},
},
data: () => {
return {
collectionPanel: undefined as number | undefined,
collectionsContent: [[]] as any[],
}
},
watch: {
collections: {
handler (val) {
this.collectionPanel = undefined
this.collectionsContent = [...Array(val.length)].map(elem => new Array(0))
},
immediate: true,
},
async collectionPanel (val) {
if (val !== undefined) {
const collId = this.collections[val].id
if (this.$_.isEmpty(this.collectionsContent[val])) {
const content = (await this.$komgaCollections.getSeries(collId, { unpaged: true } as PageRequest)).content
this.collectionsContent.splice(val, 1, content)
}
}
},
},
})
</script>
35 changes: 22 additions & 13 deletions komga-webui/src/components/ItemBrowser.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,25 @@
:class="flexClass"
>
<v-item
v-for="item in localItems"
:key="item.id"
class="my-3 mx-2"
v-slot:default="{ toggle, active }" :value="item"
v-for="item in localItems"
:key="item.id"
class="my-2 mx-2"
v-slot:default="{ toggle, active }" :value="item"
>
<slot name="item">
<div style="position: relative"
:class="draggable ? 'draggable-item' : undefined"
>
<item-card
class="item-card"
:item="item"
:width="itemWidth"
:selected="active"
:no-link="draggable || deletable"
:preselect="shouldPreselect"
:onEdit="(draggable || deletable) ? undefined : editFunction"
:onSelected="(draggable || deletable) ? undefined : selectable ? toggle: undefined"
class="item-card"
:item="item"
:width="itemWidth"
:selected="active"
:no-link="draggable || deletable"
:preselect="shouldPreselect"
:onEdit="(draggable || deletable) ? undefined : editFunction"
:onSelected="(draggable || deletable) ? undefined : selectable ? toggle: undefined"
:action-menu="actionMenu"
></item-card>

<v-slide-y-reverse-transition>
Expand Down Expand Up @@ -84,6 +85,10 @@ export default Vue.extend({
type: Array,
required: true,
},
fixedItemWidth: {
type: Number,
required: false,
},
selectable: {
type: Boolean,
default: true,
Expand All @@ -110,6 +115,10 @@ export default Vue.extend({
type: Boolean,
default: false,
},
actionMenu: {
type: Boolean,
default: true,
},
},
data: () => {
return {
Expand Down Expand Up @@ -152,7 +161,7 @@ export default Vue.extend({
return this.items.length > 0
},
itemWidth (): number {
return this.width
return this.fixedItemWidth ? this.fixedItemWidth : this.width
},
shouldPreselect (): boolean {
return this.selectedItems.length > 0
Expand Down
72 changes: 11 additions & 61 deletions komga-webui/src/views/BrowseSeries.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,65 +74,21 @@
</v-col>
</v-row>

<v-row>
<v-row v-if="$vuetify.breakpoint.name !== 'xs'">
<v-col>
<v-expansion-panels v-model="collectionPanel" v-if="$vuetify.breakpoint.name !== 'xs'">
<v-expansion-panel v-for="(c, i) in collections"
:key="i"
>
<v-expansion-panel-header>{{ c.name }} collection</v-expansion-panel-header>
<v-expansion-panel-content>
<horizontal-scroller>
<template v-slot:prepend>
<router-link class="overline"
:to="{name: 'browse-collection', params: {collectionId: c.id}}"
>Manage collection
</router-link>
</template>
<template v-slot:content>
<div v-for="(s, i) in collectionsContent[c.id]"
:key="i"
>
<item-card class="ma-2 card" :item="s"/>
</div>
</template>
</horizontal-scroller>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
<collections-expansion-panels :collections="collections"/>
</v-col>
</v-row>
</v-col>
</v-row>

<v-row v-if="$vuetify.breakpoint.name === 'xs'">
<v-expansion-panels v-model="collectionPanel">
<v-expansion-panel v-for="(c, i) in collections"
:key="i"
>
<v-expansion-panel-header>{{ c.name }} collection</v-expansion-panel-header>
<v-expansion-panel-content>
<horizontal-scroller>
<template v-slot:prepend>
<router-link class="overline"
:to="{name: 'browse-collection', params: {collectionId: c.id}}"
>Manage collection
</router-link>
</template>
<template v-slot:content>
<div v-for="(s, i) in collectionsContent[c.id]"
:key="i"
>
<item-card class="ma-2 card" :item="s"/>
</div>
</template>
</horizontal-scroller>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
<v-col class="pt-0 py-1">
<collections-expansion-panels :collections="collections"/>
</v-col>
</v-row>

<v-divider class="my-4"/>
<v-divider class="my-1"/>

<empty-state
v-if="totalPages === 0"
Expand Down Expand Up @@ -164,21 +120,21 @@

<script lang="ts">
import Badge from '@/components/Badge.vue'
import BooksMultiSelectBar from '@/components/bars/BooksMultiSelectBar.vue'
import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
import CollectionsExpansionPanels from '@/components/CollectionsExpansionPanels.vue'
import EmptyState from '@/components/EmptyState.vue'
import FilterMenuButton from '@/components/FilterMenuButton.vue'
import HorizontalScroller from '@/components/HorizontalScroller.vue'
import ItemBrowser from '@/components/ItemBrowser.vue'
import ItemCard from '@/components/ItemCard.vue'
import PageSizeSelect from '@/components/PageSizeSelect.vue'
import SeriesActionsMenu from '@/components/menus/SeriesActionsMenu.vue'
import PageSizeSelect from '@/components/PageSizeSelect.vue'
import SortMenuButton from '@/components/SortMenuButton.vue'
import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
import { parseQueryFilter, parseQuerySort } from '@/functions/query-params'
import { seriesThumbnailUrl } from '@/functions/urls'
import { ReadStatus } from '@/types/enum-books'
import { BOOK_CHANGED, LIBRARY_DELETED, SERIES_CHANGED } from '@/types/events'
import Vue from 'vue'
import BooksMultiSelectBar from '@/components/bars/BooksMultiSelectBar.vue'
const cookiePageSize = 'pagesize'
Expand All @@ -192,10 +148,10 @@ export default Vue.extend({
ItemBrowser,
PageSizeSelect,
SeriesActionsMenu,
HorizontalScroller,
ItemCard,
EmptyState,
BooksMultiSelectBar,
CollectionsExpansionPanels,
},
data: () => {
return {
Expand All @@ -219,8 +175,6 @@ export default Vue.extend({
pageUnwatch: null as any,
pageSizeUnwatch: null as any,
collections: [] as CollectionDto[],
collectionsContent: [] as any[][],
collectionPanel: -1,
}
},
computed: {
Expand Down Expand Up @@ -294,7 +248,6 @@ export default Vue.extend({
this.totalElements = null
this.books = []
this.collections = []
this.collectionPanel = -1
this.loadSeries(Number(to.params.seriesId))
Expand Down Expand Up @@ -348,9 +301,6 @@ export default Vue.extend({
async loadSeries (seriesId: number) {
this.series = await this.$komgaSeries.getOneSeries(seriesId)
this.collections = await this.$komgaSeries.getCollections(seriesId)
for (const c of this.collections) {
this.collectionsContent[c.id] = (await this.$komgaCollections.getSeries(c.id, { unpaged: true } as PageRequest)).content
}
await this.loadPage(seriesId, this.page, this.sortActive)
},
parseQuerySortOrDefault (querySort: any): SortActive {
Expand Down
26 changes: 17 additions & 9 deletions komga-webui/src/views/Dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,15 @@
@edit="editMultipleBooks"
/>

<v-container fluid class="px-6">
<v-container fluid>
<empty-state v-if="allEmpty"
title="Nothing to show"
icon="mdi-help-circle"
icon-color="secondary"
>
</empty-state>

<horizontal-scroller v-if="inProgressBooks.length !== 0" class="my-4">
<horizontal-scroller v-if="inProgressBooks.length !== 0" class="mb-4">
<template v-slot:prepend>
<div class="title">Keep Reading</div>
</template>
Expand All @@ -35,11 +35,12 @@
:edit-function="singleEditBook"
:selected.sync="selectedBooks"
:selectable="selectedSeries.length === 0"
:fixed-item-width="fixedCardWidth"
/>
</template>
</horizontal-scroller>

<horizontal-scroller v-if="onDeckBooks.length !== 0" class="my-4">
<horizontal-scroller v-if="onDeckBooks.length !== 0" class="mb-4">
<template v-slot:prepend>
<div class="title">On Deck</div>
</template>
Expand All @@ -49,11 +50,12 @@
:edit-function="singleEditBook"
:selected.sync="selectedBooks"
:selectable="selectedSeries.length === 0"
:fixed-item-width="fixedCardWidth"
/>
</template>
</horizontal-scroller>

<horizontal-scroller v-if="newSeries.length !== 0" class="my-4">
<horizontal-scroller v-if="newSeries.length !== 0" class="mb-4">
<template v-slot:prepend>
<div class="title">Recently Added Series</div>
</template>
Expand All @@ -63,11 +65,12 @@
:edit-function="singleEditSeries"
:selected.sync="selectedSeries"
:selectable="selectedBooks.length === 0"
:fixed-item-width="fixedCardWidth"
/>
</template>
</horizontal-scroller>

<horizontal-scroller v-if="updatedSeries.length !== 0" class="my-4">
<horizontal-scroller v-if="updatedSeries.length !== 0" class="mb-4">
<template v-slot:prepend>
<div class="title">Recently Updated Series</div>
</template>
Expand All @@ -77,11 +80,12 @@
:edit-function="singleEditSeries"
:selected.sync="selectedSeries"
:selectable="selectedBooks.length === 0"
:fixed-item-width="fixedCardWidth"
/>
</template>
</horizontal-scroller>

<horizontal-scroller v-if="latestBooks.length !== 0" class="my-4">
<horizontal-scroller v-if="latestBooks.length !== 0" class="mb-4">
<template v-slot:prepend>
<div class="title">Recently Added Books</div>
</template>
Expand All @@ -91,6 +95,7 @@
:edit-function="singleEditBook"
:selected.sync="selectedBooks"
:selectable="selectedSeries.length === 0"
:fixed-item-width="fixedCardWidth"
/>
</template>
</horizontal-scroller>
Expand All @@ -99,14 +104,14 @@
</template>

<script lang="ts">
import BooksMultiSelectBar from '@/components/bars/BooksMultiSelectBar.vue'
import SeriesMultiSelectBar from '@/components/bars/SeriesMultiSelectBar.vue'
import EmptyState from '@/components/EmptyState.vue'
import HorizontalScroller from '@/components/HorizontalScroller.vue'
import ItemBrowser from '@/components/ItemBrowser.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'
import SeriesMultiSelectBar from '@/components/bars/SeriesMultiSelectBar.vue'
import BooksMultiSelectBar from '@/components/bars/BooksMultiSelectBar.vue'
export default Vue.extend({
name: 'Dashboard',
Expand Down Expand Up @@ -150,6 +155,9 @@ export default Vue.extend({
},
},
computed: {
fixedCardWidth (): number {
return this.$vuetify.breakpoint.name === 'xs' ? 120 : 150
},
allEmpty (): boolean {
return this.newSeries.length === 0 &&
this.updatedSeries.length === 0 &&
Expand Down

0 comments on commit d89533d

Please sign in to comment.