#7187 - refactorWokerPda #378
|
|
@ -1,126 +1,145 @@
|
|||
<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 VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import useNotify from 'src/composables/useNotify.js';
|
||||
import axios from 'axios';
|
||||
import { ref, computed } from 'vue';
|
||||
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 deviceProductionsFilter = {
|
||||
fields: ['id', 'serialNumber', 'modelFk'],
|
||||
where: { stateFk: 'idle' },
|
||||
order: 'id',
|
||||
};
|
||||
const deviceProductionsOptions = ref([]);
|
||||
const newPDA = ref({});
|
||||
const currentPDA = ref(null);
|
||||
const paginate = ref();
|
||||
const dialog = ref();
|
||||
const route = useRoute();
|
||||
const routeId = computed(() => route.params.id);
|
||||
|
||||
const isAllowedToEdit = computed(() => hasAny(['hr', 'productionAssi']));
|
||||
const initialData = computed(() => {
|
||||
return {
|
||||
userFk: routeId.value,
|
||||
deviceProductionFk: null,
|
||||
simSerialNumber: null,
|
||||
};
|
||||
});
|
||||
|
||||
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) => {
|
||||
const deallocatePDA = async (deviceProductionFk) => {
|
||||
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>
|
||||
<QPage class="column items-center q-pa-md centerCard">
|
||||
<FetchData
|
||||
url="DeviceProductions"
|
||||
:filter="deviceProductionsFilter"
|
||||
url="deviceProductions"
|
||||
:filter="{ where: { stateFk: 'idle' } }"
|
||||
@on-fetch="(data) => (deviceProductions = data)"
|
||||
auto-load
|
||||
@on-fetch="(data) => (deviceProductionsOptions = data)"
|
||||
/>
|
||||
<FetchData
|
||||
ref="fetchCurrentDeviceRef"
|
||||
<VnPaginate
|
||||
ref="paginate"
|
||||
data-key="WorkerPda"
|
||||
url="DeviceProductionUsers"
|
||||
:filter="{
|
||||
where: { userFk: route.params.id },
|
||||
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 }">
|
||||
<QCard
|
||||
flat
|
||||
bordered
|
||||
:key="row.id"
|
||||
v-for="row of rows"
|
||||
class="card q-pt-xs q-mb-sm"
|
||||
>
|
||||
<QItem>
|
||||
<QItemSection side-left>
|
||||
<VnRow>
|
||||
<QField
|
||||
v-if="currentPDA && currentPDA.description"
|
||||
:label="t('worker.pda.currentPDA')"
|
||||
:model-value="currentPDA.description"
|
||||
:editable="false"
|
||||
class="full-width"
|
||||
:model-value="row?.deviceProductionFk"
|
||||
disable
|
||||
>
|
||||
<template #control>
|
||||
<div tabindex="0">
|
||||
{{ currentPDA.description }}
|
||||
{{
|
||||
row?.deviceProductionFk +
|
||||
' - ' +
|
||||
row?.deviceProduction?.modelFk
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="isAllowedToEdit" #append>
|
||||
</QField>
|
||||
<QField
|
||||
:label="t('Current SIM')"
|
||||
:model-value="row?.simSerialNumber"
|
||||
disable
|
||||
>
|
||||
<template #control>
|
||||
<div tabindex="0">{{ row?.simSerialNumber }}</div>
|
||||
</template>
|
||||
</QField>
|
||||
</VnRow>
|
||||
</QItemSection>
|
||||
<QItemSection side>
|
||||
<QIcon
|
||||
name="delete"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
@click="deallocatePDA(data)"
|
||||
@click="deallocatePDA(row.deviceProductionFk)"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('worker.pda.removePDA') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</QItemSection>
|
||||
|
pablone marked this conversation as resolved
|
||||
</QItem>
|
||||
</QCard>
|
||||
</template>
|
||||
</QField>
|
||||
|
||||
</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
|
||||
v-else
|
||||
:label="t('worker.pda.newPDA')"
|
||||
v-model="data.pda"
|
||||
:options="deviceProductionsOptions"
|
||||
option-label="serialNumber"
|
||||
v-model="data.deviceProductionFk"
|
||||
|
pablone marked this conversation as resolved
alexm
commented
fetch y data = {} fetch y data = {}
Sino ix lo ultim q tenies
|
||||
:options="deviceProductions"
|
||||
option-label="id"
|
||||
option-value="id"
|
||||
hide-selected
|
||||
:disable="!isAllowedToEdit"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>ID: {{ scope.opt?.id }}</QItemLabel>
|
||||
<QItemLabel
|
||||
>ID: {{ scope.opt?.id }}</QItemLabel
|
||||
>
|
||||
<QItemLabel caption>
|
||||
{{ scope.opt?.modelFk }},
|
||||
{{ scope.opt?.serialNumber }}
|
||||
|
|
@ -129,12 +148,39 @@ onMounted(async () => await fetchCurrentDeviceRef.value.fetch());
|
|||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
<VnInput
|
||||
v-model="data.simSerialNumber"
|
||||
:label="t('SIM serial number')"
|
||||
use-input
|
||||
/>
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormModel>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Gastar VnConfirm