From 3530f65987e7bd7085612db1798599ebe0aec225 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Wed, 21 Jun 2023 13:20:19 +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=84=D0=BE=D0=BA=D1=83=D1=81=20=D0=B8=20=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=84?=
 =?UTF-8?q?=D0=BE=D1=80=D0=BC=20=D1=81=D0=B0=D0=B9=D0=B4=D0=B1=D0=B0=D1=80?=
 =?UTF-8?q?=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass                |  1 +
 .../components/CalendarSidebar.vue            | 95 +++++++++++++++----
 .../components/CalendarSidebarSvg.vue         | 36 +++++++
 3 files changed, 112 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/newCalendar/components/CalendarSidebarSvg.vue

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index cee65c9..6c42ce7 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -71,4 +71,5 @@
   --bg-grey-color: rgba(37, 40, 80, 0.15)
   --bg-aqua-blue: #55c5e8
   --bg-status-green: #55CD76
+  --bg-light-blue-color: #E7EDFF
 
diff --git a/src/pages/newCalendar/components/CalendarSidebar.vue b/src/pages/newCalendar/components/CalendarSidebar.vue
index 0d2adcd..dc5c285 100644
--- a/src/pages/newCalendar/components/CalendarSidebar.vue
+++ b/src/pages/newCalendar/components/CalendarSidebar.vue
@@ -11,12 +11,22 @@
     .button.flex    
       q-btn(color="primary", dense, padding="14px", @click="createForm")
         q-icon(name="app:icon-plus", size="12px")
-    .button.flex.relative
-      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'}")
+    .button.flex.relative.btn-sidebar(v-for="svg in arrSvg")
+      q-btn(
+        v-click-outside="hideActive",
+        @click="()=>clickButton(svg.name)",
+        dense,
+        style="color: var(--font-grey-color); borderRadius: 50%", padding="4px"
+      )
+        calendar-sidebar-svg(:name-svg="svg.name", :active="svg.active")
+      .separator.flex.absolute(v-show="!svg.active")
+        .wrapper-mark.flex-col.flex
+          .mark-top.flex
+          .mark-bottom.flex
+        .mark-text.flex {{svg.text}}
+      q-menu(v-if="svg.name === 'round'", 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 Статус приема
+          .font-bold.text-xm {{svg.text}}
           .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",
@@ -24,10 +34,7 @@
             )
               img(:src="status.icon")
               span {{status.name}}
-    .button.flex
-      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'}")
+      q-menu(v-if="svg.name === 'medcard'", 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
@@ -37,10 +44,7 @@
             )
               img(:src="medical.icon")
               span {{medical.name}}
-    .button.flex.rounded-b
-      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'}")
+      q-menu(v-if="svg.name === 'group'", 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'}")
@@ -88,25 +92,20 @@
 
 <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";
 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";
+import CalendarSidebarSvg from "@/pages/newCalendar/components/CalendarSidebarSvg.vue";
 
 export default {
   name: "CalendarSidebar",
   props: { openSidebar: Function, createForm: Function },
-  components: { BaseInput },
+  components: { BaseInput, CalendarSidebarSvg },
   data() {
     return {
       arrow,
-      group,
-      medcard,
-      round,
       icon_ok,
       sort_word,
       patientData: patientData,
@@ -116,9 +115,25 @@ export default {
       foundPerson: "",
       sortData: [],
       sort: false,
+      arrSvg: [
+        { name: "round", text: "Статус приема", active: false },
+        { name: "medcard", text: "Первичная медкарта", active: false },
+        { name: "group", text: "Пациенты", active: false },
+      ],
     };
   },
   methods: {
+    hideActive() {
+      this.arrSvg.forEach((e) => {
+        if (e.active) e.active = false;
+      });
+    },
+    clickButton(name) {
+      this.arrSvg = this.arrSvg.map((e) => {
+        if (e.name === name) return { ...e, active: true };
+        return { ...e, active: false };
+      });
+    },
     trimOwnerName(lastName, firstName, patronymic) {
       let checkedFirstName = firstName !== null ? firstName[0] + "." : "";
       let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
@@ -169,6 +184,11 @@ export default {
   align-items: center
   justify-content: center
 
+.btn-sidebar
+  &:hover
+    & .separator
+      display: flex
+
 .status-wrapper
   width: 232px
   height: 188px
@@ -211,6 +231,41 @@ export default {
   .q-field__prepend
     height: 32px
 
+.separator
+  display: none
+  z-index: 6
+  align-items: center
+  left: 72px
+  width: max-content
+  height: 32px
+
+.wrapper-mark
+  background: var(--font-dark-blue-color)
+
+.mark-top
+  height: 8px
+  width: 8px
+  border-bottom-right-radius: 10px
+  background: #E8E8F3
+
+.mark-bottom
+  background: red
+  border-top-right-radius: 10px
+  width: 8px
+  height: 8px
+  background: #E8E8F3
+
+.mark-text
+  padding: 8px 12px
+  background: var(--font-dark-blue-color)
+  border-radius: 4px
+  color: var(--default-white)
+
+.q-btn
+  transition: color 0.3s cubic-bezier(0.25,0.8,0.5,1), background-color 0.3s cubic-bezier(0.25,0.8,0.5,1)
+  &:hover
+    background: var(--bg-light-blue-color)
+
 .gradient
   width: 232px
   height: 44px
diff --git a/src/pages/newCalendar/components/CalendarSidebarSvg.vue b/src/pages/newCalendar/components/CalendarSidebarSvg.vue
new file mode 100644
index 0000000..834c5ec
--- /dev/null
+++ b/src/pages/newCalendar/components/CalendarSidebarSvg.vue
@@ -0,0 +1,36 @@
+<template lang="pug">
+  svg(:width="configSize[nameSvg].width" :height="configSize[nameSvg].height" :viewBox="`0 0 ${configSize[nameSvg].width} ${configSize[nameSvg].height}`" fill="none" xmlns="http://www.w3.org/2000/svg")
+    g(v-if="nameSvg === 'round'")
+      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="active ? '#4772F2' : '#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="active ? '#4772F2' : '#9294A7'")
+    g(v-if="nameSvg === 'medcard'")
+      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="active ? '#4772F2' : '#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="active ? '#4772F2' : '#9294A7'")
+    g(v-if="nameSvg === 'group'")
+      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="active ? '#4772F2' : '#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="active ? '#4772F2' : '#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="active ? '#4772F2' : '#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="active ? '#4772F2' : '#9294A7'")
+</template>
+
+<script>
+export default {
+  name: "CalendarSidebarSvg",
+  props: {
+    nameSvg: { type: String, default: "round" },
+    active: Boolean,
+  },
+  data() {
+    return {
+      configSize: {
+        round: { width: 40, height: 40 },
+        medcard: { width: 40, height: 40 },
+        group: { width: 33, height: 27 },
+      },
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped></style>