WIP Добавил список записей клиента

src/assets/sass/variables.sass

@@ -64,4 +64,5 @@
   --bg-disable-grey-color: #f0f0f0
   --bg-grey-color: rgba(37, 40, 80, 0.15)
   --bg-aqua-blue: #55c5e8
+  --bg-status-green: #55CD76
 

src/pages/newMedicalCard/TheMedicalCard.vue

@@ -1,9 +1,11 @@
 <template lang="pug">
   .w-full.h-full
-    medical-header.mb-2(
+    .flex.w-full.gap-x-2.pb-2
-      v-model="currentMenuItem",
+      medical-header(
-      :change-shown-remove-modal="changeShownRemoveModal",
+        v-model="currentMenuItem",
-    )
+        :change-shown-remove-modal="changeShownRemoveModal",
+      )
+      medical-records
     component(
       v-if="currentMenuItem",
       v-bind:is="currentMenuItem",
@@ -17,6 +19,7 @@
 
 <script>
 import MedicalHeader from "@/pages/newMedicalCard/components/MedicalHeader.vue";
+import MedicalRecords from "@/pages/newMedicalCard/components/MedicalRecords.vue";
 import MedicalBaseInfo from "@/pages/newMedicalCard/components/MedicalBaseInfo.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import MedicalRemoveModal from "@/pages/newMedicalCard/components/MedicalRemoveModal.vue";
@@ -25,6 +28,7 @@ export default {
   name: "TheMedicalCard",
   components: {
     MedicalHeader,
+    MedicalRecords,
     MedicalBaseInfo,
     BaseModal,
     MedicalRemoveModal,

src/pages/newMedicalCard/components/MedicalRecords.vue

@@ -0,0 +1,69 @@
+<template lang="pug">
+  .wrapper.rounded.flex.flex-col
+    .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")
+          .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 }}
+</template>
+
+<script>
+import moment from "moment";
+import { mapState } from "vuex";
+import { getChangeMonth } from "@/shared/utils/getChangeStrings";
+import { mapEventStatus } from "@/pages/newMedicalCard/utils/medicalConfig";
+
+export default {
+  name: "MedicalRecords",
+  computed: {
+    ...mapState({
+      events: (state) => state.medical.events,
+    }),
+    getEventsList() {
+      return [
+        ...this.events.map((el) => {
+          const start = moment(el.event.start);
+          const end = moment(el.event.end);
+          return {
+            ...el,
+            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],
+          };
+        }),
+      ];
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  width: 16.8%
+  height: 18.7%
+  background-color: var(--default-white)
+.header
+  border-bottom: 1px solid var(--border-light-grey-color)
+  color: var(--font-grey-color)
+.events
+  height: 124px
+  &::-webkit-scrollbar
+    width: 4px
+.event
+  border-bottom: 1px solid var(--border-light-grey-color)
+.date
+  color: var(--font-dark-blue-color)
+.time
+  color: var(--font-grey-color)
+</style>

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -542,3 +542,10 @@ export const documentForm = [
     ],
   },
 ];
+
+export const mapEventStatus = {
+  COMPLETED: "Принят",
+  CANCELED: "Отказ",
+  RECEPTION: "На приеме",
+  PLANNED: "Не принят",
+};

src/shared/utils/getChangeStrings.js

@@ -0,0 +1,5 @@
+export function getChangeMonth(month) {
+  const changeStr = month.replace(/[ь,й]/g, "");
+  if (changeStr.slice(-1) === "т") return changeStr + "a";
+  else return changeStr + "я";
+}

src/store/modules/medicalCard.js

@@ -59,6 +59,7 @@ const state = () => ({
   allergies: [],
   avatar: "",
   benefitData: [],
+  events: [],
 });
 
 const getters = {
@@ -241,6 +242,7 @@ const actions = {
         commit("setDocumentsData");
         commit("setAllergiesData");
         commit("setConfidantData");
+        commit("setEventsPersonData", res.person.id);
       });
   },
   getPersonsFiltredList() {
@@ -296,6 +298,11 @@ const mutations = {
   setPersonFiltredList(state, persons) {
     state.personFiltredList = persons;
   },
+  setEventsPersonData(state, id) {
+    fetchWrapper.get(`general/person/${id}/detail/`).then((res) => {
+      state.events = res.events;
+    });
+  },
 };
 
 export default {