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

Merge pull request #79 from dderbentsov/UC-24

Browse Source 
Добавила в хедер колонок чекбокс
This commit is contained in:
Daria Golova
2022-10-28 18:27:07 +03:00
committed by GitHub
parent 8b0babec77 6953412f4d
commit 5d06451f68
11 changed files with 136 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
server.js
View File

@@ -458,9 +458,9 @@ export function clientsServer() {
previous: null,
results: [
{
id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
start: "2022-10-27T11:15:49Z",
end: "2022-10-27T12:00:53Z",
id: "6fgg6bb6-1de6-422c-a401-1b35cd455303",
start: "2022-10-28T11:15:49Z",
end: "2022-10-28T12:00:53Z",
kind: "call",
subkind: null,
description: "",
@@ -502,8 +502,8 @@ export function clientsServer() {
},
{
id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
start: "2022-10-27T13:00:49Z",
end: "2022-10-27T13:30:53Z",
start: "2022-10-28T13:00:49Z",
end: "2022-10-28T13:30:53Z",
kind: "call",
subkind: null,
description: "",
@@ -545,8 +545,8 @@ export function clientsServer() {
},
{
id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
start: "2022-10-27T15:00:00Z",
end: "2022-10-27T16:10:00Z",
start: "2022-10-28T15:00:00Z",
end: "2022-10-28T16:10:00Z",
kind: "call",
subkind: null,
description: "",
@@ -588,8 +588,8 @@ export function clientsServer() {
},
{
id: "2faa5ff2-2de6-422c-a401-1b35cd455223",
start: "2022-10-25T17:10:00Z",
end: "2022-10-25T18:00:00Z",
start: "2022-10-28T17:10:00Z",
end: "2022-10-28T18:00:00Z",
kind: "call",
subkind: null,
description: "",
@@ -631,8 +631,8 @@ export function clientsServer() {
},
{
id: "2faa5ff2-2de6-422c-a401-1b35cd455223",
start: "2022-10-27T20:10:00Z",
end: "2022-10-27T21:00:00Z",
start: "2022-10-28T20:10:00Z",
end: "2022-10-28T21:00:00Z",
kind: "call",
subkind: null,
description: "",
@@ -672,6 +672,49 @@ export function clientsServer() {
},
],
},
{
id: "3faa5ff3-3de6-422c-a401-1b35cd455333",
start: "2022-10-28T12:30:00Z",
end: "2022-10-28T15:30:00Z",
kind: "call",
subkind: null,
description: "",
location: null,
members: [
{
id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
person: {
id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
last_name: "Елесеевская",
first_name: "Татьяна",
patronymic: "Ивановна",
},
role: null,
},
],
employees: [
{
id: "f941a0c6-c734-4f79-92c2-d7a5674459e422",
employee: {
id: "db831a15-e876-481f-a658-6325de7c311e",
last_name: "Константинопольская",
first_name: "Юлия",
patronymic: "Викторовна",
},
role: null,
},
{
id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
employee: {
id: "db541a67-e836-481f-a653-6325de7c567e",
last_name: "Захарова",
first_name: "Ольга",
patronymic: "Александровна",
},
role: "owner",
},
],
},
],
}));
this.passthrough("http://45.84.227.122:8080/**");

28
src/components/HeaderAddClientButton.vue
View File

@@ -1,28 +0,0 @@
<template lang="pug">
button.add-client-button.flex.items-center.justify-center
.icon-wrapper.flex.items-center.justify-center.icon-plus.text-xsm
.icon-wrapper.flex.items-center.justify-center.icon-person.text-m
</template>
<script>
export default {
name: "HeaderAddClientButton",
};
</script>
<style lang="sass" scoped>
.add-client-button
width: 80px
height: 40px
background-color: var(--btn-blue-color)
color: var(--default-white)
border-radius: 4px
&:hover
background-color: var(--btn-blue-color-4)
&:active
background-color: var(--font-dark-blue-color)
.icon-wrapper
width: 24px
height: 24px
</style>

12
src/components/TheHeader.vue
View File

@@ -6,11 +6,11 @@
//- .charge-person-container
//- header-active-client-panel(:info="chargePersonInfo")
.flex.ml-auto
header-add-client-button.mr-9
base-button.mr-9(left-icon="icon-plus", :icon-left-size="10", :size="40", right-icon="icon-person", :icon-right-size="18")
button.header-buttons.flex.justify-center.items-center.mr-8.p-0
.icon-bell.text-xxl
.flex.justify-centflexer.items-center
BaseAvatar(:size="32").mr-2
base-avatar(:size="32").mr-2
img(:src="avatarSrc")
button.header-buttons
.icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
@@ -20,11 +20,11 @@
import img from "@/assets/images/avatar.svg";
import chargePersonAvatar from "@/assets/images/charge-person-avatar.svg";
import HeaderInputs from "./HeaderInputs.vue";
import HeaderAddClientButton from "./HeaderAddClientButton.vue";
import BaseAvatar from "@/components/base/BaseAvatar";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "TheHeader",
components: { HeaderInputs, HeaderAddClientButton, BaseAvatar },
components: { HeaderInputs, BaseAvatar, BaseButton },
data() {
return {
avatarSrc: img,
@@ -64,10 +64,6 @@ export default {
height: 24px
color: var(--font-dark-blue-color)
.avatar-img
width: 32px
height: 32px
.charge-person-container
position: absolute
</style>

20
src/components/base/buttons/BaseArrowButton.vue
View File

@@ -1,20 +0,0 @@
<template lang="pug">
button.arrow-button.flex.items-center.icon-down-arrow.text-base.px-2.pt-3px
</template>
<script>
export default {
name: "ArrowButton",
};
</script>
<style lang="sass" scoped>
.arrow-button
width: 32px
height: 32px
background-color: var(--btn-blue-color-1)
color: var(--btn-blue-color)
border-radius: 50%
&:hover
background-color: var(--btn-blue-color-2)
</style>

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

@@ -25,8 +25,8 @@ export default {
calendarLayout: "",
currentDate: moment(),
timeInformation: {
dayStartTime: "8:00",
dayEndTime: "24:00",
dayStartTime: "0:00",
dayEndTime: "20:00",
},
eventsData: [],
teamData: [],

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

@@ -1,9 +1,8 @@
<template lang="pug">
.calendar-background-wrapper.flex.flex-col(
ref="backgroundWrapper"
.flex.flex-col(
:style="backgroundExtendedWidth"
)
.body.flex.flex-col
.flex.flex-col
.line-wrapper
.line.flex.items-center(
v-for="hour in timeCoil"
@@ -17,26 +16,16 @@ export default {
name: "CalendarBackground",
props: {
timeCoil: Array,
filteredOwners: Array,
eventsData: Array,
currentDate: Object,
sidebarWidth: String,
dayStartTime: Number,
dayEndTime: Number,
ownersCount: Number,
},
data() {
return {
backgroundWidth: 0,
columnWidth: 0,
defaultColumnWidth: 470,
pixelsPerHour: 62,
};
},
computed: {
ownersArrayLength() {
return this.filteredOwners.length;
},
backgroundExtendedWidth() {
if (this.ownersCount > 3) {
return {
@@ -47,56 +36,14 @@ export default {
width: "100%",
};
},
backgroundHeight() {
return (this.timeCoil.length - 1) * this.pixelsPerHour + 48;
},
horizontalScrollPresence() {
return {
"scroll-x": this.ownersArrayLength > 3,
};
},
},
methods: {
calculateColumnPosition(elemIndex) {
let deductible = parseInt(this.sidebarWidth.slice(0, -2), 10) - 72;
if (this.ownersArrayLength < 4) {
this.columnWidth =
(this.backgroundWidth - deductible) / this.ownersArrayLength;
return {
width: `${this.columnWidth}px`,
height: `${this.backgroundHeight}px`,
left: `${elemIndex * this.columnWidth}px`,
};
}
return {
width: `${this.defaultColumnWidth}px`,
height: `${this.backgroundHeight}px`,
left: `${elemIndex * this.defaultColumnWidth}px`,
};
},
calculateBackgroundWidth() {
this.backgroundWidth = this.$refs.backgroundWrapper.scrollWidth;
},
},
mounted() {
this.calculateBackgroundWidth();
},
};
</script>
<style lang="sass" scoped>
.calendar-background-wrapper
position: relative
.header-wrapper
position: relative
.header
height: 48px
.body
position: relative
.line
border-bottom: 1px solid var(--border-light-grey-color)
height: 62px

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

@@ -2,11 +2,13 @@
.calendar-column-wrapper.flex.flex-col
.header.flex.items-center.justify-between.py-2.px-6.top-0
.flex.items-center
img.avatar-wrapper.mr-2(src="@/assets/images/team-member.svg" alt="Team member")
base-avatar.mr-2(:size="32")
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")
base-doc-ok-button
.body
column-header-checkbox
.body.pl-1
calendar-event-card(
v-for="event in dayEvents"
:key="event.id"
@@ -16,11 +18,16 @@
</template>
<script>
import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
import ColumnHeaderCheckbox from "./CalendarColumnHeaderCheckbox.vue";
import BaseAvatar from "@/components/base/BaseAvatar";
import CalendarEventCard from "./CalendarEventCard.vue";
export default {
name: "CalendarColumn",
components: { BaseDocOkButton, CalendarEventCard },
components: {
CalendarEventCard,
BaseAvatar,
ColumnHeaderCheckbox,
},
props: {
ownerData: Object,
dayEvents: Array,
@@ -42,6 +49,9 @@ export default {
}
return null;
},
defaultAvatar() {
return `${this.ownerData.last_name[0]}${this.ownerData.first_name[0]}`;
},
pixelsPerMinute() {
return this.pixelsPerHour / 60;
},
@@ -76,8 +86,6 @@ export default {
<style lang="sass" scoped>
.calendar-column-wrapper
border-right: 1px solid var(--border-light-grey-color)
&:nth-last-child(2) .header
border-right: none
&:last-child
border-right: none
@@ -90,9 +98,9 @@ export default {
position: relative
z-index: 3
.avatar-wrapper
width: 32px
height: 32px
.btn
opacity: 0.5
padding: 7px 13px !important
.icon-wrapper
width: 24px

18
src/components/base/buttons/BaseDocOkButton.vue → src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue
View File

@@ -1,25 +1,32 @@
<template lang="pug">
button.icon-wrap.flex.items-center.justify-center.py-1.px-2(:class="{disable: isDisable}")
div.icon-wrap.flex.items-center.justify-center.cursor-pointer.py-1.px-2(
:class="{disable: !isChecked}"
@click="changeState"
)
span(v-if="numberIsVisible") 3
.icon-doc-ok.text-xxl
</template>
<script>
export default {
name: "DocOkButton",
name: "CalendarColumnHeaderCheckbox",
data() {
return {
numberIsVisible: false,
isDisable: true,
isChecked: false,
};
},
methods: {
changeState() {
this.isChecked = !this.isChecked;
this.$emit("isChecked", this.isChecked);
},
},
};
</script>
<style lang="sass" scoped>
.disable
opacity: 0.5
.icon-wrap
height: 32px
background-color: var(--btn-blue-color-1)
@@ -30,7 +37,6 @@ export default {
&:active
background-color: var(--font-dark-blue-color)
color: var(--default-white)
.icon-doc-ok
width: 24px
height: 24px

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

@@ -1,5 +1,5 @@
<template lang="pug">
.wrapper.flex.px-2.my-1.cursor-pointer
.wrapper.flex.px-2.my-1.items-start.cursor-pointer(:style="cardHeight")
.header.flex.justify-between.items-center
.header-text
span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
@@ -12,7 +12,15 @@ export default {
props: {
ownerEvent: Object,
},
data() {
return {
pixelsPerHour: 62,
};
},
computed: {
pixelsPerMinute() {
return this.pixelsPerHour / 60;
},
eventTime() {
return `${this.trimTime(this.ownerEvent.start)} - ${this.trimTime(
this.ownerEvent.end
@@ -28,6 +36,24 @@ export default {
}
return this.composeFullName(membersArray[0].person);
},
calculateCardHeight() {
let startTime = this.trimTime(this.ownerEvent.start)
.split(":")
.map((elem) => parseInt(elem, 10));
console.log(startTime);
let endTime = this.trimTime(this.ownerEvent.end)
.split(":")
.map((elem) => parseInt(elem, 10));
return (
(endTime[0] * 60 + endTime[1] - (startTime[0] * 60 + startTime[1])) *
this.pixelsPerMinute
);
},
cardHeight() {
return {
height: `${this.calculateCardHeight - 8}px`,
};
},
},
methods: {
trimTime(time) {
@@ -42,7 +68,7 @@ export default {
<style lang="sass" scoped>
.wrapper
width: 100%
width: calc(100% - 8px)
height: 23px
border-radius: 4px
background-color: var(--bg-event-yellow-color)

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

@@ -1,8 +1,10 @@
<template lang="pug">
.calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
.flex
base-arrow-button.left-arrow.mr-4(@click="previousHandler")
base-arrow-button.right-arrow.mr-6(@click="nextHandler")
base-button.left-arrow.mr-4(left-icon="icon-down-arrow", rounded, secondary,
:iconLeftSize="16", :size="32", @click="previousHandler")
base-button.right-arrow.mr-6(left-icon="icon-down-arrow", rounded, secondary,
:iconLeftSize="16", :size="32", @click="nextHandler")
.text.flex.items-center
span.font-medium.text-base {{ dateString }}
span.today.font-bold.text-xxs(v-if="isCurrentDate") Сегодня
@@ -10,11 +12,11 @@
</template>
<script>
import BaseArrowButton from "@/components/base/buttons/BaseArrowButton.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import CalendarLayoutSwitch from "./CalendarLayoutSwitch.vue";
export default {
name: "CalendarHeader",
components: { BaseArrowButton, CalendarLayoutSwitch },
components: { CalendarLayoutSwitch, BaseButton },
props: {
currentDate: Object,
isCurrentDate: Boolean,
@@ -54,9 +56,11 @@ export default {
z-index: 10
.left-arrow
padding: 3px 4px 0 4px !important
transform: rotate(90deg)
.right-arrow
padding: 3px 4px 0 4px !important
transform: rotate(270deg)
.text

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

@@ -10,7 +10,7 @@
@selected-layout="selectedLayout"
)
.schedule-body
.column-wrapper.flex.ml-20.relative(:style="columnWrapperWidth")
.column-wrapper.flex.ml-20(:style="columnWrapperWidth")
calendar-column(
v-for="(owner, index) in filteredOwners"
:key="owner.id"
@@ -18,10 +18,10 @@
:day-events="filterEventsByOwner(owner)"
:day-start-time="validateStartTime"
:day-end-time="validateEndTime"
:style="columnWidth"
:style="columnSize"
)
.flex.w-full.relative
.time-coil-wrapper.left-0.-mt-3
.time-coil-wrapper.left-0.-mt-12.pt-9
calendar-clock-column(
:timeCoil="timeCoil"
:current-time="currentTime"
@@ -38,12 +38,7 @@
)
.flex(:class="calendarBackgroundWidth")
calendar-background(
:current-date="currentDate"
:time-coil="timeCoil"
:events-data="eventsData"
:sidebar-width="sidebarWidth"
:day-start-time="validateStartTime"
:day-end-time="validateEndTime"
:owners-count="ownersCount"
)
</template>
@@ -125,7 +120,7 @@ export default {
},
circleIndicatorLocation() {
return {
top: `${this.calculateIndicatorLocation() + 6}px`,
top: `${this.calculateIndicatorLocation() + 42}px`,
};
},
pixelsPerMinute() {
@@ -187,7 +182,7 @@ export default {
this.columnHeaderHeight
);
},
columnWidth() {
columnSize() {
if (this.ownersCount > 3) {
return {
height: `${this.columnHeight}px`,
@@ -260,7 +255,7 @@ export default {
if (this.convertTime(elem, 0, -3) === this.hours) {
return this.hoursMinutes;
}
return elem;
return elem.slice(0, -3) + ":00";
});
},
verifyTime(dayTime) {
@@ -360,12 +355,14 @@ export default {
z-index: 5
.column-wrapper
position: relative
height: 48px
background-color: var(--default-white)
.time-coil-wrapper
position: sticky
z-index: 5
background-color: var(--default-white)
.schedule-body
width: 100%