217 lines
7.4 KiB
Vue
217 lines
7.4 KiB
Vue
<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>
|