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

@@ -1,6 +1,5 @@
 <script setup>
 import VnCardBeta from 'components/common/VnCard.vue';
-import VehicleSearchbar from '../VehicleSearchbar.vue';
 import VehicleDescriptor from './VehicleDescriptor.vue';
 import VehicleFilter from '../VehicleFilter.js';
 </script>
@@ -10,10 +9,5 @@ import VehicleFilter from '../VehicleFilter.js';
         base-url="Vehicles"
         :filter="VehicleFilter"
         :descriptor="VehicleDescriptor"
-        search-data-key="VehicleList"
+    />
-    >
-        <template #searchbar>
-            <VehicleSearchbar />
-        </template>
-    </VnCardBeta>
 </template>

src/pages/Route/Vehicle/VehicleList.vue

@@ -8,6 +8,7 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import VehicleSummary from 'src/pages/Route/Vehicle/Card/VehicleSummary.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -152,54 +153,68 @@ const columns = computed(() => [
         @on-fetch="(data) => (vehicleTypes = data)"
         auto-load
     />
-    <VehicleSearchbar />
+    <VnSection
-    <VnTable
-        ref="tableRef"
         data-key="VehicleList"
-        url="Vehicles/filter"
         :columns="columns"
-        redirect="vehicle"
+        prefix="vehicle"
-        :create="{
+        :array-data-props="{
-            urlCreate: 'Vehicles',
+            url: 'Vehicles/filter',
-            title: t('vehicle.create'),
-            onDataSaved: ({ id }) => $refs.tableRef.redirect(id),
-            formInitialData: { isActive: true, isKmTruckRate: false },
         }"
     >
-        <template #column-isActive="{ row }">
+        <template #body>
-            <span>
+            <VnTable
-                <QIcon v-if="!row.isActive" name="help" color="primary" size="xs">
+                ref="tableRef"
-                    <QTooltip>{{ $t('globals.inactive') }}</QTooltip>
+                data-key="VehicleList"
-                </QIcon>
+                url="Vehicles/filter"
-            </span>
+                :columns="columns"
+                redirect="vehicle"
+                :right-search="false"
+                :create="{
+                    urlCreate: 'Vehicles',
+                    title: t('vehicle.create'),
+                    onDataSaved: ({ id }) => $refs.tableRef.redirect(id),
+                    formInitialData: { isActive: true, isKmTruckRate: false },
+                }"
+            >
+                <template #column-isActive="{ row }">
+                    <span>
+                        <QIcon v-if="!row.isActive" name="help" color="primary" size="xs">
+                            <QTooltip>{{ $t('globals.inactive') }}</QTooltip>
+                        </QIcon>
+                    </span>
+                </template>
+                <template #more-create-dialog="{ data }">
+                    <VnInput
+                        v-model="data.numberPlate"
+                        :label="$t('vehicle.numberPlate')"
+                        :uppercase="true"
+                    />
+                    <VnInput v-model="data.tradeMark" :label="$t('vehicle.tradeMark')" />
+                    <VnInput v-model="data.model" :label="$t('globals.model')" />
+                    <VnSelect
+                        v-model="data.vehicleTypeFk"
+                        :label="$t('globals.type')"
+                        :options="vehicleTypes"
+                    />
+                    <VnSelect
+                        v-model="data.warehouseFk"
+                        :label="$t('globals.warehouse')"
+                        :options="warehouses"
+                    />
+                    <VnSelect
+                        v-model="data.countryCodeFk"
+                        :label="$t('globals.country')"
+                        option-value="code"
+                        option-label="code"
+                        :options="countries"
+                    />
+                    <VnInput
+                        v-model="data.description"
+                        :label="$t('globals.description')"
+                    />
+                    <QCheckbox to v-model="data.isActive" :label="$t('globals.active')" />
+                </template>
+            </VnTable>
         </template>
-        <template #more-create-dialog="{ data }">
+    </VnSection>
-            <VnInput
-                v-model="data.numberPlate"
-                :label="$t('vehicle.numberPlate')"
-                :uppercase="true"
-            />
-            <VnInput v-model="data.tradeMark" :label="$t('vehicle.tradeMark')" />
-            <VnInput v-model="data.model" :label="$t('globals.model')" />
-            <VnSelect
-                v-model="data.vehicleTypeFk"
-                :label="$t('globals.type')"
-                :options="vehicleTypes"
-            />
-            <VnSelect
-                v-model="data.warehouseFk"
-                :label="$t('globals.warehouse')"
-                :options="warehouses"
-            />
-            <VnSelect
-                v-model="data.countryCodeFk"
-                :label="$t('globals.country')"
-                option-value="code"
-                option-label="code"
-                :options="countries"
-            />
-            <VnInput v-model="data.description" :label="$t('globals.description')" />
-            <QCheckbox to v-model="data.isActive" :label="$t('globals.active')" />
-        </template>
-    </VnTable>
 </template>

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

@@ -13,9 +13,8 @@ vehicle:
     create: Create Vehicle
     amountCooler: Amount cooler
     remove: Vehicle removed
-    searchbar:
+    search: Search Vehicle
-        label: Search Vehicle
+    info: Search by id or number plate
-        info: Search by id or number plate
     params:
         vehicleTypeFk: Type
         vehicleStateFk: State

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

@@ -13,9 +13,8 @@ vehicle:
     isActive: Activo
     nLeasing: Nº leasing
     remove: Vehículo eliminado
-    searchbar:
+    search: Buscar Vehículo
-        label: Buscar Vehículo
+    searchinfo: Buscar por id o matrícula
-        info: Buscar por id o matrícula
     params:
         vehicleTypeFk: Tipo
         vehicleStateFk: Estado