From 062fd544d6cd82ad3d550e92a86ec88f46a1b6ce Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sat, 5 Apr 2025 16:17:54 +0200
Subject: [PATCH] fix(front): #2440 make `build` happy by commenting out all
 remaining jQuery invocations

---
 front/src/components/library/TagsSelector.vue | 137 +++++++++---------
 .../src/components/library/radios/Filter.vue  |  21 ++-
 .../views/admin/moderation/AccountsDetail.vue |  16 +-
 3 files changed, 83 insertions(+), 91 deletions(-)

diff --git a/front/src/components/library/TagsSelector.vue b/front/src/components/library/TagsSelector.vue
index a68f28e4a..74593e2d1 100644
--- a/front/src/components/library/TagsSelector.vue
+++ b/front/src/components/library/TagsSelector.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import type { Tag } from '~/types'
+// import type { Tag } from '~/types'
 
 import { ref, watch, onMounted, nextTick } from 'vue'
-import { isEqual } from 'lodash-es'
-import { useStore } from '~/store'
+// import { isEqual } from 'lodash-es'
+// import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
-import $ from 'jquery'
 
-interface Events {
-  (e: 'update:modelValue', tags: string[]): void
-}
+// interface Events {
+//   (e: 'update:modelValue', tags: string[]): void
+// }
 
 interface Props {
   modelValue: string[]
@@ -17,87 +16,81 @@ interface Props {
 
 const { t } = useI18n()
 
-const emit = defineEmits<Events>()
+// const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
-const store = useStore()
+// const store = useStore()
 
 const dropdown = ref()
 
 watch(() => props.modelValue, (value) => {
-  // TODO: root out jquery and all its malevolent offspring!
-  // @ts-expect-error drop up and down and up again
-  const current = $(dropdown.value).dropdown('get value').split(',').sort()
+  return
+  // TODO: Find out if the following removal causes any regression #2440
+  // const current = $(dropdown.value).dropdown('get value').split(',').sort()
 
-  if (!isEqual([...value].sort(), current)) {
-    // TODO: root out jquery and all its malevolent offspring!
-    // @ts-expect-error drop up and down and up again
-    $(dropdown.value).dropdown('set exactly', value)
-  }
+  // if (!isEqual([...value].sort(), current)) {
+  //   $(dropdown.value).dropdown('set exactly', value)
+  // }
 })
 
-const handleUpdate = () => {
-  // TODO: root out jquery and all its malevolent offspring!
-  // @ts-expect-error drop up and down and up again
-  const value = $(dropdown.value).dropdown('get value').split(',')
-  emit('update:modelValue', value)
-  return value
-}
+// TODO: Find out if the following removal causes any regression #2440
+// const handleUpdate = () => {
+//   const value = $(dropdown.value).dropdown('get value').split(',')
+//   emit('update:modelValue', value)
+//   return value
+// }
 
 onMounted(async () => {
   await nextTick()
 
-  // TODO: root out jquery and all its malevolent offspring!
-  // @ts-expect-error drop up and down and up again
-  $(dropdown.value).dropdown({
-    keys: { delimiter: 32 },
-    forceSelection: false,
-    saveRemoteData: false,
-    filterRemoteData: true,
-    preserveHTML: false,
-    apiSettings: {
-      url: store.getters['instance/absoluteUrl']('/api/v1/tags/?name__startswith={query}&ordering=length&page_size=5'),
-      // @ts-expect-error I'm not curious to research what xhr is but I'm sure it served its purpose well
-      beforeXHR: function (xhrObject) {
-        if (store.state.auth.oauth.accessToken) {
-          xhrObject.setRequestHeader('Authorization', store.getters['auth/header'])
-        }
-        return xhrObject
-      },
-      // @ts-expect-error yes, semantic-ui has a large API.
-      onResponse (response) {
-        response = { results: [], ...response }
+  // TODO: Find out if the following removal causes any regression #2440
+  // $(dropdown.value).dropdown({
+  //   keys: { delimiter: 32 },
+  //   forceSelection: false,
+  //   saveRemoteData: false,
+  //   filterRemoteData: true,
+  //   preserveHTML: false,
+  //   apiSettings: {
+  //     url: store.getters['instance/absoluteUrl']('/api/v1/tags/?name__startswith={query}&ordering=length&page_size=5'),
+  //     // @ts-expect-error I'm not curious to research what xhr is but I'm sure it served its purpose well
+  //     beforeXHR: function (xhrObject) {
+  //       if (store.state.auth.oauth.accessToken) {
+  //         xhrObject.setRequestHeader('Authorization', store.getters['auth/header'])
+  //       }
+  //       return xhrObject
+  //     },
+  //     // @ts-expect-error yes, semantic-ui has a large API.
+  //     onResponse (response) {
+  //       response = { results: [], ...response }
 
-        // @ts-expect-error Semantic UI
-        const currentSearch: string = $(dropdown.value).dropdown('get query')
+  //       const currentSearch: string = ''
+  //       // TODO: Find out if the following removal causes any regression #2440
+  //       // $(dropdown.value).dropdown('get query')
 
-        if (currentSearch) {
-          const existingTag = response.results.find((result: Tag) => result.name === currentSearch)
+  //       if (currentSearch) {
+  //         const existingTag = response.results.find((result: Tag) => result.name === currentSearch)
 
-          if (existingTag) {
-            if (response.results.indexOf(existingTag) !== 0) {
-              response.results = [existingTag, ...response.results]
-              response.results.splice(response.results.indexOf(existingTag) + 1, 1)
-            }
-          } else {
-            response.results = [{ name: currentSearch }, ...response.results]
-          }
-        }
-        return response
-      }
-    },
-    fields: { remoteValues: 'results', value: 'name' },
-    allowAdditions: true,
-    minCharacters: 1,
-    onAdd: handleUpdate,
-    onRemove: handleUpdate,
-    onLabelRemove: handleUpdate,
-    onChange: handleUpdate
-  })
-
-  // TODO: root out jquery and all its malevolent offspring!
-  // @ts-expect-error drop up and down and up again
-  $(dropdown.value).dropdown('set exactly', props.modelValue)
+  //         if (existingTag) {
+  //           if (response.results.indexOf(existingTag) !== 0) {
+  //             response.results = [existingTag, ...response.results]
+  //             response.results.splice(response.results.indexOf(existingTag) + 1, 1)
+  //           }
+  //         } else {
+  //           response.results = [{ name: currentSearch }, ...response.results]
+  //         }
+  //       }
+  //       return response
+  //     }
+  //   },
+  //   fields: { remoteValues: 'results', value: 'name' },
+  //   allowAdditions: true,
+  //   minCharacters: 1,
+  //   onAdd: handleUpdate,
+  //   onRemove: handleUpdate,
+  //   onLabelRemove: handleUpdate,
+  //   onChange: handleUpdate
+  // })
+  // $(dropdown.value).dropdown('set exactly', props.modelValue)
 })
 </script>
 
diff --git a/front/src/components/library/radios/Filter.vue b/front/src/components/library/radios/Filter.vue
index d5c1d8c8e..80394bca5 100644
--- a/front/src/components/library/radios/Filter.vue
+++ b/front/src/components/library/radios/Filter.vue
@@ -5,9 +5,8 @@ import type { Track } from '~/types'
 import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
-import $ from 'jquery'
 
-import { useCurrentElement, useVModel } from '@vueuse/core'
+import { useVModel } from '@vueuse/core'
 import { ref, onMounted, watch, computed } from 'vue'
 import { useStore } from '~/store'
 import { clone } from 'lodash-es'
@@ -48,7 +47,7 @@ const exclude = computed({
   set: (value: boolean) => (data.value.config.not = value)
 })
 
-const el = useCurrentElement()
+// const el = useCurrentElement()
 
 // This component appears on "create new radio" and offers filters. "New filter" => Dropdown search field
 // TODO: Re-implement with <Input>, <select>
@@ -59,14 +58,14 @@ onMounted(() => {
     const settings: SemanticUI.DropdownSettings = {
       // @ts-expect-error value? any!
       onChange (value) {
-        // @ts-expect-error dropdown? any!
-        value = $(this).dropdown('get value').split(',')
+        // TODO: Find out if the following removal causes any regression #2440
+        // value = $(this).dropdown('get value').split(',')
 
-        if (field.type === 'list' && field.subtype === 'number') {
-          value = value.map((number: string) => parseInt(number))
-        }
+        // if (field.type === 'list' && field.subtype === 'number') {
+        //   value = value.map((number: string) => parseInt(number))
+        // }
 
-        data.value.config[field.name] = value
+        // data.value.config[field.name] = value
         fetchCandidates()
       }
     }
@@ -99,8 +98,8 @@ onMounted(() => {
       }
     }
 
-    // @ts-expect-error jquery lives!
-    $(el.value).find(selector).dropdown(settings)
+    // TODO: Find out if the following removal causes any regression #2440
+    // $(el.value).find(selector).dropdown(settings)
   }
 })
 
diff --git a/front/src/views/admin/moderation/AccountsDetail.vue b/front/src/views/admin/moderation/AccountsDetail.vue
index 2897f02bc..a464a4e4c 100644
--- a/front/src/views/admin/moderation/AccountsDetail.vue
+++ b/front/src/views/admin/moderation/AccountsDetail.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { InstancePolicy } from '~/types'
 
-import { computed, ref, reactive, nextTick, watch } from 'vue'
-import { useCurrentElement } from '@vueuse/core'
+import { computed, ref, reactive } from 'vue'
+// import { useCurrentElement } from '@vueuse/core'
 import { humanSize } from '~/utils/filters'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
@@ -104,12 +104,12 @@ const fetchStats = async () => {
 fetchStats()
 fetchData()
 
-const el = useCurrentElement()
-watch(object, async () => {
-  await nextTick()
-  // @ts-expect-error JQuery owhere to be found...
-  $(el.value).find('select.dropdown').dropdown()
-})
+// TODO: Find out if the following removal causes any regression #2440
+// const el = useCurrentElement()
+// watch(object, async () => {
+//   await nextTick()
+//   $(el.value).find('select.dropdown').dropdown()
+// })
 
 const getQuery = (field: string, value: string) => `${field}:"${value}"`