From 6b951a5af29ec7b6eb9f4036647f7b54049c1ba5 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 14 Aug 2023 18:16:19 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B0=20=D0=B7=D0=B0=D0=BF=D1=80=D0=BE=D1=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/nothing-choose.svg          | 20 +++++++++
 src/assets/images/nothing-search.svg          | 20 +++++++++
 .../medcards/components/MedicalCardSearch.vue | 41 +++++++++++++++--
 .../components/MedicalCardSearchList.vue      | 45 +++++++++++--------
 .../components/MedicalCardSearchRow.vue       | 12 +++--
 5 files changed, 110 insertions(+), 28 deletions(-)
 create mode 100644 src/assets/images/nothing-choose.svg
 create mode 100644 src/assets/images/nothing-search.svg

diff --git a/src/assets/images/nothing-choose.svg b/src/assets/images/nothing-choose.svg
new file mode 100644
index 0000000..cad467f
--- /dev/null
+++ b/src/assets/images/nothing-choose.svg
@@ -0,0 +1,20 @@
+<svg width="301" height="300" viewBox="0 0 301 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="148.495" cy="157" r="110" fill="#DDDDE8" fill-opacity="0.7"/>
+<path d="M190.995 87H108.495C99.6581 87 92.4946 94.1634 92.4946 103V212C92.4946 220.837 99.6581 228 108.495 228H190.995C199.831 228 206.995 220.837 206.995 212V103C206.995 94.1634 199.831 87 190.995 87Z" fill="white"/>
+<path d="M102.495 133.5C102.495 131.015 104.509 129 106.995 129H189.995C192.48 129 194.495 131.015 194.495 133.5C194.495 135.985 192.48 138 189.995 138H106.995C104.509 138 102.495 135.985 102.495 133.5Z" fill="#DDDDE8"/>
+<path d="M102.495 158.5C102.495 156.015 104.509 154 106.995 154H189.995C192.48 154 194.495 156.015 194.495 158.5C194.495 160.985 192.48 163 189.995 163H106.995C104.509 163 102.495 160.985 102.495 158.5Z" fill="#DDDDE8"/>
+<path d="M102.495 183.5C102.495 181.015 104.509 179 106.995 179H189.995C192.48 179 194.495 181.015 194.495 183.5C194.495 185.985 192.48 188 189.995 188H106.995C104.509 188 102.495 185.985 102.495 183.5Z" fill="#DDDDE8"/>
+<path d="M102.495 208.5C102.495 206.015 104.509 204 106.995 204H189.995C192.48 204 194.495 206.015 194.495 208.5C194.495 210.985 192.48 213 189.995 213H106.995C104.509 213 102.495 210.985 102.495 208.5Z" fill="#DDDDE8"/>
+<path d="M102.495 108.5C102.495 106.015 104.509 104 106.995 104H143.995C146.48 104 148.495 106.015 148.495 108.5C148.495 110.985 146.48 113 143.995 113H106.995C104.509 113 102.495 110.985 102.495 108.5Z" fill="#252850"/>
+<path d="M231.495 170C231.495 197.062 209.557 219 182.495 219C155.433 219 133.495 197.062 133.495 170C133.495 142.938 155.433 121 182.495 121C209.557 121 231.495 142.938 231.495 170Z" fill="#F4F4F6" fill-opacity="0.2"/>
+<path d="M189.495 152.5C189.495 148.358 186.137 145 181.995 145C177.852 145 174.495 148.358 174.495 152.5V163H164.495C160.629 163 157.495 166.134 157.495 170C157.495 173.866 160.629 177 164.495 177H174.495V187.5C174.495 191.642 177.852 195 181.995 195C186.137 195 189.495 191.642 189.495 187.5V177H200.495C204.361 177 207.495 173.866 207.495 170C207.495 166.134 204.361 163 200.495 163H189.495V152.5Z" fill="#4772F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M182.495 229C194.576 229 205.81 225.369 215.163 219.138L244.352 247L258.848 232.504L230.025 204.962C237.234 195.177 241.495 183.086 241.495 170C241.495 137.415 215.079 111 182.495 111C149.91 111 123.495 137.415 123.495 170C123.495 202.585 149.91 229 182.495 229ZM182.495 219C209.557 219 231.495 197.062 231.495 170C231.495 142.938 209.557 121 182.495 121C155.433 121 133.495 142.938 133.495 170C133.495 197.062 155.433 219 182.495 219Z" fill="#B2B5CC"/>
+<path d="M265.564 253.902C269.869 249.884 269.909 243.073 265.651 239.005L258.848 232.504L244.352 247L251.5 253.823C255.427 257.571 261.595 257.606 265.564 253.902Z" fill="#B2B5CC"/>
+<path d="M265.564 253.902C269.868 249.884 269.908 243.073 265.651 239.005L258.847 232.504L244.352 247L251.5 253.823C255.426 257.571 261.595 257.606 265.564 253.902Z" fill="#252850"/>
+<path d="M24.4913 128.559C27.9948 100 65.4948 67 40.4948 75.5C8.2732 86.4553 74.0995 100.359 97.9074 69.4486" stroke="black" stroke-width="2"/>
+<circle cx="268.495" cy="197" r="6" fill="#4772F2"/>
+<path d="M60.4551 232.772L61.4946 235L62.5342 232.772C64.1236 229.367 66.8612 226.629 70.267 225.04L72.4946 224L70.267 222.96C66.8612 221.371 64.1236 218.633 62.5342 215.228L61.4946 213L60.4551 215.228C58.8657 218.633 56.1281 221.371 52.7223 222.96L50.4946 224L52.7223 225.04C56.1281 226.629 58.8657 229.367 60.4551 232.772Z" stroke="#4772F2" stroke-width="2"/>
+<rect x="182.995" y="34.5" width="90" height="40" rx="7.5" fill="white" stroke="#E7E7EF"/>
+<circle cx="202.995" cy="54.5" r="4.5" fill="#DDDDE8"/>
+<path d="M211.495 54.5C211.495 52.0147 213.509 50 215.995 50H252.995C255.48 50 257.495 52.0147 257.495 54.5C257.495 56.9853 255.48 59 252.995 59H215.995C213.509 59 211.495 56.9853 211.495 54.5Z" fill="#DDDDE8"/>
+</svg>
diff --git a/src/assets/images/nothing-search.svg b/src/assets/images/nothing-search.svg
new file mode 100644
index 0000000..2e2ac07
--- /dev/null
+++ b/src/assets/images/nothing-search.svg
@@ -0,0 +1,20 @@
+<svg width="301" height="300" viewBox="0 0 301 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="148.495" cy="157" r="110" fill="#DDDDE8" fill-opacity="0.7"/>
+<path d="M190.995 87H108.495C99.6586 87 92.4951 94.1634 92.4951 103V212C92.4951 220.837 99.6586 228 108.495 228H190.995C199.832 228 206.995 220.837 206.995 212V103C206.995 94.1634 199.832 87 190.995 87Z" fill="white"/>
+<path d="M102.495 133.5C102.495 131.015 104.51 129 106.995 129H189.995C192.48 129 194.495 131.015 194.495 133.5C194.495 135.985 192.48 138 189.995 138H106.995C104.51 138 102.495 135.985 102.495 133.5Z" fill="#DDDDE8"/>
+<path d="M102.495 158.5C102.495 156.015 104.51 154 106.995 154H189.995C192.48 154 194.495 156.015 194.495 158.5C194.495 160.985 192.48 163 189.995 163H106.995C104.51 163 102.495 160.985 102.495 158.5Z" fill="#DDDDE8"/>
+<path d="M102.495 183.5C102.495 181.015 104.51 179 106.995 179H189.995C192.48 179 194.495 181.015 194.495 183.5C194.495 185.985 192.48 188 189.995 188H106.995C104.51 188 102.495 185.985 102.495 183.5Z" fill="#DDDDE8"/>
+<path d="M102.495 208.5C102.495 206.015 104.51 204 106.995 204H189.995C192.48 204 194.495 206.015 194.495 208.5C194.495 210.985 192.48 213 189.995 213H106.995C104.51 213 102.495 210.985 102.495 208.5Z" fill="#DDDDE8"/>
+<path d="M102.495 108.5C102.495 106.015 104.51 104 106.995 104H143.995C146.48 104 148.495 106.015 148.495 108.5C148.495 110.985 146.48 113 143.995 113H106.995C104.51 113 102.495 110.985 102.495 108.5Z" fill="#252850"/>
+<path d="M231.495 170C231.495 197.062 209.557 219 182.495 219C155.433 219 133.495 197.062 133.495 170C133.495 142.938 155.433 121 182.495 121C209.557 121 231.495 142.938 231.495 170Z" fill="#F4F4F6" fill-opacity="0.2"/>
+<path d="M199.68 162.931C202.609 160.002 202.609 155.253 199.68 152.324C196.751 149.395 192.002 149.395 189.073 152.324L181.648 159.749L174.577 152.678C171.844 149.944 167.411 149.944 164.678 152.678C161.944 155.411 161.944 159.843 164.678 162.577L171.749 169.648L164.324 177.073C161.395 180.002 161.395 184.751 164.324 187.679C167.253 190.608 172.002 190.608 174.931 187.679L182.355 180.255L190.134 188.033C192.867 190.767 197.299 190.767 200.033 188.033C202.767 185.299 202.767 180.867 200.033 178.134L192.255 170.355L199.68 162.931Z" fill="#F34549"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M182.495 229C194.577 229 205.81 225.369 215.163 219.138L244.352 247L258.848 232.504L230.025 204.962C237.235 195.177 241.495 183.086 241.495 170C241.495 137.415 215.08 111 182.495 111C149.91 111 123.495 137.415 123.495 170C123.495 202.585 149.91 229 182.495 229ZM182.495 219C209.557 219 231.495 197.062 231.495 170C231.495 142.938 209.557 121 182.495 121C155.433 121 133.495 142.938 133.495 170C133.495 197.062 155.433 219 182.495 219Z" fill="#B2B5CC"/>
+<path d="M265.564 253.902C269.869 249.884 269.909 243.073 265.652 239.005L258.848 232.504L244.352 247L251.5 253.823C255.427 257.571 261.596 257.606 265.564 253.902Z" fill="#B2B5CC"/>
+<path d="M265.565 253.902C269.869 249.884 269.909 243.073 265.652 239.005L258.848 232.504L244.353 247L251.501 253.823C255.427 257.571 261.596 257.606 265.565 253.902Z" fill="#252850"/>
+<path d="M24.4913 128.559C27.9948 100 65.4948 67 40.4948 75.5C8.2732 86.4553 74.0995 100.359 97.9074 69.4486" stroke="black" stroke-width="2"/>
+<circle cx="268.495" cy="197" r="6" fill="#F34549"/>
+<path d="M60.4555 232.772L61.4951 235L62.5347 232.772C64.1241 229.367 66.8617 226.629 70.2675 225.04L72.4951 224L70.2675 222.96C66.8617 221.371 64.1241 218.633 62.5347 215.228L61.4951 213L60.4555 215.228C58.8662 218.633 56.1286 221.371 52.7228 222.96L50.4951 224L52.7228 225.04C56.1286 226.629 58.8662 229.367 60.4555 232.772Z" stroke="#F34549" stroke-width="2"/>
+<rect x="182.995" y="34.5" width="90" height="40" rx="7.5" fill="white" stroke="#E7E7EF"/>
+<circle cx="202.995" cy="54.5" r="4.5" fill="#DDDDE8"/>
+<path d="M211.495 54.5C211.495 52.0147 213.51 50 215.995 50H252.995C255.48 50 257.495 52.0147 257.495 54.5C257.495 56.9853 255.48 59 252.995 59H215.995C213.51 59 211.495 56.9853 211.495 54.5Z" fill="#DDDDE8"/>
+</svg>
diff --git a/src/pages/medcards/components/MedicalCardSearch.vue b/src/pages/medcards/components/MedicalCardSearch.vue
index fd26f66..c3135f9 100644
--- a/src/pages/medcards/components/MedicalCardSearch.vue
+++ b/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;
     },
   },
 };
diff --git a/src/pages/medcards/components/MedicalCardSearchList.vue b/src/pages/medcards/components/MedicalCardSearchList.vue
index 7893e7a..ae9a699 100644
--- a/src/pages/medcards/components/MedicalCardSearchList.vue
+++ b/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>
diff --git a/src/pages/medcards/components/MedicalCardSearchRow.vue b/src/pages/medcards/components/MedicalCardSearchRow.vue
index 005c17d..fcdd1f1 100644
--- a/src/pages/medcards/components/MedicalCardSearchRow.vue
+++ b/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);