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

Merge pull request #98 from dderbentsov/UC-43

Browse Source 
WIP Поправила поля ввода даты
This commit is contained in:
Daria Golova
2022-11-02 20:59:44 +03:00
committed by GitHub
parent eaaa5e21ef 7028dac001
commit 5ae67320d5
10 changed files with 167 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/TheHeader.vue
View File

@@ -1,7 +1,7 @@
<template lang="pug">
.header-wrapper.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
.flex.items-center.box-border.cursor-pointer.mr-auto
img.logo-img.mr-29_25px(src="@/assets/images/logo.svg" alt="Logo")
img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
header-inputs
//- .charge-person-container
//- header-active-client-panel(:info="chargePersonInfo")
@@ -10,8 +10,8 @@
button.header-buttons.flex.justify-center.items-center.mr-8.p-0
.icon-bell.text-xxl
.flex.justify-centflexer.items-center
base-avatar(:size="32").mr-2
img(:src="avatarSrc")
base-avatar.mr-2(:size="32")
img(:src="avatarSrc", alt="Avatar")
button.header-buttons
.icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
</template>

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

@@ -1,23 +1,23 @@
<template lang="pug">
.calendar-container.flex
calendar-sidebar(@width="changeWidth"
:team-data="employeesData"
:open-form-create="openFormCreateEvent")
calendar-sidebar(
@width="changeWidth"
:team-data="employeesData"
:open-form-create="openFormCreateEvent"
)
calendar-schedule(
:owners-data="employeesData"
:current-date="currentDate"
:time-information="timeInformation"
:events-data="eventsData"
:members-data="membersData"
:sidebar-width="sidebarWidth"
:close-form-create-event="closeFormCreateEvent"
:is-open-form="isOpenForm"
@previous-date="switchPreviousDate"
@next-date="switchNextDate"
@selected-layout="changeCalendarLayout"
)
calendar-form-add-event(
v-if="isOpenForm"
:close-form="closeFormCreateEvent"
:owners-data="employeesData"
:members-data="membersData"
@open-change-form="openFormCreateEvent"
)
</template>
@@ -82,7 +82,6 @@ export default {
changeWidth(value) {
this.sidebarWidth = value;
},
openFormCreateEvent() {
this.isOpenForm = true;
},

4
src/pages/calendar/components/CalendarBackground.vue
View File

@@ -1,13 +1,13 @@
<template lang="pug">
.flex.flex-col(
:style="backgroundExtendedWidth"
)
)
.flex.flex-col
.line-wrapper
.line.flex.items-center(
v-for="hour in timeCoil"
:key="hour"
)
)
.middle-line
</template>

2
src/pages/calendar/components/CalendarClockColumn.vue
View File

@@ -4,7 +4,7 @@
v-for="hour in timeCoil"
:key="hour"
:class="currentHourStyle(hour)"
) {{ hour }}
) {{ hour }}
</template>
<script>

12
src/pages/calendar/components/CalendarColumn.vue
View File

@@ -3,7 +3,11 @@
.header.flex.items-center.justify-between.py-2.px-6.top-0
.flex.items-center
base-avatar.mr-2(:size="32", :color="ownerData.color")
img(:src="ownerData.avatar" alt="Team member" v-if="ownerData.avatar")
img(
:src="ownerData.avatar"
alt="Team member"
v-if="ownerData.avatar"
)
span(v-if="!ownerData.avatar") {{ defaultAvatar }}
span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
@@ -14,7 +18,8 @@
:key="event.id"
:ownerEvent="event"
:style="eventCardPosition(event.start, event.end)"
)
@selected-event="transmitEventData"
)
</template>
<script>
@@ -79,6 +84,9 @@ export default {
top: `${position}px`,
};
},
transmitEventData(eventData) {
this.$emit("selected-event", eventData);
},
},
};
</script>

6
src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue
View File

@@ -1,8 +1,8 @@
<template lang="pug">
div.icon-wrap.flex.items-center.justify-center.cursor-pointer.py-1.px-2(
:class="{disable: !isChecked}"
@click="changeState"
)
:class="{disable: !isChecked}"
@click="changeState"
)
.icon-doc-ok.text-xxl
</template>

