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

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>