From 89730148b44cac77f67a228a87d92c2402973138 Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Mon, 15 Jan 2024 20:59:46 -0600
Subject: [PATCH] add: form create vehicle

---
 src/components/CreateVehicleModal.vue | 153 ++++++++++++++++++++++++--
 1 file changed, 145 insertions(+), 8 deletions(-)

diff --git a/src/components/CreateVehicleModal.vue b/src/components/CreateVehicleModal.vue
index 74400aa..e1be979 100644
--- a/src/components/CreateVehicleModal.vue
+++ b/src/components/CreateVehicleModal.vue
@@ -1,5 +1,11 @@
 <script setup>
-    import { computed } from 'vue';
+    import { computed, onMounted, reactive, ref } from 'vue';
+    import CustomInput from './ui/CustomInput.vue';
+    import TruckTypes from './ui/TruckTypes.vue';
+    import Segments from './ui/Segments.vue';
+    import States from './ui/States.vue';
+    import Cities from './ui/Cities.vue';
+    import Spiner from './ui/Spiner.vue';
 
     const props = defineProps({
         vehicle: {
@@ -10,6 +16,42 @@
 
     defineEmits(['reset-vehicle']);
 
+    const initState = {
+        truck_type: '',
+        categories: '',
+        vehicle_number: '',
+        city: '',
+        state: '',
+        trailer_plate_1: '',
+        trailer_plate_2: '',
+        circulation_serial_number: '',
+        notes: '',
+        destino: '',
+    }
+
+    const vehicleForm = reactive({
+        ...initState
+    })
+
+    onMounted(() => {
+        if(props.vehicle) {
+            vehicleForm.truck_type = {
+                meta_value: props.vehicle.truck_type
+            };
+            vehicleForm.categories = props.vehicle.categories;
+            vehicleForm.vehicle_number = props.vehicle.vehicle_number,
+            vehicleForm.city = {city_name: props.vehicle.city},
+            vehicleForm.state = {state_name: props.vehicle.state},
+            vehicleForm.trailer_plate_1 = props.vehicle.trailer_plate_1;
+            vehicleForm.trailer_plate_2 = props.vehicle.trailer_plate_2;
+            vehicleForm.circulation_serial_number = props.vehicle.circulation_serial_number;
+            vehicleForm.notes = props.vehicle.notes;
+            vehicleForm.destino = {city_name: props.vehicle.destino};
+        }
+    })
+
+    const loading = ref(false);
+
     const title = computed(() => {
         return (props.vehicle) ? 'Editar vehiculo' : 'Agregar vehiculo';
     });
@@ -30,13 +72,100 @@
                     </button>
                 </div>
                 <div class="modal-body form-content">
-                </div>
-                <div class="modal-footer">
-                    <button 
-                        type="button" 
-                        class="btn btn-dark" 
-                        @click="$emit('reset-vehicle')"
-                        data-dismiss="modal">Cerrar</button>
+                    <form @submit.prevent="saveVehicle" autocomplete="off" class="vehicle-form">
+                        <div class="row mt-4">
+                            <div class="col-lg-6 col-12">
+                                <label class="custom-label">Tipo de Transporte*</label>
+                                <TruckTypes
+                                    v-model="vehicleForm.truck_type" 
+                                />
+                                <!-- <span class="error-msg" v-if="submited && errors.truckType">{{ errors.truckType }}</span> -->
+                            </div>
+                            <div class="col-lg-6 col-12">
+                                <label class="custom-label">Segmento del transporte*</label>
+                                <Segments
+                                    v-model="vehicleForm.categories" 
+                                    :multiple="true"
+                                />
+                                <!-- <span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span> -->
+                            </div>
+                        </div>
+                        <div class="row mt-4">
+                            <div class="col-lg-6 col-12">
+                                <CustomInput
+                                    label="Número de Serie*"
+                                    name="vehicle_number"
+                                    v-model:field="vehicleForm.vehicle_number"
+                                    :filled="false"
+                                />
+                            </div>
+                            <div class="col-lg-6 col-12">
+                                <CustomInput
+                                    label="Placas Tracto Camión"
+                                    name="circulation_serial_number"
+                                    v-model:field="vehicleForm.circulation_serial_number"
+                                    :filled="false"
+                                />
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-lg-6 col-12">
+                                <CustomInput
+                                    label="Placas Remolque 1"
+                                    name="trailer_plate_1"
+                                    v-model:field="vehicleForm.trailer_plate_1"
+                                    :filled="false"
+                                />
+                            </div>
+                            <div class="col-lg-6 col-12">
+                                <CustomInput
+                                    label="Placas Remolque 1"
+                                    name="trailer_plate_2"
+                                    v-model:field="vehicleForm.trailer_plate_2"
+                                    :filled="false"
+                                />
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-lg-6 col-12">
+                                <label class="custom-label">Base de carga por Estado*</label>
+                                <States
+                                    v-model="vehicleForm.state" 
+                                />
+                                <!-- <span class="error-msg" v-if="submited && errors.truckType">{{ errors.truckType }}</span> -->
+                            </div>
+                            <div class="col-lg-6 col-12">
+                                <label class="custom-label">Base de Carga por Municipio*</label>
+                                <Cities
+                                    v-model="vehicleForm.city" 
+                                />
+                                <!-- <span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span> -->
+                            </div>
+                        </div>
+                        <div class="col-lg-6 col-12 mt-4">
+                            <label class="custom-label">Destino*</label>
+                            <Cities
+                                v-model="vehicleForm.destino" 
+                            />
+                            <!-- <span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span> -->
+                        </div>
+                        <div class="d-flex flex-column mt-4">
+                            <label class="custom-label" for="notes">Información Adicional del Transporte:</label>
+                            <textarea 
+                                class="custom-input-light"
+                                name="notes" 
+                                id="notes" 
+                                placeholder="Escribe aqui..."
+                                v-model="vehicleForm.notes"
+                            ></textarea>
+                        </div>
+                        <div class="mt-4 text-center">
+                            <Spiner v-if="loading"/>
+                            <button 
+                                v-else
+                                class="btn btn-dark" type="submit">Guardar</button>
+                        </div> 
+                    </form>
                 </div>
             </div>
         </div>
@@ -44,5 +173,13 @@
 </template>
 
 <style lang="scss" scoped>
+    .vehicle-form {
+        padding: 0px 24px;
+    }
 
+    @media (max-width: 768px) {
+        .vehicle-form {
+            padding: 0px 12px;
+        }
+    }
 </style>
\ No newline at end of file