@windward/core 0.0.1

package/components/utils/glossary/CourseGlossary.vue

@@ -0,0 +1,284 @@
+<template>
+    <v-container justify="center">
+        <v-row justify="center" align="center">
+            <v-col cols="12">
+                <v-data-table
+                    :key="tableKey"
+                    :headers="headers"
+                    :items="glossaryTerms"
+                    :search="search"
+                    class="elevation-1"
+                >
+                    <template #top>
+                        <v-toolbar flat>
+                            <Dialog
+                                v-model="dialog"
+                                color="primary"
+                                max-width="600px"
+                                :trigger="
+                                    $PermissionService.userHasAccessTo(
+                                        'windward.global.course,windward.organization.course.contentBlock',
+                                        'writable'
+                                    )
+                                "
+                                :action-save-new="
+                                    $PermissionService.userHasAccessTo(
+                                        'windward.global.course,windward.organization.course.contentBlock',
+                                        'writable'
+                                    )
+                                "
+                                :action-save="
+                                    $PermissionService.userHasAccessTo(
+                                        'windward.global.course,windward.organization.course.contentBlock',
+                                        'writable'
+                                    )
+                                "
+                                @click:save="save"
+                                @click:save-new="saveNew"
+                                @click:trigger="addTerm"
+                                @click:outside="close"
+                                @click:close="close"
+                                @keydown.esc="close"
+                            >
+                                <template #title>
+                                    {{
+                                        $t('shared.forms.add') +
+                                        ' ' +
+                                        $t('windward.core.pages.glossary.term')
+                                    }}
+                                </template>
+                                <template #trigger>
+                                    <v-icon>mdi-plus</v-icon>
+                                    {{ $t('shared.forms.add') }}
+                                </template>
+                                <template #form="{ on, attrs }">
+                                    <course-glossary-form
+                                        v-model="selectedTerm"
+                                        :glossary="glossaryTerms"
+                                        :edit-mode="editMode"
+                                        v-bind="attrs"
+                                        v-on="on"
+                                    />
+                                </template>
+                            </Dialog>
+                            <v-spacer></v-spacer>
+                            <v-text-field
+                                v-model="search"
+                                class="ml-5 flex-grow-1"
+                                append-icon="mdi-magnify"
+                                :label="$t('shared.forms.search')"
+                                single-line
+                                hide-details
+                            ></v-text-field>
+                        </v-toolbar>
+                    </template>
+
+                    <template #item="{ item }">
+                        <tr>
+                            <td>{{ item.term }}</td>
+                            <td>{{ item.definition }}</td>
+                            <td>{{ item.alternate_forms }}</td>
+                            <td>{{ item.related_term }}</td>
+
+                            <td>
+                                <v-btn
+                                    class="primary"
+                                    :disabled="
+                                        !$PermissionService.userHasAccessTo(
+                                            'windward.global.course,windward.organization.course.contentBlock',
+                                            'writable'
+                                        )
+                                    "
+                                    @click="editTerm(item)"
+                                >
+                                    <v-icon small> mdi-pencil </v-icon>
+                                    <span class="sr-only">{{
+                                        $t('forms.edit')
+                                    }}</span>
+                                </v-btn>
+                                <v-btn
+                                    class="primary"
+                                    :disabled="
+                                        !$PermissionService.userHasAccessTo(
+                                            'windward.global.course,windward.organization.course.contentBlock',
+                                            'writable'
+                                        )
+                                    "
+                                    @click="onDelete(item)"
+                                >
+                                    <v-icon small> mdi-delete </v-icon>
+                                    <span class="sr-only">{{
+                                        $t('shared.forms.delete')
+                                    }}</span>
+                                </v-btn>
+                            </td>
+                        </tr>
+                    </template>
+                </v-data-table>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import _ from 'lodash'
+import Crypto from '~/helpers/Crypto'
+import Course from '~/models/Course'
+
+import CourseGlossaryForm from './CourseGlossaryForm'
+export default {
+    name: 'CourseGlossary',
+    components: { CourseGlossaryForm },
+    layout: 'course',
+    middleware: ['auth'],
+    props: {},
+
+    data() {
+        return {
+            headers: [
+                {
+                    text: this.$t('windward.core.pages.glossary.term'),
+                    align: 'start',
+                    sortable: false,
+                    value: 'glossaryTerms.term',
+                },
+                {
+                    text: this.$t('windward.core.pages.glossary.definition'),
+                    align: 'start',
+                    sortable: true,
+                    value: 'glossaryTerms.definition',
+                },
+                {
+                    text: this.$t(
+                        'windward.core.pages.glossary.alternate_forms'
+                    ),
+                    align: 'start',
+                    sortable: true,
+                    value: 'glossaryTerms.alternate_forms',
+                },
+                {
+                    text: this.$t('windward.core.pages.glossary.related_term'),
+                    align: 'start',
+                    sortable: true,
+                    value: 'glossaryTerms.related_term',
+                },
+            ],
+            dialog: false,
+            editMode: false,
+            glossaryTerms: [],
+            selectedTerm: {},
+            search: '',
+            tableKey: Crypto.id(),
+            defaultTerm: {
+                term: '',
+                definition: '',
+                alternate_forms: '',
+                related_term: '',
+            },
+        }
+    },
+
+    computed: {
+        ...mapGetters({
+            course: 'course/get',
+        }),
+        ...mapMutations({
+            saveCourse: 'course/set',
+        }),
+    },
+
+    beforeMount() {
+        if (this.course.metadata && _.isArray(this.course.metadata.glossary)) {
+            this.glossaryTerms = _.cloneDeep(this.course.metadata.glossary)
+        }
+    },
+    methods: {
+        async save() {
+            let currentGlossaryItemIndex = -1
+            this.glossaryTerms.filter((item, index) => {
+                if (item.term === this.selectedTerm.term) {
+                    currentGlossaryItemIndex = index
+                    return item
+                }
+            })
+            if (currentGlossaryItemIndex > -1) {
+                this.glossaryTerms[currentGlossaryItemIndex] = this.selectedTerm
+            } else {
+                this.glossaryTerms.push(this.selectedTerm)
+            }
+            const course = new Course(this.course)
+            if (!_.isSet(course.metadata)) {
+                course.metadata = {}
+                course.metadata.glossary = {}
+            }
+            if (!_.isSet(course.metadata.glossary)) {
+                course.metadata.glossary = this.glossaryTerms
+            }
+            const updatedCourse = await course.save()
+            this.$store.commit('course/set', updatedCourse)
+            this.$toast.success(this.$t('shared.forms.saved'))
+            //force update on datatable
+            this.tableKey = Crypto.id()
+        },
+        saveNew() {
+            this.save()
+            this.selectedTerm = _.cloneDeep(this.defaultTerm)
+        },
+        addTerm() {
+            this.editMode = false
+            this.selectedTerm = {}
+            this.selectedTerm = _.cloneDeep(this.defaultTerm)
+        },
+        editTerm(item) {
+            this.editMode = true
+            const selectedIndex = this.glossaryTerms.indexOf(item)
+            this.selectedTerm = _.cloneDeep(this.glossaryTerms[selectedIndex])
+            this.dialog = true
+        },
+
+        onDelete(term) {
+            const self = this
+            const confirmText = this.$t('shared.forms.confirm_delete_text')
+            this.$dialog.show(confirmText, {
+                icon: 'mdi-delete',
+                duration: null,
+                action: [
+                    {
+                        text: this.$t('shared.forms.cancel'),
+                        onClick: (e, toastObject) => {
+                            toastObject.goAway(0)
+                        },
+                    },
+                    {
+                        text: this.$t('shared.forms.confirm'),
+                        // router navigation
+                        onClick: (e, toastObject) => {
+                            self.deleteTerm(term)
+                            toastObject.goAway(0)
+                        },
+                    },
+                ],
+            })
+        },
+        async deleteTerm(item) {
+            const deleteIndex = this.glossaryTerms.indexOf(item)
+            this.glossaryTerms.splice(deleteIndex, 1)
+            const course = new Course(this.course)
+            if (!_.isSet(course.metadata)) {
+                course.metadata = {}
+                course.metadata.glossary = {}
+            }
+            course.metadata.glossary = this.glossaryTerms
+            const updatedCourse = await course.save()
+            this.$store.commit('course/set', updatedCourse)
+            this.$toast.success(this.$t('shared.response.deleted'))
+        },
+        close() {
+            this.dialog = false
+        },
+    },
+}
+</script>
+
+<!--<style scoped></style>-->

