From 164a531a5af440ce33ed4699ffb6d8136bc320af Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 25 May 2023 16:45:42 +0300
Subject: [PATCH 1/3] =?UTF-8?q?WIP=20=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D1=81=D0=B0=D0=B9=D0=B4=D0=B1=D0=B0=D1=80=20?=
 =?UTF-8?q?=D0=BF=D1=80=D0=B8=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LoggedInLayout.vue             |  4 +-
 src/components/TheSidebar.vue                 | 18 +++------
 src/components/base/BaseSidebarButton.vue     |  8 +---
 src/pages/clients/components/ClientsTable.vue |  2 +-
 .../clients/components/ClientsWrapper.vue     |  4 +-
 src/pages/newCalendar/TheCalendar.vue         | 11 ++---
 .../newCalendar/components/CalendarHeader.vue | 40 +++++++++++++++++++
 .../components/CalendarWrapper.vue            | 16 ++++++++
 src/pages/newMedicalCard/TheMedicalCard.vue   |  2 +-
 .../components/MedicalBaseInfo.vue            |  6 +--
 10 files changed, 76 insertions(+), 35 deletions(-)
 create mode 100644 src/pages/newCalendar/components/CalendarHeader.vue
 create mode 100644 src/pages/newCalendar/components/CalendarWrapper.vue

