feature: reorganized some table columns and changed some data inside them

Author: marcmarfer

app/Http/Controllers/RepairController.php

@@ -9,7 +9,7 @@ class RepairController extends Controller
     public function index()
     {
         return Inertia::render('Repairs', [
-            'repairs' => Repair::all()
+            'repairs' => Repair::with(['repairType', 'vehicle.client'])->get()
         ]);
     }
 }

app/Http/Controllers/VehicleController.php

@@ -9,7 +9,7 @@ class VehicleController extends Controller
     public function index()
     {
         return Inertia::render('Vehicles', [
-            'vehicles' => Vehicle::all()
+            'vehicles' => Vehicle::with('client')->get()
         ]);
     }
 }

app/Models/Vehicle.php

@@ -9,7 +9,7 @@ class Vehicle extends Model
 {
     use HasFactory;
 
-    public function clients()
+    public function client()
     {
         return $this->belongsTo(Client::class);
     }

resources/js/Components/DataTable.vue

@@ -24,6 +24,12 @@ const totalPages = computed(() => Math.ceil(totalItems.value / props.itemsPerPag
 const startIndex = computed(() => (currentPage.value - 1) * props.itemsPerPage);
 const endIndex = computed(() => Math.min(startIndex.value + props.itemsPerPage, totalItems.value));
 
+const getNestedValue = (obj, path) => {
+  return path.split('.').reduce((current, key) => 
+    current ? current[key] : undefined, obj
+  );
+};
+
 const paginatedData = computed(() => {
   return props.data.slice(startIndex.value, endIndex.value);
 });
@@ -98,7 +104,7 @@ watch(() => props.data, () => {
           <td v-for="column in columns" 
               :key="column.key"
               class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-            {{ item[column.key] }}
+            {{ getNestedValue(item, column.key) }}
           </td>
         </tr>
       </tbody>

resources/js/Pages/Clients.vue

@@ -11,14 +11,13 @@ const props = defineProps({
 
 const columns = [
     { key: 'id', label: 'ID' },
+    { key: 'DNI', label: 'DNI' },
     { key: 'name', label: 'Nombre' },
     { key: 'email', label: 'Email' },
     { key: 'telephone', label: 'Teléfono' },
     { key: 'city', label: 'Ciudad' },
     { key: 'postal_code', label: 'Código Postal' },
-    { key: 'DNI', label: 'DNI' },
-    { key: 'registered_at', label: 'Fecha de Registro' },
-    { key: 'created_at', label: 'Fecha de Creación' }
+    { key: 'registered_at', label: 'Fecha de Registro' }
 ];
 </script>
 

resources/js/Pages/DeliveryNotes/Show.vue

@@ -18,8 +18,7 @@ const columns = [
     { key: 'cost', label: 'Coste' },
     { key: 'margin', label: 'Margen' },
     { key: 'profit', label: 'Beneficio' },
-    { key: 'added_at', label: 'Fecha de Alta' },
-    { key: 'created_at', label: 'Fecha de Creación' }
+    { key: 'added_at', label: 'Fecha de Alta' }
 ];
 </script>
 

resources/js/Pages/Repairs.vue

@@ -11,12 +11,13 @@ const props = defineProps({
 
 const columns = [
     { key: 'id', label: 'ID' },
-    { key: 'repair_type_id', label: 'Tipo de Reparación' },
-    { key: 'vehicle_id', label: 'ID Vehículo' },
+    { key: 'vehicle.client.name', label: 'Cliente' },
+    { key: 'vehicle.brand', label: 'Marca' },
+    { key: 'vehicle.plate_number', label: 'Matrícula' },
+    { key: 'repair_type.name', label: 'Tipo de Reparación' },
     { key: 'observations', label: 'Observaciones' },
     { key: 'status', label: 'Estado' },
-    { key: 'started_at', label: 'Fecha de Inicio' },
-    { key: 'created_at', label: 'Fecha de Creación' }
+    { key: 'started_at', label: 'Fecha de Inicio' }
 ];
 </script>
 

resources/js/Pages/Vehicles.vue

@@ -11,14 +11,13 @@ const props = defineProps({
 
 const columns = [
     { key: 'id', label: 'ID' },
-    { key: 'client_id', label: 'ID Cliente' },
+    { key: 'client.name', label: 'Cliente' },
     { key: 'plate_number', label: 'Matrícula' },
     { key: 'brand', label: 'Marca' },
     { key: 'model', label: 'Modelo' },
     { key: 'VIN', label: 'VIN' },
     { key: 'motor_type', label: 'Tipo de Motor' },
-    { key: 'added_at', label: 'Fecha de Alta' },
-    { key: 'created_at', label: 'Fecha de Creación' }
+    { key: 'added_at', label: 'Fecha de Alta' }
 ];
 </script>