@windward/core 0.0.1

package/components/Settings/FeedbackSettings.vue

@@ -0,0 +1,92 @@
+<template>
+    <div>
+        <h2 class="pb-4">
+            {{ $t('plugin.core.components.content.blocks.feedback.preset') }}
+        </h2>
+        <v-row>
+            <v-col v-for="preset in templates" :key="preset.id" cols="6">
+                <v-tooltip top>
+                    <template #activator="{ on, attrs }">
+                        <v-btn
+                            class="preset-btn text-sm-body-2 text-none"
+                            color="primary"
+                            outlined
+                            v-bind="attrs"
+                            v-on="on"
+                            @click="onPresetChoose(preset)"
+                        >
+                            <span>
+                                {{ $t(preset.name) }}
+                            </span>
+                        </v-btn>
+                    </template>
+                    <span> {{ $t(preset.description) }} </span>
+                </v-tooltip>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import { mapGetters } from 'vuex'
+
+import SurveyTemplate from '../../models/SurveyTemplate'
+import Enrollment from '~/models/Enrollment'
+import ContentBlock from '~/models/ContentBlock'
+
+export default {
+    name: 'FeedbackSettings',
+    extends: BaseContentSettings,
+    components: {},
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.definition)) {
+            this.block.metadata.config.definition = {}
+        }
+        this.block.body = 'feedback'
+    },
+    data() {
+        return {
+            templates: '',
+        }
+    },
+    computed: {
+        ...mapGetters({
+            enrollment: 'enrollment/get',
+            course: 'course/get',
+        }),
+    },
+    mounted() {
+        this.getTemplates()
+    },
+    methods: {
+        async getTemplates() {
+            if (this.enrollment.id && this.block.id) {
+                this.templates = await new SurveyTemplate()
+                    .for(
+                        new Enrollment({ id: this.enrollment.id }),
+                        new ContentBlock({ id: this.block.id })
+                    )
+                    .get()
+            }
+        },
+        onPresetChoose(preset) {
+            preset.metadata.definition.forEach((element) => {
+                element.response = ' '
+            })
+            this.block.metadata.config.definition = preset
+        },
+    },
+}
+</script>
+<style></style>

package/components/Settings/ImageSettings.vue

@@ -0,0 +1,124 @@
+<template>
+    <v-container>
+        <ContentBlockAsset
+            mimes="image/jpeg,image/png,image/gif"
+            @click:file="onFileSelect"
+            class="mb-4"
+        >
+            <template #title>
+                {{ $t('windward.core.components.content.blocks.image.title') }}
+            </template>
+            <template #description>
+                {{
+                    $t(
+                        'windward.core.components.content.blocks.image.description'
+                    )
+                }}
+            </template>
+        </ContentBlockAsset>
+
+        <v-form>
+            <v-text-field
+                v-model="block.metadata.config.alt"
+                :label="
+                    $t('windward.core.components.navigation.image.default_alt')
+                "
+                :rules="validation.textRules"
+            ></v-text-field>
+            <h3 class="pb-2">
+                {{
+                    $t(
+                        'windward.core.components.navigation.image.default_aria_described'
+                    )
+                }}
+            </h3>
+            <TextEditor
+                v-model="block.metadata.config.aria_describedby"
+            ></TextEditor>
+        </v-form>
+    </v-container>
+</template>
+
+<script>
+import _ from 'lodash'
+import TextEditor from '~/components/Text/TextEditor.vue'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
+
+export default {
+    name: 'ImageSettings',
+    extends: BaseContentSettings,
+    components: { ContentBlockAsset, TextEditor },
+    props: {
+        settings: { type: Object, required: false, default: null },
+        context: { type: String, required: false, default: 'block' },
+    },
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = ''
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.alt)) {
+            this.block.metadata.config.alt = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.aria_describedby)) {
+            this.block.metadata.config.aria_describedby = ''
+        }
+    },
+    data() {
+        return {
+            imageSettings: {
+                // Default values
+                alt_text: '',
+                aria_described: '',
+                release_results: 'submitted',
+            },
+            validation: {
+                textRules: [
+                    (v) => !!v || this.$t('shared.forms.errors.required'),
+                ],
+            },
+        }
+    },
+    watch: {},
+    mounted() {},
+    methods: {
+        onFileSelect(file) {
+            // file = null when you remove a file
+            if (_.isEmpty(file)) {
+                this.block.body = ''
+            } else {
+                this.block.body = file.asset.public_url
+
+                //Assign height and width for skeleton loader
+                if (!_.isEmpty(file.asset.metadata.props)) {
+                    this.block.metadata.config.height =
+                        file.asset.metadata.props['height']
+                    this.block.metadata.config.width =
+                        file.asset.metadata.props['width']
+                }
+                // Assign any alt text from the filemanager file
+                this.block.metadata.config.alt = _.get(
+                    file,
+                    'asset.metadata.props.alt',
+                    ''
+                )
+
+                this.block.metadata.config.aria_describedby = _.get(
+                    file,
+                    'asset.metadata.props.aria_describedby',
+                    ''
+                )
+            }
+        },
+    },
+}
+</script>

