refs #4834 worker card & descriptor implementation @1h

src/i18n/en/index.js

@@ -253,6 +253,7 @@ export default {
         pageTitles: {
             workers: 'Workers',
             list: 'List',
+            basicData: 'Basic data',
         },
         list: {
             name: 'Name',
@@ -305,4 +306,9 @@ export default {
             moreOptions: 'More options'
         }
     },
+    notFound: {
+        pageTitles: {
+            undefined: 'Undefined',
+        },
+    }
 };

src/i18n/es/index.js

@@ -251,6 +251,7 @@ export default {
         pageTitles: {
             workers: 'Trabajadores',
             list: 'Listado',
+            basicData: 'Datos básicos',
         },
         list: {
             name: 'Nombre',
@@ -303,4 +304,9 @@ export default {
             moreOptions: 'Más opciones',
         }
     },
+    notFound: {
+        pageTitles: {
+            undefined: 'Página no encontrada',
+        },
+    }
 };

src/pages/Worker/Card/WorkerCard.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
+import WorkerDescriptor from './WorkerDescriptor.vue';
 
 const state = useState();
 const { t } = useI18n();
@@ -8,30 +9,15 @@ const { t } = useI18n();
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
+            <worker-descriptor />
             <q-separator />
             <q-list>
-                <q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple>
+                <q-item :to="{ name: 'WorkerBasicData' }" clickable v-ripple>
                     <q-item-section avatar>
-                        <q-icon name="vn:settings" />
+                        <q-icon name="person" />
                     </q-item-section>
-                    <q-item-section>{{ t('customer.pageTitles.basicData') }}</q-item-section>
+                    <q-item-section>{{ t('worker.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>
@@ -41,3 +27,32 @@ const { t } = useI18n();
         </q-page>
     </q-page-container>
 </template>
+
+<style lang="scss">
+.q-scrollarea__content {
+    max-width: 100%;
+}
+</style>
+
+<style lang="scss" scoped>
+.descriptor {
+    max-width: 256px;
+
+    h5 {
+        margin: 0 15px;
+    }
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .q-card__actions {
+        justify-content: center;
+    }
+
+    #descriptor-skeleton .q-card__actions {
+        justify-content: space-between;
+    }
+}
+</style>

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { onMounted, computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+onMounted(async () => {
+    await fetch();
+});
+
+const route = useRoute();
+
+const { t } = useI18n();
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const worker = ref();
+
+const filter = {
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['email', 'name', 'nickname'],
+            },
+        },
+        {
+            relation: 'department',
+            scope: {
+                include: [
+                    {
+                        relation: 'department',
+                    },
+                ],
+            },
+        },
+        {
+            relation: 'sip',
+        },
+    ],
+};
+
+async function fetch() {
+    const { data } = await axios.get(`Workers/${entityId.value}`, {
+        params: {
+            filter: JSON.stringify(filter),
+        },
+    });
+
+    if (data) worker.value = data;
+}
+
+function sipExtension() {
+    if (worker.value.sip) return worker.value.sip.extension;
+    return '-';
+}
+</script>
+<template>
+    <card-descriptor v-if="worker" module="Worker" :data="worker" :description="worker.user.nickname">
+        <template #body>
+            <q-list>
+                <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="email" />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption> {{ t('worker.card.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="work" />
+                    </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="phone" />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption> {{ t('worker.card.phone') }} </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="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>
+        </template>
+    </card-descriptor>
+</template>

src/pages/Worker/Card/WorkerPopover.vue

@@ -0,0 +1,15 @@
+<script setup>
+import WorkerDescriptor from './WorkerDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+<template>
+    <q-card>
+        <worker-descriptor v-if="$props.id" :id="$props.id" />
+    </q-card>
+</template>

src/pages/Worker/Card/WorkerSummary.vue

@@ -104,7 +104,7 @@ function sipExtension() {
                             </q-item>
                             <q-item>
                                 <q-item-section side>
-                                    <q-icon name="group" />
+                                    <q-icon name="work" />
                                 </q-item-section>
                                 <q-item-section>
                                     <q-item-label caption>{{ t('worker.list.department') }} </q-item-label>