refactor: rework async UserInfo

This commit is contained in:
axolotle 2024-08-13 00:33:38 +02:00
parent 66bf3a5560
commit 9dcdc654b9

View file

@ -4,17 +4,15 @@ import { useRouter } from 'vue-router'
import api from '@/api' import api from '@/api'
import { useUsersAndGroups } from '@/composables/data' import { useUsersAndGroups } from '@/composables/data'
import { useInitialQueries } from '@/composables/useInitialQueries'
const props = defineProps<{ name: string }>() const props = defineProps<{ name: string }>()
const router = useRouter() const router = useRouter()
const { loading } = useInitialQueries([
{ await api.get({
uri: `users/${props.name}`, uri: `users/${props.name}`,
cachePath: `userDetails.${props.name}`, cachePath: `userDetails.${props.name}`,
}, })
])
const { user } = useUsersAndGroups(() => props.name) const { user } = useUsersAndGroups(() => props.name)
const purge = ref(false) const purge = ref(false)
@ -35,8 +33,8 @@ function deleteUser() {
</script> </script>
<template> <template>
<ViewBase :loading="loading" skeleton="CardInfoSkeleton"> <div>
<YCard v-if="user" :title="user.fullname" icon="user"> <YCard :title="user.fullname" icon="user">
<div class="d-flex align-items-center flex-column flex-md-row"> <div class="d-flex align-items-center flex-column flex-md-row">
<YIcon iname="user" class="fa-fw" /> <YIcon iname="user" class="fa-fw" />
@ -45,7 +43,7 @@ function deleteUser() {
<BCol> <BCol>
<strong>{{ $t('user_username') }}</strong> <strong>{{ $t('user_username') }}</strong>
</BCol> </BCol>
<BCol>{{ user.username }}</BCol> <BCol>{{ name }}</BCol>
</BRow> </BRow>
<BRow> <BRow>
@ -99,11 +97,11 @@ function deleteUser() {
<template #buttons> <template #buttons>
<BButton <BButton
:to="{ name: 'user-edit', params: { user } }" :to="{ name: 'user-edit', params: { name } }"
:variant="user ? 'info' : 'dark'" :variant="user ? 'info' : 'dark'"
> >
<YIcon iname="edit" /> <YIcon iname="edit" />
{{ user ? $t('user_username_edit', { name: user.username }) : '' }} {{ user ? $t('user_username_edit', { name }) : '' }}
</BButton> </BButton>
<BButton v-b-modal.delete-modal :variant="user ? 'danger' : 'dark'"> <BButton v-b-modal.delete-modal :variant="user ? 'danger' : 'dark'">
@ -116,14 +114,14 @@ function deleteUser() {
<BModal <BModal
v-if="user" v-if="user"
id="delete-modal" id="delete-modal"
:title="$t('confirm_delete', { name: user.username })" :title="$t('confirm_delete', { name })"
@ok="deleteUser" @ok="deleteUser"
header-bg-variant="warning" header-bg-variant="warning"
header-class="text-black" header-class="text-black"
> >
<BFormGroup> <BFormGroup>
<BFormCheckbox v-model="purge"> <BFormCheckbox v-model="purge">
{{ $t('purge_user_data_checkbox', { name: user.username }) }} {{ $t('purge_user_data_checkbox', { name }) }}
</BFormCheckbox> </BFormCheckbox>
<template #description> <template #description>
@ -134,7 +132,7 @@ function deleteUser() {
</template> </template>
</BFormGroup> </BFormGroup>
</BModal> </BModal>
</ViewBase> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>