Workers WIP

src/components/CreateBankEntityForm.vue

@@ -26,10 +26,6 @@ const closeButton = ref(null);
 const countriesOptions = ref([]);
 const loading = ref(false);
 
-const setCountriesOptions = (data) => {
-    countriesOptions.value = data;
-};
-
 const onDataSaved = (data) => {
     emit('onDataSaved', data);
     closeForm();
@@ -43,7 +39,7 @@ const closeForm = () => {
 <template>
     <FetchData
         url="Countries"
-        @on-fetch="(data) => setCountriesOptions(data)"
+        @on-fetch="(data) => (countriesOptions = data)"
         :filter="countriesFilter"
         auto-load
     />

src/components/ui/VnTree.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import axios from 'axios';
+
+const { t } = useI18n();
+
+const treeRef = ref(null);
+const expanded = ref([]);
+
+const nodes = ref([{ id: null, name: t('Departments'), sons: true, children: [{}] }]);
+
+const fetchedChildrensSet = ref(new Set());
+
+const onNodeExpanded = (nodeKeysArray) => {
+    // Verificar si el nodo ya fue expandido
+    if (!fetchedChildrensSet.value.has(nodeKeysArray.at(-1))) {
+        fetchedChildrensSet.value.add(nodeKeysArray.at(-1));
+        fetchNodeLeaves(nodeKeysArray.at(-1)); // Llamar a la función para obtener los nodos hijos
+    }
+};
+
+const fetchNodeLeaves = async (nodeKey) => {
+    try {
+        const node = treeRef.value.getNodeByKey(nodeKey);
+        if (!node || node.sons === 0) return;
+
+        const params = { parentId: node.id };
+        const response = await axios.get('/departments/getLeaves', { params });
+
+        // Si hay datos en la respuesta y tiene hijos, agregarlos al nodo actual
+        if (response.data) {
+            node.children = response.data;
+            node.children.forEach((node) => {
+                if (node.sons) node.children = [{}];
+            });
+        }
+    } catch (err) {
+        console.error('Error fetching department leaves');
+        throw new Error();
+    }
+};
+
+const removeNode = () => {};
+
+const createNode = async () => {
+    // const param = null;
+    // const response = axios.post('departments/createChild', param);
+};
+
+// const redirectToDepartmentSummary = () => {
+//     console.log('redirect to department summary:: ');
+// };
+</script>
+
+<template>
+    <QCard class="full-width" style="max-width: 800px">
+        <QTree
+            ref="treeRef"
+            :nodes="nodes"
+            node-key="id"
+            label-key="name"
+            v-model:expanded="expanded"
+            @update:expanded="onNodeExpanded($event)"
+        >
+            <template #default-header="prop">
+                <div class="row justify-between full-width bg-red q-pr-md">
+                    <!-- <pre>{{ prop }}</pre> -->
+                    <span class="text-uppercase">
+                        {{ prop.node.name }}
+                    </span>
+                    <div
+                        class="row bg-green justify-between"
+                        style="max-width: max-content"
+                    >
+                        <QIcon
+                            v-if="prop.node.id"
+                            name="delete"
+                            color="primary"
+                            size="sm"
+                            class="q-pr-xs"
+                            @click.stop="removeNode()"
+                        >
+                            <QTooltip>
+                                {{ t('Remove') }}
+                            </QTooltip>
+                        </QIcon>
+                        <QIcon
+                            name="add"
+                            color="primary"
+                            size="sm"
+                            @click.stop="createNode()"
+                        >
+                            <QTooltip>
+                                {{ t('Create') }}
+                            </QTooltip></QIcon
+                        >
+                    </div>
+                </div>
+            </template>
+        </QTree>
+        <pre>{{ nodes }}</pre>
+    </QCard>
+</template>
+
+<i18n>
+    es:
+        Departments: Departamentos
+        Remove: Quitar
+        Create: Crear
+    </i18n>

src/i18n/en/index.js

@@ -566,7 +566,7 @@ export default {
             landed: 'Landed',
             hour: 'Hour',
             agency: 'Agency',
-            total: 'Total'
+            total: 'Total',
         },
         form: {
             clientFk: 'Client',
@@ -575,7 +575,7 @@ export default {
             agencyModeFk: 'Agency',
         },
         list: {
-            newOrder: 'New Order'
+            newOrder: 'New Order',
         },
         summary: {
             basket: 'Basket',
@@ -601,8 +601,8 @@ export default {
             description: 'Description',
             quantity: 'Quantity',
             price: 'Price',
-            amount: 'Amount'
-        }
+            amount: 'Amount',
+        },
     },
     worker: {
         pageTitles: {
@@ -612,6 +612,7 @@ export default {
             summary: 'Summary',
             notifications: 'Notifications',
             workerCreate: 'New worker',
+            department: 'Department',
         },
         list: {
             name: 'Name',

src/i18n/es/index.js

@@ -475,7 +475,7 @@ export default {
             landed: 'F. entrega',
             hour: 'Hora',
             agency: 'Agencia',
-            total: 'Total'
+            total: 'Total',
         },
         form: {
             clientFk: 'Cliente',
@@ -484,7 +484,7 @@ export default {
             agencyModeFk: 'Agencia',
         },
         list: {
-            newOrder: 'Nuevo Pedido'
+            newOrder: 'Nuevo Pedido',
         },
         summary: {
             basket: 'Cesta',
@@ -510,8 +510,8 @@ export default {
             description: 'Descripción',
             quantity: 'Cantidad',
             price: 'Precio',
-            amount: 'Monto'
-        }
+            amount: 'Monto',
+        },
     },
     shelving: {
         pageTitles: {
@@ -612,6 +612,7 @@ export default {
             summary: 'Resumen',
             notifications: 'Notificaciones',
             workerCreate: 'Nuevo trabajador',
+            department: 'Departamentos',
         },
         list: {
             name: 'Nombre',

src/pages/Worker/WorkerDepartment.vue

@@ -0,0 +1,15 @@
+<script setup>
+import VnTree from 'components/ui/VnTree.vue';
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <VnTree />
+    </QPage>
+</template>
+
+<i18n>
+es:
+    Search worker: Buscar trabajador
+    You can search by worker id or name: Puedes buscar por id o nombre del trabajador
+</i18n>

src/router/modules/worker.js

@@ -10,7 +10,7 @@ export default {
     component: RouterView,
     redirect: { name: 'WorkerMain' },
     menus: {
-        main: ['WorkerList'],
+        main: ['WorkerList', 'WorkerDepartment'],
         card: ['WorkerNotificationsManager'],
     },
     children: [
@@ -29,6 +29,15 @@ export default {
                     },
                     component: () => import('src/pages/Worker/WorkerList.vue'),
                 },
+                {
+                    path: 'department',
+                    name: 'WorkerDepartment',
+                    meta: {
+                        title: 'department',
+                        icon: 'vn:greuge',
+                    },
+                    component: () => import('src/pages/Worker/WorkerDepartment.vue'),
+                },
                 {
                     path: 'create',
                     name: 'WorkerCreate',