wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Abstract ZoneCalendarGrid in a component and reuse it

This commit is contained in:
William Buezas 2024-05-26 20:52:46 -03:00
parent f52f5df78b
commit 62443ff44b
6 changed files with 288 additions and 464 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,31 +1,21 @@
<script setup>
import { computed, onMounted, ref, watch, onUnmounted } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import ZoneEventsPanel from './ZoneEventsPanel.vue';
import ZoneCalendar from '../ZoneCalendar.vue';
import ZoneCalendarGrid from '../ZoneCalendarGrid.vue';
import ZoneEventInclusionForm from './ZoneEventInclusionForm.vue';
import ZoneEventExclusionForm from './ZoneEventExclusionForm.vue';
import { useStateStore } from 'stores/useStateStore';
import { useWeekdayStore } from 'src/stores/useWeekdayStore';
import { useArrayData } from 'src/composables/useArrayData';
import { nextTick } from 'vue';
import { reactive } from 'vue';
const { t } = useI18n();
const stateStore = useStateStore();
const weekdayStore = useWeekdayStore();
const nMonths = ref(4);
const _date = ref(Date.vnNew());
const _data = ref(null);
const firstDay = ref(null);
const lastDay = ref(null);
const months = ref([]);
const days = ref({});
const exclusions = ref({});
const geoExclusions = ref({});
const events = ref([]);
const formModeName = ref('include');
const showZoneEventForm = ref(false);
@ -34,149 +24,8 @@ const zoneEventsFormProps = reactive({
date: null,
});
const arrayData = useArrayData('ZoneEvents');
const { store } = arrayData;
const refreshEvents = () => {
days.value = {};
if (!data.value) return;
let day = new Date(firstDay.value.getTime());
while (day <= lastDay.value) {
let stamp = day.getTime();
let wday = day.getDay();
let dayEvents = [];
let _exclusions = exclusions.value[stamp] || [];
if (events.value) {
for (let event of events.value) {
let match;
switch (event.type) {
case 'day':
match = event.dated == stamp;
break;
default:
match =
event.wdays[wday] &&
(!event.started || stamp >= event.started) &&
(!event.ended || stamp <= event.ended);
break;
}
if (match && !_exclusions.find((e) => e.zoneFk == event.zoneFk)) {
dayEvents.push(event);
}
}
}
if (dayEvents.length) days.value[stamp] = dayEvents;
day.setDate(day.getDate() + 1);
}
};
const date = computed({
get: () => _date.value,
set: (value) => {
_date.value = value;
let stamp = value.getTime();
firstDay.value = new Date(stamp);
firstDay.value.setDate(1);
lastDay.value = new Date(stamp);
lastDay.value.setMonth(lastDay.value.getMonth() + nMonths.value);
lastDay.value.setDate(0);
months.value = [];
for (let i = 0; i < nMonths.value; i++) {
let monthDate = new Date(stamp);
monthDate.setMonth(value.getMonth() + i);
months.value.push(monthDate);
}
refreshEvents();
},
});
const data = computed({
get: () => {
return _data.value;
},
set: (value) => {
_data.value = value;
value = value || {};
events.value = value.events;
function toStamp(date) {
return date && new Date(date).setHours(0, 0, 0, 0);
}
exclusions.value = {};
let _exclusions = value.exclusions;
if (_exclusions) {
for (let exclusion of _exclusions) {
let stamp = toStamp(exclusion.dated);
if (!exclusions[stamp]) exclusions.value[stamp] = [];
exclusions.value[stamp].push(exclusion);
}
}
geoExclusions.value = {};
let _geoExclusions = value.geoExclusions;
if (_geoExclusions) {
for (let geoExclusion of _geoExclusions) {
let stamp = toStamp(geoExclusion.dated);
if (!geoExclusions.value[stamp]) geoExclusions.value[stamp] = [];
geoExclusions.value[stamp].push(geoExclusion);
}
}
let _events = value.events;
if (_events) {
for (let event of _events) {
event.dated = toStamp(event.dated);
event.ended = toStamp(event.ended);
event.started = toStamp(event.started);
event.wdays = weekdayStore.fromSet(event.weekDays || '');
}
}
refreshEvents();
},
});
watch(
() => store.data,
(value) => {
data.value = value;
},
{ immediate: true }
);
const getMonthNameAndYear = (date) => {
const monthName = weekdayStore.getLocaleMonths[date.getMonth()].locale;
const year = date.getFullYear();
return `${monthName} ${year}`;
};
const headerTitle = computed(() => {
if (!months.value?.length) return;
const firstMonth = getMonthNameAndYear(months.value[0]);
const lastMonth = getMonthNameAndYear(months.value[months.value.length - 1]);
return `${firstMonth} - ${lastMonth}`;
});
const step = (direction) => {
const _date = new Date(date.value);
_date.setMonth(_date.getMonth() + nMonths.value * direction);
date.value = _date;
};
const openForm = ({ date, isNewMode, event, eventType, geoIds = [] }) => {
const openForm = (data) => {
const { date, isNewMode, event, eventType, geoIds = [] } = data;
zoneEventsFormProps.date = date;
zoneEventsFormProps.isNewMode = isNewMode;
zoneEventsFormProps.event = event;
@ -190,18 +39,6 @@ const onZoneEventFormClose = () => {
showZoneEventForm.value = false;
zoneEventsFormProps.value = {};
};
onMounted(async () => {
let initialDate = Date.vnNew();
initialDate.setDate(1);
initialDate.setHours(0, 0, 0, 0);
date.value = initialDate;
weekdayStore.initStore();
await nextTick();
stateStore.rightDrawer = true;
});
onUnmounted(() => arrayData.destroy());
</script>
<template>
@ -234,39 +71,13 @@ onUnmounted(() => arrayData.destroy());
</QScrollArea>
</QDrawer>
<QPage class="q-pa-md flex justify-center">
<QCard style="height: max-content">
<div class="calendars-header">
<QBtn
icon="arrow_left"
size="sm"
flat
class="full-height"
@click="step(-1)"
<ZoneCalendarGrid
v-model:events="events"
v-model:firstDay="firstDay"
v-model:lastDay="lastDay"
data-key="ZoneEvents"
@on-date-selected="openForm"
/>
<span>{{ headerTitle }}</span>
<QBtn
icon="arrow_right"
size="sm"
flat
class="full-height"
@click="step(1)"
/>
</div>
<div class="calendars-container">
<ZoneCalendar
v-for="(month, index) in months"
:key="index"
:month="month.getMonth() + 1"
:year="month.getFullYear()"
:month-date="month"
:geo-exclusions="geoExclusions"
:exclusions="exclusions"
:days-map="days"
:form-mode-name="formModeName"
@open-zone-form="openForm"
/>
</div>
</QCard>
<QDialog v-model="showZoneEventForm" @hide="onZoneEventFormClose()">
<ZoneEventInclusionForm
v-if="formModeName === 'include'"
@ -281,22 +92,3 @@ onUnmounted(() => arrayData.destroy());
</QDialog>
</QPage>
</template>
<style lang="scss" scoped>
.calendars-header {
height: 45px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: $primary;
font-weight: bold;
font-size: 16px;
}
.calendars-container {
max-width: 800px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
</style>

24
src/pages/Zone/Card/ZoneEventsPanel.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { onMounted, watch, computed, nextTick } from 'vue';
import { onMounted, watch, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
@ -56,19 +56,10 @@ const arrayData = useArrayData('ZoneEvents', {
url: `Zones/getEventsFiltered`,
});
const startParamsWatcher = () => {
watch(
params,
async () => {
await fetchData();
},
{ deep: true }
);
};
const fetchData = async () => {
try {
if (!params.value.zoneFk || !params.value.started || !params.value.ended) return;
await arrayData.applyFilter({
params: params.value,
});
@ -77,6 +68,14 @@ const fetchData = async () => {
}
};
watch(
params,
async () => {
await fetchData();
},
{ immediate: true, deep: true }
);
const formatWdays = (event) => {
if (!event.weekDays) return;
@ -108,9 +107,6 @@ const openIncludeForm = (event) => {
onMounted(async () => {
weekdayStore.initStore();
await nextTick();
await fetchData();
startParamsWatcher();
});
</script>

20
src/pages/Zone/ZoneCalendar.vue
View File

@ -2,6 +2,7 @@
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { date } from 'quasar';
import { useRoute } from 'vue-router';
import ZoneClosingTable from './ZoneClosingTable.vue';
import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
@ -36,19 +37,12 @@ const props = defineProps({
type: Object,
default: null,
},
isZoneDeliveryView: {
type: Boolean,
default: false,
},
formModeName: {
type: String,
default: 'include',
},
});
const emit = defineEmits(['openZoneForm']);
const emit = defineEmits(['onDateSelected']);
const { locale } = useI18n();
const route = useRoute();
const calendarRef = ref(null);
const weekdayStore = useWeekdayStore();
@ -62,8 +56,10 @@ const todayTimestamp = computed(() => {
});
const _monthDate = computed(() => date.formatDate(props.monthDate, 'YYYY-MM-DD'));
const isZoneDeliveryView = computed(() => route.name === 'ZoneDeliveryDays');
const onEventSelection = async ({ year, month, day }) => {
if (!props.isZoneDeliveryView) return;
if (!isZoneDeliveryView.value) return;
const date = new Date(year, month - 1, day);
const stamp = date.getTime();
@ -125,7 +121,7 @@ const calendarHeaderTitle = computed(() => {
});
const handleDateClick = (timestamp) => {
if (props.isZoneDeliveryView) return;
if (isZoneDeliveryView.value) return;
const event = getEventByTimestamp(timestamp);
const { year, month, day } = timestamp;
@ -137,7 +133,7 @@ const handleDateClick = (timestamp) => {
if (eventType === 'geoExclusion')
geoIds = props.geoExclusions[stamp].map((geoExclusion) => geoExclusion.geoFk);
emit('openZoneForm', {
emit('onDateSelected', {
date,
isNewMode: !event,
event: event && event.length > 0 ? event[0] : null,

250
src/pages/Zone/ZoneCalendarGrid.vue Normal file
View File

@ -0,0 +1,250 @@
<script setup>
import { computed, onMounted, ref, watch, onUnmounted, nextTick } from 'vue';
import ZoneCalendar from './ZoneCalendar.vue';
import { useStateStore } from 'stores/useStateStore';
import { useWeekdayStore } from 'src/stores/useWeekdayStore';
import { useArrayData } from 'src/composables/useArrayData';
const props = defineProps({
dataKey: {
type: Number,
required: true,
},
});
const emit = defineEmits([
'update:firstDay',
'update:lastDay',
'update:events',
'onDateSelected',
]);
const stateStore = useStateStore();
const weekdayStore = useWeekdayStore();
const nMonths = ref(4);
const _date = ref(Date.vnNew());
const _data = ref(null);
const firstDay = ref(null);
const lastDay = ref(null);
const months = ref([]);
const days = ref({});
const exclusions = ref({});
const geoExclusions = ref({});
const events = ref([]);
const arrayData = useArrayData(props.dataKey);
const { store } = arrayData;
const refreshEvents = () => {
days.value = {};
if (!data.value) return;
let day = new Date(firstDay.value.getTime());
while (day <= lastDay.value) {
let stamp = day.getTime();
let wday = day.getDay();
let dayEvents = [];
let _exclusions = exclusions.value[stamp] || [];
if (events.value) {
for (let event of events.value) {
let match;
switch (event.type) {
case 'day':
match = event.dated == stamp;
break;
default:
match =
event.wdays[wday] &&
(!event.started || stamp >= event.started) &&
(!event.ended || stamp <= event.ended);
break;
}
if (match && !_exclusions.find((e) => e.zoneFk == event.zoneFk)) {
dayEvents.push(event);
}
}
}
if (dayEvents.length) days.value[stamp] = dayEvents;
day.setDate(day.getDate() + 1);
}
emit('update:events', events.value);
};
const date = computed({
get: () => _date.value,
set: (value) => {
_date.value = value;
let stamp = value.getTime();
firstDay.value = new Date(stamp);
firstDay.value.setDate(1);
lastDay.value = new Date(stamp);
lastDay.value.setMonth(lastDay.value.getMonth() + nMonths.value);
lastDay.value.setDate(0);
months.value = [];
for (let i = 0; i < nMonths.value; i++) {
let monthDate = new Date(stamp);
monthDate.setMonth(value.getMonth() + i);
months.value.push(monthDate);
}
emit('update:firstDay', firstDay.value);
emit('update:lastDay', lastDay.value);
refreshEvents();
},
});
const data = computed({
get: () => {
return _data.value;
},
set: (value) => {
_data.value = value;
value = value || {};
events.value = value.events;
function toStamp(date) {
return date && new Date(date).setHours(0, 0, 0, 0);
}
exclusions.value = {};
let _exclusions = value.exclusions;
if (_exclusions) {
for (let exclusion of _exclusions) {
let stamp = toStamp(exclusion.dated);
if (!exclusions[stamp]) exclusions.value[stamp] = [];
exclusions.value[stamp].push(exclusion);
}
}
geoExclusions.value = {};
let _geoExclusions = value.geoExclusions;
if (_geoExclusions) {
for (let geoExclusion of _geoExclusions) {
let stamp = toStamp(geoExclusion.dated);
if (!geoExclusions.value[stamp]) geoExclusions.value[stamp] = [];
geoExclusions.value[stamp].push(geoExclusion);
}
}
let _events = value.events;
if (_events) {
for (let event of _events) {
event.dated = toStamp(event.dated);
event.ended = toStamp(event.ended);
event.started = toStamp(event.started);
event.wdays = weekdayStore.fromSet(event.weekDays || '');
}
}
refreshEvents();
},
});
watch(
() => store.data,
(value) => {
data.value = value;
},
{ immediate: true }
);
const getMonthNameAndYear = (date) => {
const monthName = weekdayStore.getLocaleMonths[date.getMonth()].locale;
const year = date.getFullYear();
return `${monthName} ${year}`;
};
const headerTitle = computed(() => {
if (!months.value?.length) return;
const firstMonth = getMonthNameAndYear(months.value[0]);
const lastMonth = getMonthNameAndYear(months.value[months.value.length - 1]);
return `${firstMonth} - ${lastMonth}`;
});
const step = (direction) => {
const _date = new Date(date.value);
_date.setMonth(_date.getMonth() + nMonths.value * direction);
date.value = _date;
};
const onDateSelected = (data) => emit('onDateSelected', data);
onMounted(async () => {
let initialDate = Date.vnNew();
initialDate.setDate(1);
initialDate.setHours(0, 0, 0, 0);
date.value = initialDate;
weekdayStore.initStore();
await nextTick();
stateStore.rightDrawer = true;
});
onUnmounted(() => arrayData.destroy());
</script>
<template>
<QCard style="height: max-content">
<div class="calendars-header">
<QBtn
icon="arrow_left"
size="sm"
flat
class="full-height"
@click="step(-1)"
/>
<span>{{ headerTitle }}</span>
<QBtn
icon="arrow_right"
size="sm"
flat
class="full-height"
@click="step(1)"
/>
</div>
<div class="calendars-container">
<ZoneCalendar
v-for="(month, index) in months"
:key="index"
:month="month.getMonth() + 1"
:year="month.getFullYear()"
:month-date="month"
:geo-exclusions="geoExclusions"
:exclusions="exclusions"
:days-map="days"
@on-date-selected="onDateSelected"
/>
</div>
</QCard>
</template>
<style lang="scss" scoped>
.calendars-header {
height: 45px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: $primary;
font-weight: bold;
font-size: 16px;
}
.calendars-container {
max-width: 800px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
</style>

223
src/pages/Zone/ZoneDeliveryDays.vue
View File

@ -1,182 +1,18 @@
<script setup>
import { computed, onMounted, ref, watch, onUnmounted } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import ZoneDeliveryPanel from './ZoneDeliveryPanel.vue';
import ZoneCalendar from './ZoneCalendar.vue';
import ZoneCalendarGrid from './ZoneCalendarGrid.vue';
import { useStateStore } from 'stores/useStateStore';
import { useWeekdayStore } from 'src/stores/useWeekdayStore';
import { useArrayData } from 'src/composables/useArrayData';
const { t } = useI18n();
const stateStore = useStateStore();
const weekdayStore = useWeekdayStore();
const nMonths = ref(4);
const _date = ref(Date.vnNew());
const _data = ref(null);
const firstDay = ref(null);
const lastDay = ref(null);
const months = ref([]);
const days = ref({});
const exclusions = ref({});
const geoExclusions = ref({});
const events = ref([]);
const arrayData = useArrayData('ZoneDeliveryDays', {
url: 'Zones/getEvents',
});
const { store } = arrayData;
const refreshEvents = () => {
days.value = {};
if (!data.value) return;
let day = new Date(firstDay.value.getTime());
while (day <= lastDay.value) {
let stamp = day.getTime();
let wday = day.getDay();
let dayEvents = [];
let _exclusions = exclusions.value[stamp] || [];
if (events.value) {
for (let event of events.value) {
let match;
switch (event.type) {
case 'day':
match = event.dated == stamp;
break;
default:
match =
event.wdays[wday] &&
(!event.started || stamp >= event.started) &&
(!event.ended || stamp <= event.ended);
break;
}
if (match && !_exclusions.find((e) => e.zoneFk == event.zoneFk)) {
dayEvents.push(event);
}
}
}
if (dayEvents.length) days.value[stamp] = dayEvents;
day.setDate(day.getDate() + 1);
}
};
const date = computed({
get: () => _date.value,
set: (value) => {
_date.value = value;
let stamp = value.getTime();
firstDay.value = new Date(stamp);
firstDay.value.setDate(1);
lastDay.value = new Date(stamp);
lastDay.value.setMonth(lastDay.value.getMonth() + nMonths.value);
lastDay.value.setDate(0);
months.value = [];
for (let i = 0; i < nMonths.value; i++) {
let monthDate = new Date(stamp);
monthDate.setMonth(value.getMonth() + i);
months.value.push(monthDate);
}
refreshEvents();
},
});
const data = computed({
get: () => {
return _data.value;
},
set: (value) => {
_data.value = value;
value = value || {};
events.value = value.events;
function toStamp(date) {
return date && new Date(date).setHours(0, 0, 0, 0);
}
exclusions.value = {};
let _exclusions = value.exclusions;
if (_exclusions) {
for (let exclusion of _exclusions) {
let stamp = toStamp(exclusion.dated);
if (!exclusions[stamp]) exclusions.value[stamp] = [];
exclusions.value[stamp].push(exclusion);
}
}
geoExclusions.value = {};
let _geoExclusions = value.geoExclusions;
if (_geoExclusions) {
for (let geoExclusion of _geoExclusions) {
let stamp = toStamp(geoExclusion.dated);
if (!geoExclusions[stamp]) geoExclusions.value[stamp] = [];
geoExclusions.value[stamp].push(geoExclusion);
}
}
let _events = value.events;
if (_events) {
for (let event of _events) {
event.dated = toStamp(event.dated);
event.ended = toStamp(event.ended);
event.started = toStamp(event.started);
event.wdays = weekdayStore.fromSet(event.weekDays || '');
}
}
refreshEvents();
},
});
watch(
() => store.data,
(value) => {
data.value = value;
},
{ immediate: true }
);
const getMonthNameAndYear = (date) => {
const monthName = weekdayStore.getLocaleMonths[date.getMonth()].locale;
const year = date.getFullYear();
return `${monthName} ${year}`;
};
const headerTitle = computed(() => {
if (!months.value?.length) return;
const firstMonth = getMonthNameAndYear(months.value[0]);
const lastMonth = getMonthNameAndYear(months.value[months.value.length - 1]);
return `${firstMonth} - ${lastMonth}`;
});
const step = (direction) => {
const _date = new Date(date.value);
_date.setMonth(_date.getMonth() + nMonths.value * direction);
date.value = _date;
};
onMounted(async () => {
stateStore.rightDrawer = true;
let initialDate = Date.vnNew();
initialDate.setDate(1);
initialDate.setHours(0, 0, 0, 0);
date.value = initialDate;
weekdayStore.initStore();
});
onUnmounted(() => arrayData.destroy());
</script>
<template>
@ -203,56 +39,11 @@ onUnmounted(() => arrayData.destroy());
</QScrollArea>
</QDrawer>
<QPage class="q-pa-md flex justify-center">
<QCard style="height: max-content">
<div class="calendars-header">
<QBtn
icon="arrow_left"
size="sm"
flat
class="full-height"
@click="step(-1)"
<ZoneCalendarGrid
v-model:events="events"
v-model:firstDay="firstDay"
v-model:lastDay="lastDay"
data-key="ZoneDeliveryDays"
/>
<span>{{ headerTitle }}</span>
<QBtn
icon="arrow_right"
size="sm"
flat
class="full-height"
@click="step(1)"
/>
</div>
<div class="calendars-container">
<ZoneCalendar
v-for="(month, index) in months"
:key="index"
:month="month.getMonth() + 1"
:year="month.getFullYear()"
:month-date="month"
:geo-exclusions="geoExclusions"
:exclusions="exclusions"
:days-map="days"
is-zone-delivery-view
/>
</div>
</QCard>
</QPage>
</template>
<style lang="scss" scoped>
.calendars-header {
height: 45px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: $primary;
font-weight: bold;
font-size: 16px;
}
.calendars-container {
max-width: 800px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
</style>

1
src/pages/Zone/ZoneDeliveryPanel.vue
View File

@ -2,7 +2,6 @@
import { onMounted, ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import { useArrayData } from 'src/composables/useArrayData';