From 081eeacc1d262874efe9763dc6bfbac50b8f461e Mon Sep 17 00:00:00 2001
From: kandrusyak <kandrusyak@inno.tech>
Date: Thu, 3 Aug 2023 00:38:57 +0300
Subject: [PATCH] fix calendar

---
 .../newCalendar/components/CalendarColumn.vue |  8 ++-
 .../components/CalendarRecordCard.vue         |  5 +-
 .../components/CalendarRecordPreview.vue      | 70 +++++++++----------
 .../components/CalendarWrapper.vue            |  6 +-
 .../components/CreateEventForm.vue            | 13 ++--
 src/pages/newCalendar/utils/calendarConfig.js |  2 +-
 .../newCalendar/utils/calendarFunctions.js    |  4 +-
 src/shared/fetchWrapper.js                    |  2 +-
 src/store/modules/calendar.js                 | 12 ++++
 9 files changed, 72 insertions(+), 50 deletions(-)

diff --git a/src/pages/newCalendar/components/CalendarColumn.vue b/src/pages/newCalendar/components/CalendarColumn.vue
index f5504fa..99b37f6 100644
--- a/src/pages/newCalendar/components/CalendarColumn.vue
+++ b/src/pages/newCalendar/components/CalendarColumn.vue
@@ -18,10 +18,9 @@
 
 <script>
 import * as moment from "moment/moment";
