From 4a963885bc861e031527a8fd9186d3efee7b0063 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <moonloop.adult@protonmail.com>
Date: Wed, 3 Mar 2021 22:23:46 +0100
Subject: [PATCH] Using range component for all actor range filters.

---
 assets/components/actors/actors.vue       | 191 +++++++---------------
 assets/components/actors/filter-range.vue |  10 +-
 assets/components/form/range.vue          |   2 +-
 assets/js/actors/actions.js               |   5 +-
 4 files changed, 68 insertions(+), 140 deletions(-)

diff --git a/assets/components/actors/actors.vue b/assets/components/actors/actors.vue
index a53c588e..4dd8c2ae 100644
--- a/assets/components/actors/actors.vue
+++ b/assets/components/actors/actors.vue
@@ -65,7 +65,7 @@
 						<span
 							class="filter-trigger"
 							:class="{ enabled: ageRequired }"
-						><Icon icon="cake" />Age</span>
+						><Icon icon="vcard" />Age</span>
 
 						<template v-slot:tooltip>
 							<RangeFilter
@@ -74,7 +74,6 @@
 								:max="100"
 								:value="age"
 								:disabled="!ageRequired"
-								:allow-enable="true"
 								@enable="(checked) => updateValue('ageRequired', checked, true)"
 								@input="(range) => updateValue('age', range, false)"
 								@change="(range) => updateValue('age', range, true)"
@@ -87,51 +86,27 @@
 				</li>
 
 				<li>
-					<Tooltip class="filter boobs">
+					<Tooltip class="filter">
 						<span
-							class="filter-trigger"
+							class="filter-trigger boobs"
 							:class="{ enabled: boobSizeRequired || naturalBoobs !== 1 }"
 						><Icon icon="boobs" />Boobs</span>
 
 						<template v-slot:tooltip>
-							<div class="filter-section boobsize">
-								<label class="filter-label off noselect">
-									<span class="label">
-										<Checkbox
-											:checked="boobSizeRequired"
-											class="checkbox"
-											@change="(checked) => updateValue('boobSizeRequired', checked)"
-										/>Size
-									</span>
-
-									<span
-										v-if="boobSizeRequired"
-										class="label-values"
-									>({{ boobSize[0] }} - {{ boobSize[1] }})</span>
-								</label>
-
-								<span class="filter-split">
-									<Range
-										:min="0"
-										:max="boobSizes.length - 1"
-										:value="boobSize"
-										:values="boobSizes"
-										:disabled="!boobSizeRequired"
-										:allow-enable="true"
-										@enable="boobSizeRequired = true"
-										@input="(sizeRange) => updateValue('boobSize', sizeRange, false)"
-										@change="(sizeRange) => updateValue('boobSize', sizeRange, true)"
-									>
-										<template v-slot:start>
-											<span class="range-label"><Icon icon="boobs-small" /></span>
-										</template>
-
-										<template v-slot:end>
-											<span class="range-label on"><Icon icon="boobs-big" /></span>
-										</template>
-									</Range>
-								</span>
-							</div>
+							<RangeFilter
+								label="size"
+								:min="0"
+								:max="boobSizes.length - 1"
+								:value="boobSize"
+								:values="boobSizes"
+								:disabled="!boobSizeRequired"
+								@enable="(checked) => updateValue('boobSizeRequired', checked, true)"
+								@input="(range) => updateValue('boobSize', range, false)"
+								@change="(range) => updateValue('boobSize', range, true)"
+							>
+								<template v-slot:start><Icon icon="boobs-small" /></template>
+								<template v-slot:end><Icon icon="boobs-big" /></template>
+							</RangeFilter>
 
 							<div class="filter-section">
 								<span class="filter-label">Enhanced</span>
@@ -172,71 +147,35 @@
 						><Icon icon="rulers" />Physique</span>
 
 						<template v-slot:tooltip>
