WIP Добавил статусы для записей

src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue

@@ -219,13 +219,13 @@ export default {
   width: 302px
 .form-wrap
   display: grid
-  grid-template-columns: repeat(3, auto)
+  grid-template-columns: repeat(3, 1fr)
   grid-template-rows: repeat(1, auto)
   @media(max-width: 1900px)
-    grid-template-columns: repeat(2, auto)
+    grid-template-columns: repeat(2, 1fr)
     grid-template-rows: repeat(2, auto)
   @media(max-width: 1320px)
-    grid-template-columns: repeat(1, auto)
+    grid-template-columns: repeat(1, 1fr)
     grid-template-rows: repeat(3, auto)
 .network-field
   background-color: var(--bg-light-grey)

src/pages/newMedicalCard/components/MedicalRecords.vue

@@ -3,16 +3,23 @@
     .header.w-full.h-fit.flex.justify-between.px-6.pt-4.pb-3.text-sm.font-medium
       span Записи
       span {{ events.length }}
-    .w-full.h-full.py-10px.pl-6.pr-2 
-      .events.flex.flex-col.pr-3.overflow-y-auto
-        .event.flex.justify-between.items-start.py-10px(v-for="(event, index) in getEventsList")
+    .w-full.h-full.py-10px.pl-6.pr-2.items-center 
+      .events.flex.flex-col.pr-3.overflow-y-auto(v-if="events.length")
+        .event.flex.justify-between.items-start.py-10px.w-full.gap-x-2(v-for="(event, index) in getEventsList")
           .flex.flex-col.gap-y-6px
             span.date.font-bold.whitespace-nowrap {{ event.date }}
             .time.flex.items-center.gap-x-6px
               q-icon(name="app:time" size="13px")
               span.font-medium.text-smm.whitespace-nowrap {{ `${event.startTime} - ${event.endTime}` }}
-          .flex.gap-x-1.text-smm.font-medium
-            span {{ event.status }}
+          .flex.gap-x-1.text-smm.font-medium.items-center
+            q-icon(
+              :name="event.status === 'PLANNED' ? 'radio_button_unchecked' : 'radio_button_checked'"
+              :style="{'color': statusMap[event.status].color}"
+              size="13px"
+            )
+            span.whitespace-nowrap(:style="{'color': statusMap[event.status].color}") {{ statusMap[event.status].title }}
+      .flex.items-center.justify-center.w-full(v-else :style={'height': '124px'})
+        span.text-lg.font-medium(:style="{'color': 'var(--font-grey-color)'}") Нет записей
 </template>
 
 <script>
@@ -23,23 +30,28 @@ import { mapEventStatus } from "@/pages/newMedicalCard/utils/medicalConfig";
 
 export default {
   name: "MedicalRecords",
+  data() {
+    return {
+      statusMap: mapEventStatus,
+    };
+  },
   computed: {
     ...mapState({
       events: (state) => state.medical.events,
     }),
     getEventsList() {
+      console.log(this.events);
       return [
         ...this.events.map((el) => {
           const start = moment(el.event.start);
           const end = moment(el.event.end);
           return {
-            ...el,
+            ...el.event,
             date: `${start.format("D")} ${getChangeMonth(
               start.format("MMMM")
             )} (${start.format("dd")})`,
             startTime: start.format("HH:mm"),
             endTime: end.format("HH:mm"),
-            status: mapEventStatus[el.event.status],
           };
         }),
       ];
@@ -52,12 +64,15 @@ export default {
 .wrapper
   width: 16.8%
   height: 18.7%
+  min-height: 190px
+  min-width: 275px
   background-color: var(--default-white)
 .header
   border-bottom: 1px solid var(--border-light-grey-color)
   color: var(--font-grey-color)
 .events
   height: 124px
+  min-width: 245px
   &::-webkit-scrollbar
     width: 4px
 .event