Calendar JS

calendar.js

// Components
import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';

// Schemas
const normalizr = require('normalizr');
const categorySchema = new normalizr.schema.Entity('categories');
const categoriesSchema = [ categorySchema ];
const accountSchema = new normalizr.schema.Entity('accounts');
const accountsSchema = [ accountSchema ];
const evergreenPostSchema = new normalizr.schema.Entity('evergreenPosts');
const evergreenPostsSchema = [ evergreenPostSchema ];

// Utilities
const VueScrollTo = require('vue-scrollto');

Vue.component('calendar', {
    props: ['user', 'currentTeam'],

    mixins: [
        require('../mixins/text'),
        require('../mixins/utils')
    ],

    components: {
        flatPickr: flatPickr
    },

    data() {
        return {
            categories: {},
            accounts: {},
            accountIds: [],
            evergreenPosts: {},
            accountsCategories: {},
            accountsInCategories: {},
            selectedView: 'day',
            date: new Date(),
            flatPickrConfig: {
                dateFormat: 'Y-m-d',
                required: true,
                weekNumbers: true,
                onValueUpdate: function(selectedDate, dateStr, instance) {
                    Bus.$emit('selectedDateChanged', selectedDate);
                }
            },
            isDeleting: false,
        }
    },

    computed: {
        postsOrder() {
            if (this.selectedView === 'all') {

                return [].concat(
                    this.categories[this.selectedCategoryId].order.draft,
                    this.categories[this.selectedCategoryId].order.pending,
                    this.categories[this.selectedCategoryId].order.approved,
                    this.categories[this.selectedCategoryId].order.archived
                );
            }

            return this.categories[this.selectedCategoryId].order[this.selectedView];
        }
    },

    methods: {
        selectViewTab (tab) {
            this.selectedView = tab;
            
            Bus.$emit('switchViewTab', {
                view: this.selectedView,
            });
        },
        showEditEvergreenPostModal(postId) {
            Bus.$emit('editEvergreenPost', this.evergreenPosts[postId]);
        },
        showCopyEvergreenPostModal(postId) {
            Bus.$emit('copyEvergreenPost', this.evergreenPosts[postId]);
        },
        deleteEvergreenPost (postId) {
            this.isDeleting = true;
            this.unsavedChanges = true;
            let selectedCategoryId = this.selectedCategoryId;
            let status = this.evergreenPosts[postId].status;
            let index = this.categories[selectedCategoryId].order[status].indexOf(postId);

            this.categories[selectedCategoryId].order[status].splice(index, 1);

            axios.delete('/api/evergreen-post/' + postId).then(res => {
                let data = res.data;
                this.isDeleting = false;
                this.unsavedChanges = false;

                Vue.delete(this.evergreenPosts, postId);
                this.evergreenPosts = this.evergreenPosts; // delete doesn't trigger view updates, so we need to force this to happen
            }).catch(function (err) {
                console.log(err.message);
                this. isDeleting = false;
                this.unsavedChanges = false;
            });
        },
        getAccountsInCategories() {
            
            let accountsInCategories = [];
            
            _.each(this.categories, category => {
                accountsInCategories[category.id] = [];
            });

            _.each(this.accountsCategories, accountCategory => {
                accountsInCategories[accountCategory.category_id].push(accountCategory.connected_account_id);
            });

            return accountsInCategories;
        },
        
        getCategoryIds() {
            return _.chain(this.categories).sortBy('name').map(category => category.id).value();
        }
    },

    created () {
        
        // For declarations of the Holly. objects, see bottom of planner.blade.php
        let categoryNormalized = normalizr.normalize(Holly.categories, categoriesSchema);
        let accountNormalized = normalizr.normalize(Holly.accounts, accountsSchema);
        let evergreenPostNormalized = normalizr.normalize(Holly.evergreenPosts, evergreenPostsSchema);

        this.categories = Object.assign({}, this.categories, categoryNormalized.entities.categories);
        this.accounts = Object.assign({}, this.accounts, accountNormalized.entities.accounts);
        this.evergreenPosts = Object.assign({}, this.evergreenPosts, evergreenPostNormalized.entities.evergreenPosts);
        this.accountsCategories = Object.assign({}, this.accountsCategories, Holly.accountsCategories);
        this.accountsInCategories = this.getAccountsInCategories();
        this.categoryIds = this.getCategoryIds();


        this.accountsEvergreenPosts = Object.assign({}, this.accountsEvergreenPosts, Holly.accountsEvergreenPosts);
        this.accountIds = accountNormalized.result;

        this.selectedCategoryId = this.categoryIds.length > 0 ? this.categoryIds[0] : null;

        Bus.$on('evergreenPostEdited', data => {
            Vue.set(this.evergreenPosts, data.evergreen_post.id, data.evergreen_post);
        });

        Bus.$on('newEvergreenPostAdded', data => {
            const evergreenPost = data.evergreen_posts[0];
            const category = data.categories[0];
            Vue.set(this.evergreenPosts, evergreenPost.id, evergreenPost);
            Vue.set(this.categories, category.id, category);
        });
    },

    mounted () {
        
    }
});