@windward/core 0.0.5 → 0.0.7

package/README.md

@@ -24,7 +24,7 @@ Link to Windward ui repo
 $ cd windward-ui
 $ npm install
 $ cd node_modules
-$ npm link @mindedge/windward-ui-plugin-core
+$ npm link @windward/core
 $ npm run dev
 ```
 
@@ -61,6 +61,7 @@ Your Repos are linked at this point and you are ready to start developing windwa
     ```
     import UserUpload from '@/components/Content/Blocks/UserUpload.vue'
     ```
+
 4. To add a page use the below format in your `pages: []` in `plugin.js`
     ```javascript
     {

package/components/Content/Blocks/ClickableIcons.vue

@@ -31,7 +31,7 @@
                         outlined
                         @click="item.active = !item.active"
                     >
-                        <v-icon>{{ item.icon }}</v-icon>
+                        <v-icon>{{ onHandleHtmlEntities(item.icon) }}</v-icon>
                     </v-btn>
                 </v-col>
                 <v-col cols="10" v-if="item.active">
@@ -89,6 +89,15 @@ export default {
             displayText: false,
         }
     },
+    methods: {
+        onHandleHtmlEntities(str) {
+            let txt = document.createElement('textarea')
+
+            txt.innerHTML = str
+
+            return txt.value
+        },
+    },
 }
 </script>
 <style scoped>

package/components/Content/Blocks/Feedback.vue

@@ -13,6 +13,13 @@
                 </h3>
             </v-row>
             <v-row class="pt-2">
