From 8f02cc99416df59d7f473cd5852b3a7363cce6d3 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Thu, 4 May 2023 18:16:31 +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=D1=82=D0=B0=D1=82=D1=83=D1=81=D1=8B=20=D0=B4?=
 =?UTF-8?q?=D0=BB=D1=8F=20=D0=B7=D0=B0=D0=BF=D0=B8=D1=81=D0=B5=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BasicDataForms/ContactsForm.vue           |  6 ++--
 .../components/MedicalRecords.vue             | 29 ++++++++++++++-----
 .../newMedicalCard/utils/medicalConfig.js     | 20 ++++++++++---
 src/store/modules/medicalCard.js              |  4 ---
 4 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
index b211b96..5616b80 100644
--- a/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
+++ b/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)
diff --git a/src/pages/newMedicalCard/components/MedicalRecords.vue b/src/pages/newMedicalCard/components/MedicalRecords.vue
index 8289817..789dbd0 100644
--- a/src/pages/newMedicalCard/components/MedicalRecords.vue
+++ b/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
diff --git a/src/pages/newMedicalCard/utils/medicalConfig.js b/src/pages/newMedicalCard/utils/medicalConfig.js
index f44e677..542497a 100644
--- a/src/pages/newMedicalCard/utils/medicalConfig.js
+++ b/src/pages/newMedicalCard/utils/medicalConfig.js
@@ -544,8 +544,20 @@ export const documentForm = [
 ];
 
 export const mapEventStatus = {
-  COMPLETED: "Принят",
-  CANCELED: "Отказ",
-  RECEPTION: "На приеме",
-  PLANNED: "Не принят",
+  COMPLETED: {
+    title: "Принят",
+    color: "#55CD76",
+  },
+  CANCELED: {
+    title: "Отказ",
+    color: "#FF6F6F",
+  },
+  RECEPTION: {
+    title: "На приеме",
+    color: "#FFC75B",
+  },
+  PLANNED: {
+    title: "Не принят",
+    color: "#9294A7",
+  },
 };
diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js
index 3a61498..8c01cbe 100644
--- a/src/store/modules/medicalCard.js
+++ b/src/store/modules/medicalCard.js
@@ -5,7 +5,6 @@ import { getConfidantObject } from "@/pages/newMedicalCard/utils/gettersObjects"
 const state = () => ({
   medicalCard: {},
   confidantData: [],
-  personFiltredList: [],
   contactsData: {
     phones: [],
     emails: [],
@@ -362,9 +361,6 @@ const mutations = {
   setConfidantData(state) {
     state.confidantData = this.getters.getConfidantData;
   },
-  setPersonFiltredList(state, persons) {
-    state.personFiltredList = persons;
-  },
   setEventsPersonData(state, id) {
     fetchWrapper.get(`general/person/${id}/detail/`).then((res) => {
       state.events = res.events;