fix(front): #2440 make `build` happy by commenting out all remaining jQuery invocations

This commit is contained in:
upsiflu 2025-04-05 16:17:54 +02:00
parent 1972f6c8a0
commit 062fd544d6
3 changed files with 83 additions and 91 deletions

View File

@ -1,15 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Tag } from '~/types' // import type { Tag } from '~/types'
import { ref, watch, onMounted, nextTick } from 'vue' import { ref, watch, onMounted, nextTick } from 'vue'
import { isEqual } from 'lodash-es' // import { isEqual } from 'lodash-es'
import { useStore } from '~/store' // import { useStore } from '~/store'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import $ from 'jquery'
interface Events { // interface Events {
(e: 'update:modelValue', tags: string[]): void // (e: 'update:modelValue', tags: string[]): void
} // }
interface Props { interface Props {
modelValue: string[] modelValue: string[]
@ -17,87 +16,81 @@ interface Props {
const { t } = useI18n() const { t } = useI18n()
const emit = defineEmits<Events>() // const emit = defineEmits<Events>()
const props = defineProps<Props>() const props = defineProps<Props>()
const store = useStore() // const store = useStore()
const dropdown = ref() const dropdown = ref()
watch(() => props.modelValue, (value) => { watch(() => props.modelValue, (value) => {
// TODO: root out jquery and all its malevolent offspring! return
// @ts-expect-error drop up and down and up again // TODO: Find out if the following removal causes any regression #2440
const current = $(dropdown.value).dropdown('get value').split(',').sort() // const current = $(dropdown.value).dropdown('get value').split(',').sort()
if (!isEqual([...value].sort(), current)) { // if (!isEqual([...value].sort(), current)) {
// TODO: root out jquery and all its malevolent offspring! // $(dropdown.value).dropdown('set exactly', value)
// @ts-expect-error drop up and down and up again // }
$(dropdown.value).dropdown('set exactly', value)
}
}) })
const handleUpdate = () => { // TODO: Find out if the following removal causes any regression #2440
// TODO: root out jquery and all its malevolent offspring! // const handleUpdate = () => {
// @ts-expect-error drop up and down and up again // const value = $(dropdown.value).dropdown('get value').split(',')
const value = $(dropdown.value).dropdown('get value').split(',') // emit('update:modelValue', value)
emit('update:modelValue', value) // return value
return value // }
}
onMounted(async () => { onMounted(async () => {
await nextTick() await nextTick()
// TODO: root out jquery and all its malevolent offspring! // TODO: Find out if the following removal causes any regression #2440
// @ts-expect-error drop up and down and up again // $(dropdown.value).dropdown({
$(dropdown.value).dropdown({ // keys: { delimiter: 32 },
keys: { delimiter: 32 }, // forceSelection: false,
forceSelection: false, // saveRemoteData: false,
saveRemoteData: false, // filterRemoteData: true,
filterRemoteData: true, // preserveHTML: false,
preserveHTML: false, // apiSettings: {
apiSettings: { // url: store.getters['instance/absoluteUrl']('/api/v1/tags/?name__startswith={query}&ordering=length&page_size=5'),
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
// @ts-expect-error I'm not curious to research what xhr is but I'm sure it served its purpose well // beforeXHR: function (xhrObject) {
beforeXHR: function (xhrObject) { // if (store.state.auth.oauth.accessToken) {
if (store.state.auth.oauth.accessToken) { // xhrObject.setRequestHeader('Authorization', store.getters['auth/header'])
xhrObject.setRequestHeader('Authorization', store.getters['auth/header']) // }
} // return xhrObject
return xhrObject // },
}, // // @ts-expect-error yes, semantic-ui has a large API.
// @ts-expect-error yes, semantic-ui has a large API. // onResponse (response) {
onResponse (response) { // response = { results: [], ...response }
response = { results: [], ...response }
// @ts-expect-error Semantic UI // const currentSearch: string = ''
const currentSearch: string = $(dropdown.value).dropdown('get query') // // TODO: Find out if the following removal causes any regression #2440
// // $(dropdown.value).dropdown('get query')
if (currentSearch) { // if (currentSearch) {
const existingTag = response.results.find((result: Tag) => result.name === currentSearch) // const existingTag = response.results.find((result: Tag) => result.name === currentSearch)
if (existingTag) { // if (existingTag) {
if (response.results.indexOf(existingTag) !== 0) { // if (response.results.indexOf(existingTag) !== 0) {
response.results = [existingTag, ...response.results] // response.results = [existingTag, ...response.results]
response.results.splice(response.results.indexOf(existingTag) + 1, 1) // response.results.splice(response.results.indexOf(existingTag) + 1, 1)
} // }
} else { // } else {
response.results = [{ name: currentSearch }, ...response.results] // response.results = [{ name: currentSearch }, ...response.results]
} // }
} // }
return response // return response
} // }
}, // },
fields: { remoteValues: 'results', value: 'name' }, // fields: { remoteValues: 'results', value: 'name' },
allowAdditions: true, // allowAdditions: true,
minCharacters: 1, // minCharacters: 1,
onAdd: handleUpdate, // onAdd: handleUpdate,
onRemove: handleUpdate, // onRemove: handleUpdate,
onLabelRemove: handleUpdate, // onLabelRemove: handleUpdate,
onChange: handleUpdate // onChange: handleUpdate
}) // })
// $(dropdown.value).dropdown('set exactly', props.modelValue)
// 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)
}) })
</script> </script>

View File

@ -5,9 +5,8 @@ import type { Track } from '~/types'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import axios from 'axios' 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 { ref, onMounted, watch, computed } from 'vue'
import { useStore } from '~/store' import { useStore } from '~/store'
import { clone } from 'lodash-es' import { clone } from 'lodash-es'
@ -48,7 +47,7 @@ const exclude = computed({
set: (value: boolean) => (data.value.config.not = value) 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 // This component appears on "create new radio" and offers filters. "New filter" => Dropdown search field
// TODO: Re-implement with <Input>, <select> // TODO: Re-implement with <Input>, <select>
@ -59,14 +58,14 @@ onMounted(() => {
const settings: SemanticUI.DropdownSettings = { const settings: SemanticUI.DropdownSettings = {
// @ts-expect-error value? any! // @ts-expect-error value? any!
onChange (value) { onChange (value) {
// @ts-expect-error dropdown? any! // TODO: Find out if the following removal causes any regression #2440
value = $(this).dropdown('get value').split(',') // value = $(this).dropdown('get value').split(',')
if (field.type === 'list' && field.subtype === 'number') { // if (field.type === 'list' && field.subtype === 'number') {
value = value.map((number: string) => parseInt(number)) // value = value.map((number: string) => parseInt(number))
} // }
data.value.config[field.name] = value // data.value.config[field.name] = value
fetchCandidates() fetchCandidates()
} }
} }
@ -99,8 +98,8 @@ onMounted(() => {
} }
} }
// @ts-expect-error jquery lives! // TODO: Find out if the following removal causes any regression #2440
$(el.value).find(selector).dropdown(settings) // $(el.value).find(selector).dropdown(settings)
} }
}) })

View File

@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import type { InstancePolicy } from '~/types' import type { InstancePolicy } from '~/types'
import { computed, ref, reactive, nextTick, watch } from 'vue' import { computed, ref, reactive } from 'vue'
import { useCurrentElement } from '@vueuse/core' // import { useCurrentElement } from '@vueuse/core'
import { humanSize } from '~/utils/filters' import { humanSize } from '~/utils/filters'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useStore } from '~/store' import { useStore } from '~/store'
@ -104,12 +104,12 @@ const fetchStats = async () => {
fetchStats() fetchStats()
fetchData() fetchData()
const el = useCurrentElement() // TODO: Find out if the following removal causes any regression #2440
watch(object, async () => { // const el = useCurrentElement()
await nextTick() // watch(object, async () => {
// @ts-expect-error JQuery owhere to be found... // await nextTick()
$(el.value).find('select.dropdown').dropdown() // $(el.value).find('select.dropdown').dropdown()
}) // })
const getQuery = (field: string, value: string) => `${field}:"${value}"` const getQuery = (field: string, value: string) => `${field}:"${value}"`