package/components/utils/glossary/CourseGlossaryForm.vue

@@ -0,0 +1,106 @@
+<template>
+    <v-form ref="form" v-model="formValid" class="pa-6">
+        <v-text-field
+            v-model="selectedTerm.term"
+            :counter="50"
+            :label="$t('windward.core.pages.glossary.term')"
+            required
+            :rules="validation.termRules"
+        ></v-text-field>
+        <br />
+        <v-textarea
+            v-model="selectedTerm.definition"
+            :counter="255"
+            :label="$t('windward.core.pages.glossary.definition')"
+            outlined
+            required
+            :rules="validation.definitionRules"
+        ></v-textarea>
+        <br />
+        <v-textarea
+            v-model="selectedTerm.alternate_forms"
+            :counter="50"
+            :label="$t('windward.core.pages.glossary.alternate_forms')"
+            outlined
+        ></v-textarea>
+        <br />
+        <v-select
+            v-model="selectedTerm.related_term"
+            :items="termList"
+            outlined
+            clearable
+            :label="$t('windward.core.pages.glossary.related_term')"
+        ></v-select>
+    </v-form>
+</template>
+
+<script>
+import Form from '~/components/Form'
+export default {
+    name: 'CourseGlossaryForm',
+    extends: Form,
+    props: {
+        value: { type: Object, required: true },
+        glossary: { type: Array, required: true },
+        editMode: { type: Boolean, required: false, default: false },
+    },
+    data() {
+        return {
+            selectedTerm: {},
+            relatedTerm: [],
+            validation: {
+                termRules: [
+                    (v) => !!v || this.$t('shared.forms.errors.required'),
+                    (v) =>
+                        (v && v.length <= 50) ||
+                        this.$t('forms.errors.text_lt', [50]),
+                    (v) =>
+                        (v && this.termIsUnique(v)) ||
+                        this.$t('shared.forms.errors.field_unique'),
+                ],
+                definitionRules: [
+                    (v) => !!v || this.$t('shared.forms.errors.required'),
+                    (v) =>
+                        (v && v.length <= 255) ||
+                        this.$t('shared.forms.errors.text_lt', [255]),
+                ],
+            },
+        }
+    },
+    computed: {
+        termList() {
+            return this.glossary.flatMap((item) => {
+                if (this.selectedTerm.term !== item.term) return item.term
+            })
+        },
+    },
+    watch: {
+        value() {
+            // Refresh the question model when we open / close the dialog
+            this.selectedTerm = this.value
+        },
+    },
+    mounted() {
+        this.selectedTerm = this.value
+    },
+    methods: {
+        termIsUnique(term) {
+            const result = this.glossary.filter((item) => {
+                if (_.lowerCase(item.term) === _.lowerCase(term)) {
+                    return item
+                }
+            })
+
+            if (result.length > 0 && !this.editMode) {
+                return false
+            } else {
+                return true
+            }
+        },
+    },
+}
+</script>
+
+<!--
+<style scoped></style>
+-->

