[WIP] Добавил адаптив на форму пациентов

src/pages/newCalendar/TheCalendar.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .w-full.flex.gap-x-2
-    calendar-open-sidebar(:class="{'close': !isOpen, 'active': isOpen}" :open-sidebar="openSidebar")
+    calendar-open-sidebar.close(:class="{'active': isOpen}", :open-sidebar="openSidebar")
     calendar-sidebar.-ml-2(v-if="!isOpen", :open-sidebar="openSidebar")
     calendar-wrapper
 </template>

src/pages/newCalendar/components/CalendarOpenSidebar.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
   .flex.flex-col.gap-y-1
-    .item.flex.flex-col
     .form.flex.items-center.justify-end.py-4.pr-4.rounded-t
       q-btn.rotate-180(
         @click="openSidebar",
@@ -19,10 +18,12 @@
         :style="{width: '100%', height: '40px'}",
         padding="0"
       )
-      .flex.flex-col.gap-y-1(v-for="elem in patientList")
+    .flex.flex-col.gap-y-1
       q-expansion-item.expansion.font-bold.text-xm(
-          expand-separator
+        v-for="(elem, index) in patientList",
+        expand-separator,
         :label="elem.label",
+        @click="choiceForm(elem.choice, index)",
         :class="{'patient': elem.label === 'Пациенты'}"
       )
         .select.flex.flex-col.font-medium.text-smm.px-4(
@@ -32,7 +33,7 @@
           .status.flex.items-center.gap-x-1.px-2
             img(:src="item.icon")
             span {{item.name}}
-          .flex.flex-col.p-4.pb-0(v-else)
+        .flex.flex-col.p-4.pb-0(:class="choiceState()", v-else)
           .flex.h-8.w-full.items-center.justify-between
             base-input(
               v-model="foundPerson",
@@ -55,7 +56,6 @@
               :style="{width: '32px', height: '32px'}",
               padding="0"
             )
-            .flex.flex-col
           .flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
             @click="checkAll(elem.data)"
           )
@@ -96,6 +96,22 @@ export default {
     };
   },
   methods: {
+    choiceState() {
+      let num = 0;
+      this.patientList.forEach((e) => {
+        if (e.choice) num += 1;
+      });
+      return {
+        one: num === 1,
+        two: num === 2,
+        three: num === 3,
+      };
+    },
+    choiceForm(choice, idx) {
+      if (choice)
+        return (this.patientList.find((e) => e.id === idx).choice = false);
+      this.patientList.find((e) => e.id === idx).choice = true;
+    },
     trimOwnerName(lastName, firstName, patronymic) {
       let checkedFirstName = firstName !== null ? firstName[0] + "." : "";
       let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
@@ -138,12 +154,22 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.one
+  max-height: calc(100vh - 394px)
+
+.two
+  max-height: calc(100vh - 498px)
+
+.three
+  max-height: calc(100vh - 632px)
+
 .form
   background: var(--default-white)
   width: 100%
   height: 72px
 
 .expansion
+  height: 54px
   background: var(--default-white)
   border-radius: 4px
   color: var(--font-dark-blue-color)
@@ -162,6 +188,7 @@ export default {
 
 .q-expansion-item
   border-radius: 0
+  height: 100%
 
 .q-expansion-item :deep(.q-separator)
   display: none
@@ -187,15 +214,17 @@ export default {
 .text
   color: var(--font-grey-color)
 
+.q-expansion-item :deep(.q-item)
+  height: 54px
+
 .person-wrapper
-  height: 272px
   overflow-y: auto
   margin-right: -10px
   &::-webkit-scrollbar
     width: 4px
   &::-webkit-scrollbar-track:vertical
     margin-top: -26px
-    margin-bottom: 8px
+    margin-bottom: 26px
 
 .person
   height: 56px

src/pages/newCalendar/utils/calendarConfig.js

@@ -10,23 +10,28 @@ import not_filled from "@/assets/icons/medcard_not_filled.svg";
 export const patientList = [
   {
     label: "Статус приема",
+    id: 0,
     data: [
       { name: "Не принят", icon: not_accepted },
       { name: "Принят", icon: accepted },
       { name: "Отказ", icon: rejected },
       { name: "На приеме", icon: reception },
     ],
+    choice: false,
   },
   {
     label: "Первичная медкарта",
+    id: 1,
     data: [
       { name: "Не заполнена", icon: not_filled },
       { name: "Частично заполнена", icon: partially_filled },
       { name: "Заполнена", icon: filled },
     ],
+    choice: false,
   },
   {
     label: "Пациенты",
+    id: 2,
     data: [
       {
         id: 0,
@@ -128,5 +133,6 @@ export const patientList = [
         check: false,
       },
     ],
+    choice: false,
   },
 ];