@windward/core 0.26.0 → 0.28.0

package/components/Content/Blocks/Feedback.vue

@@ -1,15 +1,12 @@
 <template>
-    <v-container>
-        <v-container v-if="!doesFeedbackExist" class="pa-0">
+    <div>
+        <v-alert v-if="!chosenPreset" type="warning">{{
+            $t('windward.core.components.content.blocks.feedback.no_feedback')
+        }}</v-alert>
+        <v-container v-if="!doesFeedbackExist && chosenPreset" class="pa-0">
             <v-row>
                 <h2>
-                    {{
-                        block.metadata.config.definition.name
-                            ? block.metadata.config.definition.name
-                            : $t(
-                                  'windward.core.components.content.blocks.feedback.feedback'
-                              )
-                    }}
+                    {{ block.metadata.config.definition.name }}
                 </h2>
             </v-row>
             <v-row class="pt-2">
@@ -45,126 +42,133 @@
                 </p>
             </v-row>
         </v-container>
-        <v-divider class="mt-4 mb-6"></v-divider>
-        <v-form
-            ref="form"
-            v-model="valid"
-            lazy-validation
-            v-if="!doesFeedbackExist"
-        >
-            <div v-if="block.metadata.config.definition.metadata">
+        <v-divider v-if="chosenPreset" class="mt-4 mb-6"></v-divider>
+        <!-- Survey Container with theme-based background -->
+        <v-card v-if="chosenPreset" class="pa-6 surface" flat>
+            <v-form
+                ref="form"
+                v-model="valid"
+                lazy-validation
+                v-if="!doesFeedbackExist"
+            >
+                <div v-if="block.metadata.config.definition.metadata">
+                    <v-container
+                        v-for="(question, questionIndex) in chosenPreset"
+                        :key="questionIndex"
+                        fluid
+                    >
+                        <v-container
+                            v-if="question.type === 'likert'"
+                            class="pa-0 ma-0"
+                        >
+                            <FeedbackQuestionLikert
+                                v-model="chosenPreset[questionIndex]"
+                            ></FeedbackQuestionLikert>
+                        </v-container>
+                        <v-container
+                            v-if="question.type === 'true_false'"
+                            class="pa-0 ma-0"
+                        >
+                            <FeedbackQuestionTrueFalse
+                                v-model="chosenPreset[questionIndex]"
+                            ></FeedbackQuestionTrueFalse>
+                        </v-container>
+                        <v-container
+                            v-if="question.type === 'open_response'"
+                            class="pa-0 ma-0"
+                        >
+                            <FeedbackQuestionOpenResponse
+                                v-model="chosenPreset[questionIndex]"
+                            ></FeedbackQuestionOpenResponse>
+                        </v-container>
+                    </v-container>
+                </div>
+            </v-form>
+            <v-row
+                class="d-flex justify-end align-center"
+                v-if="render && !doesFeedbackExist"
+            >
+                <v-btn
+                    color="primary"
+                    outlined
+                    elevation="0"
+                    class="text-center mt-4 mr-2"
+                    @click="onReset()"
+                    >{{
+                        $t(
+                            'windward.core.components.content.blocks.feedback.reset'
+                        )
+                    }}</v-btn
+                >
+                <v-btn
+                    elevation="0"
+                    color="success"
+                    class="text-center mt-4"
+                    @click="validate"
+                    >{{
+                        $t(
+                            'windward.core.components.content.blocks.feedback.save'
+                        )
+                    }}</v-btn
+                >
+            </v-row>
+            <v-form
+                ref="form"
+                v-model="valid"
+                disabled
+                lazy-validation
+                v-if="doesFeedbackExist"
+            >
                 <v-container
-                    v-for="(question, questionIndex) in chosenPreset"
+                    v-for="(
+                        question, questionIndex
+                    ) in existingFeedback.survey_question_answers"
                     :key="questionIndex"
                     fluid
                 >
-                    <v-container
-                        v-if="question.type === 'likert'"
-                        class="pa-0 ma-0"
-                    >
+                    <div v-if="question.type === 'likert'">
                         <FeedbackQuestionLikert
-                            v-model="chosenPreset[questionIndex]"
+                            v-model="
+                                existingFeedback.survey_question_answers[
+                                    questionIndex
+                                ]
+                            "
                         ></FeedbackQuestionLikert>