-import { recordList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import CalendarRecordCard from "@/pages/newCalendar/components/CalendarRecordCard.vue";
 import { verifyTime } from "@/pages/newCalendar/utils/calendarFunctions.js";
-import { mapActions } from "vuex";
+import { mapActions, mapState } from "vuex";
 export default {
   name: "CalendarColumn",
   components: { CalendarRecordCard },
@@ -37,8 +36,11 @@ export default {
     };
   },
   computed: {
+    ...mapState({
+      events: (state) => state.calendar.events || [],
+    }),
     filteredRecords() {
-      return recordList.filter(
+      return this.events.filter(
         (elem) =>
           moment.parseZone(elem.start).format("YYYY-MM-DD") ===
           this.date.format("YYYY-MM-DD")
diff --git a/src/pages/newCalendar/components/CalendarRecordCard.vue b/src/pages/newCalendar/components/CalendarRecordCard.vue
index e29b939..8944ef3 100644
--- a/src/pages/newCalendar/components/CalendarRecordCard.vue
+++ b/src/pages/newCalendar/components/CalendarRecordCard.vue
@@ -17,8 +17,8 @@
         )
       .color-black.pl-4.flex-1.font-semibold.py-6px.relative(
         :class="{'pl-6px collapsed-name': expandedTime}"
-      ) {{trimPatientName(record?.member?.last_name, record?.member?.first_name, record?.member?.patronymic)}}
-        .gradient.absolute.w-5.h-full.right-0(v-if="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")
@@ -37,7 +37,6 @@
           .h-6.w-6.color-black.background-dark-grey.text-xxs.rounded.flex.items-center.justify-center(
             v-if="collapsedDisplayCondition"
           ) +1
-      span.text-xxs.self-end(v-if="record?.services.length && bodyClass?.['flex-col']") {{`${record?.services.length} услуг`}}
 </template>
 
 <script>
diff --git a/src/pages/newCalendar/components/CalendarRecordPreview.vue b/src/pages/newCalendar/components/CalendarRecordPreview.vue
index dda7e12..9a84b17 100644
--- a/src/pages/newCalendar/components/CalendarRecordPreview.vue
+++ b/src/pages/newCalendar/components/CalendarRecordPreview.vue
@@ -9,9 +9,9 @@
       .flex.items-center.gap-x-3(v-for="field in previewConfig", :key="field?.title")
         .field.color-grey.flex.items-center.justify-start.font-semibold {{ field?.title }}:
         .info.flex-1.rounded.h-full.py-2.px-4.flex.items-center.gap-x-1.color-dark-blue(v-if="field?.data")
-          img.h-5.w-5(:src="field?.icon ? this[field?.icon] : ''", v-if="field?.icon")
+          //img.h-5.w-5(:src="field?.icon ? this[field?.icon] : ''", v-if="field?.icon")
           span {{ field?.data ? this[field?.data] : "" }}
-        .flex.gap-x-1.flex-1(v-if="field?.title === 'Медкарта'")
+        .flex.gap-x-1.flex-1(v-if="field?.title === 'Пациент'")
           .nameplate.rounded.px-4.pt-2.pb-1.flex.gap-x-2.info.flex-1
             q-avatar(size="40px")
               img(:src="memberData?.photo")
@@ -21,28 +21,28 @@
           q-btn.flex-1(
             color="primary",
             no-caps,
-            label="Полная медкарта",
+            label="Медкарта",
             :style="{'font-weight': 500}"
             size="14px"
           )
             q-icon.arrow.ml-1(name="app:long-arrow", size="20px")
         .flex.gap-x-1.flex-1.h-full(v-if="field?.title === 'Услуги'")
-          .rounded.h-full.services.flex.flex-wrap.gap-1.p-1
-            .py-2.px-4.color-dark-blue.rounded.h-7.relative(
-              v-for="chip in services.list",
-              :key="chip?.title",
-              :id="chip?.title",
-              :class="chipClass(chip?.title)"
-              :style="{'background-color': chip?.color}"
-            )
-              span {{chip?.title}}
-              .gradient.h-7.w-11.absolute.right-0(
-                :id="chip?.title+'gradient'",
-                :style="{background: `linear-gradient(270deg, ${chip?.color} 0%, rgba(255, 255, 255, 0.00) 100%)`}"
-              )
-            .info.color-dark-blue.rounded.h-7.px-4(v-if="services.remains > 0") +{{ services.remains }}
-          .rounded.info.color-grey.h-full.cost.flex.items-center.justify-center {{ services.cost }} ₽
-          
+          //.rounded.h-full.services.flex.flex-wrap.gap-1.p-1
+          //  .py-2.px-4.color-dark-blue.rounded.h-7.relative(
+          //    v-for="chip in services.list",
+          //    :key="chip?.title",
+          //    :id="chip?.title",
+          //    :class="chipClass(chip?.title)"
+          //    :style="{'background-color': chip?.color}"
+          //  )
+          //    span {{chip?.title}}
+          //    .gradient.h-7.w-11.absolute.right-0(
+          //      :id="chip?.title+'gradient'",
+          //      :style="{background: `linear-gradient(270deg, ${chip?.color} 0%, rgba(255, 255, 255, 0.00) 100%)`}"
+          //    )
+          //  .info.color-dark-blue.rounded.h-7.px-4(v-if="services.remains > 0") +{{ services.remains }}
+          //.rounded.info.color-grey.h-full.cost.flex.items-center.justify-center {{ services.cost }} ₽
+
 </template>
 
 <script>
@@ -50,7 +50,6 @@ import * as moment from "moment/moment";
 import { mapState } from "vuex";
 import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 import {
-  recordList,
   recordPreviewConfig,
   statuses,
 } from "@/pages/newCalendar/utils/calendarConfig.js";
@@ -76,9 +75,10 @@ export default {
     },
     ...mapState({
       selectedRecordId: (state) => state.calendar.selectedRecordId,
+      events: (state) => state.calendar.events || [],
     }),
     record() {
-      return recordList?.find((elem) => elem.id === this.selectedRecordId);
+      return this.events?.find((elem) => elem.id === this.selectedRecordId);
     },
     start() {
       return moment.parseZone(this.record?.start);
@@ -94,29 +94,29 @@ export default {
     },
     statusLabel() {
       return statuses[0].data.find((elem) => elem.value === this.record?.status)
-        .label;
+        ?.label;
     },
     statusIcon() {
       return statuses[0].data.find((elem) => elem.value === this.record?.status)
-        .icon;
+        ?.icon;
     },
     memberData() {
-      return this.record?.member;
+      return this.record?.person;
     },
     birthday() {
       return moment(this.memberData?.birth_date)?.format("MM.DD.YYYY");
     },
-    services() {
-      let croppedServices = JSON.parse(JSON.stringify(this.record?.services));
-      let remains = this.record?.services?.length - 3;
-      if (remains > 0) croppedServices.length = 3;
-      else remains = 0;
-      return {
-        list: croppedServices,
-        remains: remains,
-        cost: this.record?.services?.reduce((acc, curr) => acc + curr.cost, 0),
-      };
-    },
+    // services() {
+    //   let croppedServices = JSON.parse(JSON.stringify(this.record?.services));
+    //   let remains = this.record?.services?.length - 3;
+    //   if (remains > 0) croppedServices.length = 3;
+    //   else remains = 0;
+    //   return {
+    //     list: croppedServices,
+    //     remains: remains,
+    //     cost: this.record?.services?.reduce((acc, curr) => acc + curr.cost, 0),
+    //   };
+    // },
   },
   methods: {
     hidePreview() {
diff --git a/src/pages/newCalendar/components/CalendarWrapper.vue b/src/pages/newCalendar/components/CalendarWrapper.vue
index 26d84e2..3adffc8 100644
--- a/src/pages/newCalendar/components/CalendarWrapper.vue
+++ b/src/pages/newCalendar/components/CalendarWrapper.vue
@@ -46,7 +46,7 @@ import {
   convertTime,
   verifyTime,
 } from "@/pages/newCalendar/utils/calendarFunctions.js";
-import { mapState } from "vuex";
+import { mapState, mapActions } from "vuex";
 import * as moment from "moment/moment";
 export default {
   name: "CalendarWrapper",
@@ -150,6 +150,9 @@ export default {
     },
   },
   methods: {
+    ...mapActions({
+      getEvents: "getEvents",
+    }),
     changeCurrentTime() {
       this.currentTime = moment().format("HH:mm:ss");
     },
@@ -236,6 +239,7 @@ export default {
     this.changeCurrentTime();
     this.timeCoilInitialization();
     this.startTimer();
+    this.getEvents();
   },
   beforeUnmount() {
     this.stopTimer();
diff --git a/src/pages/newCalendar/components/CreateEventForm.vue b/src/pages/newCalendar/components/CreateEventForm.vue
index f82e47a..180d70a 100644
--- a/src/pages/newCalendar/components/CreateEventForm.vue
+++ b/src/pages/newCalendar/components/CreateEventForm.vue
@@ -40,6 +40,7 @@ import BaseButton from "@/components/base/BaseButton.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";
 import { fetchWrapper } from "@/shared/fetchWrapper";
+import { mapActions } from "vuex";
 
 export default {
   name: "CreateEventForm",
@@ -56,14 +57,16 @@ export default {
     return {
       patient: {},
       phone: "",
-      birth_date: "",
+      birth_date: {},
       time: {},
       patientData: patientData,
       currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
     };
   },
-  computed: {},
   methods: {
+    ...mapActions({
+      getEvents: "getEvents",
+    }),
     createPerson() {
       alert("crea");
     },
@@ -80,8 +83,10 @@ export default {
         },
         medic_id: "a6195732-ac98-4f07-8916-4881eca69b7d",
       });
-
-      console.log(event);
+      if (event?.id) {
+        await this.getEvents();
+        this.closeForm();
+      }
     },
   },
   mounted() {},
diff --git a/src/pages/newCalendar/utils/calendarConfig.js b/src/pages/newCalendar/utils/calendarConfig.js
index 4f9158d..73681e5 100644
--- a/src/pages/newCalendar/utils/calendarConfig.js
+++ b/src/pages/newCalendar/utils/calendarConfig.js
@@ -928,7 +928,7 @@ export const recordPreviewConfig = [
     data: "time",
   },
   {
-    title: "Медкарта",
+    title: "Пациент",
     data: null,
   },
   {
diff --git a/src/pages/newCalendar/utils/calendarFunctions.js b/src/pages/newCalendar/utils/calendarFunctions.js
index e05aa02..5b0ea9b 100644
--- a/src/pages/newCalendar/utils/calendarFunctions.js
+++ b/src/pages/newCalendar/utils/calendarFunctions.js
@@ -3,8 +3,8 @@ export function convertTime(str, startIndex, endIndex) {
 }
 
 export function trimName(lastName, firstName, patronymic) {
-  let checkedFirstName = firstName !== null ? firstName[0] + ". " : "";
-  let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
+  let checkedFirstName = firstName !== null ? firstName?.[0] + ". " : "";
+  let checkedPatronymic = patronymic !== null ? patronymic?.[0] + "." : "";
   return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
 }
 
diff --git a/src/shared/fetchWrapper.js b/src/shared/fetchWrapper.js
index ba98374..b3648a6 100644
--- a/src/shared/fetchWrapper.js
+++ b/src/shared/fetchWrapper.js
@@ -71,7 +71,7 @@ function request(method, url, headers = {}, body, type = "") {
   return fetch(prepareUrl(url), requestOptions);
 }
 
-function get(url, type, headers, attempts = 3) {
+function get(url, type = "default", headers = {}, attempts = 3) {
   return handleRequest("GET", url, headers, attempts, null, type);
 }
 
diff --git a/src/store/modules/calendar.js b/src/store/modules/calendar.js
index cad59b1..a137b62 100644
--- a/src/store/modules/calendar.js
+++ b/src/store/modules/calendar.js
@@ -1,4 +1,5 @@
 import * as moment from "moment/moment";
+import { fetchWrapper } from "@/shared/fetchWrapper";
 moment.locale("ru");
 const state = () => ({
   currentDate: moment(),
@@ -11,6 +12,7 @@ const state = () => ({
     to: moment().clone().endOf("week"),
   },
   selectedRecordId: null,
+  events: [],
 });
 
 const getters = {};
@@ -22,6 +24,13 @@ const actions = {
   changeSelectedRecordId({ commit }, id) {
     commit("setSelectedRecordId", id);
   },
+  getEvents({ commit }) {
+    fetchWrapper.get("events").then((data) => {
+      if (Array.isArray(data)) {
+        commit("setEvents", data);
+      }
+    });
+  },
 };
 
 const mutations = {
@@ -31,6 +40,9 @@ const mutations = {
   setSelectedRecordId(state, id) {
     state.selectedRecordId = id;
   },
+  setEvents(state, events) {
+    state.events = events;
+  },
 };
 
 export default {