From 4a39e73625ac39623841e93a6adb8e6d0ffdcdc9 Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Thu, 17 Nov 2022 14:03:50 +0100
Subject: [PATCH] refs #4834 @7h

---
 src/i18n/en/index.js                          |  38 +++
 src/i18n/es/index.js                          |  37 +++
 src/pages/Worker/Card/WorkerCard.vue          |  43 +++
 src/pages/Worker/Card/WorkerSummary.vue       | 280 ++++++++++++++++++
 src/pages/Worker/Card/WorkerSummaryDialog.vue |  21 ++
 src/pages/Worker/WorkerList.vue               |  92 ++++++
 src/pages/Worker/WorkerMain.vue               |  17 ++
 src/router/modules/worker.js                  |  47 +++
 src/router/routes.js                          |   2 +
 9 files changed, 577 insertions(+)
 create mode 100644 src/pages/Worker/Card/WorkerCard.vue
 create mode 100644 src/pages/Worker/Card/WorkerSummary.vue
 create mode 100644 src/pages/Worker/Card/WorkerSummaryDialog.vue
 create mode 100644 src/pages/Worker/WorkerList.vue
 create mode 100644 src/pages/Worker/WorkerMain.vue
 create mode 100644 src/router/modules/worker.js

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 229a5b995..687fbdce7 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -249,6 +249,44 @@ export default {
             returnOfMaterial: 'Return of material authorization (RMA)'
         },
     },
