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

Merge pull request #207 from dderbentsov/UC-165

Browse Source 
WIP Изменила цвета событий
This commit is contained in:
Daria Golova
2022-12-16 14:22:00 +03:00
committed by GitHub
parent 1c25170828 2e2e9bcdec
commit 3230a0b0e6
11 changed files with 161 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/icons/close_circle_remove_delete_icon_149506 1 (1).svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2219_45392)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23.375C18.2822 23.375 23.375 18.2822 23.375 12C23.375 5.71776 18.2822 0.625 12 0.625C5.71776 0.625 0.625 5.71776 0.625 12C0.625 18.2822 5.71776 23.375 12 23.375ZM16.5459 18.8899L18.844 16.5918L14.2478 11.9956L18.8555 7.38793L16.5574 5.08984L11.9497 9.69751L7.35351 5.10131L5.05541 7.39941L9.65161 11.9956L5.06689 16.5803L7.36499 18.8784L11.9497 14.2937L16.5459 18.8899Z" fill="#FF6565"/>
</g>
<defs>
<clipPath id="clip0_2219_45392">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 692 B

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

@@ -39,6 +39,12 @@
--bg-event-blue-color-1: #93cdf6
--bg-event-default-hover-color: #d9e1f9
--border-event-default-color: #b3c3f3
--bg-event-orange-color: #ffc75b
--bg-event-orange-color-0: #ffe6b9
--bg-event-orange-color-1: #ffd27c
--bg-event-grey-color: #87898f
--bg-event-grey-color-0: #d3d4d7
--bg-event-grey-color-1: #acadb1
--light-grey-bg-color: #f8f9fa
--btn-green-color: rgba(60, 217, 75, 1)
--btn-light-green-color: rgba(60, 217, 75, 0.2)

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

@@ -4,7 +4,7 @@
:url="url",
:team-data="employeesData",
:open-form-create="openFormCreateEvent",
:event-types="eventTypes",
:event-status="eventStatus",
@width="changeWidth",
)
calendar-schedule(
@@ -14,7 +14,7 @@
:time-information="timeInformation",
:events-data="eventsData",
:sidebar-width="sidebarWidth",
:event-types="eventTypes",
:event-status="eventStatus",
:change-form-was-closed="changeFormWasClosed",
@previous-date="switchPreviousDate",
@next-date="switchNextDate",
@@ -30,7 +30,7 @@
:close-form="closeFormCreateEvent",
:owners-data="employeesData",
:selected-event-data="selectedEvent",
:event-types="eventTypes",
:event-status="eventStatus",
:time-information="timeInformation",
@clear-selected-event-data="clearSelectedEvent",
@close-change-form="setChangeFormState"
@@ -40,7 +40,7 @@
title="Удаление события"
)
calendar-delete-modal(
:event-types="eventTypes",
:event-types="eventStatus",
:owner-event="selectedEvent",
:close-modal="changeShowModal",
@update-events="fetchEventsData"
@@ -82,11 +82,49 @@ export default {
employeesData: [],
isOpenForm: false,
changeFormWasClosed: false,
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)" },
{ id: 4, label: "Важная работа", color: "var(--bg-event-blue-color)" },
eventStatus: [
{
id: 0,
label: "Планируется прием",
value: "PLANNED",
color: "var(--default-white)",
},
{
id: 1,
label: "Отменил",
value: "CANCELED",
color: "var(--bg-event-grey-color)",
},
{
id: 2,
label: "Ожидается прием",
value: "EXPECTED",
color: "var(--bg-event-yellow-color)",
},
{
id: 3,
label: "Опаздывает",
value: "LATE",
color: "var(--bg-event-orange-color)",
},
{
id: 4,
label: "Идет прием",
value: "RECEPTION",
color: "var(--bg-event-blue-color)",
},
{
id: 5,
label: "Прием завершен",
value: "COMPLETED",
color: "var(--bg-event-green-color)",
},
{
id: 6,
label: "Не пришел",
value: "DID_NOT_COME",
color: "var(--bg-event-red-color)",
},
],
};
},

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

