Добавил окно создания события

2022-10-28 18:48:58 +03:00
parent e14636d4a2
commit e238882208
3 changed files with 72 additions and 55 deletions
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -1,17 +1,14 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.pt-5.pb-6.px-8.event-form(v-if="formOpen" )
+  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.absolute.right-2.bottom-14
    .flex.flex-col.gap-y-2
      .flex.justify-between.pt-2
        span.not-italic.text-xs.opacity-40.leading-3 Ответственный
-        .icon-cancel.close-icon.text-xs.cursor-pointer(@click="closeEventForm")
-      base-select(
-        id="responsible"
+        .icon-cancel.close-icon.text-xs.cursor-pointer(@click="closeForm")
+      base-select.ba-sel(
        width="205px"
        :option-data="eventData.responsible"
        :list-data="listResponsible"
-        :choose-option="chooseOption"
-        :is-open="selectResponsibleOpen"
-        :select-open="openSelectResponsible"
+        :choose-option="chooseOptionResponsible"
      )
    .flex.flex-col.gap-y-2
      span.not-italic.text-xs.opacity-40.leading-3 Основная информация
@@ -27,53 +24,63 @@
        .icon-person.text-xl.icon
        .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
          input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
-    .flex.flex-col.gap-y-2(class='additional-information')
-      .flex.gap-x-4.items-center
-        span.not-italic.text-xs.opacity-40.leading-3 Дополнительная информация
-        button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)")
-      .flex.gap-x-4.items-center(v-for="(info, index) in listFriendInfo" :key="index")
-        span.ml-1 {{info}}
-        .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
-          input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
+    //- .flex.flex-col.gap-y-2(class='additional-information')
+      //- .flex.gap-x-4.items-center
+      //-   span.not-italic.text-xs.opacity-40.leading-3 Дополнительная информация
+      //-   button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)")
+      //-   base-button(
+            left-icon="icon-plus"
+            rounded secondary
+            :size="24"
+            :icon-left-size="10"
+            id="addInfo"
+            @click="(e)=>addFriendInfo(e)")
+      //- .flex.gap-x-4.items-center(v-for="(info, index) in listFriendInfo" :key="index")
+      //-   span.ml-1 {{info}}
+      //-   .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
+      //-     input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
    .flex.flex-col.gap-y-2
      span.not-italic.text-xs.opacity-40.leading-3 Вид события
      base-select(
-        id="kind"
        width="118px"
        :option-data="eventData.kindEvent"
        :list-data="kindEvents"
-        :choose-option="chooseOption"
-        :is-open="selectKindEventOpen"
-        :select-open="openSelectKindEvent"
+        :choose-option="chooseOptionTypeEvent"
      )
    .flex.flex-col.gap-y-2
      .flex.gap-x-4.items-center
        span.not-italic.text-xs.opacity-40.leading-3 Контакты
