From 7213b8be2e1fd2b1e1bea6ca36f8066dc3222b82 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Thu, 25 May 2023 17:59:43 +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=D1=81=D0=B0=D0=B9=D0=B4=D0=B1=D0=B0=D1=80=20=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5=20?=
 =?UTF-8?q?=D0=BA=D0=B0=D0=BB=D0=B5=D0=BD=D0=B4=D0=B0=D1=80=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/double_left_arrow.svg        |  4 ++
 src/assets/icons/medcard.svg                  |  6 ++
 src/assets/icons/person_group.svg             |  8 +++
 src/assets/icons/status_round.svg             |  6 ++
 src/pages/newCalendar/TheCalendar.vue         | 19 +++++-
 .../components/CalendarOpenSidebar.vue        | 65 +++++++++++++++++++
 .../components/CalendarSidebar.vue            | 47 ++++++++++++++
 .../components/calendarSidebar.vue            | 11 ----
 .../Forms/MedicalFormTag.vue                  |  1 -
 9 files changed, 152 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/icons/double_left_arrow.svg
 create mode 100644 src/assets/icons/medcard.svg
 create mode 100644 src/assets/icons/person_group.svg
 create mode 100644 src/assets/icons/status_round.svg
 create mode 100644 src/pages/newCalendar/components/CalendarOpenSidebar.vue
 create mode 100644 src/pages/newCalendar/components/CalendarSidebar.vue
 delete mode 100644 src/pages/newCalendar/components/calendarSidebar.vue

