MALIO-DEV/Inventory
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat: add profile management flow

Browse Source
This commit is contained in:
Matthieu
2025-09-17 23:11:13 +02:00
parent 37c66ac3d6
commit 316dcb6339
27 changed files with 2717 additions and 1556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
app/pages/profiles/index.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<main class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
<div class="w-full max-w-2xl">
<div class="card bg-base-100 shadow-2xl">
<div class="card-body">
<h1 class="text-2xl font-bold mb-2">Choisir un profil</h1>
<p class="text-sm text-base-content/70 mb-6">
Sélectionnez votre profil pour accéder à l'application. La création et la gestion se font via le menu utilisateur.
</p>
<section class="space-y-4">
<header class="flex items-center justify-between">
<h2 class="font-semibold">Profils disponibles</h2>
<button
type="button"
class="btn btn-ghost btn-xs"
@click="refreshProfiles"
:disabled="loadingProfiles"
>
<span v-if="loadingProfiles" class="loading loading-spinner loading-xs"></span>
<span v-else>Rafraîchir</span>
</button>
</header>
<div class="space-y-2 max-h-64 overflow-y-auto" v-if="profiles.length">
<button
v-for="profile in profiles"
:key="profile.id"
type="button"
class="btn btn-outline btn-sm w-full justify-between"
@click="selectProfile(profile.id)"
>
<span>{{ profile.firstName }} {{ profile.lastName }}</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
<p v-else class="text-sm text-base-content/60">Aucun profil enregistré.</p>
</section>
<footer class="mt-6 flex justify-between items-center" v-if="activeProfile">
<div class="text-sm text-base-content/70">
Profil actuel :
<span class="font-semibold">{{ activeProfile.firstName }} {{ activeProfile.lastName }}</span>
</div>
<button type="button" class="btn btn-outline btn-sm" @click="handleLogout">
Déconnexion
</button>
</footer>
</div>
</div>
</div>
</main>
</template>
<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useProfiles } from '#imports'
import { useProfileSession } from '#imports'
const router = useRouter()
const { profiles, loadingProfiles, fetchProfiles } = useProfiles()
const { activeProfile, activateProfile, fetchCurrentProfile, logout } = useProfileSession()
const refreshProfiles = async () => {
await fetchProfiles()
}
const selectProfile = async (profileId) => {
try {
await activateProfile(profileId)
await fetchProfiles()
await router.push('/')
} catch (error) {
console.error('Erreur lors de la sélection du profil', error)
}
}
const handleLogout = async () => {
await logout()
await router.push('/profiles')
}
onMounted(async () => {
await fetchProfiles()
await fetchCurrentProfile()
})
</script>

174
app/pages/profiles/manage.vue Normal file
View File

@@ -0,0 +1,174 @@
<template>
<main class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
<div class="max-w-4xl mx-auto">
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-2xl font-bold">Gestion des profils</h1>
<p class="text-sm text-base-content/70">Sélectionnez, créez ou supprimez des profils.</p>
</div>
<NuxtLink to="/" class="btn btn-ghost btn-sm">Retour</NuxtLink>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<section class="card bg-base-100 shadow-lg">
<div class="card-body space-y-4">
<header class="flex items-center justify-between">
<h2 class="card-title text-lg">Profils existants</h2>
<button type="button" class="btn btn-ghost btn-xs" @click="refresh" :disabled="loadingProfiles">
<span v-if="loadingProfiles" class="loading loading-spinner loading-xs"></span>
<span v-else>Rafraîchir</span>
</button>
</header>
<div class="space-y-2 max-h-80 overflow-y-auto" v-if="profiles.length">
<div
v-for="profile in profiles"
:key="profile.id"
class="flex items-center justify-between rounded-lg border border-base-200 bg-base-100 px-3 py-2"
>
<div>
<p class="font-medium">{{ profile.firstName }} {{ profile.lastName }}</p>
<p class="text-xs text-base-content/60">ID : {{ profile.id }}</p>
</div>
<div class="flex items-center gap-2">
<button
type="button"
class="btn btn-sm"
:class="profile.id === activeProfile?.id ? 'btn-primary' : 'btn-outline'"
@click="select(profile.id)"
>
{{ profile.id === activeProfile?.id ? 'Actif' : 'Activer' }}
</button>
<button
type="button"
class="btn btn-error btn-sm"
@click="remove(profile.id)"
>
<span v-if="deleting === profile.id" class="loading loading-spinner loading-xs"></span>
<span v-else>Supprimer</span>
</button>
</div>
</div>
</div>
<p v-else class="text-sm text-base-content/60">Aucun profil enregistré.</p>
</div>
</section>
<section class="card bg-base-100 shadow-lg">
<div class="card-body space-y-4">
<h2 class="card-title text-lg">Créer un profil</h2>
<form class="space-y-3" @submit.prevent="create">
<div class="form-control">
<label class="label"><span class="label-text">Prénom</span></label>
<input
v-model="createForm.firstName"
type="text"
class="input input-bordered"
placeholder="Prénom"
required
/>
</div>
<div class="form-control">
<label class="label"><span class="label-text">Nom</span></label>
<input
v-model="createForm.lastName"
type="text"
class="input input-bordered"
placeholder="Nom"
required
/>
</div>
<button type="submit" class="btn btn-primary w-full" :disabled="creating">
<span v-if="creating" class="loading loading-spinner loading-sm"></span>
<span v-else>Créer et activer</span>
</button>
</form>
</div>
</section>
</div>
<div class="mt-8 flex items-center justify-between bg-base-100 shadow-lg rounded-lg p-4" v-if="activeProfile">
<div>
<p class="text-sm text-base-content/70">Profil actif :</p>
<p class="font-semibold text-base-content">{{ activeProfile.firstName }} {{ activeProfile.lastName }}</p>
</div>
<button type="button" class="btn btn-outline" @click="handleLogout">
Déconnexion
</button>
</div>
</div>
</main>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useProfiles, useProfileSession } from '#imports'
const router = useRouter()
const { profiles, loadingProfiles, fetchProfiles, createProfile, deleteProfile } = useProfiles()
const { activeProfile, activateProfile, fetchCurrentProfile, logout } = useProfileSession()
const createForm = reactive({
firstName: '',
lastName: '',
})
const creating = ref(false)
const deleting = ref(null)
const refresh = async () => {
await fetchProfiles()
await fetchCurrentProfile()
}
const select = async (profileId) => {
try {
await activateProfile(profileId)
await refresh()
} catch (error) {
console.error('Erreur lors de la sélection du profil', error)
}
}
const create = async () => {
creating.value = true
try {
const profile = await createProfile({
firstName: createForm.firstName,
lastName: createForm.lastName,
})
createForm.firstName = ''
createForm.lastName = ''
await activateProfile(profile.id)
await refresh()
} catch (error) {
console.error('Erreur lors de la création du profil', error)
} finally {
creating.value = false
}
}
const remove = async (profileId) => {
if (!confirm('Supprimer ce profil ?')) return
deleting.value = profileId
try {
await deleteProfile(profileId)
await refresh()
} catch (error) {
console.error('Erreur lors de la suppression du profil', error)
} finally {
deleting.value = null
}
}
const handleLogout = async () => {
await logout()
await refresh()
await router.push('/profiles')
}
onMounted(async () => {
await refresh()
})
</script>