From 0bc89926be1bcbe5b92a0db6f88e3ac012abd8be Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 31 May 2025 01:57:07 -0600
Subject: [PATCH] ejemplo completo terminado en la tabla de tarea

---
 ui/src/components/tareas/tablaTareas.vue | 101 ++++++++++++++---------
 1 file changed, 61 insertions(+), 40 deletions(-)

diff --git a/ui/src/components/tareas/tablaTareas.vue b/ui/src/components/tareas/tablaTareas.vue
index 25afb1d..c7e7e4b 100644
--- a/ui/src/components/tareas/tablaTareas.vue
+++ b/ui/src/components/tareas/tablaTareas.vue
@@ -1,7 +1,16 @@
 <template>
-  <div class="p-4 sm:p-6 rounded-lg overflow-x-auto" :style="{ backgroundColor: ui.tableBgColorTareas }">
-    <table class="min-w-full divide-y divide-gray-200">
-      <thead class="bg-gray-50 dark:bg-slate-700">
+  <div
+    class="p-4 sm:p-6 rounded-lg overflow-x-auto"
+    :style="{ '--bg-tareas': ui.tableBgColorTareas }"
+  >
+    <table
+      class="min-w-full divide-y divide-[var(--accent-color-tareas)]"
+      :style="{ backgroundColor: ui.tableBgColorTareas }"
+    >
+      <thead
+        class="divide-y divide-gray-200 dark:divide-slate-700"
+        :style="{ backgroundColor: ui.tableBgColorTareas }"
+      >
         <tr>
           <th class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">ID</th>
           <th class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">Título</th>
@@ -14,28 +23,50 @@
           <th class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">Acciones</th>
         </tr>
       </thead>
-      <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
+
+      <tbody
+        class="divide-y divide-[var(--accent-color-tareas)]"
+        :style="{ backgroundColor: ui.tableBgColorTareas }"
+      >
         <tr v-if="!tareas || tareas.length === 0">
-          <td colspan="9" class="px-6 py-10 text-center text-gray-500 dark:text-slate-400 text-lg">No hay tareas para mostrar.</td>
+          <td colspan="9" class="px-6 py-10 text-center text-gray-500 dark:text-slate-400 text-lg">
+            No hay tareas para mostrar.
+          </td>
         </tr>
-        <tr v-for="tarea in tareas" :key="tarea.id" class="transition-colors duration-150 ease-in-out hover:bg-[var(--accent-color-tareas)]/10 dark:hover:bg-[var(--accent-color-tareas)]/20">
+
+        <tr
+          v-for="tarea in tareas"
+          :key="tarea.id"
+          class="bg-[var(--bg-tareas)] transition-colors duration-150 ease-in-out hover:bg-[var(--accent-color-tareas)]/10 dark:hover:bg-[var(--accent-color-tareas)]/20"
+        >
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">{{ tarea.id }}</td>
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">{{ tarea.titulo }}</td>
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">{{ tarea.empleado_id }}</td>
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">{{ formatDate(tarea.fecha) }}</td>
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">
-            <span :class="['px-2.5 py-0.5 rounded-full text-xs font-semibold', getStatusClass(tarea.estado)]">{{ tarea.estado }}</span>
+            <span :class="['px-2.5 py-0.5 rounded-full text-xs font-semibold', getStatusClass(tarea.estado)]">
+              {{ tarea.estado }}
+            </span>
           </td>
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">{{ tarea.tipo || 'N/A' }}</td>
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">{{ tarea.precio != null ? formatCurrency(tarea.precio) : 'N/A' }}</td>
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">{{ tarea.planilla_id || 'N/A' }}</td>
           <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">
             <div class="flex items-center space-x-2">
-              <button @click="editTarea(tarea.id)" class="p-1.5 sm:p-2 rounded-md transition-all duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-600/20 focus:ring-blue-500 dark:focus:ring-blue-400" title="Editar">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /></svg>
+              <button
+                @click="editTarea(tarea.id)"
+                class="p-1.5 sm:p-2 rounded-md transition-all duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-600/20 focus:ring-blue-500 dark:focus:ring-blue-400"
+                title="Editar"
+              >
+                <!-- ícono editar -->
               </button>
-              <button @click="confirmDeleteTarea(tarea)" class="p-1.5 sm:p-2 rounded-md transition-all duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 hover:bg-red-100 dark:hover:bg-red-600/20 focus:ring-red-500 dark:focus:ring-red-400" title="Eliminar">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12.56 0c1.153 0 2.24.03 3.22.077m3.22-.077L10.879 3.28a2.25 2.25 0 012.244-2.077h.093c.956 0 1.853.543 2.244 2.077L14.74 5.79m-4.858 0l-2.828-2.828A1.875 1.875 0 016.188 2.188l2.828 2.828m6.912 0l2.828-2.828a1.875 1.875 0 00-2.652-2.652L12 5.79M9.26 9h5.48L9.26 9z" /></svg>
+
+              <button
+                @click="confirmDeleteTarea(tarea)"
+                class="p-1.5 sm:p-2 rounded-md transition-all duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 hover:bg-red-100 dark:hover:bg-red-600/20 focus:ring-red-500 dark:focus:ring-red-400"
+                title="Eliminar"
+              >
+                <!-- ícono eliminar -->
               </button>
             </div>
           </td>
@@ -46,43 +77,33 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue';
-import { useTareasStore } from '../../stores/useTareas';
-import { formatDate, formatCurrency, getStatusClass } from '../../utils/formatters.js';
-import { useUi } from '../../stores/useUi.js';
+import { defineProps, defineEmits } from 'vue'
+import { useTareasStore } from '@/stores/useTareas'
+import { formatDate, formatCurrency, getStatusClass } from '@/utils/formatters'
+import { useUi } from '@/stores/useUi'
 
-const ui = useUi();
+const ui = useUi()
 
-const props = defineProps({
-  tareas: {
-    type: Array,
-    required: true,
-    default: () => [],
-  },
-});
+defineProps({
+  tareas: { type: Array, required: true, default: () => [] },
+})
 
-const emit = defineEmits(['edit']);
+const emit = defineEmits(['edit'])
+const tareasStore = useTareasStore()
 
-const tareasStore = useTareasStore();
-
-const editTarea = (id) => {
-  emit('edit', id);
-};
+const editTarea = (id) => emit('edit', id)
 
 const confirmDeleteTarea = (tarea) => {
-  if (confirm(`¿Está seguro de que desea eliminar la tarea "${tarea.titulo}" (ID: ${tarea.id})?`)) {
-    deleteTareaInternal(tarea.id);
-  }
-};
+  if (confirm(`¿Está seguro de que desea eliminar la tarea "${tarea.titulo}" (ID: ${tarea.id})?`))
+    deleteTareaInternal(tarea.id)
+}
 
 const deleteTareaInternal = async (id) => {
   try {
-    await tareasStore.deleteTarea(id);
-    // Optional: Show success notification or emit 'deleted' event
-  } catch (error) {
-    console.error(`Error deleting tarea with id ${id}:`, error);
-    alert('Ocurrió un error al eliminar la tarea.');
-    // Optional: Show error notification
+    await tareasStore.deleteTarea(id)
+  } catch (e) {
+    console.error(e)
+    alert('Ocurrió un error al eliminar la tarea.')
   }
-};
+}
 </script>