Настроила сохранение ФИО исполнителя в форме

2022-10-31 23:13:06 +03:00
parent 174745b182
commit f5c045998c
5 changed files with 89 additions and 60 deletions
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -15,21 +15,21 @@
        :id="id"
        )
        .option.px-4.py-1(
-          v-for="responsible in listData"
+          v-for="data in listData"
          @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}")
--- 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,12 @@
      @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"
+    )
 </template>

 <script>
@@ -37,13 +42,13 @@ export default {
        dayEndTime: "20:00",
      },
      eventsData: [],
-      teamData: [],
+      employeesData: [],
      isOpenForm: false,
    };
  },
  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 +59,16 @@ export default {
    saveEventsData(res) {
      this.eventsData = res.results;
    },
-    saveTeamData(res) {
-      this.teamData = res.results;
+    saveEmployeesData(res) {
+      this.employeesData = 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));
    },
    changeWidth(value) {
      this.sidebarWidth = value;
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -1,14 +1,14 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.absolute.right-2.bottom-14
+  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.absolute.right-2.bottom-14(@click="output")
    .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")
      base-select(
        :size-input="responsibleInputSize"
-        :option-data="eventData.responsible"
-        :list-data="listResponsible"
-        :choose-option="chooseOptionResponsible"
+        :option-data="ownerName"
+        :list-data="filteredOwners"
+        :choose-option="chooseOptionOwner"
        placeholder="Выберите ответственного"
        separator
      )
@@ -19,13 +19,13 @@
        .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="eventData.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="eventData.end"
                placeholder ="12:30"
              )
      .flex.gap-x-4.items-center
@@ -70,8 +70,11 @@ export default {
  components: { BaseSelect, BaseButton },
  props: {
    closeForm: Function,
-    listResponsible: {
-      default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."],
+    ownersData: {
+      type: Array,
+      default() {
+        return [];
+      },
    },
  },
  data() {
@@ -81,6 +84,17 @@ export default {
      kindEventSize: 10,
      kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
      eventData: {
+        start: "",
+        end: "",
+        kind: "",
+        members: [],
+        employees: [
+          {
+            employee: null,
+            role: "owner",
+          },
+        ],
+        contacts: [],
        responsible: "",
        eventClient: "",
        timeEvent: {
@@ -88,16 +102,36 @@ export default {
          secondTime: "",
        },
        kindEvent: "",
-        contacts: {},
      },
    };
  },
+  computed: {
+    filteredOwners() {
+      if (this.ownersData) {
+        let filteredArray = [];
+        this.ownersData.forEach((elem) => {
+          filteredArray.push({
+            id: elem.id,
+            name: this.trimName(elem),
+          });
+        });
+        return filteredArray;
+      }
+      return ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."];
+    },
+    ownerName() {
+      if (this.eventData.employees[0].employee) {
+        return this.trimName(this.eventData.employees[0].employee);
+      }
+      return "";
+    },
+  },
  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.split(" ")[0]
+      );
+      this.eventData.employees[0].employee = foundEmployee;
    },
    chooseOptionTypeEvent(e) {
      this.eventData.kindEvent = e.target.id;
@@ -110,6 +144,9 @@ export default {
        );
      }
    },
+    trimName(obj) {
+      return `${obj.last_name} ${obj.first_name[0]}.${obj.patronymic[0]}.`;
+    },
  },
 };
 </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;