-							<div class="filter-section">
-								<label class="filter-label noselect">
-									<span class="label">
-										<Checkbox
-											:checked="heightRequired"
-											class="checkbox"
-											@change="(checked) => updateValue('heightRequired', checked)"
-										/>Height
-									</span>
+							<RangeFilter
+								label="height"
+								:min="50"
+								:max="220"
+								:value="height"
+								:disabled="!heightRequired"
+								unit="cm"
+								@enable="(checked) => updateValue('heightRequired', checked, true)"
+								@input="(range) => updateValue('height', range, false)"
+								@change="(range) => updateValue('height', range, true)"
+							>
+								<template v-slot:start><Icon icon="height-short" /></template>
+								<template v-slot:end><Icon icon="height" /></template>
+							</RangeFilter>
 
-									<span
-										v-if="heightRequired"
-										class="label-values"
-									>({{ height[0] }} - {{ height[1] }} cm)</span>
-								</label>
-
-								<span class="filter-split">
-									<Range
-										:min="50"
-										:max="220"
-										:value="height"
-										:disabled="!heightRequired"
-										:allow-enable="true"
-										@enable="heightRequired = true"
-										@input="(heightRange) => updateValue('height', heightRange, false)"
-										@change="(heightRange) => updateValue('height', heightRange, true)"
-									>
-										<template v-slot:start><Icon icon="height-short" /></template>
-										<template v-slot:end><Icon icon="height" /></template>
-									</Range>
-								</span>
-							</div>
-
-							<div class="filter-section">
-								<label class="filter-label noselect">
-									<span class="label">
-										<Checkbox
-											:checked="weightRequired"
-											class="checkbox"
-											@change="(checked) => updateValue('weightRequired', checked)"
-										/>Weight
-									</span>
-
-									<span
-										v-if="weightRequired"
-										class="label-values"
-									>({{ weight[0] }} - {{ weight[1] }} kg)</span>
-								</label>
-
-								<span class="filter-split">
-									<Range
-										:min="30"
-										:max="200"
-										:value="weight"
-										:disabled="!weightRequired"
-										:allow-enable="true"
-										@enable="weightRequired = true"
-										@input="(weightRange) => updateValue('weight', weightRange, false)"
-										@change="(weightRange) => updateValue('weight', weightRange, true)"
-									>
-										<template v-slot:start><Icon icon="meter-slow" /></template>
-										<template v-slot:end><Icon icon="meter-fast" /></template>
-									</Range>
-								</span>
-							</div>
+							<RangeFilter
+								label="weight"
+								:min="30"
+								:max="200"
+								:value="weight"
+								:disabled="!weightRequired"
+								unit="kg"
+								@enable="(checked) => updateValue('weightRequired', checked, true)"
+								@input="(range) => updateValue('weight', range, false)"
+								@change="(range) => updateValue('weight', range, true)"
+							>
+								<template v-slot:start><Icon icon="meter-slow" /></template>
+								<template v-slot:end><Icon icon="meter-fast" /></template>
+							</RangeFilter>
 						</template>
 					</Tooltip>
 				</li>
@@ -265,8 +204,6 @@
 <script>
 import Actor from './tile.vue';
 import Gender from './gender.vue';
-import Checkbox from '../form/checkbox.vue';
-import Range from '../form/range.vue';
 import RangeFilter from './filter-range.vue';
 import Pagination from '../pagination/pagination.vue';
 
