Enabled network filters for actors. Separated filter definition for entities.

assets/components/actors/actor.vue

@@ -407,7 +407,7 @@ export default {
     align-items: center;
     color: var(--lighten-extreme);
     background: var(--profile);
-    padding: .75rem 1rem;
+    padding: .5rem 1rem;
 }
 
 .header-name {
@@ -716,10 +716,6 @@ export default {
         margin: 1rem 0 0 0;
     }
 
-	.actor-header {
-		padding: .5rem 1rem;
-	}
-
     .header-name {
         flex-grow: 1;
 		font-size: 1.3rem;

assets/components/filters/channel-filter.vue

@@ -17,7 +17,7 @@
 		<div slot="popover">
 			<router-link
 				class="filter-clear"
-				:to="{ query: { ...$route.query, channels: undefined } }"
+				:to="{ query: { ...$route.query, channels: undefined, networks: undefined } }"
 				:class="{ active: selectedChannels.length > 0 }"
 			>clear all<Icon icon="cross2" /></router-link>
 
@@ -29,7 +29,8 @@
 					:class="{
 						[channel.type]: true,
 						independent: channel.independent,
-						selected: selectedChannels.includes(channel.slug),
+						selected: channel.type === 'network' ? selectedNetworks.includes(channel.slug) : selectedChannels.includes(channel.slug),
+						disabled: channel.parent && selectedNetworks.includes(channel.parent.slug),
 					}"
 				>
 					<router-link
@@ -37,7 +38,6 @@
 							...$route.query,
 							[channel.type === 'network' ? 'networks' : 'channels']: channel.slug,
 							[channel.type === 'network' ? 'channels' : 'networks']: undefined,
-							mode,
 						}, params: { pageNumber: 1 } }"
 						class="filter-name"
 					>
@@ -51,7 +51,7 @@
 					</router-link>
 
 					<router-link
-						:to="{ query: { ...$route.query, ...getNewRange(channel), mode }, params: { pageNumber: 1 } }"
+						:to="{ query: { ...$route.query, ...getNewRange(channel) }, params: { pageNumber: 1 } }"
 						class="filter-include"
 					>
 						<Icon
@@ -71,19 +71,31 @@
 </template>
 
 <script>
