verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

Department tree and summary view

This commit is contained in:
William Buezas 2023-12-25 20:38:13 -03:00
parent 37d1239af1
commit 2e09fbd968
12 changed files with 532 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/CreateDepartmentChild.vue Normal file
View File

@ -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>

88
src/components/ui/VnTree.vue
View File

@ -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 createNode = async () => {
// const param = null;
// const response = axios.post('departments/createChild', param);
const removeNode = (node) => {
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/${node.id}/removeChild`, node.id);
notify('department.departmentRemoved', 'positive');
await fetchNodeLeaves(node.parentFk);
} catch (err) {
console.log('Error removing department');
}
});
};
// const redirectToDepartmentSummary = () => {
// console.log('redirect to department summary:: ');
// };
const showCreateNodeForm = (nodeId) => {
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">
<!-- <pre>{{ prop }}</pre> -->
<div
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
class="row bg-green justify-between"
style="max-width: max-content"
>
<div class="row 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()"
class="q-pr-xs cursor-pointer"
@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>

20
src/i18n/en/index.js
View File

@ -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',

20
src/i18n/es/index.js
View File

@ -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',

3
src/pages/Department/Card/DepartmentBasicData.vue Normal file
View File

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

34
src/pages/Department/Card/DepartmentCard.vue Normal file
View File

@ -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>

129
src/pages/Department/Card/DepartmentDescriptor.vue Normal file
View File

@ -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>

107
src/pages/Department/Card/DepartmentSummary.vue Normal file
View File

@ -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>

46
src/router/modules/department.js Normal file
View File

@ -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'),
},
],
},
],
};

2
src/router/modules/index.js
View File

@ -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,
];

1
src/router/modules/worker.js
View File

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

4
src/router/routes.js
View File

@ -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',