.

2023-08-01 18:26:47 +03:00
parent d1a84fc060
commit a9b4a7e185
6 changed files with 29 additions and 74 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
        "@dop/astra-ui": "^0.2.5",
        "@vuelidate/core": "^2.0.0",
        "@vuelidate/validators": "^2.0.0",
+        "lodash": "^4.17.21",
        "moment": "^2.29.4",
        "vue": "^3.2.13",
        "vue-router": "^4.1.5",
@@ -7578,8 +7579,7 @@
    "node_modules/lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
    "node_modules/lodash.assign": {
      "version": "4.2.0",
@@ -17981,8 +17981,7 @@
    "lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
    "lodash.assign": {
      "version": "4.2.0",
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
    "@dop/astra-ui": "^0.2.5",
    "@vuelidate/core": "^2.0.0",
    "@vuelidate/validators": "^2.0.0",
+    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "vue": "^3.2.13",
    "vue-router": "^4.1.5",
--- a/src/pages/medcards/TheMedcards.vue
+++ b/src/pages/medcards/TheMedcards.vue
@@ -1,6 +1,5 @@
 <template lang="pug">
-  .medcards-wrapper.flex.flex-col.w-full.gap-y-2.h-full
-    table-patients
+  .medcards-wrapper.flex.flex-col.gap-y-2.h-full
    medical-card-search
 </template>

@@ -13,3 +12,8 @@ export default {
  components: { MedicalCardSearch, TablePatients },
 };
 </script>
+
+<style lang="sass">
+.medcards-wrapper
+  width: calc(100vw - 72px)
+</style>
--- a/src/pages/medcards/components/MedicalCardSearch.vue
+++ b/src/pages/medcards/components/MedicalCardSearch.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .medical-wrapper.flex.h-full.rounded.w-full.flex-col
+  .medical-wrapper.rounded.h-full
    list-header
    list-contents
 </template>
@@ -16,4 +16,5 @@ export default {
 <style lang="sass" scoped>
 .medical-wrapper
  background-color: var(--default-white)
+  overflow: hidden
 </style>
--- a/src/pages/medcards/components/MedicalCardSearchHeader.vue
+++ b/src/pages/medcards/components/MedicalCardSearchHeader.vue
@@ -1,42 +1,16 @@
 <template lang="pug">
  .header-wrapper.flex.w-full.justify-between.p-4
    .flex.items-center.justify-center.gap-x-2
-      base-select.search(
-        width="438px",
+      base-input.search(
+        :width="438",
        size="M",
-        placeholder="Найти медкарту",
+        placeholder="Введите ФИО или номер телефона",
        icon-left,
-        hide-dropdown-icon,
-        use-input
-        :items="filteringMedcardsList",
-        custom-option,
-        :filter-fn="filterFn",
-        :popup-content-style="{height: filteringMedcardsList?.length > 3 ? '216px' : ''}"
+        v-model="filterString"
      )
-        template(v-slot:iconLeft)
+        template(#iconLeft)
          q-icon.search-icon(name="app:search", size="20px")
-        template(v-slot:customOption="slotProps")
-          .w-full.item.px-4.py-2.flex.gap-x-3.cursor-pointer(
-            v-bind="slotProps.props"
-          )
-            q-avatar(size="40px")
-              img(:src="slotProps.avatar")
-            .flex.flex-col.gap-y-1
-              .text-dark.text-sm.font-medium {{ slotProps.label }}
-              .text-xsx.grey-color Медкарта {{ `#${slotProps.medcard?.split(" ")?.join("")}` }}
-        template(v-slot:beforeOptions)
-          .h-10.w-full.px-4.pt-3.pb-2.flex.items-center
-            span.text-sm.grey-color {{ filteringMedcardsList.length }} результатов
-        template(v-slot:noOption)
-          .w-full.px-4.py-3.flex.items-center.text-sm.grey-color.font-medium Результатов по запросу не найдено
-      base-select(
-        width="280px",
-        :items="sortingOptions",
-        size="M",
-        placeholder="Сортировать по ...",
-        v-model="sortingType"
-      )
-    base-button(width="216px")
+    base-button(width="216px", @click="openCreateMedcardPage")
      q-icon.plus.mr-2(name="app:plus", size="24px")
      span Создать медкарту
 </template>
@@ -45,47 +19,26 @@
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
-import {
-  medcardsList,
-  sortingOptions,
-} from "@/pages/medcards/utils/medcardsConfig.js";
+
+import debounce from "lodash/debounce";
 export default {
  name: "MedicalCardSearchHeader",
  components: { BaseInput, BaseSelect, BaseButton },
+  emits: ["search"],
  data() {
    return {
-      filteringMedcardsList: null,
-      sortingOptions: sortingOptions,
-      sortingType: null,
+      filterString: "",
    };
  },
-  computed: {
-    serializedMedcardsList() {
-      return medcardsList.map((elem) => ({
-        label: `${elem?.last_name} ${elem?.first_name} ${elem?.patronymic}`,
-        id: elem?.id,
-        avatar: elem?.avatar,
-        medcard: elem?.medcard,
-      }));
-    },
-  },
  methods: {
-    filterFn(val, update) {
-      update(() => {
-        this.filteringMedcardsList = this.serializedMedcardsList?.filter(
-          (elem) => {
-            let reg = new RegExp(`^${val}`, "ig");
-            if (reg.test(elem.label)) return elem;
-          }
-        );
-      });
-    },
-    initializeMedcardsList() {
-      this.filteringMedcardsList = this.serializedMedcardsList;
+    openCreateMedcardPage() {
+      alert("Создать медкарту с ФИО: " + this.filterString);
    },
  },
-  mounted() {
-    this.initializeMedcardsList();
+  watch: {
+    filterString: debounce((value) => {
+      this.$emit("search", value);
+    }, 300),
  },
 };
 </script>
--- a/src/pages/medcards/components/MedicalCardSearchList.vue
+++ b/src/pages/medcards/components/MedicalCardSearchList.vue
@@ -36,8 +36,6 @@ export default {
  computed: {
    scrollPresence() {
      return this.medcardsInfo.length > 9;
-      // const wrapper = document.getElementById("listWrapper");
-      // return wrapper?.scrollHeight > wrapper?.clientHeight;
    },
  },
  methods: {
@@ -65,8 +63,7 @@ export default {
 .grey-color
  color: var(--font-grey-color)
 .body
-  height: calc(100vh - 56px - 24px - 360px - 72px - 40px)
-  overflow-y: auto
+  overflow: auto
  &::-webkit-scrollbar-track
    margin: 24px 0 24px 0
    background: #E9E9ED