src/pages/Worker/Card/WorkerPda.vue

@@ -1,140 +1,186 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { onMounted, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
-import FetchData from 'components/FetchData.vue';
-import FormModel from 'components/FormModel.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import useNotify from 'src/composables/useNotify.js';
-import axios from 'axios';
 import { useRole } from 'src/composables/useRole';
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+import FetchData from 'components/FetchData.vue';
+
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
-const route = useRoute();
 const { t } = useI18n();
 const { notify } = useNotify();
-const { hasAny } = useRole();
 
-const fetchCurrentDeviceRef = ref(null);
+const paginate = ref();
-const deviceProductionsFilter = {
+const dialog = ref();
-    fields: ['id', 'serialNumber', 'modelFk'],
+const route = useRoute();
-    where: { stateFk: 'idle' },
+const routeId = computed(() => route.params.id);
-    order: 'id',
-};
-const deviceProductionsOptions = ref([]);
-const newPDA = ref({});
-const currentPDA = ref(null);
 
-const isAllowedToEdit = computed(() => hasAny(['hr', 'productionAssi']));
+const initialData = computed(() => {
+    return {
+        userFk: routeId.value,
+        deviceProductionFk: null,
+        simSerialNumber: null,
+    };
+});
 
-const setCurrentPDA = (data) => {
+const deallocatePDA = async (deviceProductionFk) => {
-    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,
+            pda: deviceProductionFk,
         });
-        data.pda = null;
-        currentPDA.value = null;
-        await fetchCurrentDeviceRef.value.fetch();
         notify(t('PDA deallocated'), 'positive');
     } catch (err) {
         console.error('Error deallocating PDA');
     }
+    paginate.value.fetch();
 };
-
-onMounted(async () => await fetchCurrentDeviceRef.value.fetch());
 </script>
 
 <template>
-    <FetchData
+    <QPage class="column items-center q-pa-md centerCard">
-        url="DeviceProductions"
+        <FetchData
-        :filter="deviceProductionsFilter"
+            url="deviceProductions"
-        auto-load
+            :filter="{ where: { stateFk: 'idle' } }"
-        @on-fetch="(data) => (deviceProductionsOptions = data)"
+            @on-fetch="(data) => (deviceProductions = data)"
-    />
+            auto-load
-    <FetchData
+        />
-        ref="fetchCurrentDeviceRef"
+        <VnPaginate
-        url="DeviceProductionUsers"
+            ref="paginate"
-        :filter="{
+            data-key="WorkerPda"
-            where: { userFk: route.params.id },
+            url="DeviceProductionUsers"
-            include: { relation: 'deviceProduction' },
+            :filter="{ where: { userFk: routeId } }"
-        }"
+            order="id"
-        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
-            :default-buttons="{ save: { label: 'globals.assign', color: 'primary' } }"
-            @on-data-saved="(_, data) => setCurrentPDA(data)"
         >
-            <template #form="{ data }">
+            <template #body="{ rows }">
-                <QField
+                <QCard
-                    v-if="currentPDA && currentPDA.description"
+                    flat
-                    :label="t('worker.pda.currentPDA')"
+                    bordered
-                    :model-value="currentPDA.description"
+                    :key="row.id"
-                    :editable="false"
+                    v-for="row of rows"
-                    class="full-width"
+                    class="card q-pt-xs q-mb-sm"
                 >
