[WIP] Правка кода, добавил конфиг календаря

src/pages/calendar/TheCalendar.vue

@@ -56,6 +56,8 @@ import CalendarSidebar from "./components/CalendarSidebar.vue";
 import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import CalendarDeleteModal from "./components/CalendarDeleteModal.vue";
+import { calendarConfig } from "@/pages/calendar/utils/calendarConfig";
+
 export default {
   name: "TheCalendar",
   components: {
@@ -84,51 +86,7 @@ export default {
       isOpenForm: false,
       WORKING_STATUS: "WORKS",
       changeFormWasClosed: false,
-      //TODO: Вынести eventStatuses в config
+      eventStatuses: calendarConfig,
-      eventStatuses: [
-        {
-          id: 0,
-          label: "Планируется прием",
-          value: "PLANNED",
-          color: "var(--default-white)",
-        },
-        {
-          id: 1,
-          label: "Отменил",
-          value: "CANCELED",
-          color: "var(--bg-event-grey-color)",
-        },
-        {
-          id: 2,
-          label: "Ожидается прием",
-          value: "EXPECTED",
-          color: "var(--bg-event-yellow-color)",
-        },
-        {
-          id: 3,
-          label: "Опаздывает",
-          value: "LATE",
-          color: "var(--bg-event-orange-color)",
-        },
-        {
-          id: 4,
-          label: "Идет прием",
-          value: "RECEPTION",
-          color: "var(--bg-event-blue-color)",
-        },
-        {
-          id: 5,
-          label: "Прием завершен",
-          value: "COMPLETED",
-          color: "var(--bg-event-green-color)",
-        },
-        {
-          id: 6,
-          label: "Не пришел",
-          value: "DID_NOT_COME",
-          color: "var(--bg-event-red-color)",
-        },
-      ],
     };
   },
   methods: {

src/pages/calendar/utils/calendarConfig.js

@@ -0,0 +1,44 @@
+export const calendarConfig = [
+  {
+    id: 0,
+    label: "Планируется прием",
+    value: "PLANNED",
+    color: "var(--default-white)",
+  },
+  {
+    id: 1,
+    label: "Отменил",
+    value: "CANCELED",
+    color: "var(--bg-event-grey-color)",
+  },
+  {
+    id: 2,
+    label: "Ожидается прием",
+    value: "EXPECTED",
+    color: "var(--bg-event-yellow-color)",
+  },
+  {
+    id: 3,
+    label: "Опаздывает",
+    value: "LATE",
+    color: "var(--bg-event-orange-color)",
+  },
+  {
+    id: 4,
+    label: "Идет прием",
+    value: "RECEPTION",
+    color: "var(--bg-event-blue-color)",
+  },
+  {
+    id: 5,
+    label: "Прием завершен",
+    value: "COMPLETED",
+    color: "var(--bg-event-green-color)",
+  },
+  {
+    id: 6,
+    label: "Не пришел",
+    value: "DID_NOT_COME",
+    color: "var(--bg-event-red-color)",
+  },
+];

src/pages/schedule/components/FormChangeShift.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.fixed.right-6.bottom-6
+ .event-form.flex.flex-col.gap-y-6.pt-6.pb-7.px-8.fixed.right-6.bottom-6
     .flex.justify-between
       span.title.text-xl.font-bold Замена смен
       .flex.pt-2
@@ -11,7 +11,7 @@
         v-model="replacementSheet.date",
         outlined
       )
-      base-input.input(,
+      base-input(,
         type="text"
         v-model="replacementSheet.currentEmployee",
         label="Текущий сотрудник",

src/pages/schedule/components/ScheduleBar.vue

@@ -26,7 +26,6 @@
             :label="item.name",
             :class="item.class",
             text-color="white",
-            
             no-caps,
             style="width: 200px"
           )
@@ -106,21 +105,6 @@ export default {
   border: 1.5px solid var(--border-light-grey-color-1)
   border-radius: 4px
 
-.select
-  height: 40px
-  border: 1.5px solid var(--border-light-grey-color)
-  border-radius: 4px
-
-.item-input
-  appearance: none
-  outline: none
-  height: 40px
-  &::-webkit-calendar-picker-indicator
-    display: none
-    -webkit-appearance: none
-  &::placeholder
-    color: var(--font-black-color-1)
-
 .status-wrapper
   min-width: 540px
   height: 120px
@@ -164,8 +148,4 @@ export default {
 .graph-template
   width: 218px
   height: 120px
-
-.delete-button
-  background-color: var(--bg-event-red-color)
-  border: none
 </style>

src/pages/schedule/components/ScheduleHeader.vue

@@ -1,54 +1,49 @@
 <template lang="pug">
   .flex.flex-col.gap-y-5
     .flex.justify-center.pl-8.pr-20.font-bold.text-xl Планировщик смен
-    .flex
+    .flex.items-center.justify-between.py-3.pl-5.pr-6.h-14.w-full
-      .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
+      .flex
-        .flex
+        q-btn.mr-4(
-          q-btn.mr-4(
+          text-color="primary",
-            text-color="primary",
+          color="secondary"
-            color="secondary"
+          round,
-            round,
+          size="14px",
-            size="14px",
+          dense,
-            dense,
+          @click="previousHandler",
-            @click="previousHandler",
+        )
-          )
+          q-icon(name="arrow_back_ios", right)
-            q-icon(name="arrow_back_ios", right)
+        q-btn.mr-6(
-          q-btn.mr-6(
+          @click="nextHandler",
-            @click="nextHandler",
+          text-color="primary",
-            text-color="primary",
+          color="secondary"
-            color="secondary"
+          icon="arrow_forward_ios",
-            icon="arrow_forward_ios",
+          round,
-            round,
+          size="14px",
-            size="14px",
+          dense,
-            dense,
+        ) 
-          ) 
+        .text.flex.items-center(:style="{color: 'var(--font-dark-blue-color)'}")
-          .text.flex.items-center
+          .text.font-medium.text-base {{ dateString }}
-            .text.font-medium.text-base {{ dateString }}
+          .opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
-            .opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
+      .flex.gap-x-4.h-10
-        .flex.gap-x-4.h-10
+        q-btn(
-          q-btn(
+          :label="textButton",
-            :label="textButton",
+          color="primary",
-            color="primary",
+          no-caps,
-            no-caps,
+          padding="8px 24px",
-            padding="8px 24px",
+          style="width: 174px"
-            style="width: 174px"
+          @click="changeShowTime",
-            @click="changeShowTime",
+        )
-          )
 </template>
 
 <script>
 import * as moment from "moment";
-import FormChangeShift from "@/pages/schedule/components/FormChangeShift.vue";
 
 export default {
   name: "ScheduleHeader",
-  components: { FormChangeShift },
   props: {
     showTime: Boolean,
     startMonth: Object,
-    replacementSheet: Object,
     changeShowTime: Function,
-    changeShift: Function,
   },
   data() {
     return {
@@ -87,36 +82,3 @@ export default {
   },
 };
 </script>
-
-<style lang="sass" scoped>
-.calendar-header-wrapper
-  width: 100%
-  background-color: var(--default-white)
-  height: 56px
-  border-radius: 4px
-  z-index: 10
-
-.left-arrow
-  padding: 3px 4px 0 4px !important
-  transform: rotate(90deg)
-
-.right-arrow
-  padding: 3px 4px 0 4px !important
-  transform: rotate(270deg)
-
-.text
-  color: var(--font-dark-blue-color)
-
-.secondary
-  background-color: var(--btn-blue-sec-color)
-  border: 1px solid var(--btn-blue-sec-color)
-  color: var(--btn-blue-color)
-  &:hover
-    background-color: var(--btn-blue-color-hover)
-    border: 1px solid var(--btn-blue-color-hover)
-    color: var(--btn-blue-color)
-  &:disabled, &[disabled]
-    background-color: var(--btn-blue-sec-color)
-    border: 1px solid var(--btn-blue-sec-color)
-    color: var(--btn-blue-color)
-</style>

src/pages/schedule/components/ScheduleTable.vue

@@ -39,7 +39,6 @@
 
 <script>
 import * as moment from "moment";
-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";
@@ -48,7 +47,6 @@ import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
 export default {
   name: "ScheduleTable",
   components: {
-    BaseModal,
     ScheduleTableHeader,
     ScheduleTableBody,
     ScheduleTableSelect,

src/pages/schedule/components/ScheduleTableHeader.vue

@@ -3,9 +3,7 @@
     .flex.items-center.justify-center.pl-11(
       :style="{width: 'calc(25% + 43px)'}"
     )
-      .text.font-bold(
+      .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",
@@ -46,6 +44,7 @@ export default {
   border-bottom: 1.5px solid var(--border-light-grey-color-1)
   border-top-left-radius: 2px
   border-top-right-radius: 2px
+  color: var(--btn-blue-color)
 
 .column-wrapper
   overflow: auto
@@ -54,7 +53,4 @@ export default {
 
 .column-color
   background-color: var(--bg-white-color-1)
-
-.text
-  color: var(--btn-blue-color)
 </style>