From 6f35e3fa0e598321f0c32b6d86b4d0e0e2e6046f Mon Sep 17 00:00:00 2001
From: Touhidur Rahman <abir.ruet@gmail.com>
Date: Thu, 14 Mar 2024 15:26:35 +0600
Subject: [PATCH] pkp/pkp-lib#5885 removed unnecessary fields and controls with
 field range component enhancement

---
 src/components/Form/FormGroup.vue             |   2 -
 src/components/Form/fields/FieldCheckbox.vue  | 152 ------------------
 .../Form/fields/FieldRangeSlider.vue          | 108 +++++++++++--
 3 files changed, 92 insertions(+), 170 deletions(-)
 delete mode 100644 src/components/Form/fields/FieldCheckbox.vue

diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
index 6d1322255..526954375 100644
--- a/src/components/Form/FormGroup.vue
+++ b/src/components/Form/FormGroup.vue
@@ -62,7 +62,6 @@ import FieldPubId from './fields/FieldPubId.vue';
 import FieldHtml from './fields/FieldHtml.vue';
 import FieldMetadataSetting from './fields/FieldMetadataSetting.vue';
 import FieldOptions from './fields/FieldOptions.vue';
-import FieldCheckbox from './fields/FieldCheckbox.vue';
 import FieldRangeSlider from './fields/FieldRangeSlider.vue';
 import FieldPreparedContent from './fields/FieldPreparedContent.vue';
 import FieldRadioInput from './fields/FieldRadioInput.vue';
