WIP Подтянула данные в форму мед.карты

src/pages/schedule/TheSchedule.vue

@@ -1,33 +1,39 @@
 <template lang="pug">
   .wrapper.flex.w-full.relative.mx-2
-    .schedule-wrapper.relative.flex.flex-col.px-6.py-6.h-full.w-full.gap-y-5
-      schedule-header(
-        :start-month="startMonth",
-        :times-shift="timesShift",
-        :change-show-time="changeShowTime",
-        :show-time="showTime"
-        @switch-previous-month="switchPreviousMonth",
-        @switch-next-month="switchNextMonth"
-      )
-      schedule-table(
-        :schedules-employee="fetchSchedulesEmployee",
-        :schedule-list="scheduleList",
-        :serialized="serialized",
-        :buttons="buttons",
-        :start-month="startMonth",
-        :clear-employee="clearEmployee",
-        :show-time="showTime",
-        :clear-select="clearSelect",
-        :select-employee="selectEmployee",
-        @schedule-employee="createScheduleEmployee",
-        @schedules="distributeRequest"
-      )
-      schedule-bar(
-        :buttons="buttons",
-        :times="times",
-        :create-schedules="postCreateSchedules",
-        :delete-schedule="deleteSchedule"
-      )
+    transition(name="schedule", mode="out-in")
+      .flex.justify-center.items-center.w-full(v-if="schedulesDataPresence")
+          base-loader(
+            :width="60",
+            :height="60"
+          )
+      .relative.flex.flex-col.px-6.py-6.h-full.w-full.gap-y-5(v-else)
+        schedule-header(
+          :start-month="startMonth",
+          :times-shift="timesShift",
+          :change-show-time="changeShowTime",
+          :show-time="showTime"
+          @switch-previous-month="switchPreviousMonth",
+          @switch-next-month="switchNextMonth"
+        )
+        schedule-table(
+          :schedules-employee="fetchSchedulesEmployee",
+          :schedule-list="scheduleList",
+          :serialized="serialized",
+          :buttons="buttons",
+          :start-month="startMonth",
+          :clear-employee="clearEmployee",
+          :show-time="showTime",
+          :clear-select="clearSelect",
+          :select-employee="selectEmployee",
+          @schedule-employee="createScheduleEmployee",
+          @schedules="distributeRequest"
+        )
+        schedule-bar(
+          :buttons="buttons",
+          :times="times",
+          :create-schedules="postCreateSchedules",
+          :delete-schedule="deleteSchedule"
+        )
 </template>
 
 <script>
@@ -36,13 +42,18 @@ import ScheduleHeader from "@/pages/schedule/components/ScheduleHeader.vue";
 import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
 import ScheduleTable from "@/pages/schedule/components/ScheduleTable.vue";
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
+import BaseLoader from "@/components/Loader/BaseLoader.vue";
 
 export default {
   name: "TheSchedule",
-  components: { ScheduleHeader, ScheduleBar, ScheduleTable },
+  components: { ScheduleHeader, ScheduleBar, ScheduleTable, BaseLoader },
   data() {
     return {
-      employeeList: [],
+      employeeList: [
+        {
+          initialization: true,
+        },
+      ],
       scheduleList: [],
       clearEmployee: [],
       serialized: [],
@@ -87,6 +98,9 @@ export default {
     endMonth() {
       return this.startMonth.clone().endOf("month");
     },
+    schedulesDataPresence() {
+      return this.employeeList[0]?.initialization;
+    },
   },
   methods: {
     changeShowTime() {
@@ -176,7 +190,7 @@ export default {
         active_flg: true,
         start_time: this.times.start_time,
         end_time: this.times.end_time,
-        status: this.buttons.find((e) => e.active).work,
+        status: this.buttons.find((e) => e.active)?.work,
       };
       if (this.insideSchedules?.length > 0) {
         this.postUpdateSchedule();
@@ -221,7 +235,7 @@ export default {
     },
     deleteSchedule() {
       let ids = "";
-      if (this.insideSchedules.length > 0) {
+      if (this.insideSchedules?.length > 0) {
         this.insideSchedules.forEach((e) => (ids += e.id + ","));
         ids = ids.slice(0, -1);
         fetchWrapper
@@ -266,7 +280,20 @@ export default {
   overflow: auto
   border-top-left-radius: 4px
   border-top-right-radius: 4px
-
-.schedule-wrapper
   background-color: var(--default-white)
+
+.schedule-enter-from
+  opacity: 0
+  transform: translateY(0px)
+  pointer-events: none
+.schedule-enter-active
+  transition: 0.3s ease
+.schedule-leave-to
+  opacity: 0
+  transform: translateY(0px)
+  pointer-events: none
+.schedule-leave-active
+  transition: 0.3s ease
+.schedule-move
+  transition: 0.3s ease
 </style>