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

View File

@ -4,6 +4,7 @@
:title="entity.name" :title="entity.name"
class="tile" class="tile"
> >
<div class="tile-logo">
<template v-if="entity.hasLogo"> <template v-if="entity.hasLogo">
<img <img
v-if="entity.type === 'network' || entity.independent" v-if="entity.type === 'network' || entity.independent"
@ -37,6 +38,14 @@
v-else v-else
class="name" class="name"
>{{ entity.name }}</span> >{{ entity.name }}</span>
</div>
<span
class="count"
>
<span>{{ entity.sceneTotal }} scenes</span>
<span v-if="entity.type === 'network'">{{ entity.childrenTotal }} channels</span>
</span>
</router-link> </router-link>
</template> </template>
@ -59,15 +68,27 @@ export default {
height: 100%; height: 100%;
background: var(--tile); background: var(--tile);
display: flex; display: flex;
flex-direction: column;
flex-shrink: 0; flex-shrink: 0;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding: .5rem 1rem;
border-radius: .25rem; border-radius: .25rem;
position: relative;
box-shadow: 0 0 3px rgba(0, 0, 0, .25); box-shadow: 0 0 3px rgba(0, 0, 0, .25);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
&:hover .count {
color: var(--lighten);
}
}
.tile-logo {
display: flex;
flex-grow: 1;
padding: .5rem 1rem;
overflow: hidden;
} }
.logo { .logo {
@ -75,6 +96,7 @@ export default {
max-height: 100%; max-height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
align-self: center;
} }
.name { .name {
@ -82,4 +104,16 @@ export default {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: bold; 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> </style>

View File

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

View File

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

View File

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

View File

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

View File

@ -14,7 +14,7 @@ function initEntitiesActions(store, router) {
}) { }) {
const { before, after, orderBy } = getDateRange(range); const { before, after, orderBy } = getDateRange(range);
const { entity, connection: { releases, totalCount } } = await graphql(` const { entity } = await graphql(`
query Entity( query Entity(
$entitySlug: String! $entitySlug: String!
$entityType: String! = "channel" $entityType: String! = "channel"
@ -64,6 +64,12 @@ function initEntitiesActions(store, router) {
independent independent
hasLogo hasLogo
${campaignsFragment} ${campaignsFragment}
children: childEntitiesConnection {
totalCount
}
connection: scenesConnection {
totalCount
}
} }
} }
${campaignsFragment} ${campaignsFragment}
@ -77,47 +83,11 @@ function initEntitiesActions(store, router) {
hasLogo hasLogo
${campaignsFragment} ${campaignsFragment}
} }
} connection: scenesConnection(
connection: releasesConnection(
first: $limit first: $limit
offset: $offset offset: $offset
orderBy: $orderBy orderBy: $orderBy
filter: { 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: [ or: [
{ {
date: { date: {
@ -135,8 +105,6 @@ function initEntitiesActions(store, router) {
} }
} }
] ]
}
]
releasesTagsConnection: { releasesTagsConnection: {
none: { none: {
tag: { tag: {
@ -154,6 +122,7 @@ function initEntitiesActions(store, router) {
totalCount totalCount
} }
} }
}
`, { `, {
entitySlug, entitySlug,
entityType, entityType,
@ -175,8 +144,8 @@ function initEntitiesActions(store, router) {
} }
return { return {
entity: curateEntity(entity, null, releases), entity: curateEntity(entity, null, entity.connection.releases),
totalCount, totalCount: entity.connection.totalCount,
}; };
} }
@ -233,6 +202,9 @@ function initEntitiesActions(store, router) {
children: childEntitiesConnection { children: childEntitiesConnection {
totalCount 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;
`);