WIP Реальзовала изменение события на сервер

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

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

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>

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>

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() {
+    fetchPersonsData() {
-      fetchWrapper
-        .get("registry/event/")
-        .then((res) => this.saveEventsData(res));
       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();
   },
 };

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(
+    base-button.create-button.text-base.font-semibold(
-      :size="40"
+      v-if="!selectedEventData.id",
-      :disabled="disabledButton"
+      :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.members.person &&
-        this.employees &&
+        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
+        employees: this.findPerson(
-          ? this.employees
+          this.ownersData,
-          : this.findEmployee(
+          this.ownersList,
-              this.ownersData,
+          this.employees,
-              this.ownersList,
+          "employee"
-              this.employees.employee
+        ),
-            ),
+        members: this.findPerson(
-        members: this.selectedEventData.members
+          this.membersData,
-          ? this.members
+          this.membersList,
-          : this.findMember(
+          this.members,
-              this.membersData,
+          "person"
-              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) {
+    findPerson(requestedList, serializedList, object, field) {
-      let foundId = serializedList.find(({ label }) => label === employee).id;
+      let foundId = serializedList.find(
+        ({ label }) => label === object[field]
+      ).id;
       let foundPerson = requestedList.find(({ id }) => id === foundId);
       return {
-        id: this.employees.id,
+        [field]: {
-        employee: {
           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) {
+    postCreateEvent(event) {
-      let foundId = serializedList.find(({ label }) => label === member).id;
+      fetchWrapper.post("registry/event/create/", event);
-      let foundPerson = requestedList.find(({ id }) => id === foundId);
+    },
-      return {
+    postUpdateEvent(id, event) {
-        id: this.members.id,
+      fetchWrapper
-        person: {
+        .post(`registry/event/${id}/update/`, event)
-          id: foundPerson.id,
+        .then(this.$emit("update-events"));
-          last_name: foundPerson.last_name,
-          first_name: foundPerson.first_name,
-          patronymic: foundPerson.patronymic,
-          color: foundPerson.color,
-        },
-        role: this.members.role,
-      };
     },
   },
   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>

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() {