Merge branch 'UC-204' into 'master'

Resolve UC-204

See merge request andrusyakka/urban-couscous!277

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"
           )
@@ -43,7 +42,7 @@
         color="primary",
         style="width: 144px",
         padding="4px 24px",
-        @click="createSchedules",
+        @click="createSchedules(); clearCell()",
         no-caps
       )
       q-btn(
@@ -72,6 +71,7 @@ export default {
     times: Object,
     createSchedules: Function,
     deleteSchedule: Function,
+    clearCell: Function,
   },
   data() {
     return {
@@ -105,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
@@ -163,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,8 +1,7 @@
 <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
         q-btn.mr-4(
           text-color="primary",
@@ -22,7 +21,7 @@
           size="14px",
           dense,
         ) 
-          .text.flex.items-center
+        .text.flex.items-center(:style="{color: 'var(--font-dark-blue-color)'}")
           .text.font-medium.text-base {{ dateString }}
           .opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
       .flex.gap-x-4.h-10
@@ -38,17 +37,13 @@
 
 <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

@@ -1,8 +1,5 @@
 <template lang="pug">
-  .schedule.flex-col(
+  .schedule.flex-col(:style="themeCell")
-    :style="themeCell",
-    v-click-outside="clearCell"
-  )
     schedule-table-header(:result="result")
     schedule-table-body(
       :serialized="serialized",
@@ -36,12 +33,12 @@
       :create-schedules="createSchedules",
       :delete-schedule="deleteSchedule",
       :template="template"
+      :clear-cell="clearCell"
     )
 </template>
 
 <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";
@@ -50,7 +47,6 @@ import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
 export default {
   name: "ScheduleTable",
   components: {
-    BaseModal,
     ScheduleTableHeader,
     ScheduleTableBody,
     ScheduleTableSelect,

src/pages/schedule/components/ScheduleTableBody.vue

@@ -19,7 +19,7 @@
             :serialized="serialized",
             :change-shift="changeShift"
           )
-      .name-employee.flex.justify-center.items-center.cursor-pointer
+      .name-employee.flex.justify-center.items-center
         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(

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>

src/pages/schedule/components/ScheduleTableSelect.vue

@@ -4,7 +4,7 @@
   )
     .edit.flex.items-center.justify-center.h-11.w-11(v-if="selectEmployee.label")
       .flex.icon-edit
-    .flex.justify-center.items-center.cursor-pointer(
+    .flex.justify-center.items-center(
       :class="{'select-name': selectEmployee.label}",
       :style="{color: 'var(--btn-blue-color)'}"
     )
@@ -68,6 +68,7 @@ export default {
 .edit
   border-bottom: 1.5px solid var(--border-light-grey-color-1)
   border-left: 1.5px solid var(--border-light-grey-color-1)
+  border-right: 1.5px solid var(--border-light-grey-color-1)
 
 .schedule-select
   border-right: 8px solid var(--bg-ligth-blue-color)