MALIO-DEV/Ferme
4
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 80 Wiki Activity

feat : creation d'une page d'aministration pour la ajout / modification d'utlisateur

Browse Source
This commit is contained in:
Kevin Boudet
2026-02-09 13:59:14 +01:00
parent 311f523647
commit ca1910b1d1
13 changed files with 339 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
frontend/components/user/user-form.vue Normal file
View File

@@ -0,0 +1,125 @@
<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="[
{ value: ROLE.ROLE_USER, label: 'User' },
{ value: ROLE.ROLE_ADMIN, label: 'Admin' },
]"
/>
<UiTextInput
id="user-password"
v-model="form.password"
label="Mot de passe"
type="password"
/>
</div>
</form>
</template>
<script setup lang="ts">
import {computed, reactive, ref, watch} from 'vue'
import {ROLE} from '~/utils/constants'
import {createUser, updateUser, getUser} from '~/services/auth'
import type {UserData} 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({
username: '',
role: '',
password: ''
})
const hydrateFromUser = (user: UserData | null) => {
if (!user) {
return
}
isHydrating.value = true
form.username = user.username ?? ''
const roles = user.roles ?? []
const hasAdmin = roles.includes(ROLE.ROLE_ADMIN)
form.role = hasAdmin ? ROLE.ROLE_ADMIN : ROLE.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>

6
frontend/i18n/locales/fr.json
View File

@@ -57,7 +57,9 @@
"auth": {
"login": "Identifiants invalides.",
"users": "Impossible de récupérer les utilisateurs.",
"logout": "Impossible de se déconnecter."
"logout": "Impossible de se déconnecter.",
"update": "Impossible de mettre à jour l'utilisateur.",
"create": "Impossible de créer l'utilisateur."
}
},
"success": {
@@ -65,6 +67,8 @@
"update": "Réception mise à jour avec succès."
},
"auth": {
"update": "Utilisateur mis à jour avec succès.",
"create": "Utilisateur créé avec succès.",
"login": "Connexion réussie.",
"logout": "Déconnexion réussie."
}

5
frontend/layouts/admin.vue
View File

