[WIP] Разбил расписание на компоненты, исправил логику работы

src/pages/schedule/components/ScheduleTable.vue

@@ -1,87 +1,46 @@
 <template lang="pug">
   .schedule.flex-col(:style="themeCell")
-    .table-header.flex.w-full.pr-2
+    schedule-table-header(:result="result")
-      .flex.items-center.justify-center.pl-11(
+    schedule-table-body(
-        :style="{width: 'calc(25% + 43px)'}"
+      :serialized="serialized",
-      )
+      :trim-owner-name="trimOwnerName",
-        .text.font-bold Сотрудник
+      :result="result",
-      .column-wrapper.flex
+      :choice-cell="choiceCell",
-        .schedule-column.flex.flex-col.items-center.justify-center.w-11(
+      :clear-select="clearSelect",
-          v-for="day in result",
+      :select-employee="selectEmployee",
-          :class="{'column-color': changelColumnColor(day)}",
+      :choice-state="choiceState",
-          :style="{width: `calc(100% / ${result.length})`}"
+      :buttons="buttons",
-        )
+      :show-time="showTime",
-          .text.flex.font-bold(
+      :schedule-list="scheduleList"
-            :style="{opacity: changeOpacity(day)}"
+    )
-          ) {{day.format("D")}}
+    schedule-table-select(
-          .text.flex.font-bold(
+      v-if="clearEmployee.length > 0",
-            :style="{opacity: changeOpacity(day)}"
+      :select-employee="selectEmployee",
-          ) {{day.format("ddd")}}
+      :clear-employee="clearEmployee",
-    .schedule-wrapper.flex.w-full.flex-col
+      :result="result",
-      .flex.w-full(v-for="schedule in serialized", :key="schedule.id")
+      :choice-cell="choiceCell",
-        .edit.flex.items-center.justify-center.h-11.w-11
+      :choice-state="choiceState",
-          .flex.icon-edit
+      :trim-owner-name="trimOwnerName",
-        .name-employee.flex.justify-center.items-center.cursor-pointer
-          span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
-        .row.flex
-          .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer.transition(
-            v-for="day in result",
-            :key="day",
-            :id="schedule.id + day",
-            @click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee)",
-            :class="choiceState(day, schedule.id)",
-            :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : '', width: `calc(100% / ${result.length})`}"
-          )
-            .flex(
-              :class="{'cell-work': choiceState(day, schedule.id)?.status, 'show-time': showTime}"
-            ) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
-    .flex.w-full.mt-4(
-      v-if="clearEmployee.length > 0",
-      :class="{'schedule-select': selectEmployee.label}"
     )
-      .edit.flex.items-center.justify-center.h-11.w-11(v-if="selectEmployee.label")
-        .flex.icon-edit(v-if="selectEmployee.label")
-          //- base-button(
-          //-   confirm,
-          //-   rounded,
-          //-   outlined,
-          //-   :size="20",
-          //-   @click="saveEmployee",
-          //-   v-if="selectEmployee.label"
-          //- )
-            //- .icon-ok.text-xsm(class="pt-[3px]")
-      .text.flex.justify-center.items-center.cursor-pointer(
-        :class="{'select-name': selectEmployee.label}"
-      )
-        base-custom-select(
-          v-if="!selectEmployee.label",
-          :items="ownersList",
-          v-model="selectEmployee",
-          placeholder="Добавить сотрудника",
-          :style="{border: 'none', justifyContent: 'center'}"
-        )
-        .flex.justify-center(v-else) {{selectEmployee.label}}
-      .row.flex
-        .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
-          v-if="selectEmployee.label",
-          v-for="day in result",
-          :key="day",
-          :id="selectEmployee.id + day",
-          @click="choiceCell(day, selectEmployee.id)",
-          :class="choiceState(day, selectEmployee.id)",
-          :style="{width: `calc(100% / ${result.length})`}"
-        )
 </template>
 
 <script>
 import * as moment from "moment";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
