WIP Распарсила полученные данные

src/components/base/BaseInput.vue

@@ -1,7 +1,17 @@
 <template lang="pug">
-  .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
+  .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
-    input.input.w-full.outline-0.not-italic(:class="{date:type === 'date'}" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
+    :class="{'border-none': borderNone}"
-    .slot(v-if="withIcon" :class="iconPosition")
+    :style="{ minWidth: widthInput + 'px' }"
+  )
+    input.input.w-full.outline-0.not-italic(
+      :class="{date:type === 'date'}"
+      :value="value"
+      :type="type"
+      @input="$emit('update:value', $event.target.value)"
+      :placeholder="placeholder"
+      :maxlength="maxLength"
+    )
+    .slot(v-if="withIcon", :class="iconPosition")
       slot.cursor-pointer
 </template>
 
@@ -24,6 +34,7 @@ export default {
       default: "Поиск",
     },
     widthInput: Number,
+    borderNone: Boolean,
   },
 };
 </script>
@@ -42,4 +53,6 @@ export default {
   background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
   &::-webkit-calendar-picker-indicator
     opacity: 0
+.border-none
+  border: none
 </style>

src/components/base/BaseInputDate.vue

@@ -0,0 +1,50 @@
+<template lang="pug">
+  .input-wrapper.flex.gap-x-2.px-4.box-border(
+    class="py-2.5"
+    :style="{ minWidth: widthInput + 'px' }"
+  )
+    input.input.w-full.outline-0.not-italic.date(
+      :value="value"
+      type="date"
+      @input="$emit('update:value', $event.target.value)"
+      :placeholder="placeholder"
+      :maxlength="maxLength"
+    )
+    .slot(v-if="withIcon" :class="iconPosition")
+      slot.cursor-pointer
+</template>
+
+<script>
+export default {
+  name: "BaseInputDate",
+  props: {
+    maxLength: Number,
+    value: String,
+    withIcon: {
+      default: false,
+    },
+    iconPosition: {
+      default: "right",
+    },
+    placeholder: {
+      default: "Поиск",
+    },
+    widthInput: Number,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.left
+  order: -1
+.right
+  order: 1
+.input-wrapper
+  border-radius: 4px
+  background-color: var(--default-white)
+  color: var(--font-dark-blue-color)
+.date
+  background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
+  &::-webkit-calendar-picker-indicator
+    opacity: 0
+</style>

src/components/base/BaseInputTime.vue

@@ -0,0 +1,46 @@
+<template lang="pug">
+  .input-wrapper.flex.gap-x-2.px-4.box-border(
+    class="py-2.5"
+    :style="{ minWidth: widthInput + 'px' }"
+  )
+    input.input.w-full.outline-0.not-italic(
+      :value="value"
+      type="time"
+      @input="$emit('update:value', $event.target.value)"
+      :placeholder="placeholder"
+      :maxlength="maxLength"
+    )
+    .slot(v-if="withIcon" :class="iconPosition")
+      slot.cursor-pointer
+</template>
+
+<script>
+export default {
+  name: "BaseInputTime",
+  props: {
+    maxLength: Number,
+    value: String,
+    withIcon: {
+      default: false,
+    },
+    iconPosition: {
+      default: "right",
+    },
+    placeholder: {
+      default: "Поиск",
+    },
+    widthInput: Number,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.left
+  order: -1
+.right
+  order: 1
+.input-wrapper
+  border-radius: 4px
+  background-color: var(--default-white)
+  color: var(--font-dark-blue-color)
+</style>

src/components/base/OldBaseSelect.vue

@@ -72,7 +72,7 @@ export default {
           }
           return elem.match(reg);
         });
-        filteredList.length === 0 ? this.closeSelect() : this.openSelect();
+        if (filteredList.length === 0) this.closeSelect();
         return filteredList;
       }
       return this.listData;
@@ -100,7 +100,7 @@ export default {
   border-radius: 4px
   width: fit-content
   color: var(--font-dark-blue-color)
-  background-color: var(--bg-ligth-blue-color)
+  background-color: var(--default-white)
   &.border
     background-color: var(--default-white)
     border: 2px solid var(--border-light-grey-color)

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -17,31 +17,18 @@
     .flex.flex-col.gap-y-2
       span.text-xs.opacity-40.font-bold.leading-3 Основная информация
       .flex.gap-x-4.items-center
-        .icon-time.text-xl.icon
         .flex.gap-x-2.items-center
-          .time-input.flex.px-4.py-2.items-center
+          base-input-date(v-model:value="eventDate")
-            input.item-input.text-base.cursor-text(
+      .flex.items-center
-              v-model="startTime"
+        .flex.gap-x-2.items-center
-              placeholder ="11:00"
+          base-input-time.item-input.text-base.cursor-text(
+            v-model:value="startTime",
+            :width-input="72"
           )
           span —
-          .time-input.flex.px-4.py-2.items-center
+          base-input-time.item-input.text-base.cursor-text(
-            input.item-input.text-base.cursor-text(
+            v-model:value="endTime",
-              v-model="endTime"
+            :width-input="72"
-              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
@@ -76,17 +63,19 @@
           :size="24"
           :icon-left-size="10"
           id="addContact"
-        @click="(e)=>addContact(e)")
+          @click="(e)=>addContact(e)"
+        )
       .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
+        .form-item.flex.gap-x-2.items-center
-          input.item-input.cursor-text.text-base(
+          base-input(
+            border-none
             v-model="contacts"
-            type="text"
             placeholder="E-mail"
+            :width-input="72"
           )
     base-button.styled-button.text-base.font-semibold(
       :size="40"
@@ -97,10 +86,20 @@
 
 <script>
 import BaseSelect from "@/components/base/OldBaseSelect";
+import BaseInputTime from "@/components/base/BaseInputTime.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseInputDate from "@/components/base/BaseInputDate.vue";
 import BaseButton from "@/components/base/BaseButton";
+import * as moment from "moment/moment";
 export default {
   name: "FormChangeEvent",
-  components: { BaseSelect, BaseButton },
+  components: {
+    BaseSelect,
+    BaseButton,
+    BaseInput,
+    BaseInputDate,
+    BaseInputTime,
+  },
   props: {
     closeForm: Function,
     ownersData: {
@@ -127,22 +126,17 @@ export default {
       listContacts: [1],
       memberSelectSize: 29,
       kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
+      EMPLOYEE_TYPE: "owner",
       eventData: {},
-      members: {
-        member: null,
-        role: null,
-      },
       contacts: [],
       startTime: "",
       endTime: "",
-      employees: {
+      members: {},
-        employee: null,
+      employees: {},
-        role: "owner",
+      eventDate: "",
-      },
-      startDate: "",
-      endDate: "",
       kind: "",
       id: null,
+      ifClearedForm: true,
     };
   },
   computed: {
@@ -180,30 +174,17 @@ export default {
       return "";
     },
     memberName() {
-      if (this.members.member) {
+      if (this.members.person) {
-        return this.trimMemberName(this.members.member);
+        return this.trimMemberName(this.members.person);
-      }
-      return "";
-    },
-    eventStartTime() {
-      if (this.startTime && this.startDate) {
-        return this.addDate(this.startDate, this.startTime);
-      }
-      return "";
-    },
-    eventEndTime() {
-      if (this.endTime && this.endDate) {
-        return this.addDate(this.endDate, this.endTime);
       }
       return "";
     },
     disabledButton() {
       if (
-        this.eventStartTime &&
+        (this.eventDate,
-        this.eventEndTime &&
+        this.startTime,
-        this.employees.employee &&
+        this.endTime,
-        this.members.member &&
+        this.employees.employee && this.members.person && this.kind)
-        this.kind
       ) {
         return false;
       }
@@ -221,6 +202,16 @@ export default {
       }
       return 10;
     },
+    startDate() {
+      return this.selectedEventData.start
+        ? moment.parseZone(this.selectedEventData.start)
+        : moment();
+    },
+    endDate() {
+      return this.selectedEventData.end
+        ? moment.parseZone(this.selectedEventData.end)
+        : moment();
+    },
   },
   methods: {
     chooseOptionOwner(e) {
@@ -241,7 +232,7 @@ export default {
       let foundMember = this.membersData.find(
         (elem) => elem.id === e.target.id
       );
-      this.members.member = {
+      this.members.person = {
         id: foundMember.id,
         last_name: foundMember.last_name,
         first_name: foundMember.first_name,
@@ -264,7 +255,7 @@ export default {
     addMember(memberName) {
       let memberData = memberName.split(" ");
       if (memberData.length === 3) {
-        this.members.member = {
+        this.members.person = {
           id: null,
           last_name: memberData[0],
           first_name: memberData[1],
@@ -275,39 +266,56 @@ export default {
     sendEventData() {
       this.eventData = {
         id: this.id,
-        start: this.addDate(this.startTime, this.startDate),
+        start: this.mergeDate(this.eventDate, this.startTime),
-        end: this.addDate(this.endTime, this.endDate),
+        end: this.mergeDate(this.eventDate, this.endTime),
         kind: this.kind,
         employees: [this.employees],
         members: [this.members],
       };
       this.closeForm();
+      this.eventData = {};
     },
-    addDate(time, data) {
+    mergeDate(eventDate, time) {
-      return `${data}T${time}:00Z`;
+      return moment(`${eventDate} ${time}`).format();
-    },
-    trimTime(str) {
-      return str.slice(11, -4);
-    },
-    trimDate(str) {
-      return str.slice(0, 12);
     },
   },
-  mounted() {
+  watch: {
+    startDate: {
+      immediate: true,
+      handler(newDate) {
+        if (newDate) {
+          this.eventDate = newDate.format("YYYY-MM-DD");
+          this.startTime = newDate.format("HH:mm");
+        }
+      },
+    },
+    endDate: {
+      immediate: true,
+      handler(newDate) {
+        if (newDate) {
+          this.endTime = newDate.format("HH:mm");
+        }
+      },
+    },
+    selectedEventData: {
+      immediate: true,
+      handler(newDate) {
+        if (newDate) {
           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] || {
+            id: null,
             employee: null,
-      role: "owner",
+            role: this.EMPLOYEE_TYPE,
           };
           this.members = this.selectedEventData.members[0] || {
-      member: null,
+            id: null,
-      role: null,
+            person: null,
+            role: this.EMPLOYEE_TYPE,
           };
-    this.startDate = this.trimDate(this.selectedEventData.start);
+        }
-    this.endDate = this.trimDate(this.selectedEventData.end);
+      },
+    },
   },
 };
 </script>
@@ -316,7 +324,7 @@ export default {
 .event-form
   height: fit-content
   min-width: 448px
-  background-color: var(--default-white)
+  background-color: var(--bg-ligth-blue-color)
   box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
   border-radius: 4px
   z-index: 5
@@ -324,14 +332,13 @@ export default {
 .form-item
   border-radius: 4px
   width: 344px
-  background-color: var(--bg-ligth-blue-color)
+  background-color: var(--default-white)
 
 .item-input
   appearance: none
   border: none
   outline: none
-  color: var(--font-black-color)
+  height: 40px
-  background-color: var(--font-black-color-0)
   &::-webkit-calendar-picker-indicator
     display: none
     -webkit-appearance: none
@@ -341,12 +348,12 @@ export default {
 .time-input
   width: 72px
   border-radius: 4px
-  background-color: var(--bg-ligth-blue-color)
+  background-color: var(--default-white)
 
 .date-input
-  width: 120px
+  width: 174px
   border-radius: 4px
-  background-color: var(--bg-ligth-blue-color)
+  background-color: var(--default-white)
 
 .icon
   width: 24px

src/pages/calendar/components/CalendarSchedule.vue

@@ -120,10 +120,12 @@ export default {
         employees: {
           employee: null,
           role: "owner",
+          id: null,
         },
         members: {
-          member: null,
+          person: null,
           role: null,
+          id: null,
         },
       },
     };

src/pages/clients/components/ClientsTable.vue

@@ -17,6 +17,7 @@
 </template>
 
 <script>
+import { fetchWrapper } from "@/shared/fetchWrapper.js";
 import ClientsTableHeader from "@/pages/clients/components/ClientsTableHeader";
 import ClientsTableHat from "@/pages/clients/components/ClientsTableHat";
 import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
@@ -52,7 +53,7 @@ export default {
     },
     fetchDataClients() {
       // eslint-disable-next-line
-      fetch("http://45.84.227.122:8080/general/person/").then((res) => res.json()).then((data) => this.saveDataClients(data))
+      fetchWrapper.get("general/person/").then((data) => this.saveDataClients(data))
     },
     selectedCheck(e) {
       if (e.target.id === "checkbox") {