Client - use <script setup> in components
This commit is contained in:
Sam
@ -9,14 +9,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NoWorkouts',
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/base.scss';
|
||||
.no-workouts {
|
||||
|
||||
@ -159,8 +159,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, ComputedRef, defineComponent, PropType, watch } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { ComputedRef, computed, toRefs, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { LocationQuery, useRoute, useRouter } from 'vue-router'
|
||||
|
||||
@ -168,58 +168,49 @@
|
||||
import { IUserProfile } from '@/types/user'
|
||||
import { translateSports } from '@/utils/sports'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'WorkoutsFilters',
|
||||
props: {
|
||||
authUser: {
|
||||
type: Object as PropType<IUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
sports: {
|
||||
type: Object as PropType<ISport[]>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['filter'],
|
||||
setup(props, { emit }) {
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
interface Props {
|
||||
authUser: IUserProfile
|
||||
sports: ISport[]
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const translatedSports: ComputedRef<ISport[]> = computed(() =>
|
||||
translateSports(props.sports, t)
|
||||
)
|
||||
let params: LocationQuery = Object.assign({}, route.query)
|
||||
const emit = defineEmits(['filter'])
|
||||
|
||||
function handleFilterChange(event: Event & { target: HTMLInputElement }) {
|
||||
if (event.target.value === '') {
|
||||
delete params[event.target.name]
|
||||
} else {
|
||||
params[event.target.name] = event.target.value
|
||||
}
|
||||
}
|
||||
function onFilter() {
|
||||
emit('filter')
|
||||
if ('page' in params) {
|
||||
params['page'] = '1'
|
||||
}
|
||||
router.push({ path: '/workouts', query: params })
|
||||
}
|
||||
function onClearFilter() {
|
||||
emit('filter')
|
||||
router.push({ path: '/workouts', query: {} })
|
||||
}
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
watch(
|
||||
() => route.query,
|
||||
(newQuery) => {
|
||||
params = Object.assign({}, newQuery)
|
||||
}
|
||||
)
|
||||
const { authUser } = toRefs(props)
|
||||
const translatedSports: ComputedRef<ISport[]> = computed(() =>
|
||||
translateSports(props.sports, t)
|
||||
)
|
||||
let params: LocationQuery = Object.assign({}, route.query)
|
||||
|
||||
return { translatedSports, onClearFilter, onFilter, handleFilterChange }
|
||||
},
|
||||
})
|
||||
function handleFilterChange(event: Event & { target: HTMLInputElement }) {
|
||||
if (event.target.value === '') {
|
||||
delete params[event.target.name]
|
||||
} else {
|
||||
params[event.target.name] = event.target.value
|
||||
}
|
||||
}
|
||||
function onFilter() {
|
||||
emit('filter')
|
||||
if ('page' in params) {
|
||||
params['page'] = '1'
|
||||
}
|
||||
router.push({ path: '/workouts', query: params })
|
||||
}
|
||||
function onClearFilter() {
|
||||
emit('filter')
|
||||
router.push({ path: '/workouts', query: {} })
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.query,
|
||||
(newQuery) => {
|
||||
params = Object.assign({}, newQuery)
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -137,15 +137,14 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { format } from 'date-fns'
|
||||
import {
|
||||
ComputedRef,
|
||||
PropType,
|
||||
Ref,
|
||||
computed,
|
||||
defineComponent,
|
||||
ref,
|
||||
toRefs,
|
||||
watch,
|
||||
capitalize,
|
||||
onBeforeMount,
|
||||
@ -166,103 +165,76 @@
|
||||
import { getDateWithTZ } from '@/utils/dates'
|
||||
import { defaultOrder } from '@/utils/workouts'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'WorkoutsList',
|
||||
components: {
|
||||
FilterSelects,
|
||||
NoWorkouts,
|
||||
Pagination,
|
||||
StaticMap,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
sports: {
|
||||
type: Object as PropType<ITranslatedSport[]>,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
interface Props {
|
||||
user: IUserProfile
|
||||
sports: ITranslatedSport[]
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const orderByList: string[] = [
|
||||
'ave_speed',
|
||||
'distance',
|
||||
'duration',
|
||||
'workout_date',
|
||||
]
|
||||
const workouts: ComputedRef<IWorkout[]> = computed(
|
||||
() => store.getters[WORKOUTS_STORE.GETTERS.USER_WORKOUTS]
|
||||
)
|
||||
const pagination: ComputedRef<IPagination> = computed(
|
||||
() => store.getters[WORKOUTS_STORE.GETTERS.WORKOUTS_PAGINATION]
|
||||
)
|
||||
let query: TWorkoutsPayload = getWorkoutsQuery(route.query)
|
||||
const hoverWorkoutId: Ref<string | null> = ref(null)
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
onBeforeMount(() => {
|
||||
loadWorkouts(query)
|
||||
})
|
||||
const { user, sports } = toRefs(props)
|
||||
const orderByList: string[] = [
|
||||
'ave_speed',
|
||||
'distance',
|
||||
'duration',
|
||||
'workout_date',
|
||||
]
|
||||
const workouts: ComputedRef<IWorkout[]> = computed(
|
||||
() => store.getters[WORKOUTS_STORE.GETTERS.USER_WORKOUTS]
|
||||
)
|
||||
const pagination: ComputedRef<IPagination> = computed(
|
||||
() => store.getters[WORKOUTS_STORE.GETTERS.WORKOUTS_PAGINATION]
|
||||
)
|
||||
let query: TWorkoutsPayload = getWorkoutsQuery(route.query)
|
||||
const hoverWorkoutId: Ref<string | null> = ref(null)
|
||||
|
||||
function loadWorkouts(payload: TWorkoutsPayload) {
|
||||
store.dispatch(WORKOUTS_STORE.ACTIONS.GET_USER_WORKOUTS, payload)
|
||||
}
|
||||
function reloadWorkouts(queryParam: string, queryValue: string) {
|
||||
const newQuery: LocationQuery = Object.assign({}, route.query)
|
||||
newQuery[queryParam] = queryValue
|
||||
if (queryParam === 'per_page') {
|
||||
newQuery['page'] = '1'
|
||||
}
|
||||
query = getWorkoutsQuery(newQuery)
|
||||
router.push({ path: '/workouts', query })
|
||||
}
|
||||
|
||||
function getWorkoutsQuery(newQuery: LocationQuery): TWorkoutsPayload {
|
||||
query = getQuery(newQuery, orderByList, defaultOrder.order_by, {
|
||||
defaultSort: defaultOrder.order,
|
||||
})
|
||||
Object.keys(newQuery)
|
||||
.filter((k) => workoutsPayloadKeys.includes(k))
|
||||
.map((k) => {
|
||||
if (typeof newQuery[k] === 'string') {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
query[k] = newQuery[k]
|
||||
}
|
||||
})
|
||||
return query
|
||||
}
|
||||
|
||||
function onHover(workoutId: string | null) {
|
||||
hoverWorkoutId.value = workoutId
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.query,
|
||||
async (newQuery) => {
|
||||
query = getWorkoutsQuery(newQuery)
|
||||
loadWorkouts(query)
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
query,
|
||||
hoverWorkoutId,
|
||||
orderByList,
|
||||
pagination,
|
||||
sortList,
|
||||
workouts,
|
||||
capitalize,
|
||||
format,
|
||||
getDateWithTZ,
|
||||
onHover,
|
||||
reloadWorkouts,
|
||||
}
|
||||
},
|
||||
onBeforeMount(() => {
|
||||
loadWorkouts(query)
|
||||
})
|
||||
|
||||
function loadWorkouts(payload: TWorkoutsPayload) {
|
||||
store.dispatch(WORKOUTS_STORE.ACTIONS.GET_USER_WORKOUTS, payload)
|
||||
}
|
||||
function reloadWorkouts(queryParam: string, queryValue: string) {
|
||||
const newQuery: LocationQuery = Object.assign({}, route.query)
|
||||
newQuery[queryParam] = queryValue
|
||||
if (queryParam === 'per_page') {
|
||||
newQuery['page'] = '1'
|
||||
}
|
||||
query = getWorkoutsQuery(newQuery)
|
||||
router.push({ path: '/workouts', query })
|
||||
}
|
||||
|
||||
function getWorkoutsQuery(newQuery: LocationQuery): TWorkoutsPayload {
|
||||
query = getQuery(newQuery, orderByList, defaultOrder.order_by, {
|
||||
defaultSort: defaultOrder.order,
|
||||
})
|
||||
Object.keys(newQuery)
|
||||
.filter((k) => workoutsPayloadKeys.includes(k))
|
||||
.map((k) => {
|
||||
if (typeof newQuery[k] === 'string') {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
query[k] = newQuery[k]
|
||||
}
|
||||
})
|
||||
return query
|
||||
}
|
||||
|
||||
function onHover(workoutId: string | null) {
|
||||
hoverWorkoutId.value = workoutId
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.query,
|
||||
async (newQuery) => {
|
||||
query = getWorkoutsQuery(newQuery)
|
||||
loadWorkouts(query)
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user