126 lines
3.2 KiB
Vue
126 lines
3.2 KiB
Vue
<template>
|
|
<form @submit.prevent="validate">
|
|
<div
|
|
class="flex items-center justify-between gap-10">
|
|
<h1 class="text-3xl font-bold uppercase">
|
|
{{ userId ? "Modifications de l'utilisateur" : "Ajout d'un utilisateur" }}
|
|
</h1>
|
|
<button
|
|
class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
|
|
type="submit"
|
|
>
|
|
{{ userId ? 'Sauvegarder' : 'Ajouter' }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid gap-y-16 gap-x-40 mb-16">
|
|
<UiTextInput
|
|
id="user-name"
|
|
v-model="form.username"
|
|
label="Nom de l'utilisateur"
|
|
/>
|
|
|
|
<UiSelect
|
|
id="user-role"
|
|
v-model="form.role"
|
|
label="Rôle de l'utilisateur"
|
|
:options="ROLE"
|
|
/>
|
|
<UiTextInput
|
|
id="user-password"
|
|
v-model="form.password"
|
|
label="Mot de passe"
|
|
type="password"
|
|
|
|
/>
|
|
|
|
</div>
|
|
</form>
|
|
</template>
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'admin'
|
|
})
|
|
|
|
import {computed, reactive, ref, watch} from 'vue'
|
|
import {ROLE} from '~/utils/constants'
|
|
import {createUser, updateUser, getUser} from '~/services/auth'
|
|
import type {UserData, UserFormData} from '~/services/dto/user-data'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const userId = computed(() => resolveUserId(route.params.id))
|
|
const isLoading = ref(false)
|
|
const isHydrating = ref(false)
|
|
|
|
const resolveUserId = (param: unknown) => {
|
|
const idStr = Array.isArray(param) ? param[0] : param
|
|
if (!idStr) {
|
|
return null
|
|
}
|
|
const id = Number(idStr)
|
|
return Number.isFinite(id) ? id : null
|
|
}
|
|
|
|
|
|
const form = reactive<UserFormData>({
|
|
username: '',
|
|
password: '',
|
|
role: ''
|
|
})
|
|
|
|
const hydrateFromUser = (user: UserData | null) => {
|
|
if (!user) {
|
|
return
|
|
}
|
|
isHydrating.value = true
|
|
form.username = user.username ?? ''
|
|
const roles = user.roles ?? []
|
|
const hasAdmin = roles.includes("ROLE_ADMIN")
|
|
form.role = hasAdmin ? "ROLE_ADMIN" : "ROLE_USER"
|
|
form.password = ''
|
|
isHydrating.value = false
|
|
}
|
|
|
|
watch(
|
|
() => userId.value,
|
|
async (id) => {
|
|
if (id === null) {
|
|
return
|
|
}
|
|
isLoading.value = true
|
|
try {
|
|
const user = await getUser(id)
|
|
hydrateFromUser(user)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
},
|
|
{immediate: true}
|
|
)
|
|
|
|
async function validate() {
|
|
|
|
const normalizedUsername = form.username.trim()
|
|
const normalizedRole = form.role.trim()
|
|
const normalizedPassword = form.password.trim()
|
|
|
|
const basePayload = {
|
|
username: normalizedUsername,
|
|
roles: normalizedRole ? [normalizedRole] : undefined,
|
|
password: normalizedPassword || undefined
|
|
}
|
|
|
|
if (userId.value) {
|
|
await updateUser(userId.value, basePayload)
|
|
await router.push(`/admin/user/list/`)
|
|
return
|
|
}
|
|
|
|
const created = await createUser(basePayload)
|
|
if (created) {
|
|
await router.push(`/admin/user/list/`)
|
|
}
|
|
}
|
|
</script>
|