поиск карт

src/pages/medcards/components/MedicalCardSearchRow.vue

@@ -1,93 +1,69 @@
 <template lang="pug">
-  .w-full.row-wrapper.h-14.flex
-    .field.gap-x-3(
-      :style="headerStyle(headerConfig[0])"
-    )
-      q-avatar(size="36px")
-        img(:src="avatar")
+  .w-full.row-wrapper.h-14.flex    
+    .field(:style="headerStyle(headerConfig[0])")
+      template(v-if="person.medical_card_id")
+        base-button(size="S", @click="openMedicalCard", label="Открыть", color="green")
+      template(v-else)      
+        base-button(size="S", @click="createMedCard", label="Создать")
+    .field.gap-x-3(:style="headerStyle(headerConfig[1])")
       span.font-semibold.text-dark {{patientName}}
-    .field(:style="headerStyle(headerConfig[1])")
-      span.text-dark {{ convertDate(medcardInfo?.person?.birth_date) }} г.
     .field(:style="headerStyle(headerConfig[2])")
-      .medcard-number.rounded.h-7.py-1.pl-3.pr-2.flex.items-center.justify-between.w-full.cursor-pointer(
-        @click="copyValue(medcardInfo?.number)"
-      )
-        span.text-dark.cursor-pointer {{ medcardInfo?.number }}
-        q-icon.copy(size="18px", name="app:copy")
-    .field(:style="headerStyle(headerConfig[3])")
-      span.text-dark {{ convertDate(medcardInfo?.created_at) }} г.
-    .field(:style="{...headerStyle(headerConfig[4])}")
-      q-icon.medcard.cursor-pointer(name="app:medcard", size="20px", @click="openMedicalCard")
+      span.text-dark {{ birthDate }}        
+    .field(:style="{...headerStyle(headerConfig[3])}")
+      span.text-dark {{ phones }}  
 </template>
 
 <script>
-import {
-  searchListConfig,
-  priorityList,
-} from "@/pages/medcards/utils/medcardsConfig.js";
+import { searchListConfig } from "@/pages/medcards/utils/medcardsConfig.js";
 import * as moment from "moment/moment";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
-import { addNotification } from "@/components/Notifications/notificationContext";
-import avatar from "@/assets/images/person.png";
+
 import { mapActions } from "vuex";
+import BaseButton from "@/components/base/BaseButton.vue";
 export default {
   name: "MedicalCardSearchRow",
-  components: { TheNotificationProvider },
+  components: { TheNotificationProvider, BaseButton },
   props: {
     headerStyle: Function,
-    medcardInfo: Object,
+    person: Object,
   },
   data() {
     return {
       headerConfig: searchListConfig,
-      avatar,
     };
   },
   computed: {
     patientName() {
-      return `${this.medcardInfo?.person?.last_name} ${this.medcardInfo?.person?.first_name} ${this.medcardInfo?.person?.patronymic}`;
+      return `${this.person?.last_name} ${this.person?.first_name} ${this.person?.patronymic}`;
     },
-    patientPriority() {
-      return priorityList?.find(
-        ({ priority }) => (this.medcardInfo.priority || null) === priority
-      );
+    birthDate() {
+      let retVal =
+        this.person?.birth_date &&
+        moment(this.person?.birth_date)?.format("DD MMMM YYYY");
+      return retVal ? retVal + " г." : "";
     },
-    thumbStyle() {
-      let percentage = this.medcardInfo?.filling_percentage || 0;
-      return {
-        width: `calc(${percentage}%)`,
-        "background-color":
-          percentage < 11
-            ? "var(--system-color-red)"
-            : percentage < 51
-            ? "var(--bg-yellow-warning)"
-            : "var(--system-color-green)",
-      };
+    phones() {
+      return this.person?.contacts
+        ?.filter((el) => el.category === "PHONE")
+        .map((el) => el.value)
+        .join(", ");
     },
   },
   methods: {
     ...mapActions({
       getMedicalCardData: "getMedicalCardDataByPersonId",
+      createMedicalCard: "createMedicalCard",
     }),
     openMedicalCard() {
-      this.getMedicalCardData({
-        personId: this.medcardInfo.person_id,
-        successCallback: (id) => this.$router.push("medical-card/" + id),
+      this.$router.push("medical-card/" + this.person["medical_card_id"]);
+    },
+    createMedCard() {
+      this.createMedicalCard({
+        personId: this.person.id,
+      }).then(() => {
+        this.openMedicalCard();
       });
     },
-    convertDate(date) {
-      return moment(date)?.format("DD MMMM YYYY");
-    },
-    copyValue(text) {
-      navigator.clipboard.writeText(text);
-      addNotification(
-        new Date().getTime(),
-        "",
-        "Номер медкарты скопирован",
-        "success",
-        5000
-      );
-    },
   },
 };
 </script>
@@ -122,8 +98,6 @@ span
 .track
   background: var(--gray-thirdly)
 
-.thumb
-
 .grey-color
   color: var(--font-grey-color)
 </style>