Adición funcionalidad: Editar Venta

FazeElian · Feb 5, 2024 · 36f39b9 · 36f39b9
1 parent 0a1c491
commit 36f39b9
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 8 deletions.
diff --git a/app/Http/Controllers/SaleController.php b/app/Http/Controllers/SaleController.php
@@ -77,8 +77,10 @@ public function edit($id)
     {
         $sale = Sale::find($id);
         $products = $sale->products;
+        $allProducts = Product::all();
+        $selectedProducts = $sale->products;
 
-        return view('Admin.sale.edit', compact('sale', 'products'));
+        return view('Admin.sale.edit', compact('sale', 'products', 'allProducts', 'selectedProducts'));
     }
 
     public function update(Request $request, $id)

diff --git a/resources/views/Admin/facture/form.blade.php b/resources/views/Admin/facture/form.blade.php
@@ -15,7 +15,7 @@
         <div class="cont-info-fact">
             <!-- Fecha -->
             <label for="date">Fecha:</label>
-            {{ Form::date('date', $facture->date, ['class' => 'form-control' . ($errors->has('date') ? ' is-invalid' : ''), 'placeholder' => 'Seleccionar una fecha', "id" => "fechaFactura", "name" => "date"]) }}
+                {{ Form::date('date', $facture->date ?? now()->toDateString(), ['class' => 'inp-venta' . ($errors->has('date') ? ' is-invalid' : ''), 'placeholder' => 'Seleccionar una fecha', "id" => "fechaFactura", "name" => "date"]) }}
             <br>
 
             <!-- Cliente -->

diff --git a/resources/views/Admin/sale/edit.blade.php b/resources/views/Admin/sale/edit.blade.php
@@ -1,10 +1,15 @@
+@include("layouts.headerAdmin")
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Editar Venta | No. {{ $sale->id }} </title>
+    <title>Ventas | Editar</title>
+
+    {{-- Estilos para este archivo --}}
+    <link rel="stylesheet" href="{{ asset("assets/css/Admin/modules/Sales/form-styles.css") }}">
 </head>
 <body>
     <!-- Contenido de página -->
@@ -18,7 +23,61 @@
         <form method="POST" action="{{ route('sales.update', $sale->id) }}"  role="form" enctype="multipart/form-data">
             {{ method_field('PATCH') }}
             @csrf
-            @include('Admin.sale.form')
+
+            <!-- Contenedor de nueva venta -->
+            <div class="cont-venta">
+                <!-- Contenedor información de venta -->
+                <div class="cont-info-venta">
+                    <!-- Fecha -->
+                    <label for="" class="lbl-venta">Fecha: </label>
+                    {{ Form::date('date', $sale->date ?? now()->toDateString(), ['class' => 'inp-venta' . ($errors->has('date') ? ' is-invalid' : ''), 'placeholder' => 'Seleccionar una fecha', "id" => "fechaVenta", "name" => "date"]) }}
+                </div>
+
+                <!-- Tabla lista de productos de venta -->
+                <table class="tab-productos-venta" id="listaProductos">
+                    <!-- Columnas características de lista de productos -->
+                    <tr class="columnas-caract">
+                        <td class="item-columna nombre-prod">Nombre producto</td>
+                        <td class="item-columna cantidad-prod">Cantidad</td>
+                        <td class="item-columna precio-prod">Precio /u</td>
+                        <td class="item-columna elim-fila">
+                            <img src="{{ asset("assets/img/Admin/modules/icono-eliminar-rojo.png") }}" alt="">
+                        </td>
+                    </tr>
+
+                    <!-- Mostrar productos asociados a la factura -->
+                    @foreach ($selectedProducts as $product)
+                        <tr class="filas-datos">
+                            <td class="item-fila nombre-prod-dato">
+                                <select name='product_id[]' id="seleccionarProducto">
+                                    @foreach ($allProducts as $availableProduct)
+                                        <option value='{{ $availableProduct->id }}' {{ $availableProduct->id == $product->id ? 'selected' : '' }}>
+                                            {{ $availableProduct->name }}
+                                        </option>
+                                    @endforeach
+                                </select>
+                            </td>
+                            <td class="item-fila cantidad-prod">
+                                <input type="number" name="quantity[]" id="cantidadProd" placeholder="#" value="{{ $product->pivot->quantity }}">
+                            </td>
+                            <td class="item-fila precio-prod">
+                                <input type="number" name="price[]" id="precioProd" placeholder="$$$" value="{{ $product->pivot->price }}">
+                            </td>
+                            <td class="item-fila elim-fila-dato">
+                                <img src="{{ asset("assets/img/Admin/modules/icono-eliminar-rojo.png") }}" alt="Eliminar Producto" onclick="removeRow(this)">
+                            </td>
+                        </tr>
+                    @endforeach
+                </table>
+
+                <!-- Contenedor añadir fila -->
+                <div class="cont-anadir-fila">
+                    <!-- Botón -->
+                    <div class="btn-anadir-fila" id="btn-anadir-fila">
+                        Añadir Producto
+                    </div>
+                </div>
+            </div>
 
             {{-- Opciones Venta --}}
             <div class="opciones-venta">
