planilla/ui/src/components/planillas/tablaPlanillas.vue

<template>
  <div class="tabla-planillas-container">
    <table class="tabla-planillas">
      <thead>
        <tr>
          <th>ID</th>
          <th>Título</th>
          <th>Empleado ID</th>
          <th>Fecha Desde</th>
          <th>Fecha Hasta</th>
          <th>Total</th>
          <th>Estado</th>
          <th>Acciones</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="planillas && planillas.length === 0">
          <td :colspan="8" style="text-align: center;">No hay planillas para mostrar.</td>
        </tr>
        <tr v-for="planilla in planillas" :key="planilla.id">
          <td>{{ planilla.id }}</td>
          <td>{{ planilla.titulo }}</td>
          <td>{{ planilla.empleado_id }}</td>
          <td>{{ formatDate(planilla.fecha_desde) }}</td>
          <td>{{ formatDate(planilla.fecha_hasta) }}</td>
          <td>{{ formatCurrency(planilla.total) }}</td>
          <td><span :class="`estado-${planilla.estado?.toLowerCase()}`">{{ planilla.estado }}</span></td>
          <td>
            <button @click="editPlanilla(planilla.id)" class="action-button edit-button">Editar</button>
            <button @click="confirmDeletePlanilla(planilla)" class="action-button delete-button">Eliminar</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import { usePlanillasStore } from '../../stores/usePlanillas';

const props = defineProps({
  planillas: {
    type: Array,
    required: true,
    default: () => [],
  },
});

const emit = defineEmits(['edit']); // Removed 'delete' as it's handled internally

const planillasStore = usePlanillasStore();

const formatDate = (dateString) => {
  if (!dateString) return 'N/A';
  const date = new Date(dateString);
  return date.toLocaleDateString('es-ES', {
    year: 'numeric',
    month: '2-digit', // Changed to 2-digit for table compactness
    day: '2-digit',   // Changed to 2-digit for table compactness
  });
};

const formatCurrency = (value) => {
  if (value == null) return 'N/A';
  return Number(value).toLocaleString('es-PY', {
    style: 'currency',
    currency: 'PYG',
  });
};

const editPlanilla = (id) => {
  emit('edit', id);
};

const confirmDeletePlanilla = (planilla) => {
  if (confirm(`¿Está seguro de que desea eliminar la planilla "${planilla.titulo}" (ID: ${planilla.id})?`)) {
    deletePlanillaInternal(planilla.id);
  }
};

const deletePlanillaInternal = async (id) => {
  try {
    await planillasStore.deletePlanilla(id);
    // Optional: Show success notification
    // No need to emit 'delete' if the store handles list updates and parent components react to store changes
  } catch (error) {
    console.error(`Error deleting planilla with id ${id}:`, error);
    // Optional: Show error notification
  }
};
</script>

<style scoped>
.tabla-planillas-container {
  overflow-x: auto; /* Allows table to be scrolled horizontally if needed */
}

.tabla-planillas {
  background-color: var(--table-bg-color-planillas); /* Added */
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
  font-size: 0.9em;
}

.tabla-planillas th,
.tabla-planillas td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.tabla-planillas th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.tabla-planillas tr:nth-child(even) {
  background-color: #f9f9f9;
}

.tabla-planillas tr:hover {
  background-color: #f1f1f1;
}

.action-button {
  padding: 5px 10px;
  margin-right: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

.edit-button {
  background-color: var(--accent-color-planillas);
  color: white;
}

.edit-button:hover {
  filter: brightness(0.9);
}

.delete-button {
  background-color: var(--warning-color); /* Using warning color for delete */
  color: white;
}

.delete-button:hover {
  filter: brightness(0.9);
}

/* Status styling (similar to cardPlanilla) */
.estado-pagado {
  color: green;
  font-weight: bold;
}
.estado-pendiente {
  color: orange;
  font-weight: bold;
}
.estado-anulado {
  color: red;
  font-weight: bold;
  /* text-decoration: line-through; */ /* Optional for table view */
}
</style>