WIP Сделала фильтрацию

src/components/base/BaseSelect.vue

@@ -13,22 +13,42 @@
         map-options,
         :clearable="clearable",
         dropdown-icon="app:down-arrow",
-        :menu-offset="[0, 8]"
+        :menu-offset="[0, 8]",
+        :use-input="useInput",
+        :placeholder="useInput && placeholder ? placeholder : ''",
+        @filter="filterFn",
+        :popup-content-style="popupContentStyle"
       )
         template(v-slot:selected)
-          span(v-if="!value?.icon", :class="{placeholder: placeholder}") {{ textSelect }}
+          span(v-if="!value?.icon", :class="placeholderColor") {{ textSelect }}
           q-icon.selected-icon(
             v-else,
             :name="iconSelect",
             size="24px"
           )
-        template(v-slot:option="scope")
+        template(v-slot:option="scope", v-if="!customOption")
           q-item(v-bind="scope.itemProps", style="justify-content: center", v-if="value?.icon")
             q-item-section(avatar, style="padding: 0px; min-width: 0px")
               q-icon.icon(:name="scope.opt.icon", size="24px")
           q-item.item.px-4.py-2(v-bind="scope.itemProps", style="justify-content: center", v-else)
             q-item-section
               q-item-label.text-dark.text-base.font-medium {{ scope.opt.label }}
+        template(v-slot:option="{itemProps, opt}", v-else)
+          slot(
+            name="customOption",
+            :props="itemProps",
+            :label="opt.label"
+            :avatar="opt.avatar",
+            :medcard="opt.medcard"
+          )
+        template(v-slot:prepend, v-if="iconLeft")
+          slot(name="iconLeft")
+        template(v-slot:append, v-if="iconRight")
+          slot(name="iconRight")
+        template(v-slot:before-options)
+          slot(name="beforeOptions")
+        template(v-slot:no-option)
+          slot(name="noOption")
 </template>
 
 <script>
@@ -56,6 +76,12 @@ export default {
     width: String,
     clearable: Boolean,
     size: String,
+    useInput: Boolean,
+    iconLeft: Boolean,
+    iconRight: Boolean,
+    customOption: Boolean,
+    filterFn: Function,
+    popupContentStyle: Object,
   },
   emits: ["update:modelValue"],
   computed: {
@@ -69,7 +95,11 @@ export default {
     },
     textSelect() {
       if (typeof this.modelValue === "string") return this.value;
-      return this.value?.label ? this.value.label : this.placeholder;
+      return this.value?.label
+        ? this.value.label
+        : !this.useInput
+        ? this.placeholder
+        : "";
     },
     iconSelect() {
       return this.value?.icon ? this.value.icon : this.placeholder;
@@ -123,14 +153,29 @@ export default {
         "--py": "8px 0",
       };
     },
+    placeholderColor() {
+      return {
+        placeholder: !this.useInput && this.placeholder,
+        selected:
+          typeof this.modelValue === "string"
+            ? !!this.value
+            : !!this.value?.label,
+      };
+    },
   },
 };
 </script>
 <style lang="sass">
 .placeholder
   color: var(--font-grey-color)
-.q-menu
+.selected
-  font-feature-settings: 'pnum' on, 'lnum' on !important
+  color: var(--font-dark-blue-color)
+
+.q-placeholder
+  font-weight: 500 !important
+  &::placeholder
+    opacity: 1 !important
+    color: var(--font-grey-color) !important
 
 .q-field--auto-height .q-field__native
   min-height: var(--input-height) !important
