Merge pull request #98 from dderbentsov/UC-43

WIP Поправила поля ввода даты

src/components/TheHeader.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .header-wrapper.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
     .flex.items-center.box-border.cursor-pointer.mr-auto
-      img.logo-img.mr-29_25px(src="@/assets/images/logo.svg" alt="Logo")
+      img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
       header-inputs
     //- .charge-person-container
     //-   header-active-client-panel(:info="chargePersonInfo")
@@ -10,8 +10,8 @@
       button.header-buttons.flex.justify-center.items-center.mr-8.p-0
         .icon-bell.text-xxl
       .flex.justify-centflexer.items-center
-        base-avatar(:size="32").mr-2
+        base-avatar.mr-2(:size="32")
-          img(:src="avatarSrc")
+          img(:src="avatarSrc", alt="Avatar")
         button.header-buttons
           .icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
 </template>

src/pages/calendar/TheCalendar.vue

@@ -1,23 +1,23 @@
 <template lang="pug">
   .calendar-container.flex
-    calendar-sidebar(@width="changeWidth"
+    calendar-sidebar(
+      @width="changeWidth"
       :team-data="employeesData"
-    :open-form-create="openFormCreateEvent")
+      :open-form-create="openFormCreateEvent"
+    )
     calendar-schedule(
       :owners-data="employeesData"
       :current-date="currentDate"
       :time-information="timeInformation"
       :events-data="eventsData"
+      :members-data="membersData"
       :sidebar-width="sidebarWidth"
+      :close-form-create-event="closeFormCreateEvent"
+      :is-open-form="isOpenForm"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
-    )
+      @open-change-form="openFormCreateEvent"
-    calendar-form-add-event(
-      v-if="isOpenForm"
-      :close-form="closeFormCreateEvent"
-      :owners-data="employeesData"
-      :members-data="membersData"
     )
 </template>
 
@@ -82,7 +82,6 @@ export default {
     changeWidth(value) {
       this.sidebarWidth = value;
     },
-
     openFormCreateEvent() {
       this.isOpenForm = true;
     },

src/pages/calendar/components/CalendarColumn.vue

@@ -3,7 +3,11 @@
     .header.flex.items-center.justify-between.py-2.px-6.top-0
       .flex.items-center
         base-avatar.mr-2(:size="32", :color="ownerData.color")
-          img(:src="ownerData.avatar" alt="Team member" v-if="ownerData.avatar")
+          img(
+            :src="ownerData.avatar"
+            alt="Team member"
+            v-if="ownerData.avatar"
+          )
           span(v-if="!ownerData.avatar") {{ defaultAvatar }}
         span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
@@ -14,6 +18,7 @@
         :key="event.id"
         :ownerEvent="event"
         :style="eventCardPosition(event.start, event.end)"
+        @selected-event="transmitEventData"
       )
 </template>
 
@@ -79,6 +84,9 @@ export default {
         top: `${position}px`,
       };
     },
+    transmitEventData(eventData) {
+      this.$emit("selected-event", eventData);
+    },
   },
 };
 </script>

src/pages/calendar/components/CalendarEventCard.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .wrapper.flex.px-2.my-1.items-start.cursor-pointer(:style="cardHeight")
+  .wrapper.flex.px-2.my-1.items-start.cursor-pointer(:style="cardHeight", @click="transmitEventData")
     .header.flex.justify-between.items-center
       .header-text
         span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
@@ -61,6 +61,9 @@ export default {
     composeFullName(object) {
       return `${object.last_name} ${object.first_name} ${object.patronymic}`;
     },
+    transmitEventData() {
+      this.$emit("selected-event", this.ownerEvent);
+    },
   },
 };
 </script>

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -19,17 +19,30 @@
       .flex.gap-x-4.items-center
         .icon-time.text-xl.icon
         .flex.gap-x-2.items-center
-          .time-input.flex.gap-x-2.px-4.py-2.items-center
+          .time-input.flex.px-4.py-2.items-center
             input.item-input.text-base.cursor-text(
-                v-model="start"
+              v-model="startTime"
               placeholder ="11:00"
             )
           span —
-          .time-input.flex.gap-x-2.px-4.py-2.items-center
+          .time-input.flex.px-4.py-2.items-center
             input.item-input.text-base.cursor-text(
-                v-model="end"
+              v-model="endTime"
               placeholder ="12:30"
             )
+      .flex.items-center.ml-10
+        .flex.gap-x-2.items-center
+          .date-input.flex.px-4.py-2.items-center
+            input.item-input.text-base.cursor-text(
+              v-model="startDate"
+              placeholder ="2022-10-01"
+            )
+          span —
+          .date-input.flex.px-4.py-2.items-center
+            input.item-input.text-base.cursor-text(
+              v-model="endDate"
+              placeholder ="2022-10-01"
+            )
       .flex.gap-x-4.items-center
         .icon-person.text-xl.icon
         base-select(
@@ -64,10 +77,17 @@
         :icon-left-size="10"
         id="addContact"
         @click="(e)=>addContact(e)")
-      .flex.gap-x-4.items-center(v-for="(contact, index) in listContacts" :key="index")
+      .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="contacts" 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"
       :disabled="disabledButton"
@@ -76,7 +96,6 @@
 </template>
 
 <script>
-import * as moment from "moment/moment";
 import BaseSelect from "@/components/base/OldBaseSelect";
 import BaseButton from "@/components/base/BaseButton";
 export default {
@@ -96,12 +115,16 @@ export default {
         return [];
       },
     },