package/components/Settings/MathSettings.vue

@@ -0,0 +1,81 @@
+<template>
+    <div>
+        <br />
+        <v-btn @click="onToggleExpand" class="mb-2">
+            <v-icon v-if="!block.metadata.config.expand"
+                >mdi-arrow-expand-all</v-icon
+            >
+            <v-icon v-if="block.metadata.config.expand">
+                mdi-arrow-collapse-all
+            </v-icon>
+        </v-btn>
+        <math-expression-editor
+            v-if="!block.metadata.config.expand"
+            :key="key"
+            :shrinkFont="true"
+            v-model="block.metadata.config.formula"
+            mode="standalone"
+            :value="block.metadata.config.formula"
+        ></math-expression-editor>
+        <br />
+    </div>
+</template>
+
+<script>
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import MathExpressionEditor from '../utils/MathExpressionEditor.vue'
+import _ from 'lodash'
+import Crypto from '~/helpers/Crypto'
+
+export default {
+    name: 'MathSettings',
+    components: { MathExpressionEditor },
+    extends: BaseContentSettings,
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = 'Math Editor'
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.formula)) {
+            this.block.metadata.config.formula = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.expand)) {
+            this.block.metadata.config.expand = false
+        }
+    },
+    data() {
+        return {
+            key: '0',
+        }
+    },
+    mounted() {},
+    beforeDestroy() {
+        if (this.debouncer) {
+            clearTimeout(this.debouncer)
+        }
+    },
+    watch: {
+        value(newValue) {
+            if (newValue.metadata.config.expand === true) {
+                this.key = Crypto.id()
+            }
+        },
+    },
+    methods: {
+        onToggleExpand() {
+            this.key = Crypto.id()
+            return (this.block.metadata.config.expand =
+                !this.block.metadata.config.expand)
+        },
+    },
+}
+</script>
+<style scoped></style>

package/components/Settings/TabSettings.vue

@@ -0,0 +1,139 @@
+<template>
+    <div>
+        <v-btn color="primary" @click="onAddElement" class="fullWidth">
+            <v-icon>mdi-plus</v-icon>
+            {{ $t('windward.core.components.content.blocks.tab.add_tab') }}
+        </v-btn>
+        <v-expansion-panels flat>
+            <v-expansion-panel
+                v-for="(item, itemIndex) in block.metadata.config.items"
+                :key="itemIndex"
+                class="elevation-0"
+            >
+                <v-expansion-panel-header>{{
+                    'Tab ' + (itemIndex + 1)
+                }}</v-expansion-panel-header>
+                <v-expansion-panel-content :key="expansionPanelKey">
+                    <v-text-field
+                        v-model="
+                            block.metadata.config.items[itemIndex].tabHeader
+                        "
+                        :placeholder="'item ' + (itemIndex + 1)"
+                    ></v-text-field>
+                    <v-btn @click="onToggleExpand(item)" class="mb-3">
+                        <v-icon
+                            v-if="
+                                !block.metadata.config.items[itemIndex].expand
+                            "
+                            >mdi-arrow-expand-all</v-icon
+                        >
+                        <v-icon
+                            v-if="block.metadata.config.items[itemIndex].expand"
+                        >
+                            mdi-arrow-collapse-all
+                        </v-icon>
+                    </v-btn>
+                    <br />
+                    <TextEditor
+                        :api_key="api_key"
+                        v-model="block.metadata.config.items[itemIndex].content"
+                        v-show="!block.metadata.config.items[itemIndex].expand"
+                    ></TextEditor>
+                    <br />
+                    <v-btn
+                        color="primary"
+                        @click="onRemoveElement(itemIndex)"
+                        class="fullWidth"
+                    >
+                        <v-icon>mdi-minus</v-icon>
+                        {{
+                            $t(
+                                'windward.core.components.content.blocks.tab.delete_tab'
+                            )
+                        }}
+                    </v-btn>
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+        </v-expansion-panels>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import Crypto from '~/helpers/Crypto'
+import TextEditor from '~/components/Text/TextEditor.vue'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+
+export default {
+    name: 'TabSettings',
+    components: { TextEditor },
+    extends: BaseContentSettings,
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = ''
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            const defaultObject = {
+                tabHeader: '',
+                expand: false,
+                content: '',
+            }
+            this.block.metadata.config.items = []
+            this.block.metadata.config.items.push(defaultObject)
+        }
+        this.block.body = 'tab'
+    },
+    data() {
+        return {
+            expansionPanelKey: '0',
+            api_key: process.env.TINY_MCE_API_KEY,
+        }
+    },
+    mounted() {
+        if (this.block.metadata.config.items.length <= 0) {
+            this.onAddElement()
+        }
+    },
+    beforeDestroy() {
+        if (this.debouncer) {
+            clearTimeout(this.debouncer)
+        }
+    },
+
+    methods: {
+        onAddElement() {
+            const defaultObject = {
+                tabHeader: '',
+                expand: false,
+                content: '',
+            }
+            this.block.metadata.config.items.push(defaultObject)
+        },
+        onRemoveElement(index) {
+            this.block.metadata.config.items.splice(index, 1)
+            this.expansionPanelKey = Crypto.id()
+        },
+        onToggleExpand(item) {
+            this.expansionPanelKey = Crypto.id()
+            return (item.expand = !item.expand)
+        },
+    },
+}
+</script>
+<style scoped>
+.v-progress-circular {
+    margin: 1rem;
+}
+.fullWidth {
+    width: 100%;
+}
+</style>