package/components/utils/glossary/GlossaryToolTip.vue

@@ -0,0 +1,87 @@
+<template>
+    <div
+        class="glossary-word"
+        v-click-outside="onClickOutside"
+        @click="show = !show"
+    >
+        <v-tooltip
+            top
+            v-model="show"
+            :open-on-hover="false"
+            color="primary"
+            max-width="200px"
+        >
+            <template #activator="{ on }">
+                <span v-on="on">
+                    <slot name="term"></slot>
+                </span>
+            </template>
+            <div>
+                <div v-if="this.$slots['definition']">
+                    <h4 class="text-capitalize">
+                        {{
+                            $t(
+                                'windward.core.components.utils.tiny_mce_wrapper.definition'
+                            )
+                        }}
+                        :
+                    </h4>
+                    <p>
+                        <slot name="definition"></slot>
+                    </p>
+                </div>
+                <div v-if="this.$slots['alternate_forms']">
+                    <h4 class="text-capitalize">
+                        {{
+                            $t(
+                                'windward.core.components.utils.tiny_mce_wrapper.alternate_forms'
+                            )
+                        }}
+                        :
+                    </h4>
+                    <p><slot name="alternate_forms"></slot></p>
+                </div>
+
+                <div v-if="this.$slots['related_terms']">
+                    <h4 class="text-capitalize">
+                        {{
+                            $t(
+                                'windward.core.components.utils.tiny_mce_wrapper.related_terms'
+                            )
+                        }}
+                        :
+                    </h4>
+                    <p><slot name="related_terms"></slot></p>
+                </div>
+            </div>
+        </v-tooltip>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'GlossaryToolTip',
+    data() {
+        return {
+            show: false,
+        }
+    },
+    methods: {
+        onClickOutside() {
+            this.show = false
+        },
+    },
+}
+</script>
+
+<style scoped>
+.glossary-word {
+    display: inline-block;
+    border-radius: 12px;
+    cursor: pointer;
+    padding: 0px 7px;
+    background-color: var(--v-warning-lighten1);
+    font-weight: bold;
+    color: var(--v-dark-text-base);
+}
+</style>

