From 5bdb9b20d3dad3435dd4a8aa080e78269f3a6e2b Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 4 Nov 2022 15:37:49 +0300
Subject: [PATCH 1/5] =?UTF-8?q?=D0=A0=D0=B5=D0=B0=D0=BB=D0=B8=D0=B7=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=B0=D0=BB=D0=B0=20=D0=BE=D1=87=D0=B8=D1=81=D1=82=D0=BA?=
 =?UTF-8?q?=D1=83=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CalendarFormAddEvent.vue       |  8 ++++++--
 .../calendar/components/CalendarSchedule.vue  | 19 +++++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index c42f457..387c8b9 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -3,7 +3,7 @@
     .flex.flex-col.gap-y-2
       .flex.justify-between.pt-2
         span.text-xs.opacity-40.font-bold.leading-3 Ответственный
-        .icon-cancel.close-icon.text-xs.cursor-pointer(@click="closeForm")
+        .icon-cancel.close-icon.text-xs.cursor-pointer(@click="clearForm")
       base-select(
         id="owners"
         :size-input="ownerSelectSize"
@@ -272,9 +272,13 @@ export default {
         employees: [this.employees],
         members: [this.members],
       };
-      this.closeForm();
+      this.clearForm();
       this.eventData = {};
     },
+    clearForm() {
+      this.$emit("clear-selected-event-data");
+      this.closeForm();
+    },
     mergeDate(eventDate, time) {
       return moment(`${eventDate} ${time}`).format();
     },
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 0b15d0f..aa3cc9c 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -48,6 +48,7 @@
         :owners-data="ownersData"
         :members-data="membersData"
         :selected-event-data="selectedEvent"
+        @clear-selected-event-data="clearSelectedEvent"
       )
 </template>
 
@@ -322,6 +323,24 @@ export default {
       this.selectedEvent = eventData;
       this.$emit("open-change-form");
     },
+    clearSelectedEvent() {
+      this.selectedEvent = {
+        id: null,
+        start: "",
+        end: "",
+        kind: "",
+        employees: {
+          employee: null,
+          role: "owner",
+          id: null,
+        },
+        members: {
+          person: null,
+          role: null,
+          id: null,
+        },
+      };
+    },
   },
   watch: {
     currentTime() {

From 86b4a91d2355255c8412fccdba54c88112ee5f4b Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Sun, 6 Nov 2022 16:30:53 +0300
Subject: [PATCH 2/5] =?UTF-8?q?WIP=20=D0=9F=D0=B5=D1=80=D0=B5=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=BB=D0=B0=D0=BB=D0=B0=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B4=D0=B0?=
 =?UTF-8?q?=D1=87=D1=83=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85,=20=D0=B8?=
 =?UTF-8?q?=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=D0=B0=20=D1=84=D0=BE?=
 =?UTF-8?q?=D1=80=D0=BC=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseInput.vue             |   4 +
 src/components/base/BaseSelect.vue            |  14 +-
 src/components/base/OldBaseSelect.vue         |  28 +-
 .../components/CalendarFormAddEvent.vue       | 277 +++++++++++-------
 .../calendar/components/CalendarSchedule.vue  |  34 +--
 5 files changed, 199 insertions(+), 158 deletions(-)

diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 380720f..9869d8c 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -10,6 +10,7 @@
       @input="$emit('update:value', $event.target.value)"
       :placeholder="placeholder"
       :maxlength="maxLength"
+      :disabled="disabled"
     )
     .slot(v-if="withIcon", :class="iconPosition")
       slot.cursor-pointer
@@ -35,6 +36,7 @@ export default {
     },
     widthInput: Number,
     borderNone: Boolean,
+    disabled: Boolean,
   },
 };
 </script>
