From 96f1316b276ef83b644046f5627ae54d2b7cc836 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Tue, 25 Oct 2022 00:44:50 +0300
Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D1=8B=20?=
 =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D1=81=D0=B0=D0=B9=D0=B4=D0=B1=D0=B0=D1=80?=
 =?UTF-8?q?=D0=B0=20=D0=B2=20=D0=BE=D1=82=D0=BA=D1=80=D1=8B=D1=82=D0=BE?=
 =?UTF-8?q?=D0=BC=20=D1=81=D0=BE=D1=81=D1=82=D0=BE=D1=8F=D0=BD=D0=B8=D0=B8?=
 =?UTF-8?q?,=20=D0=B2=D0=B8=D0=B4=D1=8B=20=D1=81=D0=BE=D0=B1=D1=8B=D1=82?=
 =?UTF-8?q?=D0=B8=D0=B9,=20=D0=BA=D0=BE=D0=BC=D0=B0=D0=BD=D0=B4=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass                |  2 +-
 src/components/base/BaseInput.vue             |  4 +-
 src/pages/calendar/TheCalendar.vue            | 32 ++++++-
 .../components/CalendarClockColumn.vue        |  3 +-
 .../calendar/components/CalendarSidebar.vue   | 85 +++++++++++++++----
 tailwind.config.js                            |  2 +
 6 files changed, 105 insertions(+), 23 deletions(-)

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index 582b362..14df095 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -26,4 +26,4 @@
   --bg-event-blue-color: #3ba3ee
   --light-grey-bg-color: #f8f9fa
   --btn-green-color: rgba(60, 217, 75, 1)
-  --btn-light-green-color: rgba(60, 217, 75, 0.2)
+  --btn-light-green-color: rgba(60, 217, 75, 0.2)
\ No newline at end of file
diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index a353b87..3d21ca8 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
   .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
     img.cursor-pointer( v-if="withIcon" :class="position" src="@/assets/icons/search-black.svg" alt="SearchTable")
