moodle-local_treestudyplan/amd/src/treestudyplan-components.js

/*eslint no-var: "error"*/
/*eslint no-console: "off"*/
/*eslint-disable no-trailing-spaces */
/*eslint-env es6*/
// Put this file in path/to/plugin/amd/src

import {load_strings} from './string-helper';

export default {
    studyplanTiming(a) {
        const now = new Date().getTime();
        let timing = 'future';
        if(new Date(a.startdate).getTime() < now){
            if(a.enddate && now > new Date(a.enddate).getTime()) {
                timing = 'past';
            } else {
                timing = 'present';
            }
        }
        return timing;
    },

    install(Vue/*,options*/){
        let strings = load_strings({
            studyplancard: {
                open: "open",
                noenddate: "noenddate",
            }
        });

        Vue.component('s-studyplan-card', {
            props: {
                value: {
                    type: Object,
                },
                open: {
                    type: Boolean
                }
            },
            data() {
                return {
                    text: strings.studyplancard
                };
            },
            computed: {
                timing(){
                    const now = new Date().getTime();
                    const startdate = new Date(this.value.pages[0].startdate).getTime();
                    const enddate = new Date(this.value.pages[0].enddate).getTime();
                    let timing = 'future';
                    if(startdate < now){
                        if(this.value.pages[0].enddate && now > enddate) {
                            timing = 'past';
                        } else {
                            timing = 'present';
                        }
                    }
                    return timing;
                },
                startdate(){
                    const opts = {
                        year: 'numeric', month: 'short', day: 'numeric' 
                    };
                    return new Date(this.value.pages[0].startdate).toLocaleDateString(document.documentElement.lang,opts);
                },
                enddate(){
                    if(this.value.enddate){
                        const opts = {
                            year: 'numeric', month: 'short', day: 'numeric' 
                        };
                        return new Date(this.value.pages[0].enddate).toLocaleDateString(document.documentElement.lang,opts);
                    } 
                    else {
                        return this.text.noenddate;
                    }
                }
            },
            methods: {
                onOpenClick(e) {
                    this.$emit('open',e);
                }
            },
            template: `
            <b-card 
                :class="'s-studyplan-card timing-' + timing"
            >
                <template #header></template>
                <b-card-title>
                    <a v-if='open' href='#' @click.prevent='onOpenClick($event)'>{{value.name}}</a>
                    <template v-else>{{value.name}}</template>
                    <slot name='title'></slot>
                </b-card-title>
                {{ value.description }}
                <slot></slot>
                <template #footer>
                    <span :class="'t-timing-'+timing" v-html="startdate + ' - '+ enddate"></span>
                    <span class="s-studyplan-card-buttons">
                    <slot name='footer'></slot>
                    <b-button style="float:right;" v-if='open' variant='primary' 
                        @click.prevent='onOpenClick($event)'>{{ text.open }}</b-button>
                    </span>
                </template>
            </b-card>
            `,
        });
    }
};