[WIP] Добавил отображение форм при клике на иконки сайдбара

src/pages/newCalendar/components/CalendarOpenSidebar.vue

@@ -53,10 +53,11 @@
               q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
             q-btn.btn.ml-2(
               @click="sortPerson(elem.data)",
-              icon="app:sort-number",
+              style="color: var(--font-grey-color); background: var(--bg-light-grey)"
               :style="{width: '32px', height: '32px'}",
               padding="0"
             )
+              img(:src="sort_word")
           .flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
             @click="checkAll(elem.data)"
           )
@@ -78,6 +79,7 @@
 <script>
 import arrow from "@/assets/icons/double_left_arrow.svg";
 import icon_ok from "@/assets/icons/icon_ok.svg";
+import sort_word from "@/assets/icons/sort_word.svg";
 import BaseInput from "@/components/base/BaseInput.vue";
 import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 
@@ -90,6 +92,7 @@ export default {
       val: [],
       arrow,
       icon_ok,
+      sort_word,
       foundPerson: "",
       sortData: [],
       patientList: patientList,

src/pages/newCalendar/components/CalendarSidebar.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-1
+  .sidebar.flex.flex-col.gap-y-1
     .button.flex.rounded-t
       q-btn(
         @click="openSidebar",
@@ -8,18 +8,82 @@
         style="color: var(--font-grey-color); background: var(--bg-light-grey)"
       )
         img(:src="arrow")
-    .button.flex      
+    .button.flex    
       q-btn(color="primary", dense, padding="14px", @click="createForm")
         q-icon(name="app:icon-plus", size="12px")
-    .button.flex
-      q-btn(dense, style="color: var(--font-grey-color)", padding="0px")
+    .button.flex.relative
+      q-btn(dense, style="color: var(--font-grey-color); borderRadius: 50%", padding="4px")
         img(:src="round")
+      q-menu(anchor="center start" self="top right" :style="{'margin-left': '8px !important'}")
+        .status-wrapper.flex.flex-col.gap-y-4.p-4
+          .font-bold.text-xm Статус приема
+          .flex.flex-col.gap-2px
+            .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
+              v-for="status in patientData.statuses",
+              v-close-popup
+            )
+              img(:src="status.icon")
+              span {{status.name}}
     .button.flex
-      q-btn(dense, style="color: var(--font-grey-color)", padding="0px")
+      q-btn(dense, style="color: var(--font-grey-color); borderRadius: 50%", padding="4px")
         img(:src="medcard")
+      q-menu(anchor="center start" self="top right" :style="{'margin-left': '8px !important'}")
+        .fill-wrapper.flex.flex-col.gap-y-4.p-4
+          .font-bold.text-xm Первичная медкарта
+          .flex.flex-col.gap-2px
+            .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
+              v-for="medical in medicalData",
+              v-close-popup
+            )
+              img(:src="medical.icon")
+              span {{medical.name}}
     .button.flex.rounded-b
-      q-btn(dense, style="color: var(--font-grey-color)", padding="6.5px 3.5px")
+      q-btn(dense, style="color: var(--font-grey-color); borderRadius: 50%", padding="10.5px 7.5px")
         img(:src="group")
+      q-menu(anchor="center start" self="top right" :style="{'margin-left': '8px !important'}")
+        .patient-wrapper.flex.flex-col.gap-y-4.px-4.pt-4
+          .font-bold.text-xm Пациенты
+          .flex.flex-col.relative(:style="{height: '391px'}")
+            .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,
+                :width="160",
+                iconLeft,
+                fontSize="12px",
+                lineHeight="16px",
+                textColor="var(--font-grey-color)"
+              )
+                q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
+              q-btn.btn.ml-2(
+                @click="sortPerson(patientsData)",
+                style="color: var(--font-grey-color); background: var(--bg-light-grey)"
+                :style="{ width: '32px', height: '32px'}",
+                padding="0"
+              )
+                img(:src="sort_word")
+            .flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
+              @click="checkAll(patientsData)"
+            )
+              span Все
+              img(v-if="selectAll(patientsData)", :src="icon_ok")
+            .person-wrapper.flex.flex-col
+              .person.items-center.flex.justify-between.py-2.cursor-pointer(
+                v-for="(person, index) in choiceData(patientsData)",
+                @click="checkPerson(index, patientsData)"
+              )
+                .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")
+              .gradient.flex.absolute
 </template>
 
 <script>
@@ -27,21 +91,130 @@ import arrow from "@/assets/icons/double_left_arrow.svg";
 import group from "@/assets/icons/person_group.svg";
 import medcard from "@/assets/icons/medcard.svg";
 import round from "@/assets/icons/status_round.svg";
+import icon_ok from "@/assets/icons/icon_ok.svg";
+import sort_word from "@/assets/icons/sort_word.svg";
+import BaseInput from "@/components/base/BaseInput.vue";
+import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
+import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 
 export default {
   name: "CalendarSidebar",
   props: { openSidebar: Function, createForm: Function },
+  components: { BaseInput },
   data() {
-    return { arrow, group, medcard, round };
+    return {
+      arrow,
+      group,
+      medcard,
+      round,
+      icon_ok,
+      sort_word,
+      patientData: patientData,
+      medicalData: patientList.find((e) => e.label === "Первичная медкарта")
+        .data,
+      patientsData: patientList.find((e) => e.label === "Пациенты").data,
+      foundPerson: "",
+      sortData: [],
+      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.patientsData.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>
 
 <style lang="sass" scoped>
+.sidebar
+  color: var(--font-dark-blue-color)
+
 .button
   width: 72px
   height: 72px
   background: var(--default-white)
   align-items: center
   justify-content: center
+
+.status-wrapper
+  width: 232px
+  height: 188px
+
+.fill-wrapper
+  height: 158px
+  width: 232px
+
+.patient-wrapper
+  width: 232px
+  height: 445px
+  color: var(--font-dark-blue-color)
+
+.status
+  height: 28px
+  width: 100%
+  &:hover
+    height: 28px
+    background: var(--bg-light-grey)
+    cursor: pointer
+
+.person-wrapper
+  overflow-y: auto
+  margin-right: -10px
+  &::-webkit-scrollbar
+    width: 4px
+  &::-webkit-scrollbar-track:vertical
+    margin-top: -48px
+    margin-bottom: 26px
+
+.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)
+
+#input :deep(.q-field__control)
+  height: 32px
+  .q-field__prepend
+    height: 32px
+
+.gradient
+  width: 232px
+  height: 44px
+  right: 0px
+  bottom: 0px
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--default-white) 100%)
 </style>