Workers PDA

src/i18n/en/index.js

@@ -833,6 +833,7 @@ export default {
             notifications: 'Notifications',
             workerCreate: 'New worker',
             department: 'Department',
+            pda: 'PDA',
         },
         list: {
             name: 'Name',
@@ -874,6 +875,12 @@ export default {
             subscribed: 'Subscribed to the notification',
             unsubscribed: 'Unsubscribed from the notification',
         },
+        pda: {
+            newPDA: 'New PDA',
+            model: 'Model',
+            serialNumber: 'Serial number',
+            removePDA: 'Deallocate PDA',
+        },
         create: {
             name: 'Name',
             lastName: 'Last name',

src/i18n/es/index.js

@@ -833,6 +833,7 @@ export default {
             notifications: 'Notificaciones',
             workerCreate: 'Nuevo trabajador',
             department: 'Departamentos',
+            pda: 'PDA',
         },
         list: {
             name: 'Nombre',
@@ -874,6 +875,12 @@ export default {
             subscribed: 'Se ha suscrito a la notificación',
             unsubscribed: 'Se ha dado de baja de la notificación',
         },
+        pda: {
+            newPDA: 'Nueva PDA',
+            model: 'Modelo',
+            serialNumber: 'Número de serie',
+            removePDA: 'Desasignar PDA',
+        },
         create: {
             name: 'Nombre',
             lastName: 'Apellido',

src/pages/Worker/Card/WorkerPda.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { onMounted, ref, computed } from 'vue';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+import { useRole } from 'src/composables/useRole';
+
+const route = useRoute();
+const { t } = useI18n();
+const { notify } = useNotify();
+const { hasAny } = useRole();
+
+const fetchCurrentDeviceRef = ref(null);
+const deviceProductionsFilter = {
+    fields: ['id', 'serialNumber', 'modelFk'],
+    where: { stateFk: 'idle' },
+    order: 'id',
+};
+const deviceProductionsOptions = ref([]);
+const newPDA = ref({});
+const currentPDA = ref(null);
+
+const isAllowedToEdit = computed(() => hasAny(['hr', 'productionAssi']));
+
+const setCurrentPDA = (data) => {
+    currentPDA.value = data;
+    currentPDA.value.description = `ID: ${currentPDA.value.deviceProductionFk} ${t(
+        'worker.pda.model'
+    )}: ${currentPDA.value.deviceProduction.modelFk} ${t('worker.pda.serialNumber')}: ${
+        currentPDA.value.deviceProduction.serialNumber
+    }`;
+};
+
+const deallocatePDA = async (data) => {
+    try {
+        await axios.post(`Workers/${route.params.id}/deallocatePDA`, {
+            pda: currentPDA.value.deviceProductionFk,
+        });
+        data.pda = null;
+        currentPDA.value = null;
+        await fetchCurrentDeviceRef.value.fetch();
+        notify(t('PDA deallocated'), 'positive');
+    } catch (err) {
+        console.error('Error deallocating PDA');
+    }
+};
+
+onMounted(async () => await fetchCurrentDeviceRef.value.fetch());
+</script>
+
+<template>
+    <FetchData
+        url="DeviceProductions"
+        :filter="deviceProductionsFilter"
+        auto-load
+        @on-fetch="(data) => (deviceProductionsOptions = data)"
+    />
+    <FetchData
+        ref="fetchCurrentDeviceRef"
+        url="DeviceProductionUsers"
+        :filter="{
+            where: { userFk: route.params.id },
+            include: { relation: 'deviceProduction' },
+        }"
+        auto-load
+        @on-fetch="(data) => setCurrentPDA(data[0])"
+    />
+    <QPage class="column items-center q-pa-md">
+        <FormModel
+            url="DeviceProductionUsers"
+            :url-create="`Workers/${route.params.id}/allocatePDA`"
+            model="DeviceProductionUser"
+            :form-initial-data="newPDA"
+            auto-load
+            @on-data-saved="(_, data) => setCurrentPDA(data)"
+        >
+            <template #form="{ data }">
+                <QField
+                    v-if="currentPDA && currentPDA.description"
+                    :label="t('worker.pda.newPDA')"
+                    :model-value="currentPDA.description"
+                    :editable="false"
+                    class="full-width"
+                >
+                    <template #control>
+                        <div tabindex="0">
+                            {{ currentPDA.description }}
+                        </div>
+                    </template>
+                    <template v-if="isAllowedToEdit" #append>
+                        <QIcon
+                            name="delete"
+                            size="sm"
+                            class="cursor-pointer"
+                            color="primary"
+                            @click="deallocatePDA(data)"
+                        >
+                            <QTooltip>
+                                {{ t('worker.pda.removePDA') }}
+                            </QTooltip>
+                        </QIcon>
+                    </template>
+                </QField>
+
+                <VnSelectFilter
+                    v-else
+                    :label="t('worker.pda.newPDA')"
+                    v-model="data.pda"
+                    :options="deviceProductionsOptions"
+                    option-label="serialNumber"
+                    option-value="id"
+                    hide-selected
+                    :disable="!isAllowedToEdit"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel>ID: {{ scope.opt?.id }}</QItemLabel>
+                                <QItemLabel caption>
+                                    {{ scope.opt?.modelFk }},
+                                    {{ scope.opt?.serialNumber }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectFilter>
+            </template>
+        </FormModel>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    PDA deallocated: PDA desasignada
+</i18n>

src/router/modules/worker.js

@@ -11,7 +11,7 @@ export default {
     redirect: { name: 'WorkerMain' },
     menus: {
         main: ['WorkerList', 'WorkerDepartment'],
-        card: ['WorkerNotificationsManager'],
+        card: ['WorkerNotificationsManager', 'WorkerPda'],
         departmentCard: ['BasicData'],
     },
     children: [
@@ -75,6 +75,15 @@ export default {
                     component: () =>
                         import('src/pages/Worker/Card/WorkerNotificationsManager.vue'),
                 },
+                {
+                    name: 'WorkerPda',
+                    path: 'pda',
+                    meta: {
+                        title: 'pda',
+                        icon: 'phone_android',
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerPda.vue'),
+                },
             ],
         },
     ],