82 lines
3.4 KiB
Vue
82 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import Card from 'primevue/card';
|
|
import InputText from 'primevue/inputtext';
|
|
import type { AssignmentEmployeeOption } from '../../types/fixedAssetAssignment';
|
|
|
|
interface Props {
|
|
employees: AssignmentEmployeeOption[];
|
|
searchTerm: string;
|
|
selectedEmployeeId: string;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:searchTerm', value: string): void;
|
|
(e: 'update:selectedEmployeeId', value: string): void;
|
|
}>();
|
|
|
|
const visibleEmployees = computed(() => {
|
|
const query = props.searchTerm.trim().toLowerCase();
|
|
if (!query) return props.employees;
|
|
|
|
return props.employees.filter((employee) =>
|
|
employee.fullName.toLowerCase().includes(query)
|
|
|| employee.id.toLowerCase().includes(query)
|
|
|| employee.department.toLowerCase().includes(query)
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Card class="shadow-sm">
|
|
<template #title>
|
|
<div class="flex items-center gap-2 text-xl">
|
|
<i class="pi pi-users text-primary"></i>
|
|
<span>Seleccionar Colaborador</span>
|
|
</div>
|
|
</template>
|
|
<template #content>
|
|
<div class="space-y-4">
|
|
<InputText
|
|
:model-value="searchTerm"
|
|
class="w-full"
|
|
placeholder="Buscar por nombre, ID o departamento..."
|
|
@update:model-value="emit('update:searchTerm', $event)"
|
|
/>
|
|
|
|
<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
|
|
<button
|
|
v-for="employee in visibleEmployees"
|
|
:key="employee.id"
|
|
type="button"
|
|
class="rounded-xl border p-4 text-left transition-all"
|
|
:class="selectedEmployeeId === employee.id
|
|
? 'border-primary bg-primary-50 dark:bg-primary-950/20'
|
|
: 'border-surface-200 hover:border-primary/50 dark:border-surface-700'"
|
|
@click="emit('update:selectedEmployeeId', employee.id)"
|
|
>
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="flex items-start gap-3">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-sm font-semibold text-white">
|
|
{{ employee.initials }}
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-surface-900 dark:text-surface-0">{{ employee.fullName }}</p>
|
|
<p class="text-sm text-surface-600 dark:text-surface-300">{{ employee.role }}</p>
|
|
<p class="text-xs text-surface-500 dark:text-surface-400">{{ employee.department }}</p>
|
|
</div>
|
|
</div>
|
|
<i
|
|
class="pi pi-check-circle text-primary"
|
|
:class="selectedEmployeeId === employee.id ? 'opacity-100' : 'opacity-0'"
|
|
/>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Card>
|
|
</template>
|