5
src/pages/calendar/components/CalendarEventCard.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
.wrapper.flex.px-2.my-1.items-start.cursor-pointer(:style="cardHeight")
.wrapper.flex.px-2.my-1.items-start.cursor-pointer(:style="cardHeight", @click="transmitEventData")
.header.flex.justify-between.items-center
.header-text
span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
@@ -61,6 +61,9 @@ export default {
composeFullName(object) {
return `${object.last_name} ${object.first_name} ${object.patronymic}`;
},
transmitEventData() {
this.$emit("selected-event", this.ownerEvent);
},
},
};
</script>

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

@@ -19,17 +19,30 @@
.flex.gap-x-4.items-center
.icon-time.text-xl.icon
.flex.gap-x-2.items-center
.time-input.flex.gap-x-2.px-4.py-2.items-center
.time-input.flex.px-4.py-2.items-center
input.item-input.text-base.cursor-text(
v-model="start"
placeholder ="11:00"
)
v-model="startTime"
placeholder ="11:00"
)
span —
.time-input.flex.gap-x-2.px-4.py-2.items-center
.time-input.flex.px-4.py-2.items-center
input.item-input.text-base.cursor-text(
v-model="end"
placeholder ="12:30"
)
v-model="endTime"
placeholder ="12:30"
)
.flex.items-center.ml-10
.flex.gap-x-2.items-center
.date-input.flex.px-4.py-2.items-center
input.item-input.text-base.cursor-text(
v-model="startDate"
placeholder ="2022-10-01"
)
span —
.date-input.flex.px-4.py-2.items-center
input.item-input.text-base.cursor-text(
v-model="endDate"
placeholder ="2022-10-01"
)
.flex.gap-x-4.items-center
.icon-person.text-xl.icon
base-select(
@@ -41,7 +54,7 @@
@changeInput="addMember"
placeholder="Выберите участника"
separator
)
)
.flex.flex-col.gap-y-2
span.text-xs.opacity-40.font-bold.leading-3 Вид события
base-select(
@@ -64,19 +77,25 @@
:icon-left-size="10"
id="addContact"
@click="(e)=>addContact(e)")
.flex.gap-x-4.items-center(v-for="(contact, index) in listContacts" :key="index")
.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-text.text-base(v-model="contacts" type="text" placeholder="E-mail")
input.item-input.cursor-text.text-base(
v-model="contacts"
type="text"
placeholder="E-mail"
)
base-button.styled-button.text-base.font-semibold(
:size="40"
:disabled="disabledButton"
@click="sendEventData"
:size="40"
:disabled="disabledButton"
@click="sendEventData"
) Создать событие
</template>
<script>
import * as moment from "moment/moment";
import BaseSelect from "@/components/base/OldBaseSelect";
import BaseButton from "@/components/base/BaseButton";
export default {
@@ -96,12 +115,16 @@ export default {
return [];
},
},
selectedEventData: {
type: Object,
default() {
return {};
},
},
},
data() {
return {
listContacts: [1],
ownerSelectSize: 22,
kindEventSelectSize: 10,
memberSelectSize: 29,
kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
eventData: {},
@@ -110,13 +133,16 @@ export default {
role: null,
},
contacts: [],
start: "",
end: "",
startTime: "",
endTime: "",
employees: {
employee: null,
role: "owner",
},
startDate: "",
endDate: "",
kind: "",
id: null,
};
},
computed: {
@@ -160,14 +186,14 @@ export default {
return "";
},
eventStartTime() {
if (this.start) {
return `${moment().format("YYYY-MM-DD")}T${this.start}:00Z`;
if (this.startTime && this.startDate) {
return this.addDate(this.startDate, this.startTime);
}
return "";
},
eventEndTime() {
if (this.end) {
return `${moment().format("YYYY-MM-DD")}T${this.end}:00Z`;
if (this.endTime && this.endDate) {
return this.addDate(this.endDate, this.endTime);
}
return "";
},
@@ -183,6 +209,18 @@ export default {
}
return true;
},
ownerSelectSize() {
if (this.ownerName) {
return this.ownerName.split(" ").join("").length;
}
return 22;
},
kindEventSelectSize() {
if (this.kind) {
return this.kind.split(" ").join("").length;
}
return 10;
},
},
methods: {
chooseOptionOwner(e) {
@@ -195,11 +233,9 @@ export default {
first_name: foundEmployee.first_name,
patronymic: foundEmployee.patronymic,
};
this.ownerSelectSize = this.ownerName.split(" ").join("").length;
},
chooseOptionTypeEvent(e) {
this.kind = e.target.id;
this.kindEventSelectSize = this.kind.split(" ").join("").length;
},
chooseOptionMember(e) {
let foundMember = this.membersData.find(
@@ -238,14 +274,40 @@ export default {
},
sendEventData() {
this.eventData = {
start: this.eventStartTime,
end: this.eventEndTime,
id: this.id,
start: this.addDate(this.startTime, this.startDate),
end: this.addDate(this.endTime, this.endDate),
kind: this.kind,
employees: [this.employees],
members: [this.members],
};
this.closeForm();
},
addDate(time, data) {
return `${data}T${time}:00Z`;
},
trimTime(str) {
return str.slice(11, -4);
},
trimDate(str) {
return str.slice(0, 12);
},
},
mounted() {
this.id = this.selectedEventData.id || null;
this.startTime = this.trimTime(this.selectedEventData.start) || "";
this.endTime = this.trimTime(this.selectedEventData.end) || "";
this.kind = this.selectedEventData.kind || "";
this.employees = this.selectedEventData.employees[0] || {
employee: null,
role: "owner",
};
this.members = this.selectedEventData.members[0] || {
member: null,
role: null,
};
this.startDate = this.trimDate(this.selectedEventData.start);
this.endDate = this.trimDate(this.selectedEventData.end);
},
};
</script>
@@ -281,6 +343,11 @@ export default {
border-radius: 4px
background-color: var(--bg-ligth-blue-color)
.date-input
width: 120px
border-radius: 4px
background-color: var(--bg-ligth-blue-color)
.icon
width: 24px
height: 24px

4
src/pages/calendar/components/CalendarLayoutSwitch.vue
View File

@@ -3,11 +3,11 @@
button#day.py-2.px-3(
:class="dayLayoutState"
@click="changeSelectedLayout"
) День
) День
button#week.py-2.px-3(
:class="weekLayoutState"
@click="changeSelectedLayout"
) Неделя
) Неделя
</template>
<script>