-function getNewRange(channel) {
+function getNewRange(entity) {
-	console.log(channel);
+	if (entity.type === 'network' && this.selectedNetworks.includes(entity.slug)) {
-
-	if (this.selectedChannels.includes(channel.slug)) {
 		return {
-			channels: this.selectedChannels.filter(selectedTag => selectedTag !== channel.slug).join(',') || undefined,
+			channels: this.selectedChannels.join(',') || undefined,
-			networks: undefined,
+			networks: this.selectedNetworks.filter(selectedTag => selectedTag !== entity.slug).join(',') || undefined,
+		};
+	}
+
+	if (entity.type === 'network') {
+		return {
+			channels: this.selectedChannels.join(',') || undefined,
+			networks: this.selectedNetworks.concat(entity.slug).join(','),
+		};
+	}
+
+	if (this.selectedChannels.includes(entity.slug)) {
+		return {
+			channels: this.selectedChannels.filter(selectedTag => selectedTag !== entity.slug).join(',') || undefined,
+			networks: this.selectedNetworks.join(',') || undefined,
 		};
 	}
 
 	return {
-		channels: this.selectedChannels.concat(channel.slug).join(','),
+		channels: this.selectedChannels.concat(entity.slug).join(','),
-		networks: undefined,
+		networks: this.selectedNetworks.join(',') || undefined,
 	};
 }
 
@@ -91,6 +103,10 @@ function selectedChannels() {
 	return this.$route.query.channels ? this.$route.query.channels.split(',') : [];
 }
 
+function selectedNetworks() {
+	return this.$route.query.networks ? this.$route.query.networks.split(',') : [];
+}
+
 function channelsPerNetwork() {
 	const networks = this.availableChannels.reduce((acc, channel) => {
 		if (channel.independent || !channel.parent) {
@@ -125,14 +141,10 @@ export default {
 			default: () => [],
 		},
 	},
-	data() {
-		return {
-			mode: this.$route.query.mode || 'all',
-		};
-	},
 	computed: {
 		channelsPerNetwork,
 		selectedChannels,
+		selectedNetworks,
 	},
 	methods: {
 		getNewRange,

assets/components/filters/filter-bar.vue

@@ -202,8 +202,22 @@ export default {
 		cursor: pointer;
 	}
 
-	&.selected .filter-include .filter-add {
+	&.selected {
-		fill: var(--success);
+		.filter-include  {
+			.filter-add {
+				fill: var(--success);
+			}
+
+			&:hover {
+				.filter-add {
+					display: none;
+				}
+
+				.filter-remove {
+					display: inline-block;
+				}
+			}
+		}
 	}
 }
 
@@ -222,14 +236,6 @@ export default {
 
 	&:hover {
 		cursor: pointer;
-
-		&.selected .filter-add {
-			display: none;
-		}
-
-		&.selected .filter-remove {
-			display: inline-block;
-		}
 	}
 }
 

assets/components/filters/tag-filter.vue

@@ -45,7 +45,6 @@
 					<router-link
 						:to="{ query: { ...$route.query, ...getNewRange(tag.slug), mode }, params: { pageNumber: 1 } }"
 						class="filter-include"
-						:class="{ selected: selectedTags.includes(tag.slug) }"
 					>
 						<Icon
 							icon="checkmark"

assets/js/actors/actions.js

@@ -1,6 +1,6 @@
 import config from 'config';
 import { graphql, get } from '../api';
-import { releaseFields } from '../fragments';
+import { releaseFields, getIncludedEntities } from '../fragments';
 import { curateActor, curateRelease } from '../curate';
 import getDateRange from '../get-date-range';
 
@@ -12,8 +12,7 @@ function initActorActions(store, router) {
 		range = 'latest',
 	}) {
 		const { before, after, orderBy } = getDateRange(range);
-		const includeChannels = router.currentRoute.query.channels ? router.currentRoute.query.channels.split(',') : [];
+		const includedTags = router.currentRoute.query.tags ? router.currentRoute.query.tags.split(',') : [];
-		const includeTags = router.currentRoute.query.tags ? router.currentRoute.query.tags.split(',') : [];
 		const mode = router.currentRoute.query.mode || 'all';
 
 		const { actor } = await graphql(`
@@ -25,9 +24,9 @@ function initActorActions(store, router) {
                 $before:Datetime = "2100-01-01",
                 $orderBy:[ReleasesOrderBy!]
 				$selectableTags: [String],
-				$includeTags: [String!],
+				$includedTags: [String!],
 				$mode: String!,
-				${includeChannels.length > 0 ? '$includeChannels: [String!]' : ''}
+				$includedEntities: [ReleaseFilter!]
             ) {
                 actor(id: $actorId) {
                     id
@@ -167,14 +166,9 @@ function initActorActions(store, router) {
 								lessThan: $before,
 								greaterThan: $after,
 							}
-							${includeChannels.length > 0 ? `
+							or: $includedEntities
-							entity: {
-								slug: {
-									in: $includeChannels
-								}
-							}` : ''}
                         }
-						selectedTags: $includeTags
+						selectedTags: $includedTags
 						mode: $mode
                         first: $limit
 						offset: $offset
@@ -196,8 +190,8 @@ function initActorActions(store, router) {
 			selectableTags: config.selectableTags,
 			orderBy,
 			excludeTags: store.state.ui.filter,
-			includeTags,
+			includedTags,
-			includeChannels,
+			includedEntities: getIncludedEntities(router),
 			mode,
 		});
 

assets/js/fragments.js

@@ -319,6 +319,48 @@ const releaseFragment = `
   }
 `;
 
+function getIncludedEntities(router) {
+	const includedChannels = router.currentRoute.query.channels ? router.currentRoute.query.channels.split(',') : [];
+	const includedNetworks = router.currentRoute.query.networks ? router.currentRoute.query.networks.split(',') : [];
+
+	if (includedChannels.length === 0 && includedNetworks.length === 0) {
+		return [];
+	}
+
+	return [
+		{
+			entity: {
+				slug: {
+					in: includedChannels,
+				},
+			},
+		},
+		{
+			entity: {
+				parent: {
+					type: {
+						equalTo: 'network',
+					},
+					slug: {
+						in: includedNetworks,
+					},
+				},
+			},
+		},
+		{
+			entity: {
+				type: {
+					equalTo: 'network',
+				},
+				slug: {
+					in: includedNetworks,
+				},
+			},
+		},
+	];
+}
+
+
 export {
 	releaseActorsFragment,
 	releaseFields,
@@ -330,4 +372,5 @@ export {
 	releaseFragment,
 	siteFragment,
 	sitesFragment,
+	getIncludedEntities,
 };