astra-frontend/src/pages/newCalendar/components/CalendarRecordCard.vue

<template lang="pug">
  .card-wrapper.w-full.flex.gap-y-2px.flex-col
    .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 }}
        q-icon(
          name="arrow_back_ios_new",
          size="10px",
          v-if="expandedTime",
          @click="changeTimeDisplay(false)"
        )
        q-icon.cursor-pointer(
          v-if="!expandedType && !expandedTime",
          name="app:time",
          size="16px",
          @click="changeTimeDisplay(true)"
        )
      .color-black.pl-4.flex-1.font-semibold {{trimPatientName(record?.member?.last_name, record?.member?.first_name, record?.member?.patronymic)}}
      .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.pl-4.pr-2.py-10px.color-grey.gap-x-12(:style="bodyHeight", :class="bodyClass")
      .flex.gap-x-2.items-center
        q-icon(name="app:phone", size="14px")
        .text-xxs +7 (910) 424–13–13
        .h-6.w-6.color-black.background-dark-grey.text-xxs.rounded.flex.items-center.justify-center(
          v-if="collapsedDisplayCondition"
        ) +1
      .flex.gap-x-2.items-center(v-if="!collapsedDisplayCondition")
        q-icon(name="app:mail", size="14px")
        .text-xxs Haritonich@mail.ru
      span.text-xxs.self-end(v-if="servicesCount && bodyClass?.['flex-col']") {{`${4} услуги`}}
</template>

<script>
import * as moment from "moment/moment";
import {
  recordingStatuses,
  medicalСardStatuses,
} from "@/pages/newCalendar/utils/calendarConfig.js";
import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
export default {
  name: "CalendarRecordCard",
  props: {
    expandedType: Boolean,
    record: Object,
  },
  data() {
    return {
      pixelsPerHalfHour: 33,
      servicesCount: 4,
      trimPatientName: trimName,
      expandedTime: false,
    };
  },
  computed: {
    collapsedDisplayCondition() {
      return !this.bodyClass?.["flex-col"] && !this.expandedType;
    },
    recordingStatus() {
      return recordingStatuses.find(
        (elem) => elem.value === this.record?.status
      );
    },
    medicalСardStatus() {
      return medicalСardStatuses.find(
        (elem) => elem.value === this.record?.medicalCard?.status
      );
    },
    startTime() {
      return moment.parseZone(this.record?.start);
    },
    endTime() {
      return moment.parseZone(this.record?.end);
    },
    recordTime() {
      return (
        this.startTime?.format("HH:mm") + " – " + this.endTime?.format("HH:mm")
      );
    },
    recordDuration() {
      if (this.endTime.isAfter(this.startTime))
        return this.endTime.diff(this.startTime, "minutes");
      return null;
    },
    bodyHeight() {
      let halfHourCount = parseInt(this.recordDuration / 30, 10) - 1;
      if (halfHourCount)
        return {
          height: `${36 + 40 * (halfHourCount - 1)}px`,
        };
      return {
        display: "none",
      };
    },
    bodyClass() {
      if (parseInt(this.bodyHeight?.height, 10) >= 76)
        return {
          "flex-col": true,
          "gap-y-2": true,
        };
      return {};
    },
    timeClass() {
      if (this.expandedType)
        return {
          expanded: true,
        };
      if (this.expandedTime)
        return {
          "expanded-time": true,
        };
      return {
        collapsed: true,
      };
    },
  },
  methods: {
    changeTimeDisplay(value) {
      this.expandedTime = value;
    },
  },
};
</script>

<style lang="sass" scoped>
.header
  height: 30px
  & > div
    background-color: var(--bg-light-grey)
    display: flex
    align-items: center
.first-item
  border-top-left-radius: 4px
  border-bottom-left-radius: 4px
.expanded
  width: 130px
.collapsed
  width: 30px
.expanded-time
  width: 138px
.last-item
  border-top-right-radius: 4px
  border-bottom-right-radius: 4px
.background-grey
  background-color: var(--bg-light-grey)
.background-dark-grey
  background-color: var(--border-light-grey-color)
.color-black
  color: var(--font-dark-blue-color)
.color-grey
  color: var(--font-dark-blue-color-0)
.info-block
  width: 30px
  height: 30px
.body
  border-bottom-left-radius: 4px
  border-bottom-right-radius: 4px
</style>