42
src/pages/calendar/components/CalendarSchedule.vue
View File

@@ -1,14 +1,14 @@
<template lang="pug">
.schedule.ml-2(
:style="scheduleWidth"
)
)
calendar-header(
:current-date="currentDate"
:is-current-date="isCurrentDate"
@previous-date="previousDate"
@next-date="nextDate"
@selected-layout="selectedLayout"
)
)
.schedule-body
.column-wrapper.flex.ml-20(:style="columnWrapperWidth")
calendar-column(
@@ -19,6 +19,7 @@
:day-start-time="validateStartTime"
:day-end-time="validateEndTime"
:style="columnSize"
@selected-event="writeEventData"
)
.flex.w-full.relative
.time-coil-wrapper.left-0.-mt-12.pt-9
@@ -40,7 +41,14 @@
calendar-background(
:time-coil="timeCoil"
:owners-count="ownersCount"
)
)
calendar-form-add-event(
v-if="isOpenForm"
:close-form="closeFormCreateEvent"
:owners-data="ownersData"
:members-data="membersData"
:selected-event-data="selectedEvent"
)
</template>
<script>
@@ -49,6 +57,7 @@ import CalendarHeader from "./CalendarHeader.vue";
import CalendarBackground from "./CalendarBackground.vue";
import CalendarClockColumn from "./CalendarClockColumn.vue";
import CalendarColumn from "./CalendarColumn.vue";
import CalendarFormAddEvent from "./CalendarFormAddEvent.vue";
export default {
name: "CalendarSchedule",
components: {
@@ -56,6 +65,7 @@ export default {
CalendarBackground,
CalendarClockColumn,
CalendarColumn,
CalendarFormAddEvent,
},
props: {
currentDate: {
@@ -83,6 +93,14 @@ export default {
return [];
},
},
membersData: {
type: Array,
default() {
return [];
},
},
closeFormCreateEvent: Function,
isOpenForm: Boolean,
},
data() {
return {
@@ -94,6 +112,20 @@ export default {
pixelsPerHour: 62,
columnHeaderHeight: 48,
defaultColumnWidth: 470,
selectedEvent: {
id: null,
start: "",
end: "",
kind: "",
employees: {
employee: null,
role: "owner",
},
members: {
member: null,
role: null,
},
},
};
},
computed: {
@@ -284,6 +316,10 @@ export default {
});
return filteredArray;
},
writeEventData(eventData) {
this.selectedEvent = eventData;
this.$emit("open-change-form");
},
},
watch: {
currentTime() {