From 508e6167ae5644ae993757365d878aa81793bd33 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Fri, 27 Dec 2024 21:57:21 +0100
Subject: [PATCH] FtRadioButton and FtCheckboxList v-model and composition API

---
 .../FtCheckboxList.css}                       |   0
 .../FtCheckboxList/FtCheckboxList.vue         |  87 +++++++++
 .../FtRadioButton.css}                        |   0
 .../FtRadioButton/FtRadioButton.vue           |  75 ++++++++
 .../FtSearchFilters/FtSearchFilters.vue       | 174 +++++++-----------
 .../ft-checkbox-list/ft-checkbox-list.js      |  61 ------
 .../ft-checkbox-list/ft-checkbox-list.vue     |  32 ----
 .../ft-radio-button/ft-radio-button.js        |  52 ------
 .../ft-radio-button/ft-radio-button.vue       |  33 ----
 src/renderer/composables/use-id-polyfill.js   |  10 +
 10 files changed, 242 insertions(+), 282 deletions(-)
 rename src/renderer/components/{ft-checkbox-list/ft-checkbox-list.css => FtCheckboxList/FtCheckboxList.css} (100%)
 create mode 100644 src/renderer/components/FtCheckboxList/FtCheckboxList.vue
 rename src/renderer/components/{ft-radio-button/ft-radio-button.css => FtRadioButton/FtRadioButton.css} (100%)
 create mode 100644 src/renderer/components/FtRadioButton/FtRadioButton.vue
 delete mode 100644 src/renderer/components/ft-checkbox-list/ft-checkbox-list.js
 delete mode 100644 src/renderer/components/ft-checkbox-list/ft-checkbox-list.vue
 delete mode 100644 src/renderer/components/ft-radio-button/ft-radio-button.js
 delete mode 100644 src/renderer/components/ft-radio-button/ft-radio-button.vue
 create mode 100644 src/renderer/composables/use-id-polyfill.js

diff --git a/src/renderer/components/ft-checkbox-list/ft-checkbox-list.css b/src/renderer/components/FtCheckboxList/FtCheckboxList.css
similarity index 100%
rename from src/renderer/components/ft-checkbox-list/ft-checkbox-list.css
rename to src/renderer/components/FtCheckboxList/FtCheckboxList.css
diff --git a/src/renderer/components/FtCheckboxList/FtCheckboxList.vue b/src/renderer/components/FtCheckboxList/FtCheckboxList.vue
new file mode 100644
index 0000000000000..86947f2b9d930
--- /dev/null
+++ b/src/renderer/components/FtCheckboxList/FtCheckboxList.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="pure-checkbox filter">
+    <h3 class="checkboxTitle">
+      {{ title }}
+    </h3>
+    <template
+      v-for="(label, index) in labels"
+    >
+      <input
+        :id="id + values[index]"
+        :key="index"
+        v-model="modelValue"
+        :name="id"
+        :value="values[index]"
+        :disabled="disabled"
+        class="checkbox"
+        type="checkbox"
+      >
+      <label
+        :key="label"
+        :for="id + values[index]"
+      >
+        {{ label }}
+      </label>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { useId } from '../../composables/use-id-polyfill'
+
+const id = useId()
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  labels: {
+    type: Array,
+    required: true
+  },
+  values: {
+    type: Array,
+    required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+
+  // Required for v-model in the parent component (https://v2.vuejs.org/v2/guide/components#Using-v-model-on-Components)
+  // Do not rename or remove
+  // TODO: Replace with defineModel in Vue 3
+  value: {
+    type: Array,
+    required: true
+  }
+})
+
+// Required for v-model in the parent component (https://v2.vuejs.org/v2/guide/components#Using-v-model-on-Components)
+// Do not rename or remove
+// TODO: Replace with defineModel in Vue 3
+const emit = defineEmits(['input'])
+
+/** @type {import('vue').Ref<string[]>} */
+const modelValue = ref(props.value)
+
+watch(
+  modelValue,
+  (newValue) => {
+    emit('input', newValue)
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.value,
+  (newValue) => {
+    modelValue.value = newValue
+  },
+  { deep: true }
+)
+</script>
+
+<style scoped src="./FtCheckboxList.css" />
diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.css b/src/renderer/components/FtRadioButton/FtRadioButton.css
similarity index 100%
rename from src/renderer/components/ft-radio-button/ft-radio-button.css
rename to src/renderer/components/FtRadioButton/FtRadioButton.css
diff --git a/src/renderer/components/FtRadioButton/FtRadioButton.vue b/src/renderer/components/FtRadioButton/FtRadioButton.vue
new file mode 100644
index 0000000000000..b1a975d8f26d1
--- /dev/null
+++ b/src/renderer/components/FtRadioButton/FtRadioButton.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="pure-radiobutton filter">
+    <h3 class="radioTitle">
+      {{ title }}
+    </h3>
+    <template
+      v-for="(label, index) in labels"
+    >
+      <input
+        :id="id + values[index]"
+        :key="index"
+        :name="id"
+        :value="values[index]"
+        :checked="value === values[index]"
+        :disabled="disabled"
+        class="radio"
+        type="radio"
+        @change="handleChange(values[index])"
+      >
+      <label
+        :key="label"
+        :for="id + values[index]"
+      >
+        {{ label }}
+      </label>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { useId } from '../../composables/use-id-polyfill'
+
+const id = useId()
+
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  labels: {
+    type: Array,
+    required: true
+  },
+  values: {
+    type: Array,
+    required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+
+  // Required for v-model in the parent component (https://v2.vuejs.org/v2/guide/components#Using-v-model-on-Components)
+  // Do not rename or remove
+  // TODO: Replace with defineModel in Vue 3
+  value: {
+    type: String,
+    required: true
+  }
+})
+
+// Required for v-model in the parent component (https://v2.vuejs.org/v2/guide/components#Using-v-model-on-Components)
+// Do not rename or remove
+// TODO: Replace with defineModel in Vue 3
+const emit = defineEmits(['input'])
+
+/**
+ * @param {string} value
+ */
+function handleChange(value) {
+  emit('input', value)
+}
+</script>
+
+<style scoped src="./FtRadioButton.css" />
diff --git a/src/renderer/components/FtSearchFilters/FtSearchFilters.vue b/src/renderer/components/FtSearchFilters/FtSearchFilters.vue
index 5c6c207ce30d1..ff1e59ff23e59 100644
--- a/src/renderer/components/FtSearchFilters/FtSearchFilters.vue
+++ b/src/renderer/components/FtSearchFilters/FtSearchFilters.vue
@@ -13,49 +13,39 @@
       </h2>
       <FtFlexBox class="radioFlexBox">
         <FtRadioButton
