From cc50b4c6ffa18806568509b5ff9e50bf038ecd74 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 12 Oct 2022 16:10:10 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B0=20?=
 =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87=D0=B0=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BB=D1=8C=20=D0=94=D0=B5=D0=BD=D1=8C/=D0=9D=D0=B5?=
 =?UTF-8?q?=D0=B4=D0=B5=D0=BB=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../calendar/components/CalendarHeader.vue    | 18 ++++---
 .../components/CalendarLayoutSwitch.vue       | 47 +++++++++++++++++++
 2 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/calendar/components/CalendarLayoutSwitch.vue

diff --git a/src/pages/calendar/components/CalendarHeader.vue b/src/pages/calendar/components/CalendarHeader.vue
index 01a07a8..d25cda0 100644
--- a/src/pages/calendar/components/CalendarHeader.vue
+++ b/src/pages/calendar/components/CalendarHeader.vue
@@ -1,38 +1,44 @@
 <template lang="pug">
   .calendar-header-wrapper.flex.items-center.justify-between.ml-2.py-3.pl-5.pr-6
-    .right-side.flex
+    .flex
       base-arrow-button.left-arrow.mr-4
       base-arrow-button.right-arrow.mr-6
       .text.flex.items-center
         span.font-medium.text-base 24 Мая 2022 
           span.today.font-bold.text-xxs(v-if="isToday") Сегодня
+    calendar-layout-switch(@selected="changeSelectedLayout")
 </template>
 
 <script>
 import BaseArrowButton from "@/components/base/buttons/BaseArrowButton.vue";
+import CalendarLayoutSwitch from "./CalendarLayoutSwitch.vue";
 export default {
   name: "CalendarHeader",
-  components: { BaseArrowButton },
+  components: { BaseArrowButton, CalendarLayoutSwitch },
   data() {
     return {
       isToday: true,
+      selectedLayout: "",
     };
   },
-  computed: {},
+  methods: {
+    changeSelectedLayout(option) {
+      this.selectedLayout = option;
+    },
+  },
 };
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
 .calendar-header-wrapper
   width: 100%
   background-color: var(--bg-white-color)
   height: 56px
   border-radius: 4px
 
-.right-side
-
 .left-arrow
   transform: rotate(90deg)
+
 .right-arrow
   transform: rotate(270deg)
 
diff --git a/src/pages/calendar/components/CalendarLayoutSwitch.vue b/src/pages/calendar/components/CalendarLayoutSwitch.vue
new file mode 100644
index 0000000..196a6f5
--- /dev/null
+++ b/src/pages/calendar/components/CalendarLayoutSwitch.vue
@@ -0,0 +1,47 @@
+<template lang="pug">
+  .layout-switch-wrapper.inline-block
+    button#day.py-2.px-3(:class="dayLayoutState" @click="changeSelectedLayout") День
+    button#week.py-2.px-3(:class="weekLayoutState" @click="changeSelectedLayout") Неделя
+</template>
+
+<script>
+export default {
+  name: "CalendarLayoutSwitch",
+  props: {},
+  data() {
+    return {
+      selectedLayout: "day",
+    };
+  },
+  computed: {
+    dayLayoutState() {
+      return {
+        active: this.selectedLayout === "day",
+      };
+    },
+    weekLayoutState() {
+      return {
+        active: this.selectedLayout === "week",
+      };
+    },
+  },
+  methods: {
+    changeSelectedLayout(event) {
+      this.selectedLayout = event.target.id;
+      this.$emit("selected", event.target.id);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.active
+  background-color: #6787e7
+  color: var(--bg-white-color)
+  border-radius: 4px
+
+.layout-switch-wrapper
+  background-color: var(--bg-lavender-color)
+  color: var(--font-dark-blue-color)
+  border-radius: 4px
+</style>