127 lines
3.1 KiB
Vue
127 lines
3.1 KiB
Vue
<template lang="pug">
|
|
.sidebar.flex.flex-col.bg-white(:class="openSidebar")
|
|
.sidebar-wrapper.h-full.my-13px.flex.flex-col.justify-between(:style="sidebarWidth")
|
|
.sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
|
|
q-btn(
|
|
color="primary",
|
|
round,
|
|
icon="add",
|
|
size="13px",
|
|
@click="openFormCreate",
|
|
v-if="!isOpen"
|
|
)
|
|
q-btn(
|
|
no-caps
|
|
label="Создать событие",
|
|
color="primary",
|
|
class="text-weight-medium, full-width",
|
|
icon-right="add",
|
|
@click="openFormCreate",
|
|
v-else
|
|
)
|
|
calendar-sidebar-event(:is-open="isOpen", :event-statuses="eventStatuses")
|
|
calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen", :url="url")
|
|
//.button-wrapper.flex.justify-center.mb-23px
|
|
q-btn(
|
|
round,
|
|
icon="east",
|
|
size="18px",
|
|
class="secondary",
|
|
padding="6px",
|
|
:style="{ transform: `rotate(${turnButton})`}",
|
|
@click="changeSize",
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import CalendarSidebarEvent from "./CalendarSidebarEvent.vue";
|
|
import CalendarSidebarTeammate from "./CalendarSidebarTeammate.vue";
|
|
|
|
export default {
|
|
name: "CalendarSidebar",
|
|
components: {
|
|
CalendarSidebarEvent,
|
|
CalendarSidebarTeammate,
|
|
},
|
|
props: {
|
|
schedulesData: Array,
|
|
openFormCreate: Function,
|
|
eventStatuses: Array,
|
|
url: String,
|
|
},
|
|
data() {
|
|
return {
|
|
widthSidebarOpen: "232px",
|
|
widthSidebarClose: "72px",
|
|
isOpen: false,
|
|
turnButton: "0deg",
|
|
};
|
|
},
|
|
computed: {
|
|
openSidebar() {
|
|
return {
|
|
"open-sidebar": this.isOpen,
|
|
};
|
|
},
|
|
sidebarWidth() {
|
|
if (this.isOpen) {
|
|
return {
|
|
width: this.widthSidebarOpen,
|
|
};
|
|
}
|
|
return {
|
|
width: this.widthSidebarClose,
|
|
};
|
|
},
|
|
teamData() {
|
|
if (this.schedulesData.length === 0) return [];
|
|
return this.schedulesData.map((elem) => elem.employee);
|
|
},
|
|
},
|
|
methods: {
|
|
changeSize() {
|
|
this.isOpen = !this.isOpen;
|
|
this.$emit(
|
|
"width",
|
|
this.isOpen ? this.widthSidebarOpen : this.widthSidebarClose
|
|
);
|
|
this.turnButton = this.isOpen ? "180deg" : "0deg";
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.sidebar
|
|
border-top-right-radius: 4px
|
|
|
|
.sidebar-wrapper
|
|
border-left: 2px solid var(--btn-blue-color-3)
|
|
|
|
.open-sidebar
|
|
.sidebar-content
|
|
display: flex
|
|
flex-direction: column
|
|
row-gap: 32px
|
|
padding: 19px 16px
|
|
align-items: center
|
|
width: 232px
|
|
|
|
.button-wrapper
|
|
justify-content: end
|
|
padding-right: 16px
|
|
|
|
.secondary
|
|
background-color: var(--btn-blue-sec-color)
|
|
border: 1px solid var(--btn-blue-sec-color)
|
|
color: var(--btn-blue-color)
|
|
&:hover
|
|
background-color: var(--btn-blue-color-hover)
|
|
border: 1px solid var(--btn-blue-color-hover)
|
|
color: var(--btn-blue-color)
|
|
&:disabled, &[disabled]
|
|
background-color: var(--btn-blue-sec-color)
|
|
border: 1px solid var(--btn-blue-sec-color)
|
|
color: var(--btn-blue-color)
|
|
</style>
|