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

WIP Изменила цвета событий

Browse Source
This commit is contained in:
Daria Golova
2022-12-16 14:17:18 +03:00
parent 5a5326b850
commit 2e2e9bcdec
11 changed files with 132 additions and 106 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

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

@@ -39,11 +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: #ffdd9d
--bg-event-orange-color: #ffc75b
--bg-event-orange-color-0: #ffe6b9
--bg-event-orange-color-1: #ffd27c
--bg-event-lavender-color: #8ba0ff
--bg-event-lavender-color-1: #c0d1ff
--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)

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

@@ -4,7 +4,7 @@
:url="url",
:team-data="employeesData",
:open-form-create="openFormCreateEvent",
:event-types="eventStatus",
:event-status="eventStatus",
@width="changeWidth",
)
calendar-schedule(
@@ -14,7 +14,7 @@
:time-information="timeInformation",
:events-data="eventsData",
:sidebar-width="sidebarWidth",
:event-types="eventStatus",
: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="eventStatus",
:event-status="eventStatus",
:time-information="timeInformation",
@clear-selected-event-data="clearSelectedEvent",
@close-change-form="setChangeFormState"
@@ -83,47 +83,47 @@ export default {
isOpenForm: false,
changeFormWasClosed: false,
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: 2,
label: "Идет прием",
value: "RECEPTION",
color: "var(--bg-event-blue-color)",
},
{
id: 3,
label: "Прием завершен",
value: "COMPLETED",
color: "var(--bg-event-green-color)",
},
{
id: 4,
label: "Не пришел",
value: "DID_NOT_COME",
color: "var(--bg-event-red-color)",
},
{
id: 5,
label: "Опаздывает",
value: "LATE",
color: "var(--bg-event-orange-color)",
},
{
id: 6,
label: "Отменил",
value: "CANCELED",
color: "var(--bg-event-lavender-color)",
id: 4,
label: "Идет прием",
value: "RECEPTION",
color: "var(--bg-event-blue-color)",
},
{
id: 7,
label: "Планируется прием",
value: "PLANNED",
color: "var(--default-white)",
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,

76
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 [];
@@ -102,59 +102,59 @@ export default {
},
themeColors() {
switch (this.ownerEvent.status) {
case this.eventTypes[0].value:
case this.eventStatus[1].value:
return {
"--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.eventStatus[1].color,
};
case this.eventStatus[2].value:
return {
"--bg-color": "var(--bg-event-yellow-color-0)",
"--bg-active": this.eventTypes[0].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[1].value:
return {
"--bg-color": "var(--bg-event-blue-color-0)",
"--bg-active": this.eventTypes[1].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[1].color,
};
case this.eventTypes[2].value:
return {
"--bg-color": "var(--bg-event-green-color-0)",
"--bg-active": this.eventTypes[2].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[2].color,
};
case this.eventTypes[3].value:
return {
"--bg-color": "var(--bg-event-red-color-0)",
"--bg-active": this.eventTypes[3].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[3].color,
};
case this.eventTypes[4].value:
case this.eventStatus[3].value:
return {
"--bg-color": "var(--bg-event-orange-color-0)",
"--bg-active": this.eventTypes[4].color,
"--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.eventTypes[5].value:
case this.eventStatus[4].value:
return {
"--bg-color": "var(--bg-lavender-color)",
"--bg-active": this.eventTypes[5].color,
"--bg-hover": "var(--bg-event-lavender-color-1)",
"--bg-color": "var(--bg-event-blue-color-0)",
"--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[5].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.flex.items-center.justify-center.px-14px(v-if="isCertainType")
span.type-text {{ ownerEvent.status }}
.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,37 +50,42 @@ export default {
};
},
computed: {
status() {
return this.ownerEvent.status
? statusesDictionary[this.ownerEvent.status]
: "";
},
typeColor() {
switch (this.ownerEvent.status) {
case this.eventTypes[0].value:
case this.eventStatus[1].value:
return {
"--bg-color": "var(--bg-event-grey-color-0)",
"--font-color": this.eventStatus[1].color,
};
case this.eventStatus[2].value:
return {
"--bg-color": "var(--bg-event-yellow-color-0)",
"--font-color": "var(--font-black-color)",
};
case this.eventTypes[1].value:
return {
"--bg-color": "var(--bg-event-blue-color-0)",
"--font-color": this.eventTypes[1].color,
};
case this.eventTypes[2].value:
return {
"--bg-color": "var(--bg-event-green-color-0)",
"--font-color": this.eventTypes[2].color,
};
case this.eventTypes[3].value:
return {
"--bg-color": "var(--bg-event-red-color-0)",
"--font-color": this.eventTypes[3].color,
};
case this.eventTypes[4].value:
case this.eventStatus[3].value:
return {
"--bg-color": "var(--bg-event-orange-color-0)",
"--font-color": "var(--font-black-color)",
};
case this.eventTypes[5].value:
case this.eventStatus[4].value:
return {
"--bg-color": "var(--bg-lavender-color)",
"--font-color": "var(--font-black-color)",
"--bg-color": "var(--bg-event-blue-color-0)",
"--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:
return {

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() {

6
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>

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: "Отменил",
};