@@ -34,3 +93,59 @@
     </section>
 </body>
 </html>
+<script>
+    document.getElementById('btn-anadir-fila').addEventListener('click', function() {
+        const table = document.getElementById('listaProductos').getElementsByTagName('tbody')[0]; // Cambia el índice a 0
+        const newRow = table.insertRow(table.rows.length);
+
+        newRow.classList.add("filas-datos");
+
+        const productName = newRow.insertCell(0);
+        const productQuantity = newRow.insertCell(1);
+        const productPrice = newRow.insertCell(2);
+        const deleteRowBtn = newRow.insertCell(3);
+
+        const productList = {!! json_encode($allProducts) !!};
+        const select = document.createElement('select');
+        select.name = 'product_id[]';
+        select.id = "seleccionarProducto";
+        productName.classList.add('item-fila', 'nombre-prod-dato');
+
+        const defaultOption = document.createElement('option');
+        defaultOption.value = '';
+        defaultOption.text = 'Seleccionar producto';
+        select.appendChild(defaultOption);
+
+        for (const product of productList) {
+            const option = document.createElement('option');
+            option.value = product.id;
+            option.text = product.name;
+            select.appendChild(option);
+        }
+
+        productName.appendChild(select);
+
+        productQuantity.innerHTML = '<td><input type="number" name="quantity[]" id="cantidadProd" placeholder="#"></td>';
+        productQuantity.className = "item-fila cantidad-prod";
+
+        productPrice.innerHTML = '<td><input type="number" name="price[]" id="precioProd" placeholder="$$$"></td>';
+        productPrice.className = "item-fila precio-prod";
+
+        // Agregar un listener de cambio al select para obtener el precio del producto seleccionado
+        select.addEventListener('change', function() {
+            const selectedProductId = select.value;
+
+            // Buscar el producto seleccionado en la lista de productos
+            const selectedProduct = productList.find(product => product.id == selectedProductId);
+
+            // Actualizar el campo de precio con el precio del producto seleccionado
+            if (selectedProduct) {
+                const priceInput = productPrice.querySelector('input');
+                priceInput.value = selectedProduct.price;
+            }
+        });
+
+        deleteRowBtn.innerHTML = '<td><img src="{{ asset("assets/img/Admin/modules/icono-eliminar-rojo.png") }}" alt="Eliminar Producto" onclick="removeRow(this)"></td>';
+        deleteRowBtn.className = "item-fila elim-fila-dato";
+    });
+</script>
diff --git a/resources/views/Admin/sale/index.blade.php b/resources/views/Admin/sale/index.blade.php
@@ -54,7 +54,7 @@
                             <td class="item-fila total-venta-dato">{{ $sale->total }} $</td>
                             <td class="opciones-venta-tabla-dato">
                                 <a href="{{ route('sales.show', $sale->id) }}"><button class="btn-venta btn-ver"><a href="{{ route('sales.show', $sale->id) }}" class="link-op-venta">Ver</a><a href="{{ route('sales.show', $sale->id) }}"><img src="{{ asset("assets/img/Admin/modules/ver-factura-icono.png") }}" alt="Ver Icono" class="icono-op-venta"></button></a>
-                                <a href="{{ route('sales.edit', $sale->id) }}"><button class="btn-venta btn-editar"><a href="#" class="link-op-venta">Editar</a><a href="#"><img src="{{ asset("assets/img/Admin/modules/editar-icono.png") }}" alt="Editar Icono"></a></button></a>
+                                <a href="{{ route('sales.edit', $sale->id) }}"><button class="btn-venta btn-editar"><a href="{{ route('sales.edit', $sale->id) }}" class="link-op-venta">Editar</a><a href="{{ route('sales.edit', $sale->id) }}"><img src="{{ asset("assets/img/Admin/modules/editar-icono.png") }}" alt="Editar Icono"></a></button></a>
                                 <form action="{{ route('sales.destroy', $sale->id) }}" method="POST" class="btn-eliminar">
                                     @csrf
                                     @method('DELETE')
@@ -108,7 +108,7 @@
             </script>
         @endif
 
-        @section('content')
+        {{-- @section('content')
         <canvas id="myChart" width="400" height="150"></canvas>
         <script>
             document.addEventListener('DOMContentLoaded', function () {
@@ -142,7 +142,7 @@
                     }
                 });
             }, true);
-        </script>
-    @endsection
+        </script> --}}
+        {{-- @endsection --}}
 </body>
 </html>