Merge pull request #7 from dderbentsov/UC-3

Создана компонента formAddEvent и кнопки для UI Kit

src/assets/css/variables.css

@@ -1,6 +1,7 @@
 :root {
 	--bg-lavender-color: #E9E9F6;
 	--bg-white-color: #F8F8FF;
+	--bg-ligth-blue-color: #E6EAFC;
 	--font-dark-blue-color: #252850;
 	--font-black-color: #090A15;
 	--btn-blue-color: #4169E1;

src/assets/icons/down-arrow-2.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.53033 9.46967C7.23744 9.17678 6.76256 9.17678 6.46967 9.46967C6.17678 9.76256 6.17678 10.2374 6.46967 10.5303L7.53033 9.46967ZM12 15L11.4697 15.5303C11.7626 15.8232 12.2374 15.8232 12.5303 15.5303L12 15ZM17.5303 10.5303C17.8232 10.2374 17.8232 9.76256 17.5303 9.46967C17.2374 9.17678 16.7626 9.17678 16.4697 9.46967L17.5303 10.5303ZM6.46967 10.5303L11.4697 15.5303L12.5303 14.4697L7.53033 9.46967L6.46967 10.5303ZM12.5303 15.5303L17.5303 10.5303L16.4697 9.46967L11.4697 14.4697L12.5303 15.5303Z" fill="#252850"/>
 </svg>

src/components/buttons/AddEventButton.vue

@@ -0,0 +1,21 @@
+<template lang="pug">
+  button(class="add-button-event") Создать событие
+</template>
+
+<script>
+  export default {
+    name: "AddEventButton"
+  }
+</script>
+
+<style lang="sass">
+  .add-button-event
+    font-family: Raleway
+    font-style: normal
+    font-size: 16px
+    width: fit-content
+    color: var(--bg-white-color)
+    background-color: var(--btn-blue-color)
+    padding: 11px 16px 11px 16px
+    border-radius: 4px
+</style>

src/components/buttons/ButtonPlus.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  button(class="button-plus")
+    basic-icon(width="12" height="12" icon-color="#4169E1" )
+      plus-icon
+</template>
+
+<script>
+  import PlusIcon from "../iconsComponents/PlusIcon";
+  import BasicIcon from "../iconsComponents/basicIcon/BasicIcon";
+  export default {
+    name: "ButtonPlus",
+    components: {BasicIcon, PlusIcon}
+  }
+</script>
+
+<style lang="sass">
+  .button-plus
+    width: fit-content
+    background-color: rgba(65, 105, 225, 0.25)
+    padding: 7px 7px 3px 7px
+    border-radius: 50%
+</style>

src/components/iconsComponents/ArrowDownIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <g>
+    <path d="M7.53033 9.46967C7.23744 9.17678 6.76256 9.17678 6.46967 9.46967C6.17678 9.76256 6.17678 10.2374 6.46967 10.5303L7.53033 9.46967ZM12 15L11.4697 15.5303C11.7626 15.8232 12.2374 15.8232 12.5303 15.5303L12 15ZM17.5303 10.5303C17.8232 10.2374 17.8232 9.76256 17.5303 9.46967C17.2374 9.17678 16.7626 9.17678 16.4697 9.46967L17.5303 10.5303ZM6.46967 10.5303L11.4697 15.5303L12.5303 14.4697L7.53033 9.46967L6.46967 10.5303ZM12.5303 15.5303L17.5303 10.5303L16.4697 9.46967L11.4697 14.4697L12.5303 15.5303Z"/>
+  </g>
+</template>

src/components/iconsComponents/ClockIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <g>
+    <path d="M10.75 6.5C10.75 6.08579 10.4142 5.75 10 5.75C9.58579 5.75 9.25 6.08579 9.25 6.5H10.75ZM10 10.5H9.25C9.25 10.6989 9.32902 10.8897 9.46967 11.0303L10 10.5ZM11.4697 13.0303C11.7626 13.3232 12.2374 13.3232 12.5303 13.0303C12.8232 12.7374 12.8232 12.2626 12.5303 11.9697L11.4697 13.0303ZM9.25 6.5V10.5H10.75V6.5H9.25ZM9.46967 11.0303L11.4697 13.0303L12.5303 11.9697L10.5303 9.96967L9.46967 11.0303ZM18.25 10.5C18.25 15.0563 14.5563 18.75 10 18.75V20.25C15.3848 20.25 19.75 15.8848 19.75 10.5H18.25ZM10 18.75C5.44365 18.75 1.75 15.0563 1.75 10.5H0.25C0.25 15.8848 4.61522 20.25 10 20.25V18.75ZM1.75 10.5C1.75 5.94365 5.44365 2.25 10 2.25V0.75C4.61522 0.75 0.25 5.11522 0.25 10.5H1.75ZM10 2.25C14.5563 2.25 18.25 5.94365 18.25 10.5H19.75C19.75 5.11522 15.3848 0.75 10 0.75V2.25Z"/>
+  </g>
+</template>

src/components/iconsComponents/CloseIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <g>
+    <path d="M15.5303 1.53033C15.8232 1.23744 15.8232 0.762563 15.5303 0.46967C15.2374 0.176777 14.7626 0.176777 14.4697 0.46967L15.5303 1.53033ZM0.46967 14.4697C0.176777 14.7626 0.176777 15.2374 0.46967 15.5303C0.762563 15.8232 1.23744 15.8232 1.53033 15.5303L0.46967 14.4697ZM1.53034 0.46967C1.23745 0.176777 0.762577 0.176777 0.469684 0.46967C0.176791 0.762563 0.176791 1.23744 0.469684 1.53033L1.53034 0.46967ZM14.4697 15.5303C14.7626 15.8232 15.2375 15.8232 15.5304 15.5303C15.8232 15.2374 15.8232 14.7626 15.5304 14.4697L14.4697 15.5303ZM14.4697 0.46967L0.46967 14.4697L1.53033 15.5303L15.5303 1.53033L14.4697 0.46967ZM0.469684 1.53033L14.4697 15.5303L15.5304 14.4697L1.53034 0.46967L0.469684 1.53033Z"/>
+  </g>
+</template>

src/components/iconsComponents/MailIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <g>
+    <path d="M8.58579 9.08574L9.11612 8.55541L9.11611 8.55541L8.58579 9.08574ZM11.4142 9.08574L10.8839 8.55541L10.8839 8.55541L11.4142 9.08574ZM2 2.25H18V0.75H2V2.25ZM18.25 2.5V14.5H19.75V2.5H18.25ZM18 14.75H2V16.25H18V14.75ZM1.75 14.5V2.5H0.25V14.5H1.75ZM2 14.75C1.86193 14.75 1.75 14.6381 1.75 14.5H0.25C0.25 15.4665 1.0335 16.25 2 16.25V14.75ZM18.25 14.5C18.25 14.6381 18.1381 14.75 18 14.75V16.25C18.9665 16.25 19.75 15.4665 19.75 14.5H18.25ZM2 0.75C1.51696 0.75 1.07843 0.946697 0.762563 1.26256L1.82322 2.32322C1.86929 2.27716 1.93076 2.25 2 2.25V0.75ZM0.762563 1.26256C0.446697 1.57843 0.25 2.01696 0.25 2.5H1.75C1.75 2.43076 1.77716 2.36929 1.82322 2.32322L0.762563 1.26256ZM18 2.25C18.0692 2.25 18.1307 2.27716 18.1768 2.32322L19.2374 1.26256C18.9216 0.946695 18.483 0.75 18 0.75V2.25ZM18.1768 2.32322C18.2228 2.36928 18.25 2.43076 18.25 2.5H19.75C19.75 2.01696 19.5533 1.57843 19.2374 1.26256L18.1768 2.32322ZM8.05546 9.61607C9.1294 10.69 10.8706 10.69 11.9445 9.61607L10.8839 8.55541C10.3957 9.04357 9.60427 9.04356 9.11612 8.55541L8.05546 9.61607ZM0.762565 2.32323L8.05546 9.61607L9.11611 8.55541L1.82322 1.26256L0.762565 2.32323ZM11.9445 9.61607L19.2374 2.32323L18.1768 1.26256L10.8839 8.55541L11.9445 9.61607Z"/>
+  </g>
+</template>

src/components/iconsComponents/PlusIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <g>
+    <path d="M6.75 1C6.75 0.585786 6.41421 0.25 6 0.25C5.58579 0.25 5.25 0.585786 5.25 1H6.75ZM5.25 11C5.25 11.4142 5.58579 11.75 6 11.75C6.41421 11.75 6.75 11.4142 6.75 11H5.25ZM1 5.25C0.585786 5.25 0.25 5.58579 0.25 6C0.25 6.41421 0.585786 6.75 1 6.75V5.25ZM11 6.75C11.4142 6.75 11.75 6.41421 11.75 6C11.75 5.58579 11.4142 5.25 11 5.25V6.75ZM5.25 1V11H6.75V1H5.25ZM1 6.75H11V5.25H1V6.75Z"/>
+  </g>
+</template>

src/components/iconsComponents/UserSmallIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <g>
+    <path d="M17 19.5V20.25C17.4142 20.25 17.75 19.9142 17.75 19.5H17ZM1 19.5H0.25C0.25 19.9142 0.585786 20.25 1 20.25L1 19.5ZM5 14.25H13V12.75H5V14.25ZM16.25 17.5V19.5H17.75V17.5H16.25ZM1.75 19.5V17.5H0.25V19.5H1.75ZM13 14.25C14.7949 14.25 16.25 15.7051 16.25 17.5H17.75C17.75 14.8766 15.6234 12.75 13 12.75V14.25ZM5 12.75C2.37665 12.75 0.25 14.8766 0.25 17.5H1.75C1.75 15.7051 3.20507 14.25 5 14.25V12.75ZM12.25 5.5C12.25 7.29493 10.7949 8.75 9 8.75V10.25C11.6234 10.25 13.75 8.12335 13.75 5.5H12.25ZM9 8.75C7.20507 8.75 5.75 7.29493 5.75 5.5H4.25C4.25 8.12335 6.37665 10.25 9 10.25V8.75ZM5.75 5.5C5.75 3.70507 7.20507 2.25 9 2.25V0.75C6.37665 0.75 4.25 2.87665 4.25 5.5H5.75ZM9 2.25C10.7949 2.25 12.25 3.70507 12.25 5.5H13.75C13.75 2.87665 11.6234 0.75 9 0.75V2.25ZM1 20.25H17V18.75H1V20.25Z"/>
+  </g>
+</template>

src/components/iconsComponents/basicIcon/BasicIcon.vue

@@ -2,7 +2,7 @@
   <svg xmlns="http://www.w3.org/2000/svg"
        :width="width"
        :height="height"
-       viewBox="0 0 40 40"
+       :viewBox="viewBox"
        :aria-labelledby="iconName"
        role="presentation"
   >
@@ -34,6 +34,11 @@ export default {
     iconColor: {
       type: String,
       default: 'currentColor'
+    },
+  },
+  computed: {
+    viewBox() {
+      return `0 0 ${this.width} ${this.height}`
     }
   }
 }

