[WIP] Добавил отображение пациентов, сортировку и их поиск

src/pages/newCalendar/components/CalendarOpenSidebar.vue

@@ -21,18 +21,23 @@
     .flex.flex-col.gap-y-1(v-for="elem in list")
       q-expansion-item.expansion.font-bold.text-xm(
         expand-separator
-        :label="elem.label"
+        :label="elem.label",
+        :class="{'patient': elem.label === 'Пациенты'}"
       )
-        .flex.flex-col.font-medium.text-smm.px-4.pt-2(
+        .select.flex.flex-col.font-medium.text-smm.px-4(
           v-if="elem.label !== 'Пациенты'",
           v-for="item in elem.data"
         )
           .status.flex.items-center.gap-x-1.px-2
             img(:src="item.icon")
             span {{item.name}}
-        .flex.flex-col.p-4(v-else)
+        .flex.flex-col.p-4.pb-0(v-else)
           .flex.h-8.w-full.items-center.justify-between
             base-input(
+              v-model="foundPerson",
+              debounce="10",
+              @keyup.enter="searchPerson",
+              @input="searchPerson",
               id="input",
               placeholder="Найти пациента...",
               outlined,
@@ -43,14 +48,29 @@
               textColor="var(--font-grey-color)"
             )
               q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
-            q-btn.sort.ml-2(
+            q-btn.btn.ml-2(
+              @click="sortPerson(elem.data)",
               icon="app:sort-number",
               :style="{width: '32px', height: '32px'}",
               padding="0"
             )
-          .flex.items-center.justify-between.font-medium.text-smm
+          .flex.flex-col
+            .flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
+              @click="checkAll(elem.data)"
+            )
               span Все
-            img(:src="icon_ok")
+              img(v-if="selectAll(elem.data)", :src="icon_ok")
+            .person-wrapper.flex.flex-col
+              .person.items-center.flex.justify-between.py-2.cursor-pointer(
+                v-for="(person, index) in choiceData(elem.data)",
+                @click="checkPerson(index, elem.data)"
+              )
+                .flex.items-center.gap-x-2
+                  img.h-10.w-10.object-cover.rounded-full(:src="person.avatar")
+                  .flex.flex-col.font-medium
+                    .text-smm {{trimOwnerName(person.last_name, person.first_name, person.patronymic)}}
+                    .text.text-xsx {{person.birthday}}
+                img.h-6.w-6(v-if="person.check", :src="icon_ok")
 </template>
 
 <script>
@@ -64,6 +84,7 @@ import partially_filled from "@/assets/icons/medcard_partially_filled.svg";
 import not_filled from "@/assets/icons/medcard_not_filled.svg";
 import icon_ok from "@/assets/icons/icon_ok.svg";
 import BaseInput from "@/components/base/BaseInput.vue";
+import personImage from "@/assets/images/person.png";
 
 export default {
   name: "CalendarOpenSidebar",
@@ -71,8 +92,11 @@ export default {
   components: { BaseInput },
   data() {
     return {
+      val: [],
       arrow,
       icon_ok,
+      foundPerson: "",
+      sortData: [],
       list: [
         {
           label: "Статус приема",
@@ -95,40 +119,149 @@ export default {
           label: "Пациенты",
           data: [
             {
+              id: 0,
               first_name: "Александр",
               last_name: "Герасимов",
               patronymic: "Александрович",
               birthday: "28.03.1980",
+              avatar: personImage,
+              check: false,
             },
             {
+              id: 1,
               first_name: "Петр",
               last_name: "Сложный",
               patronymic: "Олегович",
               birthday: "01.03.1975",
+              avatar: personImage,
+              check: false,
             },
             {
+              id: 2,
               first_name: "Олег",
               last_name: "Пложкин",
               patronymic: "Васильевич",
               birthday: "13.07.1999",
+              avatar: personImage,
+              check: false,
             },
             {
+              id: 3,
               first_name: "Самвел",
               last_name: "Акопян",
               patronymic: "Робертович",
               birthday: "11.11.1991",
+              avatar: personImage,
+              check: false,
             },
             {
+              id: 4,
               first_name: "Евгений",
               last_name: "Вольный",
               patronymic: "Алексеевич",
               birthday: "12.03.1989",
+              avatar: personImage,
+              check: false,
+            },
+            {
+              id: 5,
+              first_name: "Анатолий",
+              last_name: "Петров",
+              patronymic: "Васильевич",
+              birthday: "23.07.1949",
+              avatar: personImage,
+              check: false,
+            },
+            {
+              id: 6,
+              first_name: "Людмила",
+              last_name: "Романова",
+              patronymic: "Олеговна",
+              birthday: "12.11.1995",
+              avatar: personImage,
+              check: false,
+            },
+            {
+              id: 7,
+              first_name: "Святослав",
+              last_name: "Зимний",
+              patronymic: "Алексеевич",
+              birthday: "15.05.1989",
+              avatar: personImage,
+              check: false,
+            },
+            {
+              id: 8,
+              first_name: "Алексей",
+              last_name: "Пложкин",
+              patronymic: "Васильевич",
+              birthday: "13.07.2000",
+              avatar: personImage,
+              check: false,
+            },
+            {
+              id: 9,
+              first_name: "Ипполит",
+              last_name: "Федос",
+              patronymic: "Федорович",
+              birthday: "12.12.1986",
+              avatar: personImage,
+              check: false,
+            },
+            {
+              id: 10,
+              first_name: "Евгений",
+              last_name: "Сложный",
+              patronymic: "Алексеевич",
+              birthday: "13.03.1979",
+              avatar: personImage,
+              check: false,
             },
           ],
         },
       ],
+      sort: false,
     };
   },
+  methods: {
+    trimOwnerName(lastName, firstName, patronymic) {
+      let checkedFirstName = firstName !== null ? firstName[0] + "." : "";
+      let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
+      return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
+    },
+    checkPerson(index, arr) {
+      arr.map((e) => {
+        if (e.id === index) e.check = !e.check;
+      });
+    },
+    selectAll(arr) {
+      return arr.find((e) => e.check) ? false : true;
+    },
+    checkAll(arr) {
+      arr.map((e) => (e.check = false));
+    },
+    searchPerson() {
+      this.sortData = this.list
+        .find((e) => e.label === "Пациенты")
+        .data.filter(
+          (e) =>
+            e.last_name.toLowerCase().substr(0, this.foundPerson.length) ===
+            this.foundPerson.toLowerCase()
+        );
+    },
+    choiceData(arr) {
+      return this.foundPerson ? this.sortData : arr;
+    },
+    sortPerson(arr) {
+      if (!this.sort) {
+        this.sort = true;
+        arr.sort((a, b) => (a.last_name > b.last_name ? 1 : -1));
+      } else {
+        this.sort = false;
+        arr.sort((a, b) => (b.last_name > a.last_name ? 1 : -1));
+      }
+    },
+  },
 };
 </script>
 
@@ -146,6 +279,11 @@ export default {
   border-radius: 4px
   color: var(--font-dark-blue-color)
 
+.select
+  padding-bottom: 2px
+  &:last-child
+    padding-bottom: 16px
+
 .status
   border-radius: 4px
   height: 28px
@@ -159,10 +297,10 @@ export default {
 .q-expansion-item :deep(.q-separator)
   display: none
 
-.q-expansion-item :deep(.q-expansion-item__content)
+.patient :deep(.q-expansion-item__content)
-  padding-bottom: 16px
+  padding-bottom: 0px
 
-.sort
+.btn
   background-color: var(--bg-light-grey)
   color: var(--font-grey-color)
 
@@ -176,4 +314,24 @@ export default {
 
 .q-expansion-item :deep(.q-item__label)
   line-height: 135% !important
+
+.text
+  color: var(--font-grey-color)
+
+.person-wrapper
+  height: 272px
+  overflow-y: auto
+  margin-right: -10px
+  &::-webkit-scrollbar
+    width: 4px
+  &::-webkit-scrollbar-track:vertical
+    margin-top: -26px
+    margin-bottom: 8px
+
+.person
+  height: 56px
+  width: calc(100% - 10px)
+  border-bottom: 1px solid var(--bg-light-grey)
+  &:first-child
+    border-top: 1px solid var(--bg-light-grey)
 </style>