Merge branch 'master' into UC-13

src/pages/calendar/TheCalendar.vue

@@ -1,27 +1,29 @@
 <template lang="pug">
-    div {{persons["person"]}}
+  calendar-header(
+    :currentDay="currentDate"
+    @previous-date="switchPreviousDate"
+    @next-date="switchNextDate")
 </template>
 
 <script>
-/* eslint-disable */
-
+import * as moment from "moment/moment";
+import CalendarHeader from "./components/CalendarHeader.vue";
+moment.locale("ru");
 export default {
   name: "TheCalendar",
+  components: { CalendarHeader },
   data() {
     return {
-      persons: { person: "dasda"},
+      currentDate: moment(),
     };
   },
   methods: {
-    savePersons(data) {
-      console.log(data)
-      this.persons = data
+    switchPreviousDate() {
+      this.currentDate = this.currentDate.clone().subtract(1, "day");
+    },
+    switchNextDate() {
+      this.currentDate = this.currentDate.clone().add(1, "day");
     },
-  },
-  mounted() {
-    fetch("https://afae35de-056c-4544-96a5-07f01c158778.mock.pstmn.io/urban")
-        .then((res) => res.json())
-        .then((data) => this.savePersons(data))
   },
 };
 </script>

src/pages/calendar/components/CalendarHeader.vue

@@ -0,0 +1,78 @@
+<template lang="pug">
+  .calendar-header-wrapper.flex.items-center.justify-between.ml-2.py-3.pl-5.pr-6
+    .flex
+      base-arrow-button.left-arrow.mr-4(@click="previousHandler")
+      base-arrow-button.right-arrow.mr-6(@click="nextHandler")
+      .text.flex.items-center
+        span.font-medium.text-base {{ dateString }}
+          span.today.font-bold.text-xxs(v-if="isToday")  Сегодня
+    calendar-layout-switch(@selected="changeSelectedLayout")
+</template>
+
+<script>
+import * as moment from "moment/moment";
+import BaseArrowButton from "@/components/base/buttons/BaseArrowButton.vue";
+import CalendarLayoutSwitch from "./CalendarLayoutSwitch.vue";
+export default {
+  name: "CalendarHeader",
+  components: { BaseArrowButton, CalendarLayoutSwitch },
+  props: {
+    currentDay: Object,
+  },
+  data() {
+    return {
+      isToday: true,
+      selectedLayout: "",
+    };
+  },
+  computed: {
+    dateString() {
+      let newStr = this.currentDay.format("D MMMM YYYY");
+      return newStr
+        .split(" ")
+        .map((elem, index) => {
+          if (index === 1) return elem[0].toUpperCase() + elem.slice(1);
+          return elem;
+        })
+        .join(" ");
+    },
+  },
+  methods: {
+    changeSelectedLayout(option) {
+      this.selectedLayout = option;
+    },
+    previousHandler() {
+      this.$emit("previous-date");
+    },
+    nextHandler() {
+      this.$emit("next-date");
+    },
+  },
+  watch: {
+    currentDay: function () {
+      this.isToday =
+        this.currentDay.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.calendar-header-wrapper
+  width: 100%
+  background-color: var(--bg-white-color)
+  height: 56px
+  border-radius: 4px
+
+.left-arrow
+  transform: rotate(90deg)
+
+.right-arrow
+  transform: rotate(270deg)
+
+.text
+  color: var(--font-dark-blue-color)
+
+.today
+  opacity: 0.5
+</style>

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>