package/components/Settings/TextEditorSettings.vue

@@ -0,0 +1,249 @@
+<template>
+    <div>
+        <br />
+        <v-card elevation="0">
+            <v-btn-toggle v-model="settingSelector" multiple>
+                <v-btn>
+                    <v-icon>mdi-comment-text-multiple</v-icon>
+                    {{
+                        $t(
+                            'windward.core.components.settings.text_editor.glossary'
+                        )
+                    }}
+                </v-btn>
+                <v-btn>
+                    <v-icon> mdi-text-long</v-icon>
+                    {{
+                        $t(
+                            'windward.core.components.settings.text_editor.Text_editor'
+                        )
+                    }}
+                </v-btn>
+                <v-btn
+                    v-if="settingSelector.includes(1)"
+                    @click="
+                        block.metadata.config.expand =
+                            !block.metadata.config.expand
+                    "
+                >
+                    <v-icon v-if="!block.metadata.config.expand"
+                        >mdi-arrow-expand-all</v-icon
+                    >
+                    <v-icon v-if="block.metadata.config.expand">
+                        mdi-arrow-collapse-all
+                    </v-icon>
+                </v-btn>
+            </v-btn-toggle>
+            <br />
+        </v-card>
+        <div v-show="settingSelector.includes(0)" class="pt-4">
+            <br />
+            <v-card elevation="0" outlined v-if="verifiedTerms.length > 0">
+                <v-card-title outlined class="text-capitalize">
+                    {{
+                        $t(
+                            'windward.core.components.settings.text_editor.verified_terms'
+                        )
+                    }}
+                </v-card-title>
+                <v-card-text>
+                    <v-chip
+                        v-for="(verified, index) in verifiedTerms"
+                        :key="index"
+                        class="ma-2"
+                        close
+                        color="success"
+                        close-icon="mdi-pencil"
+                        @click:close="editTerm(verified)"
+                    >
+                        {{ verified.term }}
+                    </v-chip>
+                </v-card-text>
+            </v-card>
+            <v-card elevation="0" outlined v-if="unVerifiedTerms.length > 0">
+                <v-card-title outlined class="text-capitalize">
+                    {{
+                        $t(
+                            'windward.core.components.settings.text_editor.unverified_terms'
+                        )
+                    }}
+                </v-card-title>
+                <v-card-text>
+                    <v-chip
+                        v-for="(unVerified, index) in unVerifiedTerms"
+                        :key="index"
+                        class="ma-2"
+                        close
+                        color="error"
+                        close-icon="mdi-content-save-plus-outline"
+                        @click:close="addGlossaryTerm(unVerified)"
+                    >
+                        {{ unVerified.term }}
+                    </v-chip>
+                </v-card-text>
+            </v-card>
+            <v-card
+                elevation="0"
+                outlined
+                v-if="
+                    verifiedTerms.length === 0 && unVerifiedTerms.length === 0
+                "
+                ><v-card-text class="text-capitalize font-weight-bold">
+                    {{
+                        $t(
+                            'windward.core.components.settings.text_editor.no_glossary'
+                        )
+                    }}
+                </v-card-text></v-card
+            >
+        </div>
+        <br />
+        <text-editor
+            v-model="block.body"
+            v-show="
+                settingSelector.includes(1) && !block.metadata.config.expand
+            "
+        ></text-editor>
+        <v-skeleton-loader
+            v-bind="attrs"
+            type=" table-row-divider, list-item, divider, list-item, divider, image,image"
+            v-show="settingSelector.includes(1) && block.metadata.config.expand"
+        ></v-skeleton-loader>
+        <Dialog
+            v-model="dialog"
+            color="primary"
+            max-width="600px"
+            action-save
+            :trigger="false"
+            @click:save="save"
+            @click:outside="close"
+            @click:close="close"
+            @keydown.esc="close"
+        >
+            <template #title> {{ formTitle }} </template>
+            <template #form="{ on, attrs }">
+                <course-glossary-form
+                    v-model="selectedTerm"
+                    :glossary="glossary"
+                    :edit-mode="glossaryEdit"
+                    v-bind="attrs"
+                    v-on="on"
+                />
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import GlossaryHelper from '../../helpers/GlossaryHelper'
+import Course from '~/models/Course'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import TextEditor from '~/components/Text/TextEditor.vue'
+import CourseGlossaryForm from '../utils/glossary/CourseGlossaryForm.vue'
+export default {
+    name: 'TextEditorSettings',
+    extends: BaseContentSettings,
+    components: {
+        TextEditor,
+        CourseGlossaryForm,
+    },
+    data() {
+        return {
+            dialog: false,
+            selectedTerm: {},
+            formTitle: '',
+            glossaryEdit: false,
+            settingSelector: [0, 1],
+            attrs: {
+                class: 'mb-6',
+                boilerplate: true,
+                elevation: 0,
+            },
+        }
+    },
+    computed: {
+        ...mapGetters({
+            course: 'course/get',
+        }),
+        ...mapMutations({
+            saveCourse: 'course/set',
+        }),
+        glossary() {
+            return _.isObject(this.course.metadata) &&
+                _.isArray(this.course.metadata.glossary)
+                ? this.course.metadata.glossary
+                : []
+        },
+        verifiedTerms() {
+            return GlossaryHelper.getContentVerifiedGlossaryTerms(
+                this.block.body,
+                this.glossary
+            )
+        },
+        unVerifiedTerms() {
+            return GlossaryHelper.getContentUnVerifiedGlossaryTerms(
+                this.block.body,
+                this.glossary
+            )
+        },
+    },
+    mounted() {
+        this.setConfig({ expand: false })
+    },
+    methods: {
+        async save() {
+            let currentGlossary = _.cloneDeep(this.glossary)
+            let currentItemIndex = -1
+            currentGlossary.filter((item, index) => {
+                if (item.term === this.selectedTerm.term) {
+                    currentItemIndex = index
+                    return item
+                }
+            })
+            if (currentItemIndex > -1) {
+                currentGlossary[currentItemIndex] = this.selectedTerm
+            } else {
+                currentGlossary.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 = currentGlossary
+            }
+            const updatedCourse = await course.save()
+            this.$store.commit('course/set', updatedCourse)
+            this.$toast.success(this.$t('shared.forms.saved'))
+        },
+        editTerm(term) {
+            this.selectedTerm = term
+
+            this.formTitle =
+                this.$t('shared.forms.edit') +
+                ' ' +
+                this.$t('pages.glossary.page_glossary.term')
+            this.glossaryEdit = true
+            this.dialog = true
+        },
+        addGlossaryTerm(term) {
+            this.selectedTerm = term
+
+            this.formTitle =
+                this.$t('shared.forms.add') +
+                ' ' +
+                this.$t('pages.glossary.page_glossary.term')
+            this.glossaryEdit = false
+            this.dialog = true
+        },
+        close() {
+            this.glossaryEdit = false
+            this.dialog = false
+        },
+    },
+}
+</script>
+
+<style scoped></style>