[WIP] Фикс расписания, правка стилей

src/pages/schedule/TheSchedule.vue

@@ -31,15 +31,11 @@
           :active-cell="activeCell",
           :set-active-cell="setActiveCell",
           :change-shift="postUpdateSchedule",
-          @schedule-employee="createScheduleEmployee",
-          @schedules="distributeRequest"
-        )
-        schedule-bar(
-          :buttons="buttons",
           :times="times",
           :create-schedules="postCreateSchedules",
           :delete-schedule="deleteSchedule",
-          :template="template"
+          @schedule-employee="createScheduleEmployee",
+          @schedules="distributeRequest"
         )
 </template>
 
@@ -48,14 +44,12 @@ import * as moment from "moment";
 import BaseLoader from "@/components/Loader/BaseLoader.vue";
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
 import ScheduleHeader from "@/pages/schedule/components/ScheduleHeader.vue";
-import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
 import ScheduleTable from "@/pages/schedule/components/ScheduleTable.vue";
 
 export default {
   name: "TheSchedule",
   components: {
     ScheduleHeader,
-    ScheduleBar,
     ScheduleTable,
     BaseLoader,
   },

src/pages/schedule/components/FormChangeShift.vue

@@ -106,7 +106,7 @@ export default {
   height: fit-content
   width: 534px
   background-color: var(--default-white)
-  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.05)
+  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.25)
   border-radius: 4px
   z-index: 5
 </style>

src/pages/schedule/components/ScheduleBar.vue

@@ -79,6 +79,7 @@ export default {
         { label: "2/2", name: "2/2", symbol: "'2/2'" },
         { label: "Дежурство", name: "DUTY", symbol: "'Д'" },
         { label: "Смена", name: "FirstEvenSecondOdd", symbol: "'С'" },
+        { label: "-", name: "None", symbol: false },
       ],
     };
   },

src/pages/schedule/components/ScheduleTable.vue

@@ -1,5 +1,8 @@
 <template lang="pug">
-  .schedule.flex-col(:style="themeCell")
+  .schedule.flex-col(
+    :style="themeCell",
+    v-click-outside="clearCell"
+  )
     schedule-table-header(:result="result")
     schedule-table-body(
       :serialized="serialized",
@@ -27,6 +30,13 @@
       :choice-state="choiceState",
       :trim-owner-name="trimOwnerName"
     )
+    schedule-bar(
+      :buttons="buttons",
+      :times="times",
+      :create-schedules="createSchedules",
+      :delete-schedule="deleteSchedule",
+      :template="template"
+    )
 </template>
 
 <script>
@@ -35,6 +45,7 @@ import BaseModal from "@/components/base/BaseModal.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";
+import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
 
 export default {
   name: "ScheduleTable",
@@ -43,6 +54,7 @@ export default {
     ScheduleTableHeader,
     ScheduleTableBody,
     ScheduleTableSelect,
+    ScheduleBar,
   },
   props: {
     scheduleList: Array,
@@ -60,6 +72,9 @@ export default {
     selectEmployee: Object,
     startMonth: Object,
     replacementSheet: Object,
+    times: Object,
+    createSchedules: Function,
+    deleteSchedule: Function,
   },
   data() {
     return {
@@ -94,15 +109,16 @@ export default {
     setActiveTemplate() {
       return (this.buttons.find((e) => e.work === "WORKS").active = true);
     },
+    clearCell() {
+      for (let i in this.dateInterval) {
+        this.dateInterval[i] = "";
+      }
+    },
     choiceCell(day, id, schedule) {
-      if (this.showTime) return;
       let formatTime = day.format("YYYY-MM-DD");
 
-      if (this.dateInterval.id !== id || !this.activeCell) {
+      if (this.showTime) return;
-        this.dateInterval.start = "";
+      if (this.dateInterval.id !== id || !this.activeCell) this.clearCell();
-        this.dateInterval.end = "";
-        this.dateInterval.id = "";
-      }
 
       if (!this.dateInterval.start) {
         this.dateInterval.start = formatTime;
@@ -171,7 +187,7 @@ export default {
       if (resStart || resMiddle || resEnd) {
         return {
           "set-template":
-            !!this.template.item?.label && this.setActiveTemplate(),
+            !!this.template.item?.symbol && this.setActiveTemplate(),
           status: !!this.activeButton,
           "set-date": !this.activeButton && this.activeCell,
         };

src/pages/schedule/components/ScheduleTableSelect.vue

@@ -1,18 +1,9 @@
 <template lang="pug">
-  .flex.w-full.mt-4(
+  .flex.w-full.my-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")
+      .flex.icon-edit
-        //- 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)'}"
@@ -75,7 +66,6 @@ export default {
 
 <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)