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

Merge pull request #122 from dderbentsov/UC-42

Browse Source 
WIP Добавила DescriptionCard
This commit is contained in:
Daria Golova
2022-11-10 19:12:32 +03:00
committed by GitHub
parent 37223df834 a2d4f06674
commit 367d9d4359
11 changed files with 275 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/sass/variables.sass
View File

@@ -25,9 +25,19 @@
--font-obligatory-color: #ff0000
--bg-event-box-color: rgba(37, 40, 80, 0.1)
--bg-event-green-color: #24d07d
--bg-event-green-color-0: #cdf0e5
--bg-event-green-color-1: #92e8be
--bg-event-red-color: #e93131
--bg-event-red-color-0: #f8c1c1
--bg-event-red-color-1: #f49898
--bg-event-yellow-color: #e5e931
--bg-event-yellow-color-0: #f8f9c2
--bg-event-yellow-color-1: #f2f498
--bg-event-blue-color: #3ba3ee
--bg-event-blue-color-0: #c5e4fa
--bg-event-blue-color-1: #93cdf6
--bg-event-default-hover-color: #d9e1f9
--border-event-default-color: #b3c3f3
--light-grey-bg-color: #f8f9fa
--btn-green-color: rgba(60, 217, 75, 1)
--btn-light-green-color: rgba(60, 217, 75, 0.2)

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