@@ -19,7 +19,7 @@
:key="event.id + index",
:id="event.id",
:ownerEvent="event",
:event-types="eventTypes",
:event-status="eventStatus",
:style="eventCardPosition(event.start, event.end)",
:change-form-was-closed="changeFormWasClosed",
@selected-event="transmitEventData",
@@ -45,7 +45,7 @@ export default {
dayEvents: Array,
dayEndTime: Number,
dayStartTime: Number,
eventTypes: Array,
eventStatus: Array,
changeFormWasClosed: Boolean,
scheduleBodyRef: Node,
url: String,

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

@@ -25,7 +25,7 @@
calendar-event-description-card(
v-if="isOpenDescriptionCard",
:owner-event="ownerEvent",
:event-types="eventTypes",
:event-status="eventStatus",
@selected-event="transmitEventData",
@close-description-card="closeDescriptionCard",
@delete-event="transmitDeleteEvent",
@@ -41,7 +41,7 @@ export default {
props: {
changeFormWasClosed: Boolean,
ownerEvent: Object,
eventTypes: {
eventStatus: {
type: Array,
default() {
return [];
@@ -101,42 +101,60 @@ export default {
};
},
themeColors() {
switch (this.ownerEvent.kind) {
case this.eventTypes[0].label:
switch (this.ownerEvent.status) {
case this.eventStatus[1].value:
return {
"--bg-color": "var(--bg-event-green-color-0)",
"--bg-active": this.eventTypes[0].color,
"--bg-hover": "var(--bg-event-green-color-1)",
"--bg-color": "var(--bg-event-grey-color-0)",
"--bg-active": this.eventStatus[1].color,
"--bg-hover": "var(--bg-event-grey-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--default-white)",
"--count-color": this.eventTypes[0].color,
"--count-color": this.eventStatus[1].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:
case this.eventStatus[2].value:
return {
"--bg-color": "var(--bg-event-yellow-color-0)",
"--bg-active": this.eventTypes[2].color,
"--bg-active": this.eventStatus[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:
case this.eventStatus[3].value:
return {
"--bg-color": "var(--bg-event-orange-color-0)",
"--bg-active": this.eventStatus[3].color,
"--bg-hover": "var(--bg-event-orange-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--font-black-color)",
"--count-color": "var(--font-black-color)",
};
case this.eventStatus[4].value:
return {
"--bg-color": "var(--bg-event-blue-color-0)",
"--bg-active": this.eventTypes[3].color,
"--bg-active": this.eventStatus[4].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,
"--count-color": this.eventStatus[4].color,
};
case this.eventStatus[5].value:
return {
"--bg-color": "var(--bg-event-green-color-0)",
"--bg-active": this.eventStatus[5].color,
"--bg-hover": "var(--bg-event-green-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--default-white)",
"--count-color": this.eventStatus[5].color,
};
case this.eventStatus[6].value:
return {
"--bg-color": "var(--bg-event-red-color-0)",
"--bg-active": this.eventStatus[6].color,
"--bg-hover": "var(--bg-event-red-color-1)",
"--font-color": "var(--font-black-color)",
"--font-active-color": "var(--default-white)",
"--count-color": this.eventStatuss[6].color,
};
default:
return {

52
src/pages/calendar/components/CalendarEventDescriptionCard.vue
View File

@@ -8,8 +8,8 @@
.flex.justify-between.items-center.mb-2
.flex
span.inline-block.font-bold.text-base.mr-3.mt-2px {{ eventTime }}
.type.text-xxs.px-14px.py-1(v-if="isCertainType")
span.type-text {{ ownerEvent.kind }}
.type.text-xs.font-medium.flex.items-center.justify-center.px-14px(v-if="isCertainType")
span.type-text {{ status }}
.right-side.flex.gap-x-4.text-sm(v-if="!disabled")
.icon-basket.flex.items-center.cursor-pointer(@click="transmitDeleteEvent")
.icon-edit.flex.items-center.cursor-pointer(@click="transmitEventData")
@@ -26,11 +26,12 @@
</template>
<script>
import { statusesDictionary } from "../utils/statusesDictionary.js";
export default {
name: "CalendarEventDescriptionCard",
props: {
ownerEvent: Object,
eventTypes: {
eventStatus: {
type: Array,
default() {
return [];
@@ -49,31 +50,48 @@ export default {
};
},
computed: {
status() {
return this.ownerEvent.status
? statusesDictionary[this.ownerEvent.status]
: "";
},
typeColor() {
switch (this.ownerEvent.kind) {
case this.eventTypes[0].label:
switch (this.ownerEvent.status) {
case this.eventStatus[1].value:
return {
"--bg-color": "var(--bg-event-green-color-0)",
"--font-color": this.eventTypes[0].color,
"--bg-color": "var(--bg-event-grey-color-0)",
"--font-color": this.eventStatus[1].color,
};
case this.eventTypes[1].label:
return {
"--bg-color": "var(--bg-event-red-color-0)",
"--font-color": this.eventTypes[1].color,
};
case this.eventTypes[2].label:
case this.eventStatus[2].value:
return {
"--bg-color": "var(--bg-event-yellow-color-0)",
"--font-color": "var(--font-black-color)",
};
case this.eventTypes[3].label:
case this.eventStatus[3].value:
return {
"--bg-color": "var(--bg-event-orange-color-0)",
"--font-color": "var(--font-black-color)",
};
case this.eventStatus[4].value:
return {
"--bg-color": "var(--bg-event-blue-color-0)",
"--font-color": this.eventTypes[3].color,
"--font-color": this.eventStatus[4].color,
};
case this.eventStatus[5].value:
return {
"--bg-color": "var(--bg-event-green-color-0)",
"--font-color": this.eventStatus[5].color,
};
case this.eventStatus[6].value:
return {
"--bg-color": "var(--bg-event-red-color-0)",
"--font-color": this.eventStatus[6].color,
};
default:
this.changeType();
return {};
return {
"--bg-color": "var(--bg-event-default-hover-color)",
"--font-color": "var(--btn-blue-color)",
};
}
},
eventTime() {

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

@@ -11,7 +11,7 @@
span.text-xs.opacity-40.font-bold.leading-3 Вид события
base-custom-select.select(
v-model="kind",
:items="eventTypes",
:items="eventStatus",
placeholder="Вид события"
)
.flex.flex-col(class="gap-y-1.5")
@@ -99,7 +99,7 @@ export default {
return {};
},
},
eventTypes: {
eventStatus: {
type: Array,
default() {
return [];

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

@@ -25,7 +25,7 @@
:day-start-time="validateStartTime",
:day-end-time="validateEndTime",
:style="columnSize",
:event-types="eventTypes",
:event-status="eventStatus",
:change-form-was-closed="changeFormWasClosed",
@selected-event="transmitEventData",
@reset-change-form="transmitResetChangeForm",
@@ -97,7 +97,7 @@ export default {
return [];
},
},
eventTypes: {
eventStatus: {
type: Array,
default() {
return [];

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

@@ -19,9 +19,9 @@
@click="openFormCreate",
v-else
) Создать событие
calendar-sidebar-event(:is-open="isOpen", :event-type="eventTypes")
calendar-sidebar-event(:is-open="isOpen", :event-status="eventStatus")
calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen", :url="url")
//- .button-wrapper.flex.justify-center.mb-23px
.button-wrapper.flex.justify-center.mb-23px
base-button(
left-icon="icon-long-arrow",
rounded, :size="40",
@@ -47,7 +47,7 @@ export default {
props: {
teamData: Array,
openFormCreate: Function,
eventTypes: Array,
eventStatus: Array,
url: String,
},
data() {

10
src/pages/calendar/components/CalendarSidebarEvent.vue
View File

@@ -3,7 +3,7 @@
.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
.event.flex.items-center.justify-center(v-for="event in eventType" :key="event.id")
.event.flex.items-center.justify-center(v-for="event in eventStatus" :key="event.id")
.event-type(:style="{ background: event.color }")
.flex.flex-col.gap-y-4.w-full(v-else)
.flex.items-center.justify-between
@@ -16,7 +16,7 @@
secondary
)
.flex.flex-col.gap-y-2
.relative.flex.items-center.gap-x-3.h-8(v-for="event in eventType")
.relative.flex.items-center.gap-x-3.h-8(v-for="event in eventStatus")
input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(
:placeholder="event.label"
:key="event.id"
@@ -34,7 +34,7 @@ export default {
},
props: {
isOpen: Boolean,
eventType: Array,
eventStatus: Array,
},
};
</script>
@@ -43,7 +43,7 @@ export default {
.event
width: 32px
height: 32px
background: var(--bg-event-box-color)
background: var(--btn-blue-sec-color)
border-radius: 4px
.event-type
@@ -58,7 +58,7 @@ export default {
border-radius: 4px
width: 169px
outline: none
background-color: var(--bg-event-box-color)
background-color: var(--btn-blue-sec-color)
&::placeholder
color: var(--font-dark-blue-color)
&:focus

9
src/pages/calendar/utils/statusesDictionary.js Normal file
View File

@@ -0,0 +1,9 @@
export const statusesDictionary = {
PLANNED: "Планируется прием",
EXPECTED: "Ожидается прием",
RECEPTION: "Идет прием",
COMPLETED: "Прием завершен",
DID_NOT_COME: "Не пришел",
LATE: "Опаздывает",
CANCELED: "Отменил",
};