@windward/core 0.7.0 → 0.9.0

package/.eslintrc.js

@@ -4,7 +4,11 @@ module.exports = {
         browser: true,
         node: true,
     },
-    extends: ['plugin:nuxt/recommended', 'plugin:prettier/recommended'],
+    extends: [
+        '@nuxtjs/eslint-config-typescript',
+        'plugin:prettier/recommended',
+        'plugin:nuxt/recommended',
+    ],
     plugins: [],
     // add your custom rules here
     rules: {},

package/.prettierrc

@@ -1,4 +1,5 @@
 {
-  "semi": false,
-  "singleQuote": true
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "es5"
 }

package/components/Content/Blocks/Accordion.vue

@@ -7,9 +7,17 @@
                 block.metadata.config.instructions
             "
         >
-            <h2>{{ block.metadata.config.title }}</h2>
+            <h2 v-if="block.metadata.config.title" tabindex="0">
+                {{ block.metadata.config.title }}
+            </h2>
 
-            <p>{{ block.metadata.config.instructions }}</p>
+            <p
+                v-if="block.metadata.config.instructions"
+                tabindex="0"
+                class="pt-3"
+            >
+                {{ block.metadata.config.instructions }}
+            </p>
         </v-container>
         <v-expansion-panels
             :value="selectedPanels"

package/components/Content/Blocks/BlockQuote.vue

@@ -7,10 +7,14 @@
             "
         >
             <v-col cols="12" class="pb-0">
-                <h2 v-if="block.metadata.config.title">
+                <h2 v-if="block.metadata.config.title" tabindex="0">
                     {{ block.metadata.config.title }}
                 </h2>
-                <p v-if="block.metadata.config.instructions" class="pb-0 mb-0">
+                <p
+                    v-if="block.metadata.config.instructions"
+                    tabindex="0"
+                    class="pt-3"
+                >
                     {{ block.metadata.config.instructions }}
                 </p>
             </v-col>

package/components/Content/Blocks/ClickableIcons.vue

@@ -1,16 +1,15 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <h2>{{ block.metadata.config.title }}</h2>
-
-            <p>{{ block.metadata.config.description }}</p>
-
-            <p>
-                {{
-                    $t(
-                        'windward.core.components.settings.clickable_icon.information'
-                    )
-                }}
+            <h2 v-if="block.metadata.config.title" tabindex="0">
+                {{ block.metadata.config.title }}
+            </h2>
+            <p
+                v-if="block.metadata.config.description"
+                tabindex="0"
+                class="pt-3"
+            >
+                {{ block.metadata.config.description }}
             </p>
         </v-container>
         <v-container class="pa-0">
