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

src/components/base/BaseButton.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   button.base-button.text-base(
     :disabled="disabled",
-    :class="{'rounded': rounded, 'outlined': outlined, 'secondary': secondary, 'confirm': confirm, 'added': added}"
+    :class="{'rounded': rounded, 'outlined': outlined, 'outlined-red': outlinedRed, 'secondary': secondary, 'confirm': confirm, 'added': added}"
     :style="{height: size + 'px', minWidth: size + 'px'}"
     )
     .button-container
@@ -25,6 +25,7 @@ export default {
   props: {
     confirm: Boolean,
     outlined: Boolean,
+    outlinedRed: Boolean,
     added: Boolean,
     rounded: Boolean,
     disabled: Boolean,
@@ -84,21 +85,38 @@ export default {
 
 .outlined
   background-color: var(--default-white)
-  border: 1px solid var(--btn-blue-color)
+  border: 1.5px solid var(--btn-blue-color)
   color: var(--btn-blue-color)
   &:active
     background-color: var(--default-white)
-    border: 1px solid var(--font-dark-blue-color)
+    border: 1.5px solid var(--font-dark-blue-color)
     color: var(--font-dark-blue-color)
   &:hover
     background-color: var(--default-white)
-    border: 1px solid var(--btn-blue-color-hover)
+    border: 1.5px solid var(--btn-blue-color-hover)
     color: var(--btn-blue-color-hover)
   &:disabled, &[disabled]
     background-color: var(--default-white)
-    border: 1px solid var(--btn-blue-color-1)
+    border: 1.5px solid var(--btn-blue-color-1)
     color: var(--btn-blue-color-1)
 
+.outlined-red
+  background-color: var(--default-white)
+  border: 1.5px solid var(--border-red-color)
+  color: var(--border-red-color)
+  &:active
+    background-color: var(--default-white)
+    border: 1.5px solid var(--bg-event-red-color)
+    color: var(--bg-event-red-color)
+  &:hover
+    background-color: var(--default-white)
+    border: 1.5px solid var(--bg-event-red-color-1)
+    color: var(--bg-event-red-color-1)
+  &:disabled, &[disabled]
+    background-color: var(--default-white)
+    border: 1.5px solid var(--bg-event-red-color-0)
+    color: var(--bg-event-red-color-0)
+
 .added
   border: 2px solid var(--btn-blue-color)
   &:hover

src/components/base/BaseModal.vue

@@ -4,7 +4,7 @@
       .base-content(v-click-outside="clickOutside")
         .base-header
           .header-title.text {{ title }}
-          .icon-cancel(@click="value = false")
+          .icon-cancel.text-sm(@click="value = false")
         slot
 
 </template>
@@ -56,7 +56,7 @@ export default {
   width: 100vw
   height: 100vh
 .base-content
-  padding: 32px
+  padding: 32px 40px
   background-color: var(--default-white)
   box-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
   border-radius: 4px
@@ -65,7 +65,7 @@ export default {
   font-weight: 700
   font-size: 20px
   line-height: 23px
-
+  color: var(--font-dark-blue-color)
 .base-header
   display: flex
   justify-content: space-between

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"
+      v-if="isOpenForm"
-        :close-form="closeFormCreateEvent"
+      :close-form="closeFormCreateEvent"
-        :owners-data="employeesData"
+      :owners-data="employeesData"
-        :members-data="membersData"
+      :members-data="membersData"
-        :selected-event-data="selectedEvent"
+      :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"
+        :owner-event="selectedEvent"
-        @update-events="fetchEventsData"
+        :close-modal="changeShowModal"
-        @close-change-form="setChangeFormState"
       )
 </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
+      .right-side.flex.gap-x-4.text-sm(v-if="!disabled")
-        .icon-basket.flex.items-center.cursor-pointer
+        .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: {
+    disabled: {
-      type: String,
+      type: Boolean,
-      default: "",
+      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() {

src/shared/fetchWrapper.js

@@ -12,7 +12,8 @@ function handleRequest(method, url, headers, attempts, body) {
     })();
   })
     .then((res) => {
-      return res.json();
+      if (res._bodyText) return res.json();
+      return res.ok;
     })
     .catch((err) => {
       console.log(err);