feat: refs #8443 added select in form for vehicle state

src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue

@@ -11,6 +11,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import axios from 'axios';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const props = defineProps({
     event: {
@@ -47,12 +48,13 @@ const arrayData = useArrayData('VehicleEvents');
 
 const createVehicleEvent = async () => {
     vehicleFormData.value.vehicleFk = route.params.id;
+    vehicleFormData.value.userFk = 3;
     if (isNew.value) {
         await axios.post(`Vehicles/${route.params.id}/event`, vehicleFormData.value);
     } else {
         await axios.put(
             `Vehicles/${route.params.id}/event/${props.event?.id}`,
-            vehicleFormData.value
+            vehicleFormData.value,
         );
     }
 
@@ -90,42 +92,22 @@ onMounted(() => {
         :default-submit-button="false"
     >
         <template #form-inputs>
-            <VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
-                <VnInputDate
+                <VnInputDate :label="t('Started')" v-model="vehicleFormData.started" />
-                    :label="t('Started')"
+                <VnInputDate :label="t('Finished')" v-model="vehicleFormData.finished" />
-                    v-model="vehicleFormData.started"
-                    class="full-width"
-                />
-                <VnInputDate
-                    :label="t('Finished')"
-                    v-model="vehicleFormData.finished"
-                    class="full-width"
-                />
             </VnRow>
             <VnRow>
                 <VnInput
                     v-model="vehicleFormData.description"
                     :label="t('globals.description')"
                     type="text"
-                    class="full-width"
                 />
-            </VnRow>
+                <VnSelect
-            <VnRow>
+                    url="VehicleStates"
-                <VnInput
                     v-model="vehicleFormData.vehicleStateFk"
                     :label="t('globals.state')"
-                    type="number"
+                    option-value="id"
-                    min="0"
+                    option-label="state"
-                    class="full-width"
-                />
-            </VnRow>
-            <VnRow>
-                <VnInput
-                    v-model="vehicleFormData.userFk"
-                    :label="t('globals.user')"
-                    type="number"
-                    min="0"
-                    class="full-width"
                 />
             </VnRow>
         </template>
@@ -147,7 +129,7 @@ onMounted(() => {
                     openConfirmationModal(
                         t('vehicleForm.deleteTitle'),
                         t('vehicleForm.deleteSubtitle'),
-                        () => deleteVehicleEvent()
+                        () => deleteVehicleEvent(),
                     )
                 "
             />
@@ -166,4 +148,4 @@ onMounted(() => {
         Finished: Fin
         Add vehicle event: Agregar evento
         Edit vehicle event: Editar evento
-</i18n>
+</i18n>

src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue

@@ -38,24 +38,10 @@ const fetchVehicleState = async () => {
     vehicleStates.value = vehicles.data;
 };
 
-const fetchUser = async (userId) => {
-    console.log(userId);
-    if (!userId || users.value[userId]) return;
-
-    const usersData = await axios.get(`Accounts/2/user`);
-    users.value[userId] = usersData.data;
-    console.log(users.value[userId]);
-};
-
 const getVehicleStateName = (id) => {
     return vehicleStates.value[id - 1] ?? dashIfEmpty(id - 1);
 };
 
-const getUserName = (id) => {
-    console.log(users.value?.nickname);
-    return users.value?.nickname ?? dashIfEmpty(id - 1);
-};
-
 const params = computed(() => ({
     vehicleFk: route.params.id,
     started: props.firstDay,
@@ -101,10 +87,6 @@ const openInclusionForm = (event) => {
 onMounted(async () => {
     weekdayStore.initStore();
     await fetchVehicleState();
-
-    for (let event of props.events) {
-        await fetchUser(event.userFk);
-    }
 });
 </script>
 
@@ -135,10 +117,6 @@ onMounted(async () => {
                             getVehicleStateName(event.vehicleStateFk).state
                         }}</span>
                     </span>
-                    <span class="color-vn-label"
-                        >{{ t('globals.user') }}:
-                        <span class="color-vn-text">{{ getUserName(event.userFk) }}</span>
-                    </span>
                 </QItemSection>
                 <QItemSection side @click="openInclusionForm(event)">
                     <QBtn