From 6953412f4d1acb2e43b23747a7c7d8476bda0a30 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 28 Oct 2022 18:16:15 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D0=B2=20=D1=85=D0=B5=D0=B4=D0=B5=D1=80=20=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=BB=D0=BE=D0=BD=D0=BE=D0=BA=20=D1=87=D0=B5=D0=BA=D0=B1=D0=BE?=
 =?UTF-8?q?=D0=BA=D1=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../calendar/components/CalendarColumn.vue    | 10 +++--
 .../CalendarColumnHeaderCheckbox.vue          | 43 +++++++++++++++++++
 2 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue

diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index d54613f..ee70129 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -7,7 +7,7 @@
           span(v-if="!ownerData.avatar") {{ defaultAvatar }}
         span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
-      base-button.btn(left-icon="icon-doc-ok", :icon-left-size="24", :size="32", secondary)
+      column-header-checkbox
     .body.pl-1
       calendar-event-card(
         v-for="event in dayEvents"
@@ -18,12 +18,16 @@
 </template>
 
 <script>
+import ColumnHeaderCheckbox from "./CalendarColumnHeaderCheckbox.vue";
 import BaseAvatar from "@/components/base/BaseAvatar";
-import BaseButton from "@/components/base/BaseButton.vue";
 import CalendarEventCard from "./CalendarEventCard.vue";
 export default {
   name: "CalendarColumn",
-  components: { CalendarEventCard, BaseButton, BaseAvatar },
+  components: {
+    CalendarEventCard,
+    BaseAvatar,
+    ColumnHeaderCheckbox,
+  },
   props: {
     ownerData: Object,
     dayEvents: Array,
diff --git a/src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue b/src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue
new file mode 100644
index 0000000..9c5b4f1
--- /dev/null
+++ b/src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue
@@ -0,0 +1,43 @@
+<template lang="pug">
+  div.icon-wrap.flex.items-center.justify-center.cursor-pointer.py-1.px-2(
+      :class="{disable: !isChecked}"
+      @click="changeState"
+    )
+    span(v-if="numberIsVisible") 3
+    .icon-doc-ok.text-xxl
+</template>
+
+<script>
+export default {
+  name: "CalendarColumnHeaderCheckbox",
+  data() {
+    return {
+      isChecked: false,
+    };
+  },
+  methods: {
+    changeState() {
+      this.isChecked = !this.isChecked;
+      this.$emit("isChecked", this.isChecked);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.disable
+  opacity: 0.5
+.icon-wrap
+  height: 32px
+  background-color: var(--btn-blue-color-1)
+  color: var(--btn-blue-color)
+  border-radius: 4px
+  &:hover
+    background-color: var(--btn-blue-color-2)
+  &:active
+    background-color: var(--font-dark-blue-color)
+    color: var(--default-white)
+.icon-doc-ok
+  width: 24px
+  height: 24px
+</style>