Merge pull request #91 from dderbentsov/UC-43

WIP Подготовила данные формы создания к отправке

server.js

@@ -494,7 +494,7 @@ export function clientsServer() {
                   id: "db831a14-e836-481f-a653-6325de7c311e",
                   last_name: "Жмыхов",
                   first_name: "Егор",
-                  patronymic: "Сергеевич",
+                  patronymic: "Александрович",
                 },
                 role: null,
               },
@@ -537,7 +537,7 @@ export function clientsServer() {
                   id: "db831a14-e836-481f-a653-6325de7c311e",
                   last_name: "Жмыхов",
                   first_name: "Егор",
-                  patronymic: "Сергеевич",
+                  patronymic: "Александрович",
                 },
                 role: "owner",
               },

src/components/base/BaseSelect.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .flex.box-border.container.items-center.cursor-pointer.relative(
-    @click="openSelect"
+    @click="changeSelect"
     :class="{border: styleBorder, 'py-2.5 px-4':!forNetworks, 'justify-center':forNetworks, 'justify-between':!forNetworks}"
     )
     .flex.mr-2(v-if="!forNetworks")
@@ -8,28 +8,29 @@
           :size="sizeInput"
           v-model="optionData"
           :placeholder="placeholder"
-          disabled
+          :disabled="disabled"
+          @input="sendData"
         )
       .absolute.options.top-12.left-0(
         v-show="isSelectOpen"
         :id="id"
         )
         .option.px-4.py-1(
-          v-for="responsible in listData"
+          v-for="data in filteredListData"
           @click="(e) => chooseOption(e)"
-          :key="responsible"
+          :key="data.id || data"
-          :id="responsible"
+          :id="data.id || data"
-          ) {{responsible}}
+          ) {{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="responsible in listData"
+          v-for="data in listData"
           @click="(e) => chooseOption(e)"
-          :key="responsible.network"
+          :key="data.network"
-          :id="responsible.network"
+          :id="data.network"
-          :class="responsible.icon"
+          :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(v-if="!forNetworks" :class="{ open: isSelectOpen}")
@@ -53,16 +54,43 @@ export default {
       default: "",
     },
     sizeInput: Number,
+    disabled: Boolean,
   },
   data() {
     return {
       isSelectOpen: false,
     };
   },
+  computed: {
+    filteredListData() {
+      if (!this.disabled && this.optionData) {
+        let filteredList = [];
+        filteredList = this.listData.filter((elem) => {
+          let reg = new RegExp(`${this.optionData}`, "img");
+          if (elem.name) {
+            return elem.name.match(reg);
+          }
+          return elem.match(reg);
+        });
+        filteredList.length === 0 ? this.closeSelect() : this.openSelect();
+        return filteredList;
+      }
+      return this.listData;
+    },
+  },
   methods: {
-    openSelect() {
+    changeSelect() {
       this.isSelectOpen = !this.isSelectOpen;
     },
+    openSelect() {
+      this.isSelectOpen = true;
+    },
+    closeSelect() {
+      this.isSelectOpen = false;
+    },
+    sendData(e) {
+      this.$emit("changeInput", e.target.value);
+    },
   },
 };
 </script>

src/pages/calendar/TheCalendar.vue

@@ -1,9 +1,10 @@
 <template lang="pug">
   .calendar-container.flex
     calendar-sidebar(@width="changeWidth"
-    :team-data="teamData"
+    :team-data="employeesData"
     :open-form-create="openFormCreateEvent")
     calendar-schedule(
+      :owners-data="employeesData"
       :current-date="currentDate"
       :time-information="timeInformation"
       :events-data="eventsData"
@@ -12,7 +13,12 @@
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
     )
-    calendar-form-add-event(v-if="isOpenForm" :close-form="closeFormCreateEvent")
+    calendar-form-add-event(
+      v-if="isOpenForm"
+      :close-form="closeFormCreateEvent"
+      :owners-data="employeesData"
+      :members-data="membersData"
+    )
 </template>
 
 <script>
@@ -37,13 +43,14 @@ export default {
         dayEndTime: "20:00",
       },
       eventsData: [],
-      teamData: [],
+      employeesData: [],
       isOpenForm: false,
+      membersData: [],
     };
   },
   methods: {
     switchPreviousDate() {
-      this.currentDate = this.currentDate.clone().subtract(1, "day");
+      this.currentDate = this.currentDate.cloddContactne().subtract(1, "day");
     },
     switchNextDate() {
       this.currentDate = this.currentDate.clone().add(1, "day");
@@ -54,16 +61,22 @@ export default {
     saveEventsData(res) {
       this.eventsData = res.results;
     },
-    saveTeamData(res) {
+    saveEmployeesData(res) {
-      this.teamData = res.results;
+      this.employeesData = res.results;
+    },
+    saveMembersData(res) {
+      this.membersData = res.results;
     },
     fetchEventsData() {
-      fetch("/registry/event/")
+      fetch("http://45.84.227.122:8080/registry/event/")
         .then((res) => res.json())
         .then((res) => this.saveEventsData(res));
       fetch("http://45.84.227.122:8080/general/employee/")
         .then((res) => res.json())
-        .then((res) => this.saveTeamData(res));
+        .then((res) => this.saveEmployeesData(res));
+      fetch("http://45.84.227.122:8080/general/person/")
+        .then((res) => res.json())
+        .then((res) => this.saveMembersData(res));
     },
     changeWidth(value) {
       this.sidebarWidth = value;

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -5,12 +5,14 @@
         span.text-xs.opacity-40.font-bold.leading-3 Ответственный
         .icon-cancel.close-icon.text-xs.cursor-pointer(@click="closeForm")
       base-select(
-        :size-input="responsibleInputSize"
+        id="owners"
-        :option-data="eventData.responsible"
+        :size-input="ownerSelectSize"
-        :list-data="listResponsible"
+        :option-data="ownerName"
-        :choose-option="chooseOptionResponsible"
+        :list-data="ownersList"
+        :choose-option="chooseOptionOwner"
         placeholder="Выберите ответственного"
         separator
+        disabled
       )
     .flex.flex-col.gap-y-2
       span.text-xs.opacity-40.font-bold.leading-3 Основная информация
@@ -19,28 +21,38 @@
         .flex.gap-x-2.items-center
           .time-input.flex.gap-x-2.px-4.py-2.items-center
             input.item-input.text-base.cursor-text(
-                v-model="eventData.timeEvent.firstTime"
+                v-model="start"
                 placeholder ="11:00"
               )
           span —
           .time-input.flex.gap-x-2.px-4.py-2.items-center
             input.item-input.text-base.cursor-text(
-                v-model="eventData.timeEvent.secondTime"
+                v-model="end"
                 placeholder ="12:30"
               )
       .flex.gap-x-4.items-center
         .icon-person.text-xl.icon
-        .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
+        base-select(
-          input.item-input.cursor-text.text-base(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
+          id="members"
+          :size-input="memberSelectSize"
+          :list-data="membersList"
+          :optionData="memberName"
+          :choose-option="chooseOptionMember"
+          @changeInput="addMember"
+          placeholder="Выберите участника"
+          separator
+          )
     .flex.flex-col.gap-y-2
       span.text-xs.opacity-40.font-bold.leading-3 Вид события
       base-select(
-        :size-input="kindEventSize"
+        id="kind"
-        :option-data="eventData.kindEvent"
+        :size-input="kindEventSelectSize"
+        :option-data="kind"
         :list-data="kindEvents"
         :choose-option="chooseOptionTypeEvent"
         placeholder="Вид события"
         separator
+        disabled
       )
     .flex.flex-col.gap-y-2
       .flex.gap-x-4.items-center
@@ -55,14 +67,16 @@
       .flex.gap-x-4.items-center(v-for="(contact, index) in listContacts" :key="index")
         .icon-mail.text-xl.icon
         .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
-          input.item-input.cursor-text.text-base(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
+          input.item-input.cursor-text.text-base(v-model="contacts" type="text" placeholder="E-mail")
     base-button.styled-button.text-base.font-semibold(
     :size="40"
-    @click="closeForm"
+    :disabled="disabledButton"
+    @click="sendEventData"
     ) Создать событие
 </template>
 
 <script>
+import * as moment from "moment/moment";
 import BaseSelect from "@/components/base/BaseSelect";
 import BaseButton from "@/components/base/BaseButton";
 export default {
@@ -70,38 +84,133 @@ export default {
   components: { BaseSelect, BaseButton },
   props: {
     closeForm: Function,
-    listResponsible: {
+    ownersData: {
-      default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."],
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    membersData: {
+      type: Array,
+      default() {
+        return [];
+      },
     },
   },
   data() {
     return {
       listContacts: [1],
-      responsibleInputSize: 22,
+      ownerSelectSize: 22,
-      kindEventSize: 10,
+      kindEventSelectSize: 10,
+      memberSelectSize: 29,
       kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
-      eventData: {
+      eventData: {},
-        responsible: "",
+      members: {
-        eventClient: "",
+        member: null,
-        timeEvent: {
+        role: null,
-          firstTime: "",
-          secondTime: "",
       },
-        kindEvent: "",
+      contacts: [],
-        contacts: {},
+      start: "",
+      end: "",
+      employees: {
+        employee: null,
+        role: "owner",
       },
+      kind: "",
     };
   },
+  computed: {
+    ownersList() {
+      if (this.ownersData) {
+        let filteredArray = [];
+        this.ownersData.forEach((elem) => {
+          filteredArray.push({
+            id: elem.id,
+            name: this.trimOwnerName(elem),
+          });
+        });
+        return filteredArray;
+      }
+      return [];
+    },
+    membersList() {
+      if (this.membersData) {
+        let filteredArray = [];
+        this.membersData.forEach((elem) => {
+          filteredArray.push({
+            id: elem.id,
+            name: this.trimMemberName(elem),
+            contacts: elem.contacts,
+          });
+        });
+        return filteredArray;
+      }
+      return [];
+    },
+    ownerName() {
+      if (this.employees.employee) {
+        return this.trimOwnerName(this.employees.employee);
+      }
+      return "";
+    },
+    memberName() {
+      if (this.members.member) {
+        return this.trimMemberName(this.members.member);
+      }
+      return "";
+    },
+    eventStartTime() {
+      if (this.start) {
+        return `${moment().format("YYYY-MM-DD")}T${this.start}:00Z`;
+      }
+      return "";
+    },
+    eventEndTime() {
+      if (this.end) {
+        return `${moment().format("YYYY-MM-DD")}T${this.end}:00Z`;
+      }
+      return "";
+    },
+    disabledButton() {
+      if (
+        this.eventStartTime &&
+        this.eventEndTime &&
+        this.employees.employee &&
+        this.members.member &&
+        this.kind
+      ) {
+        return false;
+      }
+      return true;
+    },
+  },
   methods: {
-    chooseOptionResponsible(e) {
+    chooseOptionOwner(e) {
-      this.eventData.responsible = e.target.id;
+      let foundEmployee = this.ownersData.find(
-      this.responsibleInputSize = this.eventData.responsible
+        (elem) => elem.id === e.target.id
-        .split(" ")
+      );
-        .join("").length;
+      this.employees.employee = {
+        id: foundEmployee.id,
+        last_name: foundEmployee.last_name,
+        first_name: foundEmployee.first_name,
+        patronymic: foundEmployee.patronymic,
+      };
+      this.ownerSelectSize = this.ownerName.split(" ").join("").length;
     },
     chooseOptionTypeEvent(e) {
-      this.eventData.kindEvent = e.target.id;
+      this.kind = e.target.id;
-      this.kindEventSize = this.eventData.kindEvent.split(" ").join("").length;
+      this.kindEventSelectSize = this.kind.split(" ").join("").length;
+    },
+    chooseOptionMember(e) {
+      let foundMember = this.membersData.find(
+        (elem) => elem.id === e.target.id
+      );
+      this.members.member = {
+        id: foundMember.id,
+        last_name: foundMember.last_name,
+        first_name: foundMember.first_name,
+        patronymic: foundMember.patronymic,
+      };
     },
     addContact(e) {
       if (e.currentTarget.id === "addContact") {
@@ -110,6 +219,33 @@ export default {
         );
       }
     },
+    trimOwnerName(obj) {
+      return `${obj.last_name} ${obj.first_name[0]}.${obj.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.member = {
+          id: null,
+          last_name: memberData[0],
+          first_name: memberData[1],
+          patronymic: memberData[2],
+        };
+      }
+    },
+    sendEventData() {
+      this.eventData = {
+        start: this.eventStartTime,
+        end: this.eventEndTime,
+        kind: this.kind,
+        employees: [this.employees],
+        members: [this.members],
+      };
+      this.closeForm();
+    },
   },
 };
 </script>

src/pages/calendar/components/CalendarSchedule.vue

@@ -77,6 +77,12 @@ export default {
       },
     },
     sidebarWidth: String,
+    ownersData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
   },
   data() {
     return {
@@ -138,34 +144,15 @@ export default {
     },
     filteredOwners() {
       let filteredArray = [];
-      let ownerAbsence = {
+      this.ownersData.forEach((elem) => {
-        id: null,
+        filteredArray.push({
-        last_name: null,
+          id: elem.id,
-        first_name: null,
+          last_name: elem.last_name,
-        patronymic: null,
+          first_name: elem.first_name,
-      };
+          patronymic: elem.patronymic,
-      this.eventsData.forEach(({ employees }) => {
-        let findedElement = employees.find((elem) => elem.role === "owner");
-        let emptyDataPresence = this.findObjectInArray(
-          filteredArray,
-          ownerAbsence
-        );
-        if (!findedElement && !emptyDataPresence) {
-          filteredArray.push(ownerAbsence);
-        }
-        if (findedElement) {
-          let ownerPresence = this.findObjectInArray(
-            filteredArray,
-            findedElement.employee
-          );
-          if (!ownerPresence) {
-            filteredArray.push(findedElement.employee);
-          }
-        }
         });
-      return filteredArray.sort(
+      });
-        (previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
+      return filteredArray;
-      );
     },
     ownersCount() {
       return this.filteredOwners.length;