feat : Ajout d'un onglet Observation sur la page employé + fonctionnalité de verrouillage utilisateur
This commit is contained in:
@@ -84,6 +84,16 @@
|
||||
<Icon name="mdi:money-100" size="24" class="align-self"/>
|
||||
Prime
|
||||
</button>
|
||||
<button
|
||||
class="pb-2 border-b-2 flex items-center gap-3"
|
||||
:class="activeTab === 'observation'
|
||||
? 'border-primary-500 text-primary-500'
|
||||
: 'border-transparent text-primary-500/50 hover:text-primary-500'"
|
||||
@click="activeTab = 'observation'"
|
||||
>
|
||||
<Icon name="mdi:note-text-outline" size="24" class="align-self"/>
|
||||
Observation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-h-0 flex-1">
|
||||
@@ -173,6 +183,19 @@
|
||||
@delete="submitDeleteBonus"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="activeTab === 'observation'" class="h-full">
|
||||
<div v-if="isObservationLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
|
||||
Chargement...
|
||||
</div>
|
||||
<EmployeesObservationTab
|
||||
v-else
|
||||
class="h-full"
|
||||
:observations="observations"
|
||||
@create="submitCreateObservation"
|
||||
@update="submitUpdateObservation"
|
||||
@delete="submitDeleteObservation"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -254,7 +277,12 @@ const {
|
||||
isBonusLoading,
|
||||
submitCreateBonus,
|
||||
submitUpdateBonus,
|
||||
submitDeleteBonus
|
||||
submitDeleteBonus,
|
||||
observations,
|
||||
isObservationLoading,
|
||||
submitCreateObservation,
|
||||
submitUpdateObservation,
|
||||
submitDeleteObservation
|
||||
} = useEmployeeDetailPage()
|
||||
|
||||
const handleYearlyHoursPrint = async (year: number) => {
|
||||
|
||||
@@ -19,11 +19,12 @@
|
||||
</div>
|
||||
|
||||
<div v-else class="min-h-0 overflow-auto rounded-md bg-white">
|
||||
<div class="grid grid-cols-4 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">
|
||||
<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>
|
||||
<span class="text-left">Accès</span>
|
||||
<span class="text-left">Sites</span>
|
||||
<span class="text-left">Statut</span>
|
||||
</div>
|
||||
<div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
|
||||
Chargement...
|
||||
@@ -32,7 +33,7 @@
|
||||
<div
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
class="grid grid-cols-4 items-center gap-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
|
||||
class="grid grid-cols-5 items-center gap-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
|
||||
@click="openEdit(user)"
|
||||
>
|
||||
<span>{{ user.username }}</span>
|
||||
@@ -41,6 +42,16 @@
|
||||
</span>
|
||||
<span>{{ getAccessLabel(user) }}</span>
|
||||
<span>{{ getSiteLabels(user) }}</span>
|
||||
<span>
|
||||
<span
|
||||
v-if="user.isLocked"
|
||||
class="inline-block rounded-full bg-red-100 px-3 py-1 text-sm font-semibold text-red-700"
|
||||
>Verrouillé</span>
|
||||
<span
|
||||
v-else
|
||||
class="inline-block rounded-full bg-green-100 px-3 py-1 text-sm font-semibold text-green-700"
|
||||
>Actif</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -164,6 +175,20 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
v-model="form.isLocked"
|
||||
type="checkbox"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
<span class="text-md font-semibold text-neutral-700">Verrouiller le compte</span>
|
||||
</label>
|
||||
<p class="mt-1 text-sm text-neutral-500">
|
||||
Un compte verrouillé ne peut plus se connecter.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
@@ -207,7 +232,8 @@ const form = reactive({
|
||||
password: '',
|
||||
accessMode: 'admin' as 'admin' | 'self' | 'sites',
|
||||
employeeId: '' as number | '',
|
||||
siteIds: [] as number[]
|
||||
siteIds: [] as number[],
|
||||
isLocked: false
|
||||
})
|
||||
|
||||
const validationTouched = reactive({
|
||||
@@ -318,6 +344,7 @@ const resetForm = () => {
|
||||
form.employeeId = ''
|
||||
form.accessMode = 'admin'
|
||||
form.siteIds = []
|
||||
form.isLocked = false
|
||||
editingUser.value = null
|
||||
validationTouched.username = false
|
||||
validationTouched.password = false
|
||||
@@ -345,6 +372,7 @@ const openEdit = (user: User) => {
|
||||
}
|
||||
|
||||
form.employeeId = user.employee?.id ?? ''
|
||||
form.isLocked = user.isLocked
|
||||
|
||||
const siteRoles = userAccessById.value.get(user.id) ?? []
|
||||
form.siteIds = siteRoles.map((role) => role.site?.id).filter((id): id is number => typeof id === 'number')
|
||||
@@ -398,7 +426,8 @@ const handleSubmit = async () => {
|
||||
username: form.username,
|
||||
plainPassword: form.password.trim() ? form.password : undefined,
|
||||
roles,
|
||||
employeeId
|
||||
employeeId,
|
||||
isLocked: form.isLocked
|
||||
})
|
||||
|
||||
const existingSiteRoles = userAccessById.value.get(editingUser.value.id) ?? []
|
||||
@@ -422,7 +451,8 @@ const handleSubmit = async () => {
|
||||
username: form.username,
|
||||
plainPassword: form.password,
|
||||
roles,
|
||||
employeeId
|
||||
employeeId,
|
||||
isLocked: form.isLocked
|
||||
})
|
||||
|
||||
if (form.accessMode === 'sites' && form.siteIds.length > 0) {
|
||||
|
||||
Reference in New Issue
Block a user