feat: refs #7119 add localization for vehicle fields and enhance VehicleList component

src/pages/Route/Vehicle/VehicleList.vue

@@ -6,64 +6,81 @@ import FetchData from 'src/components/FetchData.vue';
 
 const { t } = useI18n();
 const warehouses = ref([]);
+const companies = ref([]);
+const countries = ref([]);
+
 const columns = computed(() => [
     {
         name: 'id',
-        label: 'Id',
+        label: t('globals.id'),
-        columnFilter: false,
     },
     {
         name: 'description',
-        label: 'Description',
+        label: t('globals.description'),
-        columnFilter: false,
     },
     {
-        name: 'company',
+        name: 'companyFk',
-        label: 'Company',
+        label: t('globals.company'),
-        columnFilter: false,
         format: (row, dashIfEmpty) => dashIfEmpty(row.company?.code),
+        columnFilter: {
+            component: 'select',
+            name: 'companyFk',
+            optionLabel: 'code',
+            options: companies.value,
+        },
     },
     {
         name: 'tradeMark',
-        label: 'TradeMark',
+        label: t('vehicle.tradeMark'),
-        columnFilter: false,
     },
     {
         name: 'numberPlate',
-        label: 'Number Plate',
+        label: t('vehicle.numberPlate'),
-        columnFilter: false,
     },
     {
         name: 'warehouseFk',
-        label: 'Warehouse',
+        label: t('globals.warehouse'),
-        columnFilter: false,
         format: (row, dashIfEmpty) => dashIfEmpty(row.warehouse?.name),
+        columnFilter: {
+            component: 'select',
+            name: 'warehouseFk',
+            options: warehouses.value,
+        },
     },
     {
         name: 'chassis',
-        label: 'Chassis',
+        label: t('vehicle.chassis'),
-        columnFilter: false,
     },
     {
         name: 'leasing',
-        label: 'Leasing',
+        label: t('vehicle.leasing'),
-        columnFilter: false,
     },
     {
         name: 'countryCodeFk',
-        label: 'Country Code',
+        label: t('globals.country'),
-        columnFilter: false,
+        columnFilter: {
+            component: 'select',
+            name: 'countryCodeFk',
+            optionValue: 'code',
+            optionLabel: 'code',
+            options: countries.value,
+        },
+    },
+    {
+        name: 'isKmTruckRate',
+        label: t('vehicle.isKmTruckRate'),
     },
     {
         name: 'state',
-        label: 'State',
+        label: t('globals.state'),
-        columnFilter: false,
         format: (row, dashIfEmpty) => dashIfEmpty(row.event?.state?.state),
     },
 ]);
 </script>
 <template>
     <FetchData url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
+    <FetchData url="Companies" @on-fetch="(data) => (companies = data)" auto-load />
+    <FetchData url="Countries" @on-fetch="(data) => (countries = data)" auto-load />
     <div class="list-container">
         <div class="list">
             <VnTable
@@ -71,7 +88,6 @@ const columns = computed(() => [
                 url="Vehicles/filter"
                 :columns="columns"
                 redirect="vehicle"
-                auto-load
             />
         </div>
     </div>

src/pages/Route/Vehicle/locale/en.yml

@@ -0,0 +1,6 @@
+vehicle:
+    tradeMark: Trade Mark
+    numberPlate: Number Plate
+    chassis: Chassis
+    leasing: Leasing
+    isKmTruckRate: Trailer

src/pages/Route/Vehicle/locale/es.yml

@@ -0,0 +1,6 @@
+vehicle:
+    tradeMark: Marca
+    numberPlate: Matrícula
+    chassis: Número de bastidor
+    leasing: Número de leasing
+    isKmTruckRate: Trailer