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

src/pages/newCalendar/components/CalendarOpenSidebar.vue

@@ -1,77 +1,77 @@
 <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",
-          dense,
-          padding="8px",
-          style="color: var(--font-grey-color); background: var(--bg-light-grey)"
+    .form.flex.items-center.justify-end.py-4.pr-4.rounded-t
+      q-btn.rotate-180(
+        @click="openSidebar",
+        dense,
+        padding="8px",
+        style="color: var(--font-grey-color); background: var(--bg-light-grey)"
+      )
+        img(:src="arrow")
+    .form.flex.p-4
+      q-btn(
+        color="primary",
+        size="16px",
+        label="Создать запись",
+        no-caps,
+        icon="add",
+        :style="{width: '100%', height: '40px'}",
+        padding="0"
+      )
+    .flex.flex-col.gap-y-1
+      q-expansion-item.expansion.font-bold.text-xm(
+        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(
+          v-if="elem.label !== 'Пациенты'",
+          v-for="item in elem.data"
         )
-          img(:src="arrow")
-      .form.flex.p-4
-        q-btn(
-          color="primary",
-          size="16px",
-          label="Создать запись",
-          no-caps,
-          icon="add",
-          :style="{width: '100%', height: '40px'}",
-          padding="0"
-        )
-      .flex.flex-col.gap-y-1(v-for="elem in patientList")
-        q-expansion-item.expansion.font-bold.text-xm(
-          expand-separator
-          :label="elem.label",
-          :class="{'patient': elem.label === 'Пациенты'}"
-        )
-          .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.pb-0(:class="choiceState()", 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,
+              :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(elem.data)",
+              icon="app:sort-number",
+              :style="{width: '32px', height: '32px'}",
+              padding="0"
+            )
+          .flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
+            @click="checkAll(elem.data)"
           )
-            .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.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(elem.data)",
-                icon="app:sort-number",
-                :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)"
-              )
-                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")
+            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>
@@ -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