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

WIP

This commit is contained in:
William Buezas 2024-05-24 15:25:00 -03:00
parent 68bb4251a4
commit a1fde3f645
7 changed files with 411 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
src/pages/Zone/Card/ZoneEventExclusionForm.vue
View File

@ -1 +1,171 @@
<template>Zone event exclusion form</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import VnRow from 'components/ui/VnRow.vue';
import FormPopup from 'components/FormPopup.vue';
import ZoneLocationsTree from './ZoneLocationsTree.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import { useArrayData } from 'src/composables/useArrayData';
import { useWeekdayStore } from 'src/stores/useWeekdayStore';
import { useVnConfirm } from 'composables/useVnConfirm';
import axios from 'axios';
const props = defineProps({
date: {
type: Date,
required: true,
default: null,
},
event: {
type: Object,
default: null,
},
isNewMode: {
type: Boolean,
default: true,
},
isExclusion: {
type: Boolean,
default: true,
},
});
const emit = defineEmits(['onSubmit', 'closeForm']);
const route = useRoute();
const { t } = useI18n();
const weekdayStore = useWeekdayStore();
const { openConfirmationModal } = useVnConfirm();
const isNew = computed(() => props.isNewMode);
const dated = ref(null);
const _excludeType = ref('all');
const excludeType = computed({
get: () => _excludeType.value,
set: (val) => {
_excludeType.value = val;
},
});
const arrayData = useArrayData('ZoneEvents');
const exclusionGeoCreate = async () => {
try {
console.log('exclusionGeoCreate');
} catch (err) {
console.error('Error creating exclusion geo: ', err);
}
};
const exclusionCreate = async () => {
try {
if (isNew.value)
await axios.post(`Zones/${route.params.id}/exclusions`, [
{ dated: dated.value },
]);
else
await axios.put(`Zones/${route.params.id}/exclusions/${props.event?.id}`, {
dated: dated.value,
});
await refetchEvents();
} catch (err) {
console.error('Error creating exclusion: ', err);
}
};
const onSubmit = async () => {
if (excludeType.value === 'all') exclusionCreate();
else exclusionGeoCreate();
};
const deleteEvent = async () => {
try {
if (!props.event) return;
await axios.delete(`Zones/${route.params.id}/exclusions/${props.event?.id}`);
await refetchEvents();
} catch (err) {
console.error('Error deleting event: ', err);
}
};
const closeForm = () => emit('closeForm');
const refetchEvents = async () => {
await arrayData.refresh({ append: false });
closeForm();
};
onMounted(() => {
console.log('props.event', props.event);
if (props.event) {
dated.value = props.event?.dated;
excludeType.value = props.event?.type || 'all';
} else if (props.date) dated.value = props.date;
});
</script>
<template>
<FormPopup
:title="
isNew
? t('eventsExclusionForm.addExclusion')
: t('eventsExclusionForm.editExclusion')
"
@on-submit="onSubmit()"
:default-cancel-button="false"
:default-submit-button="false"
>
<template #form-inputs>
<VnRow class="row q-gutter-md q-mb-lg">
<VnInputDate :label="t('eventsInclusionForm.day')" v-model="dated" />
</VnRow>
<div class="column q-gutter-y-sm q-mb-md">
<QRadio
v-model="excludeType"
dense
val="all"
:label="t('eventsExclusionForm.all')"
/>
<QRadio
v-model="excludeType"
dense
val="specificLocations"
:label="t('eventsExclusionForm.specificLocations')"
/>
</div>
</template>
<template #custom-buttons>
<QBtn
:label="t('globals.cancel')"
color="primary"
flat
class="q-mr-sm"
v-close-popup
/>
<QBtn
v-if="!isNew && isExclusion"
:label="t('globals.delete')"
color="primary"
flat
class="q-mr-sm"
@click="
openConfirmationModal(
t('eventsPanel.deleteTitle'),
t('eventsPanel.deleteSubtitle'),
() => deleteEvent()
)
"
/>
<QBtn
:label="isNew ? t('globals.add') : t('globals.save')"
type="submit"
color="primary"
/>
</template>
</FormPopup>
</template>

29
src/pages/Zone/Card/ZoneEventInclusionForm.vue
View File

