WIP Исправлена ошибка запросов, сделано удаление

src/pages/calendar/TheCalendar.vue

@@ -21,17 +21,27 @@
       @open-change-form="openFormCreateEvent"
       @reset-change-form="resetChangeFormState"
       @selected-event="writeEventData"
+      @delete-event="openModal"
     )
     calendar-form-add-event(
-        v-if="isOpenForm"
-        :close-form="closeFormCreateEvent"
-        :owners-data="employeesData"
-        :members-data="membersData"
-        :selected-event-data="selectedEvent"
+      v-if="isOpenForm"
+      :close-form="closeFormCreateEvent"
+      :owners-data="employeesData"
+      :members-data="membersData"
+      :selected-event-data="selectedEvent"
+      :event-types="eventTypes"
+      @clear-selected-event-data="clearSelectedEvent"
+      @update-events="fetchEventsData"
+      @close-change-form="setChangeFormState"
+    )
+    base-modal(
+      v-model="showModal"
+      title="Удаление события"
+    ) 
+      calendar-delete-modal(
         :event-types="eventTypes"
-        @clear-selected-event-data="clearSelectedEvent"
-        @update-events="fetchEventsData"
-        @close-change-form="setChangeFormState"
+        :owner-event="selectedEvent"
+        :close-modal="changeShowModal"
       )
 </template>
 
