159 lines
3.7 KiB
Vue
159 lines
3.7 KiB
Vue
<template lang="pug">
|
|
.flex.flex-col.gap-y-5
|
|
.flex.justify-center.pl-8.pr-20.font-bold.text-xl Планировщик смен
|
|
transition(name="form")
|
|
form-change-shift(
|
|
v-if="showForm",
|
|
:close-form="closeForm",
|
|
:times-shift="timesShift"
|
|
)
|
|
.flex
|
|
.calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
|
|
.flex
|
|
q-btn.mr-4(
|
|
class="secondary",
|
|
round,
|
|
size="14px",
|
|
dense,
|
|
@click="previousHandler",
|
|
)
|
|
q-icon(name="arrow_back_ios", right)
|
|
q-btn.mr-6(
|
|
@click="nextHandler",
|
|
class="secondary",
|
|
icon="arrow_forward_ios",
|
|
round,
|
|
size="14px",
|
|
dense,
|
|
)
|
|
.text.flex.items-center
|
|
.text.font-medium.text-base {{ dateString }}
|
|
.opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
|
|
.flex.gap-x-4.h-10
|
|
q-btn(
|
|
:label="textButton",
|
|
color="primary",
|
|
no-caps,
|
|
padding="8px 24px",
|
|
@click="changeShowTime",
|
|
)
|
|
q-btn(
|
|
label="Замена смен",
|
|
color="primary",
|
|
no-caps,
|
|
padding="8px 24px",
|
|
@click="openForm",
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import * as moment from "moment";
|
|
import BaseButton from "@/components/base/BaseButton.vue";
|
|
import FormChangeShift from "@/pages/schedule/components/FormChangeShift.vue";
|
|
|
|
export default {
|
|
name: "ScheduleHeader",
|
|
components: { BaseButton, FormChangeShift },
|
|
props: {
|
|
startMonth: Object,
|
|
timesShift: Object,
|
|
changeShowTime: Function,
|
|
showTime: Boolean,
|
|
},
|
|
data() {
|
|
return {
|
|
showForm: false,
|
|
isCurrentMonth: true,
|
|
};
|
|
},
|
|
computed: {
|
|
dateString() {
|
|
return this.startMonth
|
|
.format("MMMM YYYY")
|
|
.split(" ")
|
|
.map((elem, index) => {
|
|
if (index === 0) return elem[0].toUpperCase() + elem.slice(1);
|
|
return elem;
|
|
})
|
|
.join(" ");
|
|
},
|
|
textButton() {
|
|
return this.showTime ? "Скрыть время" : "Показать время";
|
|
},
|
|
},
|
|
methods: {
|
|
openForm() {
|
|
this.showForm = true;
|
|
},
|
|
closeForm() {
|
|
this.showForm = false;
|
|
},
|
|
previousHandler() {
|
|
this.$emit("switch-previous-month");
|
|
},
|
|
nextHandler() {
|
|
this.$emit("switch-next-month");
|
|
},
|
|
},
|
|
watch: {
|
|
startMonth() {
|
|
this.isCurrentMonth =
|
|
this.startMonth.format("YYYY-MM-DD") ===
|
|
moment().date(1).format("YYYY-MM-DD");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.calendar-header-wrapper
|
|
width: 100%
|
|
background-color: var(--default-white)
|
|
height: 56px
|
|
border-radius: 4px
|
|
z-index: 10
|
|
|
|
.left-arrow
|
|
padding: 3px 4px 0 4px !important
|
|
transform: rotate(90deg)
|
|
|
|
.right-arrow
|
|
padding: 3px 4px 0 4px !important
|
|
transform: rotate(270deg)
|
|
|
|
.text
|
|
color: var(--font-dark-blue-color)
|
|
|
|
.form-enter-from
|
|
opacity: 0
|
|
transform: translateY(300px)
|
|
pointer-events: none
|
|
|
|
.form-enter-active
|
|
transition: 0.5s ease
|
|
|
|
.form-leave-to
|
|
opacity: 0
|
|
transform: translateY(300px)
|
|
pointer-events: none
|
|
|
|
.form-leave-active
|
|
transition: 0.5s ease
|
|
|
|
.form-move
|
|
transition: 0.5s ease
|
|
|
|
.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>
|