55 lines
1.3 KiB
Vue
55 lines
1.3 KiB
Vue
<template lang="pug">
|
|
.w-full.flex
|
|
calendar-sidebar(v-if="!isOpen", :open-sidebar="openSidebar", :create-form="createForm")
|
|
calendar-open-sidebar(v-else, :open-sidebar="openSidebar", :create-form="createForm")
|
|
calendar-wrapper.ml-2(:open-sidebar="isOpen")
|
|
record-creation-form(:is-show-form="isShowForm")
|
|
</template>
|
|
|
|
<script>
|
|
import CalendarSidebar from "@/pages/newCalendar/components/CalendarSidebar";
|
|
import CalendarOpenSidebar from "@/pages/newCalendar/components/CalendarOpenSidebar";
|
|
import CalendarWrapper from "@/pages/newCalendar/components/CalendarWrapper";
|
|
import RecordCreationForm from "@/pages/newCalendar/components/RecordCreationForm";
|
|
import * as moment from "moment/moment";
|
|
|
|
export default {
|
|
name: "TheCalendar",
|
|
components: {
|
|
CalendarSidebar,
|
|
CalendarOpenSidebar,
|
|
CalendarWrapper,
|
|
RecordCreationForm,
|
|
},
|
|
data() {
|
|
return {
|
|
isOpen: false,
|
|
currentDate: moment(),
|
|
isShowForm: false,
|
|
};
|
|
},
|
|
methods: {
|
|
openSidebar() {
|
|
this.isOpen = !this.isOpen;
|
|
},
|
|
createForm() {
|
|
this.isShowForm = true;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.close
|
|
opacity: 0
|
|
width: 0px
|
|
height: 0
|
|
transition: opacity 0.2s, width 0.3s
|
|
|
|
.active
|
|
opacity: 1
|
|
width: 232px
|
|
height: 100%
|
|
transition: opacity 0.5s, width 0.3s
|
|
</style>
|