-          ref="sortByRadio"
+          v-model="sortByValue"
           :title="$t('Search Filters.Sort By.Sort By')"
           :labels="sortByLabels"
           :values="SORT_BY_VALUES"
-          :initial-value-index="searchSortByStartIndex"
           class="searchRadio"
-          @change="updateSortBy"
         />
         <FtRadioButton
-          ref="timeRadio"
+          v-model="timeValue"
           :title="$t('Search Filters.Time.Time')"
           :labels="timeLabels"
           :values="TIME_VALUES"
-          :initial-value-index="searchTimeStartIndex"
           class="searchRadio"
-          @change="updateTime"
         />
         <FtRadioButton
-          ref="typeRadio"
+          v-model="typeValue"
           :title="$t('Search Filters.Type.Type')"
           :labels="typeLabels"
           :values="TYPE_VALUES"
-          :initial-value-index="searchTypeStartIndex"
           class="searchRadio"
-          @change="updateType"
         />
         <FtRadioButton
-          ref="durationRadio"
+          v-model="durationValue"
           :title="$t('Search Filters.Duration.Duration')"
           :labels="durationLabels"
           :values="DURATION_VALUES"
-          :initial-value-index="searchDurationStartIndex"
           class="searchRadio"
-          @change="updateDuration"
         />
         <FtCheckboxList
-          ref="featuresCheck"
+          v-model="featuresValue"
           :title="$t('Search Filters.Features.Features')"
           :labels="featureLabels"
           :values="FEATURE_VALUES"
-          :initial-values="searchDefaultFeatures"
           class="searchRadio"
-          @change="updateFeatures"
         />
       </FtFlexBox>
       <div class="searchFilterCloseButtonContainer">
@@ -71,14 +61,14 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
-import FtRadioButton from '../ft-radio-button/ft-radio-button.vue'
+import FtRadioButton from '../FtRadioButton/FtRadioButton.vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import FtButton from '../ft-button/ft-button.vue'
-import FtCheckboxList from '../ft-checkbox-list/ft-checkbox-list.vue'
+import FtCheckboxList from '../FtCheckboxList/FtCheckboxList.vue'
 
 import store from '../../store/index'
 
