Skip to content

Commit

Permalink
Hide Lists title, when there is only one list (for ex. Series). (#8348)
Browse files Browse the repository at this point in the history 
* Hide Lists title, when there is only one list (for ex. Series).
* Should also work if you have all your shows in one other list.

* Fix loading spinner and only show one "Please add a show here to get started"

* Fix lint

* Remove unused import.

* Remove comments
  • Loading branch information
@p0psicles
p0psicles authored Aug 17, 2020
1 parent af946d3 commit a7236ee
Show file tree
Hide file tree
Showing 6 changed files with 163 additions and 65 deletions.
59 changes: 15 additions & 44 deletions themes-default/slim/src/components/home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,14 @@
<div id="showTabs" v-if="stateLayout.splitHomeInTabs">
<vue-tabs @tab-change="tabChange">
<v-tab
v-for="showList in showLists"
:key="showList.listTitle"
:title="showList.listTitle"
v-for="showInList in showsInLists"
:key="showInList.listTitle"
:title="showInList.listTitle"
>
<template v-if="['banner', 'simple', 'small', 'poster'].includes(layout)">
<show-list :id="`${showList.listTitle.toLowerCase()}TabContent`"
<show-list :id="`${showInList.listTitle.toLowerCase()}TabContent`"
v-bind="{
listTitle: showList.listTitle, layout, shows: showList.shows, header: showLists.length > 1
listTitle: showInList.listTitle, layout, shows: showInList.shows, header: showInList.length > 1
}"
/>
</template>
Expand All @@ -50,16 +50,20 @@
<template v-else>
<template v-if="['banner', 'simple', 'small', 'poster'].includes(layout)">
<draggable tag="ul" v-model="showList" class="list-group" handle=".move-show-list">
<li v-for="showList in showLists" :key="showList.listTitle">
<li v-for="showInList in showsInLists" :key="showInList.listTitle">
<show-list
v-bind="{
listTitle: showList.listTitle, layout, shows: showList.shows, header: showLists.length > 1
listTitle: showInList.listTitle, layout, shows: showInList.shows, header: showInList.length > 1
}"
/>
</li>
</draggable>
</template>
</template>

<!-- No Shows added -->
<span v-if="showsInLists && showsInLists.filter(list => list.shows.length > 0).length === 0">Please add a show <app-link href="addShows">here</app-link> to get started</span>

</div>
</div>
<backstretch :slug="config.randomShowSlug" />
Expand All @@ -68,6 +72,7 @@

