143 lines
3.8 KiB
Vue
143 lines
3.8 KiB
Vue
<template lang="pug">
|
|
.schedule.flex-1.flex.flex-col.relative(
|
|
:style="{width: openSidebar ? 'calc(100vw - 320px)' : 'calc(100vw - 160px)'}"
|
|
)
|
|
calendar-header.w-full.mb-1(v-model="displayType")
|
|
.schedule-body.h-full.bg-white.w-full
|
|
.column-wrapper.flex.ml-20(:style="expandedDisplayType ? columnWrapperWidth : {}")
|
|
calendar-column(
|
|
v-for="date in dateRange",
|
|
:key="date",
|
|
:date="date",
|
|
:style="columnSize",
|
|
:expanded-display-type="expandedDisplayType"
|
|
)
|
|
.flex.relative(
|
|
:style="expandedDisplayType ? backgroundWrapperWidth : {}",
|
|
:class="{'border-bottom': expandedDisplayType}"
|
|
)
|
|
.time-coil-wrapper.left-0.-mt-12
|
|
calendar-clock-column(:time-coil="timeCoil")
|
|
calendar-background.flex-1
|
|
.w-full.h-3.bg-white.footer(v-if="expandedDisplayType")
|
|
</template>
|
|
|
|
<script>
|
|
import CalendarHeader from "@/pages/newCalendar/components/CalendarHeader";
|
|
import CalendarBackground from "@/pages/newCalendar/components/CalendarBackground.vue";
|
|
import CalendarClockColumn from "@/pages/newCalendar/components/CalendarClockColumn.vue";
|
|
import CalendarColumn from "@/pages/newCalendar/components/CalendarColumn.vue";
|
|
import { mapState } from "vuex";
|
|
export default {
|
|
name: "CalendarWrapper",
|
|
components: {
|
|
CalendarHeader,
|
|
CalendarBackground,
|
|
CalendarClockColumn,
|
|
CalendarColumn,
|
|
},
|
|
props: {
|
|
openSidebar: Boolean,
|
|
},
|
|
data() {
|
|
return {
|
|
displayType: "expanded",
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
workingHours: (state) => state.calendar.workingHours,
|
|
selectedDates: (state) => state.calendar.selectedDates,
|
|
}),
|
|
expandedDisplayType() {
|
|
return this.displayType === "expanded";
|
|
},
|
|
dateRange() {
|
|
let diff = this.selectedDates?.to.diff(this.selectedDates?.from, "days");
|
|
let range = [];
|
|
for (let i = 0; i <= diff; i++) {
|
|
range.push(this.selectedDates?.from.clone().add(i, "day"));
|
|
}
|
|
return range;
|
|
},
|
|
validateStartTime() {
|
|
return this.verifyTime(this.workingHours.start);
|
|
},
|
|
validateEndTime() {
|
|
return this.verifyTime(this.workingHours.end);
|
|
},
|
|
timeCoil() {
|
|
let time = [];
|
|
for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
|
|
time.push(`${i}:00`);
|
|
}
|
|
return time;
|
|
},
|
|
columnSize() {
|
|
return this.expandedDisplayType
|
|
? {
|
|
height: `${this.timeCoil.length * 76 + 60}px`,
|
|
}
|
|
: {
|
|
height: `${this.timeCoil.length * 76 + 96}px`,
|
|
};
|
|
},
|
|
columnWrapperWidth() {
|
|
return {
|
|
width: `${380 * this.dateRange.length}px`,
|
|
};
|
|
},
|
|
backgroundWrapperWidth() {
|
|
return {
|
|
width: `${380 * this.dateRange.length + 80}px`,
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
verifyTime(dayTime) {
|
|
let timeArray = dayTime.split(":").map((elem) => parseInt(elem, 10));
|
|
let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
|
|
return newTime;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.schedule-body
|
|
overflow-x: auto
|
|
border-top-left-radius: 4px
|
|
border-top-right-radius: 4px
|
|
&::-webkit-scrollbar-track:horizontal
|
|
margin: 0 24px 0 24px
|
|
|
|
.background
|
|
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)
|
|
|
|
.time-coil-wrapper
|
|
position: sticky
|
|
z-index: 5
|
|
background-color: var(--default-white)
|
|
padding-top: 38px
|
|
|
|
.column-wrapper
|
|
height: 60px
|
|
position: relative
|
|
background-color: var(--default-white)
|
|
|
|
.footer
|
|
border-bottom-left-radius: 4px
|
|
border-bottom-right-radius: 4px
|
|
|
|
.border-bottom
|
|
border-bottom: 4px solid var(--bg-ligth-blue-color)
|
|
|
|
.records-count
|
|
border-right: 1px solid var(--border-light-grey-color)
|
|
&:last-child
|
|
border-right: none
|
|
|
|
.border-top
|
|
border-top: 1px solid var(--border-light-grey-color)
|
|
</style>
|