+                <p>
+                    {{
+                        $t(
+                            'windward.core.components.content.blocks.feedback.likert_directions'
+                        )
+                    }}
+                </p>
                 <p>
                     {{
                         $t(
@@ -24,9 +31,9 @@
         </v-container>
         <v-container v-if="doesFeedbackExist">
             <v-row>
-                <h3>
-                    {{ block.metadata.config.definition.name }}
-                </h3>
+                <h2>
+                    {{ existingFeedback.survey_type }}
+                </h2>
             </v-row>
             <v-row class="pt-2">
                 <p>
@@ -187,8 +194,8 @@ export default {
             courseUserId: '',
             valid: true,
             key: '0',
-            existingFeedback: '',
             doesFeedbackExist: false,
+            existingFeedback: '',
             templates: '',
             chosenPreset: '',
             studentResponse: '',
@@ -271,6 +278,7 @@ export default {
                 survey_snapshot:
                     this.block.metadata.config.definition.metadata.definition,
                 survey_question_answers: this.chosenPreset,
+                survey_type: this.block.metadata.config.definition.name,
                 version: version,
             }
             let feedback = new SurveyResult(feedbackData).for(

package/components/Content/Blocks/FeedbackTemplates/FeedbackQuestionOpenResponse.vue

@@ -4,27 +4,28 @@
             {{ value.body }}
         </p>
         <div v-if="!feedbackExist">
-            <TextEditor v-model="value.response"></TextEditor>
+            <v-text-field
+                outlined
+                v-model="value.response"
+                :label="
+                    $t('windward.core.components.content.blocks.feedback.enter')
+                "
+            ></v-text-field>
         </div>
         <div v-else>
             <div v-if="value.response">
-                <TextViewer v-model="value.response" text-viewer></TextViewer>
+                <div>{{ value.response }}</div>
             </div>
             <div v-else>
-                <TextViewer v-model="noResponse" text-viewer></TextViewer>
+                <div>{{ noResponse }}</div>
             </div>
         </div>
     </v-container>
 </template>
 <script>
-import TextEditor from '~/components/Text/TextEditor.vue'
-import TextViewer from '~/components/Text/TextViewer.vue'
 export default {
     name: 'FeedbackQuestionOpenResponse',
-    components: {
-        TextEditor,
-        TextViewer,
-    },
+    components: {},
     props: {
         value: { type: Object, required: true, default: '' },
         feedbackExist: { type: Boolean, required: false, default: false },

package/components/Content/Blocks/Image.vue

@@ -48,10 +48,10 @@ export default {
     },
     data() {
         return {
+            id: 'image_' + Crypto.id(),
             aspectRatio: undefined,
         }
     },
-    extends: BaseContentBlock,
     beforeMount() {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
@@ -63,11 +63,6 @@ export default {
             this.block.metadata.config.aria_describedby = ''
         }
     },
-    data() {
-        return {
-            id: 'image_' + Crypto.id(),
-        }
-    },
     computed: {
         describedById() {
             // If there's a described by

package/components/Content/Blocks/OpenResponse.vue

@@ -0,0 +1,137 @@
+<template>
+    <div>
+        <div v-if="stateLoaded">
+            <div v-if="block.body && !submitted">
+                <TextViewer v-model="block.body" :height="200"></TextViewer>
+                <TextEditor
+                    v-model="response"
+                    :height="200"
+                    menubar=""
+                ></TextEditor>
+                <p class="pa-3 text-center blue-grey lighten-5">
+                    <v-btn
+                        color="primary"
+                        :disabled="!canSubmit"
+                        @click="onSubmit"
+                    >
+                        {{ $t('shared.forms.submit') }}
+                    </v-btn>
+                </p>
+            </div>
+
+            <div v-else-if="block.body && submitted">
+                <TextViewer v-model="block.body" :height="200"></TextViewer>
+                <p>
+                    {{
+                        $t(
+                            'windward.core.components.content.blocks.open_response.your_response'
+                        )
+                    }}
+                </p>
+                <v-alert color="light-blue lighten-4">
+                    <TextViewer v-model="response" :height="200"></TextViewer>
+                </v-alert>
+                <div v-if="block.metadata.config.sample_response">
+                    <p>
+                        {{
+                            $t(
+                                'windward.core.components.content.blocks.open_response.sample_response'
+                            )
+                        }}
+                    </p>
+                    <v-alert color="light-blue lighten-4">
+                        <TextViewer
+                            v-model="block.metadata.config.sample_response"
+                            :height="200"
+                        ></TextViewer>
+                    </v-alert>
+                </div>
+                <p class="pa-3 text-center blue-grey lighten-5">
+                    <v-btn color="primary" @click="submitted = false">{{
+                        $t('shared.forms.edit')
+                    }}</v-btn>
+                </p>
+            </div>
+
+            <v-alert v-else type="warning">
+                {{
+                    $t(
+                        'windward.core.components.content.blocks.open_response.initial_setup'
+                    )
+                }}
+            </v-alert>
+        </div>
+        <div v-if="!stateLoaded">
+            <v-progress-circular
+                indeterminate
+                :size="64"
+                :width="4"
+                color="white"
+            >
+            </v-progress-circular>
+        </div>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import TextViewer from '~/components/Text/TextViewer.vue'
+import TextEditor from '~/components/Text/TextEditor.vue'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+
+export default {
+    name: 'ContentBlockOpenResponse',
+    extends: BaseContentBlock,
+    components: {
+        TextViewer,
+        TextEditor,
+    },
+    data() {
+        return {
+            stateLoaded: false,
+            response: '',
+            submitted: false,
+        }
+    },
+    beforeMount() {
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = ''
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.sample_response)) {
+            this.block.metadata.config.sample_response = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.starting_text)) {
+            this.block.metadata.config.starting_text = ''
+        }
+    },
+    computed: {
+        canSubmit() {
+            // Make sure the response is not empty and not equal to the starting text
+            return (
+                this.response &&
+                this.response !== this.block.metadata.config.starting_text
+            )
+        },
+    },
+    watch: {},
+    mounted() {},
+    methods: {
+        onAfterSetContentBlockState() {
+            // If after the state is applied the response is still empty then apply the default response
+            if (this.response === '') {
+                this.response = this.block.metadata.config.starting_text
+            }
+            this.stateLoaded = true
+        },
+        onSubmit() {
+            this.submitted = true
+
+            // Force the state to save on submit and not wait
+            this.$Tracking.flushState()
+        },
+    },
+}
+</script>

package/components/Content/Blocks/OpenResponseCollate.vue

@@ -0,0 +1,158 @@
+<template>
+    <div>
+        <div v-if="block.metadata.config.linked.length">
+            <v-btn color="primary" block @click="onCollate">
+                <v-icon class="mr-3">mdi-file-word</v-icon>
+                {{
+                    $t(
+                        'windward.core.components.content.blocks.open_response_collate.download_document'
+                    )
+                }}
+            </v-btn>
+        </div>
+        <v-alert v-else type="warning">
+            {{
+                $t(
+                    'windward.core.components.content.blocks.open_response_collate.initial_setup'
+                )
+            }}
+        </v-alert>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import UserContentBlockState from '~/models/UserContentBlockState'
+
+export default {
+    name: 'ContentBlockOpenResponseCollate',
+    extends: BaseContentBlock,
+    components: {},
+    data() {
+        return {}
+    },
+    beforeMount() {
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = ''
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.linked)) {
+            this.block.metadata.config.linked = []
+        }
+        if (_.isEmpty(this.block.metadata.config.filename)) {
+            this.block.metadata.config.filename = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.include_prompts)) {
+            this.block.metadata.config.include_prompts = false
+        }
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+            enrollment: 'enrollment/get',
+            content: 'content/get',
+        }),
+    },
+    watch: {},
+    mounted() {},
+    methods: {
+        async onCollate() {
+            let userState = await UserContentBlockState.where({
+                'metadata->block->tag': 'plugin-core-open-response',
+                course_user_id: this.enrollment.id,
+            })
+                .whereIn('content_block_id', this.block.metadata.config.linked)
+                .get()
+            let collated = ''
+
+            userState.forEach((state) => {
+                // Prepend the prompt from the state if include prompts is enabled
+                if (this.block.metadata.config.include_prompts) {
+                    collated +=
+                        '<strong>' +
+                        state.metadata.block.body +
+                        '</strong><hr />'
+                }
+                if (!_.isEmpty(state.metadata.response)) {
+                    collated += '\n' + state.metadata.response
+                } else {
+                    collated +=
+                        '\n<p>' +
+                        this.$t(
+                            'windward.core.components.content.blocks.open_response_collate.no_response'
+                        ) +
+                        '</p>'
+                }
+            })
+            let filename = this.block.metadata.config.filename
+            if (_.isEmpty(this.block.metadata.config.filename)) {
+                // Default filename is the users name + the current page
+                filename =
+                    this.$auth.user.last_name +
+                    '_' +
+                    this.$auth.user.first_name +
+                    '_' +
+                    _.get(this.content, 'content.name_prefix') +
+                    _.get(this.content, 'content.name')
+
+                // Change spaces to underscores and remove special characters
+                filename = filename.replaceAll(/\s+/gi, '_')
+                filename = filename.replaceAll(/[^a-z0-9\-\_]/gi, '')
+            }
+
+            this.generateDocument(collated, filename)
+        },
+        generateDocument(htmlBody, filename = '') {
+            // Specify file name. If one isn't supplied then a default name of `exported_document_YYYY-MM-DD.doc` is used
+            filename = filename
+                ? filename + '.doc'
+                : 'exported_document_' +
+                  new Date().toISOString().split('T')[0] +
+                  '.doc'
+
+            var preHtml =
+                "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>" +
+                "<head><meta charset='utf-8'><title>" +
+                filename +
+                '</title></head>' +
+                '<body>'
+            var postHtml = '</body></html>'
+            var html = preHtml + htmlBody + postHtml
+
+            var blob = new Blob(['\ufeff', html], {
+                type: 'application/msword',
+            })
+
+            // Specify link url
+            var url =
+                'data:application/vnd.ms-word;charset=utf-8,' +
+                encodeURIComponent(html)
+
+            // Create download link element
+            var downloadLink = document.createElement('a')
+
+            document.body.appendChild(downloadLink)
+
+            if (navigator.msSaveOrOpenBlob) {
+                navigator.msSaveOrOpenBlob(blob, filename)
+            } else {
+                // Create a link to the file
+                downloadLink.href = url
+
+                // Setting the file name
+                downloadLink.download = filename
+
+                //triggering the function
+                downloadLink.click()
+            }
+
+            document.body.removeChild(downloadLink)
+        },
+    },
+}
+</script>

package/components/Navigation/Items/AskTheExpert.vue

@@ -0,0 +1,173 @@
+<template>
+    <v-list-item @click="dialog = true">
+        <v-list-item-action>
+            <v-icon>{{ config.icon }}</v-icon>
+        </v-list-item-action>
+        <v-list-item-content>
+            <v-list-item-title>
+                {{ $t(config.i18n) }}
+            </v-list-item-title>
+            <Dialog v-model="dialog" color="primary" text :trigger="false">
+                <template #title>{{ $t(config.i18n) }}</template>
+                <template #form="{ on, attrs }">
+                    <v-card flat v-bind="attrs" v-on="on">
+                        <v-container fluid>
+                            <v-row>
+                                <v-col cols="12" class="pl-6">
+                                    <h3>
+                                        {{
+                                            $t(
+                                                'windward.core.components.navigation.ask_the_expert.description'
+                                            )
+                                        }}
+                                    </h3>
+                                </v-col>
+                                <v-col
+                                    v-if="
+                                        $PermissionService.userHasAccessTo(
+                                            'windward.global.course,windward.organization.course.contentBlock',
+                                            'writable'
+                                        )
+                                    "
+                                    cols="12"
+                                >
+                                    <v-col cols="12">
+                                        <h3 class="pb-4">
+                                            {{
+                                                $t(
+                                                    'windward.core.components.navigation.ask_the_expert.config'
+                                                )
+                                            }}
+                                        </h3>
+                                    </v-col>
+                                    <v-col cols="12">
+                                        <v-text-field
+                                            v-model="courseAndContentName"
+                                            disabled
+                                            outlined
+                                            :label="
+                                                $t(
+                                                    'windward.core.components.navigation.ask_the_expert.course_info'
+                                                )
+                                            "
+                                        ></v-text-field>
+                                    </v-col>
+                                </v-col>
+                                <v-col
+                                    v-if="
+                                        !$PermissionService.userHasAccessTo(
+                                            'windward.global.course,windward.organization.course.contentBlock',
+                                            'writable'
+                                        )
+                                    "
+                                    cols="12"
+                                >
+                                    <v-col cols="12">
+                                        <v-text-field
+                                            v-model="subject"
+                                            outlined
+                                            :label="
+                                                $t(
+                                                    'windward.core.components.navigation.ask_the_expert.subject'
+                                                )
+                                            "
+                                        ></v-text-field>
+                                    </v-col>
+                                    <v-col cols="12">
+                                        <v-textarea v-model="body" outlined>
+                                            <template #label>
+                                                <div>
+                                                    {{
+                                                        $t(
+                                                            'windward.core.components.navigation.ask_the_expert.question'
+                                                        )
+                                                    }}
+                                                </div>
+                                            </template>
+                                        </v-textarea>
+                                    </v-col>
+                                    <v-col
+                                        cols="12"
+                                        class="pt-5 pb-5 d-flex flex-row-reverse"
+                                    >
+                                        <v-btn
+                                            class="primary"
+                                            :disabled="valid"
+                                            @click="onSubmit"
+                                            >{{
+                                                $t('shared.forms.submit')
+                                            }}</v-btn
+                                        >
+                                    </v-col>
+                                </v-col>
+                            </v-row>
+                        </v-container>
+                    </v-card>
+                </template>
+            </Dialog>
+        </v-list-item-content>
+    </v-list-item>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import AuthUserRepository from '~/models/repositories/AuthUserRepository'
+import AskTheExpert from '~/models/AskTheExpert'
+
+export default {
+    name: 'NavigationItemAskTheExpert',
+    components: {},
+    props: {
+        config: { type: Object, required: true },
+    },
+    data() {
+        return {
+            currentUser: new AuthUserRepository(this.$nuxt),
+            expert: '',
+            course: this.$ContentService.getCourse(),
+            content: this.$ContentService.get().content,
+            courseAndContentName: '',
+            body: '',
+            subject: '',
+            dialog: false,
+        }
+    },
+    computed: {
+        ...mapGetters({
+            enrollment: 'enrollment/get',
+        }),
+        valid() {
+            if (this.body === '' || this.subject === '') {
+                return true
+            } else {
+                return false
+            }
+        },
+    },
+    mounted() {
+        this.courseAndContentName = this.course.name + ': ' + this.content.name
+    },
+    methods: {
+        async onSubmit() {
+            const askTheExpertSubmission = new AskTheExpert({
+                body: this.body,
+                subject: this.subject,
+                currentUser: this.currentUser,
+                enrollment: this.enrollment,
+                content: this.content,
+                course: this.course,
+                courseAndContentName: this.courseAndContentName,
+            })
+            await askTheExpertSubmission.save()
+            if (askTheExpertSubmission) {
+                this.$dialog.success('Ask The Expert Email Sent Successfully')
+                this.body = ''
+                this.subject = ''
+                this.dialog = false
+            } else {
+                this.$dialog.error('Ask The Expert Email Failed')
+            }
+        },
+    },
+}
+</script>

package/components/Settings/ClickableIconsSettings.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <v-container>
-            <v-col>
+            <v-col class="pa-0">
                 <v-text-field
                     v-model="block.metadata.config.title"
                     :label="
@@ -18,7 +18,11 @@
                         )
                     "
                 ></v-text-field>
-                <v-btn color="primary" outlined @click="onAddElement"
+                <v-btn
+                    color="primary"
+                    outlined
+                    @click="onAddElement"
+                    class="btn-add"
                     ><v-icon>mdi-plus</v-icon
                     >{{ $t('shared.forms.add') }}</v-btn
                 >
@@ -29,7 +33,7 @@
                     :key="itemIndex"
                     class="elevation-0"
                 >
-                    <v-expansion-panel-header class="elevation-0">{{
+                    <v-expansion-panel-header class="elevation-0 pa-0">{{
                         'item ' + (itemIndex + 1)
                     }}</v-expansion-panel-header>
                     <v-expansion-panel-content
@@ -37,8 +41,6 @@
                         :key="expansionPanelKey"
                     >
                         <v-text-field
-                            :counter="1"
-                            maxlength="1"
                             v-model="
                                 block.metadata.config.items[itemIndex].icon
                             "
@@ -186,4 +188,7 @@ export default {
 .v-progress-circular {
     margin: 1rem;
 }
+.btn-add {
+    width: 100%;
+}
 </style>