[WIP] Добавил стили и форму на страницу расписания

(cherry picked from commit 109c6319a07ae73dc761c8c7fc2ddc7887d27161)

src/pages/schedule/TheSchedule.vue

@@ -1,48 +1,33 @@
 <template lang="pug">
   .wrapper.flex.w-full.relative.mx-2
-    .schedule-wrapper.relative.flex.flex-col.px-6.py-6.h-full.w-full
-      .schedule.flex-col
-        .schedule-header.flex.w-full
-          .flex.items-center(:style="{padding: '16px 102px'}")
-            .text.font-bold Сотрудник
-          .column-wrapper.flex
-            .schedule-column.flex.flex-col.items-center.justify-center.px-2(
-              v-for="day in result",
-              :style="{backgroundColor: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? 'var(--bg-white-color-1)' : ''}"
-            )
-              .day.flex {{day.format("D")}}
-              .week.flex {{day.format("ddd")}}
-        .schedule-body.flex.w-full
-          .edit.flex.items-center.justify-center.h-9.w-9
-            .flex.icon-edit
-          .name.flex
+    .schedule-wrapper.relative.flex.flex-col.px-6.py-6.h-full.w-full.gap-y-5
+      schedule-header
+      schedule-body(:employee-list="employeeList")
+      schedule-bar
 </template>
 
 <script>
-import * as moment from "moment";
+import ScheduleHeader from "@/pages/schedule/components/ScheduleHeader.vue";
+import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
+import ScheduleBody from "@/pages/schedule/components/ScheduleBody.vue";
+import { fetchWrapper } from "@/shared/fetchWrapper.js";
 export default {
   name: "TheSchedule",
+  components: { ScheduleHeader, ScheduleBar, ScheduleBody },
   data() {
     return {
-      days: "",
-      result: [],
-      startMonth: moment("2022-12-01"),
+      employeeList: [],
     };
   },
   methods: {
-    changeDays() {
-      this.days = moment().daysInMonth();
-    },
-    pushMonth() {
-      this.result.push(this.startMonth);
-      for (let i = 2; i <= this.days; i++) {
-        this.result.push(this.startMonth.clone().add(i - 1, "d"));
-      }
+    getSchedules() {
+      fetchWrapper
+        .get("general/employee/")
+        .then((res) => (this.employeeList = res.results));
     },
   },
   mounted() {
-    this.changeDays();
-    this.pushMonth();
+    this.getSchedules();
   },
 };
 </script>
@@ -56,31 +41,4 @@ export default {
 .schedule-wrapper
   background-color: var(--default-white)
   height: calc(100vh - 64px)
-
-.schedule
-  border: 1.5px solid var(--border-light-grey-color-1)
-  border-radius: 4px
-  min-height: 87px
-
-.schedule-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
-  max-width: 1080px
-  overflow: auto
-
-.text
-  color: var(--btn-blue-color)
-
-.name
-  min-width: 255px
-  max-width: 255px
-  border-right: 1.5px solid var(--border-light-grey-color-1)
-
-.edit
-  border-right: 1.5px solid var(--border-light-grey-color-1)
 </style>