+import ScheduleTableHeader from "@/pages/schedule/components/ScheduleTableHeader.vue";
+import ScheduleTableBody from "@/pages/schedule/components/ScheduleTableBody.vue";
+import ScheduleTableSelect from "@/pages/schedule/components/ScheduleTableSelect.vue";
 
 export default {
   name: "ScheduleTable",
-  components: { BaseModal, BaseButton, BaseCustomSelect },
+  components: {
+    BaseModal,
+    BaseButton,
+    ScheduleTableHeader,
+    ScheduleTableBody,
+    ScheduleTableSelect,
+  },
   props: {
     scheduleList: Array,
     serialized: Array,
@@ -109,23 +68,6 @@ export default {
     };
   },
   computed: {
-    ownersList() {
-      if (this.clearEmployee) {
-        let filteredArray = [];
-        this.clearEmployee.forEach((elem) => {
-          filteredArray.push({
-            id: elem.id,
-            label: this.trimOwnerName(
-              elem.last_name,
-              elem.first_name,
-              elem.patronymic
-            ),
-          });
-        });
-        return filteredArray;
-      }
-      return [];
-    },
     themeCell() {
       this.setActiveButton();
       return {
@@ -135,21 +77,6 @@ export default {
     },
   },
   methods: {
-    choiceTime(schedule, day) {
-      let currentDay = day.format("YYYY-MM-DD");
-      let start = schedule.schedules.find(
-        (e) => e.date === currentDay && e.status === "WORKS"
-      )?.start_time;
-      let end = schedule.schedules.find(
-        (e) => e.date === currentDay && e.status === "WORKS"
-      )?.end_time;
-      if (start && end) return `${start} ${end}`;
-    },
-    changelColumnColor(day) {
-      return day.format("ddd") === "сб" || day.format("ddd") === "вс"
-        ? true
-        : false;
-    },
     setActiveButton() {
       this.activeButton = this.buttons.find((e) => e.active);
     },
@@ -234,25 +161,8 @@ export default {
         return {
           status: !!this.activeButton,
           "set-date": !this.activeButton,
-          "set-template": !this.activeButton && this.template.item.label,
         };
     },
-    choiceWorks(day, employee) {
-      if (this.showTime) {
-        return this.choiceTime(employee, day);
-      }
-      let currentDay = day.format("YYYY-MM-DD");
-      let res = employee.schedules.find((e) => e.date === currentDay)?.status;
-      return this.buttons.find((e) => e.work === res)?.text[1];
-    },
-    choiceColor(day, employee) {
-      let currentDay = day.format("YYYY-MM-DD");
-      let res = employee.schedules.find((e) => e.date === currentDay)?.status;
-      if (res !== "WORKS" && this.showTime) {
-        return "var(--default-white)";
-      }
-      return this.buttons.find((e) => e.work === res)?.color;
-    },
     changeDays() {
       this.days = moment(this.choiceMonth, "YYYY-MM-DD").daysInMonth();
     },
@@ -268,18 +178,6 @@ export default {
       let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
       return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
     },
-    choiceDay(day, employee) {
-      let current = day.format("YYYY-MM-DD");
-      return this.scheduleList.find(
-        (e) => current === e.date && e.employee.id === employee
-      )?.date;
-    },
-
-    changeOpacity(day) {
-      return day.format("ddd") === "сб" || day.format("ddd") === "вс"
-        ? "0.6"
-        : "1";
-    },
   },
   watch: {
     startMonth: {
@@ -307,62 +205,6 @@ export default {
   min-height: 87px
   width: calc(100vw - 136px)
 
-.schedule-wrapper
-  overflow-y: scroll
-  max-height: 351px
-  border-bottom: 1.5px solid var(--border-light-grey-color-1)
-  &::-webkit-scrollbar-track
-    border-radius: 0
-
-.table-header
-  height: 50px
-  background-color: #D7D9FF
-  border-bottom: 1.5px solid var(--border-light-grey-color-1)
-  border-top-left-radius: 2px
-  border-top-right-radius: 2px
-
-.schedule-select
-  border-right: 8px solid var(--bg-ligth-blue-color)
-  border-top: 1.5px solid var(--border-light-grey-color-1)
-
-.column-wrapper
-  overflow: auto
-  overflow-x: hidden
-  width: calc(75% - 44px)
-
-.column-color
-  background-color: var(--bg-white-color-1)
-
-.text
-  color: var(--btn-blue-color)
-
-.edit
-  border-right: 1.5px solid var(--border-light-grey-color-1)
-  border-bottom: 1.5px solid var(--border-light-grey-color-1)
-  border-left: 1.5px solid var(--border-light-grey-color-1)
-
-.row
-  width: calc(75% - 44px)
-
-.select-name
-  width: 25%
-  border-right: 1.5px solid var(--border-light-grey-color-1)
-  border-bottom: 1.5px solid var(--border-light-grey-color-1)
-
-.name-employee
-  width: 25%
-  border-right: 1.5px solid var(--border-light-grey-color-1)
-  border-bottom: 1.5px solid var(--border-light-grey-color-1)
-  color: var(--btn-blue-color)
-
-.cell
-  border-right: 1.5px solid var(--border-light-grey-color-1)
-  border-bottom: 1.5px solid var(--border-light-grey-color-1)
-  &:hover
-    background-color: var(--border-light-grey-color-1)
-  &:last-child
-    border-right: none
-
 .show-time
   text-align: center
   font-size: 12px
@@ -376,15 +218,9 @@ export default {
 .status
   background-color: var(--bg-color-status) !important
 
-.cell-work
-  display: none
-
 .status::after
   content: var(--text-status)
 
 .set-date
   background-color: var(--btn-blue-color-4) !important
-
-.set-template
-  background-color: var(--bg-event-orange-color) !important
 </style>

src/pages/schedule/components/ScheduleTableBody.vue

@@ -0,0 +1,119 @@
+<template lang="pug">
+  .schedule-wrapper.flex.w-full.flex-col
+    .flex.w-full(v-for="schedule in serialized", :key="schedule.id")
+      .edit.flex.items-center.justify-center.h-11.w-11
+        .flex.icon-edit
+      .name-employee.flex.justify-center.items-center.cursor-pointer
+        span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
+      .row.flex
+        .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer.transition(
+          v-for="day in result",
+          :key="day",
+          :id="schedule.id + day",
+          @click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee)",
+          :class="choiceState(day, schedule.id)",
+          :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : '', width: `calc(100% / ${result.length})`}"
+        )
+          .flex(
+            :class="{'cell-work': choiceState(day, schedule.id)?.status, 'show-time': showTime}"
+          ) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
+</template>
+
+<script>
+export default {
+  name: "ScheduleTableBody",
+  props: {
+    serialized: Array,
+    trimOwnerName: Function,
+    result: Array,
+    choiceCell: Function,
+    clearSelect: Function,
+    selectEmployee: Object,
+    choiceState: Function,
+    buttons: Array,
+    showTime: Boolean,
+    scheduleList: Array,
+  },
+  methods: {
+    choiceDay(day, employee) {
+      let current = day.format("YYYY-MM-DD");
+      return this.scheduleList.find(
+        (e) => current === e.date && e.employee.id === employee
+      )?.date;
+    },
+    choiceColor(day, employee) {
+      let currentDay = day.format("YYYY-MM-DD");
+      let res = employee.schedules.find((e) => e.date === currentDay)?.status;
+      if (res !== "WORKS" && this.showTime) {
+        return "var(--default-white)";
+      }
+      return this.buttons.find((e) => e.work === res)?.color;
+    },
+    choiceWorks(day, employee) {
+      if (this.showTime) {
+        return this.choiceTime(employee, day);
+      }
+      let currentDay = day.format("YYYY-MM-DD");
+      let res = employee.schedules.find((e) => e.date === currentDay)?.status;
+      return this.buttons.find((e) => e.work === res)?.text[1];
+    },
+    choiceTime(schedule, day) {
+      let currentDay = day.format("YYYY-MM-DD");
+      let start = schedule.schedules.find(
+        (e) => e.date === currentDay && e.status === "WORKS"
+      )?.start_time;
+      let end = schedule.schedules.find(
+        (e) => e.date === currentDay && e.status === "WORKS"
+      )?.end_time;
+      if (start && end) return `${start} ${end}`;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.schedule-wrapper
+  overflow-y: scroll
+  max-height: 351px
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  &::-webkit-scrollbar-track
+    border-radius: 0
+
+.edit
+  border-right: 1.5px solid var(--border-light-grey-color-1)
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  border-left: 1.5px solid var(--border-light-grey-color-1)
+
+.name-employee
+  width: 25%
+  border-right: 1.5px solid var(--border-light-grey-color-1)
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  color: var(--btn-blue-color)
+
+.row
+  width: calc(75% - 44px)
+
+.cell
+  border-right: 1.5px solid var(--border-light-grey-color-1)
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  &:hover
+    background-color: var(--border-light-grey-color-1)
+  &:last-child
+    border-right: none
+
+.cell-work
+  display: none
+
+.show-time
+  text-align: center
+  font-size: 12px
+
+.set-date
+  background-color: var(--btn-blue-color-4) !important
+
+.status
+  background-color: var(--bg-color-status) !important
+
+.status::after
+  content: var(--text-status)
+</style>

src/pages/schedule/components/ScheduleTableHeader.vue

@@ -0,0 +1,60 @@
+<template lang="pug">
+  .table-header.flex.w-full.pr-2
+    .flex.items-center.justify-center.pl-11(
+      :style="{width: 'calc(25% + 43px)'}"
+    )
+      .text.font-bold(
+        :style="{color: 'var(--btn-blue-color)'}"
+      ) Сотрудник
+    .column-wrapper.flex
+      .flex.flex-col.items-center.justify-center.w-11(
+        v-for="day in result",
+        :class="{'column-color': changelColumnColor(day)}",
+        :style="{width: `calc(100% / ${result.length})`}"
+      )
+        .text.flex.font-bold(
+          :style="{opacity: changeOpacity(day)}"
+        ) {{day.format("D")}}
+        .text.flex.font-bold(
+          :style="{opacity: changeOpacity(day)}"
+        ) {{day.format("ddd")}}
+</template>
+
+<script>
+export default {
+  name: "ScheduleTableHeader",
+  props: { result: Array },
+  methods: {
+    changelColumnColor(day) {
+      return day.format("ddd") === "сб" || day.format("ddd") === "вс"
+        ? true
+        : false;
+    },
+    changeOpacity(day) {
+      return day.format("ddd") === "сб" || day.format("ddd") === "вс"
+        ? "0.6"
+        : "1";
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.table-header
+  height: 50px
+  background-color: #D7D9FF
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  border-top-left-radius: 2px
+  border-top-right-radius: 2px
+
+.column-wrapper
+  overflow: auto
+  overflow-x: hidden
+  width: calc(75% - 44px)
+
+.column-color
+  background-color: var(--bg-white-color-1)
+
+.text
+  color: var(--btn-blue-color)
+</style>

src/pages/schedule/components/ScheduleTableSelect.vue

@@ -0,0 +1,110 @@
+<template lang="pug">
+  .flex.w-full.mt-4(
+    :class="{'schedule-select': selectEmployee.label}"
+  )
+    .edit.flex.items-center.justify-center.h-11.w-11(v-if="selectEmployee.label")
+      .flex.icon-edit(v-if="selectEmployee.label")
+        //- base-button(
+        //-   confirm,
+        //-   rounded,
+        //-   outlined,
+        //-   :size="20",
+        //-   @click="saveEmployee",
+        //-   v-if="selectEmployee.label"
+        //- )
+          //- .icon-ok.text-xsm(class="pt-[3px]")
+    .flex.justify-center.items-center.cursor-pointer(
+      :class="{'select-name': selectEmployee.label}",
+      :style="{color: 'var(--btn-blue-color)'}"
+    )
+      base-custom-select(
+        v-if="!selectEmployee.label",
+        :items="ownersList",
+        v-model="selectEmployee",
+        placeholder="Добавить сотрудника",
+        :style="{border: 'none', justifyContent: 'center'}"
+      )
+      .flex.justify-center(v-else) {{selectEmployee.label}}
+    .row.flex
+      .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
+        v-if="selectEmployee.label",
+        v-for="day in result",
+        :key="day",
+        :id="selectEmployee.id + day",
+        @click="choiceCell(day, selectEmployee.id)",
+        :class="choiceState(day, selectEmployee.id)",
+        :style="{width: `calc(100% / ${result.length})`}"
+      )
+</template>
+
+<script>
+import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
+
+export default {
+  name: "ScheduleTableSelect",
+  components: { BaseCustomSelect },
+  props: {
+    selectEmployee: Object,
+    result: Array,
+    choiceCell: Function,
+    choiceState: Function,
+    clearEmployee: Array,
+    trimOwnerName: Function,
+  },
+  computed: {
+    ownersList() {
+      if (this.clearEmployee) {
+        let filteredArray = [];
+        this.clearEmployee.forEach((elem) => {
+          filteredArray.push({
+            id: elem.id,
+            label: this.trimOwnerName(
+              elem.last_name,
+              elem.first_name,
+              elem.patronymic
+            ),
+          });
+        });
+        return filteredArray;
+      }
+      return [];
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.edit
+  border-right: 1.5px solid var(--border-light-grey-color-1)
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  border-left: 1.5px solid var(--border-light-grey-color-1)
+
+.schedule-select
+  border-right: 8px solid var(--bg-ligth-blue-color)
+  border-top: 1.5px solid var(--border-light-grey-color-1)
+
+.select-name
+  width: 25%
+  border-right: 1.5px solid var(--border-light-grey-color-1)
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+
+.row
+  width: calc(75% - 44px)
+
+.cell
+  border-right: 1.5px solid var(--border-light-grey-color-1)
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  &:hover
+    background-color: var(--border-light-grey-color-1)
+  &:last-child
+    border-right: none
+
+.set-date
+  background-color: var(--btn-blue-color-4) !important
+
+.status
+  background-color: var(--bg-color-status) !important
+
+.status::after
+  content: var(--text-status)
+</style>