diff --git a/src/components/LoggedInLayout.vue b/src/components/LoggedInLayout.vue
index 821bb72..e2f256e 100644
--- a/src/components/LoggedInLayout.vue
+++ b/src/components/LoggedInLayout.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.w-full.h-full.gap-y-2
+  .flex.flex-col.w-full.h-full.gap-y-2.pb-2
     the-header(
       :url="url",
       :is-open-form="isOpenForm",
@@ -61,5 +61,5 @@ export default {
 </script>
 <style lang="sass" scoped>
 .page-wrapper
-  height: calc(100vh - 56px - 8px)
+  height: calc(100vh - 56px - 16px)
 </style>
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index fc5c839..6a0b53e 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-  .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border(:style="bordersStyle")
-    .flex.flex-col.gap-y-6
+  .sidebar.flex.flex-col.justify-between.flex-auto.pt-4.px-2.pb-7.rounded
+    .flex.flex-col.gap-y-4
       base-button-sidebar(
         v-for="button in pageSettings.filter((el) => el.id !== 'settings')",
         :path="button.path",
@@ -8,7 +8,7 @@
         :active="button.active",
         :change-style-page="changeStylePage"
       )
-        q-icon(:name="`app:${button.icon}`", size="36px")
+        q-icon(:name="`app:${button.icon}`", size="25px")
     .flex.text-4xl.flex-col.gap-y-6
       base-button-sidebar(
         :path="getSettings.path",
@@ -16,7 +16,7 @@
         :active="getSettings.active",
         :change-style-page="changeStylePage"
       )
-        q-icon(:name="`app:${getSettings.icon}`", size="36px")
+        q-icon(:name="`app:${getSettings.icon}`", size="25px")
 </template>
 
 <script>
@@ -63,12 +63,6 @@ export default {
     getSettings() {
       return this.pageSettings.find((el) => el.id === "settings");
     },
-    bordersStyle() {
-      return {
-        "border-top-right-radius": this.currentPageBorder ? "0px" : "4px",
-        //"border-bottom-right-radius": this.currentPageBorder ? "0px" : "4px",
-      };
-    },
   },
   mounted() {
     let href = window.location.href.slice(22);
@@ -93,7 +87,7 @@ export default {
 
 <style lang="sass" scoped>
 .sidebar
-  max-width: 80px
-  min-width: 80px
+  max-width: 64px
+  min-width: 64px
   background-color: var(--default-white)
 </style>
diff --git a/src/components/base/BaseSidebarButton.vue b/src/components/base/BaseSidebarButton.vue
index 3572d6d..cc8d68e 100644
--- a/src/components/base/BaseSidebarButton.vue
+++ b/src/components/base/BaseSidebarButton.vue
@@ -1,11 +1,11 @@
 <template lang="pug">
   q-btn(
-    padding="14px 14px 14px 10px",
-    style="width: 76px"
+    style="width: 48px; height: 48px"
     :class="checkActive",
     :href="path",
     :id="id",
     @click="(e) => changeStylePage(e)"
+    rounded
   )
     slot
 </template>
@@ -35,14 +35,10 @@ export default {
 <style lang="sass" scoped>
 .button
   background-color: trnsparent
-  border-radius: 0 4px 4px 0
-  border-left: 4px solid transparent
 .active
   background-color: var(--btn-blue-color-1)
-  border-left-color: var(--btn-blue-color)
   color: var(--btn-blue-color)
 .button:hover
   background-color: var(--btn-blue-color-1)
-  border-left-color: var(--btn-blue-color)
   color: var(--btn-blue-color)
 </style>
diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue
index 5fe5d6a..99161e6 100644
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -325,7 +325,7 @@ export default {
 <style lang="sass" scoped>
 .wrapper-table
   background-color: var(--default-white)
-  height: calc(100vh - 64px)
+  height: calc(100vh - 72px)
 .table-container
   overflow: auto
   &::-webkit-scrollbar
diff --git a/src/pages/clients/components/ClientsWrapper.vue b/src/pages/clients/components/ClientsWrapper.vue
index 9350301..deda980 100644
--- a/src/pages/clients/components/ClientsWrapper.vue
+++ b/src/pages/clients/components/ClientsWrapper.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .wrapper.flex.w-full.relative
+  .wrapper.flex.w-full.relative.rounded
     clients-table(
       :open-form="openForm",
       :is-open-form="isOpenForm",
@@ -33,6 +33,4 @@ export default {
 <style lang="sass" scoped>
 .wrapper
   overflow: auto
-  border-top-left-radius: 4px
-  border-top-right-radius: 4px
 </style>
diff --git a/src/pages/newCalendar/TheCalendar.vue b/src/pages/newCalendar/TheCalendar.vue
index cf00915..ce0caab 100644
--- a/src/pages/newCalendar/TheCalendar.vue
+++ b/src/pages/newCalendar/TheCalendar.vue
@@ -1,16 +1,18 @@
 <template lang="pug">
-  .calendar-container.flex
+  .w-full.flex.gap-x-2
     calendar-open-sidebar(v-if="isOpen", :open-sidebar="openSidebar")
     calendar-sidebar(v-else, :open-sidebar="openSidebar")
+    calendar-wrapper
 </template>
 
 <script>
 import CalendarSidebar from "@/pages/newCalendar/components/CalendarSidebar";
 import CalendarOpenSidebar from "@/pages/newCalendar/components/CalendarOpenSidebar";
+import CalendarWrapper from "@/pages/newCalendar/components/CalendarWrapper";
 
 export default {
   name: "TheCalendar",
-  components: { CalendarSidebar, CalendarOpenSidebar },
+  components: { CalendarSidebar, CalendarOpenSidebar, CalendarWrapper },
   data() {
     return {
       isOpen: false,
@@ -23,8 +25,3 @@ export default {
   },
 };
 </script>
-
-<style lang="sass" scoped>
-.calendar-container
-  width: calc(100vw - 80px)
-</style>
diff --git a/src/pages/newCalendar/components/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue
new file mode 100644
index 0000000..1c400c6
--- /dev/null
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -0,0 +1,40 @@
+<template lang="pug">
+  .calendar-header-wrapper.w-full.flex.items-center.justify-between.py-4.pl-4.pr-6
+</template>
+
+<script>
+export default {
+  name: "CalendarHeader",
+};
+</script>
+
+<style lang="sass" scoped>
+.calendar-header-wrapper
+  background-color: var(--default-white)
+  height: 72px
+  border-radius: 4px
+  z-index: 10
+
+.left-arrow
+  padding: 3px 4px 0 4px !important
+  transform: rotate(90deg)
+
+.right-arrow
+  padding: 3px 4px 0 4px !important
+  transform: rotate(270deg)
+
+.text
+  color: var(--font-dark-blue-color)
+
+.today
+  opacity: 0.5
+
+.bg-blue-grey-1
+  background: var(--bg-light-grey) !important
+
+.q-btn--round
+  width: 32px !important
+  height: 32px !important
+  min-width: 32px !important
+  min-height: 32px !important
+</style>
diff --git a/src/pages/newCalendar/components/CalendarWrapper.vue b/src/pages/newCalendar/components/CalendarWrapper.vue
new file mode 100644
index 0000000..ecf2f24
--- /dev/null
+++ b/src/pages/newCalendar/components/CalendarWrapper.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  calendar-header.flex-1   
+</template>
+
+<script>
+import CalendarHeader from "@/pages/newCalendar/components/CalendarHeader";
+export default {
+  name: "CalendarWrapper",
+  components: { CalendarHeader },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/pages/newMedicalCard/TheMedicalCard.vue b/src/pages/newMedicalCard/TheMedicalCard.vue
index 9af60a6..5606bbe 100644
--- a/src/pages/newMedicalCard/TheMedicalCard.vue
+++ b/src/pages/newMedicalCard/TheMedicalCard.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .w-full.h-full
+  .w-full.h-full.flex.flex-col
     .flex.w-full.gap-x-2.pb-2
       medical-header(
         v-model="currentMenuItem",
diff --git a/src/pages/newMedicalCard/components/MedicalBaseInfo.vue b/src/pages/newMedicalCard/components/MedicalBaseInfo.vue
index 218573e..b4d6aba 100644
--- a/src/pages/newMedicalCard/components/MedicalBaseInfo.vue
+++ b/src/pages/newMedicalCard/components/MedicalBaseInfo.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .base-info-wrapper.w-full.flex.gap-x-2
+  .base-info-wrapper.w-full.flex.gap-x-2.flex-1
     medical-sidebar(v-model="currentMenuItem")
     component(
       v-if="currentMenuItem",
@@ -31,6 +31,6 @@ export default {
 </script>
 <style lang="sass" scoped>
 .base-info-wrapper
-  height: 79.7%
-  max-height: calc(100% - 190px - 16px)
+  height: 80.4%
+  max-height: calc(100% - 190px - 8px)
 </style>

From 93e4c93a96ae94cb59c912db16956a63abe19901 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 26 May 2023 14:51:21 +0300
Subject: [PATCH 2/3] =?UTF-8?q?WIP=20=D0=9D=D0=B0=D0=B1=D1=80=D0=BE=D1=81?=
 =?UTF-8?q?=D0=B0=D0=BB=D0=B0=20=D1=85=D0=B5=D0=B4=D0=B5=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../newCalendar/components/CalendarHeader.vue | 81 ++++++++++++++++---
 1 file changed, 69 insertions(+), 12 deletions(-)

diff --git a/src/pages/newCalendar/components/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue
index 1c400c6..616d0eb 100644
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -1,10 +1,69 @@
 <template lang="pug">
-  .calendar-header-wrapper.w-full.flex.items-center.justify-between.py-4.pl-4.pr-6
+  .calendar-header-wrapper.w-full.flex.items-center.p-4.justify-between
+    base-input(
+      iconLeft,
+      outlined,
+      :width="280",
+      placeholder="Найти ...",
+      fontSize="16px",
+      lineHeight="19px"
+    )
+      q-icon(name="app:icon-search", size="20px")
+    .flex.gap-x-4.items-center.justify-center
+      q-btn(
+        color="secondary",
+        round,
+        size="14px",
+        dense,
+        icon="arrow_back_ios_new",
+        text-color="primary",
+        padding="2px 11px 2px 8px"
+      )
+      base-input(
+        outlined,
+        :width="300",
+        fontSize="16px",
+        lineHeight="19px"
+      )
+        q-icon.text(name="app:calendar", size="20px")
+      q-btn(
+        color="secondary",
+        icon="arrow_forward_ios",
+        round,
+        size="14px",
+        text-color="primary",
+        dense
+      ) 
+    .h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color
+      q-btn-toggle(
+        v-model="displayType",
+        :options="displayTypesList",
+        no-caps,
+        toggle-color="light-blue-4",
+        padding="4px"
+      )
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput";
 export default {
   name: "CalendarHeader",
+  components: { BaseInput },
+  data() {
+    return {
+      displayType: "collapsed",
+      displayTypesList: [
+        {
+          label: "col",
+          value: "collapsed",
+        },
+        {
+          label: "exp",
+          value: "expanded",
+        },
+      ],
+    };
+  },
 };
 </script>
 
@@ -15,21 +74,16 @@ export default {
   border-radius: 4px
   z-index: 10
 
-.left-arrow
-  padding: 3px 4px 0 4px !important
-  transform: rotate(90deg)
-
-.right-arrow
-  padding: 3px 4px 0 4px !important
-  transform: rotate(270deg)
-
 .text
   color: var(--font-dark-blue-color)
 
-.today
-  opacity: 0.5
+.text-grey-color
+  color: var(--font-grey-color)
 
-.bg-blue-grey-1
+.text-primary
+  color: var(--font-dark-blue-color-0) !important
+
+.bg-secondary
   background: var(--bg-light-grey) !important
 
 .q-btn--round
@@ -37,4 +91,7 @@ export default {
   height: 32px !important
   min-width: 32px !important
   min-height: 32px !important
+
+.q-btn-group :deep(.q-btn-item)
+  border-radius: 4px !important
 </style>

From 7670ab5a991370d246cada46d50c384dde9bbf5a Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 26 May 2023 17:10:46 +0300
Subject: [PATCH 3/3] =?UTF-8?q?WIP=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20date=20picker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseInput.vue             |  5 ++++-
 .../newCalendar/components/CalendarHeader.vue | 20 +++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 75d9f4f..fbd8b25 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -31,7 +31,9 @@
     )
       template(v-slot:prepend, v-if="iconLeft")
         slot
-      slot.cursor-pointer(v-if="!iconLeft")
+      template(v-slot:append, v-if="iconRight")
+        slot
+      slot.cursor-pointer(v-if="!iconLeft && !iconRight")
 </template>
 
 <script>
@@ -112,6 +114,7 @@ export default {
     label: String,
     readonly: Boolean,
     iconLeft: Boolean,
+    iconRight: Boolean,
     name: String,
   },
   emits: ["update:modelValue"],
diff --git a/src/pages/newCalendar/components/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue
index 616d0eb..a420d50 100644
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -23,9 +23,23 @@
         outlined,
         :width="300",
         fontSize="16px",
-        lineHeight="19px"
+        lineHeight="19px",
+        iconRight
       )
         q-icon.text(name="app:calendar", size="20px")
+          q-popup-proxy(
+            cover,
+            transition-show="scale",
+            transition-hide="scale"
+          )
+              q-date(v-model="date", minimal)
+                .flex.items-center.justify-end
+                  q-btn(
+                    v-close-popup,
+                    label="Закрыть",
+                    color="primary",
+                    flat
+                  )
       q-btn(
         color="secondary",
         icon="arrow_forward_ios",
@@ -34,7 +48,7 @@
         text-color="primary",
         dense
       ) 
-    .h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color
+    .h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52
       q-btn-toggle(
         v-model="displayType",
         :options="displayTypesList",
@@ -46,6 +60,7 @@
 
 <script>
 import BaseInput from "@/components/base/BaseInput";
+import * as moment from "moment/moment";
 export default {
   name: "CalendarHeader",
   components: { BaseInput },
@@ -62,6 +77,7 @@ export default {
           value: "expanded",
         },
       ],
+      date: moment(),
     };
   },
 };