Merge pull request #129 from dderbentsov/UC-43

WIP Поправила форму создания, заменила селекты
2022-11-14 18:59:45 +03:00
parent 91bc4db2de ab89dd37be
commit 016e08cf71
8 changed files with 241 additions and 144 deletions
--- a/src/components/base/BaseAddingNetwork.vue
+++ b/src/components/base/BaseAddingNetwork.vue
@@ -1,16 +1,16 @@
 <template lang="pug">
  .flex.w-full(class="gap-x-1.5")
    .flex(:id="value.id" @click="(e) => saveNetworkId(e)")
-      base-select(:for-networks="true" :style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
+      base-select-networks(:style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
    base-input.w-full(v-model:value="value.username" placeholder="Ссылкa")
 </template>

 <script>
-import BaseSelect from "@/components/base/OldBaseSelect";
+import BaseSelectNetworks from "@/components/base/BaseSelectNetworks";
 import BaseInput from "@/components/base/BaseInput";
 export default {
  name: "TableAddingNetwork",
-  components: { BaseInput, BaseSelect },
+  components: { BaseInput, BaseSelectNetworks },
  props: {
    saveNetworkId: {
      type: Function,
--- a/src/components/base/BaseCustomSelect.vue
+++ b/src/components/base/BaseCustomSelect.vue
@@ -0,0 +1,118 @@
+<template lang="pug">
+  .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
+    @click="open = !open",
+    :class="{'open': open, 'border-none': borderNone}",
+  )
+    .placeholder.text-base.flex.items-center(
+      :class="{'value-color': value.label || placeholderOpacity}"
+    ) {{ value.label || placeholder }}
+    .flex.items-center
+      .select-form-separator.cursor-pointer.mr-4(v-if="separator")
+      span.icon-down-arrow.open-icon.flex.text-xsm(:class="{'open': open }")
+    base-options(
+      v-if="open",
+    )
+      .items-container.mt-1(
+        @click="closeOptions",
+        v-click-outside="leaveSelect"
+      )
+        .item.py-2.px-4.cursor-pointer(
+          v-for="item in items",
+          :key="item.id"
+          @click="clickItem(item.id, item.label)"
+        ) {{ item.label }}
+</template>
+
+<script>
+import BaseOptions from "@/components/base/BaseOptions.vue";
+export default {
+  name: "BaseCustomSelect",
+  components: { BaseOptions },
+  props: {
+    placeholder: String,
+    modelValue: Object,
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    borderNone: Boolean,
+    separator: Boolean,
+    placeholderOpacity: Boolean,
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      open: false,
+    };
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+  methods: {
+    clickItem(id, label) {
+      this.value = {
+        id: id,
+        label: label,
+      };
+    },
+    leaveSelect() {
+      this.open = false;
+    },
+    closeOptions(e) {
+      e.stopPropagation();
+      this.open = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="sass">
+.base-select
+  width: 100%
+  border: 1.5px solid #D3D4DC
+  border-radius: 4px
+  background-color: white
+  user-select: none
+  &.open
+    border: 1.5px solid #4772F2
+.items-container
+  box-shadow: 1px 1px 8px rgba(37, 40, 80, 0.15)
+  border-radius: 4px
+  background-color: white
+.placeholder
+  color: #090A15
+  opacity: 0.5
+  text-overflow: ellipsis
+  overflow: hidden
+.item
+  border-bottom: 0.5px solid #D3D4DC
+  color: #090A15
+  &:hover
+   background-color: rgba(215, 217, 255, 0.25)
+  &:last-child
+    border-bottom: none
+.open-icon
+  &.open
+    transform: rotate(180deg)
+.separator
+  background-color: var(--btn-blue-color-3)
+  height: 24px
+  width: 1px
+  border-radius: 1px
+.border-none
+  border: none
+.value-color
+  opacity: 1
+.select-form-separator
+  background-color: var(--btn-blue-color-3)
+  height: 24px
+  width: 1px
+  border-radius: 1px
+</style>
--- a/src/components/base/BaseOptions.vue
+++ b/src/components/base/BaseOptions.vue
@@ -0,0 +1,31 @@
+<template lang="pug">
+  .base-options(:style="styles")
+    slot
+</template>
+
+<script>
+export default {
+  name: "BaseOptions",
+  computed: {
+    parent() {
+      return this.$parent.$el;
+    },
+    parentSize() {
+      return this.parent?.getBoundingClientRect();
+    },
+    styles() {
+      return {
+        top: this.parentSize.height + "px",
+        left: "-1px",
+        minWidth: this.parentSize.width + "px",
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="sass">
+.base-options
+  position: absolute
+  z-index: 10
+</style>
--- a/src/components/base/BaseSelectNetworks.vue
+++ b/src/components/base/BaseSelectNetworks.vue
@@ -1,27 +1,9 @@
 <template lang="pug">
-  .flex.box-border.container.items-center.cursor-pointer.relative(
+  .flex.box-border.container.items-center.cursor-pointer.justify-center.relative(
    @click="changeSelect"
-    :class="{border: styleBorder, 'py-2.5 px-4':!forNetworks, 'justify-center':forNetworks, 'justify-between':!forNetworks}"
+    :class="{border: styleBorder}"
    )
-    .flex.mr-2(v-if="!forNetworks")
-      input.text-base.select.cursor-pointer(
-          :size="sizeInput"
-          v-model="optionData"
-          :placeholder="placeholder"
-          :disabled="disabled"
-          @input="sendData"
-        )
-      .absolute.options.top-12.left-0(
-        v-show="isSelectOpen"
-        :id="id"
-        )
-        .option.px-4.py-1(
-          v-for="data in filteredListData"
-          @click="(e) => chooseOption(e)"
-          :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'")
+    .flex.select.cursor-pointer.w-full.text-xl.items-center.networks(:class="optionData, 'px-2.5'")
      .absolute.options.top-11.left-0(
        v-show="isSelectOpen"
        :id="id")
@@ -33,12 +15,11 @@
          :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}")
 </template>

 <script>
 export default {
-  name: "OldBaseSelect",
+  name: "BaseSelectNetworks",
  props: {
    id: String,
    styleBorder: {
@@ -48,7 +29,6 @@ export default {
    optionData: String,
    listData: Array,
    chooseOption: Function,
-    forNetworks: Boolean,
    placeholder: {
      type: String,
      default: "",
@@ -61,36 +41,10 @@ export default {
      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);
-        });
-        if (filteredList.length === 0) this.closeSelect();
-        return filteredList;
-      }
-      return this.listData;
-    },
-  },
  methods: {
    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
@@ -32,13 +32,11 @@ import { fetchWrapper } from "../../shared/fetchWrapper.js";
 import * as moment from "moment/moment";
 import CalendarSchedule from "./components/CalendarSchedule.vue";
 import CalendarSidebar from "./components/CalendarSidebar.vue";
-import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
 export default {
  name: "TheCalendar",
  components: {
    CalendarSchedule,
    CalendarSidebar,
-    CalendarFormAddEvent,
  },
  data() {
    return {
--- a/src/pages/calendar/components/CalendarEventCard.vue
+++ b/src/pages/calendar/components/CalendarEventCard.vue
@@ -23,9 +23,9 @@
    calendar-event-description-card.right-0(
      v-if="isOpenDescriptionCard"
      :style="descriptionCardPosition"
-      :owner-event="this.ownerEvent"
-      :event-types="this.eventTypes"
-      :event-time="this.eventTime"
+      :owner-event="ownerEvent"
+      :event-types="eventTypes"
+      :event-time="eventTime"
      :event-member="eventMember"
      :description="description"
      @selected-event="transmitEventData"
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -7,42 +7,25 @@
    .flex.flex-col.gap-y-8
      .flex.flex-col.gap-y-2
        span.text-xs.opacity-40.font-bold.leading-3 Вид события
-        base-select.select(
+        base-custom-select.select(
          v-model="kind"
          :items="kindEvents"
          placeholder="Вид события"
-          :style="{width: '570px'}"
        )
      .flex.flex-col(class="gap-y-1.5")
        span.text-sm Сотрудник
-        base-select.select(
-          v-if="!selectedEventData.employees",
+        base-custom-select.select(
          :items="ownersList",
          v-model="employees.employee",
          placeholder="Выберите сотрудника"
-        )  
-        base-select.select(
-          v-else,
-          v-model="employees.employee",
-          :items="ownersList",
-          :placeholder="employeeName"
-          placeholderOpacity
        )
      .flex.flex-col(class="gap-y-1.5")
        span.text-sm Клиент
-        base-select.select(
-          v-if="!selectedEventData.members",
+        base-custom-select.select(
          :items="membersList",
          v-model="members.person",
          placeholder="Выберите клиента",
        )
-        base-select.select(
-          v-else,
-          v-model="members.person",
-          :items="membersList",
-          :placeholder="memberName",
-          placeholderOpacity
-        )
    .flex.flex-col.gap-y-8
      .flex.gap-x-4
        .flex.gap-x-2
@@ -70,10 +53,10 @@
      @click="sendEventData"
    ) Создать событие
    base-button.update-button.text-base.font-semibold(
-    v-else,
-    :size="40",
-    :disabled="disabledUpdateButton",
-    @click="updateEventData",
+      v-else,
+      :size="40",
+      :disabled="disabledUpdateButton",
+      @click="updateEventData",
    ) Сохранить
 </template>

@@ -83,6 +66,7 @@ import BaseInputTime from "@/components/base/BaseInputTime.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
+import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 import BaseButton from "@/components/base/BaseButton";
 import * as moment from "moment/moment";
 export default {
@@ -93,6 +77,7 @@ export default {
    BaseInput,
    BaseInputDate,
    BaseInputTime,
+    BaseCustomSelect,
  },
  props: {
    closeForm: Function,
@@ -189,41 +174,14 @@ export default {
      }
      return [];
    },
-    memberName() {
-      if (this.selectedEventData.members) {
-        let foundMember = {};
-        if (this.selectedEventData.members.length > 1) {
-          foundMember = this.selectedEventData.members.find(
-            ({ role }) => role === this.MEMBER_TYPE
-          );
-        } else foundMember = this.selectedEventData.members[0];
-        let {
-          person: { last_name, first_name, patronymic },
-        } = foundMember;
-        return this.trimMemberName(last_name, first_name, patronymic);
-      }
-      return "";
-    },
-    employeeName() {
-      if (this.selectedEventData.employees) {
-        let foundEmployee = this.selectedEventData.employees.find(
-          ({ role }) => role === this.EMPLOYEE_TYPE
-        );
-        let {
-          employee: { last_name, first_name, patronymic },
-        } = foundEmployee;
-        return this.trimOwnerName(last_name, first_name, patronymic);
-      }
-      return "";
-    },
    disabledCreateButton() {
      if (
        this.eventDate &&
        this.startTime &&
        this.endTime &&
-        this.members.person &&
-        this.employees.employee &&
-        this.kind
+        this.members.person.label &&
+        this.employees.employee.label &&
+        this.kind.label
      ) {
        return false;
      }
@@ -236,7 +194,7 @@ export default {
        this.eventDate === start.format("YYYY-MM-DD") &&
        this.startTime === start.format("HH:mm") &&
        this.endTime === end.format("HH:mm") &&
-        this.kind === this.selectedEventData.kind
+        this.kind.label === this.selectedEventData.kind
      ) {
        return true;
      }
@@ -254,23 +212,69 @@ export default {
    },
    eventEmployee() {
      if (this.selectedEventData.employees) {
-        return this.selectedEventData.employees;
+        let foundEmployee = this.selectedEventData.employees.find(
+          ({ role }) => role === this.EMPLOYEE_TYPE
+        );
+        let {
+          employee: { id, last_name, first_name, patronymic },
+          ...rest
+        } = foundEmployee;
+        return {
+          employee: {
+            id: id,
+            label: this.trimOwnerName(last_name, first_name, patronymic),
+          },
+          id: rest.id,
+          role: rest.role,
+        };
      }
      return {
-        employee: null,
+        employee: {
+          id: null,
+          label: "",
+        },
        role: this.EMPLOYEE_TYPE,
      };
    },
    eventMember() {
-      return this.selectedEventData.members
-        ? this.selectedEventData.members
-        : {
-            person: null,
-            role: this.MEMBER_TYPE,
-          };
+      if (this.selectedEventData.members) {
+        let foundMember = {};
+        if (this.selectedEventData.members.length > 1) {
+          foundMember = this.selectedEventData.members.find(
+            ({ role }) => role === this.MEMBER_TYPE
+          );
+        } else foundMember = this.selectedEventData.members[0];
+        let {
+          person: { id, last_name, first_name, patronymic },
+          ...rest
+        } = foundMember;
+        return {
+          person: {
+            id: id,
+            label: this.trimMemberName(last_name, first_name, patronymic),
+          },
+          id: rest.id,
+          role: rest.role,
+        };
+      }
+      return {
+        person: {
+          id: null,
+          label: "",
+        },
+        role: this.MEMBER_TYPE,
+      };
    },
    eventKind() {
-      return this.selectedEventData.kind ? this.selectedEventData.kind : "";
+      return this.selectedEventData.kind
+        ? {
+            label: this.selectedEventData.kind,
+            id: null,
+          }
+        : {
+            label: "",
+            id: null,
+          };
    },
    eventId() {
      return this.selectedEventData.id ? this.selectedEventData.id : "";
@@ -287,23 +291,11 @@ export default {
      this.eventData = {
        start: this.mergeDate(this.eventDate, this.startTime),
        end: this.mergeDate(this.eventDate, this.endTime),
-        kind: this.kind,
+        kind: this.kind.label,
        employees: [
-          this.findPerson(
-            this.ownersData,
-            this.ownersList,
-            this.employees,
-            "employee"
-          ),
-        ],
-        members: [
-          this.findPerson(
-            this.membersData,
-            this.membersList,
-            this.members,
-            "person"
-          ),
+          this.findPerson(this.ownersData, this.employees, "employee"),
        ],
+        members: [this.findPerson(this.membersData, this.members, "person")],
      };
      this.postCreateEvent(this.eventData);
      this.clearForm();
@@ -313,7 +305,11 @@ export default {
      this.eventData = {
        start: this.mergeDate(this.eventDate, this.startTime),
        end: this.mergeDate(this.eventDate, this.endTime),
-        kind: this.kind,
+        kind: this.kind.label,
+        employees: [
+          this.findPerson(this.ownersData, this.employees, "employee"),
+        ],
+        members: [this.findPerson(this.membersData, this.members, "person")],
      };
      this.postUpdateEvent(this.id, this.eventData);
      this.clearForm();
@@ -327,12 +323,9 @@ export default {
    mergeDate(eventDate, time) {
      return moment(`${eventDate} ${time}`).format("YYYY-MM-DDTHH:mm:ss");
    },
-    findPerson(requestedList, serializedList, object, field) {
-      let foundId = serializedList.find(
-        ({ label }) => label === object[field]
-      ).id;
-      let foundPerson = requestedList.find(({ id }) => id === foundId);
-      return {
+    findPerson(requestedList, object, field) {
+      let foundPerson = requestedList.find(({ id }) => id === object[field].id);
+      let returnedData = {
        [field]: {
          id: foundPerson.id,
          last_name: foundPerson.last_name,
@@ -342,6 +335,8 @@ export default {
        },
        role: object.role,
      };
+      if (object.id) returnedData.id = object.id;
+      return returnedData;
    },
    postCreateEvent(event) {
      fetchWrapper
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -33,6 +33,7 @@ module.exports = {
        "3px": "3px",
        "4_75px": "4.75px",
        "6px": "6px",
+        "9px": "9px",
        "10px": "10px",
        "13px": "13px",
        "14px": "14px",