modificado uso de CORS en la api, ahora acepta localhost y planilla.interno.com

2025-05-30 10:17:41 -06:00
parent 4690197ca4
commit 3d1bf3286a
4 changed files with 164 additions and 144 deletions
--- a/ui/src/views/empleados/EmpleadosIndex.vue
+++ b/ui/src/views/empleados/EmpleadosIndex.vue
@@ -1,5 +1,6 @@
 <template>
  <div class="p-6 bg-gray-50 min-h-screen">
+    <!-- … encabezado … -->
    <header class="mb-8">
      <div class="flex justify-between items-center">
        <h1 class="text-4xl font-bold text-gray-800">Gestión de Empleados</h1>
@@ -7,6 +8,7 @@
          @click="goToCreateEmployee"
          class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-150 ease-in-out"
        >
+          <!-- ícono ➕ -->
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
          </svg>
@@ -16,53 +18,56 @@
      <p class="mt-2 text-gray-600">Visualiza, crea y gestiona los empleados de la organización.</p>
    </header>

+    <!-- selector de vista -->
    <div class="mb-6 flex justify-end items-center space-x-3">
      <span class="text-sm font-medium text-gray-700">Cambiar Vista:</span>
      <button
        @click="currentView = 'card'"
-        :class="[
-          'px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
-          currentView === 'card'
-            ? 'bg-blue-500 text-white shadow-sm focus:ring-blue-400'
-            : 'bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400',
-        ]"
+        :class="btnClass('card')"
      >
        Tarjetas
      </button>
      <button
        @click="currentView = 'table'"
-        :class="[
-          'px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
-          currentView === 'table'
-            ? 'bg-blue-500 text-white shadow-sm focus:ring-blue-400'
-            : 'bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400',
-        ]"
+        :class="btnClass('table')"
      >
        Tabla
      </button>
    </div>

+    <!-- contenido -->
    <div>
      <div v-if="loading" class="text-center py-10">
        <p class="text-gray-500 text-xl">Cargando empleados...</p>
-        <!-- You can add a spinner here -->
      </div>
+
      <div v-else-if="error" class="text-center py-10">
        <p class="text-red-500 text-xl">Error al cargar los empleados: {{ error }}</p>
      </div>
+
      <div v-else>
-        <!-- Card View -->
-        <div v-if="currentView === 'card'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-          <CardEmpleado v-for="employee in employees" :key="employee.id" :employee="employee" />
+        <!-- vista de tarjetas -->
+        <div
+          v-if="currentView === 'card'"
+          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
+        >
+          <CardEmpleado
+            v-for="employee in employees"
+            :key="employee.id"
+            :employee="employee"
+          />
          <div v-if="employees.length === 0" class="col-span-full text-center py-10">
            <p class="text-gray-500 text-xl">No hay empleados para mostrar en la vista de tarjetas.</p>
          </div>
        </div>

-        <!-- Table View -->
+        <!-- vista de tabla -->
        <div v-if="currentView === 'table'">
          <TablaEmpleados :employees="employees" />
-           <div v-if="employees.length === 0" class="text-center py-10 bg-white shadow-md rounded-lg mt-4">
+          <div
+            v-if="employees.length === 0"
+            class="text-center py-10 bg-white shadow-md rounded-lg mt-4"
+          >
            <p class="text-gray-500 text-xl">No hay empleados para mostrar en la vista de tabla.</p>
          </div>
        </div>
@@ -72,137 +77,59 @@
 </template>

 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import CardEmpleado from '@/components/empleados/cardEmpleado.vue' // Adjusted path
-import TablaEmpleados from '@/components/empleados/tablaEmpleados.vue' // Adjusted path
+import { ref, onMounted, computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useRouter } from 'vue-router';

-// Define the structure of the employee object
-interface Employee {
-  id: string | number
-  name: string
-  cedula: number
-  avatar_url?: string
-  telefono?: string
-  ubicacion: string
-  idciat?: string
-  grupo_estudio?: string
-  empleado: boolean // To ensure we are dealing with employees
-}
+import CardEmpleado   from '@/components/empleados/cardEmpleado.vue';
+import TablaEmpleados from '@/components/empleados/tablaEmpleados.vue';
+import { useEmpleadosStore } from '@/stores/useEmpleados.js'; // ruta según tu proyecto

-const router = useRouter()
-const currentView = ref<'card' | 'table'>('card') // Default view
-const employees = ref<Employee[]>([])
-const loading = ref(true)
-const error = ref<string | null>(null)
+// --- refs locales ---
+const router       = useRouter();
+const currentView  = ref<'card' | 'table'>('card');
+const loading      = ref(true);
+const error        = ref<string | null>(null);

