Merge branch 'UC-204' into 'master'

[WIP] Добавил отображение времени текущей даты при замене смен, скрыл...

See merge request andrusyakka/urban-couscous!266

src/components/base/BasePagination.vue

@@ -0,0 +1,35 @@
+<template lang="pug">
+  .flex(class="q-pa-lg flex-center")
+    q-pagination(
+      v-model="value",
+      :max="max",
+      :max-pages="maxPages",
+      :boundary-numbers="boundaryNumbers",
+      :direction-links="directionLinks"
+    )
+</template>
+
+<script>
+export default {
+  name: "BasePagination",
+  props: {
+    value: Number,
+    max: {
+      default: 1,
+      type: Number,
+    },
+    maxPages: {
+      default: 6,
+      type: Number,
+    },
+    boundaryNumbers: {
+      default: false,
+      type: Boolean,
+    },
+    directionLinks: {
+      default: false,
+      type: Boolean,
+    },
+  },
+};
+</script>

src/pages/clients/components/ClientsTable.vue

@@ -43,6 +43,11 @@
           @next-page="switchNextPage",
           @set-current-page="changeCurrentTablePage"
         )
+        //- base-pagination(
+        //-   :max="paginationInfo.length",
+        //-   :value="currentTablePage",
+        //-   directionLinks
+        //- )
         base-modal(
           v-model="showModal",
           :title="titleModal",
@@ -69,6 +74,7 @@ import BaseModal from "@/components/base/BaseModal.vue";
 import ClientTableModal from "./ClientTableModal.vue";
 import FormCreateMedicalCard from "@/pages/clients/components/FormCreateMedicalCard";
 import BaseLoader from "@/components/Loader/BaseLoader.vue";
+import BasePagination from "@/components/base/BasePagination.vue";
 export default {
   name: "ClientsTable",
   components: {
@@ -82,6 +88,7 @@ export default {
     ClientTableModal,
     FormCreateMedicalCard,
     BaseLoader,
+    BasePagination,
   },
   props: {
     openForm: Function,

src/pages/schedule/TheSchedule.vue

@@ -28,6 +28,8 @@
           :template="template",
           :trim-owner-name="trimOwnerName",
           :open-form="openForm",
+          :active-cell="activeCell",
+          :set-active-cell="setActiveCell",
           :change-shift="postUpdateSchedule",
           @schedule-employee="createScheduleEmployee",
           @schedules="distributeRequest"
@@ -43,11 +45,11 @@
 
 <script>
 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";
-import { fetchWrapper } from "@/shared/fetchWrapper.js";
-import BaseLoader from "@/components/Loader/BaseLoader.vue";
 
 export default {
   name: "TheSchedule",
@@ -78,6 +80,7 @@ export default {
         date: null,
         start_time: "",
         end_time: "",
+        schedules: [],
       },
       buttons: [
         {
@@ -110,6 +113,7 @@ export default {
       showTime: false,
       schedulesDate: {},
       currenSchedule: null,
+      activeCell: true,
     };
   },
   computed: {
@@ -128,6 +132,7 @@ export default {
         e.first_name,
         e.patronymic
       );
+      this.replacementSheet.schedules = e.schedules;
     },
     changeShowTime() {
       this.showTime = !this.showTime;
@@ -137,6 +142,9 @@ export default {
       let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
       return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
     },
+    setActiveCell() {
+      this.activeCell = true;
+    },
     clearSelect(employee) {
       if (employee) {
         employee.label = "";
@@ -145,6 +153,8 @@ export default {
         this.selectEmployee.label = "";
         this.selectEmployeeid = null;
       }
+      if (this.buttons.find((e) => e.active))
+        this.buttons.find((e) => e.active).active = false;
     },
     fetchSchedules() {
       fetchWrapper
@@ -217,6 +227,7 @@ export default {
       this.outsideSchedules = outside;
     },
     postCreateSchedules() {
+      this.activeCell = false;
       let data = {
         employee: this.schedulesDate.id,
         active_flg: true,
@@ -285,6 +296,7 @@ export default {
       };
     },
     deleteSchedule() {
+      this.activeCell = false;
       let ids = "";
       if (this.insideSchedules?.length > 0) {
         this.insideSchedules.forEach((e) => (ids += e.id + ","));
@@ -313,11 +325,28 @@ export default {
       this.replacementSheet.start_time = localDatetime;
       this.replacementSheet.end_time = localDatetime;
     },
+    setShiftTime() {
+      let dateSchedule = this.replacementSheet.schedules.find(
+        (e) =>
+          e.date === moment(this.replacementSheet.date).format("YYYY-MM-DD")
+      );
+      if (dateSchedule?.start_time) {
+        this.replacementSheet.start_time = dateSchedule?.start_time;
+        this.replacementSheet.end_time = dateSchedule?.end_time;
+      }
+    },
   },
   watch: {
     startMonth() {
       this.fetchSchedulesEmployee();
     },
+    replacementSheet: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) this.setShiftTime();
+      },
+      deep: true,
+    },
   },
   mounted() {
     this.fetchSchedules();
@@ -337,14 +366,18 @@ export default {
   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>

src/pages/schedule/components/FormChangeShift.vue

@@ -43,7 +43,7 @@
           label="Сохранить",
           color="primary",
           padding="8px 24px",
-          no-caps
+          no-caps,
           @click="changeShift(); closeForm()"
         )
 </template>
@@ -59,14 +59,14 @@ export default {
   props: {
     employees: Array,
     serialized: Array,
-    replacementSheet: Object,
+    modelValue: Boolean,
     trimOwnerName: Function,
     changeShift: Function,
-    modelValue: Boolean,
+    replacementSheet: Object,
   },
   computed: {
     ownersList() {
-      if (this.employees) {
+      if (this.employees || this.serialized) {
         let filteredArray = [];
         this.employees.forEach((elem) => {
           filteredArray.push({

src/pages/schedule/components/ScheduleTable.vue

@@ -16,6 +16,7 @@
       :replacement-sheet="replacementSheet",
       :employees="employees",
       :change-shift="changeShift"
+      :set-active-cell="setActiveCell"
     )
     schedule-table-select(
       v-if="employees.length > 0",
@@ -24,7 +25,7 @@
       :result="result",
       :choice-cell="choiceCell",
       :choice-state="choiceState",
-      :trim-owner-name="trimOwnerName",
+      :trim-owner-name="trimOwnerName"
     )
 </template>
 
@@ -47,16 +48,18 @@ export default {
     scheduleList: Array,
     serialized: Array,
     buttons: Array,
-    template: Object,
     employees: Array,
     showTime: Boolean,
+    activeCell: Boolean,
     clearSelect: Function,
-    selectEmployee: Object,
-    startMonth: Object,
     trimOwnerName: Function,
     openForm: Function,
-    replacementSheet: Object,
     changeShift: Function,
+    setActiveCell: Function,
+    template: Object,
+    selectEmployee: Object,
+    startMonth: Object,
+    replacementSheet: Object,
   },
   data() {
     return {
@@ -71,7 +74,6 @@ export default {
       },
       activeButton: null,
       choiceMonth: null,
-      act: null,
     };
   },
   computed: {
@@ -89,14 +91,14 @@ export default {
     setActiveButton() {
       this.activeButton = this.buttons.find((e) => e.active);
     },
-    setActiveCell() {
+    setActiveTemplate() {
       return (this.buttons.find((e) => e.work === "WORKS").active = true);
     },
     choiceCell(day, id, schedule) {
       if (this.showTime) return;
       let formatTime = day.format("YYYY-MM-DD");
 
-      if (this.dateInterval.id !== id) {
+      if (this.dateInterval.id !== id || !this.activeCell) {
         this.dateInterval.start = "";
         this.dateInterval.end = "";
         this.dateInterval.id = "";
@@ -150,7 +152,7 @@ export default {
       this.$emit("schedules", insideSchedules, outsideSchedules);
     },
     choiceState(day, id) {
-      let formatDay = day.format("YYYY-MM-DD");
+      let formatDay = day?.format("YYYY-MM-DD");
       let resStart =
         this.dateInterval.start &&
         formatDay === this.dateInterval.start &&
@@ -162,16 +164,18 @@ export default {
         this.dateInterval.id === id;
 
       let resMiddle =
-        day.isBefore(this.dateInterval.end) &&
+        day?.isBefore(this.dateInterval.end) &&
         this.dateInterval.id === id &&
-        day.isAfter(this.dateInterval.start);
+        day?.isAfter(this.dateInterval.start);
 
-      if (resStart || resMiddle || resEnd)
+      if (resStart || resMiddle || resEnd) {
         return {
-          "set-template": !!this.template.item?.label && this.setActiveCell(),
+          "set-template":
+            !!this.template.item?.label && this.setActiveTemplate(),
           status: !!this.activeButton,
-          "set-date": !this.activeButton,
+          "set-date": !this.activeButton && this.activeCell,
         };
+      }
     },
     changeDays() {
       this.days = moment(this.choiceMonth, "YYYY-MM-DD").daysInMonth();

src/pages/schedule/components/ScheduleTableBody.vue

@@ -26,7 +26,7 @@
           v-for="day in result",
           :key="day",
           :id="schedule.id + day",
-          @click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee)",
+          @click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee); setActiveCell()",
           :class="choiceState(day, schedule.id)",
           :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : '', width: `calc(100% / ${result.length})`}"
         )
@@ -43,19 +43,20 @@ export default {
   components: { FormChangeShift },
   props: {
     serialized: Array,
-    trimOwnerName: Function,
     result: Array,
+    buttons: Array,
+    scheduleList: Array,
+    employees: Array,
+    showTime: Boolean,
+    trimOwnerName: Function,
     choiceCell: Function,
     clearSelect: Function,
-    selectEmployee: Object,
     choiceState: Function,
-    buttons: Array,
-    showTime: Boolean,
-    scheduleList: Array,
     openForm: Function,
     changeShift: Function,
+    setActiveCell: Function,
     replacementSheet: Object,
-    employees: Array,
+    selectEmployee: Object,
   },
   data() {
     return {

src/pages/schedule/components/ScheduleTableSelect.vue

@@ -44,12 +44,12 @@ export default {
   name: "ScheduleTableSelect",
   components: { BaseSelect },
   props: {
-    selectEmployee: Object,
     result: Array,
+    employees: Array,
     choiceCell: Function,
     choiceState: Function,
-    employees: Array,
     trimOwnerName: Function,
+    selectEmployee: Object,
   },
   computed: {
     ownersList() {