@@ -41,12 +51,16 @@ import * as moment from "moment/moment";
 import CalendarSchedule from "./components/CalendarSchedule.vue";
 import CalendarSidebar from "./components/CalendarSidebar.vue";
 import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import CalendarDeleteModal from "./components/CalendarDeleteModal.vue";
 export default {
   name: "TheCalendar",
   components: {
     CalendarSchedule,
     CalendarSidebar,
     CalendarFormAddEvent,
+    BaseModal,
+    CalendarDeleteModal,
   },
   data() {
     return {
@@ -54,6 +68,7 @@ export default {
       calendarLayout: "",
       currentDate: moment(),
       selectedEvent: {},
+      showModal: false,
       timeInformation: {
         dayStartTime: "08:00",
         dayEndTime: "20:00",
@@ -100,7 +115,7 @@ export default {
     },
     fetchEventsData() {
       fetchWrapper
-        .get("registry/event/")
+        .get("registry/event/?limit=20")
         .then((res) => this.saveEventsData(res));
     },
     changeWidth(value) {
@@ -125,6 +140,21 @@ export default {
     clearSelectedEvent() {
       this.selectedEvent = {};
     },
+    openModal(eventData) {
+      this.selectedEvent = eventData;
+      this.showModal = true;
+    },
+    changeShowModal() {
+      this.showModal = false;
+    },
+  },
+  watch: {
+    showModal: function () {
+      if (this.showModal === false) {
+        this.setChangeFormState();
+        this.clearSelectedEvent();
+      }
+    },
   },
   mounted() {
     this.fetchPersonsData();

src/pages/calendar/components/CalendarColumn.vue

@@ -23,6 +23,7 @@
         :change-form-was-closed="changeFormWasClosed"
         @selected-event="transmitEventData"
         @reset-change-form="transmitResetChangeForm"
+        @delete-event="transmitDeleteEvent"
       )
 </template>
 
@@ -96,6 +97,9 @@ export default {
     transmitResetChangeForm() {
       this.$emit("reset-change-form");
     },
+    transmitDeleteEvent(eventData) {
+      this.$emit("delete-event", eventData);
+    },
   },
 };
 </script>

src/pages/calendar/components/CalendarDeleteModal.vue

@@ -0,0 +1,58 @@
+<template lang="pug">
+  .flex.flex-col.mb-1.mt-4
+    span.font-medium.text-base.modal-text.mb-3 Вы действительно хотите удалить это событие?
+    .card-container
+      calendar-event-description-card(
+        disabled,
+        :event-types="eventTypes",
+        :owner-event="ownerEvent"
+      )
+    .flex.gap-x-3.mt-6.font-semibold
+      base-button(
+        outlined,
+        :size=40,
+        @click="closeModal"
+      ) Отменить
+      base-button(
+        outlined-red,
+        :size=40,
+        @click="deleteEvent"
+      ) Удалить
+</template>
+
+<script>
+import { fetchWrapper } from "@/shared/fetchWrapper.js";
+import BaseButton from "@/components/base/BaseButton.vue";
+import CalendarEventDescriptionCard from "./CalendarEventDescriptionCard.vue";
+export default {
+  name: "CalendarDeleteModal",
+  components: { CalendarEventDescriptionCard, BaseButton },
+  props: {
+    ownerEvent: Object,
+    eventTypes: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    closeModal: Function,
+  },
+  methods: {
+    deleteEvent() {
+      fetchWrapper.del(`registry/event/${this.ownerEvent.id}/delete/`);
+      this.closeModal();
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.modal-text
+  color: var(--font-grey-color)
+
+.card-container
+  width: 374px
+  height: 82px
+  border-radius: 4px
+  border: 1px solid var(--border-light-grey-color-1)
+</style>

src/pages/calendar/components/CalendarEventCard.vue

@@ -25,11 +25,9 @@
       :style="descriptionCardPosition"
       :owner-event="ownerEvent"
       :event-types="eventTypes"
-      :event-time="eventTime"
-      :event-member="eventMember"
-      :description="description"
       @selected-event="transmitEventData"
       @close-description-card="closeDescriptionCard"
+      @delete-event="transmitDeleteEvent"
     )
   </template>
 
@@ -210,6 +208,9 @@ export default {
       this.$emit("selected-event", this.ownerEvent);
       this.hideDescriptionCard();
     },
+    transmitDeleteEvent() {
+      this.$emit("delete-event", this.ownerEvent);
+    },
     hideDescriptionCard() {
       this.isOpenDescriptionCard = false;
     },

src/pages/calendar/components/CalendarEventDescriptionCard.vue

@@ -1,20 +1,21 @@
 <template lang="pug">
   .wrapper.px-4.pt-14px.pb-4.font-medium.cursor-auto(
     :style="typeColor",
-    v-click-outside="close"
+    v-click-outside="close",
+    :class="{'shadow': !disabled}"
   )
     .flex.justify-between.items-center.mb-2
       .flex
         span.inline-block.font-bold.text-base.mr-3.mt-2px {{ eventTime }}
         .type.text-xxs.px-14px.py-1(v-if="isCertainType")
           span.type-text {{ ownerEvent.kind }}
-      .right-side.flex.gap-x-4.text-sm
-        .icon-basket.flex.items-center.cursor-pointer
+      .right-side.flex.gap-x-4.text-sm(v-if="!disabled")
+        .icon-basket.flex.items-center.cursor-pointer(@click="transmitDeleteEvent")
         .icon-edit.flex.items-center.cursor-pointer(@click="transmitEventData")
         .icon-cancel.text-xxs.flex.items-center.cursor-pointer(@click="close")
     .body.mr-6
       span.text-base  {{ eventMember }}
-      .flex.text-xxs.mt-4.justify-between
+      .flex.text-xxs.mt-4.justify-between(v-if="!disabled")
         .column
           ul
             li(v-for="elem in description" :key="elem") {{ elem }}
@@ -31,15 +32,10 @@ export default {
         return [];
       },
     },
-    eventTime: {
-      type: String,
-      default: "",
+    disabled: {
+      type: Boolean,
+      default: false,
     },
-    eventMember: {
-      type: String,
-      default: "",
-    },
-    description: Array,
   },
   data() {
     return {
@@ -74,6 +70,26 @@ export default {
           return {};
       }
     },
+    eventTime() {
+      return `${this.trimTime(this.ownerEvent.start)} - ${this.trimTime(
+        this.ownerEvent.end
+      )}`;
+    },
+    eventMember() {
+      let membersArray = this.ownerEvent.members;
+      if (membersArray.length > 1) {
+        let primaryMember = membersArray.find(
+          (elem) => elem.role === "primary"
+        );
+        return this.composeFullName(primaryMember.person);
+      }
+      return this.composeFullName(membersArray[0].person);
+    },
+    description() {
+      return this.ownerEvent.description
+        ? this.ownerEvent.description.split(", ")
+        : [];
+    },
   },
   methods: {
     changeType() {
@@ -82,8 +98,17 @@ export default {
     transmitEventData() {
       this.$emit("selected-event");
     },
+    transmitDeleteEvent() {
+      this.$emit("delete-event");
+    },
     close() {
-      this.$emit("close-description-card");
+      if (!this.disabled) this.$emit("close-description-card");
+    },
+    trimTime(time) {
+      return time.slice(11, -4);
+    },
+    composeFullName(object) {
+      return `${object.last_name} ${object.first_name} ${object.patronymic}`;
     },
   },
 };
@@ -93,8 +118,10 @@ export default {
 .wrapper
   height: auto !important
   background-color: var(--default-white)
+  color: var(--font-dark-blue-color)
+
+.shadow
   border-radius: 4px
-  color: var(--font-black-color)
   box-shadow: var(--default-shadow)
 
 .type

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -225,7 +225,7 @@ export default {
             label: this.trimOwnerName(last_name, first_name, patronymic),
           },
           id: rest.id,
-          role: rest.role,
+          role: rest?.role || this.EMPLOYEE_TYPE,
         };
       }
       return {
@@ -254,7 +254,7 @@ export default {
             label: this.trimMemberName(last_name, first_name, patronymic),
           },
           id: rest.id,
-          role: rest.role,
+          role: rest?.role || this.MEMBER_TYPE,
         };
       }
       return {

src/pages/calendar/components/CalendarSchedule.vue

@@ -24,6 +24,7 @@
           :change-form-was-closed="changeFormWasClosed"
           @selected-event="transmitEventData"
           @reset-change-form="transmitResetChangeForm"
+          @delete-event="transmitDeleteEvent"
         )
       .flex.w-full.relative
         .time-coil-wrapper.left-0.-mt-12.pt-9
@@ -320,6 +321,9 @@ export default {
     transmitEventData(eventData) {
       this.$emit("selected-event", eventData);
     },
+    transmitDeleteEvent(eventData) {
+      this.$emit("delete-event", eventData);
+    },
   },
   watch: {
     currentTime() {