@@ -92,7 +91,6 @@ export default {
 		FieldHtml,
 		FieldMetadataSetting,
 		FieldOptions,
-		FieldCheckbox,
 		FieldRangeSlider,
 		FieldPreparedContent,
 		FieldRadioInput,
diff --git a/src/components/Form/fields/FieldCheckbox.vue b/src/components/Form/fields/FieldCheckbox.vue
deleted file mode 100644
index de0a300cb..000000000
--- a/src/components/Form/fields/FieldCheckbox.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<template>
-	<div class="pkpFormField__control">
-		<!-- Checkbon as button select/unselect switch -->
-		<div v-if="viewAsButton" class="mb-2 mt-2 flex items-center">
-			<input
-				v-model="selectedValue"
-				type="checkbox"
-				class="hidden"
-				:name="localizedName"
-				:aria-describedby="describedByIds"
-				:aria-invalid="errors && errors.length"
-			/>
-			<label
-				class="rounded-xl border-blue-300 text-blue-600 peer-checked:bg-gray-400 peer-checked:text-blue-700 peer-checked:border-blue-600 min-w-20 max-w-40 cursor-pointer select-none border-2 px-4 py-2 font-bold transition-colors duration-200 ease-in-out"
-				@click="selectedValue = !selectedValue"
-				v-html="labelText"
-			></label>
-			<div
-				v-if="isPrimaryLocale && description"
-				:id="describedByDescriptionId"
-				class="text-lg text-blue-900 dark:text-gray-900 ml-6 py-4 font-normal"
-				v-html="description"
-			></div>
-		</div>
-
-		<!-- Simple checkbox -->
-		<div v-else class="mb-2 mt-2 flex">
-			<div class="flex h-5 items-center">
-				<input
-					:id="controlId"
-					v-model="selectedValue"
-					class="text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 h-4 w-4 cursor-pointer rounded focus:ring-2"
-					type="checkbox"
-					:disabled="disable"
-					:checked="selectedValue"
-					:name="localizedName"
-					:aria-describedby="describedByIds"
-					:aria-invalid="errors && errors.length"
-				/>
-			</div>
-			<div class="text-sm ms-2 leading-snug">
-				<label
-					class="text-gray-900 dark:text-gray-300 cursor-pointer font-medium"
-					:for="controlId"
-					v-html="labelText"
-				></label>
-				<div
-					v-if="isPrimaryLocale && description"
-					:id="describedByDescriptionId"
-					class="text-xs text-gray-500 dark:text-gray-300 font-normal"
-					v-html="description"
-				></div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import FieldBase from './FieldBase.vue';
-
-export default {
-	name: 'FieldCheckbox',
-	extends: FieldBase,
-	props: {
-		/** The disable state of checkbox */
-		disable: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-
-		/** The current value for this field. */
-		value: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-
-		/** Should show the checkbox as a button. */
-		viewAsButton: {
-			type: Boolean,
-			default: false,
-		},
-
-		/** The default label */
-		label: {
-			type: String,
-			required: false,
-			default: null,
-		},
-
-		/** Label to show when the checkbox is selected */
-		checkedLabel: {
-			type: String,
-			required: false,
-			default: '',
-		},
-
-		/** Label to show when the checkbox is unselected */
-		uncheckedLabel: {
-			type: String,
-			required: false,
-			default: '',
-		},
-	},
-	data() {
-		return {
-			labelText: this.label,
-
-			/**
-			 * This replaces the computed `currentValue` property in FieldBase. We
-			 * use a custom watcher for checkboxes so that all change events are
-			 * recorded. The setter function for the computed property `currentValue`
-			 * is not called when an option is deselected. See:
-			 * https://github.com/vuejs/vuex/issues/249
-			 */
-			selectedValue: this.isMultilingual
-				? this.value[this.localeKey]
-				: this.value,
-		};
-	},
-	computed: {},
-	watch: {
-		/**
-		 * Sync the selectedValue to the value if it is changed programatically
-		 */
-		value: function () {
-			this.selectedValue = this.isMultilingual
-				? this.value[this.localeKey]
-				: this.value;
-		},
-
-		/**
-		 * When selected value changes, update the label text
-		 */
-		selectedValue: {
-			immediate: true,
-			handler: function (newVal) {
-				if (newVal && this.checkedLabel.trim().length !== 0) {
-					this.labelText = this.checkedLabel;
-				}
-
-				if (!newVal && this.uncheckedLabel.trim().length !== 0) {
-					this.labelText = this.uncheckedLabel;
-				}
-
-				this.$emit('change', this.name, 'value', newVal, this.localeKey);
-			},
-		},
-	},
-};
-</script>
diff --git a/src/components/Form/fields/FieldRangeSlider.vue b/src/components/Form/fields/FieldRangeSlider.vue
index c08a8dee7..182bc503e 100644
--- a/src/components/Form/fields/FieldRangeSlider.vue
+++ b/src/components/Form/fields/FieldRangeSlider.vue
@@ -15,18 +15,18 @@
 			></div>
 		</div>
 		<div class="flex">
-			<div class="relative w-7/12 flex-initial text-right">
+			<div class="relative w-7/12 flex-initial text-center">
 				<input
 					:id="controlId"
 					v-model="currentValue"
 					type="range"
 					class="bg-gray-200 rounded-lg dark:bg-black-700 h-2 w-full cursor-pointer appearance-none"
-					:class="sliderSize[size]"
+					:style="sliderSize[size]"
 					:name="localizedName"
 					:step="step"
 					:min="min"
 					:max="max"
-					:disabled="disable"
+					:disabled="rangeDisableState"
 				/>
 				<span
 					class="text-sm text-black-500 dark:text-black-400 absolute bottom-2 start-0 font-semibold"
@@ -58,6 +58,16 @@
 				</button>
 			</div>
 		</div>
+
+		<!-- Checkbon as button select/unselect switch -->
+		<div v-if="allowStateToggle" class="mb-2 mt-2 flex items-center">
+			<input type="checkbox" class="hidden" />
+			<label
+				class="rounded-xl border-blue-300 text-blue-600 peer-checked:bg-gray-400 peer-checked:text-blue-700 peer-checked:border-blue-600 min-w-20 max-w-40 cursor-pointer select-none border-2 px-4 py-2 font-bold transition-colors duration-200 ease-in-out"
+				@click="toogleRangeState()"
+				v-html="toggleControlLabelText"
+			></label>
+		</div>
 	</div>
 </template>
 
@@ -71,15 +81,27 @@ export default {
 		/** The disable state of range slider */
 		disable: {
 			type: Boolean,
-			required: false,
 			default: false,
 		},
 
+		/** Range slider should be disable if input field value set to NULL on render */
+		disableOnNull: {
+			type: Boolean,
+			default: true,
+		},
+
 		/** The current value for this field. */
 		value: {
 			type: Number,
 			required: false,
-			default: 0,
+			default: null,
+		},
+
+		/** Range value to set on reset when enabiling/disbaling. */
+		onResetValue: {
+			type: Number,
+			required: false,
+			default: null,
 		},
 
 		/** The min value of the slider range. */
@@ -98,7 +120,7 @@ export default {
 		step: {
 			type: Number,
 			required: false,
-			deault: 1,
+			default: 1,
 		},
 
 		/** Slider value update label on realtime */
@@ -112,7 +134,7 @@ export default {
 		size: {
 			type: String,
 			required: true,
-			default: 'small',
+			default: 'normal',
 			validator: function (value) {
 				return ['small', 'normal', 'large'].indexOf(value) !== -1;
 			},
@@ -127,20 +149,76 @@ export default {
 				return ['before', 'after'].indexOf(value) !== -1;
 			},
 		},
+
+		/** Should allow the toggle to slider state disable/enable */
+		allowStateToggle: {
+			type: Boolean,
+			default: true,
+		},
+
+		/** The disable/enable control label when disable */
+		controlLabelOnDisable: {
+			type: String,
+			required: function () {
+				return this.allowStateToggle;
+			},
+		},
+
+		/** The disable/enable control label when enable */
+		controlLabelOnEnable: {
+			type: String,
+			required: function () {
+				return this.allowStateToggle;
+			},
+		},
 	},
 	data() {
 		return {
 			sliderSize: {
-				small: 'range-sm',
-				normal: '',
-				large: 'range-lg',
+				small: {
+					'--thumb-height': '0.5em',
+					'--track-height': '0.075em',
+				},
+				normal: {
+					'--thumb-height': '0.8em',
+					'--track-height': '0.125em',
+				},
+				large: {
+					'--thumb-height': '1.2em',
+					'--track-height': '0.250em',
+				},
 			},
+
+			rangeDisableState: this.disable,
 		};
 	},
+	computed: {
+		toggleControlLabelText() {
+			return this.rangeDisableState
+				? this.controlLabelOnDisable
+				: this.controlLabelOnEnable;
+		},
+	},
+	created() {
+		if (
+			this.disableOnNull &&
+			(this.value === null || this.value === undefined)
+		) {
+			this.rangeDisableState = true;
+		}
+	},
+	methods: {
+		toogleRangeState() {
+			this.rangeDisableState = !this.rangeDisableState;
+			this.currentValue = this.rangeDisableState
+				? null
+				: this.value ?? this.onResetValue;
+		},
+	},
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 @import '../../../styles/_import';
 
 /* === range theme and appearance === */
@@ -149,10 +227,8 @@ input[type='range'] {
 }
 
 input[type='range'] {
-	color: #ef233c;
-	--thumb-height: 0.8em;
-	--track-height: 0.125em;
-	--track-color: rgba(0, 0, 0, 0.2);
+	color: rgb(0 103 152 / 1);
+	--track-color: rgb(187, 187, 187, 0.8);
 	--brightness-hover: 180%;
 	--brightness-down: 80%;
 	--clip-edges: 0.125em;
@@ -160,7 +236,7 @@ input[type='range'] {
 
 @media (prefers-color-scheme: dark) {
 	input[type='range'] {
-		color: rgb(37 99 235 / 1);
+		color: rgb(0 103 152 / 1);
 		--track-color: rgb(187, 187, 187, 0.8);
 	}
 }