From 27ddeacf61466525e87f45bdd3a03c6600ec39c7 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Wed, 3 May 2023 19:35:44 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=81=D0=BF=D0=B8=D1=81=D0=BE=D0=BA=20=D0=B7=D0=B0?=
 =?UTF-8?q?=D0=BF=D0=B8=D1=81=D0=B5=D0=B9=20=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass                |  1 +
 src/pages/newMedicalCard/TheMedicalCard.vue   | 12 ++--
 .../components/MedicalRecords.vue             | 69 +++++++++++++++++++
 .../newMedicalCard/utils/medicalConfig.js     |  7 ++
 src/shared/utils/getChangeStrings.js          |  5 ++
 src/store/modules/medicalCard.js              |  7 ++
 6 files changed, 97 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/newMedicalCard/components/MedicalRecords.vue
 create mode 100644 src/shared/utils/getChangeStrings.js

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index 6b00d7f..44f3a31 100644
--- a/src/assets/sass/variables.sass
+++ b/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
 
diff --git a/src/pages/newMedicalCard/TheMedicalCard.vue b/src/pages/newMedicalCard/TheMedicalCard.vue
index aabef8c..9af60a6 100644
--- a/src/pages/newMedicalCard/TheMedicalCard.vue
+++ b/src/pages/newMedicalCard/TheMedicalCard.vue
@@ -1,9 +1,11 @@
 <template lang="pug">
   .w-full.h-full
-    medical-header.mb-2(
-      v-model="currentMenuItem",
-      :change-shown-remove-modal="changeShownRemoveModal",
-    )
+    .flex.w-full.gap-x-2.pb-2
+      medical-header(
+        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,
diff --git a/src/pages/newMedicalCard/components/MedicalRecords.vue b/src/pages/newMedicalCard/components/MedicalRecords.vue
new file mode 100644
index 0000000..8289817
--- /dev/null
+++ b/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>
diff --git a/src/pages/newMedicalCard/utils/medicalConfig.js b/src/pages/newMedicalCard/utils/medicalConfig.js
index 1e4f5dc..f44e677 100644
--- a/src/pages/newMedicalCard/utils/medicalConfig.js
+++ b/src/pages/newMedicalCard/utils/medicalConfig.js
@@ -542,3 +542,10 @@ export const documentForm = [
     ],
   },
 ];
+
+export const mapEventStatus = {
+  COMPLETED: "Принят",
+  CANCELED: "Отказ",
+  RECEPTION: "На приеме",
+  PLANNED: "Не принят",
+};
diff --git a/src/shared/utils/getChangeStrings.js b/src/shared/utils/getChangeStrings.js
new file mode 100644
index 0000000..05ddde9
--- /dev/null
+++ b/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 + "я";
+}
diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js
index 5bce46f..77cb5b8 100644
--- a/src/store/modules/medicalCard.js
+++ b/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 {