+    selectedEventData: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
   },
   data() {
     return {
       listContacts: [1],
-      ownerSelectSize: 22,
-      kindEventSelectSize: 10,
       memberSelectSize: 29,
       kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
       eventData: {},
@@ -110,13 +133,16 @@ export default {
         role: null,
       },
       contacts: [],
-      start: "",
+      startTime: "",
-      end: "",
+      endTime: "",
       employees: {
         employee: null,
         role: "owner",
       },
+      startDate: "",
+      endDate: "",
       kind: "",
+      id: null,
     };
   },
   computed: {
@@ -160,14 +186,14 @@ export default {
       return "";
     },
     eventStartTime() {
-      if (this.start) {
+      if (this.startTime && this.startDate) {
-        return `${moment().format("YYYY-MM-DD")}T${this.start}:00Z`;
+        return this.addDate(this.startDate, this.startTime);
       }
       return "";
     },
     eventEndTime() {
-      if (this.end) {
+      if (this.endTime && this.endDate) {
-        return `${moment().format("YYYY-MM-DD")}T${this.end}:00Z`;
+        return this.addDate(this.endDate, this.endTime);
       }
       return "";
     },
@@ -183,6 +209,18 @@ export default {
       }
       return true;
     },
+    ownerSelectSize() {
+      if (this.ownerName) {
+        return this.ownerName.split(" ").join("").length;
+      }
+      return 22;
+    },
+    kindEventSelectSize() {
+      if (this.kind) {
+        return this.kind.split(" ").join("").length;
+      }
+      return 10;
+    },
   },
   methods: {
     chooseOptionOwner(e) {
@@ -195,11 +233,9 @@ export default {
         first_name: foundEmployee.first_name,
         patronymic: foundEmployee.patronymic,
       };
-      this.ownerSelectSize = this.ownerName.split(" ").join("").length;
     },
     chooseOptionTypeEvent(e) {
       this.kind = e.target.id;
-      this.kindEventSelectSize = this.kind.split(" ").join("").length;
     },
     chooseOptionMember(e) {
       let foundMember = this.membersData.find(
@@ -238,14 +274,40 @@ export default {
     },
     sendEventData() {
       this.eventData = {
-        start: this.eventStartTime,
+        id: this.id,
-        end: this.eventEndTime,
+        start: this.addDate(this.startTime, this.startDate),
+        end: this.addDate(this.endTime, this.endDate),
         kind: this.kind,
         employees: [this.employees],
         members: [this.members],
       };
       this.closeForm();
     },
+    addDate(time, data) {
+      return `${data}T${time}:00Z`;
+    },
+    trimTime(str) {
+      return str.slice(11, -4);
+    },
+    trimDate(str) {
+      return str.slice(0, 12);
+    },
+  },
+  mounted() {
+    this.id = this.selectedEventData.id || null;
+    this.startTime = this.trimTime(this.selectedEventData.start) || "";
+    this.endTime = this.trimTime(this.selectedEventData.end) || "";
+    this.kind = this.selectedEventData.kind || "";
+    this.employees = this.selectedEventData.employees[0] || {
+      employee: null,
+      role: "owner",
+    };
+    this.members = this.selectedEventData.members[0] || {
+      member: null,
+      role: null,
+    };
+    this.startDate = this.trimDate(this.selectedEventData.start);
+    this.endDate = this.trimDate(this.selectedEventData.end);
   },
 };
 </script>
@@ -281,6 +343,11 @@ export default {
   border-radius: 4px
   background-color: var(--bg-ligth-blue-color)
 
+.date-input
+  width: 120px
+  border-radius: 4px
+  background-color: var(--bg-ligth-blue-color)
+
 .icon
   width: 24px
   height: 24px

src/pages/calendar/components/CalendarSchedule.vue

@@ -19,6 +19,7 @@
           :day-start-time="validateStartTime"
           :day-end-time="validateEndTime"
           :style="columnSize"
+          @selected-event="writeEventData"
         )
       .flex.w-full.relative
         .time-coil-wrapper.left-0.-mt-12.pt-9
@@ -41,6 +42,13 @@
             :time-coil="timeCoil"
             :owners-count="ownersCount"
           )
+      calendar-form-add-event(
+        v-if="isOpenForm"
+        :close-form="closeFormCreateEvent"
+        :owners-data="ownersData"
+        :members-data="membersData"
+        :selected-event-data="selectedEvent"
+      )
 </template>
 
 <script>
@@ -49,6 +57,7 @@ import CalendarHeader from "./CalendarHeader.vue";
 import CalendarBackground from "./CalendarBackground.vue";
 import CalendarClockColumn from "./CalendarClockColumn.vue";
 import CalendarColumn from "./CalendarColumn.vue";
+import CalendarFormAddEvent from "./CalendarFormAddEvent.vue";
 export default {
   name: "CalendarSchedule",
   components: {
@@ -56,6 +65,7 @@ export default {
     CalendarBackground,
     CalendarClockColumn,
     CalendarColumn,
+    CalendarFormAddEvent,
   },
   props: {
     currentDate: {
@@ -83,6 +93,14 @@ export default {
         return [];
       },
     },
+    membersData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    closeFormCreateEvent: Function,
+    isOpenForm: Boolean,
   },
   data() {
     return {
@@ -94,6 +112,20 @@ export default {
       pixelsPerHour: 62,
       columnHeaderHeight: 48,
       defaultColumnWidth: 470,
+      selectedEvent: {
+        id: null,
+        start: "",
+        end: "",
+        kind: "",
+        employees: {
+          employee: null,
+          role: "owner",
+        },
+        members: {
+          member: null,
+          role: null,
+        },
+      },
     };
   },
   computed: {
@@ -284,6 +316,10 @@ export default {
       });
       return filteredArray;
     },
+    writeEventData(eventData) {
+      this.selectedEvent = eventData;
+      this.$emit("open-change-form");
+    },
   },
   watch: {
     currentTime() {