From 8f47a0bc2bf01e07332c1d94ded5a7fce256a6dc Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Wed, 17 Jan 2024 18:02:39 -0400
Subject: [PATCH] Update router list

---
 src/pages/Route/RouteList.vue | 407 +++++++++++++++++-----------------
 1 file changed, 206 insertions(+), 201 deletions(-)

diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index 5dd82cc51..5972a6959 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -208,28 +208,29 @@ const markAsServed = () => {
     />
     <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',
-                selectedRows?.length ? 'justify-between' : 'justify-end',
-            ]"
-        >
-            <div v-if="selectedRows?.length">
+    <QPage class="column items-center">
+        <QToolbar class="bg-vn-dark justify-end">
+            <div id="st-actions" class="q-pa-sm">
                 <QBtn
                     icon="vn:clone"
                     color="primary"
                     class="q-mr-sm"
+                    :disable="!selectedRows?.length"
                     @click="confirmationDialog = true"
                 >
                     <QTooltip>{{ t('Clone Selected Routes') }}</QTooltip>
                 </QBtn>
 
-                <QBtn icon="check" color="primary" class="q-mr-sm" @click="markAsServed">
+                <QBtn
+                    icon="check"
+                    color="primary"
+                    class="q-mr-sm"
+                    :disable="!selectedRows?.length"
+                    @click="markAsServed"
+                >
                     <QTooltip>{{ t('Mark as served') }}</QTooltip>
                 </QBtn>
             </div>
-            <QBtn icon="refresh" color="primary" class="q-mr-sm" @click="refreshKey++" />
         </QToolbar>
         <VnPaginate
             :key="refreshKey"
