WIP Стянула записи приемов с бэка

2023-09-19 13:31:05 +03:00
parent fc6c5e61fb
commit 48e2571c77
14 changed files with 176 additions and 213 deletions
--- a/src/pages/newCalendar/components/doctorCalendar/CalendarColumn.vue
+++ b/src/pages/newCalendar/components/doctorCalendar/CalendarColumn.vue
@@ -44,5 +44,5 @@ export default {
 </script>

 <style lang="sass" scoped>
-@import "@/pages/newCalendar/mixins/columnStyle.sass"
+@import "@/pages/newCalendar/sass/columnStyle.sass"
 </style>
--- a/src/pages/newCalendar/components/doctorCalendar/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/doctorCalendar/CalendarHeader.vue
@@ -151,7 +151,7 @@ export default {
 </script>

 <style lang="sass" scoped>
-@import "@/pages/newCalendar/mixins/headerStyle.sass"
+@import "@/pages/newCalendar/sass/headerStyle.sass"
 </style>
 <style lang="sass">
 .q-field--outlined.q-field--readonly .q-field__control:before
--- a/src/pages/newCalendar/components/doctorCalendar/CalendarWrapper.vue
+++ b/src/pages/newCalendar/components/doctorCalendar/CalendarWrapper.vue
@@ -22,7 +22,7 @@
          calendar-clock-column(
            :time-coil="timeCoil",
            :current-time="currentTime",
-            :is-current="isCurrentWeek",
+            :is-current="isCurrent",
            :day-end-time="validateEndTime"
          )
          .time-circle-indicator.left-74px.h-3.w-3.rounded-full.absolute(
@@ -56,7 +56,6 @@ export default {
  data() {
    return {
      displayType: "expanded",
-      isCurrentWeek: true,
    };
  },
  computed: {
@@ -104,45 +103,19 @@ export default {
          };
    },
  },
-  methods: {
-    //вынести в функции
-    timeCoilInitialization() {
-      this.timeCoil = [];
-      for (let i = this.validateStartTime; i < this.validateEndTime; i++) {
-        if (
-          i === this.hours &&
-          this.hours !== this.validateEndTime &&
-          this.isCurrentWeek
-        ) {
-          this.timeCoil.push(this.hoursMinutes);
-        } else this.timeCoil.push(`${i}:00`);
-      }
-    },
-  },
  watch: {
-    //вынести в примеси и использовать timeCoilInitialization как функцию
-    currentTime() {
-      if (
-        this.hours === this.validateEndTime &&
-        this.minutes > 0 &&
-        this.timer
-      ) {
-        this.stopTimer();
-        this.timeCoilInitialization();
-      }
-    },
    selectedDates: {
      deep: true,
      handler(newValue) {
-        this.isCurrentWeek =
+        this.isCurrent =
          newValue?.from.isSame(moment().clone().startOf("week"), "day") &&
          newValue?.to.isSame(moment().clone().endOf("week"), "day");
-        this.isShownIndicator = this.isCurrentWeek;
+        this.isShownIndicator = this.isCurrent;
        if (this.timer) {
          this.stopTimer();
          this.timeCoilInitialization();
        }
-        if (this.isCurrentWeek) {
+        if (this.isCurrent) {
          this.changeCurrentTime();
          this.timeCoilInitialization();
          this.startTimer();
@@ -158,5 +131,5 @@ export default {
 </script>

 <style lang="sass" scoped>
-@import "@/pages/newCalendar/mixins/wrapperStyle.sass"
+@import "@/pages/newCalendar/sass/wrapperStyle.sass"
 </style>
--- a/src/pages/newCalendar/components/managerCalendar/CalendarColumn.vue
+++ b/src/pages/newCalendar/components/managerCalendar/CalendarColumn.vue
@@ -6,10 +6,10 @@
          size="40px",
          round
        )
-          img(:src="employee?.photo || defaultPhoto", alt="doctor")
+          img(:src="medic?.photo || defaultPhoto", alt="doctor")
        .flex.flex-col.justify-between
-          span.text-dark {{trimName(employee?.last_name, employee?.first_name, employee?.patronymic)}}
-          span.text-xsx.color-grey {{employee?.job || "Терапевт"}}
+          span.text-dark {{trimName(medic?.last_name, medic?.first_name, medic?.patronymic)}}
+          span.text-xsx.color-grey {{medic?.job || "Терапевт"}}
      button(@click="locked = !locked")
        q-icon.lock-icon(
          :name="locked ? 'app:lock' : 'app:lock-open'",
@@ -29,35 +29,34 @@
 <script>
 import { columnMixin } from "@/pages/newCalendar/mixins/columnMixin.js";
 import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
-import { recordList } from "@/pages/newCalendar/utils/calendarConfig";
 import doctorAvatar from "@/assets/images/doctor.png";
+import { mapState } from "vuex";
 export default {
  name: "CalendarColumn",
  mixins: [columnMixin],
  props: {
-    employee: Object,
+    medic: Object,
  },
  data() {
    return {
      trimName: trimName,
-      configEvents: recordList,
      defaultPhoto: doctorAvatar,
      locked: false,
    };
  },
  computed: {
+    ...mapState({
+      events: (state) => state.calendar.events,
+    }),
    filteredRecords() {
-      // return this.configEvents.filter(
-      //   (elem) => elem?.employee?.id === this.employee?.id
-      // );
-      return [];
+      return this.events.filter((elem) => elem?.medic?.id === this.medic?.id);
    },
  },
 };
 </script>

 <style lang="sass" scoped>
-@import "@/pages/newCalendar/mixins/columnStyle.sass"
+@import "@/pages/newCalendar/sass/columnStyle.sass"
 .lock-icon :deep(path)
  fill: var(--font-grey-color)
 </style>
--- a/src/pages/newCalendar/components/managerCalendar/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/managerCalendar/CalendarHeader.vue
@@ -113,7 +113,6 @@ export default {
      deep: true,
      immediate: true,
      handler(val) {
-        console.log(!val?.from.isSame(this.date, "day"), this.date);
        if (!val?.from.isSame(this.date, "day")) this.initializeDates();
      },
    },
@@ -122,7 +121,7 @@ export default {
 </script>

 <style lang="sass" scoped>
-@import "@/pages/newCalendar/mixins/headerStyle.sass"
+@import "@/pages/newCalendar/sass/headerStyle.sass"
 .q-btn-toggle :deep(span)
  font-weight: 500
 .q-btn-toggle :deep(.q-btn-item)
--- a/src/pages/newCalendar/components/managerCalendar/CalendarWrapper.vue
+++ b/src/pages/newCalendar/components/managerCalendar/CalendarWrapper.vue
@@ -6,9 +6,9 @@
    .schedule-body.h-full.bg-white.w-full
      .column-wrapper.flex.ml-20(:style="columnWrapperWidth")
        calendar-column(
-          v-for="employee in filteringEmployees",
-          :key="employee?.id",
-          :employee="employee",
+          v-for="medic in filteringMedics",
+          :key="medic?.id",
+          :medic="medic",
          :style="columnStyle",
          :expanded-display-type="true",
          :day-start-time="validateStartTime"
@@ -21,7 +21,7 @@
          calendar-clock-column(
            :time-coil="timeCoil",
            :current-time="currentTime",
-            :is-current="isCurrentDate",
+            :is-current="isCurrent",
            :day-end-time="validateEndTime"
          )
          .time-circle-indicator.left-74px.h-3.w-3.rounded-full.absolute(
@@ -42,7 +42,6 @@ import CalendarColumn from "@/pages/newCalendar/components/managerCalendar/Calen
 import { mapState } from "vuex";
 import * as moment from "moment/moment";
 import { wrapperMixin } from "@/pages/newCalendar/mixins/wrapperMixin.js";
-import { recordList } from "@/pages/newCalendar/utils/calendarConfig";
 export default {
  name: "CalendarWrapper",
  components: {
@@ -56,88 +55,64 @@ export default {
  data() {
    return {
      displayType: "day",
-      isCurrentDate: true,
-      events: recordList,
    };
  },
  computed: {
    ...mapState({
      selectedDates: (state) => state.calendar.selectedDates,
-      //events: (state) => state.calendar.events,
+      events: (state) => state.calendar.events,
    }),
-    filteringEmployees() {
-      let employeesList = [];
-      this.events?.forEach(({ employee }) => {
-        if (!employeesList.includes(JSON.stringify(employee)))
-          employeesList.push(JSON.stringify(employee));
+    filteringMedics() {
+      let medicsList = [];
+      this.events?.forEach(({ medic }) => {
+        if (!medicsList.includes(JSON.stringify(medic)))
+          medicsList.push(JSON.stringify(medic));
      });
-      return employeesList?.map((elem) => JSON.parse(elem));
+      return medicsList?.map((elem) => JSON.parse(elem));
+    },
+    medicsListLength() {
+      return this.filteringMedics?.length;
    },
    columnStyle() {
-      return this.filteringEmployees?.length > 4
+      return this.medicsListLength > 4
        ? {
            height: `${this.timeCoil.length * this.pixelsPerHour + 60}px`,
            width: "380px",
          }
        : {
            height: `${this.timeCoil.length * this.pixelsPerHour + 60}px`,
-            width: `calc(100%/ ${this.filteringEmployees?.length})`,
+            width: `calc(100%/ ${this.medicsListLength})`,
          };
    },
    backgroundWrapperWidth() {
-      return this.filteringEmployees?.length > 4
+      return this.medicsListLength > 4
        ? {
-            width: `${380 * this.filteringEmployees?.length + 80}px`,
+            width: `${380 * this.medicsListLength + 80}px`,
          }
        : {};
    },
    columnWrapperWidth() {
-      return this.filteringEmployees?.length > 4
+      return this.medicsListLength > 4
        ? {
-            width: `${380 * this.filteringEmployees?.length}px`,
+            width: `${380 * this.medicsListLength}px`,
          }
        : {
            width: "calc(100% - 80px)",
          };
    },
  },
-  methods: {
-    //вынести в функции
-    timeCoilInitialization() {
-      this.timeCoil = [];
-      for (let i = this.validateStartTime; i < this.validateEndTime; i++) {
-        if (
-          i === this.hours &&
-          this.hours !== this.validateEndTime &&
-          this.isCurrentDate
-        ) {
-          this.timeCoil.push(this.hoursMinutes);
-        } else this.timeCoil.push(`${i}:00`);
-      }
-    },
-  },
  watch: {
-    //вынести в примеси и использовать timeCoilInitialization как функцию
-    currentTime() {
-      if (
-        this.hours === this.validateEndTime &&
-        this.minutes > 0 &&
-        this.timer
-      ) {
-        this.stopTimer();
-        this.timeCoilInitialization();
-      }
-    },
    selectedDates: {
+      immediate: true,
      deep: true,
      handler(newValue) {
-        this.isCurrentDate = newValue?.from.isSame(moment(), "day");
-        this.isShownIndicator = this.isCurrentDate;
+        this.isCurrent = newValue?.from.isSame(moment(), "day");
+        this.isShownIndicator = this.isCurrent;
        if (this.timer) {
          this.stopTimer();
          this.timeCoilInitialization();
        }
-        if (this.isCurrentDate) {
+        if (this.isCurrent) {
          this.changeCurrentTime();
          this.timeCoilInitialization();
          this.startTimer();
@@ -153,5 +128,5 @@ export default {
 </script>

 <style lang="sass" scoped>
-@import "@/pages/newCalendar/mixins/wrapperStyle.sass"
+@import "@/pages/newCalendar/sass/wrapperStyle.sass"
 </style>