Merge pull request #104 from dderbentsov/UC-43

WIP Вернула OldBaseSelect

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")

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>
@@ -48,11 +50,13 @@ 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
     opacity: 0
 .border-none
   border: none
+.input
+  background-color: inherit
 </style>

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 }")
+  .base-select(@click="open = !open", :class="{'open': open, 'border-none': borderNone}")
-    .placeholder.text-base {{ value || placeholder }}
+    .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 }}
@@ -19,6 +21,8 @@ export default {
       type: Array,
       default: () => [],
     },
+    borderNone: Boolean,
+    separator: Boolean,
   },
   emits: ["update:modelValue"],
   data() {
@@ -86,4 +90,18 @@ 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
+.select-form-separator
+  background-color: var(--btn-blue-color-3)
+  height: 24px
+  width: 1px
+  border-radius: 1px
 </style>

src/components/base/OldBaseSelect.vue

@@ -38,7 +38,7 @@
 
 <script>
 export default {
-  name: "BaseSelect",
+  name: "OldBaseSelect",
   props: {
     id: String,
     styleBorder: {

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

@@ -3,16 +3,21 @@
     .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(
+      base-select.select(
-        id="owners"
+        v-if="!selectedEventData.employees",
-        :size-input="ownerSelectSize"
+        :items="ownersList",
-        :option-data="ownerName"
+        v-model="employees.employee",
-        :list-data="ownersList"
+        placeholder="Выберите ответственного",
-        :choose-option="chooseOptionOwner"
-        placeholder="Выберите ответственного"
         separator
-        disabled
+        border-none
+      )  
+      base-input(
+        v-else,
+        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(
+        base-select.select(
-          id="members"
+          v-if="!selectedEventData.members",
-          :size-input="memberSelectSize"
+          :items="membersList",
-          :list-data="membersList"
+          v-model="members.person",
-          :optionData="memberName"
+          placeholder="Выберите ответственного",
-          :choose-option="chooseOptionMember"
-          @changeInput="addMember"
-          placeholder="Выберите участника"
           separator
+          border-none
         )
+        base-input(
+          v-else,
+          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(
+      base-select.select(
-        id="kind"
+        v-model="kind"
-        :size-input="kindEventSelectSize"
+        :items="kindEvents"
-        :option-data="kind"
-        :list-data="kindEvents"
-        :choose-option="chooseOptionTypeEvent"
         placeholder="Вид события"
         separator
-        disabled
+        border-none
+        :style="kindSelectWidth"
       )
     .flex.flex-col.gap-y-2
       .flex.gap-x-4.items-center
@@ -77,18 +85,26 @@
             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 BaseSelect from "@/components/base/OldBaseSelect";
+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";
+import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseButton from "@/components/base/BaseButton";
 import * as moment from "moment/moment";
 export default {
@@ -124,9 +140,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 +179,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,7 +196,11 @@ 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,
           });
         });
@@ -167,40 +208,58 @@ export default {
       }
       return [];
     },
-    ownerName() {
-      if (this.employees.employee) {
-        return this.trimOwnerName(this.employees.employee);
-      }
-      return "";
-    },
     memberName() {
-      if (this.members.person) {
+      if (this.selectedEventData.members) {
-        return this.trimMemberName(this.members.person);
+        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 "";
     },
-    disabledButton() {
+    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 "";
+    },
+    disabledCreateButton() {
       if (
-        (this.eventDate,
+        this.eventDate &&
-        this.startTime,
+        this.startTime &&
-        this.endTime,
+        this.endTime &&
-        this.employees.employee && this.members.person && this.kind)
+        this.members.person &&
+        this.employees.employee &&
+        this.kind
       ) {
         return false;
       }
       return true;
     },
-    ownerSelectSize() {
+    disabledUpdateButton() {
-      if (this.ownerName) {
+      let start = moment.parseZone(this.selectedEventData.start);
-        return this.ownerName.split(" ").join("").length;
+      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 22;
+      return false;
-    },
-    kindEventSelectSize() {
-      if (this.kind) {
-        return this.kind.split(" ").join("").length;
-      }
-      return 10;
     },
     startDate() {
       return this.selectedEventData.start
@@ -212,33 +271,36 @@ export default {
         ? moment.parseZone(this.selectedEventData.end)
         : moment();
     },
+    eventEmployee() {
+      if (this.selectedEventData.employees) {
+        return this.selectedEventData.employees;
+      }
+      return {
+        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 : "";
+    },
+    kindSelectWidth() {
+      return {
+        width: this.kind ? `${this.kind.length * 9 + 86}px` : "180px",
+      };
+    },
   },
   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,37 +308,74 @@ export default {
         );
       }
     },
-    trimOwnerName(obj) {
+    trimOwnerName(lastName, firsName, patronymic) {
-      return `${obj.last_name} ${obj.first_name[0]}.${obj.patronymic[0]}.`;
+      return `${lastName} ${firsName[0]}.${patronymic[0]}.`;
     },
-    trimMemberName(obj) {
+    trimMemberName(lastName, firsName, patronymic) {
-      return `${obj.last_name} ${obj.first_name} ${obj.patronymic}`;
+      return `${lastName} ${firsName} ${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],
-        };
-      }
     },
     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.employees],
+        employees: this.findPerson(
-        members: [this.members],
+          this.ownersData,
+          this.ownersList,
+          this.employees,
+          "employee"
+        ),
+        members: this.findPerson(
+          this.membersData,
+          this.membersList,
+          this.members,
+          "person"
+        ),
       };
-      this.closeForm();
+      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 = {};
+    },
+    clearForm() {
+      this.$emit("clear-selected-event-data");
+      this.closeForm();
+    },
     mergeDate(eventDate, time) {
-      return moment(`${eventDate} ${time}`).format();
+      return moment(`${eventDate} ${time}`).format("YYYY-MM-DDTHH:mm:ss");
+    },
+    findPerson(requestedList, serializedList, object, field) {
+      let foundId = serializedList.find(
+        ({ label }) => label === object[field]
+      ).id;
+      let foundPerson = requestedList.find(({ id }) => id === foundId);
+      return {
+        [field]: {
+          id: foundPerson.id,
+          last_name: foundPerson.last_name,
+          first_name: foundPerson.first_name,
+          patronymic: foundPerson.patronymic,
+          color: foundPerson.color,
+        },
+        role: object.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: {
@@ -301,18 +400,10 @@ export default {
       immediate: true,
       handler(newDate) {
         if (newDate) {
-          this.id = this.selectedEventData.id || null;
+          this.id = this.eventId;
-          this.kind = this.selectedEventData.kind || "";
+          this.kind = this.eventKind;
-          this.employees = this.selectedEventData.employees[0] || {
+          this.employees = this.eventEmployee;
-            id: null,
+          this.members = this.eventMember;
-            employee: null,
-            role: this.EMPLOYEE_TYPE,
-          };
-          this.members = this.selectedEventData.members[0] || {
-            id: null,
-            person: null,
-            role: this.EMPLOYEE_TYPE,
-          };
         }
       },
     },
@@ -364,6 +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

@@ -48,6 +48,8 @@
         :owners-data="ownersData"
         :members-data="membersData"
         :selected-event-data="selectedEvent"
+        @clear-selected-event-data="clearSelectedEvent"
+        @update-events="transmitUpdateEvents"
       )
 </template>
 
@@ -112,22 +114,7 @@ export default {
       pixelsPerHour: 62,
       columnHeaderHeight: 48,
       defaultColumnWidth: 470,
-      selectedEvent: {
+      selectedEvent: {},
-        id: null,
-        start: "",
-        end: "",
-        kind: "",
-        employees: {
-          employee: null,
-          role: "owner",
-          id: null,
-        },
-        members: {
-          person: null,
-          role: null,
-          id: null,
-        },
-      },
     };
   },
   computed: {
@@ -322,6 +309,12 @@ export default {
       this.selectedEvent = eventData;
       this.$emit("open-change-form");
     },
+    clearSelectedEvent() {
+      this.selectedEvent = {};
+    },
+    transmitUpdateEvents() {
+      this.$emit("update-events");
+    },
   },
   watch: {
     currentTime() {