-// Mock data for employees - replace with actual API call
-const mockEmployees: Employee[] = [
-  {
-    id: '1',
-    name: 'Ana García',
-    cedula: 123456789,
-    avatar_url: 'https://randomuser.me/api/portraits/women/60.jpg',
-    telefono: '0991234567',
-    ubicacion: 'Oficina Central',
-    idciat: 'AG001',
-    grupo_estudio: 'Desarrollo Frontend',
-    empleado: true,
-  },
-  {
-    id: '2',
-    name: 'Carlos Rodriguez',
-    cedula: 987654321,
-    avatar_url: 'https://randomuser.me/api/portraits/men/45.jpg',
-    telefono: '0987654321',
-    ubicacion: 'Sucursal Norte',
-    idciat: 'CR002',
-    grupo_estudio: 'Backend Services',
-    empleado: true,
-  },
-  {
-    id: '3',
-    name: 'Luisa Martinez',
-    cedula: 112233445,
-    // avatar_url: '', // Test fallback avatar
-    telefono: '0976543210',
-    ubicacion: 'Remoto',
-    idciat: 'LM003',
-    // grupo_estudio: '', // Test missing optional field
-    empleado: true,
-  },
-    {
-    id: '4',
-    name: 'Jorge Herrera',
-    cedula: 223344556,
-    avatar_url: 'https://randomuser.me/api/portraits/men/50.jpg',
-    telefono: '0965432109',
-    ubicacion: 'Oficina Central',
-    idciat: 'JH004',
-    grupo_estudio: 'QA Team',
-    empleado: true,
-  },
+// --- store ---
+const empleadosStore     = useEmpleadosStore();
+const { empleados }      = storeToRefs(empleadosStore);
+
+// alias para plantilla
+const employees = empleados;
+
+// --- helpers ---
+const btnClass = (view: 'card' | 'table') => [
+  'px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
+  currentView.value === view
+    ? 'bg-blue-500 text-white shadow-sm focus:ring-blue-400'
+    : 'bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400',
 ];

+// --- fetch inicial ---
 const fetchEmployees = async () => {
-  loading.value = true
-  error.value = null
+  loading.value = true;
+  error.value   = null;
  try {
-    // Simulate API call delay
-    await new Promise(resolve => setTimeout(resolve, 1000));
-
-    // In a real application, you would fetch from your API:
-    // const response = await fetch('/api/clientes?empleado=true');
-    // if (!response.ok) {
-    //   throw new Error(`HTTP error! status: ${response.status}`);
-    // }
-    // const data = await response.json();
-    // employees.value = data.filter((cliente: Employee) => cliente.empleado);
-    
-    // Using mock data for now
-    employees.value = mockEmployees.filter(e => e.empleado);
-
+    await empleadosStore.fetchEmpleados();
  } catch (e) {
-    console.error("Failed to fetch employees:", e);
-    if (e instanceof Error) {
-      error.value = e.message;
-    } else {
-      error.value = "Ocurrió un error desconocido."
-    }
-    employees.value = []; // Clear employees on error or set to empty if preferred
+    console.error('Error al traer empleados:', e);
+    error.value = e instanceof Error ? e.message : 'Ocurrió un error desconocido.';
  } finally {
-    loading.value = false
+    loading.value = false;
  }
-}
+};

-onMounted(() => {
-  fetchEmployees()
-})
+onMounted(fetchEmployees);

-const goToCreateEmployee = () => {
-  router.push({ name: 'empleados-new' }); 
-}
+// --- navegación ---
+const goToCreateEmployee = () => router.push({ name: 'empleados-new' });
 </script>

 <style scoped>
-/* Additional styling for the index page */
-.min-h-screen {
-  min-height: calc(100vh - var(--navbar-height, 0px)); /* Adjust if you have a fixed navbar */
-}
-
-/* Styling for active/inactive toggle buttons */
-button.focus\:ring-blue-400:focus { /* More specific focus for blue buttons */
-  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5); /* Tailwind's blue-400 with 50% opacity */
-}
-button.focus\:ring-gray-400:focus { /* More specific focus for gray buttons */
-  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.5); /* Tailwind's gray-400 with 50% opacity */
-}
-
-/* Transition for views, if desired (can be more complex) */
-.view-enter-active, .view-leave-active {
-  transition: opacity 0.3s ease;
-}
-.view-enter-from, .view-leave-to {
-  opacity: 0;
-}
+.min-h-screen { min-height: calc(100vh - var(--navbar-height, 0px)); }
+button.focus\:ring-blue-400:focus { box-shadow: 0 0 0 3px rgba(96, 165, 250, .5); }
+button.focus\:ring-gray-400:focus { box-shadow: 0 0 0 3px rgba(156, 163, 175, .5); }
+.view-enter-active, .view-leave-active { transition: opacity .3s ease; }
+.view-enter-from, .view-leave-to { opacity: 0; }
 </style>