MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(front): fix `ordering=+title` 

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2548>
This commit is contained in:
Kasper Seweryn 2023-08-05 14:44:22 +02:00
parent 0175895afb
commit 7037b708b4
4 changed files with 96 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
front/package.json
View File

@ -20,10 +20,10 @@
"@sentry/tracing": "7.27.0", "@sentry/tracing": "7.27.0",
"@sentry/vue": "7.27.0", "@sentry/vue": "7.27.0",
"@vue/runtime-core": "3.2.45", "@vue/runtime-core": "3.2.45",
"@vueuse/core": "9.12.0", "@vueuse/core": "10.3.0",
"@vueuse/integrations": "9.12.0", "@vueuse/integrations": "10.3.0",
"@vueuse/math": "9.12.0", "@vueuse/math": "10.3.0",
"@vueuse/router": "9.12.0", "@vueuse/router": "10.3.0",
"axios": "1.2.3", "axios": "1.2.3",
"axios-auth-refresh": "3.3.6", "axios-auth-refresh": "3.3.6",
"butterchurn": "3.0.0-beta.4", "butterchurn": "3.0.0-beta.4",

93
front/src/composables/navigation/useOrdering.ts
View File

@ -3,70 +3,73 @@ import type { RouteRecordName } from 'vue-router'
import { toRefs, useStorage, syncRef } from '@vueuse/core' import { toRefs, useStorage, syncRef } from '@vueuse/core'
import { useRouteQuery } from '@vueuse/router' import { useRouteQuery } from '@vueuse/router'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { ref, watch } from 'vue' import { watch, readonly } from 'vue'
export interface OrderingProps { export interface OrderingProps {
orderingConfigName?: RouteRecordName orderingConfigName?: RouteRecordName
} }
export default (props: OrderingProps) => { export default <T extends string = string>(props: OrderingProps) => {
const route = useRoute() const route = useRoute()
const preferences = useStorage(`route-preferences:${props.orderingConfigName?.toString() ?? route.name?.toString() ?? '*'}`, { interface Preferences {
orderingDirection: '-' | '+'
ordering: T
paginateBy: number
}
const preferences = useStorage<Preferences>(`route-preferences:${props.orderingConfigName?.toString() ?? route.name?.toString() ?? '*'}`, () => ({
orderingDirection: route.meta.orderingDirection ?? '-', orderingDirection: route.meta.orderingDirection ?? '-',
ordering: route.meta.ordering ?? 'creation_date', ordering: route.meta.ordering ?? 'creation_date',
paginateBy: route.meta.paginateBy ?? 50 paginateBy: route.meta.paginateBy ?? 50
}) }))
const { const {
orderingDirection: perfOrderingDirection, orderingDirection: prefOrderingDirection,
paginateBy: perfPaginateBy, paginateBy: prefPaginateBy,
ordering: perfOrdering ordering: prefOrdering
} = toRefs(preferences) } = toRefs(preferences, {
replaceRef: false
const queryPaginateBy = useRouteQuery<string>('paginateBy', perfPaginateBy.value.toString())
const paginateBy = ref()
syncRef(queryPaginateBy, paginateBy, {
transform: {
ltr: (left) => +left,
rtl: (right) => right.toString()
}
}) })
const queryOrdering = useRouteQuery('ordering', perfOrderingDirection.value + perfOrdering.value) const normalizeDirection = (direction: string) => direction === '+' ? '' : '-'
const queryOrdering = useRouteQuery(
'ordering',
normalizeDirection(prefOrderingDirection.value) + prefOrdering.value,
{ transform: (value) => value.trim() }
)
const queryPaginateBy = useRouteQuery('paginateBy', prefPaginateBy.value, {
transform: Number
})
// NOTE: Sync paginateBy in query string and preferences. We're using `flush: 'post'` to make sure that we sync after all updates are done
syncRef(queryPaginateBy, prefPaginateBy, {
flush: 'post'
})
// NOTE: Sync ordering from preferences to query string
watch([prefOrderingDirection, prefOrdering], () => {
queryOrdering.value = normalizeDirection(prefOrderingDirection.value) + prefOrdering.value.trim()
})
// NOTE: Sync ordering from query string to preferences
watch(queryOrdering, (ordering) => { watch(queryOrdering, (ordering) => {
perfOrderingDirection.value = ordering[0] === '-' ? '-' : '+' prefOrderingDirection.value = ordering[0] === '-' ? '-' : '+'
perfOrdering.value = ordering[0] === '-' || ordering[0] === '+' prefOrdering.value = ordering.replace(/^[+-]/, '')
? ordering.slice(1) }, { immediate: true })
: ordering
// NOTE: We're using `flush: 'post'` to make sure that the `onOrderingUpdate` callback is called after all updates are done
const onOrderingUpdate = (fn: () => void) => watch(preferences, fn, {
flush: 'post'
}) })
watch(perfOrderingDirection, (direction) => {
if (direction === '-') {
queryOrdering.value = direction + perfOrdering.value
return
}
queryOrdering.value = perfOrdering.value
})
watch(perfOrdering, (field) => {
const direction = perfOrderingDirection.value
queryOrdering.value = (direction === '-' ? '-' : '') + field
})
watch(queryPaginateBy, (paginateBy) => {
perfPaginateBy.value = +paginateBy
})
const onOrderingUpdate = (fn: () => void) => watch(preferences, fn)
return { return {
paginateBy, paginateBy: prefPaginateBy,
ordering: perfOrdering, ordering: prefOrdering,
orderingDirection: perfOrderingDirection, orderingDirection: prefOrderingDirection,
orderingString: queryOrdering, orderingString: readonly(queryOrdering),
onOrderingUpdate onOrderingUpdate
} }
} }

