{"version":3,"file":"treestudyplan-components.min.js","sources":["../src/treestudyplan-components.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint-disable no-trailing-spaces */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {load_strings} from './util/string-helper';\nimport {format_date, studyplanDates, studyplanTiming} from './util/date-helper';\n\nexport default {\n\n    install(Vue/*,options*/){\n        let strings = load_strings({\n            studyplancard: {\n                open: \"open\",\n                noenddate: \"noenddate\",\n                idnumber: \"studyplan_idnumber\",\n                description: \"studyplan_description\",\n                completed: \"completed\",\n                details: \"studyplan_details\",\n            },\n            details: {\n                details: \"studyplan_details\",\n            },\n            extrafields: {\n                show: \"show@core\"\n            }\n        });\n        // Create new eventbus for interaction between item components\n        const ItemEventBus = new Vue();\n\n        Vue.component('s-studyplan-card', {\n            props: {\n                value: {\n                    type: Object,\n                },\n                open: {\n                    type: Boolean\n                },\n            },\n            data() {\n                return {\n                    text: strings.studyplancard\n                };\n            },\n            computed: {\n                timing(){\n                    return studyplanTiming(this.value);\n                },\n                dates(){\n                    const dates = studyplanDates(this.value);\n                    return {\n                        start: format_date(dates.start),\n                        end: (dates.end)?format_date(dates.end):this.text.noenddate,\n                    };\n                },\n                \n            },\n            methods: {\n                onOpenClick(e) {\n                    this.$emit('open',e);\n                }\n            },\n            template: `\n            <b-card\n                :class=\"'s-studyplan-card timing-' + timing\"\n            >\n                <template #header></template>\n                \n                <div class='s-studyplan-card-content'>\n                    <div class='s-studyplan-card-icon'><img :src='value.icon'></div>\n                    <div class='s-studyplan-card-info'>\n                        <div class='s-studyplan-card-titlebar'>\n                            <b-card-title>\n                                <a class='title' v-if='open' href='#' @click.prevent='onOpenClick($event)'>{{value.name}}</a>\n                                <template v-else>{{value.name}}</template>\n                            </b-card-title>\n                            <div class='s-studyplan-card-titleslot'><slot name='title'></slot></div>\n                        </div>        \n                        <div class='s-studyplan-card-idnumber' v-if='value.idnumber'>\n                        {{ text.idnumber }}: {{ value.idnumber }}\n                        </div>\n                        <s-progress-bar \n                            v-if='value.progress !== undefined && value.progress !== null'\n                            v-model=\"value.progress\"\n                        ></s-progress-bar>\n                    </div>\n                    \n                </div>\n                <slot></slot>\n                <template #footer>\n                    <span :class=\"'t-timing-'+timing\" v-html=\"dates.start + ' - '+ dates.end\"></span>\n                    <span class=\"s-studyplan-card-buttons\">\n                    <slot name='footer'></slot>\n                    <s-studyplan-details \n                        v-model=\"value\" \n                        v-if=\"value.description\"\n                    ><i class='fa fa-info-circle'></i></s-studyplan-details>\n                    <b-button style=\"float:right;\" v-if='open' variant='primary'\n                        @click.prevent='onOpenClick($event)'>{{ text.open }}</b-button>\n                    </span>\n                </template>\n            </b-card>\n            `,\n        });\n\n        Vue.component('s-progress-bar', {\n            props: {\n                value: {\n                    type: Number, \n                },\n                min: {\n                    type: Number,\n                    default() { return 0;}\n                },\n                max: {\n                    type: Number,\n                    default() { return 1;}\n                }\n            },\n            data() {\n                return {\n                    text: strings.studyplancard\n                };\n            },\n            computed: {\n                width_completed() {\n                    if(this.value) {\n                        const v = ( (this.value - this.min) / (this.max - this.min));\n                        return v * 100;\n                    } else {\n                        return 0;\n                    }\n                },\n                width_incomplete() {\n                    if(this.value) {\n                        const v = ( (this.value - this.min) / (this.max - this.min));\n                        return (1-v) * 100;\n                    } else {\n                        return 100;\n                    }\n                },\n                percentage_complete() {\n                    if(this.value) {\n                        const v = ( (this.value - this.min) / (this.max - this.min));\n                        return Math.round(v * 100) + \"%\";\n                    } else {\n                        return \"0%\";\n                    }\n                }\n            },\n            template: `\n            <div class='s-studyplan-card-progress' >\n                <div class=\"s-studyplan-card-progressbar\"\n                ><span v-if=\"width_completed > 0\"\n                    :style=\"{width: width_completed+'%'}\"\n                    class='s-studyplan-card-progress-segment s-studyplan-card-progress-completed'\n                ></span\n                ><span :style=\"{width: width_incomplete+'%'}\"\n                    class='s-studyplan-card-progress-segment s-studyplan-card-progress-incomplete'\n                ></span\n                ></div>\n                <div class=\"s-studyplan-card-progresstext\">\n                    {{ percentage_complete}} {{ text.completed.toLowerCase() }} \n                </div>\n        </div>\n            `,\n        });\n\n\n\n        /*\n        * S-STUDYLINE-HEADER-HEADING\n        * The only reasing this is not a simple empty div, is the fact that the header height\n        * needs to match that of the period headers\n        */\n        Vue.component('s-studyline-header-heading', {\n            props: {\n                identifier: {\n                    type: Number, // Page reference.\n                    default() { return 0;}\n                }\n            },\n            data() {\n                return {\n                    layerHeights: {}\n                };\n            },\n            created() {\n                // Listener for the signal that a new connection was made and needs to be drawn\n                // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines\n                ItemEventBus.$on('headerHeightChange', this.onHeaderHeightChange);\n            },\n            computed: {\n\n            },\n            methods: {\n                onHeaderHeightChange(newheight,identifier){\n                    if (this.identifier == identifier) {\n                        if(this.$refs.main){\n                            this.$refs.main.style.height = `${newheight}px`;\n                        }\n                    }\n                }\n            },\n            template: `\n            <div class=\"s-studyline-header-heading\" ref=\"main\" :data-id=\"identifier\"></div>\n            `,\n        });\n\n        Vue.component('s-studyline-header-period', {\n            props: {\n                value: {\n                    type: Object, // dict with layer as index\n                },\n                identifier: {\n                    type: Number, // Page reference.\n                    default() { return 0;}\n                }\n            },\n            mounted() {\n                const self=this;\n                if(self.value.period == 1){\n                    self.resizeListener = new ResizeObserver(() => {\n                        if(self.$refs.main){\n                            const size = self.$refs.main.getBoundingClientRect();\n                            ItemEventBus.$emit('headerHeightChange', size.height, self.identifier);\n                        }\n                    }).observe(self.$refs.main);\n                }\n            },\n            unmounted() {\n                if(this.resizeListener) {\n                    this.resizeListener.disconnect();\n                }\n            },\n            computed: {\n                startdate(){\n                    return format_date(this.value.startdate);\n                },\n                enddate(){\n                    return format_date(this.value.enddate);\n                },\n                current(){\n                    if( this.value && this.value.startdate && this.value.enddate){\n                        const now = new Date();\n                        const pstart = new Date(this.value.startdate);\n                        const pend = new Date(this.value.enddate);\n                        return (now >= pstart && now < pend);\n                    }\n                    else {\n                        return false;\n                    }\n                }\n\n            },\n            data() {\n                return {\n                };\n            },\n            template: `\n            <div :class=\"'s-studyline-header-period ' + (current?'current ':' ')\" ref=\"main\" :data-id=\"identifier\"\n                ><p><abbr :id=\"'s-period-'+value.id\" :title=\"value.fullname\">{{ value.shortname }}</abbr>\n                <b-tooltip\n                    :target=\"'s-period-'+value.id\" triggers=\"hover\"\n                    >{{ value.fullname }}<br>\n                    <span class=\"s-studyline-header-period-datespan\">\n                        <span class=\"date\">{{ startdate }}</span> - <span class=\"date\">{{ enddate }}</span>\n                    </span>\n                </b-tooltip>\n                <slot></slot\n                ><p class=\"s-studyline-header-period-datespan small\">\n                    <span class=\"date\">{{ startdate }}</span> - <span class=\"date\">{{ enddate }}</span>\n                </p>\n            </div>\n            `,\n        });\n\n\n        Vue.component('s-studyplan-details', {\n            props: {\n                value: {\n                    type: Object, \n                },\n                variant: {\n                    type: String,\n                    default() { return \"info\"; }\n                },\n                pill: {\n                    type: Boolean,\n                    default() { return false; }\n                },\n                size: {\n                    type: String,\n                    default() { return \"\";}\n                }\n            },\n            data() {\n                return {\n                    text: strings.details,\n                };\n            },\n            template: `\n            <span>\n                <b-button \n                    :size=\"size\"\n                    :pill=\"pill\"\n                    :variant=\"variant\" \n                    v-b-modal=\"'modal-description-'+value.id\"\n                ><slot><i class='fa fa-info-circle'></i>\n                {{ text.details}}</slot>\n                </b-button>\n                <b-modal\n                    :title=\"value.name\"\n                    scrollable\n                    centered\n                    ok-only\n                    content-class=\"s-studyplan-details\"\n                    :id=\"'modal-description-'+value.id\"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols=\"4\"><img :src='value.icon'></b-col>\n                            <b-col cols=\"8\" class=\"pl-1\">\n                                <span v-html=\"value.description\"></span>\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </span>\n            `,\n        });\n\n        Vue.component('s-course-extrafields', {\n            props: {\n                value: {\n                    type: Array, \n                },\n                variant: {\n                    type: String,\n                    default() { return \"info\"; }\n                },\n                position: {\n                    type: String,\n                    default() { return \"below\"; }\n                },\n                size: {\n                    type: String,\n                    default() { return \"\";}\n                }\n            },\n            data() {\n                return {\n                    text: strings.extrafields,\n                };\n            },\n            computed: {\n                fields() {\n                    const fields = [];\n                    for (const ix in this.value) {\n                        const field = this.value[ix];\n                        if (field.position == this.position && field.value && field.value.length > 0) {\n                            fields.push(field);\n                        }\n                    }\n                    return fields;\n                },\n            },\n            methods: {\n                displaydate(field) {\n                    return format_date(field.value,false);\n                },\n            },\n            template: `\n            <div :class=\"'s-course-extrafields ' + ((fields.length>0)?position:'empty')\">\n                <table v-if=\"fields.length > 0\">\n                    <tr v-for=\"field in fields\">\n                        <td><span class='title' v-if='field.title'>{{ field.title}}</span></td>\n                        <td>\n                        <span v-if='field.type == \"date\"' class=\"value date\">{{ displaydate(field) }}</span>\n                        <span v-else-if='field.type == \"checkbox\"' \n                        :class=\"'value ' + (field.checked?'true':'false')\">{{ field.value }}</span>\n                        <span v-else-if='field.type == \"textarea\"'>\n                            <a class='text-info' href='#' v-b-modal=\"field.courseid+'_'+field.fieldname\">{{text.show}}...</a>\n                            <b-modal\n                                :id=\"field.courseid+'_'+field.fieldname\"\n                                :title=\"field.title\"\"\n                                scrollable\n                                centered\n                                ok-only\n                                ><span v-html=\"field.value\"></span\n                            ></b-modal>\n                        </span>\n                        <span v-else class=\"value\"><span v-html=\"field.value\"></span></span>\n                        </td>\n                    </tr>\n                </table>\n            </div>\n            `,\n        });\n\n    }\n};"],"names":["install","Vue","strings","studyplancard","open","noenddate","idnumber","description","completed","details","extrafields","show","ItemEventBus","component","props","value","type","Object","Boolean","data","text","computed","timing","this","dates","start","end","methods","onOpenClick","e","$emit","template","Number","min","default","max","width_completed","width_incomplete","percentage_complete","v","Math","round","identifier","layerHeights","created","$on","onHeaderHeightChange","newheight","$refs","main","style","height","mounted","self","period","resizeListener","ResizeObserver","size","getBoundingClientRect","observe","unmounted","disconnect","startdate","enddate","current","now","Date","pstart","pend","variant","String","pill","Array","position","fields","ix","field","length","push","displaydate"],"mappings":"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"}