Desarrollo de los submodulos basic data, notes y pbx

src/i18n/en/index.js

@@ -830,12 +830,14 @@ export default {
         pageTitles: {
             workers: 'Workers',
             list: 'List',
-            basicData: 'Basic data',
             summary: 'Summary',
-            notifications: 'Notifications',
             workerCreate: 'New worker',
             department: 'Department',
+            basicData: 'Basic data',
+            notes: 'Notes',
             pda: 'PDA',
+            notifications: 'Notifications',
+            pbx: 'Private Branch Exchange',
         },
         list: {
             name: 'Name',
@@ -954,7 +956,7 @@ export default {
             roadmap: 'Roadmap',
             summary: 'Summary',
             basicData: 'Basic Data',
-            stops: 'Stops'
+            stops: 'Stops',
         },
     },
     roadmap: {
@@ -962,7 +964,7 @@ export default {
             roadmap: 'Roadmap',
             summary: 'Summary',
             basicData: 'Basic Data',
-            stops: 'Stops'
+            stops: 'Stops',
         },
     },
     route: {

src/i18n/es/index.js

@@ -830,12 +830,14 @@ export default {
         pageTitles: {
             workers: 'Trabajadores',
             list: 'Listado',
-            basicData: 'Datos básicos',
             summary: 'Resumen',
-            notifications: 'Notificaciones',
             workerCreate: 'Nuevo trabajador',
             department: 'Departamentos',
+            basicData: 'Datos básicos',
+            notes: 'Notas',
             pda: 'PDA',
+            notifications: 'Notificaciones',
+            pbx: 'Centralita',
         },
         list: {
             name: 'Nombre',
@@ -954,7 +956,7 @@ export default {
             roadmap: 'Troncales',
             summary: 'Resumen',
             basicData: 'Datos básicos',
-            stops: 'Paradas'
+            stops: 'Paradas',
         },
     },
     roadmap: {
@@ -962,7 +964,7 @@ export default {
             roadmap: 'Troncales',
             summary: 'Resumen',
             basicData: 'Datos básicos',
-            stops: 'Paradas'
+            stops: 'Paradas',
         },
     },
     route: {

src/pages/Worker/Card/WorkerBasicData.vue

@@ -0,0 +1,258 @@
+<script setup>
+import { onBeforeMount, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import axios from 'axios';
+
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const data = ref({});
+const workersOptions = ref([]);
+const countriesOptions = ref([]);
+const educationLevelsOptions = ref([]);
+
+const workerFilter = { fields: ['id', 'nickname'], where: { id: null } };
+const workersFilter = {
+    fields: ['id', 'nickname'],
+    order: 'nickname ASC',
+    limit: 30,
+    skip: 60,
+};
+const countriesFilter = {
+    fields: ['id', 'country', 'code'],
+    order: 'country ASC',
+    limit: 30,
+};
+const educationLevelsFilter = { fields: ['id', 'name'], order: 'name ASC', limit: 30 };
+
+const maritalStatus = [
+    { code: 'M', name: t('Married') },
+    { code: 'S', name: t('Single') },
+];
+
+onBeforeMount(() => {
+    getData(route.params.id);
+});
+
+watch(
+    () => route.params.id,
+    (newValue) => {
+        getData(newValue);
+    }
+);
+
+const getData = async (id) => {
+    try {
+        const worker = await axios.get(`Workers/${id}`);
+        workerFilter.where.id = worker.data.bossFk;
+        data.value = worker.data;
+
+        const workers = await axios.get('Workers/search', {
+            params: { filter: JSON.stringify(workerFilter) },
+        });
+        data.value.bossFk = Number(workers.data[0].code);
+    } catch (error) {
+        data.value = {
+            SSN: null,
+            bossFk: null,
+            educationLevelFk: null,
+            firstName: null,
+            lastName: null,
+            locker: null,
+            maritalStatus: null,
+            mobileExtension: null,
+            originCountryFk: null,
+            phone: null,
+        };
+        console.error(error);
+    }
+};
+
+const saveData = async () => {
+    try {
+        await axios.patch(`Workers/${route.params.id}`, data.value);
+    } catch (error) {
+        console.error(error);
+    }
+};
+</script>
+
+<template>
+    <fetch-data
+        :filter="workersFilter"
+        @on-fetch="(data) => (workersOptions = data)"
+        auto-load
+        url="Workers/search"
+    />
+    <fetch-data
+        :filter="countriesFilter"
+        @on-fetch="(data) => (countriesOptions = data)"
+        auto-load
+        url="Countries"
+    />
+    <fetch-data
+        :filter="educationLevelsFilter"
+        @on-fetch="(data) => (educationLevelsOptions = data)"
+        auto-load
+        url="EducationLevels"
+    />
+
+    <Teleport to="#st-actions">
+        <QBtnGroup push class="q-gutter-x-sm">
+            <QBtn
+                :disabled="!hasChanged"
+                :label="t('globals.reset')"
+                :loading="isLoading"
+                @click="setInitialData"
+                color="primary"
+                flat
+                icon="restart_alt"
+            />
+            <QBtn
+                :disabled="isLoading"
+                :label="t('globals.save')"
+                :loading="isLoading"
+                @click.stop="saveData"
+                color="primary"
+                icon="save"
+            />
+        </QBtnGroup>
+    </Teleport>
+
+    <div class="full-width flex justify-center">
+        <QCard class="card-width q-pa-lg">
+            <QCardSection>
+                <QForm>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <VnInput
+                                :label="t('Name')"
+                                clearable
+                                v-model="data.firstName"
+                            />
+                        </div>
+                        <div class="col">
+                            <VnInput
+                                :label="t('Last name')"
+                                clearable
+                                v-model="data.lastName"
+                            />
+                        </div>
+                    </VnRow>
+
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <VnInput
+                                v-model="data.phone"
+                                :label="t('Business phone')"
+                                clearable
+                            />
+                        </div>
+                        <div class="col">
+                            <VnInput
+                                v-model="data.mobileExtension"
+                                :label="t('Mobile extension')"
+                                clearable
+                            />
+                        </div>
+                    </VnRow>
+
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <VnSelectFilter
+                                :label="t('Boss')"
+                                :options="workersOptions"
+                                hide-selected
+                                option-label="nickname"
+                                option-value="id"
+                                v-model="data.bossFk"
+                            >
+                                <template #option="scope">
+                                    <QItem v-bind="scope.itemProps">
+                                        <QItemSection>
+                                            <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                            <QItemLabel caption>
+                                                {{ scope.opt?.nickname }},
+                                                {{ scope.opt?.code }}
+                                            </QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                </template>
+                            </VnSelectFilter>
+                        </div>
+                        <div class="col">
+                            <VnSelectFilter
+                                :label="t('Marital status')"
+                                :options="maritalStatus"
+                                hide-selected
+                                option-label="name"
+                                option-value="code"
+                                v-model="data.maritalStatus"
+                            />
+                        </div>
+                    </VnRow>
+
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <VnSelectFilter
+                                :label="t('Origin country')"
+                                :options="countriesOptions"
+                                hide-selected
+                                option-label="country"
+                                option-value="id"
+                                v-model="data.originCountryFk"
+                            />
+                        </div>
+                        <div class="col">
+                            <VnSelectFilter
+                                :label="t('Education level')"
+                                :options="educationLevelsOptions"
+                                hide-selected
+                                option-label="name"
+                                option-value="id"
+                                v-model="data.educationLevelFk"
+                            />
+                        </div>
+                    </VnRow>
+
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <VnInput v-model="data.SSN" :label="t('SSN')" clearable />
+                        </div>
+                        <div class="col">
+                            <VnInput
+                                v-model="data.locker"
+                                type="number"
+                                :label="t('Locker')"
+                                clearable
+                            />
+                        </div>
+                    </VnRow>
+                </QForm>
+            </QCardSection>
+        </QCard>
+    </div>
+</template>
+
+<i18n>
+es:
+    Name: Nombre
+    Last name: Apellidos
+    Business phone: Teléfono de empresa
+    Mobile extension: Extensión móvil
+    Boss: Jefe
+    Marital status: Estado civil
+    Married: Casado/a
+    Single: Soltero/a
+    Origin country: País origen
+    Education level: Nivel educación
+    SSN: NSS
+    Locker: Taquilla
+</i18n>

src/pages/Worker/Card/WorkerNotes.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { onBeforeMount, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import axios from 'axios';
+import { date } from 'quasar';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const rows = ref([]);
+
+const filter = {
+    order: 'created DESC',
+    where: { workerFk: null },
+    include: { relation: 'user' },
+};
+
+onBeforeMount(() => {
+    getData(route.params.id);
+});
+
+watch(
+    () => route.params.id,
+    (newValue) => {
+        getData(newValue);
+    }
+);
+
+const getData = async (id) => {
+    filter.where.workerFk = id;
+    try {
+        const { data } = await axios.get('WorkerObservations', {
+            params: { filter: JSON.stringify(filter) },
+        });
+        rows.value = data;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const toWorkerNoteCreate = () => {
+    router.push({ name: 'WorkerNoteCreate' });
+};
+</script>
+
+<template>
+    <div class="full-width flex justify-center">
+        <QCard class="card-width q-pa-lg" v-if="rows.length">
+            <div>
+                <QCard
+                    v-for="(item, index) in rows"
+                    :key="index"
+                    :class="{
+                        'q-pa-md': true,
+                        'q-rounded': true,
+                        'custom-border': true,
+                        'q-mb-md': index < rows.length - 1,
+                    }"
+                >
+                    <div class="flex justify-end">
+                        <p class="color-vn-label">
+                            {{ date.formatDate(item?.created, 'DD-MM-YYYY HH:mm') }}
+                        </p>
+                    </div>
+                    <h6 class="q-mt-none q-mb-none">{{ item.text }}</h6>
+                </QCard>
+            </div>
+        </QCard>
+        <div v-else>
+            <h5 class="flex justify-center color-vn-label">
+                {{ t('globals.noResults') }}
+            </h5>
+        </div>
+    </div>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toWorkerNoteCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New note') }}
+        </QTooltip>
+    </QPageSticky>
+</template>
+
+<style lang="scss">
+.custom-border {
+    border: 2px solid var(--vn-light-gray);
+    border-radius: 10px;
+    padding: 10px;
+}
+</style>
+
+<i18n>
+es:
+    New note: Nueva nota
+</i18n>

src/pages/Worker/Card/WorkerPBX.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { computed, onBeforeMount, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import axios from 'axios';
+
+import { useStateStore } from 'stores/useStateStore';
+import useNotify from 'src/composables/useNotify';
+
+import VnRow from 'components/ui/VnRow.vue';
+
+const { notify } = useNotify();
+const { t } = useI18n();
+const route = useRoute();
+const stateStore = useStateStore();
+
+const isLoading = ref(false);
+const extension = ref('');
+const worker = ref({});
+const workersRef = ref(null);
+const id = ref(route.params.id);
+
+const hasChanged = computed(() => {
+    return extension.value !== worker.value?.sip?.extension;
+});
+
+onBeforeMount(() => getData(route.params.id));
+
+watch(
+    () => route.params.id,
+    (newValue) => {
+        getData(newValue);
+    }
+);
+
+const getData = async (id) => {
+    const filter = {
+        include: [
+            {
+                relation: 'sip',
+            },
+        ],
+    };
+
+    try {
+        const url = `Workers/${id}`;
+        const { data } = await axios.get(url, {
+            params: { filter: JSON.stringify(filter) },
+        });
+        extension.value = data.sip.extension;
+        worker.value = data;
+    } catch (error) {
+        console.error(error.error);
+    }
+};
+
+const setInitialData = () => {
+    extension.value = worker.value?.sip?.extension;
+};
+
+const onSubmit = async () => {
+    isLoading.value = true;
+
+    const payload = {
+        extension: extension.value,
+        userFk: Number(route.params.id),
+    };
+    try {
+        await axios.patch('Sips', payload);
+        notify('worker.card.dataSavedCard', 'positive');
+
+        if (workersRef.value) workersRef.value.fetch();
+    } catch (error) {
+        notify(error.error, 'negative');
+    } finally {
+        isLoading.value = false;
+    }
+};
+</script>
+
+<template>
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+        <QBtnGroup push class="q-gutter-x-sm">
+            <QBtn
+                :disabled="!hasChanged"
+                :label="t('globals.reset')"
+                :loading="isLoading"
+                @click="setInitialData"
+                color="primary"
+                flat
+                icon="restart_alt"
+                type="reset"
+            />
+            <QBtn
+                :disabled="!hasChanged"
+                :label="t('globals.save')"
+                :loading="isLoading"
+                @click="onSubmit"
+                color="primary"
+                icon="save"
+            />
+        </QBtnGroup>
+    </Teleport>
+
+    <div class="full-width flex justify-center">
+        <QCard class="card-width q-pa-lg">
+            <QCardSection>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput :label="t('Extension')" v-model="extension" />
+                    </div>
+                </VnRow>
+            </QCardSection>
+        </QCard>
+    </div>
+</template>
+
+<i18n>
+es:
+    Extension: Extensión
+</i18n>

src/pages/Worker/components/WorkerNoteCreate.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import axios from 'axios';
+
+import useNotify from 'src/composables/useNotify';
+
+import VnRow from 'components/ui/VnRow.vue';
+
+const { notify } = useNotify();
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const isLoading = ref(false);
+const text = ref('');
+
+const hasChanged = computed(() => {
+    return text.value !== '';
+});
+
+const onSubmit = async () => {
+    isLoading.value = true;
+
+    const payload = {
+        text: text.value,
+        workerFk: Number(route.params.id),
+    };
+    try {
+        await axios.post('WorkerObservations', payload);
+        text.value = null;
+        notify('globals.dataSaved', 'positive');
+        toWorkerNotes();
+    } catch (error) {
+        notify(error.error, 'negative');
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const toWorkerNotes = () => {
+    router.push({
+        name: 'WorkerNotes',
+        params: {
+            id: route.params.id,
+        },
+    });
+};
+</script>
+
+<template>
+    <Teleport to="#st-actions">
+        <QBtnGroup push class="q-gutter-x-sm">
+            <QBtn
+                :disabled="isLoading"
+                :label="t('globals.cancel')"
+                :loading="isLoading"
+                @click="toWorkerNotes"
+                color="primary"
+                flat
+                icon="close"
+            />
+            <QBtn
+                :disabled="!hasChanged"
+                :label="t('globals.save')"
+                :loading="isLoading"
+                @click="onSubmit"
+                color="primary"
+                icon="save"
+            />
+        </QBtnGroup>
+    </Teleport>
+
+    <div class="full-width flex justify-center">
+        <QCard class="card-width q-pa-lg">
+            <QCardSection>
+                <QForm>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <QInput :label="t('Note')" type="textarea" v-model="text" />
+                        </div>
+                    </VnRow>
+                </QForm>
+            </QCardSection>
+        </QCard>
+    </div>
+</template>
+
+<i18n>
+es:
+    Note: Nota
+</i18n>

src/router/modules/worker.js

@@ -12,7 +12,13 @@ export default {
     redirect: { name: 'WorkerMain' },
     menus: {
         main: ['WorkerList', 'WorkerDepartment'],
-        card: ['WorkerNotificationsManager', 'WorkerPda'],
+        card: [
+            'WorkerBasicData',
+            'WorkerNotes',
+            'WorkerPda',
+            'WorkerNotificationsManager',
+            'WorkerPBX',
+        ],
         departmentCard: ['BasicData'],
     },
     children: [
@@ -67,14 +73,41 @@ export default {
                     component: () => import('src/pages/Worker/Card/WorkerSummary.vue'),
                 },
                 {
-                    name: 'WorkerNotificationsManager',
-                    path: 'notifications',
+                    path: 'basic-data',
+                    name: 'WorkerBasicData',
                     meta: {
-                        title: 'notifications',
-                        icon: 'notifications',
+                        title: 'basicData',
+                        icon: 'vn:settings',
                     },
-                    component: () =>
-                        import('src/pages/Worker/Card/WorkerNotificationsManager.vue'),
+                    component: () => import('src/pages/Worker/Card/WorkerBasicData.vue'),
+                },
+                {
+                    path: 'notes',
+                    name: 'NotesCard',
+                    redirect: { name: 'WorkerNotes' },
+                    children: [
+                        {
+                            path: '',
+                            name: 'WorkerNotes',
+                            meta: {
+                                title: 'notes',
+                                icon: 'vn:notes',
+                            },
+                            component: () =>
+                                import('src/pages/Worker/Card/WorkerNotes.vue'),
+                        },
+                        {
+                            path: 'create',
+                            name: 'WorkerNoteCreate',
+                            meta: {
+                                title: 'note-create',
+                            },
+                            component: () =>
+                                import(
+                                    'src/pages/Worker/components/WorkerNoteCreate.vue'
+                                ),
+                        },
+                    ],
                 },
                 {
                     name: 'WorkerPda',
@@ -85,6 +118,25 @@ export default {
                     },
                     component: () => import('src/pages/Worker/Card/WorkerPda.vue'),
                 },
+                {
+                    name: 'WorkerNotificationsManager',
+                    path: 'notifications',
+                    meta: {
+                        title: 'notifications',
+                        icon: 'notifications',
+                    },
+                    component: () =>
+                        import('src/pages/Worker/Card/WorkerNotificationsManager.vue'),
+                },
+                {
+                    path: 'pbx',
+                    name: 'WorkerPBX',
+                    meta: {
+                        title: 'pbx',
+                        icon: 'vn:pbx',
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerPBX.vue'),
+                },
             ],
         },
     ],