@@ -4,7 +4,7 @@
@width="changeWidth"
:team-data="employeesData"
:open-form-create="openFormCreateEvent"
:event-type="eventType"
:event-types="eventTypes"
)
calendar-schedule(
:owners-data="employeesData"
@@ -15,6 +15,7 @@
:sidebar-width="sidebarWidth"
:close-form-create-event="closeFormCreateEvent"
:is-open-form="isOpenForm"
:event-types="eventTypes"
@previous-date="switchPreviousDate"
@next-date="switchNextDate"
@selected-layout="changeCalendarLayout"
@@ -55,7 +56,7 @@ export default {
employeesData: [],
isOpenForm: false,
membersData: [],
eventType: [
eventTypes: [
{ id: 1, label: "Встреча", color: "var(--bg-event-green-color)" },
{ id: 2, label: "Планерка", color: "var(--bg-event-red-color)" },
{ id: 3, label: "Интервью", color: "var(--bg-event-yellow-color)" },

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

@@ -17,6 +17,7 @@
v-for="event in dayEvents"
:key="event.id"
:ownerEvent="event"
:event-types="eventTypes"
:style="eventCardPosition(event.start, event.end)"
@selected-event="transmitEventData"
)
@@ -38,6 +39,7 @@ export default {
dayEvents: Array,
dayEndTime: Number,
dayStartTime: Number,
eventTypes: Array,
},
data() {
return {

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

@@ -1,20 +1,52 @@
<template lang="pug">
.wrapper.flex.px-2.my-1.items-start.cursor-pointer(:style="cardHeight", @click="transmitEventData")
.header.flex.justify-between.items-center
.wrapper.cursor-pointer.my-1.relative(
@click="transmitEventData",
:style="themeColors",
:class="cardTheme"
)
.card.flex.px-2(
:class="{'py-6px flex-col': longCard}",
:style="cardHeight"
)
.header.flex.justify-between.items-center(:class="{'items-start': longCard}")
.header-text
span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
span.inline-block.align-middle.font-medium.text-base {{ eventMember }}
.details-count.flex.justify-center.items-center.text-xxs.font-medium(v-if="someDetailsShown") {{ `+${detailsCount}` }}
.body.flex.text-xxs.font-medium(v-if="longCard")
.col.mr-22px
ul
li.mt-2(v-for="elem in descriptionColumns.leftColumn" :key="elem") {{ elem }}
.col
ul
li.mt-2(v-for="elem in descriptionColumns.rightColumn" :key="elem") {{ elem }}
calendar-event-description-card.right-0(
v-if="isActive"
:style="descriptionCardPosition"
:owner-event="this.ownerEvent"
:event-types="this.eventTypes"
)
</template>
<script>
import CalendarEventDescriptionCard from "./CalendarEventDescriptionCard.vue";
export default {
name: "CalendarEventCard",
components: { CalendarEventDescriptionCard },
props: {
ownerEvent: Object,
eventTypes: {
type: Array,
default() {
return [];
},
},
},
data() {
return {
pixelsPerHour: 62,
isActive: false,
someDetailsShown: true,
};
},
computed: {
@@ -53,6 +85,103 @@ export default {
height: `${this.calculateCardHeight - 8}px`,
};
},
cardTheme() {
return {
"active-theme": this.isActive,
"default-theme": !this.isActive,
"long-card": this.longCard,
};
},
themeColors() {
switch (this.ownerEvent.kind) {
case this.eventTypes[0].label:
return {
"--bg-color": "var(--bg-event-green-color-0)",
"--bg-active": this.eventTypes[0].color,
"--bg-hover": "var(--bg-event-green-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--default-white)",
"--count-color": this.eventTypes[0].color,
};
case this.eventTypes[1].label:
return {
"--bg-color": "var(--bg-event-red-color-0)",
"--bg-active": this.eventTypes[1].color,
"--bg-hover": "var(--bg-event-red-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--default-white)",
"--count-color": this.eventTypes[1].color,
};
case this.eventTypes[2].label:
return {
"--bg-color": "var(--bg-event-yellow-color-0)",
"--bg-active": this.eventTypes[2].color,
"--bg-hover": "var(--bg-event-yellow-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--font-black-color)",
"--count-color": "var(--font-black-color)",
};
case this.eventTypes[3].label:
return {
"--bg-color": "var(--bg-event-blue-color-0)",
"--bg-active": this.eventTypes[3].color,
"--bg-hover": "var(--bg-event-blue-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--default-white)",
"--count-color": this.eventTypes[3].color,
};
default:
return {
"--bg-color": "var(--default-white)",
"--bg-active": "var(--btn-blue-color)",
"--bg-hover": "var(--bg-event-default-hover-color)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--default-white)",
"--border-color": "#b3c3f3",
"--border-active-color": "var(--btn-blue-color)",
"--count-color": "var(--btn-blue-color)",
};
}
},
description() {
return this.ownerEvent.description
? this.ownerEvent.description.split(", ")
: [];
},
descriptionColumns() {
let leftCol = [],
rightCol = [],
heightParts = parseInt((this.calculateCardHeight - 8) / 23);
if (this.ownerEvent.description && heightParts > 1) {
let n = heightParts;
for (let i = 0; i < n * 2 - 2; i++) {
if (!this.description[i]) break;
i % 2 === 0
? leftCol.push(this.description[i])
: rightCol.push(this.description[i]);
}
}
return {
leftColumn: leftCol,
rightColumn: rightCol,
};
},
longCard() {
return parseInt((this.calculateCardHeight - 8) / 23) > 1 ? true : false;
},
detailsCount() {
let columnsLength =
this.descriptionColumns.leftColumn.length +
this.descriptionColumns.rightColumn.length,
remainingDetails = this.description.length - columnsLength;
if (!remainingDetails) this.changeDetailsShown();
return remainingDetails;
},
descriptionCardPosition() {
return {
top: `calc(${this.cardHeight.height} + 8px)`,
};
},
},
methods: {
trimTime(time) {
@@ -62,22 +191,96 @@ export default {
return `${object.last_name} ${object.first_name} ${object.patronymic}`;
},
transmitEventData() {
this.changeTheme();
this.$emit("selected-event", this.ownerEvent);
},
changeTheme() {
this.isActive = !this.isActive;
},
changeDetailsShown() {
this.someDetailsShown = false;
},
},
};
</script>
<style lang="sass" scoped>
.wrapper
width: calc(100% - 8px)
height: 23px
border-radius: 4px
background-color: var(--bg-event-yellow-color)
color: var(--font-black-color)
position: absolute
z-index: 3
width: calc(100% - 8px)
height: 23px
.default-theme
.card
background-color: var(--bg-color)
border: 2px solid var(--border-color)
border-left: 4px solid var(--bg-active)
.header-text, .body
color: var(--font-color)
.details-count
background-color: var(--bg-active)
color: var(--font-active-color)
li:before
background-color: var(--font-color)
.active-theme
.card
background-color: var(--bg-active)
border: 2px solid var(--border-active-color)
border-left: 4px solid var(--bg-active)
.header-text, .body
color: var(--font-active-color)
.details-count
background-color: var(--default-white)
color: var(--count-color)
li:before
background-color: var(--font-active-color)
.card
border-radius: 4px
min-height: 23px
&:hover
background-color: var(--bg-hover)
border: 2px solid var(--border-color)
border-left: 4px solid var(--bg-active)
&:hover .header-text
color: var(--font-color)
&:hover .details-count
background-color: var(--bg-active)
color: var(--font-active-color)
&:hover .body
color: var(--font-color)
&:hover li:before
background-color: var(--font-color)
.header
width: 100%
.details-count
width: 24px
height: 16px
border-radius: 16px
.col
max-width: calc(462px/2 - 22px)
ul
list-style-type: none
margin: 0
padding: 0
li
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
li:before
content: ''
display: inline-block
height: 8px
width: 8px
border-radius: 50%
background-color : var(--font-black-color)
margin-right: 4px
</style>

27
src/pages/calendar/components/CalendarEventDescriptionCard.vue Normal file
View File

@@ -0,0 +1,27 @@
<template lang="pug">
.wrapper.px-4.pt-14px.pb-4.font-medium
</template>
<script>
export default {
name: "CalendarEventDescriptionCard",
props: {
ownerEvent: Object,
eventTypes: {
type: Array,
default() {
return [];
},
},
},
};
</script>
<style lang="sass" scoped>
.wrapper
width: 426px
background-color: var(--default-white)
border-radius: 4px
color: var(--font-black-color)
box-shadow: var(--default-shadow)
</style>

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

@@ -114,6 +114,12 @@ export default {
return {};
},
},
eventTypes: {
type: Array,
default() {
return [];
},
},
},
data() {
return {

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

@@ -20,6 +20,7 @@
:day-start-time="validateStartTime"
:day-end-time="validateEndTime"
:style="columnSize"
:event-types="eventTypes"
@selected-event="writeEventData"
)
.flex.w-full.relative
@@ -49,6 +50,7 @@
:owners-data="ownersData"
:members-data="membersData"
:selected-event-data="selectedEvent"
:event-types="eventTypes"
@clear-selected-event-data="clearSelectedEvent"
@update-events="transmitUpdateEvents"
)
@@ -104,6 +106,12 @@ export default {
},
closeFormCreateEvent: Function,
isOpenForm: Boolean,
eventTypes: {
type: Array,
default() {
return [];
},
},
},
data() {
return {
@@ -370,6 +378,7 @@ export default {
<style lang="sass" scoped>
.schedule
border-top-left-radius: 4px
position: relative
border-top-left-radius: 4px
background-color: var(--default-white)

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

@@ -19,7 +19,7 @@
@click="openFormCreate",
v-else
) Создать событие
calendar-sidebar-event(:is-open="isOpen", :event-type="eventType")
calendar-sidebar-event(:is-open="isOpen", :event-type="eventTypes")
calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen")
.button-wrapper.flex.justify-center.mb-23px
base-button(
@@ -34,8 +34,8 @@
<script>
import BaseButton from "@/components/base/BaseButton";
import CalendarSidebarEvent from "./cells/CalendarSidebarEvent.vue";
import CalendarSidebarTeammate from "./cells/CalendarSidebarTeammate.vue";
import CalendarSidebarEvent from "./CalendarSidebarEvent.vue";
import CalendarSidebarTeammate from "./CalendarSidebarTeammate.vue";
export default {
name: "CalendarSidebar",
@@ -47,7 +47,7 @@ export default {
props: {
teamData: Array,
openFormCreate: Function,
eventType: Array,
eventTypes: Array,
},
data() {
return {

0
src/pages/calendar/components/cells/CalendarSidebarEvent.vue → src/pages/calendar/components/CalendarSidebarEvent.vue
View File

0
src/pages/calendar/components/cells/CalendarSidebarTeammate.vue → src/pages/calendar/components/CalendarSidebarTeammate.vue
View File

1
tailwind.config.js
View File

@@ -37,6 +37,7 @@ module.exports = {
"14px": "14px",
"15px": "15px",
"19px": "19px",
"22px": "22px",
"23px": "23px",
"29_25px": "29.25px",
"45px": "45px",