@@ -181,113 +171,89 @@ const featureLabels = computed(() => [
   t('Search Filters.Features.VR180')
 ])
 
-const sortByRadio = ref(null)
-const timeRadio = ref(null)
-const typeRadio = ref(null)
-const durationRadio = ref(null)
-const featuresCheck = ref(null)
+const searchSettings = store.getters.getSearchSettings
 
-const searchFilterValueChanged = computed(() => {
-  if (sortByRadio.value == null || timeRadio.value == null || typeRadio.value == null || durationRadio.value == null || featuresCheck.value == null) {
-    return false
-  }
+/** @type {import('vue').Ref<'relevance' | 'rating' | 'upload_date' | 'view_count'>} */
+const sortByValue = ref(searchSettings.sortBy)
 
-  return sortByRadio.value.selectedValue !== SORT_BY_VALUES[0] ||
-    timeRadio.value.selectedValue !== TIME_VALUES[0] ||
-    typeRadio.value.selectedValue !== TYPE_VALUES[0] ||
-    durationRadio.value.selectedValue !== DURATION_VALUES[0] ||
-    featuresCheck.value.selectedValues.length > 0
+watch(sortByValue, (value) => {
+  store.commit('setSearchSortBy', value)
 })
 
-const searchSettings = computed(() => store.getters.getSearchSettings)
-
-const searchSortByStartIndex = SORT_BY_VALUES.indexOf(searchSettings.value.sortBy)
-const searchTimeStartIndex = TIME_VALUES.indexOf(searchSettings.value.time)
-const searchTypeStartIndex = TYPE_VALUES.indexOf(searchSettings.value.type)
-const searchDurationStartIndex = DURATION_VALUES.indexOf(searchSettings.value.duration)
-const searchDefaultFeatures = [...searchSettings.value.features]
+/** @type {import('vue').Ref<'' | 'hour' | 'today' | 'week' | 'month' | 'year'>} */
+const timeValue = ref(searchSettings.time)
 
-function hideSearchFilters() {
-  store.dispatch('hideSearchFilters')
-}
+watch(timeValue, (value) => {
+  if (timeValue.value !== '' && !isVideoOrMovieOrAll(typeValue.value)) {
+    typeValue.value = 'all'
+  }
 
-/**
- * @param {'all' | 'video' | 'channel' | 'playlist' | 'movie'} type
- */
-function isVideoOrMovieOrAll(type) {
-  return type === 'video' | type === 'movie' || type === 'all'
-}
+  store.commit('setSearchTime', value)
+})
 
-/**
- * @param {'relevance' | 'rating' | 'upload_date' | 'view_count'} value
- */
-function updateSortBy(value) {
-  store.commit('setSearchSortBy', value)
-  store.commit('setSearchFilterValueChanged', searchFilterValueChanged.value)
-}
+/** @type {import('vue').Ref<'all' | 'video' | 'channel' | 'playlist' | 'movie'>} */
+const typeValue = ref(searchSettings.type)
 
-/**
- * @param {'' | 'hour' | 'today' | 'week' | 'month' | 'year'} value
- */
-function updateTime(value) {
-  if (!isVideoOrMovieOrAll(searchSettings.value.type)) {
-    typeRadio.value.updateSelectedValue('all')
-    store.commit('setSearchType', 'all')
+watch(typeValue, (value) => {
+  if (value === 'channel' || value === 'playlist') {
+    timeValue.value = ''
+    durationValue.value = ''
+    sortByValue.value = SORT_BY_VALUES[0]
+    if (featuresValue.value.length > 0) {
+      featuresValue.value = []
+    }
+  } else if (value === 'movie') {
+    if (featuresValue.value.length > 0) {
+      featuresValue.value = featuresValue.value.filter(e => !NOT_ALLOWED_FOR_MOVIES_FEATURES.includes(e))
+    }
   }
 
-  store.commit('setSearchTime', value)
-  store.commit('setSearchFilterValueChanged', searchFilterValueChanged.value)
-}
+  store.commit('setSearchType', value)
+})
 
-/**
- * @param {('hd' | 'subtitles' | 'creative_commons' | '3d' | 'live' | '4k' | '360' | 'location' | 'hdr' | 'vr180')[]} values
- */
-function updateFeatures(values) {
-  if (!isVideoOrMovieOrAll(searchSettings.value.type) || NOT_ALLOWED_FOR_MOVIES_FEATURES.some(item => values.includes(item))) {
-    typeRadio.value.updateSelectedValue('all')
-    store.commit('setSearchType', 'all')
+/** @type {import('vue').Ref<'' | 'short' | 'medium' | 'long'>} */
+const durationValue = ref(searchSettings.duration)
+
+watch(durationValue, (value) => {
+  if (value !== '' && !isVideoOrMovieOrAll(typeValue.value)) {
+    typeValue.value = 'all'
   }
 
-  store.commit('setSearchFeatures', values)
-  store.commit('setSearchFilterValueChanged', searchFilterValueChanged.value)
-}
+  store.commit('setSearchDuration', value)
+})
 
-/**
- * @param {'all' | 'video' | 'channel' | 'playlist' | 'movie'} value
- */
-function updateType(value) {
-  if (value === 'channel' || value === 'playlist') {
-    timeRadio.value.updateSelectedValue('')
-    durationRadio.value.updateSelectedValue('')
-    sortByRadio.value.updateSelectedValue(SORT_BY_VALUES[0])
-    featuresCheck.value.setSelectedValues([])
-
-    store.commit('setSearchTime', '')
-    store.commit('setSearchDuration', '')
-    store.commit('setSearchFeatures', [])
-    store.commit('setSearchSortBy', SORT_BY_VALUES[0])
-  } else if (value === 'movie') {
-    const filteredFeatures = searchSettings.value.features.filter(e => !NOT_ALLOWED_FOR_MOVIES_FEATURES.includes(e))
+/** @type {import('vue').Ref<('hd' | 'subtitles' | 'creative_commons' | '3d' | 'live' | '4k' | '360' | 'location' | 'hdr' | 'vr180')[]>} */
+const featuresValue = ref([...searchSettings.features])
 
-    featuresCheck.value.setSelectedValues([...filteredFeatures])
-    store.commit('setSearchFeatures', filteredFeatures)
+watch(featuresValue, (values) => {
+  if (values.length > 0 && (!isVideoOrMovieOrAll(typeValue.value) || NOT_ALLOWED_FOR_MOVIES_FEATURES.some(item => values.includes(item)))) {
+    typeValue.value = 'all'
   }
 
-  store.commit('setSearchType', value)
-  store.commit('setSearchFilterValueChanged', searchFilterValueChanged.value)
+  store.commit('setSearchFeatures', [...values])
+}, { deep: true })
+
+const searchFilterValueChanged = computed(() => {
+  return sortByValue.value !== SORT_BY_VALUES[0] ||
+    timeValue.value !== TIME_VALUES[0] ||
+    typeValue.value !== TYPE_VALUES[0] ||
+    durationValue.value !== DURATION_VALUES[0] ||
+    featuresValue.value.length > 0
+})
+
+watch(searchFilterValueChanged, (value) => {
+  store.commit('setSearchFilterValueChanged', value)
+})
+
+function hideSearchFilters() {
+  store.dispatch('hideSearchFilters')
 }
 
 /**
- * @param {'' | 'short' | 'medium' | 'long'} value
+ * @param {'all' | 'video' | 'channel' | 'playlist' | 'movie'} type
  */
-function updateDuration(value) {
-  if (value !== '' && !isVideoOrMovieOrAll(searchSettings.value.type)) {
-    typeRadio.value.updateSelectedValue('all')
-    updateType('all')
-  }
-
-  store.commit('setSearchDuration', value)
-  store.commit('setSearchFilterValueChanged', searchFilterValueChanged.value)
+function isVideoOrMovieOrAll(type) {
+  return type === 'video' || type === 'movie' || type === 'all'
 }
 </script>
 
diff --git a/src/renderer/components/ft-checkbox-list/ft-checkbox-list.js b/src/renderer/components/ft-checkbox-list/ft-checkbox-list.js
deleted file mode 100644
index b7ef0d151b48e..0000000000000
--- a/src/renderer/components/ft-checkbox-list/ft-checkbox-list.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'FtCheckboxList',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    labels: {
-      type: Array,
-      required: true
-    },
-    values: {
-      type: Array,
-      required: true
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    initialValues: {
-      type: Array,
-      required: true
-    }
-  },
-  emits: ['change'],
-  data: function () {
-    return {
-      id: '',
-      selectedValues: []
-    }
-  },
-  computed: {
-    inputName: function () {
-      const name = this.title.replace(' ', '')
-      return name.toLowerCase() + this.id
-    }
-  },
-  created: function () {
-    this.id = this._uid
-    this.selectedValues = this.initialValues
-  },
-  methods: {
-    setSelectedValues: function(arr) {
-      this.selectedValues = arr
-    },
-    change: function(event) {
-      const targ = event.target
-      if (targ.checked) {
-        if (!this.selectedValues.includes(targ.value)) {
-          this.selectedValues.push(targ.value)
-        }
-      } else {
-        this.selectedValues = this.selectedValues.filter(e => e !== targ.value)
-      }
-
-      this.$emit('change', [...this.selectedValues])
-    },
-  }
-})
diff --git a/src/renderer/components/ft-checkbox-list/ft-checkbox-list.vue b/src/renderer/components/ft-checkbox-list/ft-checkbox-list.vue
deleted file mode 100644
index f020b35b64119..0000000000000
--- a/src/renderer/components/ft-checkbox-list/ft-checkbox-list.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div class="pure-checkbox filter">
-    <h3 class="checkboxTitle">
-      {{ title }}
-    </h3>
-    <!--  eslint-disable vue/no-template-key -->
-    <template
-      v-for="(label, index) in labels"
-    >
-      <input
-        :id="values[index] + id"
-        :key="index"
-        :name="inputName"
-        :value="values[index]"
-        :disabled="disabled"
-        class="checkbox"
-        type="checkbox"
-        :checked="selectedValues.includes(values[index]) ?? null"
-        @change="change"
-      >
-      <label
-        :key="label"
-        :for="values[index] + id"
-      >
-        {{ label }}
-      </label>
-    </template>
-  </div>
-</template>
-
-<script src="./ft-checkbox-list.js" />
-<style scoped src="./ft-checkbox-list.css" />
diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.js b/src/renderer/components/ft-radio-button/ft-radio-button.js
deleted file mode 100644
index ee4774474aa46..0000000000000
--- a/src/renderer/components/ft-radio-button/ft-radio-button.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'FtRadioButton',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    labels: {
-      type: Array,
-      required: true
-    },
-    values: {
-      type: Array,
-      required: true
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    initialValueIndex: {
-      type: Number,
-      default: 0
-    }
-  },
-  emits: ['change'],
-  data: function () {
-    return {
-      id: '',
-      selectedValue: ''
-    }
-  },
-  computed: {
-    inputName: function () {
-      const name = this.title.replace(' ', '')
-      return name.toLowerCase() + this.id
-    }
-  },
-  created: function () {
-    this.id = this._uid
-    this.selectedValue = this.values[this.initialValueIndex]
-  },
-  methods: {
-    updateSelectedValue: function (value) {
-      this.selectedValue = value
-    },
-    change: function(value) {
-      this.$emit('change', value)
-    },
-  }
-})
diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.vue b/src/renderer/components/ft-radio-button/ft-radio-button.vue
deleted file mode 100644
index 46fcc3b1e7d5b..0000000000000
--- a/src/renderer/components/ft-radio-button/ft-radio-button.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div class="pure-radiobutton filter">
-    <h3 class="radioTitle">
-      {{ title }}
-    </h3>
-    <!--  eslint-disable vue/no-template-key -->
-    <template
-      v-for="(label, index) in labels"
-    >
-      <input
-        :id="values[index] + id"
-        :key="index"
-        v-model="selectedValue"
-        :name="inputName"
-        :value="values[index]"
-        :checked="index === initialValueIndex"
-        :disabled="disabled"
-        class="radio"
-        type="radio"
-        @change="change(values[index])"
-      >
-      <label
-        :key="label"
-        :for="values[index] + id"
-      >
-        {{ label }}
-      </label>
-    </template>
-  </div>
-</template>
-
-<script src="./ft-radio-button.js" />
-<style scoped src="./ft-radio-button.css" />
diff --git a/src/renderer/composables/use-id-polyfill.js b/src/renderer/composables/use-id-polyfill.js
new file mode 100644
index 0000000000000..cb0b21b2a5501
--- /dev/null
+++ b/src/renderer/composables/use-id-polyfill.js
@@ -0,0 +1,10 @@
+// based on https://github.com/vuejs/core/blob/main/packages/runtime-core/src/helpers/useId.ts
+
+let counter = 0
+
+/**
+ * Polyfill for Vue 3's useId composable in Vue 2
+ */
+export function useId() {
+  return `v-0-${counter++}`
+}