Department tree and summary view

src/components/CreateDepartmentChild.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { onMounted, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FormModel from 'components/FormModel.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const $props = defineProps({
+    parentId: {
+        type: Number,
+        default: null,
+    },
+});
+
+const { t } = useI18n();
+
+const departmentChildData = reactive({
+    name: null,
+});
+
+const closeButton = ref(null);
+const isLoading = ref(false);
+
+const onDataSaved = () => {
+    emit('onDataSaved');
+    closeForm();
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+
+onMounted(() => {
+    if ($props.parentId) departmentChildData.parentId = $props.parentId;
+});
+</script>
+
+<template>
+    <FormModel
+        :form-initial-data="departmentChildData"
+        :observe-form-changes="false"
+        :default-actions="false"
+        url-create="departments/createChild"
+        @on-data-saved="onDataSaved()"
+    >
+        <template #form="{ data }">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="sm" />
+            </span>
+            <h1 class="title">{{ t('New department') }}</h1>
+            <VnRow class="row q-gutter-md q-mb-md" style="min-width: 250px">
+                <div class="col">
+                    <VnInput :label="t('Name')" v-model="data.name" />
+                </div>
+            </VnRow>
+            <div class="q-mt-lg row justify-end">
+                <QBtn
+                    :label="t('globals.cancel')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    v-close-popup
+                />
+                <QBtn
+                    :label="t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
+            </div>
+        </template>
+    </FormModel>
+</template>
+
+<style lang="scss" scoped>
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+</style>
+
+<i18n>
+es:
+    Name: Nombre
+    New department: Nuevo departamento
+</i18n>

src/components/ui/VnTree.vue

@@ -1,12 +1,22 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+
+import CreateDepartmentChild from '../CreateDepartmentChild.vue';
 
 import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
 
+const quasar = useQuasar();
 const { t } = useI18n();
+const router = useRouter();
+const { notify } = useNotify();
 
 const treeRef = ref(null);
+const showCreateNodeFormVal = ref(false);
+const creationNodeSelectedId = ref(null);
 const expanded = ref([]);
 
 const nodes = ref([{ id: null, name: t('Departments'), sons: true, children: [{}] }]);
@@ -42,16 +52,41 @@ const fetchNodeLeaves = async (nodeKey) => {
     }
 };
 
