[#SIRH-25] Version mobile (#16)
Some checks failed
Auto Tag Develop / tag (push) Has been cancelled
Some checks failed
Auto Tag Develop / tag (push) Has been cancelled
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #16 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #16.
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="h-full overflow-hidden flex flex-col">
|
||||
<div class="flex flex-wrap items-center justify-between gap-4">
|
||||
<h1 class="text-4xl font-bold text-primary-500">Heures</h1>
|
||||
<h1 class="text-2xl font-bold text-primary-500 lg:text-4xl">Heures</h1>
|
||||
</div>
|
||||
|
||||
<HoursToolbar
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="h-full flex flex-col overflow-hidden">
|
||||
<div class="flex flex-wrap items-center justify-between gap-4 pb-8">
|
||||
<h1 class="text-4xl font-bold text-primary-500">Récap. congés</h1>
|
||||
<h1 class="text-2xl font-bold text-primary-500 lg:text-4xl">Récap. congés</h1>
|
||||
<span
|
||||
v-if="cutoffLabel"
|
||||
class="inline-flex items-center gap-2 rounded-full bg-tertiary-500 px-4 py-1 text-sm font-semibold text-primary-500"
|
||||
@@ -25,7 +25,8 @@
|
||||
Aucun employé à afficher.
|
||||
</div>
|
||||
|
||||
<div v-else class="min-h-0 overflow-auto rounded-md bg-white">
|
||||
<!-- Desktop table -->
|
||||
<div v-else class="min-h-0 overflow-auto rounded-md bg-white hidden lg:block">
|
||||
<div
|
||||
:class="`grid ${gridColsClass} gap-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md sticky top-0 z-10`"
|
||||
>
|
||||
@@ -64,6 +65,47 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile cards -->
|
||||
<div v-if="!isLoading && rows.length > 0" class="min-h-0 overflow-auto space-y-3 lg:hidden">
|
||||
<div
|
||||
v-for="row in rows"
|
||||
:key="'m-' + row.employeeId"
|
||||
class="rounded-md border border-primary-500 bg-white p-4"
|
||||
>
|
||||
<div class="mb-3 flex items-center justify-between gap-2">
|
||||
<p class="text-md font-bold text-primary-500 truncate">
|
||||
{{ row.lastName }} {{ row.firstName }}
|
||||
</p>
|
||||
<span
|
||||
v-if="showSiteColumn && row.siteName"
|
||||
class="inline-block shrink-0 rounded-full px-3 py-1 text-sm"
|
||||
:style="{ backgroundColor: row.siteColor || '#ffd7d7', color: '#1a1a1a' }"
|
||||
>
|
||||
{{ row.siteName }}
|
||||
</span>
|
||||
</div>
|
||||
<p v-if="row.contractName" class="mb-3 text-sm text-neutral-600">{{ row.contractName }}</p>
|
||||
<div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-neutral-500">CP N-1</span>
|
||||
<span class="font-bold text-primary-500 tabular-nums">{{ formatNumber(row.cpN1Remaining) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-neutral-500">Samedis</span>
|
||||
<span class="font-bold text-primary-500 tabular-nums">{{ row.acquiredSaturdays }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-neutral-500">CP N</span>
|
||||
<span class="font-bold text-primary-500 tabular-nums">{{ formatNumber(row.cpN) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-neutral-500">RTT</span>
|
||||
<span class="font-bold text-primary-500 tabular-nums">{{ row.rtt }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="h-full flex flex-col overflow-hidden">
|
||||
<div class="flex items-center justify-between pb-6">
|
||||
<h1 class="text-4xl font-bold text-primary-500">Utilisateurs</h1>
|
||||
<h1 class="text-2xl font-bold text-primary-500 lg:text-4xl">Utilisateurs</h1>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
|
||||
class="rounded-lg bg-primary-500 px-3 py-2 text-sm font-semibold text-white hover:bg-secondary-500 lg:px-4 lg:text-md"
|
||||
@click="openCreate"
|
||||
>
|
||||
+ Ajouter un utilisateur
|
||||
+ Ajouter
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,8 @@
|
||||
Aucun utilisateur pour le moment.
|
||||
</div>
|
||||
|
||||
<div v-else class="min-h-0 overflow-auto rounded-md bg-white">
|
||||
<!-- Desktop table -->
|
||||
<div v-else class="min-h-0 overflow-auto rounded-md bg-white hidden lg:block">
|
||||
<div class="grid grid-cols-5 gap-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md sticky top-0 z-10">
|
||||
<span class="text-left">Utilisateur</span>
|
||||
<span class="text-left">Employé</span>
|
||||
@@ -56,6 +57,42 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile cards -->
|
||||
<div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500 lg:hidden">
|
||||
Chargement...
|
||||
</div>
|
||||
<div v-else-if="users.length > 0" class="min-h-0 overflow-auto space-y-3 lg:hidden">
|
||||
<div
|
||||
v-for="user in users"
|
||||
:key="'m-' + user.id"
|
||||
class="rounded-md border border-primary-500 bg-white p-4 cursor-pointer active:bg-tertiary-500"
|
||||
@click="openEdit(user)"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-2 mb-2">
|
||||
<p class="text-md font-bold text-primary-500 truncate">{{ user.username }}</p>
|
||||
<span
|
||||
v-if="user.isLocked"
|
||||
class="shrink-0 inline-block rounded-full bg-red-100 px-3 py-1 text-xs font-semibold text-red-700"
|
||||
>Verrouillé</span>
|
||||
<span
|
||||
v-else
|
||||
class="shrink-0 inline-block rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700"
|
||||
>Actif</span>
|
||||
</div>
|
||||
<div class="space-y-1 text-sm">
|
||||
<p v-if="user.employee" class="text-neutral-600">
|
||||
{{ user.employee.firstName }} {{ user.employee.lastName }}
|
||||
</p>
|
||||
<p class="text-neutral-500">
|
||||
Accès : <span class="font-semibold text-primary-500">{{ getAccessLabel(user) }}</span>
|
||||
</p>
|
||||
<p v-if="getSiteLabels(user) !== '-'" class="text-neutral-500 truncate">
|
||||
Sites : <span class="font-semibold text-primary-500">{{ getSiteLabels(user) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AppDrawer
|
||||
v-model="isDrawerOpen"
|
||||
:title="editingUser ? 'Modifier un utilisateur' : 'Ajouter un utilisateur'"
|
||||
|
||||
Reference in New Issue
Block a user