connect medcards

src/pages/medcards/components/MedicalCardSearch.vue

@@ -1,18 +1,25 @@
 <template lang="pug">
   .medical-wrapper.rounded
     list-header(@search="getMedcards")
-    list-contents
+    list-contents(:medicalCards="medicalCards")
 </template>
 
 <script>
 import ListHeader from "@/pages/medcards/components/MedicalCardSearchHeader.vue";
 import ListContents from "@/pages/medcards/components/MedicalCardSearchList.vue";
+import { fetchWrapper } from "@/shared/fetchWrapper";
 export default {
   name: "MedicalCardSearch",
   components: { ListHeader, ListContents },
+  data() {
+    return {
+      medicalCards: [],
+    };
+  },
   methods: {
-    getMedcards(value) {
-      console.log(value);
+    async getMedcards(value) {
+      const data = await fetchWrapper.get("medical_cards?full_name=" + value);
+      this.medicalCards = data || [];
     },
   },
 };

src/pages/medcards/components/MedicalCardSearchList.vue

@@ -10,7 +10,7 @@
         .h-full.w-8(v-if="scrollPresence")
       .body.w-full
         row(
-          v-for="medcard in medcardsInfo",
+          v-for="medcard in medicalCards",
           :key="medcard.id"
           :header-style="headerStyle",
           :medcard-info="medcard",
@@ -18,24 +18,23 @@
 </template>
 
 <script>
-import {
-  searchListConfig,
-  medcardsList,
-} from "@/pages/medcards/utils/medcardsConfig.js";
+import { searchListConfig } from "@/pages/medcards/utils/medcardsConfig.js";
 import Row from "@/pages/medcards/components/MedicalCardSearchRow.vue";
 
 export default {
   name: "MedicalCardSearchList",
+  props: {
+    medicalCards: Array,
+  },
   components: { Row },
   data() {
     return {
       headerConfig: searchListConfig,
-      medcardsInfo: medcardsList,
     };
   },
   computed: {
     scrollPresence() {
-      return this.medcardsInfo.length > 9;
+      return this.medicalCards.length > 9;
     },
   },
   methods: {

src/pages/medcards/components/MedicalCardSearchRow.vue

@@ -4,21 +4,21 @@
       :style="headerStyle(headerConfig[0])"
     )
       q-avatar(size="36px")
-        img(:src="medcardInfo.avatar")
-      span.font-semibold.text-dark {{patientName}}
+        img(:src="avatar")
+      span.font-semibold.text-dark {{medcardInfo?.person?.full_name}}
     .field(:style="headerStyle(headerConfig[1])")
-      span.text-dark {{ convertDate(medcardInfo?.birthday) }} г.
+      span.text-dark {{ convertDate(medcardInfo?.person?.birth_date) }} г.
     .field.gap-x-2(:style="headerStyle(headerConfig[2])")
       .rounded-full.h-2.w-2(:style="{background: patientPriority?.color}")
       span(:style="{color: patientPriority?.color}") {{ patientPriority?.text }}
     .field(:style="headerStyle(headerConfig[3])")
       .medcard-number.rounded.h-7.py-1.pl-3.pr-2.flex.items-center.justify-between.w-full.cursor-pointer(
-        @click="copyValue(medcardInfo?.medcard)"
+        @click="copyValue(medcardInfo?.number)"
       )
-        span.text-dark.cursor-pointer {{ medcardInfo?.medcard }}
+        span.text-dark.cursor-pointer {{ medcardInfo?.number }}
         q-icon.copy(size="18px", name="app:copy")
     .field(:style="headerStyle(headerConfig[4])")
-      span.text-dark {{ convertDate(medcardInfo?.creation_date) }} г.
+      span.text-dark {{ convertDate(medcardInfo?.created_at) }} г.
     .field.gap-x-3(:style="headerStyle(headerConfig[5])")
       .track.h-2.flex-1.rounded
         .thumb.h-full.rounded(:style="thumbStyle")
@@ -35,6 +35,7 @@ import {
 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";
 export default {
   name: "MedicalCardSearchRow",
   components: { TheNotificationProvider },
@@ -45,11 +46,12 @@ export default {
   data() {
     return {
       headerConfig: searchListConfig,
+      avatar,
     };
   },
   computed: {
     patientName() {
-      return `${this.medcardInfo?.last_name} ${this.medcardInfo?.first_name} ${this.medcardInfo?.patronymic}`;
+      return `${this.medcardInfo?.person?.last_name} ${this.medcardInfo?.person?.first_name} ${this.medcardInfo?.person?.patronymic}`;
     },
     patientPriority() {
       return priorityList?.find(

src/pages/medcards/utils/medcardsConfig.js

@@ -1,4 +1,3 @@
-import avatar from "@/assets/images/person.png";
 export const searchListConfig = [
   {
     title: "ФИО",
@@ -68,153 +67,3 @@ export const priorityList = [
     color: "#9294A7",
   },
 ];
-
-export const medcardsList = [
-  {
-    id: 1,
-    first_name: "Тимофей",
-    last_name: "Сидоров",
-    patronymic: "Витальевич",
-    birthday: "01.07.1988",
-    avatar: avatar,
-    creation_date: "30.07.2023",
-    filling_percentage: 15,
-    priority: 1,
-    medcard: "6112 813812",
-  },
-  {
-    id: 2,
-    first_name: "Шамиль",
-    last_name: "Рокотов",
-    patronymic: "Витальевич",
-    birthday: "02.03.1999",
-    avatar: avatar,
-    creation_date: "01.07.2023",
-    filling_percentage: 40,
-    priority: 2,
-    medcard: "6112 813812",
-  },
-  {
-    id: 3,
-    first_name: "Светлана",
-    last_name: "Васильева",
-    patronymic: "Витальевна",
-    birthday: "12.09.1959",
-    avatar: avatar,
-    creation_date: "15.07.2023",
-    filling_percentage: 70,
-    priority: 3,
-    medcard: "6112 8138",
-  },
-  {
-    id: 4,
-    first_name: "Арнольд",
-    last_name: "Першин",
-    patronymic: "Витальевич",
-    birthday: "12.12.1986",
-    avatar: avatar,
-    creation_date: "30.07.2023",
-    filling_percentage: 5,
-    priority: null,
-    medcard: "6112 8138",
-  },
-  {
-    id: 5,
-    first_name: "Арнольд",
-    last_name: "Першин",
-    patronymic: "Витальевич",
-    birthday: "12.12.1986",
-    avatar: avatar,
-    creation_date: "30.07.2023",
-    filling_percentage: 56,
-    priority: 1,
-    medcard: "6112 8138",
-  },
-  {
-    id: 6,
-    first_name: "Арнольд",
-    last_name: "Першин",
-    patronymic: "Витальевич",
-    birthday: "12.12.1986",
-    avatar: avatar,
-    creation_date: "30.07.2023",
-    filling_percentage: 56,
-    priority: 1,
-    medcard: "6112 8138",
-  },
-  {
-    id: 7,
-    first_name: "Арнольд",
-    last_name: "Першин",
-    patronymic: "Витальевич",
-    birthday: "12.12.1986",
-    avatar: avatar,
-    creation_date: "30.07.2023",
-    filling_percentage: 56,
-    priority: 1,
-    medcard: "6112 8138",
-  },
-  {
-    id: 8,
-    first_name: "Арнольд",
-    last_name: "Першин",
-    patronymic: "Витальевич",
-    birthday: "12.12.1986",
-    avatar: avatar,
-    creation_date: "30.07.2023",
-    filling_percentage: 56,
-    priority: 1,
-    medcard: "6112 8138",
-  },
-  {
-    id: 9,
-    first_name: "Арнольд",
-    last_name: "Першин",
-    patronymic: "Витальевич",
-    birthday: "12.12.1986",
-    avatar: avatar,
-    creation_date: "30.07.2023",
-    filling_percentage: 56,
-    priority: 1,
-    medcard: "6112 8138",
-  },
-  {
-    id: 10,
-    first_name: "Арнольд",
-    last_name: "Першин",
-    patronymic: "Витальевич",
-    birthday: "12.12.1986",
-    avatar: avatar,
-    creation_date: "30.07.2023",
-    filling_percentage: 56,
-    priority: 1,
-    medcard: "6112 8138",
-  },
-];
-
-export const sortingOptions = [
-  {
-    label: "ФИО",
-    id: "name",
-  },
-  {
-    label: "приоритету",
-    id: "priority",
-  },
-  {
-    label: "дате рождения",
-    id: "birthDate",
-  },
-  {
-    label: "номеру медкарты",
-    id: "medcardNumber",
-  },
-  {
-    label: "проценту заполнения",
-    id: "percent",
-  },
-  {
-    label: "дате создания медкарты",
-    id: "creationDate",
-  },
-];