@windward/core 0.0.6 → 0.0.8

package/.idea/codeStyles/Project.xml

@@ -0,0 +1,58 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+      <option name="HTML_ENFORCE_QUOTES" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/windward-ui-plugin-core.iml" filepath="$PROJECT_DIR$/.idea/windward-ui-plugin-core.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/php-docker-settings.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PhpDockerContainerSettings">
+    <list>
+      <map>
+        <entry key="79d59a8f-c56c-4789-b96c-e55a326ab125">
+          <value>
+            <DockerContainerSettings>
+              <option name="version" value="1" />
+              <option name="volumeBindings">
+                <list>
+                  <DockerVolumeBindingImpl>
+                    <option name="containerPath" value="/opt/project" />
+                    <option name="hostPath" value="$PROJECT_DIR$" />
+                  </DockerVolumeBindingImpl>
+                </list>
+              </option>
+            </DockerContainerSettings>
+          </value>
+        </entry>
+      </map>
+    </list>
+  </component>
+</project>

package/.idea/php.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MessDetectorOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCSFixerOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCodeSnifferOptionsConfiguration">
+    <option name="highlightLevel" value="WARNING" />
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PhpStanOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PsalmOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/.idea/watcherTasks.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
+</project>

package/.idea/windward-ui-plugin-core.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/components/Content/Blocks/Image.vue

@@ -1,18 +1,27 @@
 <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
             >
@@ -48,10 +57,10 @@ export default {
     },
     data() {
         return {
+            id: 'image_' + Crypto.id(),
             aspectRatio: undefined,
         }
     },
-    extends: BaseContentBlock,
     beforeMount() {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
@@ -59,15 +68,13 @@ 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 = ''
         }
     },
-    data() {
-        return {
-            id: 'image_' + Crypto.id(),
-        }
-    },
     computed: {
         describedById() {
             // If there's a described by
@@ -80,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) {
@@ -108,6 +123,13 @@ export default {
 .img-holder {
     max-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 {
         height: 100%;

package/components/Content/Blocks/OpenResponse.vue

@@ -0,0 +1,159 @@
+<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 { 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',
+    extends: BaseContentBlock,
+    components: {
+        TextViewer,
+        TextEditor,
+    },
+    data() {
+        return {
+            stateLoaded: false,
+            response: '',
+            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 = ''
+        }
+        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 = ''
+        }
+    },
+    watch: {},
+    mounted() {},
+    methods: {
+        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() {
+            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,185 @@
+<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 {
+            saveState: false, // Override the base block to disable state saving
+        }
+    },
+    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 = ''
+        }
+        // _.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
+        }
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+            enrollment: 'enrollment/get',
+            content: 'content/get',
+        }),
+    },
+    watch: {},
+    mounted() {},
+    methods: {
+        async onCollate() {
+            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 = []
+
+                // 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, '')
+                }
+
+                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'
+                    )
+                )
+            }
+        },
+        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/Settings/ImageSettings.vue

@@ -17,6 +17,13 @@
             </template>
         </ContentBlockAsset>
 
+        <v-switch
+            v-model="block.metadata.config.hide_background"
+            :label="
+                $t('windward.core.components.settings.image.hide_background')
+            "
+        ></v-switch>
+
         <v-form>
             <v-text-field
                 v-model="block.metadata.config.alt"
@@ -69,6 +76,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 = ''
         }