+    worker: {
+        pageTitles: {
+            workers: 'Workers',
+            list: 'List',
+        },
+        list: {
+            name: 'Name',
+            email: 'Email',
+            phone: 'Phone',
+            mobile: 'Mobile',
+            active: 'Active',
+            department: 'Department',
+            schedule: 'Schedule',
+        },
+        card: {
+            workerId: 'Worker ID',
+            name: 'Name',
+            email: 'Email',
+            phone: 'Phone',
+            mobile: 'Mobile',
+            active: 'Active',
+            warehouse: 'Warehouse',
+            agency: 'Agency',
+            salesPerson: 'Sales person',
+        },
+        summary: {
+            basicData: 'Basic data',
+            boss: 'Boss',
+            phoneExtension: 'Phone extension',
+            entPhone: 'Enterprise phone',
+            personalPhone: 'Personal phone',
+            noBoss: 'No boss',
+            userData: 'User data',
+            userId: 'User ID',
+            role: 'Role',
+            sipExtension: 'Extension',
+        },
+    },
     components: {
         topbar: {},
         userPanel: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index c8dff9d30..84586ab47 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -247,6 +247,43 @@ export default {
             picked: 'Recogida',
             returnOfMaterial: 'Autorización de retorno de materiales (RMA)'
         }
+    }, worker: {
+        pageTitles: {
+            workers: 'Trabajadores',
+            list: 'Listado',
+        },
+        list: {
+            name: 'Nombre',
+            email: 'Email',
+            phone: 'Teléfono',
+            mobile: 'Móvil',
+            active: 'Activo',
+            department: 'Departamento',
+            schedule: 'Horario',
+        },
+        card: {
+            workerId: 'ID Trabajador',
+            name: 'Nombre',
+            email: 'Email',
+            phone: 'Teléfono',
+            mobile: 'Móvil',
+            active: 'Activo',
+            warehouse: 'Almacén',
+            agency: 'Empresa',
+            salesPerson: 'Comercial',
+        },
+        summary: {
+            basicData: 'Datos básicos',
+            boss: 'Jefe',
+            phoneExtension: 'Extensión de teléfono',
+            entPhone: 'Teléfono de empresa',
+            personalPhone: 'Teléfono personal',
+            noBoss: 'Sin jefe',
+            userData: 'Datos de usuario',
+            userId: 'ID del usuario',
+            role: 'Rol',
+            sipExtension: 'Extensión',
+        },
     },
     components: {
         topbar: {},
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
new file mode 100644
index 000000000..856710e17
--- /dev/null
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -0,0 +1,43 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useState } from 'src/composables/useState';
+
+const state = useState();
+const { t } = useI18n();
+</script>
+<template>
+    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+        <q-scroll-area class="fit">
+            <q-separator />
+            <q-list>
+                <q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple>
+                    <q-item-section avatar>
+                        <q-icon name="vn:settings" />
+                    </q-item-section>
+                    <q-item-section>{{ t('customer.pageTitles.basicData') }}</q-item-section>
+                </q-item>
+                <!-- <q-item clickable v-ripple>
+                    <q-item-section avatar>
+                        <q-icon name="notes" />
+                    </q-item-section>
+                    <q-item-section>Notes</q-item-section>
+                </q-item>
+                <q-expansion-item icon="more" label="More options" expand-icon-toggle expand-separator>
+                    <q-list>
+                        <q-item clickable v-ripple>
+                            <q-item-section avatar>
+                                <q-icon name="person" />
+                            </q-item-section>
+                            <q-item-section>Option</q-item-section>
+                        </q-item>
+                    </q-list>
+                </q-expansion-item> -->
+            </q-list>
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <q-page class="q-pa-md">
+            <router-view></router-view>
+        </q-page>
+    </q-page-container>
+</template>
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
new file mode 100644
index 000000000..043622340
--- /dev/null
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -0,0 +1,280 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+
+onMounted(() => fetch());
+
+const route = useRoute();
+const { t } = useI18n();
+
+t == t;
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+
+const worker = ref(null);
+
+const filter = {
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['email', 'name', 'nickname', 'roleFk'],
+                include: {
+                    relation: 'role',
+                    scope: {
+                        fields: ['name'],
+                    },
+                },
+            },
+        },
+        {
+            relation: 'department',
+            scope: {
+                include: {
+                    relation: 'department',
+                    scope: {
+                        fields: ['name'],
+                    },
+                },
+            },
+        },
+        {
+            relation: 'boss',
+        },
+        {
+            relation: 'client',
+        },
+        {
+            relation: 'sip',
+        },
+    ],
+};
+
+function fetch() {
+    const id = entityId.value;
+    axios.get(`/Workers/${id}`, { params: { filter } }).then((response) => {
+        worker.value = response.data;
+    });
+}
+
+function sipExtension() {
+    if (worker.value.sip) return worker.value.sip.extension;
+    return '-';
+}
+</script>
+
+<template>
+    <div class="summary container">
+        <q-card>
+            <skeleton-summary v-if="!worker" />
+            <template v-if="worker">
+                <div class="header bg-primary q-pa-sm q-mb-md">{{ worker.id }} - {{ worker.firstName }}</div>
+                <div class="row q-pa-md q-col-gutter-md q-mb-md">
+                    <div class="col">
+                        <q-list>
+                            <q-item-label header class="text-h6">
+                                {{ t('worker.summary.basicData') }}
+                            </q-item-label>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="grid_3x3" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption> ID </q-item-label>
+                                    <q-item-label>{{ worker.id }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="person" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.card.name') }} </q-item-label>
+                                    <q-item-label>{{ worker.user.nickname }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="group" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.list.department') }} </q-item-label>
+                                    <q-item-label>{{ worker.department.department.name }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="email" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.list.email') }} </q-item-label>
+                                    <q-item-label>{{ worker.user.email }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="person" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.summary.boss') }} </q-item-label>
+                                    <q-item-label>
+                                        <router-link
+                                            v-if="worker.boss"
+                                            :to="{ name: 'WorkerSummary', params: { id: worker.boss.id } }"
+                                            target="_blank"
+                                        >
+                                            {{ worker.boss.name == '' ? t('worker.summary.noBoss') : worker.boss.name }}
+
+                                            <q-icon name="open_in_new" />
+                                        </router-link>
+                                    </q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="grid_3x3" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.summary.phoneExtension') }} </q-item-label>
+                                    <q-item-label>
+                                        {{ worker.mobileExtension == '' ? worker.mobileExtension : '-' }}
+                                    </q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="phone" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.summary.entPhone') }} </q-item-label>
+                                    <q-item-label>{{ worker.phone }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="phone_android" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.summary.personalPhone') }} </q-item-label>
+                                    <q-item-label>{{ worker.client.phone }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                        </q-list>
+                    </div>
+                    <div class="col">
+                        <q-list>
+                            <q-item-label header class="text-h6">
+                                {{ t('worker.summary.userData') }}
+                            </q-item-label>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="grid_3x3" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption> {{ t('worker.summary.userId') }} </q-item-label>
+                                    <q-item-label>{{ worker.user.id }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="person" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.card.name') }} </q-item-label>
+                                    <q-item-label>{{ worker.user.nickname }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="group" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.summary.role') }} </q-item-label>
+                                    <q-item-label>{{ worker.user.role.name }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section side>
+                                    <q-icon name="extension" />
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('worker.summary.sipExtension') }} </q-item-label>
+                                    <q-item-label>{{ sipExtension() }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                        </q-list>
+                    </div>
+                </div>
+            </template>
+        </q-card>
+    </div>
+</template>
+<style lang="scss" scoped>
+.container {
+    display: flex;
+    justify-content: center;
+}
+
+.q-card {
+    width: 100%;
+    max-width: 1200px;
+}
+
+.negative {
+    color: red;
+}
+
+.summary {
+    .q-list {
+        .q-item__label--header {
+            display: flex;
+            justify-content: space-between;
+
+            a {
+                color: $primary;
+            }
+        }
+    }
+    .row {
+        flex-wrap: wrap;
+
+        .col {
+            min-width: 250px;
+        }
+    }
+
+    .header {
+        text-align: center;
+        font-size: 18px;
+    }
+
+    #slider-container {
+        max-width: 80%;
+        margin: 0 auto;
+
+        .q-slider {
+            .q-slider__marker-labels:nth-child(1) {
+                transform: none;
+            }
+            .q-slider__marker-labels:nth-child(2) {
+                transform: none;
+                left: auto !important;
+                right: 0%;
+            }
+        }
+    }
+}
+
+.q-dialog .summary {
+    max-width: 1200px;
+}
+</style>
diff --git a/src/pages/Worker/Card/WorkerSummaryDialog.vue b/src/pages/Worker/Card/WorkerSummaryDialog.vue
new file mode 100644
index 000000000..4eedb6f6a
--- /dev/null
+++ b/src/pages/Worker/Card/WorkerSummaryDialog.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import WorkerSummary from './WorkerSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <q-dialog ref="dialogRef" @hide="onDialogHide">
+        <worker-summary v-if="$props.id" :id="$props.id" />
+    </q-dialog>
+</template>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
new file mode 100644
index 000000000..90a14d96d
--- /dev/null
+++ b/src/pages/Worker/WorkerList.vue
@@ -0,0 +1,92 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+import Paginate from 'src/components/Paginate.vue';
+import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue';
+
+const router = useRouter();
+const { t } = useI18n();
+const quasar = useQuasar();
+
+const filter = {
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['email', 'name', 'nickname'],
+            },
+        },
+        {
+            relation: 'department',
+            scope: {
+                include: {
+                    relation: 'department',
+                    scope: {
+                        fields: ['name'],
+                    },
+                },
+            },
+        },
+    ],
+};
+
+function navigate(id) {
+    router.push({ path: `/worker/${id}` });
+}
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: WorkerSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
+</script>
+
+<template>
+    <q-page class="q-pa-md">
+        <paginate url="/Workers" :filter="filter" sort-by="id DESC" auto-load>
+            <template #body="{ rows }">
+                <q-card class="card" v-for="row in rows" :key="row.id">
+                    <q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>
+                        <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                            <q-item-label caption>#{{ row.id }}</q-item-label>
+                            <q-item-label class="text-h6">{{ row.user.nickname }}</q-item-label>
+                            <q-list>
+                                <q-item class="q-pa-none">
+                                    <q-item-section class="q-pa-md">
+                                        <q-item-label caption>{{ t('worker.list.name') }}</q-item-label>
+                                        <q-item-label>{{ row.user.name }}</q-item-label>
+                                    </q-item-section>
+                                    <q-item-section class="q-pa-md">
+                                        <q-item-label caption>{{ t('worker.list.email') }}</q-item-label>
+                                        <q-item-label>{{ row.user.email }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item class="q-pa-none">
+                                    <q-item-section class="q-pa-md">
+                                        <q-item-label caption>{{ t('worker.list.department') }}</q-item-label>
+                                        <q-item-label>{{ row.department.department.name }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
+                        </q-item-section>
+                        <q-separator vertical />
+                        <q-card-actions vertical class="justify-between">
+                            <q-item-section side class="q-pa-md">
+                                <q-btn flat round color="orange" icon="preview" @click="viewSummary(row.id)">
+                                    <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
+                                </q-btn>
+                                <q-btn flat round color="grey-7" icon="schedule" @click="navigate(row.id)">
+                                    <q-tooltip>{{ t('worker.list.schedule') }}</q-tooltip>
+                                </q-btn>
+                            </q-item-section>
+                        </q-card-actions>
+                    </q-item>
+                </q-card>
+            </template>
+        </paginate>
+    </q-page>
+</template>
diff --git a/src/pages/Worker/WorkerMain.vue b/src/pages/Worker/WorkerMain.vue
new file mode 100644
index 000000000..099e82879
--- /dev/null
+++ b/src/pages/Worker/WorkerMain.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useState } from 'src/composables/useState';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const state = useState();
+</script>
+
+<template>
+    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+        <q-scroll-area class="fit text-grey-8">
+            <LeftMenu />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
+</template>
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
new file mode 100644
index 000000000..d5703d04b
--- /dev/null
+++ b/src/router/modules/worker.js
@@ -0,0 +1,47 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    name: 'Worker',
+    path: '/worker',
+    meta: {
+        title: 'workers',
+        icon: 'vn:worker'
+    },
+    component: RouterView,
+    redirect: { name: 'WorkerMain' },
+    children: [
+        {
+            name: 'WorkerMain',
+            path: '',
+            component: () => import('src/pages/Worker/WorkerMain.vue'),
+            redirect: { name: 'WorkerList' },
+            children: [
+                {
+                    name: 'WorkerList',
+                    path: 'list',
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Worker/WorkerList.vue'),
+                },
+            ]
+        },
+        {
+            name: 'WorkerCard',
+            path: ':id',
+            component: () => import('src/pages/Worker/Card/WorkerCard.vue'),
+            redirect: { name: 'WorkerSummary' },
+            children: [
+                {
+                    name: 'WorkerSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary'
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerSummary.vue'),
+                },
+            ]
+        },
+    ]
+};
diff --git a/src/router/routes.js b/src/router/routes.js
index a7261379f..4b9ca728c 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,6 +1,7 @@
 import customer from './modules/customer';
 import ticket from './modules/ticket';
 import claim from './modules/claim';
+import worker from './modules/worker';
 
 const routes = [
     {
@@ -25,6 +26,7 @@ const routes = [
             customer,
             ticket,
             claim,
+            worker,
             {
                 path: '/:pathMatch(.*)*',
                 name: 'NotFound',