2023-09-12

app/resources/views/ventas/add.blade.php

@@ -3,7 +3,7 @@
 @section('page_content')
     <div class="ui container">
         <h2 class="ui header">Nueva Venta</h2>
-        <form class="ui form" action="{{$urls->base}}/ventas/add" method="post">
+        <form class="ui form" id="add_form" action="{{$urls->base}}/ventas/add" method="post">
             <label for="fecha_venta">Fecha de Venta</label>
             <div class="inline field">
                 <div class="ui calendar" id="fecha_venta_calendar">
@@ -57,7 +57,7 @@
                 <i class="warehouse icon"></i>
                 {{--Bodega--}}
             </button>
-            <table id="unidades" class="ui very basic compact collapsing table"></table>
+            <div id="unidades" class="ui ordered list"></div>
             <h4 class="ui dividing header">FORMA DE PAGO</h4>
             <label for="valor">Valor</label>
             <div class="inline field">
@@ -605,7 +605,6 @@
                                     }
                                 }
                             }
-                            console.debug(data)
                         })
                     }
                 }
@@ -683,12 +682,10 @@
                 const unidad = new Unidad({number})
                 this.added.push(unidad)
                 $(this.ids.unidades).append(
-                    $('<tr></tr>').attr('data-number', number).append(
-                        $('<td></td>').append(
+                    $('<div></div>').addClass('item').attr('data-number', number).append(
+                        $('<div></div>').addClass('content').append(tipo.charAt(0).toUpperCase() + tipo.slice(1) + ' ').append(
                             unidad.draw(this.unidades[tipo])
-                        )
-                    ).append(
-                        $('<td></td>').append(
+                        ).append(
                             $('<button></button>').addClass('ui icon button').attr('type', 'button').attr('data-number', number).append(
                                 $('<i></i>').addClass('remove icon')
                             ).click(event => {
@@ -705,7 +702,7 @@
                 if (index === -1) {
                     return
                 }
-                $(this.ids.unidades).find("tr[data-number='" + number + "']").remove()
+                $(this.ids.unidades).find("div.item[data-number='" + number + "']").remove()
                 this.added.splice(index, 1)
             }
             reset() {
@@ -737,14 +734,10 @@
                 })
                 dropdown.append(menu)
                 dropdown.dropdown()
-                return $('<div></div>').addClass('inline fields').attr('data-number', this.number).append(dropdown)
+                return dropdown
             }
         }
 
-        const unidades = {
-            data: []
-        }
-
         class Payment {
             ids
 
@@ -754,10 +747,10 @@
                     checkbox: checkbox_id
                 }
 
-                $(this.ids.base).hide()
                 document.getElementById(this.ids.checkbox).onchange = event => {
                     this.toggle()
                 }
+                this.toggle()
             }
 
             get status() {
@@ -772,13 +765,12 @@
             }
         }
 
+        function showErrors(errors) {
+            console.debug(errors)
+        }
+
         $(document).ready(() => {
-            $('#fecha_venta_calendar').calendar({
-                type: 'date',
-                formatter: {
-                    date: 'DD-MM-YYYY'
-                }
-            })
+            $('#fecha_venta_calendar').calendar(calendar_date_options)
             new Propietario({id: '#propietario', id_tipo: 'persona_propietario', id_cantidad: 'cantidad_propietario'})
             new Proyecto({unidades_id: '#unidades', proyecto_id: '#proyecto'})
 
@@ -794,6 +786,24 @@
                     checkbox_id: 'has_' + payment
                 })
             })
+
+            $('#add_form').submit(event => {
+                event.preventDefault()
+                const data = new FormData(event.currentTarget)
+                const uri = $(event.currentTarget).attr('action')
+                fetch(uri, {method: 'post', body: data}).then(response => {
+                    if (response.ok) {
+                        return response.json()
+                    }
+                }).then(data => {
+                    if (data.status) {
+                        window.location = '{{$urls->base}}'
+                        return true
+                    }
+                    showErrors(data.errors)
+                })
+                return false
+            })
         })
     </script>
 @endpush