Merge pull request #91 from dderbentsov/UC-43

WIP Подготовила данные формы создания к отправке
2022-11-01 21:08:02 +03:00
parent 174745b182 055305f584
commit 497b078319
5 changed files with 245 additions and 81 deletions
--- a/server.js
+++ b/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",
              },
--- a/src/components/base/BaseSelect.vue
+++ b/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"
-          :id="responsible"
-          ) {{responsible}}
+          :key="data.id || data"
+          :id="data.id || data"
+          ) {{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"
-          :id="responsible.network"
-          :class="responsible.icon"
+          :key="data.network"
+          :id="data.network"
+          :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>
--- a/src/pages/calendar/TheCalendar.vue
+++ b/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"
@@ -11,8 +12,13 @@
      @previous-date="switchPreviousDate"
      @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) {
-      this.teamData = res.results;
+    saveEmployeesData(res) {
+      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;
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/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"
-        :option-data="eventData.responsible"
-        :list-data="listResponsible"
-        :choose-option="chooseOptionResponsible"
+        id="owners"
+        :size-input="ownerSelectSize"
+        :option-data="ownerName"
+        :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
-          input.item-input.cursor-text.text-base(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
+        base-select(
+          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"
-        :option-data="eventData.kindEvent"
+        id="kind"
+        :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: {
-      default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."],
+    ownersData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    membersData: {
+      type: Array,
+      default() {
+        return [];
+      },
    },
  },
  data() {
    return {
      listContacts: [1],
-      responsibleInputSize: 22,
-      kindEventSize: 10,
+      ownerSelectSize: 22,
+      kindEventSelectSize: 10,
+      memberSelectSize: 29,
      kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
-      eventData: {
-        responsible: "",
-        eventClient: "",
-        timeEvent: {
-          firstTime: "",
-          secondTime: "",
-        },
-        kindEvent: "",
-        contacts: {},
+      eventData: {},
+      members: {
+        member: null,
+        role: null,
      },
+      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) {
-      this.eventData.responsible = e.target.id;
-      this.responsibleInputSize = this.eventData.responsible
-        .split(" ")
-        .join("").length;
+    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,
+      };
+      this.ownerSelectSize = this.ownerName.split(" ").join("").length;
    },
    chooseOptionTypeEvent(e) {
-      this.eventData.kindEvent = e.target.id;
-      this.kindEventSize = this.eventData.kindEvent.split(" ").join("").length;
+      this.kind = e.target.id;
+      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>
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/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 = {
-        id: null,
-        last_name: null,
-        first_name: null,
-        patronymic: null,
-      };
-      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);
-          }
-        }
+      this.ownersData.forEach((elem) => {
+        filteredArray.push({
+          id: elem.id,
+          last_name: elem.last_name,
+          first_name: elem.first_name,
+          patronymic: elem.patronymic,
+        });
      });
-      return filteredArray.sort(
-        (previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
-      );
+      return filteredArray;
    },
    ownersCount() {
      return this.filteredOwners.length;