From 0b5b152e87ee63f869fb0df3fa99950ac32c16a4 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Mon, 29 May 2023 17:29:30 +0300
Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=BF=D0=B0=D1=86=D0=B8=D0=B5=D0=BD=D1=82=D0=BE?=
 =?UTF-8?q?=D0=B2,=20=D1=81=D0=BE=D1=80=D1=82=D0=B8=D1=80=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=BA=D1=83=20=D0=B8=20=D0=B8=D1=85=20=D0=BF=D0=BE=D0=B8=D1=81?=
 =?UTF-8?q?=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/person.png                  | Bin 0 -> 2514 bytes
 src/components/base/BaseCategorySelection.vue |   2 +-
 .../components/CalendarOpenSidebar.vue        | 178 +++++++++++++++++-
 3 files changed, 169 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/images/person.png

diff --git a/src/assets/images/person.png b/src/assets/images/person.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa29260b7b2c646febe288fec3238991eb06acdf
GIT binary patch
literal 2514
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

literal 0
HcmV?d00001

diff --git a/src/components/base/BaseCategorySelection.vue b/src/components/base/BaseCategorySelection.vue
index 040ba56..7f7bedf 100644
--- a/src/components/base/BaseCategorySelection.vue
+++ b/src/components/base/BaseCategorySelection.vue
@@ -56,7 +56,7 @@
       .flex.items-center.h-full.w-full.justify-center.font-medium.text-6xl(
         v-else,
         :style="{color: 'var(--font-grey-color)'}"
-       ) Выберите категорию
+      ) Выберите категорию
 </template>
 
 <script>
diff --git a/src/pages/newCalendar/components/CalendarOpenSidebar.vue b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
index 9f7dd0d..3bb1462 100644
--- a/src/pages/newCalendar/components/CalendarOpenSidebar.vue
+++ b/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
-            span Все
-            img(:src="icon_ok")
+          .flex.flex-col
+            .flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
+              @click="checkAll(elem.data)"
+            )
+              span Все
+              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)
-  padding-bottom: 16px
+.patient :deep(.q-expansion-item__content)
+  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>