From 3424b0bb269e70874570bce90abe9d5d7e006b57 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Wed, 31 May 2023 17:40:52 +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=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D1=8E=20?=
 =?UTF-8?q?=D1=81=D0=B0=D0=B9=D0=B4=D0=B1=D0=B0=D1=80=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/newCalendar/TheCalendar.vue         |  18 ++-
 .../components/CalendarOpenSidebar.vue        | 144 +++++++++---------
 2 files changed, 87 insertions(+), 75 deletions(-)

diff --git a/src/pages/newCalendar/TheCalendar.vue b/src/pages/newCalendar/TheCalendar.vue
index f892637..f282501 100644
--- a/src/pages/newCalendar/TheCalendar.vue
+++ b/src/pages/newCalendar/TheCalendar.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
   .w-full.flex.gap-x-2
-    calendar-open-sidebar(v-if="isOpen", :open-sidebar="openSidebar")
-    calendar-sidebar(v-else, :open-sidebar="openSidebar")
+    calendar-open-sidebar(:class="{'close': !isOpen, 'active': isOpen}" :open-sidebar="openSidebar")
+    calendar-sidebar.-ml-2(v-if="!isOpen", :open-sidebar="openSidebar")
     calendar-wrapper
 </template>
 
@@ -27,3 +27,17 @@ export default {
   },
 };
 </script>
+
+<style lang="sass" scoped>
+.close
+  opacity: 0
+  width: 0px
+  height: 0
+  transition: opacity 0.2s, width 0.3s
+
+.active
+  opacity: 1
+  width: 232px
+  height: 100%
+  transition: opacity 0.5s, width 0.3s
+</style>
diff --git a/src/pages/newCalendar/components/CalendarOpenSidebar.vue b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
index c770131..3123d15 100644
--- a/src/pages/newCalendar/components/CalendarOpenSidebar.vue
+++ b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
@@ -1,76 +1,77 @@
 <template lang="pug">
-  .sidebar.flex.flex-col.gap-y-1
-    .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(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"
+  .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)"
         )
-          .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)"
+          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(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)"
               )
-                .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")
+                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")
 </template>
 
 <script>
@@ -137,9 +138,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.sidebar
-  width: 232px
-
 .form
   background: var(--default-white)
   width: 100%