-const removeNode = () => {};
+const removeNode = (node) => {
-
+    quasar
-const createNode = async () => {
+        .dialog({
-    // const param = null;
+            title: 'Are you sure you want to delete it?',
-    // const response = axios.post('departments/createChild', param);
+            message: 'Delete department',
+            ok: {
+                push: true,
+                color: 'primary',
+            },
+            cancel: true,
+        })
+        .onOk(async () => {
+            try {
+                await axios.post(`/Departments/${node.id}/removeChild`, node.id);
+                notify('department.departmentRemoved', 'positive');
+                await fetchNodeLeaves(node.parentFk);
+            } catch (err) {
+                console.log('Error removing department');
+            }
+        });
 };
 
-// const redirectToDepartmentSummary = () => {
+const showCreateNodeForm = (nodeId) => {
-//     console.log('redirect to department summary:: ');
+    showCreateNodeFormVal.value = true;
-// };
+    creationNodeSelectedId.value = nodeId;
+};
+
+const onNodeCreated = async () => {
+    await fetchNodeLeaves(creationNodeSelectedId.value);
+};
+
+const redirectToDepartmentSummary = (id) => {
+    if (!id) return;
+    router.push({ name: 'DepartmentSummary', params: { id: id } });
+};
 </script>
 
 <template>
@@ -65,22 +100,21 @@ const createNode = async () => {
             @update:expanded="onNodeExpanded($event)"
         >
             <template #default-header="prop">
-                <div class="row justify-between full-width bg-red q-pr-md">
+                <div
-                    <!-- <pre>{{ prop }}</pre> -->
+                    class="row justify-between full-width q-pr-md cursor-pointer"
+                    @click.stop="redirectToDepartmentSummary(prop.node.id)"
+                >
                     <span class="text-uppercase">
                         {{ prop.node.name }}
                     </span>
-                    <div
+                    <div class="row justify-between" style="max-width: max-content">
-                        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"
+                            class="q-pr-xs cursor-pointer"
-                            @click.stop="removeNode()"
+                            @click.stop="removeNode(prop.node)"
                         >
                             <QTooltip>
                                 {{ t('Remove') }}
@@ -90,17 +124,27 @@ const createNode = async () => {
                             name="add"
                             color="primary"
                             size="sm"
-                            @click.stop="createNode()"
+                            class="cursor-pointer"
+                            @click.stop="showCreateNodeForm(prop.node.id)"
                         >
                             <QTooltip>
                                 {{ t('Create') }}
-                            </QTooltip></QIcon
+                            </QTooltip>
-                        >
+                        </QIcon>
                     </div>
                 </div>
             </template>
         </QTree>
-        <pre>{{ nodes }}</pre>
+        <QDialog
+            v-model="showCreateNodeFormVal"
+            transition-show="scale"
+            transition-hide="scale"
+        >
+            <CreateDepartmentChild
+                :parent-id="creationNodeSelectedId"
+                @on-data-saved="onNodeCreated()"
+            />
+        </QDialog>
     </QCard>
 </template>
 
@@ -109,4 +153,6 @@ const createNode = async () => {
         Departments: Departamentos
         Remove: Quitar
         Create: Crear
-    </i18n>
+        Are you sure you want to delete it?: ¿Seguro que quieres eliminarlo?
+        Delete department: Eliminar departamento
+</i18n>

src/i18n/en/index.js

@@ -604,6 +604,26 @@ export default {
             amount: 'Amount',
         },
     },
+    department: {
+        pageTitles: {
+            basicData: 'Basic data',
+            department: 'Department',
+            summary: 'Summary',
+        },
+        basicData: 'Basic data',
+        name: 'Name',
+        code: 'Code',
+        chat: 'Chat',
+        bossDepartment: 'Boss Department',
+        email: 'Email',
+        selfConsumptionCustomer: 'Self-consumption customer',
+        telework: 'Telework',
+        notifyOnErrors: 'Notify on errors',
+        worksInProduction: 'Works in production',
+        hasToRefill: 'Fill in days without physical check-ins',
+        hasToSendMail: 'Send check-ins by email',
+        departmentRemoved: 'Department removed',
+    },
     worker: {
         pageTitles: {
             workers: 'Workers',

src/i18n/es/index.js

@@ -604,6 +604,26 @@ export default {
             country: 'País',
         },
     },
+    department: {
+        pageTitles: {
+            basicData: 'Basic data',
+            department: 'Departamentos',
+            summary: 'Resumen',
+        },
+        basicData: 'Datos básicos',
+        name: 'Nombre',
+        code: 'Código',
+        chat: 'Chat',
+        bossDepartment: 'Jefe de departamento',
+        email: 'Email',
+        selfConsumptionCustomer: 'Cliente autoconsumo',
+        telework: 'Teletrabaja',
+        notifyOnErrors: 'Notificar errores',
+        worksInProduction: 'Pertenece a producción',
+        hasToRefill: 'Completar días sin registros físicos',
+        hasToSendMail: 'Enviar fichadas por mail',
+        departmentRemoved: 'Departamento eliminado',
+    },
     worker: {
         pageTitles: {
             workers: 'Trabajadores',

src/pages/Department/Card/DepartmentBasicData.vue

@@ -0,0 +1,3 @@
+<script setup></script>
+
+<template>Department basic data</template>

src/pages/Department/Card/DepartmentCard.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import DepartmentDescriptor from 'pages/Department/Card/DepartmentDescriptor.vue';
+import LeftMenu from 'components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+</script>
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <DepartmentDescriptor />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <QToolbar class="bg-vn-dark justify-end">
+                <div id="st-data"></div>
+                <QSpace />
+                <div id="st-actions"></div>
+            </QToolbar>
+            <div class="q-pa-md column items-center">
+                <RouterView></RouterView>
+            </div>
+        </QPage>
+    </QPageContainer>
+</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/pages/Department/Card/DepartmentDescriptor.vue

@@ -0,0 +1,129 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
+import useCardDescription from 'src/composables/useCardDescription';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+    summary: {
+        type: Object,
+        default: null,
+    },
+});
+
+const quasar = useQuasar();
+const route = useRoute();
+const router = useRouter();
+
+const { t } = useI18n();
+const { notify } = useNotify();
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const department = ref();
+
+const data = ref(useCardDescription());
+
+const setData = (entity) => {
+    if (!entity) return;
+    data.value = useCardDescription(entity.name, entity.id);
+};
+
+const removeDepartment = () => {
+    console.log('entityId: ', entityId.value);
+    quasar
+        .dialog({
+            title: 'Are you sure you want to delete it?',
+            message: 'Delete department',
+            ok: {
+                push: true,
+                color: 'primary',
+            },
+            cancel: true,
+        })
+        .onOk(async () => {
+            try {
+                await axios.post(
+                    `/Departments/${entityId.value}/removeChild`,
+                    entityId.value
+                );
+                router.push({ name: 'WorkerDepartment' });
+                notify('department.departmentRemoved', 'positive');
+            } catch (err) {
+                console.log('Error removing department');
+            }
+        });
+};
+</script>
+<template>
+    <CardDescriptor
+        module="Department"
+        data-key="departmentData"
+        :url="`Departments/${entityId}`"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        :summary="$props.summary"
+        @on-fetch="
+            (data) => {
+                department = data;
+                setData(data);
+            }
+        "
+    >
+        <template #menu="{}">
+            <QItem v-ripple clickable @click="removeDepartment()">
+                <QItemSection>{{ t('Delete') }}</QItemSection>
+            </QItem>
+        </template>
+        <template #body="{ entity }">
+            <VnLv :label="t('department.chat')" :value="entity.chatName" dash />
+            <VnLv :label="t('department.email')" :value="entity.notificationEmail" dash />
+            <VnLv
+                :label="t('department.selfConsumptionCustomer')"
+                :value="entity.client?.name"
+                dash
+            />
+            <VnLv
+                :label="t('department.bossDepartment')"
+                :value="entity.worker?.user?.name"
+                dash
+            />
+        </template>
+        <template #actions>
+            <QCardActions>
+                <QBtn
+                    size="md"
+                    icon="vn:worker"
+                    color="primary"
+                    :to="{
+                        name: 'WorkerList',
+                        query: {
+                            params: JSON.stringify({ departmentFk: entityId }),
+                        },
+                    }"
+                >
+                    <QTooltip>{{ t('Department workers') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
+    </CardDescriptor>
+</template>
+
+<i18n>
+    es:
+        Department workers: Trabajadores del departamento
+</i18n>

src/pages/Department/Card/DepartmentSummary.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import CardSummary from 'components/ui/CardSummary.vue';
+import { getUrl } from 'src/composables/getUrl';
+import VnLv from 'src/components/ui/VnLv.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+const departmentUrl = ref();
+
+onMounted(async () => {
+    departmentUrl.value = (await getUrl('')) + `departments/${entityId.value}/`;
+});
+</script>
+
+<template>
+    <CardSummary
+        ref="summary"
+        :url="`Departments/${entityId}`"
+        class="full-width"
+        style="max-width: 900px"
+    >
+        <template #header="{ entity }">
+            <div>{{ entity.name }}</div>
+        </template>
+        <template #body="{ entity: department }">
+            <QCard class="column">
+                <a class="header" :href="department + `basic-data`">
+                    {{ t('Basic data') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <div class="full-width row wrap justify-between content-between">
+                    <div class="column" style="min-width: 50%">
+                        <VnLv
+                            :label="t('department.name')"
+                            :value="department.name"
+                            dash
+                        />
+                        <VnLv
+                            :label="t('department.code')"
+                            :value="department.code"
+                            dash
+                        />
+                        <VnLv
+                            :label="t('department.chat')"
+                            :value="department.chatName"
+                            dash
+                        />
+                        <VnLv
+                            :label="t('department.bossDepartment')"
+                            :value="department.worker?.user?.name"
+                            dash
+                        />
+                        <VnLv
+                            :label="t('department.email')"
+                            :value="department.notificationEmail"
+                            dash
+                        />
+                        <VnLv
+                            :label="t('department.selfConsumptionCustomer')"
+                            :value="department.client?.name"
+                            dash
+                        />
+                    </div>
+                    <div class="column" style="min-width: 50%">
+                        <VnLv
+                            :label="t('department.telework')"
+                            :value="department.isTeleworking"
+                            dash
+                        />
+                        <VnLv
+                            :label="t('department.notifyOnErrors')"
+                            :value="Boolean(department.hasToMistake)"
+                            dash
+                        />
+                        <VnLv
+                            :label="t('department.worksInProduction')"
+                            :value="department.isProduction"
+                            dash
+                        />
+                        <VnLv
+                            :label="t('department.hasToRefill')"
+                            :value="department.hasToRefill"
+                            dash
+                        />
+                        <VnLv
+                            :label="t('department.hasToSendMail')"
+                            :value="department.hasToSendMail"
+                            dash
+                        />
+                    </div>
+                </div>
+            </QCard>
+        </template>
+    </CardSummary>
+</template>

src/router/modules/department.js

@@ -0,0 +1,46 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/department',
+    name: 'Department',
+    meta: {
+        title: 'department',
+        icon: 'vn:greuge',
+    },
+    component: RouterView,
+    redirect: { name: 'DepartmentCard' },
+    menus: {
+        main: [],
+        card: ['DepartmentBasicData'],
+    },
+    children: [
+        {
+            name: 'DepartmentCard',
+            path: 'department/:id',
+            component: () => import('src/pages/Department/Card/DepartmentCard.vue'),
+            redirect: { name: 'DepartmentSummary' },
+            children: [
+                {
+                    name: 'DepartmentSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'launch',
+                    },
+                    component: () =>
+                        import('src/pages/Department/Card/DepartmentSummary.vue'),
+                },
+                {
+                    name: 'DepartmentBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () =>
+                        import('src/pages/Department/Card/DepartmentBasicData.vue'),
+                },
+            ],
+        },
+    ],
+};

src/router/modules/index.js

@@ -10,6 +10,7 @@ import Route from './route';
 import Supplier from './Supplier';
 import Travel from './travel';
 import Order from './order';
+import Department from './department';
 
 export default [
     Customer,
@@ -24,4 +25,5 @@ export default [
     Travel,
     Order,
     invoiceIn,
+    Department,
 ];

src/router/modules/worker.js

@@ -12,6 +12,7 @@ export default {
     menus: {
         main: ['WorkerList', 'WorkerDepartment'],
         card: ['WorkerNotificationsManager'],
+        departmentCard: ['BasicData'],
     },
     children: [
         {

src/router/routes.js

@@ -8,8 +8,9 @@ import wagon from './modules/wagon';
 import supplier from './modules/Supplier';
 import route from './modules/route';
 import travel from './modules/travel';
+import department from './modules/department';
 import shelving from 'src/router/modules/shelving';
-import order from "src/router/modules/order";
+import order from 'src/router/modules/order';
 
 const routes = [
     {
@@ -61,6 +62,7 @@ const routes = [
             route,
             supplier,
             travel,
+            department,
             {
                 path: '/:catchAll(.*)*',
                 name: 'NotFound',