@@ -240,198 +241,202 @@ const markAsServed = () => {
             auto-load
         >
             <template #body="{ rows }">
-                <QTable
-                    v-model:selected="selectedRows"
-                    :columns="columns"
-                    :rows="rows"
-                    flat
-                    row-key="id"
-                    selection="multiple"
-                    :rows-per-page-options="[0]"
-                >
-                    <template #body-cell-worker="props">
-                        <QTd :props="props">
-                            {{ props.row?.workerUserName }}
-                            <QPopupEdit
-                                :model-value="props.row.workerFk"
-                                v-slot="scope"
-                                buttons
-                                @update:model-value="
-                                    (worker) => updateWorker(props.row, worker)
-                                "
-                            >
-                                <VnSelectFilter
-                                    :label="t('Worker')"
-                                    v-model="scope.value"
-                                    :options="workers"
-                                    option-value="id"
-                                    option-label="name"
-                                    hide-selected
-                                    autofocus
-                                    :emit-value="false"
-                                    :rules="validate('Route.workerFk')"
-                                    :is-clearable="false"
-                                    @keyup.enter="scope.set"
-                                    @focus="($event) => $event.target.select()"
+                <div class="q-pa-md">
+                    <QTable
+                        v-model:selected="selectedRows"
+                        :columns="columns"
+                        :rows="rows"
+                        flat
+                        row-key="id"
+                        selection="multiple"
+                        :rows-per-page-options="[0]"
+                    >
+                        <template #body-cell-worker="props">
+                            <QTd :props="props">
+                                {{ props.row?.workerUserName }}
+                                <QPopupEdit
+                                    :model-value="props.row.workerFk"
+                                    v-slot="scope"
+                                    buttons
+                                    @update:model-value="
+                                        (worker) => updateWorker(props.row, worker)
+                                    "
                                 >
-                                    <template #option="{ opt, itemProps }">
-                                        <QItem
-                                            v-bind="itemProps"
-                                            class="q-pa-xs row items-center"
-                                        >
-                                            <QItemSection class="col-9 justify-center">
-                                                <span>{{ opt.name }}</span>
-                                                <span class="text-grey">{{
-                                                    opt.nickname
-                                                }}</span>
-                                            </QItemSection>
-                                        </QItem>
-                                    </template>
-                                </VnSelectFilter>
-                            </QPopupEdit>
-                        </QTd>
-                    </template>
-                    <template #body-cell-agency="props">
-                        <QTd :props="props">
-                            {{ props.row?.agencyName }}
-                            <QPopupEdit
-                                :model-value="props.row.agencyModeFk"
-                                v-slot="scope"
-                                buttons
-                                @update:model-value="
-                                    (agency) => updateAgency(props.row, agency)
-                                "
-                            >
-                                <VnSelectFilter
-                                    :label="t('Agency')"
-                                    v-model="scope.value"
-                                    :options="agencyList"
-                                    option-value="id"
-                                    option-label="name"
-                                    hide-selected
-                                    autofocus
-                                    :emit-value="false"
-                                    :rules="validate('route.agencyFk')"
-                                    :is-clearable="false"
-                                    @keyup.enter="scope.set"
-                                    @focus="($event) => $event.target.select()"
-                                />
-                            </QPopupEdit>
-                        </QTd>
-                    </template>
-                    <template #body-cell-vehicle="props">
-                        <QTd :props="props">
-                            {{ props.row?.vehiclePlateNumber }}
-                            <QPopupEdit
-                                :model-value="props.row.vehicleFk"
-                                v-slot="scope"
-                                buttons
-                                @update:model-value="
-                                    (vehicle) => updateVehicle(props.row, vehicle)
-                                "
-                            >
-                                <VnSelectFilter
-                                    :label="t('Vehicle')"
-                                    v-model="scope.value"
-                                    :options="vehicleList"
-                                    option-value="id"
-                                    option-label="numberPlate"
-                                    hide-selected
-                                    autofocus
-                                    :emit-value="false"
-                                    :rules="validate('route.vehicleFk')"
-                                    :is-clearable="false"
-                                    @keyup.enter="scope.set"
-                                    @focus="($event) => $event.target.select()"
-                                />
-                            </QPopupEdit>
-                        </QTd>
-                    </template>
-                    <template #body-cell-date="props">
-                        <QTd :props="props">
-                            {{ toDate(props.row?.created) }}
-                            <QPopupEdit
-                                v-model="props.row.created"
-                                v-slot="scope"
-                                @update:model-value="updateRoute(props.row)"
-                                buttons
-                            >
-                                <VnInputDate
-                                    v-model="scope.value"
-                                    autofocus
-                                    :label="t('Date')"
-                                    :rules="validate('route.created')"
-                                    :is-clearable="false"
-                                    @keyup.enter="scope.set"
-                                    @focus="($event) => $event.target.select()"
-                                />
-                            </QPopupEdit>
-                        </QTd>
-                    </template>
-                    <template #body-cell-description="props">
-                        <QTd :props="props">
-                            {{ props.row?.description }}
-                            <QPopupEdit
-                                v-model="props.row.description"
-                                v-slot="scope"
-                                @update:model-value="updateRoute(props.row)"
-                                buttons
-                            >
-                                <VnInput
-                                    v-model="scope.value"
-                                    autofocus
-                                    :label="t('Description')"
-                                    :rules="validate('route.description')"
-                                    :is-clearable="false"
-                                    @keyup.enter="scope.set"
-                                    @focus="($event) => $event.target.select()"
-                                />
-                            </QPopupEdit>
-                        </QTd>
-                    </template>
-                    <template #body-cell-started="props">
-                        <QTd :props="props">
-                            {{ toHour(props.row.started) }}
-                            <QPopupEdit
-                                v-model="props.row.started"
-                                v-slot="scope"
-                                buttons
-                                @update:model-value="updateRoute(props.row)"
-                            >
-                                <VnInputTime
-                                    v-model="scope.value"
-                                    autofocus
-                                    :label="t('Hour started')"
-                                    :rules="validate('route.started')"
-                                    :is-clearable="false"
-                                    @keyup.enter="scope.set"
-                                    @focus="($event) => $event.target.select()"
-                                />
-                            </QPopupEdit>
-                        </QTd>
-                    </template>
-                    <template #body-cell-finished="props">
-                        <QTd :props="props">
-                            {{ toHour(props.row.finished) }}
-                            <QPopupEdit
-                                v-model="props.row.finished"
-                                v-slot="scope"
-                                buttons
-                                @update:model-value="updateRoute(props.row)"
-                            >
-                                <VnInputTime
-                                    v-model="scope.value"
-                                    autofocus
-                                    :label="t('Hour finished')"
-                                    :rules="validate('route.finished')"
-                                    :is-clearable="false"
-                                    @keyup.enter="scope.set"
-                                    @focus="($event) => $event.target.select()"
-                                />
-                            </QPopupEdit>
-                        </QTd>
-                    </template>
-                </QTable>
+                                    <VnSelectFilter
+                                        :label="t('Worker')"
+                                        v-model="scope.value"
+                                        :options="workers"
+                                        option-value="id"
+                                        option-label="name"
+                                        hide-selected
+                                        autofocus
+                                        :emit-value="false"
+                                        :rules="validate('Route.workerFk')"
+                                        :is-clearable="false"
+                                        @keyup.enter="scope.set"
+                                        @focus="($event) => $event.target.select()"
+                                    >
+                                        <template #option="{ opt, itemProps }">
+                                            <QItem
+                                                v-bind="itemProps"
+                                                class="q-pa-xs row items-center"
+                                            >
+                                                <QItemSection
+                                                    class="col-9 justify-center"
+                                                >
+                                                    <span>{{ opt.name }}</span>
+                                                    <span class="text-grey">{{
+                                                        opt.nickname
+                                                    }}</span>
+                                                </QItemSection>
+                                            </QItem>
+                                        </template>
+                                    </VnSelectFilter>
+                                </QPopupEdit>
+                            </QTd>
+                        </template>
+                        <template #body-cell-agency="props">
+                            <QTd :props="props">
+                                {{ props.row?.agencyName }}
+                                <QPopupEdit
+                                    :model-value="props.row.agencyModeFk"
+                                    v-slot="scope"
+                                    buttons
+                                    @update:model-value="
+                                        (agency) => updateAgency(props.row, agency)
+                                    "
+                                >
+                                    <VnSelectFilter
+                                        :label="t('Agency')"
+                                        v-model="scope.value"
+                                        :options="agencyList"
+                                        option-value="id"
+                                        option-label="name"
+                                        hide-selected
+                                        autofocus
+                                        :emit-value="false"
+                                        :rules="validate('route.agencyFk')"
+                                        :is-clearable="false"
+                                        @keyup.enter="scope.set"
+                                        @focus="($event) => $event.target.select()"
+                                    />
+                                </QPopupEdit>
+                            </QTd>
+                        </template>
+                        <template #body-cell-vehicle="props">
+                            <QTd :props="props">
+                                {{ props.row?.vehiclePlateNumber }}
+                                <QPopupEdit
+                                    :model-value="props.row.vehicleFk"
+                                    v-slot="scope"
+                                    buttons
+                                    @update:model-value="
+                                        (vehicle) => updateVehicle(props.row, vehicle)
+                                    "
+                                >
+                                    <VnSelectFilter
+                                        :label="t('Vehicle')"
+                                        v-model="scope.value"
+                                        :options="vehicleList"
+                                        option-value="id"
+                                        option-label="numberPlate"
+                                        hide-selected
+                                        autofocus
+                                        :emit-value="false"
+                                        :rules="validate('route.vehicleFk')"
+                                        :is-clearable="false"
+                                        @keyup.enter="scope.set"
+                                        @focus="($event) => $event.target.select()"
+                                    />
+                                </QPopupEdit>
+                            </QTd>
+                        </template>
+                        <template #body-cell-date="props">
+                            <QTd :props="props">
+                                {{ toDate(props.row?.created) }}
+                                <QPopupEdit
+                                    v-model="props.row.created"
+                                    v-slot="scope"
+                                    @update:model-value="updateRoute(props.row)"
+                                    buttons
+                                >
+                                    <VnInputDate
+                                        v-model="scope.value"
+                                        autofocus
+                                        :label="t('Date')"
+                                        :rules="validate('route.created')"
+                                        :is-clearable="false"
+                                        @keyup.enter="scope.set"
+                                        @focus="($event) => $event.target.select()"
+                                    />
+                                </QPopupEdit>
+                            </QTd>
+                        </template>
+                        <template #body-cell-description="props">
+                            <QTd :props="props">
+                                {{ props.row?.description }}
+                                <QPopupEdit
+                                    v-model="props.row.description"
+                                    v-slot="scope"
+                                    @update:model-value="updateRoute(props.row)"
+                                    buttons
+                                >
+                                    <VnInput
+                                        v-model="scope.value"
+                                        autofocus
+                                        :label="t('Description')"
+                                        :rules="validate('route.description')"
+                                        :is-clearable="false"
+                                        @keyup.enter="scope.set"
+                                        @focus="($event) => $event.target.select()"
+                                    />
+                                </QPopupEdit>
+                            </QTd>
+                        </template>
+                        <template #body-cell-started="props">
+                            <QTd :props="props">
+                                {{ toHour(props.row.started) }}
+                                <QPopupEdit
+                                    v-model="props.row.started"
+                                    v-slot="scope"
+                                    buttons
+                                    @update:model-value="updateRoute(props.row)"
+                                >
+                                    <VnInputTime
+                                        v-model="scope.value"
+                                        autofocus
+                                        :label="t('Hour started')"
+                                        :rules="validate('route.started')"
+                                        :is-clearable="false"
+                                        @keyup.enter="scope.set"
+                                        @focus="($event) => $event.target.select()"
+                                    />
+                                </QPopupEdit>
+                            </QTd>
+                        </template>
+                        <template #body-cell-finished="props">
+                            <QTd :props="props">
+                                {{ toHour(props.row.finished) }}
+                                <QPopupEdit
+                                    v-model="props.row.finished"
+                                    v-slot="scope"
+                                    buttons
+                                    @update:model-value="updateRoute(props.row)"
+                                >
+                                    <VnInputTime
+                                        v-model="scope.value"
+                                        autofocus
+                                        :label="t('Hour finished')"
+                                        :rules="validate('route.finished')"
+                                        :is-clearable="false"
+                                        @keyup.enter="scope.set"
+                                        @focus="($event) => $event.target.select()"
+                                    />
+                                </QPopupEdit>
+                            </QTd>
+                        </template>
+                    </QTable>
+                </div>
             </template>
         </VnPaginate>
         <QPageSticky :offset="[20, 20]">