package/config/tinymce.config.js

@@ -0,0 +1,136 @@
+export default {
+    plugins: [
+        {
+            name: 'math',
+            tag: 'plugin-core-math-expression-editor',
+            buttons: {
+                groups: [
+                    {
+                        name: 'shared.math.trigonometry',
+                        buttons: [
+                            {
+                                cmd: false,
+                                text: '\\sec',
+                            },
+                            {
+                                cmd: false,
+                                text: '\\sec^{-1}',
+                            },
+                            {
+                                cmd: false,
+                                text: '\\csc',
+                            },
+                            {
+                                cmd: false,
+                                text: '\\csc^{-1}',
+                            },
+                            {
+                                cmd: false,
+                                text: '\\cot',
+                            },
+                            {
+                                cmd: false,
+                                text: '\\cot^{-1}',
+                            },
+                        ],
+                    },
+                    {
+                        name: 'shared.math.statistic',
+                        buttons: [
+                            {
+                                cmd: false,
+                                text: '\\mu',
+                            },
+                            {
+                                cmd: false,
+                                text: '\\overline{x}',
+                            },
+                            {
+                                cmd: false,
+                                text: '\\overline{y}',
+                            },
+                            {
+                                cmd: false,
+                                text: 'x^i',
+                            },
+                            {
+                                cmd: false,
+                                text: 'x_i',
+                            },
+                            {
+                                cmd: false,
+                                text: 'x!',
+                            },
+                            {
+                                cmd: false,
+                                text: '\\Sigma',
+                            },
+                        ],
+                    },
+                    {
+                        name: 'shared.math.matrix',
+                        buttons: [
+                            {
+                                cmd: false,
+                                text: '\\begin{bmatrix} a & b \\\\ c & d \\end{bmatrix}',
+                            },
+                            {
+                                cmd: false,
+                                text: '\\begin{bmatrix} a & b & c \\\\ d & e & f \\\\ g & h & i \\end{bmatrix}',
+                            },
+                        ],
+                    },
+                    {
+                        name: 'shared.math.group',
+                        buttons: [
+                            {
+                                cmd: true,
+                                latex: '(\\placeholder{})',
+                                text: '(\\cdot)',
+                            },
+                            {
+                                cmd: true,
+                                latex: '[\\placeholder{}]',
+                                text: '[\\cdot]',
+                            },
+                            {
+                                cmd: true,
+                                latex: '|\\placeholder{}|',
+                                text: '|\\cdot|',
+                            },
+                            {
+                                cmd: false,
+                                text: '(x,y)',
+                            },
+                            {
+                                cmd: false,
+                                text: '[x,y]',
+                            },
+                            {
+                                cmd: false,
+                                text: '(x,y]',
+                            },
+                            {
+                                cmd: false,
+                                text: '[x,y)',
+                            },
+                        ],
+                    },
+                    {
+                        name: 'shared.math.equation_system',
+                        buttons: [
+                            {
+                                cmd: false,
+                                text: '\\begin{cases} x + y \\\\ x + y \\end{cases}',
+                            },
+                            {
+                                cmd: false,
+                                text: '\\begin{cases} x + y \\\\ x – y \\end{cases}',
+                            },
+                        ],
+                    },
+                ],
+            },
+        },
+    ],
+}