Merge branch 'ASTRA-126' into 'master'

Доделала карточки See merge request andrusyakka/urban-couscous!452
2023-06-28 15:38:17 +00:00
parent 4a35e55681 88bd056bb2
commit 7590ca1acf
6 changed files with 87 additions and 31 deletions
--- a/src/pages/newCalendar/components/CalendarBackground.vue
+++ b/src/pages/newCalendar/components/CalendarBackground.vue
@@ -19,8 +19,7 @@ export default {
    timeCount() {
      return (
        this.workingHours.end.split(":")[0] -
-        this.workingHours.start.split(":")[0] +
-        1
+        this.workingHours.start.split(":")[0]
      );
    },
  },
--- a/src/pages/newCalendar/components/CalendarColumn.vue
+++ b/src/pages/newCalendar/components/CalendarColumn.vue
@@ -8,7 +8,8 @@
        v-for="record in filteredRecords",
        :key="record?.id",
        :record="record",
-        :expanded-type="expandedDisplayType"
+        :expanded-type="expandedDisplayType",
+        :style="eventCardPosition(record.start, record.end)"
      )
    .footer.flex.items-center.justify-center.bg-white.h-9(v-if="!expandedDisplayType")
      span.text-smm.color-grey 0 записей
@@ -18,12 +19,20 @@
 import * as moment from "moment/moment";
 import { recordList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import CalendarRecordCard from "@/pages/newCalendar/components/CalendarRecordCard.vue";
+import { verifyTime } from "@/pages/newCalendar/utils/calendarFunctions.js";
 export default {
  name: "CalendarColumn",
  components: { CalendarRecordCard },
  props: {
    date: Object,
    expandedDisplayType: Boolean,
+    dayEndTime: Number,
+    dayStartTime: Number,
+  },
+  data() {
+    return {
+      pixelsPerHour: 76,
+    };
  },
  computed: {
    filteredRecords() {
@@ -33,11 +42,37 @@ export default {
          this.date.format("YYYY-MM-DD")
      );
    },
+    pixelsPerMinute() {
+      return this.pixelsPerHour / 60;
+    },
  },
  methods: {
    transformDayName(name) {
      return name[0]?.toUpperCase() + name?.slice(1);
    },
+    eventCardPosition(startTime, endTime) {
+      let start = startTime
+        .slice(11, -4)
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      let end = endTime.slice(11, -4);
+      let position =
+        (start[0] - this.dayStartTime) * this.pixelsPerHour +
+        start[1] * this.pixelsPerMinute +
+        4;
+      if (
+        parseInt(start[0], 10) < this.dayStartTime ||
+        verifyTime(end) > this.dayEndTime
+      ) {
+        return {
+          top: "0px",
+          visibility: "hidden",
+        };
+      }
+      return {
+        top: `${position}px`,
+      };
+    },
  },
 };
 </script>
@@ -45,7 +80,6 @@ export default {
 <style lang="sass" scoped>
 .calendar-column-wrapper
  border-right: 1px solid var(--border-light-grey-color)
-  width: 380px
  &:last-child
    border-right: none

--- a/src/pages/newCalendar/components/CalendarRecordCard.vue
+++ b/src/pages/newCalendar/components/CalendarRecordCard.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .card-wrapper.w-full.flex.gap-y-2px.flex-col
+  .card-wrapper.flex.gap-y-2px.flex-col.absolute
    .header.w-full.flex.gap-x-2px.text-sm
      .first-item.color-black.justify-center.gap-x-2(:class="timeClass")
        span.font-semibold.color-black(v-if="expandedType || expandedTime") {{ recordTime }}
@@ -16,19 +16,16 @@
          @click="changeTimeDisplay(true)"
        )
      .color-black.pl-4.flex-1.font-semibold.py-6px.relative(
-        :class="{'pl-6px': expandedTime}"
-      )
-        .flex.items-center(
-          :class="{'collapsed-name': expandedTime}"
+        :class="{'pl-6px collapsed-name': expandedTime}"
      ) {{trimPatientName(record?.member?.last_name, record?.member?.first_name, record?.member?.patronymic)}}
        .gradient.absolute.w-5.h-full.right-0(v-if="expandedTime")  
      .info-block.justify-center
        img.w-5.h-5(:src="recordingStatus?.icon")
      .last-item.info-block.justify-center(v-if="expandedType")
        img.w-5.h-5(:src="medicalСardStatus?.icon")
-    .body.background-grey.flex.flex-col.justify-between.pl-4.pr-2.py-10px.color-grey(
+    .body.background-grey.flex.flex-col.justify-between.pl-4.pr-2.color-grey(
      :style="bodyHeight",
-      :class="{'py-6px': collapsedDisplayCondition}"
+      :class="bodyPadding"
    )
      .flex.gap-x-14(:class="bodyClass")
        .flex.gap-x-2.items-center(
@@ -59,7 +56,7 @@ export default {
  },
  data() {
    return {
-      pixelsPerHalfHour: 33,
+      pixelsPerHalfHour: 38,
      servicesCount: 4,
      trimPatientName: trimName,
      expandedTime: false,
@@ -113,7 +110,7 @@ export default {
      let halfHourCount = parseInt(this.recordDuration / 30, 10) - 1;
      if (halfHourCount)
        return {
-          height: `${36 + 40 * (halfHourCount - 1)}px`,
+          height: `${this.pixelsPerHalfHour * halfHourCount}px`,
        };
      return {
        display: "none",
@@ -140,6 +137,15 @@ export default {
        collapsed: true,
      };
    },
+    bodyPadding() {
+      return this.collapsedDisplayCondition
+        ? {
+            "py-6px": true,
+          }
+        : {
+            "py-10px": true,
+          };
+    },
  },
  methods: {
    changeTimeDisplay(value) {
@@ -155,6 +161,8 @@ export default {
 </script>

 <style lang="sass" scoped>
+.card-wrapper
+  width: calc(100% - 8px)
 .header
  height: 30px
  & > div
@@ -169,7 +177,6 @@ export default {
 .collapsed
  width: 30px
 .collapsed-name
-  width: 30px
  overflow: hidden
  white-space: nowrap
 .gradient
--- a/src/pages/newCalendar/components/CalendarWrapper.vue
+++ b/src/pages/newCalendar/components/CalendarWrapper.vue
@@ -4,13 +4,15 @@
  )
    calendar-header.w-full.mb-1(v-model="displayType")
    .schedule-body.h-full.bg-white.w-full
-      .column-wrapper.flex.ml-20(:style="expandedDisplayType ? columnWrapperWidth : {}")
+      .column-wrapper.flex.ml-20(:style="columnWrapperWidth")
        calendar-column(
          v-for="date in dateRange",
          :key="date",
          :date="date",
          :style="columnHeight",
-          :expanded-display-type="expandedDisplayType"
+          :expanded-display-type="expandedDisplayType",
+          :day-start-time="validateStartTime"
+          :day-end-time="validateEndTime"
        )
      .flex.relative(
        :style="expandedDisplayType ? backgroundWrapperWidth : {}",
@@ -40,7 +42,10 @@ import CalendarHeader from "@/pages/newCalendar/components/CalendarHeader";
 import CalendarBackground from "@/pages/newCalendar/components/CalendarBackground.vue";
 import CalendarClockColumn from "@/pages/newCalendar/components/CalendarClockColumn.vue";
 import CalendarColumn from "@/pages/newCalendar/components/CalendarColumn.vue";
-import { convertTime } from "@/pages/newCalendar/utils/calendarFunctions.js";
+import {
+  convertTime,
+  verifyTime,
+} from "@/pages/newCalendar/utils/calendarFunctions.js";
 import { mapState } from "vuex";
 import * as moment from "moment/moment";
 export default {
@@ -99,23 +104,33 @@ export default {
      return range;
    },
    validateStartTime() {
-      return this.verifyTime(this.workingHours.start);
+      return verifyTime(this.workingHours.start);
    },
    validateEndTime() {
-      return this.verifyTime(this.workingHours.end);
+      return verifyTime(this.workingHours.end);
    },
    columnHeight() {
      return this.expandedDisplayType
        ? {
            height: `${this.timeCoil.length * this.pixelsPerHour + 60}px`,
+            width: "380px",
          }
        : {
            height: `${this.timeCoil.length * this.pixelsPerHour + 96}px`,
+            width: this.openSidebar
+              ? `calc((100vw - 320px - 80px) / ${this.dateRange.length})`
+              : `calc((100vw - 160px - 80px) / ${this.dateRange.length})`,
          };
    },
    columnWrapperWidth() {
-      return {
+      return this.expandedDisplayType
+        ? {
            width: `${380 * this.dateRange.length}px`,
+          }
+        : {
+            width: this.openSidebar
+              ? "calc(100vw - 320px - 80px)"
+              : "calc(100vw - 160px - 80px)",
          };
    },
    backgroundWrapperWidth() {
@@ -135,17 +150,12 @@ export default {
    },
  },
  methods: {
-    verifyTime(dayTime) {
-      let timeArray = dayTime.split(":").map((elem) => parseInt(elem, 10));
-      let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
-      return newTime;
-    },
    changeCurrentTime() {
      this.currentTime = moment().format("HH:mm:ss");
    },
    timeCoilInitialization() {
      this.timeCoil = [];
-      for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
+      for (let i = this.validateStartTime; i < this.validateEndTime; i++) {
        if (
          i === this.hours &&
          this.hours !== this.validateEndTime &&
--- a/src/pages/newCalendar/utils/calendarFunctions.js
+++ b/src/pages/newCalendar/utils/calendarFunctions.js
@@ -7,3 +7,9 @@ export function trimName(lastName, firstName, patronymic) {
  let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
  return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
 }
+
+export function verifyTime(dayTime) {
+  let timeArray = dayTime.split(":").map((elem) => parseInt(elem, 10));
+  let newTime = timeArray[1] >= 30 ? timeArray[0] + 1 : timeArray[0];
+  return newTime;
+}
--- a/src/store/modules/calendar.js
+++ b/src/store/modules/calendar.js
@@ -4,7 +4,7 @@ const state = () => ({
  currentDate: moment(),
  workingHours: {
    start: "8:00",
-    end: "18:00",
+    end: "19:00",
  },
  selectedDates: {
    from: moment().clone().startOf("week"),