Исправила отображения дат, статусов, врача

src/pages/newCalendar/components/CalendarHeader.vue

@@ -22,10 +22,10 @@
       )
       base-input.search(
         size="M"
-        :width="350",
+        :width="386",
         v-model="currentWeek",
       )
-        .h-5.w-5.flex.items-center.justify-center
+        .h-5.w-5.flex.items-center.justify-center.ml-3
           q-icon.calendar-icon.text.cursor-pointer(
             :name="calendarVisibility ? 'app:cancel-mini' : 'app:calendar'",
             size="20px",
@@ -36,7 +36,7 @@
               transition-show="scale",
               transition-hide="scale"
               self="top middle",
-              :offset="[140, 8]"
+              :offset="[160, 8]"
             )
               base-calendar(
                 v-model="dates",
@@ -103,7 +103,7 @@ export default {
     currentWeek() {
       return `${this.dates?.from?.format(
         "D MMMM YYYY"
-      )} - ${this.dates?.to?.format("D MMMM YYYY")}`;
+      )} — ${this.dates?.to?.format("D MMMM YYYY")}`;
     },
     ...mapState({
       selectedDates: (state) => state.calendar.selectedDates,

src/pages/newCalendar/components/CalendarRecordCard.vue

@@ -15,14 +15,17 @@
           size="20px",
           @click.stop="changeTimeDisplay(true)"
         )
-      .color-black.pl-4.flex-1.font-semibold.py-6px.relative(
+      .color-black.pl-4.flex-1.font-semibold.py-6px.relative.cursor-default(
         :class="{'pl-6px collapsed-name': expandedTime}"
       ) {{trimPatientName(record?.person?.last_name, record?.person?.first_name, record?.person?.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")
+      .info-block.justify-center(v-if="expandedType")
+        q-icon(
+          :name="record?.person?.has_medical_card ? 'app:medcard-green' : 'app:medcard'",
+          size="20px",
+        )
+      .last-item.info-block.justify-center
+        .recording-status(:class="recordingStatus?.class")
     .body.background-grey.flex.flex-col.justify-between.pl-4.pr-2.color-grey(
       :style="bodyHeight",
       :class="bodyPadding"
@@ -33,8 +36,8 @@
           :key="contact.value",
         )
           q-icon.network-icon(:name="contact.icon", size="16px")
-          .text-xxs {{ contact.value }}
-          .h-6.w-6.color-black.background-dark-grey.text-xxs.rounded.flex.items-center.justify-center(
+          .text-xxs.cursor-default {{ contact.value }}
+          .h-6.w-6.color-black.background-dark-grey.text-xxs.rounded.flex.items-center.justify-center.cursor-default(
             v-if="collapsedDisplayCondition"
           ) +1
 </template>
@@ -80,14 +83,10 @@ export default {
       return !this.bodyClass?.["flex-col"] && !this.expandedType;
     },
     recordingStatus() {
-      return statuses[0].data.find(
+      const status = statuses[0].data.find(
         (elem) => elem.value === this.record?.status
       );
-    },
-    medicalСardStatus() {
-      return statuses[1].data.find(
-        (elem) => elem.value === this.record?.medicalCard?.status
-      );
+      return status || statuses[0].data[0];
     },
     startTime() {
       return moment.parseZone(this.record?.start);
@@ -205,4 +204,18 @@ export default {
   fill: var(--font-dark-blue-color)
 .time-icon :deep(path)
   fill: var(--font-grey-color)
+.recording-status
+  border-radius: 9999px
+  width: 17px
+  height: 17px
+.not-accepted
+  border: 1.2px solid var(--font-grey-color)
+.accepted
+  background-color: var(--system-color-green)
+.rejected
+  background-color: var(--system-color-red)
+.reception
+  background-color: var(--btn-blue-color)
+span
+  cursor: default
 </style>