Merge branch 'master' into UC-22

2022-10-26 16:14:46 +03:00
parent a2715a712f 5b3d4759a9
commit a7a4402433
15 changed files with 336 additions and 220 deletions
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .calendar-container.flex
-    calendar-sidebar(@width="changeWidth" :team="team")
+    calendar-sidebar(@width="changeWidth" :team-data="teamData")
    calendar-schedule(
      :current-date="currentDate"
      :time-information="timeInformation"
@@ -16,7 +16,6 @@
 import * as moment from "moment/moment";
 import CalendarSchedule from "./components/CalendarSchedule.vue";
 import CalendarSidebar from "./components/CalendarSidebar.vue";
-import img from "../../assets/images/team-member.svg";
 export default {
  name: "TheCalendar",
  components: { CalendarSchedule, CalendarSidebar },
@@ -26,40 +25,11 @@ export default {
      calendarLayout: "",
      currentDate: moment(),
      timeInformation: {
-        dayStartTime: "8:00",
-        dayEndTime: "18:00",
+        dayStartTime: "0:00",
+        dayEndTime: "20:00",
      },
      eventsData: [],
-      team: [
-        {
-          id: 1,
-          last_name: "Гагарин",
-          first_name: "Юрий",
-          patronymic: "Алексеевич",
-          avatar: img,
-        },
-        {
-          id: 2,
-          last_name: "Константинопольская",
-          first_name: "Юлия",
-          patronymic: "Витальевна",
-          avatar: img,
-        },
-        {
-          id: 3,
-          last_name: "Коломойцев",
-          first_name: "Игорь",
-          patronymic: "Константинович",
-          avatar: img,
-        },
-        {
-          id: 4,
-          last_name: "Зайцев",
-          first_name: "Валерий",
-          patronymic: "Сергеевич",
-          avatar: img,
-        },
-      ],
+      teamData: [],
    };
  },
  methods: {
@@ -75,10 +45,16 @@ export default {
    saveEventsData(res) {
      this.eventsData = res.results;
    },
+    saveTeamData(res) {
+      this.teamData = res.results;
+    },
    fetchEventsData() {
      fetch("/registry/event/")
        .then((res) => res.json())
        .then((res) => this.saveEventsData(res));
+      fetch("http://45.84.227.122:8080/general/employee/")
+        .then((res) => res.json())
+        .then((res) => this.saveTeamData(res));
    },
    changeWidth(value) {
      this.sidebarWidth = value;
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -1,22 +1,25 @@
 <template lang="pug">
  .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,13 @@ export default {
  name: "CalendarBackground",
  components: { CalendarColumn },
  props: {
-    hoursArray: Array,
+    timeCoil: Array,
+    filteredOwners: Array,
    eventsData: Array,
    currentDate: Object,
    sidebarWidth: String,
+    dayStartTime: Number,
+    dayEndTime: Number,
  },
  data() {
    return {
@@ -56,43 +62,7 @@ export default {
      };
    },
    backgroundHeight() {
-      return (this.hoursArray.length - 1) * this.pixelsPerHour + 48;
-    },
-    scrollPresence() {
-      return {
-        scroll: this.ownersArrayLength > 3,
-      };
-    },
-    filteredOwners() {
-      let filteredArray = [];
-      let ownerAbsence = {
-        id: null,
-        last_name: null,
-        first_name: null,
-        patronymic: null,
-      };
-      this.eventsData.forEach(({ employees }) => {
-        let findedElement = employees.find((elem) => elem.role === "owner");
-        let emptyObjectPresence = this.findObjectInArray(
-          filteredArray,
-          ownerAbsence
-        );
-        if (!findedElement && !emptyObjectPresence) {
-          filteredArray.push(ownerAbsence);
-        }
-        if (findedElement) {
-          let ownerPresence = this.findObjectInArray(
-            filteredArray,
-            findedElement.employee
-          );
-          if (!ownerPresence) {
-            filteredArray.push(findedElement.employee);
-          }
-        }
-      });
-      return filteredArray.sort(
-        (previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
-      );
+      return (this.timeCoil.length - 1) * this.pixelsPerHour + 48;
    },
    filteredEventsByDate() {
      return this.eventsData.filter(
@@ -100,6 +70,11 @@ export default {
          start.slice(0, 10) === this.currentDate.format("YYYY-MM-DD")
      );
    },
+    horizontalScrollPresence() {
+      return {
+        "scroll-x": this.ownersArrayLength > 3,
+      };
+    },
  },
  methods: {
    calculateColumnPosition(elemIndex) {
@@ -120,12 +95,7 @@ export default {
      };
    },
    calculateBackgroundWidth() {
-      this.backgroundWidth = this.$refs.backgroundWrapper.offsetWidth;
-    },
-    findObjectInArray(array, object) {
-      return array.find(
-        (item) => JSON.stringify(item) === JSON.stringify(object)
-      );
+      this.backgroundWidth = this.$refs.backgroundWrapper.scrollWidth;
    },
    filterEventsByOwner(owner) {
      let filteredArray = [];
@@ -147,13 +117,16 @@ export default {
 </script>

 <style lang="sass" scoped>
-.scroll
-  overflow-x: scroll
+.scroll-x
+  overflow-x: auto

 .calendar-background-wrapper
  width: 100%
  position: relative

+.header-wrapper
+  position: relative
+
 .header
  height: 48px

--- a/src/pages/calendar/components/CalendarClockColumn.vue
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
  .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pt-9.pb-45px.px-3
    span.text-base(
-      v-for="hour in hoursArray"
+      v-for="hour in timeCoil"
      :key="hour"
      :class="currentHourStyle(hour)"
      ) {{ hour }}
@@ -11,7 +11,7 @@
 export default {
  name: "CalendarClockColumn",
  props: {
-    hoursArray: Array,
+    timeCoil: Array,
    currentTime: String,
    currentDate: Object,
    dayEndTime: Number,
@@ -59,4 +59,6 @@ export default {
  width: 80px
  height: 100%
  color: var(--font-dark-blue-color)
+  position: sticky
+  left: 0
 </style>
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -1,16 +1,17 @@
 <template lang="pug">
  .calendar-column-wrapper.flex.flex-col
-    .header.flex.items-center.justify-between.py-2.px-6
+    .header.flex.items-center.justify-between.py-2.px-6.top-0
      .flex.items-center
        img.avatar-wrapper.mr-2(src="@/assets/images/team-member.svg" alt="Team member")
        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)"
        )
 </template>

@@ -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`,
+      };
+    },
  },
 };
 </script>
@@ -42,9 +77,22 @@ export default {
 .calendar-column-wrapper
  position: absolute
  border-right: 1px solid var(--border-light-grey-color)
+  &:nth-last-child(2) .header
+    border-right: none
+  &:nth-last-child(2)
+    border-right: none

 .header
  height: 48px
+  position: sticky
+  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
--- 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%
--- a/src/pages/calendar/components/CalendarHeader.vue
+++ b/src/pages/calendar/components/CalendarHeader.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
+  .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6.top-0
    .flex
      base-arrow-button.left-arrow.mr-4(@click="previousHandler")
      base-arrow-button.right-arrow.mr-6(@click="nextHandler")
@@ -51,6 +51,8 @@ export default {
  background-color: var(--default-white)
  height: 56px
  border-radius: 4px
+  position: sticky
+  z-index: 10

 .left-arrow
  transform: rotate(90deg)
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -1,5 +1,8 @@
 <template lang="pug">
-  .schedule.ml-2.w-full(:style="scheduleWidth")
+  .schedule.ml-2(
+    :style="scheduleWidth"
+    ref="shedule"
+    )
    calendar-header(
      :current-date="currentDate"
      :is-current-date="isCurrentDate"
@@ -7,19 +10,23 @@
      @next-date="nextDate"
      @selected-layout="selectedLayout"
      )
-    .schedule-body.flex
+    .schedule-body.flex(
+      )
      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"
+        :filtered-owners="filteredOwners"
        :sidebar-width="sidebarWidth"
+        :day-start-time="validateStartTime"
+        :day-end-time="validateEndTime"
        )
      .time-circle-indicator.left-74px(
        v-if="isShownIndicator"
@@ -67,12 +74,14 @@ export default {
  data() {
    return {
      currentTime: "",
-      hoursArray: [],
+      timeCoil: [],
      timer: null,
      isCurrentDate: true,
      isShownIndicator: true,
      pixelsPerHour: 62,
      columnHeaderHeight: 48,
+      defaultColumnWidth: 470,
+      sheduleHeight: 0,
    };
  },
  computed: {
@@ -92,6 +101,12 @@ export default {
      return this.verifyTime(this.timeInformation.dayEndTime);
    },
    lineIndicatorLocation() {
+      if (this.filteredOwners.length > 3 && this.timeCoil.length - 1 > 13) {
+        return {
+          width: `${this.filteredOwners.length * this.defaultColumnWidth}px`,
+          top: `${this.calculateIndicatorLocation()}px`,
+        };
+      }
      return {
        top: `${this.calculateIndicatorLocation()}px`,
      };
@@ -115,6 +130,37 @@ export default {
        "--sidebar-width": this.sidebarWidth,
      };
    },
+    filteredOwners() {
+      let filteredArray = [];
+      let ownerAbsence = {
+        id: null,
+        last_name: null,
+        first_name: null,
+        patronymic: null,
+      };
+      this.eventsData.forEach(({ employees }) => {
+        let findedElement = employees.find((elem) => elem.role === "owner");
+        let emptyDataPresence = this.findObjectInArray(
+          filteredArray,
+          ownerAbsence
+        );
+        if (!findedElement && !emptyDataPresence) {
+          filteredArray.push(ownerAbsence);
+        }
+        if (findedElement) {
+          let ownerPresence = this.findObjectInArray(
+            filteredArray,
+            findedElement.employee
+          );
+          if (!ownerPresence) {
+            filteredArray.push(findedElement.employee);
+          }
+        }
+      });
+      return filteredArray.sort(
+        (previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
+      );
+    },
  },
  methods: {
    previousDate() {
@@ -133,7 +179,7 @@ export default {
      ) {
        this.timer = setInterval(() => {
          this.changeCurrentTime();
-          this.changeHoursArray();
+          this.changeTimeCoil();
        }, 5000);
      }
    },
@@ -144,20 +190,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;
        }
@@ -186,6 +232,11 @@ export default {
      }
      return result;
    },
+    findObjectInArray(array, object) {
+      return array.find(
+        (item) => JSON.stringify(item) === JSON.stringify(object)
+      );
+    },
  },
  watch: {
    currentTime() {
@@ -195,7 +246,7 @@ export default {
        this.timer
      ) {
        this.stopTimer();
-        this.hoursArrayInitialization();
+        this.timeCoilInitialization();
      }
    },
    currentDate: function () {
@@ -204,18 +255,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() {
@@ -226,8 +277,12 @@ export default {

 <style lang="sass" scoped>
 .schedule
+  position: relative
  background-color: var(--default-white)
  width: calc(100% - (var(--sidebar-width) + 8px))
+  height: calc(100vh - 56px - 8px)
+  overflow-y: auto
+  overflow-x: hidden

 .time-line-indicator
  width: calc(100% - 80px)
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -1,56 +1,67 @@
 <template lang="pug">
  .sidebar.flex.flex-col.bg-white(:class="openSidebar")
-    .sidebar-wrapper.h-full.my-13px(:style="sidebarWidth")
-      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
-        base-button-plus(:size="40" v-if="!isOpen")
-        .create-event.flex.items-center.justify-center(v-else)
-          base-create-button.font-medium.pl-15px.py-10.5px(text="Создать событие" :withIcon="true")
+    .sidebar-wrapper.h-full.my-13px.flex.flex-col.justify-between(:style="sidebarWidth")
+      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-if="!isOpen")
+        base-button-plus(:size="40")
        .flex.flex-col.items-center(v-if="!isOpen")
          base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
          .flex.flex-col.gap-y-2.items-center.mt-4
            .event.flex.items-center.justify-center(v-for="event in events" :key="event.id")
              .event-type(:style="{ background: event.color }")
-        .flex.items-center.flex-col.gap-y-4(v-else)
+        .flex.flex-col.items-center.gap-y-2.justify-center
+          base-button-plus.mb-2(:class="buttonStyled" :size="24" :icon-size="10")
+          .team-card(v-for="teammate in teamData" :key="teammate.id")
+            img.avatar-wrapper(:src="avatar" alt="Team member")
+      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-else)
+        .create-event.flex.items-center.justify-center
+          base-create-button.pl-15px.pb-2.pr-3.pt-2.items-center.h-10(
+            text-styled="createEvent"
+            :icon-size="10"
+            text="Создать событие"
+            :with-icon="true"
+            icon-position="right")
+        .flex.items-center.flex-col.gap-y-4
          .events-wrapper.flex.items-center.justify-between
            .flex {{ "Виды событий" }}
            base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
          .flex.flex-col.gap-y-2
-            .relative.flex.items-center.gap-x-3(v-for="event in events")
-              base-input.py-2.pl-6(:placeholder="event.name" :key="event.id" :backgroundInput="red" background-input="transparent" font-size-input="12px")
+            .relative.flex.items-center.gap-x-3.h-8(v-for="event in events")
+              input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(
+                :placeholder="event.name"
+                :key="event.id")
              .event-type(:style="{ background: event.color }")
              span.icon-edit.cursor-pointer
-        .flex.flex-col.items-center.gap-y-2.justify-center(v-if="!isOpen")
-          base-button-plus.mb-2(:class="buttonStyled" :size="24" :icon-size="10")
-          .team-card(v-for="teammate in team" :key="teammate.id")
-            img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
-        .flex.flex-col.gap-y-4(v-else)
+        .flex.flex-col.gap-y-4
          .events-wrapper.flex.items-center.justify-between
            .flex {{ "Команды" }}
            base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
          .box-team.flex.flex-col.gap-y-2
-            .team-card.flex.items-center.justify-between(v-for="teammate in team" :key="teammate.id")
+            .team-card.flex.items-center.justify-between.cursor-pointer(
+              v-for="teammate in teamData"
+              :key="teammate.id")
              .flex.items-center
-                img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
-                .flex.ml-2.not-italic.font-medium.text-xxs {{ changeLastName(teammate.last_name) + changeInitials(teammate.first_name, teammate.patronymic) }}
-              .span.icon-change-place.cursor-pointer
-        base-open-button.mt-148px(@click="changeSize" :style="{ transform: `rotate(${turnButton})` }")
+                img.avatar-wrapper(:src="avatar" alt="Team member")
+                .flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }}
+              span.icon-change-place.cursor-pointer.w-5
+      .button-wrapper.flex.justify-center.mb-23px
+        base-open-button(@click="changeSize" :style="{ transform: `rotate(${turnButton})`}")
 </template>

 <script>
 import BaseButtonPlus from "../../../components/base/buttons/BaseButtonPlus.vue";
 import BaseOpenButton from "../../../components/base/buttons/BaseOpenButton.vue";
 import BaseCreateButton from "../../../components/base/buttons/BaseCreateButton.vue";
-import BaseInput from "../../../components/base/BaseInput.vue";
+import img from "../../../assets/images/team-member.svg";
+
 export default {
  name: "CalendarSidebar",
  components: {
    BaseButtonPlus,
    BaseOpenButton,
    BaseCreateButton,
-    BaseInput,
  },
  props: {
-    team: Array,
+    teamData: Array,
  },
  data() {
    return {
@@ -65,6 +76,7 @@ export default {
      isOpen: false,
      turnButton: "180deg",
      maxLengthLastName: 13,
+      avatar: img,
    };
  },
  computed: {
@@ -98,13 +110,15 @@ export default {
      );
      this.turnButton = this.isOpen ? "0deg" : "180deg";
    },
-    changeLastName(lastName) {
+    changeName(lastName, fitstName, patronymic) {
      return lastName.length > this.maxLengthLastName
-        ? lastName.substr(0, this.maxLengthLastName) + "... "
-        : lastName + " ";
-    },
-    changeInitials(firstName, patronymic) {
-      return firstName.substr(0, 1) + "." + patronymic.substr(0, 1) + ".";
+        ? lastName.slice(0, this.maxLengthLastName) + "... "
+        : lastName +
+            " " +
+            fitstName.slice(0, 1) +
+            "." +
+            patronymic.slice(0, 1) +
+            ".";
    },
  },
 };
@@ -113,30 +127,37 @@ export default {
 <style lang="sass" scoped>
 .sidebar-wrapper
  border-left: 2px solid var(--btn-blue-color-3)
+
 .button-plus
  max-height: 40px
  background: var(--btn-blue-color)
  color: var(--default-white)
+
 .event
  width: 32px
  height: 32px
  background: var(--bg-event-box-color)
  border-radius: 4px
+
 .event-type
  width: 16px
  height: 16px
  border-radius: 2px
+
 .avatar-wrapper
  width: 32px
  height: 32px
+
 .open-button
  width: 40px
  height: 40px
  max-height: 40px
+
 .button-styled
  max-height: 24px
  background: var(--btn-blue-color-1)
  color: var(--btn-blue-color)
+
 .open-sidebar
  .sidebar-content
    align-items: flex-end
@@ -147,15 +168,43 @@ export default {
    height: 16px
    top: 8px
    left: 8px
+  .button-wrapper
+    justify-content: end
+    padding-right: 16px
+
 .create-event
  width: 200px
  height: 40px
  border-radius: 4px
+
 .events-wrapper
  width: 200px
+
 .input-wrapper
  border: none
  background: var(--bg-event-box-color)
  height: 32px
  width: 169px
+
+.team-card
+  border-radius:16px
+  &:hover
+    background: var(--font-dark-blue-color)
+    color: var(--default-white)
+
+.button
+  width: 200px
+
+.custom-input
+  border-radius: 4px
+  width: 169px
+  outline: none
+  background-color: var(--bg-event-box-color)
+  &::placeholder
+    color: var(--font-dark-blue-color)
+  &:focus
+    background-color: var(--font-dark-blue-color)
+    color: var(--default-white)
+    &::placeholder
+      color: var(--default-white)
 </style>