6
front/src/composables/useMarkdown.ts
View File

@ -1,6 +1,6 @@
import type { MaybeComputedRef } from '@vueuse/core' import type { MaybeRefOrGetter } from '@vueuse/core'
import { resolveUnref } from '@vueuse/core' import { toValue } from '@vueuse/core'
import { computed } from 'vue' import { computed } from 'vue'
import showdown from 'showdown' import showdown from 'showdown'
@ -51,6 +51,6 @@ const markdown = new showdown.Converter({
}) })
export const useMarkdownRaw = (md: string) => markdown.makeHtml(md) export const useMarkdownRaw = (md: string) => markdown.makeHtml(md)
export const useMarkdownComputed = (md: MaybeComputedRef<string>) => computed(() => useMarkdownRaw(resolveUnref(md))) export const useMarkdownComputed = (md: MaybeRefOrGetter<string>) => computed(() => useMarkdownRaw(toValue(md)))
export default useMarkdownComputed export default useMarkdownComputed

82
front/yarn.lock
View File

@ -1946,10 +1946,10 @@
resolved "https://registry.yarnpkg.com/@earltp/vue-virtual-scroller/-/vue-virtual-scroller-1.0.1.tgz#75116ef9b091457a654d92ff0688e991b3cd9e8a" resolved "https://registry.yarnpkg.com/@earltp/vue-virtual-scroller/-/vue-virtual-scroller-1.0.1.tgz#75116ef9b091457a654d92ff0688e991b3cd9e8a"
integrity sha512-7UsmP2JALnkfWlheuWRDywuBUTLJcVPE86X5ogA3djUmYFybE6qximgQ7OgyJnrKLteWR7+1Cp0GUXHhdDKaDQ== integrity sha512-7UsmP2JALnkfWlheuWRDywuBUTLJcVPE86X5ogA3djUmYFybE6qximgQ7OgyJnrKLteWR7+1Cp0GUXHhdDKaDQ==
"@types/web-bluetooth@^0.0.16": "@types/web-bluetooth@^0.0.17":
version "0.0.16" version "0.0.17"
resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8" resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz#5c9f3c617f64a9735d7b72a7cc671e166d900c40"
integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ== integrity sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==
"@typescript-eslint/eslint-plugin@5.48.2": "@typescript-eslint/eslint-plugin@5.48.2":
version "5.48.2" version "5.48.2"
@ -2414,52 +2414,52 @@
resolved "https://registry.yarnpkg.com/@vue/tsconfig/-/tsconfig-0.1.3.tgz#4a61dbd29783d01ddab504276dcf0c2b6988654f" resolved "https://registry.yarnpkg.com/@vue/tsconfig/-/tsconfig-0.1.3.tgz#4a61dbd29783d01ddab504276dcf0c2b6988654f"
integrity sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg== integrity sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==
"@vueuse/core@9.12.0": "@vueuse/core@10.3.0":
version "9.12.0" version "10.3.0"
resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.12.0.tgz#e5b20f901e081c7ae5fe0e5f3af217929034eefe" resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.3.0.tgz#b2dab7821ef206811b925fc935163c38056fd82b"
integrity sha512-h/Di8Bvf6xRcvS/PvUVheiMYYz3U0tH3X25YxONSaAUBa841ayMwxkuzx/DGUMCW/wHWzD8tRy2zYmOC36r4sg== integrity sha512-BEM5yxcFKb5btFjTSAFjTu5jmwoW66fyV9uJIP4wUXXU8aR5Hl44gndaaXp7dC5HSObmgbnR2RN+Un1p68Mf5Q==
dependencies: dependencies:
"@types/web-bluetooth" "^0.0.16" "@types/web-bluetooth" "^0.0.17"
"@vueuse/metadata" "9.12.0" "@vueuse/metadata" "10.3.0"
"@vueuse/shared" "9.12.0" "@vueuse/shared" "10.3.0"
vue-demi "*" vue-demi ">=0.14.5"
"@vueuse/integrations@9.12.0": "@vueuse/integrations@10.3.0":
version "9.12.0" version "10.3.0"
resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-9.12.0.tgz#bd28cbab8afccc96b122bb44750b24b6d1b1496a" resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-10.3.0.tgz#765e9505358590f21531998194c6e60a8b23655c"
integrity sha512-bu0hOQAqg7A8S33RHpr49LuzVQJ4tK4oyimEfhPFGUVqmz/MMcwPH8Lde+MbVXvfYh2hrtwNv9S38pCmonRx4w== integrity sha512-Jgiv7oFyIgC6BxmDtiyG/fxyGysIds00YaY7sefwbhCZ2/tjEx1W/1WcsISSJPNI30in28+HC2J4uuU8184ekg==
dependencies: dependencies:
"@vueuse/core" "9.12.0" "@vueuse/core" "10.3.0"
"@vueuse/shared" "9.12.0" "@vueuse/shared" "10.3.0"
vue-demi "*" vue-demi ">=0.14.5"
"@vueuse/math@9.12.0": "@vueuse/math@10.3.0":
version "9.12.0" version "10.3.0"
resolved "https://registry.yarnpkg.com/@vueuse/math/-/math-9.12.0.tgz#d7233840a7f6a1cc50357df02224745d9976f4a7" resolved "https://registry.yarnpkg.com/@vueuse/math/-/math-10.3.0.tgz#5f7243498164403b1ad88cc0733f9dcb8710faed"
integrity sha512-i4N67Ib+FXh/cdwK1J7hijSy8QXBKGqy492SvVBd6UjPPeCSIkkd4veO2Lsj0gMeRfObFsVdY0+1jW+kTRcJMw== integrity sha512-egJN5b7Ks1s92XS/DuP/irxC2GyR59BfLm19aeWDHbAXhDgK9L+X/z9fZGobI9U7dZ/2A9nlqf0FeMDgh+oWEA==
dependencies: dependencies:
"@vueuse/shared" "9.12.0" "@vueuse/shared" "10.3.0"
vue-demi "*" vue-demi ">=0.14.5"
"@vueuse/metadata@9.12.0": "@vueuse/metadata@10.3.0":
version "9.12.0" version "10.3.0"
resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-9.12.0.tgz#19a0fefcba6a66a2382af10a7a67ebad6eec1f27" resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.3.0.tgz#14fe6cc909573785f73a56e4d9351edf3830b796"
integrity sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ== integrity sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==
"@vueuse/router@9.12.0": "@vueuse/router@10.3.0":
version "9.12.0" version "10.3.0"
resolved "https://registry.yarnpkg.com/@vueuse/router/-/router-9.12.0.tgz#985759be6fb4a55609942b300e62c4023a47612e" resolved "https://registry.yarnpkg.com/@vueuse/router/-/router-10.3.0.tgz#f0cd64fddba1b2a5af261e933c53808f0faa78f8"
integrity sha512-I3TaWrsxEdANrgJjNEeRTbOMGS+uYjB5zHoyayhFgk1SY1ytDw51tgXr6n4n9fVqglorvhKdX5rFDvBAbeQ+Xw== integrity sha512-WCx/BAxO0eInuOcyNRBxDLS16tnNqzdaR6/babg6AUgAIL0TCfmHBh46wJa6hhg+NMGjd6HzCaktxBasp+0c0A==
dependencies: dependencies:
"@vueuse/shared" "9.12.0" "@vueuse/shared" "10.3.0"
vue-demi "*" vue-demi ">=0.14.5"
"@vueuse/shared@9.12.0": "@vueuse/shared@10.3.0":
version "9.12.0" version "10.3.0"
resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-9.12.0.tgz#e6597da80084cba8fc3d6545f4c2fa9817b80428" resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.3.0.tgz#ce6b4b6860e14aaa293025dcf0cbe1036a25869f"
integrity sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ== integrity sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==
dependencies: dependencies:
vue-demi "*" vue-demi ">=0.14.5"
abab@^2.0.6: abab@^2.0.6:
version "2.0.6" version "2.0.6"
@ -5767,7 +5767,7 @@ vitest@0.25.8:
tinyspy "^1.0.2" tinyspy "^1.0.2"
vite "^3.0.0 || ^4.0.0" vite "^3.0.0 || ^4.0.0"
vue-demi@*: vue-demi@>=0.14.5:
version "0.14.5" version "0.14.5"
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.5.tgz#676d0463d1a1266d5ab5cba932e043d8f5f2fbd9" resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.5.tgz#676d0463d1a1266d5ab5cba932e043d8f5f2fbd9"
integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA== integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==