fix calendar

2023-08-03 00:38:57 +03:00
parent 4def8adf85
commit 081eeacc1d
9 changed files with 72 additions and 50 deletions
--- 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")
--- 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>
--- 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() {
--- 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();
--- 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() {},
--- 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,
  },
  {
--- 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}`;
 }

--- 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);
 }

--- 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 {