Merge branch 'ASTRA-109' into 'master'

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

See merge request andrusyakka/urban-couscous!432

src/assets/icons/sort_word.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.76088 3.12494C6.10606 3.12494 6.38588 3.40476 6.38588 3.74994V14.5787L8.55012 12.0898C8.77662 11.8293 9.17139 11.8018 9.43186 12.0283C9.69233 12.2548 9.71988 12.6496 9.49338 12.91L6.23251 16.66C6.1138 16.7966 5.94178 16.8749 5.76088 16.8749C5.57998 16.8749 5.40795 16.7966 5.28925 16.66L2.02838 12.91C1.80188 12.6496 1.82942 12.2548 2.0899 12.0283C2.35037 11.8018 2.74514 11.8293 2.97164 12.0898L5.13588 14.5787V3.74994C5.13588 3.40476 5.4157 3.12494 5.76088 3.12494Z" fill="#9294A7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.729 2.81763C14.9618 2.81763 15.1752 2.94695 15.283 3.15324L18.0222 8.39692C18.1821 8.70287 18.0636 9.08045 17.7577 9.24028C17.4517 9.4001 17.0741 9.28165 16.9143 8.9757L16.0583 7.33701H13.3998L12.5437 8.9757C12.3839 9.28165 12.0063 9.4001 11.7004 9.24028C11.3944 9.08045 11.276 8.70287 11.4358 8.39692L14.175 3.15324C14.2828 2.94695 14.4963 2.81763 14.729 2.81763ZM14.0528 6.08701H15.4053L14.729 4.79246L14.0528 6.08701Z" fill="#9294A7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0513 10.2358C14.8116 10.071 15.6957 10.1295 16.3039 10.2174C16.6114 10.2619 16.8395 10.5254 16.8395 10.836V16.25C16.8395 16.5951 16.5597 16.875 16.2145 16.875C15.8693 16.875 15.5895 16.5951 15.5895 16.25V14.6599L12.9292 16.7421C12.6573 16.9549 12.2645 16.907 12.0518 16.6352C11.839 16.3634 11.8869 15.9705 12.1587 15.7578L14.3578 14.0366C14.2053 14.004 14.054 13.964 13.9078 13.9147C13.5445 13.7921 13.1658 13.5977 12.8743 13.2766C12.5702 12.9416 12.3977 12.5081 12.3977 11.9898C12.3977 11.4732 12.603 11.0528 12.9447 10.7511C13.2645 10.4687 13.6704 10.3184 14.0513 10.2358ZM15.5895 12.9233C15.1533 12.9047 14.6894 12.8591 14.3075 12.7303C14.0626 12.6476 13.8989 12.5455 13.7999 12.4365C13.7136 12.3414 13.6477 12.2111 13.6477 11.9898C13.6477 11.8351 13.6965 11.7548 13.772 11.6881C13.8695 11.6021 14.0441 11.5164 14.3162 11.4574C14.6968 11.3749 15.1581 11.3673 15.5895 11.3973V12.9233Z" fill="#9294A7"/>
+</svg>

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
+    .button.flex.relative
-      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="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>

src/pages/newCalendar/utils/calendarConfig.js

@@ -192,9 +192,9 @@ export const patientData = {
     },
   ],
   statuses: [
-    { name: "Отказ", icon: rejected, check: false },
     { name: "Не принят", icon: not_accepted, check: true },
-    { name: "На приеме", icon: reception, check: false },
     { name: "Принят", icon: accepted, check: false },
+    { name: "Отказ", icon: rejected, check: false },
+    { name: "На приеме", icon: reception, check: false },
   ],
 };

tailwind.config.js

@@ -30,6 +30,7 @@ module.exports = {
         "7xl": ["40px", { lineHeight: "54px" }],
       },
       gap: {
+        "2px": "2px",
         "5px": "5px",
         "6px": "6px",
         "7px": "7px",