82 lines
2.3 KiB
Vue
82 lines
2.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")
|
|
base-modal(v-model="isShowForm", title="Создание записи", modal-padding)
|
|
record-creation-form(v-model="isShowForm", :close-form="closeForm")
|
|
base-modal(v-model="previewVisibility", :hideHeader="true", :modalPadding="true")
|
|
calendar-record-preview(v-model:preview-visibility="previewVisibility")
|
|
</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";
|
|
import BaseModal from "@/components/base/BaseModal.vue";
|
|
import CalendarRecordPreview from "./components/CalendarRecordPreview.vue";
|
|
import { mapActions, mapState } from "vuex";
|
|
export default {
|
|
name: "TheCalendar",
|
|
components: {
|
|
CalendarSidebar,
|
|
CalendarOpenSidebar,
|
|
CalendarWrapper,
|
|
RecordCreationForm,
|
|
BaseModal,
|
|
CalendarRecordPreview,
|
|
},
|
|
data() {
|
|
return {
|
|
isOpen: false,
|
|
currentDate: moment(),
|
|
isShowForm: false,
|
|
previewVisibility: false,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
selectedRecordId: (state) => state.calendar.selectedRecordId,
|
|
}),
|
|
},
|
|
methods: {
|
|
openSidebar() {
|
|
this.isOpen = !this.isOpen;
|
|
},
|
|
createForm() {
|
|
this.isShowForm = true;
|
|
},
|
|
closeForm() {
|
|
this.isShowForm = false;
|
|
},
|
|
...mapActions({
|
|
changeSelectedRecordId: "changeSelectedRecordId",
|
|
}),
|
|
},
|
|
watch: {
|
|
selectedRecordId(value) {
|
|
if (value) this.previewVisibility = !!value;
|
|
},
|
|
previewVisibility(value) {
|
|
if (!value) this.changeSelectedRecordId(null);
|
|
},
|
|
},
|
|
};
|
|
</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>
|