@@ -28,7 +28,7 @@
<!-- Liste des liens à ajouter ci-dessous -->
<!--Button pour afficher le component admin-users -->
<NuxtLink
to="/admin/user-list"
to="/admin/user/list"
class="block px-4 py-2 rounded hover:bg-primary-600 transition"
>
Utilisateurs
@@ -58,8 +58,9 @@
<script setup lang="ts">
import auth from "~/layouts/auth.vue";
import {useAuthStore} from '~/stores/auth'
const auth = useAuthStore()
const { version } = useAppVersion()
const handleLogout = async () => {
try {

9
frontend/layouts/default.vue
View File

@@ -20,7 +20,10 @@
Accueil
</a>
</NuxtLink>
<NuxtLink to="/admin/dashboard" custom v-slot="{ href, navigate, isActive }">
<NuxtLink
to="/admin/dashboard" custom v-slot="{ href, navigate, isActive }"
v-if="auth.isAdmin"
>
<a
:href="href"
@click="navigate"
@@ -107,12 +110,12 @@
</template>
<script setup lang="ts">
import { useAuthStore } from '~/stores/auth'
import {useAuthStore} from '~/stores/auth'
const route = useRoute()
const auth = useAuthStore()
const isMenuOpen = ref(false)
const { version } = useAppVersion()
const {version} = useAppVersion()
const closeMenu = () => {
isMenuOpen.value = false

6
frontend/pages/admin/dashboard.vue
View File

@@ -1,13 +1,9 @@
<template>
<admin-users v-if="activeCode === 'users'" />
<AdminUserForm/>
</template>
<script setup lang="ts">
definePageMeta({
layout: 'admin'
})
const route = useRoute()
const activeCode = computed(() => (route.query.code as string))
</script>

8
frontend/pages/admin/user/[[id]].vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<UserForm/>
</template>
<script setup lang="ts">
definePageMeta({
layout: 'admin'
})
</script>

35
frontend/pages/admin/user-list.vue → frontend/pages/admin/user/list.vue
View File

@@ -1,12 +1,13 @@
<template>
<div class="flex items-center justify-between gap-10">
<h1 class="text-3xl font-bold uppercase">Utilisateurs</h1>
<button
class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
@click="null"
<div class="flex items-center justify-between">
<h1 class="text-3xl font-bold uppercase">Liste des utilisateurs</h1>
<NuxtLink
class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
@click="router.push('/admin/user/')"
>
Ajouter
</button>
</NuxtLink>
</div>
<div>
@@ -14,39 +15,27 @@
<div class="grid grid-cols-3 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
<div>Username</div>
<div>Role</div>
<div>Action</div>
</div>
<div
v-for="user in userList"
:key="user.id"
class="grid grid-cols-3 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200 items-center"
class="grid grid-cols-3 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t items-center"
role="button"
tabindex="0"
@click="goToUser(user.id)"
>
<div>
{{ user.username}}
{{ user.username }}
</div>
<div>
{{ user.roles?.join(', ') || ' ---' }}
</div>
<div>
<div class="p-4">
<button
class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
@click="null"
>
Modifier
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: 'admin'
@@ -56,7 +45,11 @@ import type {UserData} from "~/services/dto/user-data";
import {getUsers} from "~/services/auth";
const userList = ref<UserData[]>([])
const router = useRouter()
const goToUser = (id: number) => {
router.push(`/admin/user/${id}`)
}
onMounted(async () => {
userList.value = await getUsers()

23
frontend/services/auth.ts
View File

@@ -1,5 +1,6 @@
import { useApi } from '~/composables/useApi'
import type { UserData } from '~/services/dto/user-data'
import type {UserPayload} from "~/services/dto/user-data";
export async function getUsers() {
const api = useApi()
@@ -13,6 +14,28 @@ export async function getUsers() {
return data['hydra:member'] ?? []
}
export async function getUser(id: number) {
const api = useApi()
return api.get<UserData>(`users/${id}`, {}, {
toastErrorKey: 'errors.auth.user'
})
}
export async function createUser(payload: UserPayload = {}) {
const api = useApi()
return api.post<UserData>('users', payload, {
toastErrorKey: 'errors.auth.create',
toastSuccessKey : 'success.auth.create'
})
}
export async function updateUser(id : number, playload: UserPayload = {}){
const api = useApi()
return api.patch<UserData>(`users/${id}`, playload, {
toastErrorKey: 'errors.auth.update',
toastSuccessKey: 'success.auth.update'
})
}
export async function getCurrentUser() {
const api = useApi()
return api.get<UserData>('me', {}, {

6
frontend/services/dto/user-data.ts
View File

@@ -1,5 +1,11 @@
export interface UserData {
id: number
username: string
roles: string[]
}
export type UserPayload = {
username?: string
password?: string
roles?: string[]
}

27
frontend/stores/auth.ts
View File

@@ -1,6 +1,8 @@
import { defineStore } from 'pinia'
import type { UserData } from '~/services/dto/user-data'
import { getCurrentUser, login, logout } from '~/services/auth'
import {defineStore} from 'pinia'
import type {UserData} from '~/services/dto/user-data'
import {getCurrentUser, createUser, login, logout} from '~/services/auth'
import type {UserPayload} from "~/services/dto/user-data";
import {ROLE} from '~/utils/constants'
export const useAuthStore = defineStore('auth', {
state: () => ({
@@ -9,7 +11,8 @@ export const useAuthStore = defineStore('auth', {
checked: false
}),
getters: {
isAuthenticated: (state) => Boolean(state.user)
isAuthenticated: (state) => Boolean(state.user),
isAdmin: (state) => Boolean(state.user?.roles?.includes(ROLE.ROLE_ADMIN))
},
actions: {
clearSession() {
@@ -46,6 +49,20 @@ export const useAuthStore = defineStore('auth', {
this.isLoading = false
}
},
async createUser(payload: UserPayload = {}) {
this.isLoading = true
const result = await createUser(payload).finally(() => {
this.isLoading = false
})
return result
},
async updateUser(id: number, payload: UserPayload) {
this.isLoading = true
const result = await createUser(payload).finally(() => {
this.isLoading = false
})
return result
},
async logout() {
this.isLoading = true
@@ -58,6 +75,6 @@ export const useAuthStore = defineStore('auth', {
this.checked = true
this.isLoading = false
}
}
},
}
})

4
frontend/utils/constants.ts
View File

@@ -8,6 +8,10 @@ export const MERCHANDISE_TYPE_CODES = {
AUTRES: 'AUTRES'
} as const
export const ROLE = {
ROLE_ADMIN : 'ROLE_ADMIN',
ROLE_USER : 'ROLE_USER'
}
export const SUPLLIER_CODE = {
LIOT: 'LIOT'
}

29
src/Entity/User.php
View File

@@ -7,7 +7,10 @@ namespace App\Entity;
use ApiPlatform\Metadata\ApiResource;
use ApiPlatform\Metadata\Get;
use ApiPlatform\Metadata\GetCollection;
use ApiPlatform\Metadata\Patch;
use ApiPlatform\Metadata\Post;
use App\State\MeProvider;
use App\State\UserPasswordProcessor;
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface;
use Symfony\Component\Security\Core\User\UserInterface;
@@ -28,10 +31,27 @@ use Symfony\Component\Serializer\Attribute\Groups;
normalizationContext: ['groups' => ['user:read']],
security: "is_granted('ROLE_USER')"
),
new GetCollection(
new Post(
normalizationContext: ['groups' => ['user:read']],
denormalizationContext: ['groups' => ['user:write']],
security: "is_granted('ROLE_ADMIN')",
processor: UserPasswordProcessor::class
),
new Patch(
normalizationContext: ['groups' => ['user:read']],
denormalizationContext: ['groups' => ['user:write']],
security: "is_granted('ROLE_ADMIN')",
processor: UserPasswordProcessor::class
),
new GetCollection(
normalizationContext: ['groups' => ['user-login:read']],
security: "is_granted('PUBLIC_ACCESS')"
),
new GetCollection(
uriTemplate: '/admin/users',
normalizationContext: ['groups' => ['user:read']],
security: "is_granted('ROLE_ADMIN')"
),
],
normalizationContext: ['groups' => ['user:read']],
paginationEnabled: false
@@ -41,18 +61,19 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
#[ORM\Id]
#[ORM\GeneratedValue]
#[ORM\Column(type: 'integer')]
#[Groups(['user:read', 'reception:read'])]
#[Groups(['user:read', 'user-login:read', 'reception:read'])]
private ?int $id = null;
#[ORM\Column(length: 180, unique: true)]
#[Groups(['user:read', 'reception:read'])]
#[Groups(['user:read', 'user:write', 'user-login:read', 'reception:read'])]
private string $username = '';
#[ORM\Column(type: 'json')]
#[Groups(['user:read'])]
#[Groups(['user:write', 'user:read'])]
private array $roles = [];
#[ORM\Column]
#[Groups(['user:write'])]
private string $password = '';
public function getId(): ?int

40
src/State/UserPasswordProcessor.php Normal file
View File

@@ -0,0 +1,40 @@
<?php
declare(strict_types=1);
namespace App\State;
use ApiPlatform\Metadata\Operation;
use ApiPlatform\State\ProcessorInterface;
use App\Entity\User;
use Symfony\Component\DependencyInjection\Attribute\Autowire;
use Symfony\Component\PasswordHasher\Hasher\UserPasswordHasherInterface;
final class UserPasswordProcessor implements ProcessorInterface
{
public function __construct(
private readonly UserPasswordHasherInterface $hasher,
#[Autowire(service: 'api_platform.doctrine.orm.state.persist_processor')]
private readonly ProcessorInterface $persistProcessor
) {}
public function process(mixed $data, Operation $operation, array $uriVariables = [], array $context = []): mixed
{
if ($data instanceof User) {
$plain = $data->getPassword();
if ('' !== $plain) {
$data->setPassword($this->hasher->hashPassword(
$data,
$plain
));
}
}
return $this->persistProcessor->process(
$data,
$operation,
$uriVariables,
$context
);
}
}