diff --git a/src/assets/icons/double_left_arrow.svg b/src/assets/icons/double_left_arrow.svg
new file mode 100644
index 0000000..caedef1
--- /dev/null
+++ b/src/assets/icons/double_left_arrow.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7197 16.2197C11.4268 16.5126 11.4268 16.9874 11.7197 17.2803C12.0126 17.5732 12.4874 17.5732 12.7803 17.2803L17.7803 12.2803C18.0732 11.9874 18.0732 11.5126 17.7803 11.2197L12.7803 6.21967C12.4874 5.92678 12.0126 5.92678 11.7197 6.21967C11.4268 6.51256 11.4268 6.98744 11.7197 7.28033L16.1893 11.75L11.7197 16.2197Z" fill="#9294A7"/>
+<path d="M6.71967 16.2197C6.42678 16.5126 6.42678 16.9874 6.71967 17.2803C7.01256 17.5732 7.48744 17.5732 7.78033 17.2803L12.7803 12.2803C13.0732 11.9874 13.0732 11.5126 12.7803 11.2197L7.78033 6.21967C7.48744 5.92678 7.01256 5.92678 6.71967 6.21967C6.42678 6.51256 6.42678 6.98744 6.71967 7.28033L11.1893 11.75L6.71967 16.2197Z" fill="#9294A7"/>
+</svg>
diff --git a/src/assets/icons/medcard.svg b/src/assets/icons/medcard.svg
new file mode 100644
index 0000000..f654dc6
--- /dev/null
+++ b/src/assets/icons/medcard.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.221 7.30769C14.4088 6.00296 15.5381 5 16.9032 5H23.0968C24.4619 5 25.5912 6.00296 25.779 7.30769H29.2903C30.7868 7.30769 32 8.51308 32 10V32.3077C32 33.7946 30.7868 35 29.2903 35H10.7097C9.21316 35 8 33.7946 8 32.3077V10C8 8.51308 9.21316 7.30769 10.7097 7.30769H14.221ZM14.221 9.61538H10.7097C10.4959 9.61538 10.3226 9.78758 10.3226 10V32.3077C10.3226 32.5201 10.4959 32.6923 10.7097 32.6923H29.2903C29.5041 32.6923 29.6774 32.5201 29.6774 32.3077V10C29.6774 9.78758 29.5041 9.61538 29.2903 9.61538H25.779C25.5912 10.9201 24.4619 11.9231 23.0968 11.9231H16.9032C15.5381 11.9231 14.4088 10.9201 14.221 9.61538ZM16.9032 7.30769C16.6894 7.30769 16.5161 7.47989 16.5161 7.69231V9.23077C16.5161 9.44319 16.6894 9.61538 16.9032 9.61538H23.0968C23.3106 9.61538 23.4839 9.44319 23.4839 9.23077V7.69231C23.4839 7.47989 23.3106 7.30769 23.0968 7.30769H16.9032Z" fill="#9294A7"/>
+<path d="M10.7097 9.61538H14.221C14.4088 10.9201 15.5381 11.9231 16.9032 11.9231H23.0968C24.4619 11.9231 25.5912 10.9201 25.779 9.61538H29.2903C29.5041 9.61538 29.6774 9.78758 29.6774 10V32.3077C29.6774 32.5201 29.5041 32.6923 29.2903 32.6923H10.7097C10.4959 32.6923 10.3226 32.5201 10.3226 32.3077V10C10.3226 9.78758 10.4959 9.61538 10.7097 9.61538Z" fill="#9294A7"/>
+</g>
+</svg>
diff --git a/src/assets/icons/person_group.svg b/src/assets/icons/person_group.svg
new file mode 100644
index 0000000..700f57c
--- /dev/null
+++ b/src/assets/icons/person_group.svg
@@ -0,0 +1,8 @@
+<svg width="33" height="27" viewBox="0 0 33 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 23.6157C0 20.3869 2.6735 17.7695 5.97143 17.7695H16.0286C19.3265 17.7695 22 20.3869 22 23.6157V24.8464C22 26.036 21.015 27.0003 19.8 27.0003H2.2C0.984974 27.0003 0 26.036 0 24.8464V23.6157Z" fill="#9294A7"/>
+<path d="M17.1272 8.68044C17.1272 12.0644 14.3839 14.8077 11 14.8077C7.616 14.8077 4.87275 12.0644 4.87275 8.68044C4.87275 5.29647 7.616 2.55322 11 2.55322C14.3839 2.55322 17.1272 5.29647 17.1272 8.68044Z" fill="#9294A7"/>
+<g opacity="0.6">
+<path d="M20.3457 12.077H27.66C30.0584 12.077 32.0028 14.04 32.0028 16.4616V17.3847C32.0028 18.2768 31.2865 19.0001 30.4028 19.0001H23.6888C22.357 16.8586 20.129 15.3317 17.5488 14.8961C18.2892 14.1192 18.8898 13.2091 19.3081 12.2029C19.6406 12.1206 19.9881 12.077 20.3457 12.077Z" fill="#9294A7"/>
+<path d="M24.0677 9.83683C26.5477 9.83683 28.5582 7.82634 28.5582 5.34627C28.5582 2.8662 26.5477 0.855713 24.0677 0.855713C21.5876 0.855713 19.5771 2.8662 19.5771 5.34627C19.5771 7.82634 21.5876 9.83683 24.0677 9.83683Z" fill="#9294A7"/>
+</g>
+</svg>
diff --git a/src/assets/icons/status_round.svg b/src/assets/icons/status_round.svg
new file mode 100644
index 0000000..9d876b8
--- /dev/null
+++ b/src/assets/icons/status_round.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6">
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M7.5 20C7.5 26.9036 13.0964 32.5 20 32.5C26.9036 32.5 32.5 26.9036 32.5 20C32.5 13.0964 26.9036 7.5 20 7.5C13.0964 7.5 7.5 13.0964 7.5 20ZM20 5C11.7157 5 5 11.7157 5 20C5 28.2843 11.7157 35 20 35C28.2843 35 35 28.2843 35 20C35 11.7157 28.2843 5 20 5Z" fill="#9294A7"/>
+<path d="M10 20C10 14.4772 14.4772 10 20 10C25.5228 10 30 14.4772 30 20C30 25.5228 25.5228 30 20 30C14.4772 30 10 25.5228 10 20Z" fill="#9294A7"/>
+</g>
+</svg>
diff --git a/src/pages/newCalendar/TheCalendar.vue b/src/pages/newCalendar/TheCalendar.vue
index 371ff47..cf00915 100644
--- a/src/pages/newCalendar/TheCalendar.vue
+++ b/src/pages/newCalendar/TheCalendar.vue
@@ -1,13 +1,26 @@
 <template lang="pug">
   .calendar-container.flex
-    calendar-sidebar
+    calendar-open-sidebar(v-if="isOpen", :open-sidebar="openSidebar")
+    calendar-sidebar(v-else, :open-sidebar="openSidebar")
 </template>
 
 <script>