-                    </v-container>
-                    <v-container
-                        v-if="question.type === 'true_false'"
-                        class="pa-0 ma-0"
-                    >
+                    </div>
+                    <div v-if="question.type === 'true_false'">
                         <FeedbackQuestionTrueFalse
-                            v-model="chosenPreset[questionIndex]"
+                            v-model="
+                                existingFeedback.survey_question_answers[
+                                    questionIndex
+                                ]
+                            "
                         ></FeedbackQuestionTrueFalse>
-                    </v-container>
-                    <v-container
-                        v-if="question.type === 'open_response'"
-                        class="pa-0 ma-0"
-                    >
+                    </div>
+                    <div v-if="question.type === 'open_response'">
                         <FeedbackQuestionOpenResponse
-                            v-model="chosenPreset[questionIndex]"
+                            v-model="
+                                existingFeedback.survey_question_answers[
+                                    questionIndex
+                                ]
+                            "
+                            :feedbackExist="true"
                         ></FeedbackQuestionOpenResponse>
-                    </v-container>
+                    </div>
                 </v-container>
-            </div>
-        </v-form>
-        <v-row
-            class="d-flex justify-end align-center"
-            v-if="render && !doesFeedbackExist"
-        >
-            <v-btn
-                color="primary"
-                outlined
-                elevation="0"
-                class="text-center mt-4 mr-2"
-                @click="onReset()"
-                >{{
-                    $t('windward.core.components.content.blocks.feedback.reset')
-                }}</v-btn
-            >
-            <v-btn
-                elevation="0"
-                color="success"
-                class="text-center mt-4"
-                @click="validate"
-                >{{
-                    $t('windward.core.components.content.blocks.feedback.save')
-                }}</v-btn
-            >
-        </v-row>
-        <v-form
-            ref="form"
-            v-model="valid"
-            disabled
-            lazy-validation
-            v-if="doesFeedbackExist"
-        >
-            <v-container
-                v-for="(
-                    question, questionIndex
-                ) in existingFeedback.survey_question_answers"
-                :key="questionIndex"
-                fluid
-            >
-                <div v-if="question.type === 'likert'">
-                    <FeedbackQuestionLikert
-                        v-model="
-                            existingFeedback.survey_question_answers[
-                                questionIndex
-                            ]
-                        "
-                    ></FeedbackQuestionLikert>
-                </div>
-                <div v-if="question.type === 'true_false'">
-                    <FeedbackQuestionTrueFalse
-                        v-model="
-                            existingFeedback.survey_question_answers[
-                                questionIndex
-                            ]
-                        "
-                    ></FeedbackQuestionTrueFalse>
-                </div>
-                <div v-if="question.type === 'open_response'">
-                    <FeedbackQuestionOpenResponse
-                        v-model="
-                            existingFeedback.survey_question_answers[
-                                questionIndex
-                            ]
-                        "
-                        :feedbackExist="true"
-                    ></FeedbackQuestionOpenResponse>
-                </div>
-            </v-container>
-        </v-form>
-    </v-container>
+            </v-form>
+        </v-card>
+    </div>
 </template>
 
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import FeedbackQuestionLikert from './FeedbackTemplates/FeedbackQuestionLikert.vue'
-import FeedbackQuestionOpenResponse from './FeedbackTemplates/FeedbackQuestionOpenResponse.vue'
-import FeedbackQuestionTrueFalse from './FeedbackTemplates/FeedbackQuestionTrueFalse.vue'
+import SurveyResult from '../../../models/SurveyResult'
+import FeedbackQuestionLikert from './Feedback/FeedbackTemplates/FeedbackQuestionLikert.vue'
+import FeedbackQuestionOpenResponse from './Feedback/FeedbackTemplates/FeedbackQuestionOpenResponse.vue'
+import FeedbackQuestionTrueFalse from './Feedback/FeedbackTemplates/FeedbackQuestionTrueFalse.vue'
 import Uuid from '~/helpers/Uuid'
 
-import SurveyResult from '../../../models/SurveyResult'
 import Enrollment from '~/models/Enrollment'
 import ContentBlock from '~/models/ContentBlock'
 import Crypto from '~/helpers/Crypto'

package/components/Content/Blocks/FileDownload.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-container class="pa-0">
+    <div :class="blockDirectionClasses" :dir="blockTextDirection">
         <h2
             v-if="
                 block.metadata.config.title &&
@@ -51,7 +51,7 @@
             "
             :value="resolvedItemAssets"
         ></FileLinks>
