@windward/core 0.0.7 → 0.0.9

package/components/Content/Blocks/ClickableIcons.vue

@@ -1,42 +1,60 @@
 <template>
     <div>
         <v-container>
-            <v-row no-gutters>
-                <h3>{{ block.metadata.config.title }}</h3>
-            </v-row>
-            <v-row no-gutters>
-                <h4>{{ block.metadata.config.description }}</h4>
-            </v-row>
-            <v-row no-gutters>
-                <p>
-                    {{
-                        $t(
-                            'windward.core.components.settings.clickable_icon.information'
-                        )
-                    }}
-                </p>
-            </v-row>
+            <h3>{{ block.metadata.config.title }}</h3>
+
+            <h4>{{ block.metadata.config.description }}</h4>
+
+            <p>
+                {{
+                    $t(
+                        'windward.core.components.settings.clickable_icon.information'
+                    )
+                }}
+            </p>
         </v-container>
         <v-container>
             <v-row
                 v-for="(item, itemIndex) in block.metadata.config.items"
                 :key="itemIndex"
                 no-gutters
+                :class="rowClass(itemIndex)"
             >
                 <v-col cols="2">
                     <v-btn
                         class="pt-8 pb-8 outlined-button mb-4"
-                        :color="itemColor(item.color)"
+                        :color="itemColor(itemIndex)"
+                        :fab="block.metadata.config.display.round_icon"
                         x-large
                         outlined
                         @click="item.active = !item.active"
                     >
-                        <v-icon>{{ onHandleHtmlEntities(item.icon) }}</v-icon>
+                        <v-icon v-if="isIcon(item.icon)" class="black--text">{{
+                            item.icon
+                        }}</v-icon>
+                        <span v-else :class="iconClass + ' black--text'">{{
+                            decode(item.icon)
+                        }}</span>
                     </v-btn>
                 </v-col>
-                <v-col cols="10" v-if="item.active">
-                    <h4>{{ item.title }}</h4>
-                    <TextViewer v-model="item.body"></TextViewer>
+                <v-col cols="10">
+                    <h4
+                        v-if="
+                            block.metadata.config.display.show_title ||
+                            item.active
+                        "
+                        class="mt-4"
+                        role="button"
+                        @click="item.active = !item.active"
+                    >
+                        {{ item.title }}
+                    </h4>
+                    <v-expand-transition>
+                        <div v-if="item.active">
+                            <v-divider light class="my-4" />
+                            <TextViewer v-model="item.body"></TextViewer>
+                        </div>
+                    </v-expand-transition>
                 </v-col>
             </v-row>
         </v-container>
@@ -44,6 +62,7 @@
 </template>
 <script>
 import _ from 'lodash'
+import he from 'he'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import TextViewer from '~/components/Text/TextViewer'
 
@@ -53,13 +72,77 @@ export default {
         TextViewer,
     },
     extends: BaseContentBlock,
