Added selectable tag function for actors. Implemented experimental filtering by tag.

assets/components/actors/actor.vue

@@ -301,6 +301,7 @@
 					:fetch-releases="fetchActor"
 					:items-total="totalCount"
 					:items-per-page="limit"
+					:available-tags="actor.tags"
 				/>
 
 				<Releases :releases="releases" />

assets/components/header/filter-bar.vue

@@ -24,6 +24,7 @@
 			<Filters
 				class="filters-block"
 				:filter="filter"
+				:available-tags="availableTags"
 				@set-filter="setFilter"
 			/>
 
@@ -97,6 +98,10 @@ export default {
 			type: Number,
 			default: 10,
 		},
+		availableTags: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	computed: {
 		...mapState({

assets/components/header/filters.vue

@@ -17,12 +17,12 @@
 		<div slot="popover">
 			<ul class="tags nolist">
 				<li
-					v-for="tag in tags"
-					:key="`tag-${tag}`"
+					v-for="tag in availableTags"
+					:key="`tag-${tag.id}`"
 					class="tag"
-					:class="{ selected: selectedTags.includes(tag) }"
+					:class="{ selected: selectedTags.includes(tag.slug) }"
 				>
-					<router-link :to="{ query: { ...getNewRange(tag) } }">
+					<router-link :to="{ query: { ...getNewRange(tag.slug) } }">
 						<Icon
 							icon="checkmark"
 							class="include"
@@ -30,9 +30,9 @@
 					</router-link>
 
 					<router-link
-						:to="{ query: { ...(selectedTags.length === 1 && selectedTags.includes(tag) ? null : { tags: tag }) } }"
+						:to="{ query: { ...(selectedTags.length === 1 && selectedTags.includes(tag.slug) ? null : { tags: tag.slug }) } }"
 						class="name"
-					>{{ tag }}</router-link>
+					>{{ tag.name }}</router-link>
 				</li>
 			</ul>
 		</div>
@@ -40,19 +40,6 @@
 </template>
 
 <script>
-const tags = [
-	'airtight',
-	'anal',
-	'blowjob',
-	'double-penetration',
-	'facial',
-	'gangbang',
-	'lesbian',
-	'mff',
-	'mfm',
-	'orgy',
-];
-
 function getNewRange(tag) {
 	if (this.selectedTags.includes(tag)) {
 		if (this.selectedTags.length > 1) {
@@ -79,11 +66,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-	},
-	data() {
-		return {
-			tags,
-		};
+		availableTags: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	computed: {
 		selectedTags,
@@ -141,6 +127,7 @@ export default {
 	}
 
 	.name {
+		min-width: 8rem;
 		display: flex;
 		justify-content: space-between;
 		flex-grow: 1;

assets/js/actors/actions.js

@@ -1,3 +1,4 @@
+import config from 'config';
 import { graphql, get } from '../api';
 import {
 	releaseFields,
@@ -8,7 +9,7 @@ import {
 import { curateActor, curateRelease } from '../curate';
 import getDateRange from '../get-date-range';
 
-function initActorActions(store, _router) {
+function initActorActions(store, router) {
 	async function fetchActorById({ _commit }, {
 		actorId,
 		limit = 10,
@@ -16,6 +17,7 @@ function initActorActions(store, _router) {
 		range = 'latest',
 	}) {
 		const { before, after, orderBy } = getDateRange(range);
+		const includeTags = router.currentRoute.query.tags ? router.currentRoute.query.tags.split(',') : [];
 
 		const { actor, connection: { releases, totalCount } } = await graphql(`
             query Actor(
@@ -25,7 +27,9 @@ function initActorActions(store, _router) {
                 $after:Date = "1900-01-01",
                 $before:Date = "2100-01-01",
                 $orderBy:[ReleasesActorsOrderBy!]
-                $exclude: [String!]
+				$selectableTags: [String],
+                $excludeTags: [String!]
+                ${includeTags.length > 0 ? '$includeTags: [String!]' : ''}
             ) {
                 actor(id: $actorId) {
                     id
@@ -139,22 +143,28 @@ function initActorActions(store, _router) {
                         name
                         slug
                     }
+					tags(selectableTags: $selectableTags) {
+						id
+						name
+						slug
+						priority
+					}
                     releasesConnection: releasesActorsConnection(
                         filter: {
                             release: {
                                 date: {
                                     lessThan: $before,
                                     greaterThan: $after,
-                                },
-                                releasesTagsConnection: {
-                                    none: {
-                                        tag: {
-                                            slug: {
-                                                in: $exclude
-                                            }
-                                        }
-                                    }
                                 }
+								releasesTagsConnection: {
+									none: {
+										tag: {
+											slug: {
+												in: $excludeTags
+											}
+										}
+									}
+								}
                             }
                         }
                         first: $limit
@@ -191,10 +201,10 @@ function initActorActions(store, _router) {
 					first: $limit
 					offset: $offset
 					orderBy: $orderBy
+					condition: {
+						actorId: $actorId
+					}
 					filter: {
-						actorId: {
-							equalTo: $actorId
-						}
 						or: [
 							{
 								release: {
@@ -205,6 +215,17 @@ function initActorActions(store, _router) {
 								}
 							},
 						]
+						${includeTags.length > 0 ? `release: {
+							releasesTagsConnection: {
+								some: {
+									tag: {
+										slug: {
+											in: $includeTags
+										}
+									}
+								}
+							}
+						}` : ''}
 					}
 				) {
 					releases: nodes {
@@ -221,8 +242,10 @@ function initActorActions(store, _router) {
 			offset: Math.max(0, (pageNumber - 1)) * limit,
 			after,
 			before,
+			selectableTags: config.selectableTags,
 			orderBy: orderBy === 'DATE_DESC' ? 'RELEASE_BY_RELEASE_ID__DATE_DESC' : 'RELEASE_BY_RELEASE_ID__DATE_ASC',
-			exclude: store.state.ui.filter,
+			excludeTags: store.state.ui.filter,
+			includeTags,
 		});
 
 		return {

assets/js/config/default.js

@@ -2,9 +2,25 @@ export default {
 	api: {
 		url: `${window.location.origin}/api`,
 	},
-	filename: {
-		pattern: '{site.name} - {title} ({actors.$n.name}, {date} {shootId})',
-		separator: ', ',
-		date: 'DD-MM-YYYY',
-	},
+	selectableTags: [
+		'airtight',
+		'anal',
+		'blowjob',
+		'creampie',
+		'deepthroat',
+		'double-anal',
+		'double-penetration',
+		'double-vaginal',
+		'facefucking',
+		'facial',
+		'fisting',
+		'gaping',
+		'gangbang',
+		'lesbian',
+		'mff',
+		'mfm',
+		'orgy',
+		'pov',
+		'squirting',
+	],
 };