@ -9,6 +9,7 @@ import FormPopup from 'components/FormPopup.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnWeekdayPicker from 'src/components/common/VnWeekdayPicker.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
import { useArrayData } from 'src/composables/useArrayData';
import { useWeekdayStore } from 'src/stores/useWeekdayStore';
import { useVnConfirm } from 'composables/useVnConfirm';
@ -28,6 +29,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
isExclusion: {
type: Boolean,
default: true,
},
});
const emit = defineEmits(['onSubmit', 'closeForm']);
@ -103,13 +108,10 @@ const refetchEvents = async () => {
};
onMounted(() => {
console.log('props.event', props.event);
if (props.event) {
eventInclusionFormData.value = { ...props.event };
eventType.value = props.event?.type || 'day';
} else if (props.date) eventInclusionFormData.value.dated = props.date;
console.log('eventInclusionFormData', eventInclusionFormData.value);
});
</script>
@ -124,8 +126,6 @@ onMounted(() => {
>
<template #form-inputs>
<div class="column q-gutter-y-sm q-mb-md">
<pre>{{ isNew }}</pre>
<QRadio
v-model="eventType"
dense
@ -214,7 +214,7 @@ onMounted(() => {
v-close-popup
/>
<QBtn
v-if="!isNew"
v-if="!isNew && !isExclusion"
:label="t('globals.delete')"
color="primary"
flat
@ -235,20 +235,3 @@ onMounted(() => {
</template>
</FormPopup>
</template>
<i18n>
en:
title: New bank entity
subtitle: Please, ensure you put the correct data!
name: Name
swift: Swift
country: Country
id: Entity code
es:
title: Nueva entidad bancaria
subtitle: ¡Por favor, asegúrate de poner los datos correctos!
name: Nombre
swift: Swift
country: País
id: Código de la entidad
</i18n>

29
src/pages/Zone/Card/ZoneEvents.vue
View File

@ -179,30 +179,17 @@ const step = (direction) => {
date.value = _date;
};
const openEventIncludeForm = ({ date, isNewMode, event }) => {
const openForm = ({ date, isNewMode, event, isExclusion }) => {
zoneEventsFormProps.date = date;
zoneEventsFormProps.isNewMode = isNewMode;
zoneEventsFormProps.event = event;
zoneEventsFormProps.isExclusion = isExclusion;
showZoneEventForm.value = true;
console.log('zoneEventsFormProps: ', zoneEventsFormProps);
};
const handleEventModeOpen = ({ date, isNewMode, event }) => {
if (formModeName.value === 'include')
openEventIncludeForm({ date, isNewMode, event });
else openEventExcludeForm({ date, isNewMode });
};
const openEventExcludeForm = ({ date, isNewMode }) => {
// zoneEventsFormProps.date = date;
// zoneEventsFormProps.isNewMode = isNewMode;
showZoneEventForm.value = true;
// console.log('zoneEventsFormProps: ', zoneEventsFormProps);
};
const onZoneEventFormClose = () => {
showZoneEventForm.value = false;
zoneEventsFormProps.date = null;
zoneEventsFormProps.value = {};
};
onMounted(async () => {
@ -243,7 +230,7 @@ onUnmounted(() => arrayData.destroy());
:last-day="lastDay"
:events="events"
v-model:formModeName="formModeName"
@open-zone-form="openEventIncludeForm"
@open-zone-form="openForm"
/>
</QScrollArea>
</QDrawer>
@ -277,7 +264,7 @@ onUnmounted(() => arrayData.destroy());
:exclusions="exclusions"
:days-map="days"
:form-mode-name="formModeName"
@open-zone-form="handleEventModeOpen"
@open-zone-form="openForm"
/>
</div>
</QCard>
@ -287,7 +274,11 @@ onUnmounted(() => arrayData.destroy());
v-bind="zoneEventsFormProps"
@close-form="onZoneEventFormClose()"
/>
<ZoneEventExclusionForm v-else />
<ZoneEventExclusionForm
v-else
v-bind="zoneEventsFormProps"
@close-form="onZoneEventFormClose()"
/>
</QDialog>
</QPage>
</template>

215
src/pages/Zone/Card/ZoneLocationsTree.vue Normal file
View File

@ -0,0 +1,215 @@
<script setup>
import { onMounted, ref, computed, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { useState } from 'src/composables/useState';
import axios from 'axios';
import { useArrayData } from 'composables/useArrayData';
const { t } = useI18n();
const route = useRoute();
const state = useState();
const treeRef = ref();
const expanded = ref([]);
const arrayData = useArrayData('ZoneLocations', {
url: `Zones/${route.params.id}/getLeaves`,
});
const { store } = arrayData;
const storeData = computed(() => store.data);
const nodes = ref([
{ id: null, name: t('zoneLocations.locations'), sons: true, children: [{}] },
]);
const previousExpandedNodes = ref(new Set());
const onNodeExpanded = async (nodeKeysArray) => {
const nodeKeysSet = new Set(nodeKeysArray);
const lastNodeKey = nodeKeysArray.at(-1);
const wasExpanded = !previousExpandedNodes.value.has(lastNodeKey);
if (wasExpanded) await fetchNodeLeaves(lastNodeKey);
else {
const difference = new Set(
[...previousExpandedNodes.value].filter((x) => !nodeKeysSet.has(x))
);
const collapsedNode = Array.from(difference).pop();
const node = treeRef.value?.getNodeByKey(collapsedNode);
const allNodeIds = getNodeIds(node);
expanded.value = expanded.value.filter((id) => !allNodeIds.includes(id));
}
previousExpandedNodes.value = nodeKeysSet;
};
const formatNodeSelected = (node) => {
if (node.selected === 1) node.selected = true;
else if (node.selected === 0) node.selected = false;
};
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(`Zones/${route.params.id}/getLeaves`, {
params,
});
if (response.data) {
node.children = response.data.map((n) => {
const hasChildrens = n.sons > 0;
n.children = hasChildrens ? [{}] : null;
formatNodeSelected(n);
if (n.child && n.child.length > 0) {
n.child.forEach((childNode) => {
formatNodeSelected(childNode);
});
}
return n;
});
}
state.set('Tree', node);
} catch (err) {
console.error('Error fetching department leaves', err);
throw new Error();
}
};
const onSelected = async (val, node) => {
try {
if (val === null) val = undefined;
const params = { geoId: node.id, isIncluded: val };
await axios.post(`Zones/${route.params.id}/toggleIsIncluded`, params);
} catch (err) {
console.error('Error updating included', err);
}
};
function getNodeIds(node) {
let ids = [];
if (node.id) ids.push(node.id);
const children = node.childs || node.children;
if (children) {
children.forEach((child) => {
ids = ids.concat(getNodeIds(child));
});
}
return ids;
}
watch(storeData, async (val) => {
// Se triggerea cuando se actualiza el store.data, el cual es el resultado del fetch de la searchbar
nodes.value[0].children = [...val];
const fetchedNodeKeys = val.flatMap(getNodeIds);
state.set('Tree', [...fetchedNodeKeys]);
for (let n of state.get('Tree')) {
await fetchNodeLeaves(n);
}
expanded.value = [null, 1, ...fetchedNodeKeys];
});
onMounted(async () => {
if (store.userParams?.search) {
await arrayData.fetch({ append: false });
return;
}
const stateTree = state.get('Tree');
const tree = stateTree ? [...state.get('Tree'), 1] : [null, 1];
const lastStateTree = state.get('TreeState');
if (tree) {
for (let n of tree) {
await fetchNodeLeaves(n);
}
expanded.value = tree;
if (lastStateTree) {
tree.push(lastStateTree);
await fetchNodeLeaves(lastStateTree);
}
}
setTimeout(() => {
if (lastStateTree) {
document.getElementById(lastStateTree).scrollIntoView();
}
}, 1000);
});
</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)"
:default-expand-all="true"
>
<template #default-header="{ node }">
<div
:id="node.id"
class="qtr row justify-between full-width q-pr-md cursor-pointer"
>
<span v-if="!node.id">{{ node.name }}</span>
<QCheckbox
v-else
v-model="node.selected"
:label="node.name"
@update:model-value="($event) => onSelected($event, node)"
toggle-indeterminate
color="transparent"
:class="[
'checkbox',
node.selected
? '--checked'
: node.selected == false
? '--unchecked'
: '--indeterminate',
]"
/>
</div>
</template>
</QTree>
</QCard>
</template>
<style lang="scss">
.checkbox {
&.--checked {
.q-checkbox__bg {
border: 1px solid $info !important;
}
.q-checkbox__svg {
color: white !important;
background-color: $info !important;
}
}
&.--unchecked {
.q-checkbox__bg {
border: 1px solid $negative !important;
}
.q-checkbox__svg {
background-color: $negative !important;
}
}
&.--indeterminate {
.q-checkbox__bg {
border: 1px solid $white !important;
}
.q-checkbox__svg {
color: transparent !important;
}
}
}
</style>

7
src/pages/Zone/ZoneDeliveryCalendar.vue
View File

@ -93,6 +93,12 @@ const getEventByTimestamp = ({ year, month, day }) => {
);
};
const eventIsAnyExclusion = ({ year, month, day }) => {
if (!event) return false;
const stamp = new Date(year, month - 1, day).getTime();
return !!props.exclusions[stamp] || !!props.geoExclusions[stamp];
};
const getEventAttrs = ({ year, month, day }) => {
const stamp = new Date(year, month - 1, day).getTime();
@ -128,6 +134,7 @@ const handleDateClick = (timestamp) => {
date,
isNewMode: !event,
event: event && event.length > 0 ? event[0] : null,
isExclusion: eventIsAnyExclusion(timestamp),
});
};
</script>

1
src/pages/Zone/locale/en.yml
View File

@ -81,6 +81,7 @@ eventsPanel:
deleteSubtitle: Are you sure you want to continue?
eventsExclusionForm:
addExclusion: Add exclusion
editExclusion: Edit exclusion
day: Day
all: All
specificLocations: Specific locations

1
src/pages/Zone/locale/es.yml
View File

@ -83,6 +83,7 @@ eventsPanel:
deleteSubtitle: ¿Seguro que quieres continuar?
eventsExclusionForm:
addExclusion: Añadir exclusión
editExclusion: Editar exclusión
day: Día
all: Todo
specificLocations: Localizaciones concretas