-        button-plus(id="addContact" @click="(e)=>addFriendInfo(e)")
+        base-button(
+        left-icon="icon-plus"
+        rounded secondary
+        :size="24"
+        :icon-left-size="10"
+        id="addContact"
+        @click="(e)=>addFriendInfo(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
          input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
-    add-event-button(@click="createEvent")
+    base-button.styled-button.not-italic.text-base.font-semibold(
+    :size="40"
+    @click="closeForm"
+    ) Создать событие
 </template>

 <script>
 import BaseSelect from "@/components/base/BaseSelect";
-import AddEventButton from "@/components/base/buttons/BaseCreateButton";
-import ButtonPlus from "@/components/base/buttons/BaseButtonPlus";
+import BaseButton from "@/components/base/BaseButton";
 export default {
  name: "FormChangeEvent",
-  components: { AddEventButton, ButtonPlus, BaseSelect },
+  components: { BaseSelect, BaseButton },
  props: {
+    closeForm: Function,
    listResponsible: {
      default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."],
    },
  },
  data() {
    return {
-      formOpen: true,
-      selectResponsibleOpen: false,
-      selectKindEventOpen: false,
      listFriendInfo: [1],
      listContacts: [1],
      kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
@@ -84,15 +91,18 @@ export default {
          firstTime: "11:00",
          secondTime: "12:30",
        },
-        friendInfo: {},
+        // friendInfo: {},
        kindEvent: "Вид события",
        contacts: {},
      },
    };
  },
  methods: {
-    createEvent() {
-      this.formOpen = !this.formOpen;
+    chooseOptionResponsible(e) {
+      this.eventData.responsible = e.target.id;
+    },
+    chooseOptionTypeEvent(e) {
+      this.eventData.kindEvent = e.target.id;
    },
    addFriendInfo(e) {
      if (e.currentTarget.id === "addInfo") {
@@ -106,34 +116,20 @@ export default {
        );
      }
    },
-    closeEventForm() {
-      this.formOpen = !this.formOpen;
-    },
-    openSelectResponsible() {
-      this.selectResponsibleOpen = !this.selectResponsibleOpen;
-    },
-    openSelectKindEvent() {
-      this.selectKindEventOpen = !this.selectKindEventOpen;
-    },
-    chooseOption(event) {
-      if (event.currentTarget.id === "responsible") {
-        this.eventData.responsible = this.listResponsible[event.target.id];
-      }
-      if (event.currentTarget.id === "kind") {
-        this.eventData.kindEvent = this.kindEvents[event.target.id];
-      }
-    },
  },
 };
 </script>

 <style lang="sass" scoped>
+.ba-sel
+  color: red
 .event-form
  height: fit-content
  min-width: 448px
  background-color: var(--default-white)
  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

 .form-item
  border-radius: 4px
@@ -161,4 +157,6 @@ export default {
  color: var(--font-dark-blue-color)
  &:hover
    color: var(--btn-blue-color)
+.styled-button
+  width: 183px
 </style>
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -2,7 +2,7 @@
  .sidebar.flex.flex-col.bg-white(:class="openSidebar")
    .sidebar-wrapper.h-full.my-13px.flex.flex-col.justify-between(:style="sidebarWidth")
      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-if="!isOpen")
-        base-button(left-icon="icon-plus", rounded, :size="40", :icon-left-size="10" )
+        base-button(left-icon="icon-plus", rounded, :size="40", :icon-left-size="10" @click="openFormCreate" )
        .flex.flex-col.items-center(v-if="!isOpen")
          base-button(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary )
          .flex.flex-col.gap-y-2.items-center.mt-4
@@ -11,11 +11,10 @@
        .flex.flex-col.items-center.gap-y-2.justify-center
          base-button.mb-2(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary )
          .team-card(v-for="teammate in teamData" :key="teammate.id")
-            img.avatar-wrapper(:src="avatar" alt="Team member")
+            BaseAvatar(:size="32")
+              img(:src="avatar" alt="Team member")
      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-else)
-        .create-event.flex.items-center.justify-center
-          base-button(right-icon="icon-plus", split, :size="40", :icon-right-size="10" ) Создать событие
-
+        base-button(right-icon="icon-plus", split, :size="40", :icon-right-size="10", @click="openFormCreate" ) Создать событие
        .flex.items-center.flex-col.gap-y-4
          .events-wrapper.flex.items-center.justify-between
            .flex {{ "Виды событий" }}
@@ -36,7 +35,8 @@
              v-for="teammate in teamData"
              :key="teammate.id")
              .flex.items-center
-                img.avatar-wrapper(:src="avatar" alt="Team member")
+                BaseAvatar(:size="32")
+                  img(:src="avatar" alt="Team member")
                .flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }}
              span.icon-change-place.cursor-pointer.w-5.flex.items-center.justify-center.w-6.h-6
      .button-wrapper.flex.justify-center.mb-23px
@@ -49,6 +49,7 @@ import BaseOpenButton from "../../../components/base/buttons/BaseOpenButton.vue"
 import BaseCreateButton from "../../../components/base/buttons/BaseCreateButton.vue";
 import img from "../../../assets/images/team-member.svg";
 import BaseButton from "@/components/base/BaseButton";
+import BaseAvatar from "@/components/base/BaseAvatar";

 export default {
  name: "CalendarSidebar",
@@ -57,9 +58,11 @@ export default {
    BaseButtonPlus,
    BaseOpenButton,
    BaseCreateButton,
+    BaseAvatar,
  },
  props: {
    teamData: Array,
+    openFormCreate: Function,
  },
  data() {
    return {