Showing scene and channel count on entity page and tile.

This commit is contained in:
DebaucheryLibrarian 2021-10-30 22:41:58 +02:00
parent 8322d43b09
commit b764fdec85
8 changed files with 168 additions and 112 deletions

View File

@ -51,7 +51,7 @@
>{{ tag.name }}</li>
</ul>
<router-link
<RouterLink
v-if="entity.parent"
:to="`/${entity.parent.type}/${entity.parent.slug}`"
class="link link-parent"
@ -74,7 +74,7 @@
>{{ entity.parent.name }}</h3>
<Icon icon="device_hub" />
</router-link>
</RouterLink>
</div>
<div

View File

@ -4,39 +4,48 @@
:title="entity.name"
class="tile"
>
<template v-if="entity.hasLogo">
<img
v-if="entity.type === 'network' || entity.independent"
:src="`/img/logos/${entity.slug}/thumbs/network.png`"
:alt="entity.name"
loading="lazy"
class="logo"
@load="$emit('load', $event)"
>
<div class="tile-logo">
<template v-if="entity.hasLogo">
<img
v-if="entity.type === 'network' || entity.independent"
:src="`/img/logos/${entity.slug}/thumbs/network.png`"
:alt="entity.name"
loading="lazy"
class="logo"
@load="$emit('load', $event)"
>
<img
v-else-if="entity.parent"
:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
:alt="entity.name"
loading="lazy"
class="logo"
@load="$emit('load', $event)"
>
<img
v-else-if="entity.parent"
:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
:alt="entity.name"
loading="lazy"
class="logo"
@load="$emit('load', $event)"
>
<img
<img
v-else
:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
:alt="entity.name"
loading="lazy"
class="logo"
@load="$emit('load', $event)"
>
</template>
<span
v-else
:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
:alt="entity.name"
loading="lazy"
class="logo"
@load="$emit('load', $event)"
>
</template>
class="name"
>{{ entity.name }}</span>
</div>
<span
v-else
class="name"
>{{ entity.name }}</span>
class="count"
>
<span>{{ entity.sceneTotal }} scenes</span>
<span v-if="entity.type === 'network'">{{ entity.childrenTotal }} channels</span>
</span>
</router-link>
</template>
@ -59,15 +68,27 @@ export default {
height: 100%;
background: var(--tile);
display: flex;
flex-direction: column;
flex-shrink: 0;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: .5rem 1rem;
border-radius: .25rem;
position: relative;
box-shadow: 0 0 3px rgba(0, 0, 0, .25);
text-align: center;
text-decoration: none;
&:hover .count {
color: var(--lighten);
}
}
.tile-logo {
display: flex;
flex-grow: 1;
padding: .5rem 1rem;
overflow: hidden;
}
.logo {
@ -75,6 +96,7 @@ export default {
max-height: 100%;
display: flex;
align-items: center;
align-self: center;
}
.name {
@ -82,4 +104,16 @@ export default {
font-size: 1.25rem;
font-weight: bold;
}
.count {
display: flex;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
padding: .25rem .5rem;
border-top: solid 1px var(--lighten-hint);
color: var(--lighten-weak);
text-align: center;
font-size: .8rem;
}
</style>

View File

@ -1,15 +1,20 @@
<template>
<div class="filter-bar noselect">
<div class="sort">
<router-link
<RouterLink
v-for="section in ranges"
:key="section"
:to="{ params: { range: section, pageNumber: 1 }, query: $route.query }"
:class="{ active: $route.name === section || range === section }"
class="range range-button"
>{{ section }}</router-link>
>{{ section }}</RouterLink>
</div>
<span
v-if="itemsTotal && showTotal"
class="total"
>{{ itemsTotal }} <template v-if="itemsTotal === 1">scene</template><template v-else>scenes</template></span>
<div class="filters">
<ActorFilter
class="filters-filter"
@ -78,6 +83,10 @@ export default {
type: Boolean,
default: false,
},
showTotal: {
type: Boolean,
default: true,
},
itemsTotal: {
type: Number,
default: 0,
@ -240,6 +249,10 @@ export default {
.filters-filter:last-child .filter {
padding: .5rem 0 .5rem .5rem;
}
.total {
display: none;
}
}
</style>
@ -351,4 +364,11 @@ export default {
margin: 0 1rem 0 0;
}
}
.total {
flex-shrink: 0;
padding: 0 1rem;
color: var(--shadow);
font-size: .8rem;
}
</style>

View File

@ -8,6 +8,7 @@
:items-total="totalCount"
:items-per-page="limit"
:content="$refs.content"
:show-total="false"
/>
<Releases

View File

@ -113,21 +113,22 @@
:key="actor.id"
class="actor"
>
<router-link
<RouterLink
:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
:class="{ [actor.gender]: !!actor.gender }"
class="actor-link"
>{{ actor.name }}</router-link>
>{{ actor.name }}</RouterLink>
</li>
</ul>
</span>
<div class="labels">
<router-link
<RouterLink
v-if="release.shootId && release.studio"
:to="`/studio/${release.studio.slug}`"
:title="release.studio && release.studio.name"
class="shoot nolink"
>{{ release.shootId }}</router-link>
>{{ release.shootId }}</RouterLink>
<span
v-else-if="release.shootId"
@ -145,10 +146,10 @@
:key="`tag-${tag.slug}`"
class="tag"
>
<router-link
<RouterLink
:to="`/tag/${tag.slug}`"
class="tag-link"
>{{ tag.name }}</router-link>
>{{ tag.name }}</RouterLink>
</li>
</ul>
</div>

View File

@ -117,6 +117,10 @@ function curateEntity(entity, parent, releases) {
if (entity.parent || parent) curatedEntity.parent = curateEntity(entity.parent || parent);
if (releases) curatedEntity.releases = releases.map(release => curateRelease(release));
if (entity.connection) {
curatedEntity.sceneTotal = entity.connection.totalCount;
}
return curatedEntity;
}

View File

@ -14,7 +14,7 @@ function initEntitiesActions(store, router) {
}) {
const { before, after, orderBy } = getDateRange(range);
const { entity, connection: { releases, totalCount } } = await graphql(`
const { entity } = await graphql(`
query Entity(
$entitySlug: String!
$entityType: String! = "channel"
@ -64,6 +64,12 @@ function initEntitiesActions(store, router) {
independent
hasLogo
${campaignsFragment}
children: childEntitiesConnection {
totalCount
}
connection: scenesConnection {
totalCount
}
}
}
${campaignsFragment}
@ -77,82 +83,45 @@ function initEntitiesActions(store, router) {
hasLogo
${campaignsFragment}
}
}
connection: releasesConnection(
first: $limit
offset: $offset
orderBy: $orderBy
filter: {
and: [
{
entity: {
or: [
{
slug: { equalTo: $entitySlug }
},
{
parent: {
slug: { equalTo: $entitySlug }
type: { equalTo: $entityType }
}
},
{
parent: {
parent: {
slug: { equalTo: $entitySlug }
type: { equalTo: $entityType }
}
}
}
{
parent: {
parent: {
parent: {
slug: { equalTo: $entitySlug }
type: { equalTo: $entityType }
}
},
},
},
]
}
}
{
or: [
{
date: {
lessThan: $before,
greaterThan: $after
}
},
{
date: {
isNull: true
},
createdAt: {
lessThan: $beforeTime,
greaterThan: $afterTime,
}
connection: scenesConnection(
first: $limit
offset: $offset
orderBy: $orderBy
filter: {
or: [
{
date: {
lessThan: $before,
greaterThan: $after
}
]
}
]
releasesTagsConnection: {
none: {
tag: {
slug: {
in: $exclude
},
{
date: {
isNull: true
},
createdAt: {
lessThan: $beforeTime,
greaterThan: $afterTime,
}
}
]
releasesTagsConnection: {
none: {
tag: {
slug: {
in: $exclude
}
}
}
}
}
) {
releases: nodes {
${releaseFields}
}
totalCount
}
) {
releases: nodes {
${releaseFields}
}
totalCount
}
}
}
`, {
entitySlug,
@ -175,8 +144,8 @@ function initEntitiesActions(store, router) {
}
return {
entity: curateEntity(entity, null, releases),
totalCount,
entity: curateEntity(entity, null, entity.connection.releases),
totalCount: entity.connection.totalCount,
};
}
@ -233,6 +202,9 @@ function initEntitiesActions(store, router) {
children: childEntitiesConnection {
totalCount
}
connection: scenesConnection {
totalCount
}
}
}
`, {

View File

@ -0,0 +1,24 @@
exports.up = async knex => knex.raw(`
CREATE FUNCTION entities_scenes(entity entities) RETURNS SETOF releases AS $$
WITH RECURSIVE children AS (
SELECT entities.id
FROM entities
WHERE entities.id = entity.id
UNION ALL
SELECT entities.id
FROM entities
INNER JOIN children ON children.id = entities.parent_id
)
SELECT releases FROM releases
INNER JOIN children ON children.id = releases.entity_id;
$$ LANGUAGE SQL STABLE;
COMMENT ON FUNCTION entities_scenes IS E'@sortable';
`);
exports.down = async knex => knex.raw(`
DROP FUNCTION IF EXISTS entities_scenes;
`);