<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import { AppLink } from './helpers';
import { ShowList } from './show-list';
import { VueTabs, VTab } from 'vue-nav-tabs/dist/vue-tabs.js';
import Draggable from 'vuedraggable';
Expand All @@ -76,6 +81,7 @@ import Backstretch from './backstretch.vue';
export default {
name: 'home',
components: {
AppLink,
Backstretch,
ShowList,
VueTabs,
Expand All @@ -102,7 +108,8 @@ export default {
stats: state => state.stats
}),
...mapGetters({
showsWithStats: 'showsWithStats'
showsWithStats: 'showsWithStats',
showsInLists: 'showsInLists'
}),
layout: {
get() {
Expand Down Expand Up @@ -139,42 +146,6 @@ export default {
setLayoutShow(mergedShowLayout);
}
},
showLists() {
const { config, filterByName, indexers, layout, stateLayout, showList, showsWithStats } = this;
const { rootDirs } = config;
const { selectedRootIndex } = stateLayout;
if (!indexers.indexers || showsWithStats.length === 0) {
return;
}
let shows = null;
// Filter root dirs
shows = showsWithStats.filter(show => selectedRootIndex === -1 || show.config.location.includes(rootDirs.slice(1)[selectedRootIndex]));
// Filter by text for the banner, simple and smallposter layouts.
// The Poster layout uses vue-isotope and this does not respond well to changes to the `list` property.
if (layout !== 'poster') {
shows = shows.filter(show => show.title.toLowerCase().includes(filterByName.toLowerCase()));
}
const categorizedShows = showList.filter(listTitle => {
return listTitle === 'series' || shows.filter(show => show.config.showLists.map(list => list.toLowerCase()).includes(listTitle.toLowerCase())).length > 0;
}).map(listTitle => ({ listTitle, shows: shows.filter(show => show.config.showLists.map(list => list.toLowerCase()).includes(listTitle.toLowerCase())) }));
// Check for shows that are not in any category anymore
const uncategorizedShows = shows.filter(show => {
return show.config.showLists.map(item => {
return showList.map(list => list.toLowerCase()).includes(item.toLowerCase());
}).every(item => !item);
});
if (uncategorizedShows.length > 0) {
categorizedShows.push({ listTitle: 'uncategorized', shows: uncategorizedShows });
}
return categorizedShows;
},
selectedRootIndexOptions() {
const { config } = this;
const { rootDirs } = config;
Expand Down
10 changes: 10 additions & 0 deletions themes-default/slim/src/components/schedule.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,4 +121,14 @@ export default {
</script>

<style>
/* Also defined in style.css and dark.css, but i'm overwriting for light and dark, because the schedule table has coloring. */
td.tvShow a {
color: rgb(0, 0, 0);
text-decoration: none;
}
td.tvShow a:hover {
cursor: pointer;
color: rgb(66, 139, 202);
}
</style>
13 changes: 6 additions & 7 deletions themes-default/slim/src/components/show-list/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<!-- Only show the list title when not in tabs -->
<div v-if="!stateLayout.splitHomeInTabs" class="showListTitle listTitle">
<div v-if="!stateLayout.splitHomeInTabs && (showsInLists && showsInLists.length > 1)" class="showListTitle listTitle">
<button type="button" class="nav-show-list move-show-list">
<span class="icon-bar" />
<span class="icon-bar" />
Expand Down Expand Up @@ -42,24 +42,20 @@
<div v-else-if="shows.length >= 1" :class="[['simple', 'small', 'banner'].includes(layout) ? 'table-layout' : '']">
<component :is="mappedLayout" v-bind="$props" />
</div>

<!-- No Shows added -->
<span v-else>Please add a show <app-link href="addShows">here</app-link> to get started</span>
</div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { mapActions, mapGetters, mapState } from 'vuex';
import Banner from './banner.vue';
import Simple from './simple.vue';
import Poster from './poster.vue';
import Smallposter from './smallposter.vue';
import { AppLink, PosterSizeSlider, StateSwitch } from '../helpers';
import { PosterSizeSlider, StateSwitch } from '../helpers';
export default {
name: 'show-list',
components: {
AppLink,
Banner,
Simple,
Poster,
Expand Down Expand Up @@ -110,6 +106,9 @@ export default {
stateLayout: state => state.config.layout,
showsLoading: state => state.shows.loading
}),
...mapGetters({
showsInLists: 'showsInLists'
}),
mappedLayout() {
const { layout } = this;
if (layout === 'small') {
Expand Down
50 changes: 50 additions & 0 deletions themes-default/slim/src/store/modules/shows.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,56 @@ const getters = {
};
return show;
});
},
showsInLists: (state, getters, rootState) => {
const { layout, general } = rootState.config;
const { show } = layout;
const { showListOrder } = show;
const { rootDirs } = general;
const { selectedRootIndex, local } = layout;
const { showFilterByName } = local;

const { showsWithStats } = getters;

let shows = null;

// Filter root dirs
shows = showsWithStats.filter(show => selectedRootIndex === -1 || show.config.location.includes(rootDirs.slice(1)[selectedRootIndex]));

// Filter by text for the banner, simple and smallposter layouts.
// The Poster layout uses vue-isotope and this does not respond well to changes to the `list` property.
if (layout.home !== 'poster') {
shows = shows.filter(show => show.title.toLowerCase().includes(showFilterByName.toLowerCase()));
}

const categorizedShows = showListOrder.filter(
listTitle => shows.filter(
show => show.config.showLists.map(
list => list.toLowerCase()
).includes(listTitle.toLowerCase())
).length > 0
).map(
listTitle => ({ listTitle, shows: shows.filter(
show => show.config.showLists.map(list => list.toLowerCase()).includes(listTitle.toLowerCase())
) })
);

// Check for shows that are not in any category anymore
const uncategorizedShows = shows.filter(show => {
return show.config.showLists.map(item => {
return showListOrder.map(list => list.toLowerCase()).includes(item.toLowerCase());
}).every(item => !item);
});

if (uncategorizedShows.length > 0) {
categorizedShows.push({ listTitle: 'uncategorized', shows: uncategorizedShows });
}

if (categorizedShows.length === 0 && uncategorizedShows.length === 0) {
categorizedShows.push({ listTitle: 'Series', shows: [] });
}

return categorizedShows;
}
};

Expand Down
Loading

0 comments on commit a7236ee

Please sign in to comment.