@windward/core 0.8.0 → 0.9.1

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/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+### Hotfix [0.9.1] created - 2024-12-10
+
+
 ## Release [0.7.0] - 2024-08-29
 
 * Version bump to 0.7.0

package/components/Content/Blocks/ClickableIcons.vue

@@ -4,7 +4,6 @@
             <h2 v-if="block.metadata.config.title" tabindex="0">
                 {{ block.metadata.config.title }}
             </h2>
-
             <p
                 v-if="block.metadata.config.description"
                 tabindex="0"
@@ -12,14 +11,6 @@
             >
                 {{ block.metadata.config.description }}
             </p>
-
-            <p>
-                {{
-                    $t(
-                        'windward.core.components.settings.clickable_icon.information'
-                    )
-                }}
-            </p>
         </v-container>
         <v-container class="pa-0">
             <v-row
@@ -100,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/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/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/Tab.vue

@@ -47,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>
@@ -58,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 {
@@ -65,6 +74,7 @@ export default {
     components: {
         TextEditor,
         TextViewer,
+        ImageAssetViewer,
     },
     extends: BaseContentBlock,
     beforeMount() {

package/components/Navigation/Items/GlossaryNav.vue

@@ -1,14 +1,26 @@
 <template>
-    <v-list-item :to="'/course/' + course.id + '/glossary'">
-        <v-list-item-action>
-            <v-icon>mdi-comment-text-multiple</v-icon>
-        </v-list-item-action>
-        <v-list-item-content>
-            <v-list-item-title
-                >{{ $t('windward.core.shared.menu.course_glossary') }}
-            </v-list-item-title>
-        </v-list-item-content>
-    </v-list-item>
+    <v-tooltip right>
+        <template #activator="{ on, attrs }">
+            <v-list-item
+                :class="color"
+                v-on="on"
+                v-bind="attrs"
+                :to="'/course/' + course.id + '/glossary'"
+            >
+                <v-list-item-action>
+                    <v-icon v-on="on" v-bind="attrs"
+                        >mdi-comment-text-multiple</v-icon
+                    >
+                </v-list-item-action>
+                <v-list-item-content>
+                    <v-list-item-title
+                        >{{ $t('windward.core.shared.menu.course_glossary') }}
+                    </v-list-item-title>
+                </v-list-item-content>
+            </v-list-item>
+        </template>
+        <span>{{ $t('windward.core.shared.menu.course_glossary') }}</span>
+    </v-tooltip>
 </template>
 
 <script>
@@ -18,6 +30,9 @@ export default {
     name: 'GlossaryNav',
     layout: 'course',
     middleware: ['auth'],
+    props: {
+        color: { type: String, required: false, default: '' },
+    },
     data() {
         return {}
     },