-    input.w-full.outline-0.text-base.not-italic(:value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder")
+    input.w-full.outline-0.text-base.not-italic(:style="{ backgroundColor: backgroundInput, fontSize: fontSizeInput }" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder")
 </template>
 
 <script>
@@ -20,6 +20,8 @@ export default {
       default: "Поиск",
     },
     widthInput: Number,
+    backgroundInput: String,
+    fontSizeInput: String,
   },
   computed: {
     position() {
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index d03119c..80b3176 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -31,10 +31,34 @@ export default {
       },
       eventsData: [],
       team: [
-        { id: 1, name: "Захарова А.О.", avatar: img },
-        { id: 2, name: "Константинопольская Ю.В.", avatar: img },
-        { id: 3, name: "Коломойцев И.К.", avatar: img },
-        { id: 4, name: "Зайцев В.С.", avatar: img },
+        {
+          id: 1,
+          last_name: "Гагарин",
+          first_name: "Юрий",
+          patronymic: "Алексеевич",
+          avatar: img,
+        },
+        {
+          id: 2,
+          last_name: "Константинопольская",
+          first_name: "Юлия",
+          patronymic: "Витальевна",
+          avatar: img,
+        },
+        {
+          id: 3,
+          last_name: "Коломойцев",
+          first_name: "Игорь",
+          patronymic: "Константинович",
+          avatar: img,
+        },
+        {
+          id: 4,
+          last_name: "Зайцев",
+          first_name: "Валерий",
+          patronymic: "Сергеевич",
+          avatar: img,
+        },
       ],
     };
   },
diff --git a/src/pages/calendar/components/CalendarClockColumn.vue b/src/pages/calendar/components/CalendarClockColumn.vue
index e56aa62..f289571 100644
--- a/src/pages/calendar/components/CalendarClockColumn.vue
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -54,8 +54,7 @@ export default {
 
 <style lang="sass" scoped>
 .current-time
-  color: var(--time-indicator-color)
-
+  color: var(--bg-event-red-color)
 .calendar-clock-column
   width: 80px
   height: 100%
diff --git a/src/pages/calendar/components/CalendarSidebar.vue b/src/pages/calendar/components/CalendarSidebar.vue
index 9caf747..31de909 100644
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -1,28 +1,53 @@
 <template lang="pug">
-  .sidebar.flex.flex-col.bg-white
+  .sidebar.flex.flex-col.bg-white(:class="openSidebar")
     .sidebar-wrapper.h-full.my-13px(:style="sidebarWidth")
       .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
-        base-button-plus
-        .flex.flex-col.items-center
-          base-button-plus(:class="buttonStyled")
+        base-button-plus(:size="40" v-if="!isOpen")
+        .create-event.flex.items-center.justify-center(v-else)
+          base-create-button.font-medium.pl-15px.py-10.5px(text="Создать событие" :withIcon="true")
+        .flex.flex-col.items-center(v-if="!isOpen")
+          base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .flex.flex-col.gap-y-2.items-center.mt-4
             .event.flex.items-center.justify-center(v-for="event in events" :key="event.id")
               .event-type(:style="{ background: event.color }")
-        .flex.flex-col.items-center.gap-y-2.justify-center
-          base-button-plus.mb-2(:class="buttonStyled")
+        .flex.items-center.flex-col.gap-y-4(v-else)
+          .events-wrapper.flex.items-center.justify-between
+            .flex {{ "Виды событий" }}
+            base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
+          .flex.flex-col.gap-y-2
+            .relative.flex.items-center.gap-x-3(v-for="event in events")
+              base-input.py-2.pl-6(:placeholder="event.name" :key="event.id" :backgroundInput="red" background-input="transparent" font-size-input="12px")
+              .event-type(:style="{ background: event.color }")
+              span.icon-edit.cursor-pointer
+        .flex.flex-col.items-center.gap-y-2.justify-center(v-if="!isOpen")
+          base-button-plus.mb-2(:class="buttonStyled" :size="24" :icon-size="10")
           .team-card(v-for="teammate in team" :key="teammate.id")
             img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
+        .flex.flex-col.gap-y-4(v-else)
+          .events-wrapper.flex.items-center.justify-between
+            .flex {{ "Команды" }}
+            base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
+          .box-team.flex.flex-col.gap-y-2
+            .team-card.flex.items-center.justify-between(v-for="teammate in team" :key="teammate.id")
+              .flex.items-center
+                img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
+                .flex.ml-2.not-italic.font-medium.text-xxs {{ changeLastName(teammate.last_name) + changeInitials(teammate.first_name, teammate.patronymic) }}
+              .span.icon-change-place.cursor-pointer
         base-open-button.mt-148px(@click="changeSize" :style="{ transform: `rotate(${turnButton})` }")
 </template>
 
 <script>
 import BaseButtonPlus from "../../../components/base/buttons/BaseButtonPlus.vue";
 import BaseOpenButton from "../../../components/base/buttons/BaseOpenButton.vue";
+import BaseCreateButton from "../../../components/base/buttons/BaseCreateButton.vue";
+import BaseInput from "../../../components/base/BaseInput.vue";
 export default {
   name: "CalendarSidebar",
   components: {
     BaseButtonPlus,
     BaseOpenButton,
+    BaseCreateButton,
+    BaseInput,
   },
   props: {
     team: Array,
@@ -30,18 +55,24 @@ export default {
   data() {
     return {
       events: [
-        { id: 1, color: "var(--bg-event-green-color)" },
-        { id: 2, color: "var(--bg-event-red-color)" },
-        { id: 3, color: "var(--bg-event-yellow-color)" },
-        { id: 4, color: "var(--bg-event-blue-color)" },
+        { id: 1, name: "Встреча", color: "var(--bg-event-green-color)" },
+        { id: 2, name: "Планерка", color: "var(--bg-event-red-color)" },
+        { id: 3, name: "Интервью", color: "var(--bg-event-yellow-color)" },
+        { id: 4, name: "Важная работа", color: "var(--bg-event-blue-color)" },
       ],
       widthSidebarOpen: "232px",
       widthSidebarClose: "72px",
       isOpen: false,
       turnButton: "180deg",
+      maxLengthLastName: 13,
     };
   },
   computed: {
+    openSidebar() {
+      return {
+        "open-sidebar": this.isOpen,
+      };
+    },
     buttonStyled() {
       return {
         "button-styled": true,
@@ -67,6 +98,14 @@ export default {
       );
       this.turnButton = this.isOpen ? "0deg" : "180deg";
     },
+    changeLastName(lastName) {
+      return lastName.length > this.maxLengthLastName
+        ? lastName.substr(0, this.maxLengthLastName) + "... "
+        : lastName + " ";
+    },
+    changeInitials(firstName, patronymic) {
+      return firstName.substr(0, 1) + "." + patronymic.substr(0, 1) + ".";
+    },
   },
 };
 </script>
@@ -75,8 +114,6 @@ export default {
 .sidebar-wrapper
   border-left: 2px solid var(--btn-blue-color-3)
 .button-plus
-  width: 40px
-  height: 40px
   max-height: 40px
   background: var(--btn-blue-color)
   color: var(--default-white)
@@ -97,10 +134,28 @@ export default {
   height: 40px
   max-height: 40px
 .button-styled
-  width: 24px
-  height: 24px
   max-height: 24px
   background: var(--btn-blue-color-1)
   color: var(--btn-blue-color)
-  font-size: 10px
+.open-sidebar
+  .sidebar-content
+    align-items: flex-end
+    padding-left: 15px
+  .event-type
+    position: absolute
+    width: 8px
+    height: 16px
+    top: 8px
+    left: 8px
+.create-event
+  width: 200px
+  height: 40px
+  border-radius: 4px
+.events-wrapper
+  width: 200px
+.input-wrapper
+  border: none
+  background: var(--bg-event-box-color)
+  height: 32px
+  width: 169px
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 10a01eb..b100f17 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -27,7 +27,9 @@ module.exports = {
         "3px": "3px",
         "6px": "6px",
         "10px": "10px",
+        "10.5px": "10.5px",
         "13px": "13px",
+        "15px": "15px",
         "19px": "19px",
         "45px": "45px",
         "74px": "74px",