@@ -343,9 +280,7 @@ async function mounted() {
 export default {
 	components: {
 		Actor,
-		Checkbox,
 		Gender,
-		Range,
 		RangeFilter,
 		Pagination,
 	},
@@ -447,6 +382,7 @@ export default {
     border-right: solid 1px var(--shadow-hint);
     margin: 0 1rem 0 0;
 }
+
 .letter,
 .gender {
     display: inline-block;
@@ -504,9 +440,9 @@ export default {
 
 	.icon {
 		fill: var(--shadow);
-		width: 1.5rem;
-		height: 1.5rem;
-		margin: 0 .5rem 0 0;
+		width: 1rem;
+		height: 1rem;
+		margin: -.1rem .75rem 0 0;
 	}
 
 	&:hover {
@@ -527,10 +463,13 @@ export default {
 	}
 }
 
-.filter-section {
-	width: 15rem;
-	max-width: 100%;
-	border-bottom: solid 1px var(--darken-hint);
+.label-values {
+	font-weight: normal;
+}
+
+.filter-split {
+	display: flex;
+	align-items: center;
 }
 
 .filter-label {
@@ -544,24 +483,8 @@ export default {
 	.label {
 		display: inline-flex;
 		align-items: center;
+		text-transform: capitalize;
 	}
-
-	.checkbox {
-		margin: 0 .75rem 0 0;
-	}
-
-	.icon {
-		margin: 0 .5rem 0 0;
-	}
-}
-
-.label-values {
-	font-weight: normal;
-}
-
-.filter-split {
-	display: flex;
-	align-items: center;
 }
 
 .toggle-container,
diff --git a/assets/components/actors/filter-range.vue b/assets/components/actors/filter-range.vue
index 2fdf2efc..fcbcb797 100644
--- a/assets/components/actors/filter-range.vue
+++ b/assets/components/actors/filter-range.vue
@@ -10,8 +10,9 @@
 			</span>
 
 			<span
+				v-if="!disabled"
 				class="label-values"
-			>({{ value[0] }} - {{ value[1] }} {{ unit }})</span>
+			>({{ value[0] }} - {{ value[1] }}<template v-if="unit">&nbsp;{{ unit }}</template>)</span>
 		</label>
 
 		<span class="filter-split">
@@ -19,8 +20,9 @@
 				:min="min"
 				:max="max"
 				:value="value"
+				:values="values"
 				:disabled="disabled"
-				:allow-enable="true"
+				:allow-enable="allowEnable"
 				@enable="$emit('enable', true)"
 				@input="(range) => $emit('input', range)"
 				@change="(range) => $emit('change', range)"
@@ -50,6 +52,10 @@ export default {
 			type: Array,
 			default: () => [0, 10],
 		},
+		values: {
+			type: Array,
+			default: null,
+		},
 		min: {
 			type: Number,
 			default: 0,
diff --git a/assets/components/form/range.vue b/assets/components/form/range.vue
index dc8520f2..8a8b7353 100644
--- a/assets/components/form/range.vue
+++ b/assets/components/form/range.vue
@@ -132,7 +132,7 @@ export default {
 		},
 		allowEnable: {
 			type: Boolean,
-			default: false,
+			default: true,
 		},
 	},
 	emits: ['change', 'input', 'enable'],
diff --git a/assets/js/actors/actions.js b/assets/js/actors/actions.js
index 656f2548..47313b82 100644
--- a/assets/js/actors/actions.js
+++ b/assets/js/actors/actions.js
@@ -1,8 +1,9 @@
 import config from 'config';
+import dayjs from 'dayjs';
+
 import { graphql, get } from '../api';
 import { releaseFields, getIncludedEntities, getIncludedActors } from '../fragments';
 import { curateActor, curateRelease } from '../curate';
-import dayjs from 'dayjs';
 import getDateRange from '../get-date-range';
 
 function initActorActions(store, router) {
@@ -300,8 +301,6 @@ function initActorActions(store, router) {
 		const weightFilter = weight ? `weight: { greaterThanOrEqualTo: ${weight[0]}, lessThanOrEqualTo: ${weight[1]} }` : '';
 		const cupFilter = boobSize ? `cup: { greaterThanOrEqualTo: "${boobSize[0]}", lessThanOrEqualTo: "${boobSize[1]}" }` : '';
 
-		console.log(ageFilter);
-
 		const { connection: { actors, totalCount } } = await graphql(`
             query Actors(
                 $limit: Int,