+    data() {
+        return {}
+    },
     computed: {
+        decode() {
+            return (str) => {
+                return he.decode(str || '')
+            }
+        },
+        rowClass() {
+            return (itemIndex) => {
+                let classes = 'option-container mb-4 pa-1'
+                // If show background is enabled and the item has a color
+                // Otherwise we do NOT want to apply the `black--text` class since there's no color
+                // And things will look bad in dark mode
+                if (
+                    _.get(
+                        this.block,
+                        'metadata.config.display.show_background',
+                        false
+                    ) &&
+                    this.itemColor(itemIndex)
+                ) {
+                    classes += ' ' + this.itemColor(itemIndex) + ' black--text'
+                }
+                return classes
+            }
+        },
+        iconClass() {
+            let classes = 'text-icon'
+            if (
+                _.get(this.block, 'metadata.config.display.italic_icon', false)
+            ) {
+                classes += ' font-italic'
+            }
+            return classes
+        },
         itemColor() {
-            return (v) => {
-                if (_.isObject(v)) {
-                    return _.get(v, 'class', '')
+            return (itemIndex) => {
+                // If autocolor is enabled then calculate the color on the index
+                if (this.block.metadata.config.display.autocolor) {
+                    const colors = [
+                        'light-blue lighten-4',
+                        'light-green lighten-4',
+                        'yellow lighten-4',
+                        'orange lighten-3',
+                        'red lighten-3',
+                        'deep-purple lighten-3',
+                    ]
+                    let colorIndex = itemIndex
+                    // If we exceed the above list of colors loop back around to the beginning
+                    if (colorIndex >= colors.length) {
+                        colorIndex =
+                            colorIndex -
+                            Math.floor(colorIndex / colors.length) *
+                                colors.length
+                    }
+
+                    return colors[colorIndex]
                 } else {
-                    return v
+                    // Otherwise get the predefined color
+                    const color = _.get(
+                        this.block,
+                        'metadata.config.items[' + itemIndex + '].color',
+                        ''
+                    )
+                    if (_.isObject(color)) {
+                        return _.get(color, 'class', '')
+                    } else {
+                        return color
+                    }
                 }
             }
         },
@@ -76,32 +159,37 @@ export default {
         if (_.isEmpty(this.block.metadata.config.description)) {
             this.block.metadata.config.description = ''
         }
-        if (this.block.metadata.config.items) {
-            this.block.metadata.config.items.forEach((element) => {
-                element.active = false
-            })
+        if (_.isEmpty(this.block.metadata.config.display)) {
+            this.block.metadata.config.display = {
+                show_title: false,
+                show_background: false,
+                round_icon: false,
+                italic_icon: false,
+                autocolor: true,
+            }
         }
-    },
-    data() {
-        return {
-            api_key: process.env.TINY_MCE_API_KEY,
-            title: 'Title',
-            displayText: false,
+        if (this.block.metadata.config.items.length) {
+            for (const index in this.block.metadata.config.items) {
+                this.block.metadata.config.items[index].active = false
+            }
         }
     },
     methods: {
-        onHandleHtmlEntities(str) {
-            let txt = document.createElement('textarea')
-
-            txt.innerHTML = str
-
-            return txt.value
+        isIcon(str) {
+            return str && _.isString(str) && str.indexOf('mdi-') === 0
         },
     },
 }
 </script>
 <style scoped>
+.option-container {
+    border-radius: 1rem;
+}
 .outlined-button {
     border-width: 4px;
+    background: #fff;
+}
+.text-icon {
+    font-size: 1.5rem;
 }
 </style>

package/components/Content/Blocks/Image.vue

@@ -1,22 +1,31 @@
 <template>
     <div>
-        <p v-if="!block.body">
-            <v-img
-                class="img-holder"
-                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTNCyiabrwN6YV6s3Mj5IzREZCnQqqwT4A3Bw&usqp=CAU"
-                contain
-            ></v-img>
-        </p>
+        <div v-if="!block.body" class="img-holder">
+            <v-skeleton-loader
+                height="300px"
+                :elevation="2"
+                type="image"
+            ></v-skeleton-loader>
+
+            <div class="no-source-overlay">
+                <v-icon x-large>mdi-file-question</v-icon><br />
+                {{
+                    $t(
+                        'windward.core.components.content.blocks.image.no_image_url'
+                    )
+                }}
+            </div>
+        </div>
         <v-responsive :aspect-ratio="aspectRatio">
             <v-img
                 v-if="block.body"
                 :alt="block.metadata.config.alt"
                 :aria-describedby="block.metadata.config.aria_described_by"
-                class="img-display"
+                :class="imageClass"
                 :src="block.body"
                 contain
             >
-                <template v-slot:placeholder>
+                <template #placeholder>
                     <v-skeleton-loader
                         type="image, image, list-item-avatar"
                         height="100%"
@@ -59,6 +68,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.alt)) {
             this.block.metadata.config.alt = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.hide_background)) {
+            this.block.metadata.config.hide_background = false
+        }
         if (_.isEmpty(this.block.metadata.config.aria_describedby)) {
             this.block.metadata.config.aria_describedby = ''
         }
@@ -75,6 +87,14 @@ export default {
         describedByText() {
             return _.get(this.block.metadata, 'config.aria_describedby', null)
         },
+        imageClass() {
+            let imageClass = ''
+            // If NOT hide background, inclide the extra class
+            if (!_.get(this.block.metadata, 'config.hide_background', false)) {
+                imageClass += ' img-white'
+            }
+            return 'img-display' + imageClass
+        },
     },
     watch: {
         value(newValue) {
@@ -101,7 +121,14 @@ export default {
     border-radius: 3px;
 }
 .img-holder {
-    max-height: 300px;
+    height: 300px;
+}
+.img-white {
+    background: #fff;
+}
+.no-source-overlay {
+    text-align: center;
+    margin-top: -175px;
 }
 ::v-deep .v-skeleton-loader.v-skeleton-loader--is-loading {
     .v-skeleton-loader__image {

package/components/Content/Blocks/OpenResponse.vue

@@ -75,9 +75,11 @@
 
 <script>
 import _ from 'lodash'
+import { mapGetters } from 'vuex'
 import TextViewer from '~/components/Text/TextViewer.vue'
 import TextEditor from '~/components/Text/TextEditor.vue'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import UserContentBlockState from '~/models/UserContentBlockState'
 
 export default {
     name: 'ContentBlockOpenResponse',
@@ -93,6 +95,18 @@ export default {
             submitted: false,
         }
     },
+    computed: {
+        ...mapGetters({
+            enrollment: 'enrollment/get',
+        }),
+        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
+            )
+        },
+    },
     beforeMount() {
         if (_.isEmpty(this.block.body)) {
             this.block.body = ''
@@ -107,23 +121,31 @@ export default {
             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() {
+        async onAfterSetContentBlockState() {
+            // Check to see if we have a state already for this block with the same block_id
+            // States are loaded via the ContentBlock.id but in this particular case we want to
+            // maintain the state ACROSS different ContentBlock.ids but with the same linked Block.id
+            const userState = await UserContentBlockState.where({
+                'metadata->block->tag': 'plugin-core-open-response',
+                course_user_id: this.enrollment.id,
+            })
+                .where('metadata->block->block_id', this.block.block_id)
+                .first()
+
+            // Apply the "True" state
+            if (!_.isEmpty(userState)) {
+                this.response = _.get(userState, 'metadata.response', '')
+                this.submitted = _.get(userState, 'metadata.submitted', false)
+            }
+
             // 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() {

package/components/Content/Blocks/OpenResponseCollate.vue

@@ -31,7 +31,9 @@ export default {
     extends: BaseContentBlock,
     components: {},
     data() {
-        return {}
+        return {
+            saveState: false, // Override the base block to disable state saving
+        }
     },
     beforeMount() {
         if (_.isEmpty(this.block.body)) {
@@ -46,7 +48,8 @@ export default {
         if (_.isEmpty(this.block.metadata.config.filename)) {
             this.block.metadata.config.filename = ''
         }
-        if (_.isEmpty(this.block.metadata.config.include_prompts)) {
+        // _.isEmpty(true) returns false. use isBoolean to check if this prop exists
+        if (!_.isBoolean(this.block.metadata.config.include_prompts)) {
             this.block.metadata.config.include_prompts = false
         }
     },
@@ -62,50 +65,74 @@ export default {
     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 = ''
+            try {
+                let userState = await UserContentBlockState.where({
+                    'metadata->block->tag': 'plugin-core-open-response',
+                    course_user_id: this.enrollment.id,
+                })
+                    .whereIn(
+                        'metadata->block->block_id',
+                        this.block.metadata.config.linked
+                    )
+                    .get()
+                let collated = ''
+                const sortedStates = []
 
-            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>'
+                // Sorted the states based on the linked order
+                this.block.metadata.config.linked.forEach((linkedId) => {
+                    const found = userState.find((state) => {
+                        return state.metadata.block.block_id === linkedId
+                    })
+                    if (found) {
+                        sortedStates.push(found)
+                    }
+                })
+
+                sortedStates.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, '')
                 }
-            })
-            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)
+            } catch (e) {
+                // eslint-disable-next-line no-console
+                console.error(e)
+                this.$dialog.error(
+                    this.$t(
+                        'windward.core.components.content.blocks.open_response_collate.generate_error'
+                    )
+                )
             }
-
-            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