diff --git a/server.js b/server.js
index 54901f7..aa803bc 100644
--- a/server.js
+++ b/server.js
@@ -515,8 +515,8 @@ export function clientsServer() {
results: [
{
id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
- start: "2022-10-24T20:23:49Z",
- end: "2022-10-24T21:23:53Z",
+ start: "2022-10-25T11:15:49Z",
+ end: "2022-10-25T12:00:53Z",
kind: "call",
subkind: null,
description: "",
@@ -542,7 +542,7 @@ export function clientsServer() {
first_name: "Ольга",
patronymic: "Александровна",
},
- role: null,
+ role: "owner",
},
{
id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
@@ -552,14 +552,14 @@ export function clientsServer() {
first_name: "Егор",
patronymic: "Сергеевич",
},
- role: "owner",
+ role: null,
},
],
},
{
id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
- start: "2022-10-24T15:23:49Z",
- end: "2022-10-24T16:23:53Z",
+ start: "2022-10-25T13:00:49Z",
+ end: "2022-10-25T13:30:53Z",
kind: "call",
subkind: null,
description: "",
@@ -599,63 +599,10 @@ export function clientsServer() {
},
],
},
- {
- id: "7faa7bb7-2de6-422c-a401-1b35cd455303",
- start: "2022-10-23T10:00:00Z",
- end: "2022-10-23T11:10:00Z",
- kind: "call",
- subkind: null,
- description: "",
- location: null,
- members: [
- {
- id: "b0509f9a-e824-4bb3-a260-2b32dae9bc81",
- person: {
- id: "14ff401c-2b7b-4d9a-9159-720c74d8b23c",
- last_name: "Гагарин",
- first_name: "Юрий",
- patronymic: "Алексеевич",
- },
- role: null,
- },
- {
- id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
- person: {
- id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
- last_name: "Елесеевская",
- first_name: "Татьяна",
- patronymic: "Ивановна",
- },
- role: "primary",
- },
- ],
- employees: [
- {
- id: "f941a0c6-c734-4f79-92c2-d7a5674459e422",
- employee: {
- id: "db831a15-e876-481f-a658-6325de7c311e",
- last_name: "Константинопольская",
- first_name: "Юлия",
- patronymic: "Викторовна",
- },
- role: null,
- },
- {
- id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
- employee: {
- id: "db541a67-e836-481f-a653-6325de7c567e",
- last_name: "Захарова",
- first_name: "Ольга",
- patronymic: "Александровна",
- },
- role: "owner",
- },
- ],
- },
{
id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
- start: "2022-10-24T10:00:00Z",
- end: "2022-10-24T11:10:00Z",
+ start: "2022-10-25T15:00:00Z",
+ end: "2022-10-25T16:10:00Z",
kind: "call",
subkind: null,
description: "",
@@ -695,10 +642,11 @@ export function clientsServer() {
},
],
},
+
{
- id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
- start: "2022-10-24T10:00:00Z",
- end: "2022-10-24T11:10:00Z",
+ id: "2faa5ff2-2de6-422c-a401-1b35cd455223",
+ start: "2022-10-25T17:10:00Z",
+ end: "2022-10-25T18:00:00Z",
kind: "call",
subkind: null,
description: "",
@@ -717,14 +665,14 @@ export function clientsServer() {
],
employees: [
{
- id: "f451a0c3-c734-4f73-91c2-d7a5674459e422",
+ id: "f941a0c6-c734-4f79-92c2-d7a5674459e422",
employee: {
- id: "dv841a15-e867-331f-a658-6325de7c311e",
- last_name: "Коломойцев",
- first_name: "Илья",
- patronymic: "Петрович",
+ id: "db831a15-e876-481f-a658-6325de7c311e",
+ last_name: "Константинопольская",
+ first_name: "Юлия",
+ patronymic: "Викторовна",
},
- role: "owner",
+ role: null,
},
{
id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
@@ -734,7 +682,7 @@ export function clientsServer() {
first_name: "Ольга",
patronymic: "Александровна",
},
- role: null,
+ role: "owner",
},
],
},
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 80b3176..993f61d 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -26,8 +26,8 @@ export default {
calendarLayout: "",
currentDate: moment(),
timeInformation: {
- dayStartTime: "8:00",
- dayEndTime: "18:00",
+ dayStartTime: "0:00",
+ dayEndTime: "20:00",
},
eventsData: [],
team: [
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index 8f8521b..8417ee5 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -1,22 +1,25 @@
.calendar-background-wrapper.flex.flex-col(
ref="backgroundWrapper"
- :class="scrollPresence"
+ :class="horizontalScrollPresence"
)
+ .header-wrapper
+ .header(:style="backgroundExtendedWidth")
calendar-column(
v-for="(owner, index) in filteredOwners"
:key="owner.id"
:owner-data="owner"
:style="calculateColumnPosition(index)"
:day-events="filterEventsByOwner(owner)"
+ :day-start-time="dayStartTime"
+ :day-end-time="dayEndTime"
)
- .header(:style="backgroundExtendedWidth")
.body.flex.flex-col(
:style="backgroundExtendedWidth"
)
.line-wrapper
.line.flex.items-center(
- v-for="hour in hoursArray"
+ v-for="hour in timeCoil"
:key="hour"
)
.middle-line
@@ -28,10 +31,12 @@ export default {
name: "CalendarBackground",
components: { CalendarColumn },
props: {
- hoursArray: Array,
+ timeCoil: Array,
eventsData: Array,
currentDate: Object,
sidebarWidth: String,
+ dayStartTime: Number,
+ dayEndTime: Number,
},
data() {
return {
@@ -56,11 +61,11 @@ export default {
};
},
backgroundHeight() {
- return (this.hoursArray.length - 1) * this.pixelsPerHour + 48;
+ return (this.timeCoil.length - 1) * this.pixelsPerHour + 48;
},
- scrollPresence() {
+ horizontalScrollPresence() {
return {
- scroll: this.ownersArrayLength > 3,
+ "scroll-x": this.ownersArrayLength > 3 && this.backgroundHeight < 855,
};
},
filteredOwners() {
@@ -73,11 +78,11 @@ export default {
};
this.eventsData.forEach(({ employees }) => {
let findedElement = employees.find((elem) => elem.role === "owner");
- let emptyObjectPresence = this.findObjectInArray(
+ let emptyDataPresence = this.findObjectInArray(
filteredArray,
ownerAbsence
);
- if (!findedElement && !emptyObjectPresence) {
+ if (!findedElement && !emptyDataPresence) {
filteredArray.push(ownerAbsence);
}
if (findedElement) {
@@ -147,13 +152,17 @@ export default {
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 70f5148..02c256c 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -6,11 +6,12 @@
span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
base-doc-ok-button
- .px-1
+ .body
calendar-event-card(
v-for="event in dayEvents"
:key="event.id"
:ownerEvent="event"
+ :style="eventCardPosition(event.start, event.end)"
)
@@ -23,6 +24,13 @@ export default {
props: {
ownerData: Object,
dayEvents: Array,
+ dayEndTime: Number,
+ dayStartTime: Number,
+ },
+ data() {
+ return {
+ pixelsPerHour: 62,
+ };
},
computed: {
ownerName() {
@@ -34,6 +42,33 @@ export default {
}
return null;
},
+ pixelsPerMinute() {
+ return this.pixelsPerHour / 60;
+ },
+ },
+ methods: {
+ eventCardPosition(startTime, endTime) {
+ let start = startTime
+ .slice(11, -4)
+ .split(":")
+ .map((elem) => parseInt(elem, 10));
+ let end = endTime.slice(11, -6);
+ let position =
+ (start[0] - this.dayStartTime) * this.pixelsPerHour +
+ start[1] * this.pixelsPerMinute;
+ if (
+ parseInt(start[0], 10) < this.dayStartTime ||
+ parseInt(end, 10) > this.dayEndTime
+ ) {
+ return {
+ top: "0px",
+ visibility: "hidden",
+ };
+ }
+ return {
+ top: `${position}px`,
+ };
+ },
},
};
@@ -45,6 +80,16 @@ export default {
.header
height: 48px
+ position: sticky
+ top: 0px
+ z-index: 5
+ width: inherit
+ border-right: 1px solid var(--border-light-grey-color)
+ background-color: var(--default-white)
+
+.body
+ position: relative
+ z-index: 3
.avatar-wrapper
width: 32px
diff --git a/src/pages/calendar/components/CalendarEventCard.vue b/src/pages/calendar/components/CalendarEventCard.vue
index f68a318..b698740 100644
--- a/src/pages/calendar/components/CalendarEventCard.vue
+++ b/src/pages/calendar/components/CalendarEventCard.vue
@@ -47,8 +47,8 @@ export default {
border-radius: 4px
background-color: var(--bg-event-yellow-color)
color: var(--font-black-color)
- position: relative
- z-index: 2
+ position: absolute
+ z-index: 3
.header
width: 100%
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index ccf047e..99848d9 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -1,5 +1,5 @@
- .schedule.ml-2.w-full(:style="scheduleWidth")
+ .schedule.ml-2.pb-5.w-full(:style="scheduleWidth")
calendar-header(
:current-date="currentDate"
:is-current-date="isCurrentDate"
@@ -7,19 +7,23 @@
@next-date="nextDate"
@selected-layout="selectedLayout"
)
- .schedule-body.flex
+ .schedule-body.flex(
+ :class="bodyVerticalScroll"
+ )
div
calendar-clock-column(
- :hours-array="hoursArray"
+ :timeCoil="timeCoil"
:current-time="currentTime"
:is-current-date="isCurrentDate"
:day-end-time="validateEndTime"
)
calendar-background(
:current-date="currentDate"
- :hours-array="hoursArray"
+ :time-coil="timeCoil"
:events-data="eventsData"
:sidebar-width="sidebarWidth"
+ :day-start-time="validateStartTime"
+ :day-end-time="validateEndTime"
)
.time-circle-indicator.left-74px(
v-if="isShownIndicator"
@@ -67,7 +71,7 @@ export default {
data() {
return {
currentTime: "",
- hoursArray: [],
+ timeCoil: [],
timer: null,
isCurrentDate: true,
isShownIndicator: true,
@@ -115,6 +119,11 @@ export default {
"--sidebar-width": this.sidebarWidth,
};
},
+ bodyVerticalScroll() {
+ return {
+ "scroll-y": this.scheduleHeight > 855,
+ };
+ },
},
methods: {
previousDate() {
@@ -133,7 +142,7 @@ export default {
) {
this.timer = setInterval(() => {
this.changeCurrentTime();
- this.changeHoursArray();
+ this.changeTimeCoil();
}, 5000);
}
},
@@ -144,20 +153,20 @@ export default {
changeCurrentTime() {
this.currentTime = moment().format("HH:mm:ss");
},
- hoursArrayInitialization() {
- this.hoursArray = [];
+ timeCoilInitialization() {
+ this.timeCoil = [];
for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
if (
i === this.hours &&
this.hours !== this.validateEndTime &&
this.isCurrentDate
) {
- this.hoursArray.push(this.hoursMinutes);
- } else this.hoursArray.push(`${i}:00`);
+ this.timeCoil.push(this.hoursMinutes);
+ } else this.timeCoil.push(`${i}:00`);
}
},
- changeHoursArray() {
- this.hoursArray = this.hoursArray.map((elem) => {
+ changeTimeCoil() {
+ this.timeCoil = this.timeCoil.map((elem) => {
if (this.convertTime(elem, 0, -3) === this.hours) {
return this.hoursMinutes;
}
@@ -195,7 +204,7 @@ export default {
this.timer
) {
this.stopTimer();
- this.hoursArrayInitialization();
+ this.timeCoilInitialization();
}
},
currentDate: function () {
@@ -204,18 +213,18 @@ export default {
this.isShownIndicator = this.isCurrentDate;
if (this.timer) {
this.stopTimer();
- this.hoursArrayInitialization();
+ this.timeCoilInitialization();
}
if (this.isCurrentDate) {
this.changeCurrentTime();
- this.hoursArrayInitialization();
+ this.timeCoilInitialization();
this.startTimer();
}
},
},
mounted() {
this.changeCurrentTime();
- this.hoursArrayInitialization();
+ this.timeCoilInitialization();
this.startTimer();
},
beforeUnmount() {
@@ -229,6 +238,9 @@ export default {
background-color: var(--default-white)
width: calc(100% - (var(--sidebar-width) + 8px))
+.scroll-y
+ overflow-y: scroll
+
.time-line-indicator
width: calc(100% - 80px)
border-top: 1px solid var(--bg-event-red-color)
@@ -243,4 +255,5 @@ export default {
.schedule-body
position: relative
+ height: 855px