Add route list actions

src/pages/Route/RouteList.vue

@@ -129,6 +129,28 @@ const updateWorker = (row, worker) => {
     row.workerUserName = worker.name;
     updateRoute(row);
 };
+
+const confirmationDialog = ref(false);
+const startingDate = ref(null);
+
+const cloneRoutes = () => {
+    axios.post('Routes/clone', {
+        created: startingDate.value,
+        ids: selectedRows.value.map((row) => row?.id),
+    });
+    refreshKey.value++;
+    startingDate.value = null;
+};
+
+const markAsServed = () => {
+    selectedRows.value.forEach((row) => {
+        if (row?.id) {
+            axios.patch(`Routes/${row?.id}`, { isOk: true });
+        }
+    });
+    refreshKey.value++;
+    startingDate.value = null;
+};
 </script>
 
 <template>
@@ -152,6 +174,28 @@ const updateWorker = (row, worker) => {
             </div>
         </Teleport>
     </template>
+    <QDialog v-model="confirmationDialog">
+        <QCard style="min-width: 350px">
+            <QCardSection>
+                <p class="text-h6 q-ma-none">{{ t('Select the starting date') }}</p>
+            </QCardSection>
+
+            <QCardSection class="q-pt-none">
+                <VnInputDate
+                    :label="t('Stating date')"
+                    v-model="startingDate"
+                    autofocus
+                />
+            </QCardSection>
+
+            <QCardActions align="right">
+                <QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
+                <QBtn color="primary" v-close-popup @click="cloneRoutes">
+                    {{ t('Clone') }}
+                </QBtn>
+            </QCardActions>
+        </QCard>
+    </QDialog>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
             <RouteFilter data-key="RouteList" />
@@ -165,7 +209,26 @@ const updateWorker = (row, worker) => {
     <FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
     <FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
     <QPage class="column items-center q-pa-md">
-        <QToolbar class="q-pa-none q-mb-sm justify-end">
+        <QToolbar
+            :class="[
+                'q-pa-none q-mb-sm',
+                selectedRows?.length ? 'justify-between' : 'justify-end',
+            ]"
+        >
+            <div v-if="selectedRows?.length">
+                <QBtn
+                    icon="vn:clone"
+                    color="primary"
+                    class="q-mr-sm"
+                    @click="confirmationDialog = true"
+                >
+                    <QTooltip>{{ t('Clone Selected Routes') }}</QTooltip>
+                </QBtn>
+
+                <QBtn icon="check" color="primary" class="q-mr-sm" @click="markAsServed">
+                    <QTooltip>{{ t('Mark as served') }}</QTooltip>
+                </QBtn>
+            </div>
             <QBtn icon="refresh" color="primary" class="q-mr-sm" @click="refreshKey++" />
         </QToolbar>
         <VnPaginate
@@ -183,8 +246,8 @@ const updateWorker = (row, worker) => {
                     :rows="rows"
                     flat
                     row-key="id"
-                    hide-pagination
                     selection="multiple"
+                    :rows-per-page-options="[0]"
                 >
                     <template #body-cell-worker="props">
                         <QTd :props="props">
@@ -401,4 +464,10 @@ es:
     Hour started: Hora inicio
     Hour finished: Hora fin
     newRoute: Nueva Ruta
+    Clone Selected Routes: Clonar rutas seleccionadas
+    Select the starting date: Seleccione la fecha de inicio
+    Stating date: Fecha de inicio
+    Cancel: Cancelar
+    Clone: Clonar
+    Mark as served: Marcar como servidas
 </i18n>