Исправил позиционирование всплывающих окон, ограничение года календаря, бордеры сайдбара, фикс карточек ивентов, изменил стили карточки клиента

src/components/LoggedInLayout.vue

@@ -1,9 +1,14 @@
 <template lang="pug">
 .flex.flex-col.w-full.h-full.gap-y-2
-    the-header(:is-open-form="isOpenForm", :close-form="closeForm", :open-form="openForm")
+    the-header(
+      :is-open-form="isOpenForm",
+      :close-form="closeForm",
+      :open-form="openForm",
+      :current-year="currentYear"
+    )
     .flex.flex-auto
       the-sidebar
-      router-view(:open-form="openForm")
+      router-view(:open-form="openForm", :current-year="currentYear")
 </template>
 
 <script>
@@ -16,6 +21,7 @@ export default {
   data() {
     return {
       isOpenForm: false,
+      currentYear: null,
     };
   },
   methods: {
@@ -25,6 +31,12 @@ export default {
     closeForm() {
       this.isOpenForm = false;
     },
+    printCurrentYear() {
+      return new Date().getFullYear();
+    },
+  },
+  mounted: function () {
+    this.currentYear = this.printCurrentYear();
   },
 };
 </script>

src/components/TheHeader.vue

@@ -1,6 +1,10 @@
 <template lang="pug">
   .header-wrapper.relative.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
-    base-client-form-create(v-if="isOpenForm", :close-form="closeForm")
+    base-client-form-create(
+      v-if="isOpenForm",
+      :close-form="closeForm",
+      :current-year="currentYear"
+    )
     .flex.items-center.box-border.cursor-pointer.mr-auto
       img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
       header-inputs
@@ -38,6 +42,7 @@ export default {
     openForm: Function,
     closeForm: Function,
     isOpenForm: Boolean,
+    currentYear: Number,
   },
   data() {
     return {

src/components/TheSidebar.vue

@@ -1,10 +1,23 @@
 <template lang="pug">
-  .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border
+  .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border(
+    :style="{borderTopRightRadius: this.currenPageBorder ? '0px' : '4px'}"
+  )
     .flex.flex-col.gap-y-6
-      the-button-sidebar( v-for="button in pageSettings.filter((el) => el.id !== 'settings')" :path="button.path" :id="button.id" :active="button.active" :change-style-page="changeStylePage")
+      the-button-sidebar(
+        v-for="button in pageSettings.filter((el) => el.id !== 'settings')",
+        :path="button.path",
+        :id="button.id",
+        :active="button.active",
+        :change-style-page="changeStylePage"
+      )
         .icon(:class="button.icon")
     .flex.text-4xl.flex-col.gap-y-6
-      the-button-sidebar(:path="getSettings.path" :id="getSettings.id" :active="getSettings.active" :change-style-page="changeStylePage")
+      the-button-sidebar(
+        :path="getSettings.path",
+        :id="getSettings.id",
+        :active="getSettings.active",
+        :change-style-page="changeStylePage"
+      )
         .icon(:class="getSettings.icon")
 </template>
 
@@ -36,6 +49,7 @@ export default {
           active: false,
         },
       ],
+      currenPageBorder: true,
     };
   },
   methods: {
@@ -46,6 +60,9 @@ export default {
           : (this.pageSettings[index].active = false);
       });
     },
+    changePage() {
+      console.log(this.$router.currentRoute._value.fullPath);
+    },
   },
   computed: {
     getSettings() {
@@ -60,6 +77,13 @@ export default {
         : (this.pageSettings[index].active = false);
     });
   },
+  watch: {
+    "$route.path"() {
+      if (this.$router.currentRoute._value.fullPath === "/calendar") {
+        this.currenPageBorder = true;
+      } else this.currenPageBorder = false;
+    },
+  },
 };
 </script>
 
@@ -68,7 +92,6 @@ export default {
   max-width: 80px
   min-width: 80px
   background-color: var(--default-white)
-  border-top-right-radius: 4px
 .icon
   min-width: 44px
 </style>

src/components/base/BaseClientFormCreate.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .wrapper-create.flex.flex-col.fixed.right-0.bottom-4.px-4.py-7.gap-y-8
+  .wrapper-create.flex.flex-col.fixed.right-6.bottom-6.px-4.py-7.gap-y-8
     .icon-cancel.close.absolute.top-5.right-5.cursor-pointer(@click="closeForm")
     span.title.text-xl.font-bold.px-4 Создание клиента
     .flex.gap-x-4.h-fit.px-4
@@ -65,6 +65,7 @@ export default {
   },
   props: {
     closeForm: Function,
+    currentYear: Number,
   },
   data() {
     return {
@@ -165,7 +166,6 @@ export default {
           label: "-",
         },
       ],
-      currentYear: 2022,
     };
   },
   computed: {
@@ -287,19 +287,13 @@ export default {
       }
       return true;
     },
-    printCurrentYear() {
-      return new Date().getFullYear();
-    },
-  },
-  mounted: function () {
-    this.currentYear = this.printCurrentYear();
   },
 };
 </script>
 
 <style lang="sass" scoped>
 .wrapper-create
-  z-index: 1
+  z-index: 5
   background-color: var(--default-white)
   border-radius: 4px
   width: 634px

src/components/base/BaseInput.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
-    :class="{'border-none': borderNone}",
+    :class="{'border-none': borderNone, 'date-input': dateInput}",
     :style="{ minWidth: widthInput + 'px' }"
   )
     input.input.w-full.outline-0.not-italic(
@@ -39,6 +39,7 @@ export default {
     borderNone: Boolean,
     disabled: Boolean,
     maxDate: String,
+    dateInput: Boolean,
   },
 };
 </script>
@@ -61,4 +62,7 @@ export default {
   border: none
 .input
   background-color: inherit
+.date-input
+  // padding: 8px 12px
+  // max-height: 40px
 </style>