Merge branch '4-fix-date-display' into 'master'

Поправила отображение даты (4), undefined в хедере мед.карты (13), создание осмотра (12), поменяла индикацию заполненности медкарты (11), See merge request astra/astra-frontend!502
2023-08-16 20:28:51 +00:00
parent 37f4fdf507 dcbbf20916
commit f459620040
8 changed files with 73 additions and 31 deletions
--- a/src/components/LoggedInLayout.vue
+++ b/src/components/LoggedInLayout.vue
@@ -25,7 +25,7 @@
 import TheHeader from "@/components/TheHeader";
 import TheSidebar from "@/components/TheSidebar";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
-
+import { mapState } from "vuex";
 export default {
  name: "LoggedInLayout",
  components: { TheNotificationProvider, TheHeader, TheSidebar },
@@ -33,10 +33,14 @@ export default {
    return {
      isOpenForm: false,
      updatedClients: false,
-      url: "https://astra-dev.dopcore.com/api/store/",
      createdClientId: "",
    };
  },
+  computed: {
+    ...mapState({
+      url: (state) => state.imgUrl,
+    }),
+  },
  methods: {
    openForm() {
      this.isOpenForm = true;
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -22,10 +22,10 @@
      )
      base-input.search(
        size="M"
-        :width="350",
+        :width="386",
        v-model="currentWeek",
      )
-        .h-5.w-5.flex.items-center.justify-center
+        .h-5.w-5.flex.items-center.justify-center.ml-3
          q-icon.calendar-icon.text.cursor-pointer(
            :name="calendarVisibility ? 'app:cancel-mini' : 'app:calendar'",
            size="20px",
@@ -36,7 +36,7 @@
              transition-show="scale",
              transition-hide="scale"
              self="top middle",
-              :offset="[140, 8]"
+              :offset="[160, 8]"
            )
              base-calendar(
                v-model="dates",
@@ -103,7 +103,7 @@ export default {
    currentWeek() {
      return `${this.dates?.from?.format(
        "D MMMM YYYY"
-      )} - ${this.dates?.to?.format("D MMMM YYYY")}`;
+      )} — ${this.dates?.to?.format("D MMMM YYYY")}`;
    },
    ...mapState({
      selectedDates: (state) => state.calendar.selectedDates,
--- a/src/pages/newCalendar/components/CalendarRecordCard.vue
+++ b/src/pages/newCalendar/components/CalendarRecordCard.vue
@@ -15,14 +15,17 @@
          size="20px",
          @click.stop="changeTimeDisplay(true)"
        )
-      .color-black.pl-4.flex-1.font-semibold.py-6px.relative(
+      .color-black.pl-4.flex-1.font-semibold.py-6px.relative.cursor-default(
        :class="{'pl-6px collapsed-name': 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")
-        img.w-5.h-5(:src="medicalСardStatus?.icon")
+      .info-block.justify-center(v-if="expandedType")
+        q-icon(
+          :name="record?.person?.has_medical_card ? 'app:medcard-green' : 'app:medcard'",
+          size="20px",
+        )
+      .last-item.info-block.justify-center
+        .recording-status(:class="recordingStatus?.class")
    .body.background-grey.flex.flex-col.justify-between.pl-4.pr-2.color-grey(
      :style="bodyHeight",
      :class="bodyPadding"
@@ -33,8 +36,8 @@
          :key="contact.value",
        )
          q-icon.network-icon(:name="contact.icon", size="16px")
-          .text-xxs {{ contact.value }}
-          .h-6.w-6.color-black.background-dark-grey.text-xxs.rounded.flex.items-center.justify-center(
+          .text-xxs.cursor-default {{ contact.value }}
+          .h-6.w-6.color-black.background-dark-grey.text-xxs.rounded.flex.items-center.justify-center.cursor-default(
            v-if="collapsedDisplayCondition"
          ) +1
 </template>
@@ -80,14 +83,10 @@ export default {
      return !this.bodyClass?.["flex-col"] && !this.expandedType;
    },
    recordingStatus() {
-      return statuses[0].data.find(
+      const status = statuses?.[0]?.data?.find(
        (elem) => elem.value === this.record?.status
      );
-    },
-    medicalСardStatus() {
-      return statuses[1].data.find(
-        (elem) => elem.value === this.record?.medicalCard?.status
-      );
+      return status || statuses?.[0]?.data?.[0];
    },
    startTime() {
      return moment.parseZone(this.record?.start);
@@ -205,4 +204,18 @@ export default {
  fill: var(--font-dark-blue-color)
 .time-icon :deep(path)
  fill: var(--font-grey-color)
+.recording-status
+  border-radius: 9999px
+  width: 17px
+  height: 17px
+.not-accepted
+  border: 1.2px solid var(--font-grey-color)
+.accepted
+  background-color: var(--system-color-green)
+.rejected
+  background-color: var(--system-color-red)
+.reception
+  background-color: var(--btn-blue-color)
+span
+  cursor: default
 </style>
--- a/src/pages/newCalendar/utils/calendarConfig.js
+++ b/src/pages/newCalendar/utils/calendarConfig.js
@@ -48,10 +48,29 @@ export const statuses = [
        label: "Не принят",
        icon: not_accepted,
        value: "not_accepted",
+        class: "not-accepted",
+      },
+      {
+        id: 1,
+        label: "Принят",
+        icon: accepted,
+        value: "accepted",
+        class: "accepted",
+      },
+      {
+        id: 2,
+        label: "Отказ",
+        icon: rejected,
+        value: "rejected",
+        class: "rejected",
+      },
+      {
+        id: 3,
+        label: "На приеме",
+        icon: reception,
+        value: "reception",
+        class: "reception",
      },
-      { id: 1, label: "Принят", icon: accepted, value: "accepted" },
-      { id: 2, label: "Отказ", icon: rejected, value: "rejected" },
-      { id: 3, label: "На приеме", icon: reception, value: "reception" },
    ],
  },
  {
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue
@@ -17,17 +17,17 @@
      )
    .flex.flex-col.gap-y-6px
      span.color-grey.line-height.text-sm.font-semibold Врач
-      .flex.gap-x-2
+      .flex.gap-x-2.items-center
        base-avatar(:size="40")
          img.object-cover.h-full(
-            v-if="userData?.photo",
-            :src="userData?.photo",
+            v-if="userData?.avatar",
+            :src="url + userData?.avatar",
            alt="avatar"
          )
-          span.text-sm.color-blue(v-else) {{ avatar }}
+          span.text-sm.text-dark(v-else) {{ avatar }}
        .flex.flex-col
-          span.text-sm.color-blue.line-height.mb-2px {{ employeeName }}
-          span.color-grey.line-height.text-sm {{ userData?.job_title ? userData?.job_title : "Терапевт" }}
+          span.text-sm.text-dark.line-height.mb-2px.font-medium {{ employeeName }}
+          span.color-grey.line-height.text-xsx.font-medium {{ userData?.job_title ? userData?.job_title : "Терапевт" }}
    .flex.gap-2.mt-8
      base-button(
        type="secondary",
@@ -47,7 +47,7 @@ import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";
 import BaseInputTime from "@/components/base/BaseInputTime.vue";
 import * as moment from "moment/moment";
-import { mapGetters, mapActions } from "vuex";
+import { mapGetters, mapActions, mapState } from "vuex";
 import BaseButton from "@/components/base/BaseButton.vue";
 export default {
  name: "MedicalProtocolCreateModal",
@@ -70,6 +70,9 @@ export default {
    };
  },
  computed: {
+    ...mapState({
+      url: (state) => state.imgUrl,
+    }),
    ...mapGetters({
      userData: "getUserData",
    }),
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue
@@ -7,7 +7,7 @@
        @click="changeShownCreateModal(true)",
        v-if="createInspection"
      )
-        q-icon(name="app:plus", size="18px")
+        q-icon.plus-icon(name="app:big-plus", size="24px")
    .p-4.rounded.background.list.flex.flex-col.gap-y-6
      .flex
        base-select(
@@ -157,4 +157,6 @@ export default {
  color: var(--default-white)
 .color-grey
  color: var(--font-grey-color)
+.plus-icon :deep(path)
+  fill: white
 </style>
--- a/src/pages/newMedicalCard/components/MedicalHeader.vue
+++ b/src/pages/newMedicalCard/components/MedicalHeader.vue
@@ -9,7 +9,7 @@
            color="grey",
          )
        q-breadcrumbs-el(:label="routes[routingHistory.state.back]")
-        q-breadcrumbs-el(:label="`${routes[routingHistory.state.current]} #${medicalCardData?.number}`")
+        q-breadcrumbs-el(:label="`Медкарта #${medicalCardData?.number}`")
      q-btn(
        flat,
        text-color="grey",
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,6 +5,7 @@ import calendar from "./modules/calendar";
 export default createStore({
  state: {
    url: "https://astra-dev.dopcore.com",
+    imgUrl: "https://astra-dev.dopcore.com/api/store/",
    routingHistory: window.history,
    userData: {},
  },