-    </v-container>
+    </div>
 </template>
 
 <script>

package/components/Content/Blocks/Image.vue

@@ -1,9 +1,56 @@
 <template>
     <div>
+        <v-container
+            v-if="
+                block.metadata.config.title ||
+                block.metadata.config.instructions
+            "
+            class="pa-0"
+        >
+            <h2
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_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>
         <ImageAssetViewer
+            v-if="block.metadata.config.asset"
             v-model="block.metadata.config"
             :assets="block.assets"
         ></ImageAssetViewer>
+        <v-alert v-else type="warning">{{
+            $t('windward.core.components.settings.image.no_image')
+        }}</v-alert>
+
+        <!-- Visible image description for translated courses only -->
+        <!-- aria-hidden prevents screen readers from reading this twice (already read via aria-describedby on the image) -->
+        <div
+            v-if="isTranslatedBlock && imageDescription"
+            class="image-description mt-3 pa-3"
+            aria-hidden="true"
+        >
+            <h4
+                class="image-description__heading text-subtitle-2 font-weight-bold mb-1"
+            >
+                {{ $t('shared.file.image.description') }}
+            </h4>
+            <div
+                class="image-description__text text-body-2"
+                v-html="imageDescription"
+            ></div>
+        </div>
     </div>
 </template>
 
@@ -11,6 +58,7 @@
 import _ from 'lodash'
 import ImageAssetViewer from '~/components/Content/ImageAssetViewer.vue'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'ContentBlockImage',
@@ -21,6 +69,47 @@ export default {
     data() {
         return {}
     },
+    computed: {
+        /**
+         * Check if this block is from a translated course
+         * Translated blocks have metadata.translation object
+         */
+        isTranslatedBlock() {
+            return !!_.get(this.block, 'metadata.translation', null)
+        },
+        /**
+         * Get the file asset for this image
+         * Uses resolveAsset from BaseContentBlock which wraps FileAssetHelper
+         */
+        fileAsset() {
+            const config = _.get(this.block, 'metadata.config', {})
+            return this.resolveAsset(config.asset)
+        },
+        /**
+         * Get the image description (ariaDescribedBy) from config or asset
+         * Checks multiple sources in order of priority
+         */
+        imageDescription() {
+            const config = _.get(this.block, 'metadata.config', {})
+
+            // If not inheriting from global, use the config value
+            if (!config.inherit) {
+                return config.ariaDescribedBy || ''
+            }
+
+            // If inheriting, try to get from file asset (locale-aware props first)
+            return (
+                _.get(this.fileAsset, 'aria_describedby', null) ||
+                _.get(this.fileAsset, 'props.aria_describedby', null) ||
+                _.get(
+                    this.fileAsset,
+                    'asset.metadata.props.aria_describedby',
+                    null
+                ) ||
+                ''
+            )
+        },
+    },
     beforeMount() {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
@@ -37,6 +126,61 @@ export default {
         if (_.isEmpty(this.block.metadata.config.ariaDescribedBy)) {
             this.block.metadata.config.ariaDescribedBy = ''
         }
+        // If the block is brand new and the title is missing then pre-set the word 'Image' to it
+        if (
+            !Uuid.test(this.block.id) &&
+            _.isEmpty(this.block.metadata.config.title)
+        ) {
+            this.block.metadata.config.title = this.$t(
+                'windward.core.shared.content_blocks.title.image'
+            )
+        } else if (_.isEmpty(this.block.metadata.config.title)) {
+            // Otherwise make sure the title key at least exists
+            this.block.metadata.config.title = ''
+        }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = ''
+        }
     },
 }
 </script>
+
+<style lang="scss" scoped>
+.image-description {
+    background-color: rgba(var(--v-theme-surface-variant), 0.5);
+    border-radius: 4px;
+    border-left: 3px solid rgba(var(--v-theme-primary), 0.7);
+
+    &__heading {
+        color: rgba(var(--v-theme-on-surface), 0.87);
+    }
+
+    &__text {
+        color: rgba(var(--v-theme-on-surface), 0.7);
+
+        // Deep selector to style HTML content rendered via v-html
+        ::v-deep {
+            p {
+                margin-bottom: 0.5rem;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+
+            ul,
+            ol {
+                margin: 0.5rem 0;
+                padding-left: 1.5rem;
+            }
+
+            li {
+                margin-bottom: 0.25rem;
+            }
+        }
+    }
+}
+</style>