@@ -92,6 +91,9 @@ export default {
         )
         if (_.isEmpty(this.block.metadata.config.items)) {
             this.block.metadata.config.items = []
+            this.block.metadata.config.description = this.$t(
+                'windward.core.components.settings.clickable_icon.information'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''

package/components/Content/Blocks/Email.vue

@@ -7,10 +7,14 @@
             "
         >
             <v-col cols="12" class="pa-0">
-                <h2 v-if="block.metadata.config.title">
+                <h2 v-if="block.metadata.config.title" tabindex="0">
                     {{ block.metadata.config.title }}
                 </h2>
-                <p v-if="block.metadata.config.instructions" class="pb-0 mb-0">
+                <p
+                    v-if="block.metadata.config.instructions"
+                    tabindex="0"
+                    class="pt-3"
+                >
                     {{ block.metadata.config.instructions }}
                 </p>
             </v-col>
@@ -171,11 +175,7 @@
                         >
                             <v-row class="pt-4">
                                 <v-col cols="10" class="pa-0">
-                                    <v-btn
-                                        elevation="0"
-                                        color="primary"
-                                        text
-                                    >
+                                    <v-btn elevation="0" color="primary" text>
                                         <v-icon>mdi-reply</v-icon>
                                         {{
                                             $t(

package/components/Content/Blocks/GenerateAIQuestionButton.vue

@@ -1,21 +1,50 @@
 <template>
-    <v-btn
-        elevation="0"
-        color="secondary"
-        @click="generateAIQuestion"
-        :loading="isLoading"
-        :disabled="isLoading"
-    >
-        <v-icon class="pr-1" v-if="!isLoading">mdi-magic-staff</v-icon>
-        {{
-            this.$t(
-                'windward.core.components.content.blocks.generate_questions.button_label'
-            )
-        }}
-        <template v-slot:loader>
-            <v-progress-circular indeterminate size="23"></v-progress-circular>
-        </template>
-    </v-btn>
+    <div>
+        <v-row>
+            <v-col cols="12" class="d-flex justify-end pb-1">
+                <v-btn
+                    elevation="0"
+                    color="secondary"
+                    class="mb-1 btn-selector"
+                    :loading="isLoading"
+                    :disabled="isLoading"
+                    @click="generateAIQuestion"
+                >
+                    <v-icon class="pr-1" v-if="!isLoading"
+                        >mdi-magic-staff</v-icon
+                    >
+                    {{
+                        this.$t(
+                            'windward.core.components.content.blocks.generate_questions.button_label'
+                        )
+                    }}
+                    <template v-slot:loader>
+                        <v-progress-circular
+                            indeterminate
+                            size="23"
+                        ></v-progress-circular>
+                    </template>
+                </v-btn>
+            </v-col>
+            <v-col cols="12" class="d-flex justify-end pt-0">
+                <v-select
+                    v-model="selectedContent"
+                    :items="flattenedContent"
+                    class="btn-selector"
+                    outlined
+                    hide-details
+                    dense
+                    :label="
+                        $t(
+                            'windward.core.components.content.blocks.generate_questions.selected_pages'
+                        )
+                    "
+                    item-text="content.name"
+                    return-object
+                ></v-select>
+            </v-col>
+        </v-row>
+    </div>
 </template>
 
 <script>
@@ -23,6 +52,9 @@ import AssessmentQuestion from '~/models/AssessmentQuestion'
 import Course from '~/models/Course'
 import Assessment from '~/models/Assessment'
 import Content from '~/models/Content'
+import { mapGetters } from 'vuex'
+import _ from 'lodash'
+import Crypto from '~/helpers/Crypto'
 
 export default {
     name: 'GenerateAIQuestionButton',
@@ -35,15 +67,45 @@ export default {
     data() {
         return {
             isLoading: false,
+            selectedContent: '',
         }
     },
+    computed: {
+        ...mapGetters({
+            contentTree: 'content/getTree',
+        }),
+        flattenedContent() {
+            let cloneContentTree = _.cloneDeep(this.contentTree)
+            const homepage = this.$ContentService.getHomepage()
+            if (!_.isEmpty(homepage)) {
+                cloneContentTree.unshift(homepage)
+            }
+            let fullTree = []
+            // flatten content tree to get nested children pages
+            cloneContentTree.forEach((content) => {
+                fullTree.push(content)
+                if (content.children.length > 0) {
+                    fullTree = fullTree.concat(_.flatten(content.children))
+                }
+            })
+            //
+            if (_.isEmpty(this.selectedContent)) {
+                // returns array so hold here to pluck out below
+                const currentPage = fullTree.filter(
+                    (contentPage) => contentPage.id === this.content.id
+                )
+                this.selectedContent = currentPage[0] ? currentPage[0] : ''
+            }
+            return fullTree
+        },
+    },
     methods: {
         async generateAIQuestion() {
             this.isLoading = true
             try {
                 const response = await AssessmentQuestion.custom(
                     new Course(this.course),
-                    new Content(this.content),
+                    new Content(this.selectedContent),
                     new Assessment({ id: this.block.id }),
                     new AssessmentQuestion(),
                     `suggest/${this.questionType}`
@@ -67,3 +129,8 @@ export default {
     },
 }
 </script>
+<style scoped>
+.btn-selector {
+    width: 100%;
+}
+</style>

package/components/Content/Blocks/HorizontalRule.vue

@@ -25,6 +25,8 @@ export default {
     },
     data() {
         return {
+            saveState: false,
+            trackable: false,
             isDashed: 'solid',
         }
     },

package/components/Content/Blocks/Image.vue

@@ -1,99 +1,25 @@
 <template>
     <div>
-        <v-container class="pa-0 ma-0">
-            <div v-if="!imageUrl" 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="imageUrl"
-                    :alt="altText"
-                    :aria-describedby="describedByText"
-                    :class="imageClass"
-                    :src="imageUrl"
-                    contain
-                    @click="onHandleModal"
-                >
-                    <template #placeholder>
-                        <v-skeleton-loader
-                            type="image, image, list-item-avatar"
-                            height="100%"
-                            width="100%"
-                        ></v-skeleton-loader>
-                    </template>
-                </v-img>
-            </v-responsive>
-            <TextViewer
-                v-if="describedById"
-                v-model="describedByText"
-                :id="describedById"
-                class="sr-only"
-            ></TextViewer>
-        </v-container>
-        <DialogBox v-model="dialog" persistent :trigger="false">
-            <template #title></template>
-            <template #form="{ on, attrs }">
-                <v-responsive
-                    :aspect-ratio="aspectRatio"
-                    v-bind="attrs"
-                    v-on="on"
-                >
-                    <v-img
-                        v-if="imageUrl"
-                        :alt="altText"
-                        :aria-describedby="describedByText"
-                        :class="imageClass"
-                        :src="imageUrl"
-                        contain
-                        @click="onHandleModal"
-                    >
-                        <template #placeholder>
-                            <v-skeleton-loader
-                                type="image, image, list-item-avatar"
-                                height="100%"
-                                width="100%"
-                            ></v-skeleton-loader>
-                        </template>
-                    </v-img>
-                </v-responsive>
-            </template>
-        </DialogBox>
+        <ImageAssetViewer
+            v-model="block.metadata.config"
+            :assets="block.assets"
+        ></ImageAssetViewer>
     </div>
 </template>
 
 <script>
 import _ from 'lodash'
-import DialogBox from '~/components/Core/DialogBox.vue'
-import TextViewer from '~/components/Text/TextViewer'
-import Crypto from '~/helpers/Crypto'
+import ImageAssetViewer from '~/components/Content/ImageAssetViewer.vue'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 
 export default {
     name: 'ContentBlockImage',
     extends: BaseContentBlock,
     components: {
-        DialogBox,
-        TextViewer,
+        ImageAssetViewer,
     },
     data() {
-        return {
-            id: 'image_' + Crypto.id(),
-            aspectRatio: undefined,
-            dialog: false,
-        }
+        return {}
     },
     beforeMount() {
         if (_.isEmpty(this.block.metadata.config)) {
@@ -112,106 +38,5 @@ export default {
             this.block.metadata.config.ariaDescribedBy = ''
         }
     },
-    computed: {
-        describedById() {
-            // If there's a described by
-            if (this.describedByText) {
-                return this.id
-            } else {
-                return null
-            }
-        },
-        altText() {
-            // Get the asset info first and fallback to the block metadata if inherit is set to false
-            if (_.get(this.block.metadata, 'config.inherit', true)) {
-                return _.get(this.fileAsset, 'asset.metadata.props.alt', null)
-            } else {
-                return _.get(this.block.metadata, 'config.alt', null)
-            }
-        },
-        describedByText() {
-            // Get the asset info first and fallback to the block metadata if inherit is set to false
-            if (_.get(this.block.metadata, 'config.inherit', true)) {
-                return _.get(
-                    this.fileAsset,
-                    'asset.metadata.props.aria_describedby',
-                    null
-                )
-            } else {
-                return _.get(
-                    this.block.metadata,
-                    'config.ariaDescribedBy',
-                    null
-                )
-            }
-        },
-        fileAsset() {
-            return this.resolveAsset(
-                _.get(this.block, 'metadata.config.asset', null)
-            )
-        },
-        imageUrl() {
-            // Get the image public url and fallback to the block body
-            return _.get(this.fileAsset, 'asset.public_url', this.block.body)
-        },
-        imageClass() {
-            let imageClass = ''
-            // change cursor to pointer for images that open in larger modal
-            if (this.block.metadata.config.modal) {
-                imageClass += ' container-pointer'
-            }
-            // If NOT hide background, inclide the extra class
-            if (!_.get(this.block.metadata, 'config.hideBackground', false)) {
-                imageClass += ' img-white'
-            }
-            return 'img-display' + imageClass
-        },
-    },
-    watch: {
-        value(newValue) {
-            if (
-                !_.isEmpty(newValue.metadata.config.height) &&
-                !_.isEmpty(newValue.metadata.config.width)
-            ) {
-                this.aspectRatio =
-                    newValue.metadata.config.width +
-                    '/' +
-                    newValue.metadata.config.height
-            } else {
-                this.aspectRatio = undefined
-            }
-        },
-    },
-    methods: {
-        onHandleModal() {
-            if (this.block.metadata.config.modal) {
-                this.dialog = true
-            }
-        },
-    },
 }
 </script>
-
-<style lang="scss" scoped>
-.img-display {
-    border-radius: 3px;
-}
-.img-holder {
-    height: 300px;
-}
-.img-white {
-    background: #fff;
-}
-.no-source-overlay {
-    text-align: center;
-    margin-top: -175px;
-}
-.container-pointer {
-    cursor: pointer;
-}
-::v-deep .v-skeleton-loader.v-skeleton-loader--is-loading {
-    .v-skeleton-loader__image {
-        height: 100%;
-    }
-}
-</style>

package/components/Content/Blocks/OpenResponse.vue

@@ -1,5 +1,24 @@
 <template>
     <div>
+        <v-container
+            class="pa-0"
+            v-if="
+                block.metadata.config.title ||
+                block.metadata.config.instructions
+            "
+        >
+            <h2 v-if="block.metadata.config.title" tabindex="0">
+                {{ block.metadata.config.title }}
+            </h2>
+
+            <p
+                v-if="block.metadata.config.instructions"
+                tabindex="0"
+                class="pt-3"
+            >
+                {{ block.metadata.config.instructions }}
+            </p>
+        </v-container>
         <div v-if="stateLoaded">
             <div v-if="block.body && !submitted">
                 <TextViewer v-model="block.body" :height="200"></TextViewer>
@@ -118,6 +137,12 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = ''
+        }
         if (_.isEmpty(this.block.metadata.config.sample_response)) {
             this.block.metadata.config.sample_response = ''
         }

package/components/Content/Blocks/OpenResponseCollate.vue

@@ -1,7 +1,13 @@
 <template>
     <div>
         <div v-if="block.metadata.config.linked.length">
-            <v-btn elevation="0" color="primary" outlined block @click="onCollate">
+            <v-btn
+                elevation="0"
+                color="primary"
+                outlined
+                block
+                @click="onCollate"
+            >
                 <v-icon class="mr-3">mdi-file-word</v-icon>
                 {{
                     $t(
@@ -74,19 +80,14 @@ export default {
                         'metadata->block->block_id',
                         this.block.metadata.config.linked
                     )
+                    .with('contentBlock')
                     .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)
-                    }
-                })
+                let collated = ''
+                // sort by order on the page
+                const sortedStates = userState.sort((a, b) =>
+                    a.content_block.order < b.content_block.order ? -1 : 1
+                )
 
                 sortedStates.forEach((state) => {
                     // Prepend the prompt from the state if include prompts is enabled

package/components/Content/Blocks/ScenarioChoice.vue

@@ -1,8 +1,16 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <h2>{{ block.metadata.config.title }}</h2>
-            <p>{{ block.metadata.config.description }}</p>
+            <h2 v-if="block.metadata.config.title" tabindex="0">
+                {{ block.metadata.config.title }}
+            </h2>
+            <p
+                v-if="block.metadata.config.description"
+                tabindex="0"
+                class="pt-3"
+            >
+                {{ block.metadata.config.description }}
+            </p>
             <div
                 v-if="choiceIndex !== null && block.metadata.config.show_reset"
                 class="text-right"

package/components/Content/Blocks/Tab.vue

@@ -1,9 +1,23 @@
 <template>
     <div>
-        <v-container class="pa-0">
-            <h2>{{ block.metadata.config.title }}</h2>
+        <v-container
+            v-if="
+                block.metadata.config.title ||
+                block.metadata.config.instructions
+            "
+            class="pa-0"
+        >
+            <h2 v-if="block.metadata.config.title" tabindex="0">
+                {{ block.metadata.config.title }}
+            </h2>
 
-            <p>{{ block.metadata.config.instructions }}</p>
+            <p
+                v-if="block.metadata.config.instructions"
+                tabindex="0"
+                class="pt-3"
+            >
+                {{ block.metadata.config.instructions }}
+            </p>
         </v-container>
         <v-container class="pa-0">
             <v-tabs dark v-model="block.metadata.config.currentTab" show-arrows>
@@ -33,6 +47,14 @@
                             v-if="!render && tabContent.expand"
                             v-model="tabContent.content"
                         ></TextEditor>
+                        <ImageAssetViewer
+                            v-if="
+                                tabContent.imageAsset &&
+                                tabContent.imageAsset.asset
+                            "
+                            v-model="tabContent.imageAsset"
+                            :assets="block.assets"
+                        ></ImageAssetViewer>
                     </v-container>
                 </v-tab-item>
             </v-tabs>
@@ -44,6 +66,7 @@
 import _ from 'lodash'
 import TextEditor from '~/components/Text/TextEditor'
 import TextViewer from '~/components/Text/TextViewer'
+import ImageAssetViewer from '~/components/Content/ImageAssetViewer.vue'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 
 export default {
@@ -51,6 +74,7 @@ export default {
     components: {
         TextEditor,
         TextViewer,
+        ImageAssetViewer,
     },
     extends: BaseContentBlock,
     beforeMount() {

package/components/Content/Blocks/UserUpload.vue

@@ -1,12 +1,14 @@
 <template>
     <v-container class="pa-0">
         <div>
-            <h2 v-if="block.metadata.config.title">
+            <h2 v-if="block.metadata.config.title" tabindex="0">
                 {{ block.metadata.config.title }}
             </h2>
             <v-row>
-                <v-col cols="12">
-                  <p>{{ block.metadata.config.instructions }}</p>
+                <v-col v-if="block.metadata.config.instructions" cols="12">
+                    <p tabindex="0" class="pt-3">
+                        {{ block.metadata.config.instructions }}
+                    </p>
                 </v-col>
                 <v-col v-if="!blockExists" cols="12">
                     <v-alert color="warning">