@@ -55,4 +57,6 @@ export default {
     opacity: 0
 .border-none
   border: none
+.input
+  background-color: inherit
 </style>
diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue
index 770ea90..69e649d 100644
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-  .base-select(@click="open = !open", :class="{'open': open }")
-    .placeholder.text-base {{ value || placeholder }}
+  .base-select(@click="open = !open", :class="{'open': open, 'border-none': borderNone}")
+    .placeholder.text-base(:class="{'value-color': value}") {{ value || placeholder }}
     span.icon-down-arrow.open-icon(:class="{'open': open }")
     base-menu(v-if="open")
       .items-container(@click="open = false", @mouseleave="leaveSelect")
@@ -19,6 +19,7 @@ export default {
       type: Array,
       default: () => [],
     },
+    borderNone: Boolean,
   },
   emits: ["update:modelValue"],
   data() {
@@ -86,4 +87,13 @@ export default {
   display: flex
   &.open
     transform: rotate(180deg)
+.separator
+  background-color: var(--btn-blue-color-3)
+  height: 24px
+  width: 1px
+  border-radius: 1px
+.border-none
+  border: none
+.value-color
+  opacity: 1
 </style>
diff --git a/src/components/base/OldBaseSelect.vue b/src/components/base/OldBaseSelect.vue
index a1638e1..226c0c0 100644
--- a/src/components/base/OldBaseSelect.vue
+++ b/src/components/base/OldBaseSelect.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
-  .flex.box-border.container.items-center.cursor-pointer.relative(
+  .flex.box-border.container.items-center.cursor-pointer.relative.py-10px.px-4.justify-between(
     @click="changeSelect"
-    :class="{border: styleBorder, 'py-2.5 px-4':!forNetworks, 'justify-center':forNetworks, 'justify-between':!forNetworks}"
+    :class="{border: styleBorder }"
     )
-    .flex.mr-2(v-if="!forNetworks")
+    .flex.mr-2
       input.text-base.select.cursor-pointer(
           :size="sizeInput"
           v-model="optionData"
@@ -20,25 +20,14 @@
           @click="(e) => chooseOption(e)"
           :key="data.id || data"
           :id="data.id || data"
-          ) {{data.name || data}}
-    .flex.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData, 'px-2.5'")
-      .absolute.options.top-11.left-0(
-        v-show="isSelectOpen"
-        :id="id")
-        .flex.option.justify-center.py-1.text-xl(
-          v-for="data in listData"
-          @click="(e) => chooseOption(e)"
-          :key="data.network"
-          :id="data.network"
-          :class="data.icon"
-          )
+          ) {{data.label || data}}
     .select-form-separator.cursor-pointer.mr-6px(v-if="separator")
-    .text-xsm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
+    .text-xsm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isSelectOpen}")
 </template>
 
 <script>
 export default {
-  name: "BaseSelect",
+  name: "OldBaseSelect",
   props: {
     id: String,
     styleBorder: {
@@ -48,7 +37,6 @@ export default {
     optionData: String,
     listData: Array,
     chooseOption: Function,
-    forNetworks: Boolean,
     placeholder: {
       type: String,
       default: "",
@@ -67,8 +55,8 @@ export default {
         let filteredList = [];
         filteredList = this.listData.filter((elem) => {
           let reg = new RegExp(`${this.optionData}`, "img");
-          if (elem.name) {
-            return elem.name.match(reg);
+          if (elem.label) {
+            return elem.lebel.match(reg);
           }
           return elem.match(reg);
         });
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index 387c8b9..b0ad6a7 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -4,15 +4,20 @@
       .flex.justify-between.pt-2
         span.text-xs.opacity-40.font-bold.leading-3 Ответственный
         .icon-cancel.close-icon.text-xs.cursor-pointer(@click="clearForm")
-      base-select(
-        id="owners"
-        :size-input="ownerSelectSize"
-        :option-data="ownerName"
-        :list-data="ownersList"
-        :choose-option="chooseOptionOwner"
-        placeholder="Выберите ответственного"
+      base-select.select(
+        v-if="!selectedEventData.employees",
+        :items="ownersList",
+        v-model="employees.employee",
+        placeholder="Выберите ответственного",
         separator
-        disabled
+        border-none
+      )  
+      base-input(
+        v-if="selectedEventData.employees",
+        v-model:value="employeeName",
+        :width-input="72",
+        disabled,
+        border-none
       )
     .flex.flex-col.gap-y-2
       span.text-xs.opacity-40.font-bold.leading-3 Основная информация
@@ -32,27 +37,30 @@
           )
       .flex.gap-x-4.items-center
         .icon-person.text-xl.icon
-        base-select(
-          id="members"
-          :size-input="memberSelectSize"
-          :list-data="membersList"
-          :optionData="memberName"
-          :choose-option="chooseOptionMember"
-          @changeInput="addMember"
-          placeholder="Выберите участника"
+        base-select.select(
+          v-if="!selectedEventData.members",
+          :items="membersList",
+          v-model="members.person",
+          placeholder="Выберите ответственного",
           separator
+          border-none
         )
+        base-input(
+          v-if="selectedEventData.members",
+          v-model:value="memberName",
+          disabled,
+          :width-input="346"
+          border-none
+       )
     .flex.flex-col.gap-y-2
       span.text-xs.opacity-40.font-bold.leading-3 Вид события
-      base-select(
-        id="kind"
-        :size-input="kindEventSelectSize"
-        :option-data="kind"
-        :list-data="kindEvents"
-        :choose-option="chooseOptionTypeEvent"
+      base-select.select(
+        v-model="kind"
+        :items="kindEvents"
         placeholder="Вид события"
         separator
-        disabled
+        border-none
+        :style="kindSelectWidth"
       )
     .flex.flex-col.gap-y-2
       .flex.gap-x-4.items-center
@@ -85,10 +93,10 @@
 </template>
 
 <script>
-import BaseSelect from "@/components/base/OldBaseSelect";
 import BaseInputTime from "@/components/base/BaseInputTime.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";
+import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseButton from "@/components/base/BaseButton";
 import * as moment from "moment/moment";
 export default {
@@ -124,9 +132,26 @@ export default {
   data() {
     return {
       listContacts: [1],
-      memberSelectSize: 29,
-      kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
+      kindEvents: [
+        {
+          id: 1,
+          label: "Встреча",
+        },
+        {
+          id: 2,
+          label: "Планерка",
+        },
+        {
+          id: 3,
+          label: "Интервью",
+        },
+        {
+          id: 4,
+          label: "Важная работа",
+        },
+      ],
       EMPLOYEE_TYPE: "owner",
+      MEMBER_TYPE: "primary",
       eventData: {},
       contacts: [],
       startTime: "",
@@ -146,7 +171,11 @@ export default {
         this.ownersData.forEach((elem) => {
           filteredArray.push({
             id: elem.id,
-            name: this.trimOwnerName(elem),
+            label: this.trimOwnerName(
+              elem.last_name,
+              elem.first_name,
+              elem.patronymic
+            ),
           });
         });
         return filteredArray;
@@ -159,49 +188,59 @@ export default {
         this.membersData.forEach((elem) => {
           filteredArray.push({
             id: elem.id,
-            name: this.trimMemberName(elem),
+            label: this.trimMemberName(
+              elem.last_name,
+              elem.first_name,
+              elem.patronymic
+            ),
             contacts: elem.contacts,
           });
         });
+        console.log(filteredArray);
         return filteredArray;
       }
       return [];
     },
-    ownerName() {
-      if (this.employees.employee) {
-        return this.trimOwnerName(this.employees.employee);
+    memberName() {
+      if (this.selectedEventData.members) {
+        let foundMember = {};
+        if (this.selectedEventData.members.length > 1) {
+          foundMember = this.selectedEventData.members.find(
+            ({ role }) => role === this.MEMBER_TYPE
+          );
+        } else foundMember = this.selectedEventData.members[0];
+        let {
+          person: { last_name, first_name, patronymic },
+        } = foundMember;
+        return this.trimMemberName(last_name, first_name, patronymic);
       }
       return "";
     },
-    memberName() {
-      if (this.members.person) {
-        return this.trimMemberName(this.members.person);
+    employeeName() {
+      if (this.selectedEventData.employees) {
+        let foundEmployee = this.selectedEventData.employees.find(
+          ({ role }) => role === this.EMPLOYEE_TYPE
+        );
+        let {
+          employee: { last_name, first_name, patronymic },
+        } = foundEmployee;
+        return this.trimOwnerName(last_name, first_name, patronymic);
       }
       return "";
     },
     disabledButton() {
       if (
-        (this.eventDate,
-        this.startTime,
-        this.endTime,
-        this.employees.employee && this.members.person && this.kind)
+        this.eventDate &&
+        this.startTime &&
+        this.endTime &&
+        this.members &&
+        this.employees &&
+        this.kind
       ) {
         return false;
       }
       return true;
     },
-    ownerSelectSize() {
-      if (this.ownerName) {
-        return this.ownerName.split(" ").join("").length;
-      }
-      return 22;
-    },
-    kindEventSelectSize() {
-      if (this.kind) {
-        return this.kind.split(" ").join("").length;
-      }
-      return 10;
-    },
     startDate() {
       return this.selectedEventData.start
         ? moment.parseZone(this.selectedEventData.start)
@@ -212,33 +251,38 @@ export default {
         ? moment.parseZone(this.selectedEventData.end)
         : moment();
     },
+    eventEmployee() {
+      if (this.selectedEventData.employees) {
+        return this.selectedEventData.employees;
+      }
+      return {
+        id: null,
+        employee: null,
+        role: this.EMPLOYEE_TYPE,
+      };
+    },
+    eventKind() {
+      return this.selectedEventData.kind ? this.selectedEventData.kind : "";
+    },
+    eventId() {
+      return this.selectedEventData.id ? this.selectedEventData.id : "";
+    },
+    eventMember() {
+      return this.selectedEventData.members
+        ? this.selectedEventData.members
+        : {
+            id: null,
+            person: null,
+            role: this.MEMBER_TYPE,
+          };
+    },
+    kindSelectWidth() {
+      return {
+        width: this.kind ? `${this.kind.length * 9 + 65}px` : "164px",
+      };
+    },
   },
   methods: {
-    chooseOptionOwner(e) {
-      let foundEmployee = this.ownersData.find(
-        (elem) => elem.id === e.target.id
-      );
-      this.employees.employee = {
-        id: foundEmployee.id,
-        last_name: foundEmployee.last_name,
-        first_name: foundEmployee.first_name,
-        patronymic: foundEmployee.patronymic,
-      };
-    },
-    chooseOptionTypeEvent(e) {
-      this.kind = e.target.id;
-    },
-    chooseOptionMember(e) {
-      let foundMember = this.membersData.find(
-        (elem) => elem.id === e.target.id
-      );
-      this.members.person = {
-        id: foundMember.id,
-        last_name: foundMember.last_name,
-        first_name: foundMember.first_name,
-        patronymic: foundMember.patronymic,
-      };
-    },
     addContact(e) {
       if (e.currentTarget.id === "addContact") {
         this.listContacts.push(
@@ -246,22 +290,11 @@ export default {
         );
       }
     },
-    trimOwnerName(obj) {
-      return `${obj.last_name} ${obj.first_name[0]}.${obj.patronymic[0]}.`;
+    trimOwnerName(lastName, firsName, patronymic) {
+      return `${lastName} ${firsName[0]}.${patronymic[0]}.`;
     },
-    trimMemberName(obj) {
-      return `${obj.last_name} ${obj.first_name} ${obj.patronymic}`;
-    },
-    addMember(memberName) {
-      let memberData = memberName.split(" ");
-      if (memberData.length === 3) {
-        this.members.person = {
-          id: null,
-          last_name: memberData[0],
-          first_name: memberData[1],
-          patronymic: memberData[2],
-        };
-      }
+    trimMemberName(lastName, firsName, patronymic) {
+      return `${lastName} ${firsName} ${patronymic}`;
     },
     sendEventData() {
       this.eventData = {
@@ -269,8 +302,20 @@ export default {
         start: this.mergeDate(this.eventDate, this.startTime),
         end: this.mergeDate(this.eventDate, this.endTime),
         kind: this.kind,
-        employees: [this.employees],
-        members: [this.members],
+        employees: this.selectedEventData.employees
+          ? this.employees
+          : this.findEmployee(
+              this.ownersData,
+              this.ownersList,
+              this.employees.employee
+            ),
+        members: this.selectedEventData.members
+          ? this.members
+          : this.findMember(
+              this.membersData,
+              this.membersList,
+              this.members.person
+            ),
       };
       this.clearForm();
       this.eventData = {};
@@ -282,6 +327,36 @@ export default {
     mergeDate(eventDate, time) {
       return moment(`${eventDate} ${time}`).format();
     },
+    findEmployee(requestedList, serializedList, employee) {
+      let foundId = serializedList.find(({ label }) => label === employee).id;
+      let foundPerson = requestedList.find(({ id }) => id === foundId);
+      return {
+        id: this.employees.id,
+        employee: {
+          id: foundPerson.id,
+          last_name: foundPerson.last_name,
+          first_name: foundPerson.first_name,
+          patronymic: foundPerson.patronymic,
+          color: foundPerson.color,
+        },
+        role: this.employees.role,
+      };
+    },
+    findMember(requestedList, serializedList, member) {
+      let foundId = serializedList.find(({ label }) => label === member).id;
+      let foundPerson = requestedList.find(({ id }) => id === foundId);
+      return {
+        id: this.members.id,
+        person: {
+          id: foundPerson.id,
+          last_name: foundPerson.last_name,
+          first_name: foundPerson.first_name,
+          patronymic: foundPerson.patronymic,
+          color: foundPerson.color,
+        },
+        role: this.members.role,
+      };
+    },
   },
   watch: {
     startDate: {
@@ -305,18 +380,10 @@ export default {
       immediate: true,
       handler(newDate) {
         if (newDate) {
-          this.id = this.selectedEventData.id || null;
-          this.kind = this.selectedEventData.kind || "";
-          this.employees = this.selectedEventData.employees[0] || {
-            id: null,
-            employee: null,
-            role: this.EMPLOYEE_TYPE,
-          };
-          this.members = this.selectedEventData.members[0] || {
-            id: null,
-            person: null,
-            role: this.EMPLOYEE_TYPE,
-          };
+          this.id = this.eventId;
+          this.kind = this.eventKind;
+          this.employees = this.eventEmployee;
+          this.members = this.eventMember;
         }
       },
     },
@@ -370,4 +437,6 @@ export default {
     color: var(--btn-blue-color)
 .styled-button
   width: 183px
+.select
+  height: 40px
 </style>
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index aa3cc9c..d4a0507 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -113,22 +113,7 @@ export default {
       pixelsPerHour: 62,
       columnHeaderHeight: 48,
       defaultColumnWidth: 470,
-      selectedEvent: {
-        id: null,
-        start: "",
-        end: "",
-        kind: "",
-        employees: {
-          employee: null,
-          role: "owner",
-          id: null,
-        },
-        members: {
-          person: null,
-          role: null,
-          id: null,
-        },
-      },
+      selectedEvent: {},
     };
   },
   computed: {
@@ -324,22 +309,7 @@ export default {
       this.$emit("open-change-form");
     },
     clearSelectedEvent() {
-      this.selectedEvent = {
-        id: null,
-        start: "",
-        end: "",
-        kind: "",
-        employees: {
-          employee: null,
-          role: "owner",
-          id: null,
-        },
-        members: {
-          person: null,
-          role: null,
-          id: null,
-        },
-      };
+      this.selectedEvent = {};
     },
   },
   watch: {

From 4afd678f4a46c4a1402a5f0e9feeac922bd187a8 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 7 Nov 2022 15:00:58 +0300
Subject: [PATCH 3/5] =?UTF-8?q?WIP=20=D0=A0=D0=B5=D0=B0=D0=BB=D1=8C=D0=B7?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BB=D0=B0=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=81=D0=BE=D0=B1=D1=8B=D1=82=D0=B8?=
 =?UTF-8?q?=D1=8F=20=D0=BD=D0=B0=20=D1=81=D0=B5=D1=80=D0=B2=D0=B5=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseInput.vue             |   2 +-
 src/components/base/BaseInputDate.vue         |   2 +-
 src/components/base/BaseInputTime.vue         |   2 +-
 src/components/base/BaseSelect.vue            |  10 +-
 src/pages/calendar/TheCalendar.vue            |  12 +-
 .../components/CalendarFormAddEvent.vue       | 134 ++++++++++--------
 .../calendar/components/CalendarSchedule.vue  |   4 +
 7 files changed, 102 insertions(+), 64 deletions(-)

diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 9869d8c..6a6e0c8 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -50,7 +50,7 @@ export default {
   border: 2px solid var(--border-light-grey-color)
   border-radius: 4px
   background-color: var(--default-white)
-  color: var(--font-dark-blue-color)
+  color: var(--font-black-color)
 .date
   background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
   &::-webkit-calendar-picker-indicator
diff --git a/src/components/base/BaseInputDate.vue b/src/components/base/BaseInputDate.vue
index 2c85678..096d053 100644
--- a/src/components/base/BaseInputDate.vue
+++ b/src/components/base/BaseInputDate.vue
@@ -42,7 +42,7 @@ export default {
 .input-wrapper
   border-radius: 4px
   background-color: var(--default-white)
-  color: var(--font-dark-blue-color)
+  color: var(--font-black-color)
 .date
   background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
   &::-webkit-calendar-picker-indicator
diff --git a/src/components/base/BaseInputTime.vue b/src/components/base/BaseInputTime.vue
index 8b8fefe..2a586e8 100644
--- a/src/components/base/BaseInputTime.vue
+++ b/src/components/base/BaseInputTime.vue
@@ -42,5 +42,5 @@ export default {
 .input-wrapper
   border-radius: 4px
   background-color: var(--default-white)
-  color: var(--font-dark-blue-color)
+  color: var(--font-black-color)
 </style>
diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue
index 69e649d..7dca7c2 100644
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -1,7 +1,9 @@
 <template lang="pug">
   .base-select(@click="open = !open", :class="{'open': open, 'border-none': borderNone}")
     .placeholder.text-base(:class="{'value-color': value}") {{ value || placeholder }}
-    span.icon-down-arrow.open-icon(:class="{'open': open }")
+    .flex.items-center
+      .select-form-separator.cursor-pointer.mr-4(v-if="separator")
+      span.icon-down-arrow.open-icon(:class="{'open': open }")
     base-menu(v-if="open")
       .items-container(@click="open = false", @mouseleave="leaveSelect")
         .item(v-for="item in items", :key="item.id" @click="clickItem(item.label)") {{ item.label }}
@@ -20,6 +22,7 @@ export default {
       default: () => [],
     },
     borderNone: Boolean,
+    separator: Boolean,
   },
   emits: ["update:modelValue"],
   data() {
@@ -96,4 +99,9 @@ export default {
   border: none
 .value-color
   opacity: 1
+.select-form-separator
+  background-color: var(--btn-blue-color-3)
+  height: 24px
+  width: 1px
+  border-radius: 1px
 </style>
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index b1d40cf..84ee736 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -18,6 +18,7 @@
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
       @open-change-form="openFormCreateEvent"
+      @update-events="fetchEventsData"
     )
 </template>
 
@@ -68,10 +69,7 @@ export default {
     saveMembersData(res) {
       this.membersData = res.results;
     },
-    fetchEventsData() {
-      fetchWrapper
-        .get("registry/event/")
-        .then((res) => this.saveEventsData(res));
+    fetchPersonsData() {
       fetchWrapper
         .get("general/employee/")
         .then((res) => this.saveEmployeesData(res));
@@ -79,6 +77,11 @@ export default {
         .get("general/person/")
         .then((res) => this.saveMembersData(res));
     },
+    fetchEventsData() {
+      fetchWrapper
+        .get("registry/event/")
+        .then((res) => this.saveEventsData(res));
+    },
     changeWidth(value) {
       this.sidebarWidth = value;
     },
@@ -90,6 +93,7 @@ export default {
     },
   },
   mounted() {
+    this.fetchPersonsData();
     this.fetchEventsData();
   },
 };
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index b0ad6a7..1199141 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -13,7 +13,7 @@
         border-none
       )  
       base-input(
-        v-if="selectedEventData.employees",
+        v-else,
         v-model:value="employeeName",
         :width-input="72",
         disabled,
@@ -46,7 +46,7 @@
           border-none
         )
         base-input(
-          v-if="selectedEventData.members",
+          v-else,
           v-model:value="memberName",
           disabled,
           :width-input="346"
@@ -85,14 +85,22 @@
             placeholder="E-mail"
             :width-input="72"
           )
-    base-button.styled-button.text-base.font-semibold(
-      :size="40"
-      :disabled="disabledButton"
+    base-button.create-button.text-base.font-semibold(
+      v-if="!selectedEventData.id",
+      :size="40",
+      :disabled="disabledCreateButton",
       @click="sendEventData"
     ) Создать событие
+    base-button.update-button.text-base.font-semibold(
+      v-else,
+      :size="40",
+      :disabled="disabledUpdateButton",
+      @click="updateEventData",
+    ) Сохранить
 </template>
 
 <script>
+import { fetchWrapper } from "@/shared/fetchWrapper.js";
 import BaseInputTime from "@/components/base/BaseInputTime.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";
@@ -196,7 +204,6 @@ export default {
             contacts: elem.contacts,
           });
         });
-        console.log(filteredArray);
         return filteredArray;
       }
       return [];
@@ -228,19 +235,32 @@ export default {
       }
       return "";
     },
-    disabledButton() {
+    disabledCreateButton() {
       if (
         this.eventDate &&
         this.startTime &&
         this.endTime &&
-        this.members &&
-        this.employees &&
+        this.members.person &&
+        this.employees.employee &&
         this.kind
       ) {
         return false;
       }
       return true;
     },
+    disabledUpdateButton() {
+      let start = moment.parseZone(this.selectedEventData.start);
+      let end = moment.parseZone(this.selectedEventData.end);
+      if (
+        this.eventDate === start.format("YYYY-MM-DD") &&
+        this.startTime === start.format("HH:mm") &&
+        this.endTime === end.format("HH:mm") &&
+        this.kind === this.selectedEventData.kind
+      ) {
+        return true;
+      }
+      return false;
+    },
     startDate() {
       return this.selectedEventData.start
         ? moment.parseZone(this.selectedEventData.start)
@@ -256,29 +276,27 @@ export default {
         return this.selectedEventData.employees;
       }
       return {
-        id: null,
         employee: null,
         role: this.EMPLOYEE_TYPE,
       };
     },
+    eventMember() {
+      return this.selectedEventData.members
+        ? this.selectedEventData.members
+        : {
+            person: null,
+            role: this.MEMBER_TYPE,
+          };
+    },
     eventKind() {
       return this.selectedEventData.kind ? this.selectedEventData.kind : "";
     },
     eventId() {
       return this.selectedEventData.id ? this.selectedEventData.id : "";
     },
-    eventMember() {
-      return this.selectedEventData.members
-        ? this.selectedEventData.members
-        : {
-            id: null,
-            person: null,
-            role: this.MEMBER_TYPE,
-          };
-    },
     kindSelectWidth() {
       return {
-        width: this.kind ? `${this.kind.length * 9 + 65}px` : "164px",
+        width: this.kind ? `${this.kind.length * 9 + 86}px` : "180px",
       };
     },
   },
@@ -298,25 +316,33 @@ export default {
     },
     sendEventData() {
       this.eventData = {
-        id: this.id,
         start: this.mergeDate(this.eventDate, this.startTime),
         end: this.mergeDate(this.eventDate, this.endTime),
         kind: this.kind,
-        employees: this.selectedEventData.employees
-          ? this.employees
-          : this.findEmployee(
-              this.ownersData,
-              this.ownersList,
-              this.employees.employee
-            ),
-        members: this.selectedEventData.members
-          ? this.members
-          : this.findMember(
-              this.membersData,
-              this.membersList,
-              this.members.person
-            ),
+        employees: this.findPerson(
+          this.ownersData,
+          this.ownersList,
+          this.employees,
+          "employee"
+        ),
+        members: this.findPerson(
+          this.membersData,
+          this.membersList,
+          this.members,
+          "person"
+        ),
       };
+      this.postCreateEvent(this.eventData);
+      this.clearForm();
+      this.eventData = {};
+    },
+    updateEventData() {
+      this.eventData = {
+        start: this.mergeDate(this.eventDate, this.startTime),
+        end: this.mergeDate(this.eventDate, this.endTime),
+        kind: this.kind,
+      };
+      this.postUpdateEvent(this.id, this.eventData);
       this.clearForm();
       this.eventData = {};
     },
@@ -325,37 +351,31 @@ export default {
       this.closeForm();
     },
     mergeDate(eventDate, time) {
-      return moment(`${eventDate} ${time}`).format();
+      return moment(`${eventDate} ${time}`).format("YYYY-MM-DDTHH:mm:ss");
     },
-    findEmployee(requestedList, serializedList, employee) {
-      let foundId = serializedList.find(({ label }) => label === employee).id;
+    findPerson(requestedList, serializedList, object, field) {
+      let foundId = serializedList.find(
+        ({ label }) => label === object[field]
+      ).id;
       let foundPerson = requestedList.find(({ id }) => id === foundId);
       return {
-        id: this.employees.id,
-        employee: {
+        [field]: {
           id: foundPerson.id,
           last_name: foundPerson.last_name,
           first_name: foundPerson.first_name,
           patronymic: foundPerson.patronymic,
           color: foundPerson.color,
         },
-        role: this.employees.role,
+        role: object.role,
       };
     },
-    findMember(requestedList, serializedList, member) {
-      let foundId = serializedList.find(({ label }) => label === member).id;
-      let foundPerson = requestedList.find(({ id }) => id === foundId);
-      return {
-        id: this.members.id,
-        person: {
-          id: foundPerson.id,
-          last_name: foundPerson.last_name,
-          first_name: foundPerson.first_name,
-          patronymic: foundPerson.patronymic,
-          color: foundPerson.color,
-        },
-        role: this.members.role,
-      };
+    postCreateEvent(event) {
+      fetchWrapper.post("registry/event/create/", event);
+    },
+    postUpdateEvent(id, event) {
+      fetchWrapper
+        .post(`registry/event/${id}/update/`, event)
+        .then(this.$emit("update-events"));
     },
   },
   watch: {
@@ -435,8 +455,10 @@ export default {
   color: var(--font-dark-blue-color)
   &:hover
     color: var(--btn-blue-color)
-.styled-button
+.create-button
   width: 183px
 .select
   height: 40px
+.update-button
+  width: 132px
 </style>
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index d4a0507..a190473 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -49,6 +49,7 @@
         :members-data="membersData"
         :selected-event-data="selectedEvent"
         @clear-selected-event-data="clearSelectedEvent"
+        @update-events="transmitUpdateEvents"
       )
 </template>
 
@@ -311,6 +312,9 @@ export default {
     clearSelectedEvent() {
       this.selectedEvent = {};
     },
+    transmitUpdateEvents() {
+      this.$emit("update-events");
+    },
   },
   watch: {
     currentTime() {

From 83a4cc67f0db59750d8d331b5cf2f1fd48cda192 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 7 Nov 2022 15:07:51 +0300
Subject: [PATCH 4/5] =?UTF-8?q?WIP=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20logout=20=D0=BD=D0=B0=20=D0=BA=D0=BD=D0=BE=D0=BF?=
 =?UTF-8?q?=D0=BA=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TheHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index a27cd65..99e567f 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -15,7 +15,7 @@
         :icon-right-size="18",
         @click="isOpenCreate=true"
         )
-      button.header-buttons.flex.justify-center.items-center.mr-8.p-0
+      button.header-buttons.flex.justify-center.items-center.mr-8.p-0(@click="logout")
         .icon-bell.text-xxl
       .flex.justify-centflexer.items-center
         base-avatar.mr-2(:size="32")

From a27ff0ea0664c2ad3729243563e629ada7edc890 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 7 Nov 2022 15:14:00 +0300
Subject: [PATCH 5/5] =?UTF-8?q?WIP=20=D0=92=D0=B5=D1=80=D0=BD=D1=83=D0=BB?=
 =?UTF-8?q?=D0=B0=20OldBaseSelect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/OldBaseSelect.vue | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/base/OldBaseSelect.vue b/src/components/base/OldBaseSelect.vue
index 226c0c0..89feefa 100644
--- a/src/components/base/OldBaseSelect.vue
+++ b/src/components/base/OldBaseSelect.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
-  .flex.box-border.container.items-center.cursor-pointer.relative.py-10px.px-4.justify-between(
+  .flex.box-border.container.items-center.cursor-pointer.relative(
     @click="changeSelect"
-    :class="{border: styleBorder }"
+    :class="{border: styleBorder, 'py-2.5 px-4':!forNetworks, 'justify-center':forNetworks, 'justify-between':!forNetworks}"
     )
-    .flex.mr-2
+    .flex.mr-2(v-if="!forNetworks")
       input.text-base.select.cursor-pointer(
           :size="sizeInput"
           v-model="optionData"
@@ -20,9 +20,20 @@
           @click="(e) => chooseOption(e)"
           :key="data.id || data"
           :id="data.id || data"
-          ) {{data.label || data}}
+          ) {{data.name || data}}
+    .flex.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData, 'px-2.5'")
+      .absolute.options.top-11.left-0(
+        v-show="isSelectOpen"
+        :id="id")
+        .flex.option.justify-center.py-1.text-xl(
+          v-for="data in listData"
+          @click="(e) => chooseOption(e)"
+          :key="data.network"
+          :id="data.network"
+          :class="data.icon"
+          )
     .select-form-separator.cursor-pointer.mr-6px(v-if="separator")
-    .text-xsm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isSelectOpen}")
+    .text-xsm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
 </template>
 
 <script>
@@ -37,6 +48,7 @@ export default {
     optionData: String,
     listData: Array,
     chooseOption: Function,
+    forNetworks: Boolean,
     placeholder: {
       type: String,
       default: "",
@@ -55,8 +67,8 @@ export default {
         let filteredList = [];
         filteredList = this.listData.filter((elem) => {
           let reg = new RegExp(`${this.optionData}`, "img");
-          if (elem.label) {
-            return elem.lebel.match(reg);
+          if (elem.name) {
+            return elem.name.match(reg);
           }
           return elem.match(reg);
         });