WIP Поправила запрос

src/pages/medcards/components/MedicalCardSearch.vue

@@ -1,25 +1,60 @@
 <template lang="pug">
   .medical-wrapper.rounded
     list-header(@search="getMedcards")
-    list-contents(:medicalCards="medicalCards")
+    list-contents(
+      :medicalCards="medicalCards",
+      :data-status="dataStatus"
+    )
 </template>
 
 <script>
 import ListHeader from "@/pages/medcards/components/MedicalCardSearchHeader.vue";
 import ListContents from "@/pages/medcards/components/MedicalCardSearchList.vue";
 import { fetchWrapper } from "@/shared/fetchWrapper";
+import nothingChooseImg from "@/assets/images/nothing-choose.svg";
+import nothingSearchImg from "@/assets/images/nothing-search.svg";
 export default {
   name: "MedicalCardSearch",
   components: { ListHeader, ListContents },
   data() {
     return {
       medicalCards: [],
+      dataStatus: {
+        title: "no data",
+        message: "Введите номер карты или ФИО пациента",
+        img: nothingChooseImg,
+      },
     };
   },
   methods: {
     async getMedcards(value) {
-      const data = await fetchWrapper.get("medical_cards?full_name=" + value);
-      this.medicalCards = data || [];
+      if (!value) {
+        this.dataStatus = {
+          title: "no data",
+          message: "Введите номер карты или ФИО пациента",
+          img: nothingChooseImg,
+        };
+        this.medicalCards = [];
+        return;
+      }
+      const data = await fetchWrapper.get(
+        "medical_cards?searchstring=" + value
+      );
+      if (data?.length === 0) {
+        this.medicalCard = [];
+        this.dataStatus = {
+          title: "not found",
+          message: `По запросу «${value}» не найдено.
+            Переформулируйте запрос и попробуйте снова`,
+          img: nothingSearchImg,
+        };
+        return;
+      }
+      this.medicalCards = data;
+      this.dataStatus = {
+        title: "found",
+      };
+      return;
     },
   },
 };

src/pages/medcards/components/MedicalCardSearchList.vue

@@ -1,20 +1,25 @@
 <template lang="pug">
   .scroll-wrapper
-    .list-wrapper.rounded.w-full(id="listWrapper")
-      .w-full.header.h-10.flex
-        .h-full.py-10px.px-4.flex.items-center.justify-start.font-semibold.text-sm.grey-color(
-          v-for="field in headerConfig",
-          :key="field.title",
-          :style="headerStyle(field)"
-        ) {{ field.title }}
-        .h-full.w-8(v-if="scrollPresence")
-      .body.w-full
-        row(
-          v-for="medcard in medicalCards",
-          :key="medcard.id"
-          :header-style="headerStyle",
-          :medcard-info="medcard",
-        )
+    .list-wrapper.rounded.w-full.bg-white(id="listWrapper")
+      .w-full.h-full.flex.items-center.justify-center(v-if="dataStatus.title !== 'found'")
+        .flex.flex-col.gap-y-2.h-96.items-center
+          img.image(:src="dataStatus.img")
+          .font-bold.text-xll.grey-color.whitespace-pre-line.text-center {{dataStatus.message}}
+      .flex.flex-col.w-full.h-full(v-else)
+        .w-full.header.h-10.flex
+          .h-full.py-10px.px-4.flex.items-center.justify-start.font-semibold.text-sm.grey-color(
+            v-for="field in headerConfig",
+            :key="field.title",
+            :style="headerStyle(field)"
+          ) {{ field.title }}
+          .h-full.w-8(v-if="scrollPresence")
+        .body.w-full
+          row(
+            v-for="medcard in medicalCards",
+            :key="medcard.id"
+            :header-style="headerStyle",
+            :medcard-info="medcard",
+          )
 </template>
 
 <script>
@@ -25,6 +30,7 @@ export default {
   name: "MedicalCardSearchList",
   props: {
     medicalCards: Array,
+    dataStatus: Object,
   },
   components: { Row },
   data() {
@@ -61,9 +67,9 @@ export default {
   overflow-y: hidden
 .list-wrapper
   overflow: hidden
-  height: 100%
-  display: flex
-  flex-direction: column
+  height: calc(100vh - 16px - 56px - 72px)
+  //display: flex
+  //flex-direction: column
   min-width: min-content
 .header
   background-color: var(--gray-thirdly)
@@ -77,4 +83,7 @@ export default {
     background: #E9E9ED
   &::-webkit-scrollbar-thumb
     background: var(--font-grey-color)
+.image
+  width: 300px
+  height: 300px
 </style>

src/pages/medcards/components/MedicalCardSearchRow.vue

@@ -5,7 +5,7 @@
     )
       q-avatar(size="36px")
         img(:src="avatar")
-      span.font-semibold.text-dark {{medcardInfo?.person?.full_name}}
+      span.font-semibold.text-dark {{patientName}}
     .field(:style="headerStyle(headerConfig[1])")
       span.text-dark {{ convertDate(medcardInfo?.person?.birth_date) }} г.
     .field.gap-x-2(:style="headerStyle(headerConfig[2])")
@@ -22,7 +22,7 @@
     .field.gap-x-3(:style="headerStyle(headerConfig[5])")
       .track.h-2.flex-1.rounded
         .thumb.h-full.rounded(:style="thumbStyle")
-      span.grey-color {{ medcardInfo?.filling_percentage }}%
+      span.grey-color {{ medcardInfo?.filling_percentage || 0 }}%
     .field(:style="{...headerStyle(headerConfig[6])}")
       q-icon.medcard.cursor-pointer(name="app:medcard", size="20px")
 </template>
@@ -55,11 +55,11 @@ export default {
     },
     patientPriority() {
       return priorityList?.find(
-        ({ priority }) => this.medcardInfo.priority === priority
+        ({ priority }) => (this.medcardInfo.priority || null) === priority
       );
     },
     thumbStyle() {
-      let percentage = this.medcardInfo?.filling_percentage;
+      let percentage = this.medcardInfo?.filling_percentage || 0;
       return {
         width: `calc(${percentage}%)`,
         "background-color":
@@ -73,9 +73,7 @@ export default {
   },
   methods: {
     convertDate(date) {
-      return moment(date?.split(".")?.reverse()?.join("-"))?.format(
-        "DD MMMM YYYY"
-      );
+      return moment(date)?.format("DD MMMM YYYY");
     },
     copyValue(text) {
       navigator.clipboard.writeText(text);