-import CalendarSidebar from "@/pages/newCalendar/components/calendarSidebar.vue";
+import CalendarSidebar from "@/pages/newCalendar/components/CalendarSidebar";
+import CalendarOpenSidebar from "@/pages/newCalendar/components/CalendarOpenSidebar";
 
 export default {
-  components: { CalendarSidebar },
+  name: "TheCalendar",
+  components: { CalendarSidebar, CalendarOpenSidebar },
+  data() {
+    return {
+      isOpen: false,
+    };
+  },
+  methods: {
+    openSidebar() {
+      this.isOpen = !this.isOpen;
+    },
+  },
 };
 </script>
 
diff --git a/src/pages/newCalendar/components/CalendarOpenSidebar.vue b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
new file mode 100644
index 0000000..e1fbbcc
--- /dev/null
+++ b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
@@ -0,0 +1,65 @@
+<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
+      q-expansion-item.expansion.font-bold.text-xm(
+        expand-separator
+        label="Статус приема"
+      )
+        .flex.flex-col.font-medium.text-smm.p-4.pt-2
+          .flex Не принят
+          .flex Принят
+          .flex Отказ
+          .flex На приеме
+      q-expansion-item.expansion.font-bold.text-xm(
+        expand-separator
+        label="Первичная медкарта"
+      )
+      q-expansion-item.expansion.font-bold.text-xm(
+        expand-separator
+        label="Пациенты"
+      )
+</template>
+
+<script>
+import arrow from "@/assets/icons/double_left_arrow.svg";
+export default {
+  name: "CalendarOpenSidebar",
+  props: { openSidebar: Function },
+  data() {
+    return { arrow };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.sidebar
+  width: 232px
+
+.form
+  background: var(--default-white)
+  width: 100%
+  height: 72px
+
+.expansion
+  background: var(--default-white)
+  border-radius: 4px
+  color: var(--font-dark-blue-color)
+</style>
diff --git a/src/pages/newCalendar/components/CalendarSidebar.vue b/src/pages/newCalendar/components/CalendarSidebar.vue
new file mode 100644
index 0000000..1d9443d
--- /dev/null
+++ b/src/pages/newCalendar/components/CalendarSidebar.vue
@@ -0,0 +1,47 @@
+<template lang="pug">
+  .flex.flex-col.gap-y-1
+    .button.flex.rounded-t
+      q-btn(
+        @click="openSidebar",
+        dense,
+        padding="8px",
+        style="color: var(--font-grey-color); background: var(--bg-light-grey)"
+      )
+        img(:src="arrow")
+    .button.flex      
+      q-btn(color="primary", dense, padding="14px")
+        q-icon(name="app:icon-plus", size="12px")
+    .button.flex
+      q-btn(dense, style="color: var(--font-grey-color)", padding="0px")
+        img(:src="round")
+    .button.flex
+      q-btn(dense, style="color: var(--font-grey-color)", padding="0px")
+        img(:src="medcard")
+    .button.flex.rounded-b
+      q-btn(dense, style="color: var(--font-grey-color)", padding="6.5px 3.5px")
+        img(:src="group")
+</template>
+
+<script>
+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";
+
+export default {
+  name: "CalendarSidebar",
+  props: { openSidebar: Function },
+  data() {
+    return { arrow, group, medcard, round };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.button
+  width: 72px
+  height: 72px
+  background: var(--default-white)
+  align-items: center
+  justify-content: center
+</style>
diff --git a/src/pages/newCalendar/components/calendarSidebar.vue b/src/pages/newCalendar/components/calendarSidebar.vue
deleted file mode 100644
index 111cb2a..0000000
--- a/src/pages/newCalendar/components/calendarSidebar.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template lang="pug">
-
-</template>
-
-<script>
-export default {
-  name: "CalendarSidebar",
-};
-</script>
-
-<style lang="sass" scoped></style>
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
index 6dc1467..8df2a43 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
@@ -50,7 +50,6 @@
           .flex.h-10.w-10.absolute.right-4.bottom-4
             q-btn(color="primary", dense, padding="4px 12px")
               q-icon(name="app:icon-plus", size="17px")
-
     .flex(v-if="data.title === 'Осмотр полости рта' && (fillInspection || change)", :style="{color: 'var(--btn-blue-color)'}")
       q-btn(no-caps, flat padding="2px 4px")
         q-icon(left, name="app:plus", size="11px")