src/components/pages/calendarPages/CalendarPages.vue

@@ -1,9 +1,10 @@
 <template lang="pug">
-  div CalendarPages
 </template>
 
 <script>
+  import FormAddEvent from "@/components/pages/calendarPages/FormAddEvent";
   export default {
-    name: "CalendarPages"
+    name: "CalendarPages",
+    components: {FormAddEvent}
   }
 </script>

src/components/pages/calendarPages/FormAddEvent.vue

@@ -0,0 +1,216 @@
+<template lang="pug">
+  div.event-form-change(v-if="formOpen")
+    div.form-item-container
+      div.close-icon-position
+        span.title-form Ответственный
+        basic-icon.close-icon(width="16" height="16" icon-color="#252850" @click="closeEventForm")
+          close-icon
+      div.input-container(@click="openSelectResponsible")
+        div.form-select
+          div.form-item-input.select-container-res {{eventData.responsible}}
+            div.option-container(v-if="selectResponsibleOpen" id="responsible" @click="(event)=>chooseOption(event)")
+              div.option-item(v-for="(responsible, index) in listResponsible" :key="index" :id="index") {{responsible}}
+        div.select-form-separator
+        basic-icon(width="24" height="24" icon-color="#090A15")
+          arrow-down-icon
+    div.form-item-container
+      span.title-form Оновная информация
+      div.form-inform-container
+        basic-icon(width="24" height="24" icon-color="#090A15" )
+          clock-icon
+        div.time-input-container
+          div.input-container
+            input.form-item-input(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
+          span —
+          div.input-container
+            input.form-item-input(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
+      div.form-inform-container
+        basic-icon(width="24" height="24" icon-color="#090A15")
+          user-icon
+        div.input-container
+          input.form-item-input(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
+    div.form-item-container(class='additional-information')
+      div.form-inform-container
+        span.title-form Дополнительная информация
+        button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)")
+      div.form-inform-container(v-for="(info, index) in listFriendInfo" :key="index")
+        span.number-additional {{info}}
+        div.input-container
+          input.form-item-input(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
+    div.form-item-container
+      span.title-form Вид события
+      div.input-container(@click="openSelectKindEvent")
+        div.form-select
+          div.form-item-input.select-container-kind {{eventData.kindEvent}}
+            div.option-container(v-if="selectKindEventOpen" id="kind" @click="(event)=>chooseOption(event)")
+              div.option-item(v-for="(kind, index) in kindEvents" :key="index" :id="index") {{kind}}
+        div.select-form-separator
+        basic-icon(width="24" height="24" icon-color="#090A15")
+          arrow-down-icon
+    div.form-item-container
+      div.form-inform-container
+        span.title-form Контакты
+        button-plus(id="addContact" @click="(e)=>addFriendInfo(e)")
+      div.form-inform-container(v-for="(contact, index) in listContacts" :key="index")
+        basic-icon(width="24" height="20" icon-color="#090A15")
+          mail-icon
+        div.input-container
+          input.form-item-input(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
+    add-event-button(@click="createEvent")
+</template>
+
+<script>
+import BasicIcon from "../../iconsComponents/basicIcon/BasicIcon";
+import ArrowDownIcon from "../../iconsComponents/ArrowDownIcon";
+import ClockIcon from  "../../iconsComponents/ClockIcon";
+import UserIcon from "../../iconsComponents/UserSmallIcon";
+import MailIcon from "../../iconsComponents/MailIcon";
+import CloseIcon from "../../iconsComponents/CloseIcon"
+import AddEventButton from "../../buttons/AddEventButton";
+import ButtonPlus from "../../buttons/ButtonPlus";
+export default {
+  name: "FormChangeEvent",
+  components: {ClockIcon, ArrowDownIcon, UserIcon, MailIcon, CloseIcon, BasicIcon, AddEventButton, ButtonPlus},
+  props: {
+    listResponsible: {
+      default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."]
+    }
+  },
+  data() {
+    return {
+      formOpen: true,
+      selectResponsibleOpen: false,
+      selectKindEventOpen: false,
+      listFriendInfo: [1],
+      listContacts: [1],
+      kindEvents: ["Встреча", "Планерка", "Интервью","Важная работа"],
+      eventData: {
+        responsible: "Выберите ответственного",
+        eventClient: "",
+        timeEvent: {
+          firstTime: "11:00",
+          secondTime: "12:30",
+        },
+        friendInfo: {},
+        kindEvent: "Вид события",
+        contacts: {}
+      }
+    }
+  },
+  methods: {
+    createEvent() {
+      this.formOpen = !this.formOpen
+    },
+    addFriendInfo(e) {
+      if(e.currentTarget.id === "addInfo") {
+        this.listFriendInfo.push(this.listFriendInfo[this.listFriendInfo.length-1]+1)
+      }
+      if(e.currentTarget.id === "addContact") {
+        this.listContacts.push(this.listContacts[this.listContacts.length-1]+1)
+      }
+    },
+    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">
+  .event-form-change
+    position: relative
+    display: flex
+    flex-direction: column
+    row-gap: 24px
+    min-width: 448px
+    padding: 21px 32px 24px 32px
+    background-color: var(--bg-white-color)
+    box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
+    border-radius: 4px
+  .title-form
+    font-size: 12px
+    line-height: 14px
+    font-style: normal
+    opacity: 0.4
+  .form-item-container
+    display: flex
+    flex-direction: column
+    row-gap: 8px
+  .input-container
+    display: flex
+    column-gap: 8px
+    align-items: center
+    cursor: pointer
+    border-radius: 4px
+    padding: 8px 16px 8px 16px
+    width: fit-content
+    background-color: var(--bg-ligth-blue-color)
+  .form-item-input
+    font-family: Raleway, sans-serif
+    font-style: normal
+    font-size: 16px
+    appearance: none
+    border: none
+    outline: none
+    cursor: pointer
+    color: rgba(9, 10, 21, 0.5)
+    background-color: rgba(9, 10, 21, 0)
+    &::-webkit-calendar-picker-indicator
+      display: none
+      -webkit-appearance: none
+  .select-form-separator
+    background-color: rgba(65, 105, 225, 0.2)
+    height: 24px
+    width: 1px
+    border-radius: 1px
+  .time-input-container
+    display: flex
+    align-items: center
+    column-gap: 8px
+  .form-inform-container
+    display: flex
+    align-items: center
+    column-gap: 16px
+  .number-additional
+    margin-left: 6px
+  .close-icon
+    cursor: pointer
+  .close-icon-position
+    display: flex
+    justify-content: space-between
+    padding-top: 10px
+  .form-select
+    position: relative
+    display: flex
+    flex-direction: column
+  .option-container
+    position: absolute
+    width: max-content
+    background-color: var(--bg-ligth-blue-color)
+    z-index: 3
+  .option-item
+    color: var(--font-black-color)
+    font-family: Raleway, sans-serif
+    font-style: normal
+    font-size: 16px
+    &:hover
+      background-color: var(--btn-blue-color)
+  .select-container-res
+    min-width: 205px
+  .select-container-kind
+    min-width: 119px
+</style>