-                    <template #control>
+                    <QItem>
-                        <div tabindex="0">
+                        <QItemSection side-left>
-                            {{ currentPDA.description }}
+                            <VnRow>
-                        </div>
+                                <QField
-                    </template>
+                                    :label="t('worker.pda.currentPDA')"
-                    <template v-if="isAllowedToEdit" #append>
+                                    :model-value="row?.deviceProductionFk"
-                        <QIcon
+                                    disable
-                            name="delete"
+                                >
-                            size="sm"
+                                    <template #control>
-                            class="cursor-pointer"
+                                        <div tabindex="0">
-                            color="primary"
+                                            {{
-                            @click="deallocatePDA(data)"
+                                                row?.deviceProductionFk +
-                        >
+                                                ' - ' +
-                            <QTooltip>
+                                                row?.deviceProduction?.modelFk
-                                {{ t('worker.pda.removePDA') }}
+                                            }}
-                            </QTooltip>
+                                        </div>
-                        </QIcon>
+                                    </template>
-                    </template>
+                                </QField>
-                </QField>
+                                <QField
-
+                                    :label="t('Current SIM')"
-                <VnSelect
+                                    :model-value="row?.simSerialNumber"
-                    v-else
+                                    disable
-                    :label="t('worker.pda.newPDA')"
+                                >
-                    v-model="data.pda"
+                                    <template #control>
-                    :options="deviceProductionsOptions"
+                                        <div tabindex="0">{{ row?.simSerialNumber }}</div>
-                    option-label="serialNumber"
+                                    </template>
-                    option-value="id"
+                                </QField>
-                    hide-selected
+                            </VnRow>
-                    :disable="!isAllowedToEdit"
+                        </QItemSection>
-                >
+                        <QItemSection side>
-                    <template #option="scope">
+                            <QIcon
-                        <QItem v-bind="scope.itemProps">
+                                name="delete"
-                            <QItemSection>
+                                size="sm"
-                                <QItemLabel>ID: {{ scope.opt?.id }}</QItemLabel>
+                                class="cursor-pointer"
-                                <QItemLabel caption>
+                                color="primary"
-                                    {{ scope.opt?.modelFk }},
+                                @click="deallocatePDA(row.deviceProductionFk)"
-                                    {{ scope.opt?.serialNumber }}
+                            >
-                                </QItemLabel>
+                                <QTooltip>
-                            </QItemSection>
+                                    {{ t('worker.pda.removePDA') }}
-                        </QItem>
+                                </QTooltip>
-                    </template>
+                            </QIcon>
-                </VnSelect>
+                        </QItemSection>
+                    </QItem>
+                </QCard>
             </template>
-        </FormModel>
+        </VnPaginate>
+        <QPageSticky :offset="[18, 18]">
+            <QBtn @click.stop="dialog.show()" color="primary" fab icon="add">
+                <QDialog ref="dialog">
+                    <FormModelPopup
+                        :title="t('Add new device')"
+                        url-create="DeviceProductionUsers"
+                        model="DeviceProductionUser"
+                        :form-initial-data="initialData"
+                        @on-data-saved="paginate.fetch()"
+                    >
+                        <template #form-inputs="{ data }">
+                            <VnRow class="row q-gutter-md q-mb-md">
+                                <VnSelect
+                                    :label="t('worker.pda.newPDA')"
+                                    v-model="data.deviceProductionFk"
+                                    :options="deviceProductions"
+                                    option-label="id"
+                                    option-value="id"
+                                    hide-selected
+                                >
+                                    <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>
+                                </VnSelect>
+                                <VnInput
+                                    v-model="data.simSerialNumber"
+                                    :label="t('SIM serial number')"
+                                    use-input
+                                />
+                            </VnRow>
+                        </template>
+                    </FormModelPopup>
+                </QDialog>
+            </QBtn>
+            <QTooltip>
+                {{ t('globals.new') }}
+            </QTooltip>
+        </QPageSticky>
     </QPage>
 </template>
-
+<style lang="scss" scoped>
+.centerCard {
+    padding: 5%;
+    width: 100%;
+    max-width: 60%;
+    margin: 0 auto;
+}
+.label {
+    color: red;
+}
+.q-field {
+    margin-bottom: 0px;
+    padding-bottom: 0px;
+}
+</style>
 <i18n>
 es:
     PDA deallocated: PDA desasignada
+    Current SIM: SIM actual
 </i18n>