admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #82 from dderbentsov/add_window_create_event

Browse Source 
Добавил окно создания события
This commit is contained in:
frontgavrilin
2022-10-28 19:03:13 +03:00
committed by GitHub
parent e14636d4a2 073e468820
commit be817b06e1
3 changed files with 76 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/calendar/TheCalendar.vue
View File

@@ -1,6 +1,8 @@
<template lang="pug">
.calendar-container.flex
calendar-sidebar(@width="changeWidth" :team-data="teamData")
calendar-sidebar(@width="changeWidth"
:team-data="teamData"
:open-form-create="openFormCreateEvent")
calendar-schedule(
:current-date="currentDate"
:time-information="timeInformation"
@@ -10,15 +12,21 @@
@next-date="switchNextDate"
@selected-layout="changeCalendarLayout"
)
calendar-form-add-event(v-if="isOpenForm" :close-form="closeFormCreateEvent")
</template>
<script>
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 },
components: {
CalendarSchedule,
CalendarSidebar,
CalendarFormAddEvent,
},
data() {
return {
sidebarWidth: "72px",
@@ -30,6 +38,7 @@ export default {
},
eventsData: [],
teamData: [],
isOpenForm: false,
};
},
methods: {
@@ -59,6 +68,13 @@ export default {
changeWidth(value) {
this.sidebarWidth = value;
},
openFormCreateEvent() {
this.isOpenForm = true;
},
closeFormCreateEvent() {
this.isOpenForm = false;
},
},
mounted() {
this.fetchEventsData();

100
src/pages/calendar/components/CalendarFormAddEvent.vue
View File

@@ -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 Основная информация
@@ -19,61 +16,71 @@
.icon-time.text-xl.icon
.flex.gap-x-2.items-center
.form-item.flex.gap-x-2.px-4.py-2.items-center
input.item-input.no-italic.text-base.cursor-pointer(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
input.item-input.no-italic.text-base.cursor-text(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
span —
.form-item.flex.gap-x-2.px-4.py-2.items-center
input.item-input.no-italic.text-base.cursor-pointer(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
input.item-input.no-italic.text-base.cursor-text(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
.flex.gap-x-4.items-center
.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="Что-то важное")
input.item-input.cursor-text.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)")
//- 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")
input.item-input.cursor-text.no-italic.text-base(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
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>

15
src/pages/calendar/components/CalendarSidebar.vue
View File

@@ -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 {