@@ -199,4 +244,6 @@ export default {
 
 .q-menu
   box-shadow: 1px 1px 8px 0px rgba(37, 40, 80, 0.15) !important
+  font-feature-settings: 'pnum' on, 'lnum' on !important
+  //max-height: var(--input-height) !important
 </style>

src/pages/medcards/components/MedicalCardSearchHeader.vue

@@ -1,17 +1,37 @@
 <template lang="pug">
   .header-wrapper.flex.w-full.justify-between.p-4
     .flex.items-center.justify-center.gap-x-2
-      base-input.search(
+      base-select.search(
-        :width="438",
+        width="438px",
         size="M",
         placeholder="Найти медкарту",
-        iconLeft
+        icon-left,
+        hide-dropdown-icon,
+        use-input
+        :items="filteringMedcardsList",
+        custom-option,
+        :filter-fn="filterFn",
+        :popup-content-style="{height: filteringMedcardsList?.length > 3 ? '216px' : ''}"
       )
         template(v-slot: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="items",
+        :items="sortingOptions",
         size="M",
         placeholder="Сортировать по ...",
         v-model="sortingType"
@@ -25,40 +45,48 @@
 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";
 export default {
   name: "MedicalCardSearchHeader",
   components: { BaseInput, BaseSelect, BaseButton },
   data() {
     return {
-      items: [
+      filteringMedcardsList: null,
-        {
+      sortingOptions: sortingOptions,
-          label: "ФИО",
-          id: "name",
-        },
-        {
-          label: "приоритету",
-          id: "priority",
-        },
-        {
-          label: "дате рождения",
-          id: "birthDate",
-        },
-        {
-          label: "номеру медкарты",
-          id: "medcardNumber",
-        },
-        {
-          label: "проценту заполнения",
-          id: "percent",
-        },
-        {
-          label: "дате создания медкарты",
-          id: "creationDate",
-        },
-      ],
       sortingType: null,
     };
   },
+  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;
+    },
+  },
+  mounted() {
+    this.initializeMedcardsList();
+  },
 };
 </script>
 
@@ -75,4 +103,17 @@ export default {
 
 .plus :deep(path)
   fill: var(--default-white)
+
+.grey-color
+  color: var(--font-grey-color)
+
+.item
+  border-bottom: 1px solid var(--gray-secondary)
+  &:last-child
+    border-bottom: none
+  &:hover
+    background-color: var(--gray-thirdly)
+
+span
+  cursor: default
 </style>

src/pages/medcards/components/MedicalCardSearchList.vue

@@ -18,138 +18,19 @@
 </template>
 
 <script>
-import { searchListConfig } from "@/pages/medcards/utils/medcardsConfig.js";
+import {
+  searchListConfig,
+  medcardsList,
+} from "@/pages/medcards/utils/medcardsConfig.js";
 import Row from "@/pages/medcards/components/MedicalCardSearchRow.vue";
-import avatar from "@/assets/images/person.png";
+
 export default {
   name: "MedicalCardSearchList",
   components: { Row },
   data() {
     return {
       headerConfig: searchListConfig,
-      //TODO Взять из конфига
+      medcardsInfo: medcardsList,
-      medcardsInfo: [
-        {
-          id: 1,
-          first_name: "Арнольд",
-          last_name: "Першин",
-          patronymic: "Витальевич",
-          birthday: "12.12.1986",
-          avatar: avatar,
-          creation_date: "30.07.2023",
-          filling_percentage: 15,
-          priority: 1,
-          medcard: "6112 813812",
-        },
-        {
-          id: 2,
-          first_name: "Арнольд",
-          last_name: "Першин",
-          patronymic: "Витальевич",
-          birthday: "12.12.1986",
-          avatar: avatar,
-          creation_date: "30.07.2023",
-          filling_percentage: 40,
-          priority: 2,
-          medcard: "6112 813812",
-        },
-        {
-          id: 3,
-          first_name: "Арнольд",
-          last_name: "Першин",
-          patronymic: "Витальевич",
-          birthday: "12.12.1986",
-          avatar: avatar,
-          creation_date: "30.07.2023",
-          filling_percentage: 70,
-          priority: 3,
-          medcard: "6112 813812",
-        },
-        {
-          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 813812",
-        },
-        {
-          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 813812",
-        },
-        {
-          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 813812",
-        },
-        {
-          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 813812",
-        },
-        {
-          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 813812",
-        },
-        {
-          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 813812",
-        },
-        {
-          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 813812",
-        },
-      ],
     };
   },
   computed: {

src/pages/medcards/utils/medcardsConfig.js

@@ -1,3 +1,4 @@
+import avatar from "@/assets/images/person.png";
 export const searchListConfig = [
   {
     title: "ФИО",
@@ -67,3 +68,153 @@ 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",
+  },
+];