@windward/core 0.26.0 → 0.27.0

package/components/Content/Blocks/ScenarioChoice.vue

@@ -35,7 +35,16 @@
                 </v-btn>
             </div>
         </v-container>
-        <v-container class="pa-0">
+        <v-alert
+            v-if="block.metadata.config.items.length === 0"
+            type="warning"
+            >{{
+                $t(
+                    'windward.core.components.content.blocks.scenario_choice.no_scenario'
+                )
+            }}</v-alert
+        >
+        <v-container v-else class="pa-0">
             <v-row
                 v-for="(item, itemIndex) in block.metadata.config.items"
                 :key="itemIndex"

package/components/Content/Blocks/Tab.vue

@@ -25,8 +25,13 @@
                 {{ block.metadata.config.instructions }}
             </p>
         </v-container>
-        <v-container class="pa-0">
-            <v-tabs dark v-model="block.metadata.config.currentTab" show-arrows>
+        <v-alert
+            v-if="block.metadata.config.items.length === 0"
+            type="warning"
+            >{{ $t('windward.core.components.settings.tab.no_tabs') }}</v-alert
+        >
+        <v-container v-else class="pa-0">
+            <v-tabs v-model="block.metadata.config.currentTab" dark show-arrows>
                 <v-tabs-slider></v-tabs-slider>
                 <v-tab
                     v-for="(tab, tabIndex) in block.metadata.config.items"
@@ -96,31 +101,10 @@ export default {
         this.block.body = this.$t(
             'windward.core.shared.content_blocks.title.tab'
         )
-        if (_.isEmpty(this.block.metadata.config.items)) {
-            const defaultObject = {
-                tabHeader: '',
-                expand: false,
-                content: '',
-                imageAsset: {
-                    display: {
-                        width: 100,
-                        margin: '',
-                        padding: '',
-                    },
-                    hideBackground: true,
-                },
-            }
-            this.block.metadata.config.items = []
-            this.block.metadata.config.items.push(defaultObject)
-        } else {
-            this.block.metadata.config.items.forEach((element) => {
-                if (element.content == null) {
-                    element.content = ''
-                }
-                if (element.tabHeader == null) {
-                    element.tabHeader = ''
-                }
-            })
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = this.$t(
+                'windward.core.shared.content_blocks.title.tab'
+            )
         }
         if (!_.isBoolean(this.block.metadata.config.display_title)) {
             this.$set(this.block.metadata.config, 'display_title', true)
@@ -128,9 +112,12 @@ export default {
         if (_.isEmpty(this.block.metadata.config.currentTab)) {
             this.block.metadata.config.currentTab = 0
         }
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            this.block.metadata.config.items = []
+        }
     },
     methods: {
-        async onBeforeSave() {
+        onBeforeSave() {
             this.block.metadata.config.items.forEach((element) => {
                 element.expand = false
             })

package/components/Content/Blocks/UserUpload.vue

@@ -17,7 +17,7 @@
                     </p>
                 </v-col>
                 <v-col v-if="!blockExists" cols="12">
-                    <v-alert color="warning">
+                    <v-alert type="warning">
                         <p>
                             {{
                                 $t(
@@ -28,44 +28,47 @@
                     </v-alert>
                 </v-col>
             </v-row>
-            <v-row>
+            <v-row v-if="render">
                 <v-col cols="12">
-                    <DisplayUserFilesTable
-                        v-model="userFileAsset"
-                        :enrollment="enrollment"
-                    ></DisplayUserFilesTable>
-                </v-col>
-                <v-col v-if="showUpload" cols="12">
-                    <div v-if="blockExists">
-                        <v-form
-                            ref="form"
-                            v-model="valid"
-                            lazy-validation
-                            class="pb-0"
-                        >
-                            <FileDropZone
-                                v-model="uploadFiles"
-                                :accept="
-                                    block.metadata.config.uploadSettings.accept
-                                "
-                                :multiple="
-                                    block.metadata.config.uploadSettings
-                                        .multiple
-                                "
-                            ></FileDropZone>
-
-                            <v-container class="text-center">
-                                <v-btn
-                                    :disabled="!canUpload || loading"
-                                    color="primary"
-                                    elevation="0"
-                                    class="text-center"
-                                    @click="handleUpload"
+                    <div class="upload-container" :class="uploadContainerClass">
+                        <DisplayUserFilesTable
+                            v-model="userFileAsset"
+                            :enrollment="enrollment"
+                        ></DisplayUserFilesTable>
+                        <div v-if="showUpload">
+                            <div v-if="blockExists">
+                                <v-form
+                                    ref="form"
+                                    v-model="valid"
+                                    lazy-validation
+                                    class="pb-0"
                                 >
-                                    {{ $t('shared.forms.upload') }}
-                                </v-btn>
-                            </v-container>
-                        </v-form>
+                                    <FileDropZone
+                                        v-model="uploadFiles"
+                                        :accept="
+                                            block.metadata.config.uploadSettings
+                                                .accept
+                                        "
+                                        :multiple="
+                                            block.metadata.config.uploadSettings
+                                                .multiple
+                                        "
+                                    ></FileDropZone>
+
+                                    <v-container class="text-center">
+                                        <v-btn
+                                            :disabled="!canUpload || loading"
+                                            color="primary"
+                                            elevation="0"
+                                            class="text-center"
+                                            @click="handleUpload"
+                                        >
+                                            {{ $t('shared.forms.upload') }}
+                                        </v-btn>
+                                    </v-container>
+                                </v-form>
+                            </div>
+                        </div>
                     </div>
                 </v-col>
             </v-row>
@@ -109,6 +112,11 @@ export default {
         ...mapGetters({
             enrollment: 'enrollment/get',
         }),
+        uploadContainerClass() {
+            return this.$vuetify.theme.dark
+                ? 'upload-container--dark'
+                : 'upload-container--light'
+        },
         blockExists() {
             return Uuid.test(this.block.id)
         },
@@ -255,3 +263,23 @@ export default {
     },
 }
 </script>
+
+<style scoped>
+.upload-container {
+    padding: 16px;
+    border-radius: 4px;
+    border: 1px solid;
+}
+
+.upload-container--light {
+    background-color: #ffffff;
+    border-color: #e0e0e0;
+    color: #000000;
+}
+
+.upload-container--dark {
+    background-color: #424242;
+    border-color: #616161;
+    color: #ffffff;
+}
+</style>

package/components/Content/Blocks/Video.vue

@@ -13,7 +13,7 @@
             {{ block.metadata.config.instructions }}
         </p>
 
-        <div class="video-wrapper">
+        <div v-if="hasSource" class="video-wrapper">
             <VuetifyPlayer
                 class="no-border-player"
                 :language="$i18n && $i18n.locale ? $i18n.locale : 'en-US'"
@@ -74,6 +74,9 @@
                 </template>
             </VuetifyPlayer>
         </div>
+        <v-alert v-else type="warning">
+            {{ $t('windward.core.components.settings.video.no_video_alert') }}
+        </v-alert>
         <!--    display first note in the playlist for now    -->
         <v-alert
             v-if="notes.length > 0"
@@ -399,12 +402,19 @@ export default {
         },
         getLinkedCaptions(file) {
             // Check to see if the video source has a linked asset and it's a vtt file
-            const linkedCaption = _.find(
-                _.get(file, 'asset.linked_assets', []),
-                function (f) {
-                    return _.get(f, 'asset.metadata.extension', '') === 'vtt'
-                }
-            )
+            // Prefer the most recently linked VTT (last match), not the oldest.
+            const linkedAssets = _.get(file, 'asset.linked_assets', [])
+            const linkedCaption = _.findLast(linkedAssets, function (f) {
+                const ext = _.get(f, 'asset.metadata.extension', '').toLowerCase()
+                const mime = _.get(f, 'asset.metadata.mime', '').toLowerCase()
+                const name = _.get(f, 'asset.name', '').toLowerCase()
+
+                return (
+                    ext === 'vtt' ||
+                    mime === 'text/vtt' ||
+                    name.endsWith('.vtt')
+                )
+            })
 
             if (linkedCaption) {
                 const foundAsset = this.block.assets.find((a) => {

package/components/Settings/AccordionSettings.vue

@@ -165,7 +165,9 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.core.components.settings.accordion.accordion'
+            )
         }
         if (!_.isBoolean(this.block.metadata.config.display_title)) {
             this.$set(this.block.metadata.config, 'display_title', true)
@@ -183,21 +185,7 @@ export default {
             this.block.metadata.config.editOnContentItem = false
         }
         if (_.isEmpty(this.block.metadata.config.items)) {
-            const defaultObject = {
-                header: '',
-                expand: false,
-                content: '',
-                fileConfig: {
-                    display: {
-                        width: 100,
-                        margin: '',
-                        padding: '',
-                    },
-                    hideBackground: true,
-                },
-            }
             this.block.metadata.config.items = []
-            this.block.metadata.config.items.push(defaultObject)
         }
         this.block.body = this.$t(
             'windward.core.shared.content_blocks.title.accordion'

package/components/Settings/BlockQuoteSettings.vue

@@ -8,6 +8,9 @@
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
+            <p class="pt-4 mb-2">
+                {{ $t('windward.core.components.settings.block_quote.body') }}
+            </p>
             <TextEditor
                 v-model="block.metadata.config.block_quote.quote"
                 :rules="$Validation.getRule('longInput')"
@@ -15,9 +18,6 @@
                 outlined
                 auto-grow
                 :height="200"
-                :label="
-                    $t('windward.core.components.settings.block_quote.body')
-                "
                 :disabled="render"
             ></TextEditor>
         </v-container>
@@ -150,7 +150,9 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.core.components.content.blocks.block_quote.title'
+            )
         }
         if (!_.isBoolean(this.block.metadata.config.display_title)) {
             this.$set(this.block.metadata.config, 'display_title', true)

package/components/Settings/ClickableIconsSettings.vue

@@ -64,6 +64,13 @@
                     :disabled="render"
                 ></v-switch>
             </v-container>
+            <p>
+                {{
+                    $t(
+                        'windward.core.components.settings.clickable_icon.item_header'
+                    )
+                }}
+            </p>
             <v-col class="pa-0">
                 <SortableExpansionPanel
                     v-model="block.metadata.config.items"
@@ -217,7 +224,11 @@
                     :disabled="render"
                     @click="onAddElement"
                     ><v-icon>mdi-plus</v-icon
-                    >{{ $t('shared.forms.add') }}</v-btn
+                    >{{
+                        $t(
+                            'windward.core.components.settings.clickable_icon.add_item'
+                        )
+                    }}</v-btn
                 >
             </v-row>
         </v-container>
@@ -285,7 +296,14 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.core.components.settings.clickable_icon.clickable_icon_title'
+            )
+        }
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = this.$t(
+                'windward.core.components.settings.clickable_icon.instructions'
+            )
         }
         if (!_.isBoolean(this.block.metadata.config.display_title)) {
             this.$set(this.block.metadata.config, 'display_title', true)
@@ -304,11 +322,7 @@ export default {
             this.block.metadata.config.items = []
         }
     },
-    mounted() {
-        if (this.block.metadata.config.items.length <= 0) {
-            this.onAddElement()
-        }
-    },
+    mounted() {},
     methods: {
         onAddElement() {
             const defaultObject = {

package/components/Settings/EmailSettings.vue

@@ -180,7 +180,9 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.core.components.content.blocks.email.email'
+            )
         }
         if (!_.isBoolean(this.block.metadata.config.display_title)) {
             this.$set(this.block.metadata.config, 'display_title', true)
@@ -193,16 +195,6 @@ export default {
         }
         if (_.isEmpty(this.block.metadata.config.emails)) {
             this.block.metadata.config.emails = []
-            const defaultObject = {
-                from: '',
-                to: '',
-                cc: '',
-                subject: '',
-                body: '',
-                tinymce_expand: false,
-                initials: '',
-            }
-            this.block.metadata.config.emails.push(defaultObject)
         }
         this.block.body = this.$t(
             'windward.core.components.content.blocks.email.title'

package/components/Settings/FileDownloadSettings.vue

@@ -15,8 +15,14 @@
             "
             :disabled="render"
         ></v-switch>
-        <v-spacer class="my-6" />
-
+        <v-divider class="my-4 primary"></v-divider>
+        <p>
+            {{
+                $t(
+                    'windward.core.components.content.blocks.file_download.items_header'
+                )
+            }}
+        </p>
         <SortableExpansionPanel
             v-model="block.metadata.config.items"
             :disabled="render"

package/components/Settings/OpenResponseCollateSettings.vue

@@ -151,6 +151,16 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = this.$t(
+                'windward.core.components.settings.open_response_collate.title'
+            )
+        }
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = this.$t(
+                'windward.core.components.settings.open_response_collate.block_instructions'
+            )
+        }
         if (_.isEmpty(this.block.metadata.config.linked)) {
             this.block.metadata.config.linked = []
         }

package/components/Settings/OpenResponseSettings.vue

@@ -7,9 +7,7 @@
             ></BaseContentBlockSettings>
         </v-row>
         <p class="pt-4 mb-2">
-            {{
-                $t('windward.core.components.settings.open_response.question')
-            }}
+            {{ $t('windward.core.components.settings.open_response.question') }}
         </p>
         <TextEditor
             id="block-settings-body"
@@ -101,13 +99,17 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.core.components.settings.open_response.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 = ''
+            this.block.metadata.config.instructions = this.$t(
+                'windward.core.components.settings.open_response.instructions'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.sample_response)) {
             this.block.metadata.config.sample_response = ''
@@ -127,8 +129,7 @@ export default {
             const config = _.get(generatedBlock, 'metadata.config', {})
 
             this.block.body = _.get(generatedBlock, 'body', '') ?? ''
-            this.block.metadata.config.title =
-                _.get(config, 'title', '') ?? ''
+            this.block.metadata.config.title = _.get(config, 'title', '') ?? ''
             this.block.metadata.config.instructions =
                 _.get(config, 'instructions', '') ?? ''
             this.block.metadata.config.sample_response =

package/components/Settings/ScenarioChoiceSettings.vue

@@ -8,7 +8,6 @@
                 ></BaseContentBlockSettings>
             </v-col>
             <v-col class="pa-0">
-                <v-divider class="my-4 primary"></v-divider>
                 <v-select
                     v-model="block.metadata.config.display_style"
                     :items="displayStyles"
@@ -40,7 +39,15 @@
                     :disabled="render"
                 ></v-switch>
             </v-col>
+            <v-divider class="my-4 primary"></v-divider>
             <v-col class="pa-0">
+                <p>
+                    {{
+                        $t(
+                            'windward.core.components.settings.scenario_choice.choices'
+                        )
+                    }}
+                </p>
                 <SortableExpansionPanel
                     v-model="block.metadata.config.items"
                     :disabled="render"
@@ -280,7 +287,9 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.core.components.settings.scenario_choice.scenario_title'
+            )
         }
         if (!_.isBoolean(this.block.metadata.config.display_title)) {
             this.$set(this.block.metadata.config, 'display_title', true)
@@ -311,9 +320,6 @@ export default {
         }
     },
     mounted() {
-        if (this.block.metadata.config.items.length <= 0) {
-            this.onAddElement()
-        }
         this.isLinked =
             !_.isEmpty(this.block.metadata.config.link_content_id) &&
             !_.isEmpty(this.block.metadata.config.link_text)

package/components/Settings/TabSettings.vue

@@ -152,7 +152,9 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.core.shared.content_blocks.title.tab'
+            )
         }
         if (!_.isBoolean(this.block.metadata.config.display_title)) {
             this.$set(this.block.metadata.config, 'display_title', true)
@@ -170,27 +172,10 @@ export default {
             this.block.metadata.config.currentTab = 0
         }
         if (_.isEmpty(this.block.metadata.config.items)) {
-            const defaultObject = {
-                tabHeader: '',
-                expand: false,
-                content: '',
-                imageAsset: {
-                    display: {
-                        width: 100,
-                        margin: '',
-                        padding: '',
-                    },
-                    hideBackground: true,
-                },
-            }
             this.block.metadata.config.items = []
-            this.block.metadata.config.items.push(defaultObject)
         }
     },
     mounted() {
-        if (this.block.metadata.config.items.length <= 0) {
-            this.onAddElement()
-        }
         this.checkForCustomSpacing()
     },
     beforeDestroy() {

package/components/Settings/UserUploadSettings.vue

@@ -5,14 +5,20 @@
                 v-model="block.metadata.config"
                 :disabled="render"
             ></BaseContentBlockSettings>
-            <p>
-                {{
-                    $t(
-                        'windward.core.components.settings.user_upload.max_file_size'
-                    )
-                }}
-            </p>
         </v-container>
+        <v-divider class="my-4 primary"></v-divider>
+        <p>
+            {{
+                $t('windward.core.components.settings.user_upload.files_header')
+            }}
+        </p>
+        <p>
+            {{
+                $t(
+                    'windward.core.components.settings.user_upload.max_file_size'
+                )
+            }}
+        </p>
         <v-switch
             v-model="block.metadata.config.uploadSettings.multiple"
             :label="
@@ -161,7 +167,9 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.core.components.content.blocks.user_upload.title'
+            )
         }
         if (!_.isBoolean(this.block.metadata.config.display_title)) {
             this.$set(this.block.metadata.config, 'display_title', true)

package/components/Settings/VideoSettings/SourcePicker.vue

@@ -196,7 +196,26 @@ export default {
             return false
         },
     },
-    watch: {},
+    watch: {
+        // If the underlying assets change (e.g., new transcript linked),
+        // recompute the linked captions so the UI chip reflects the latest VTT.
+        assets: {
+            deep: true,
+            handler() {
+                if (this.source) {
+                    this.linkedCaptions = this.getLinkedCaptions(this.source)
+                }
+            },
+        },
+        source: {
+            deep: true,
+            handler(newSource) {
+                if (newSource) {
+                    this.linkedCaptions = this.getLinkedCaptions(newSource)
+                }
+            },
+        },
+    },
     beforeMount() {},
     mounted() {
         this.linkedCaptions = this.getLinkedCaptions(this.source)
@@ -223,13 +242,20 @@ export default {
             if (!file) {
                 return null
             }
-            // Check to see if the video source has a linked asset and it's a vtt file
-            const linkedCaption = _.find(
-                _.get(file, 'asset.linked_assets', []),
-                function (f) {
-                    return _.get(f, 'asset.metadata.extension', '') === 'vtt'
-                }
-            )
+            // Check to see if the video source has a linked asset and it's a vtt file.
+            // Prefer the most recently linked VTT (last match).
+            const linkedAssets = _.get(file, 'asset.linked_assets', [])
+            const linkedCaption = _.findLast(linkedAssets, function (f) {
+                const ext = _.get(f, 'asset.metadata.extension', '').toLowerCase()
+                const mime = _.get(f, 'asset.metadata.mime', '').toLowerCase()
+                const name = _.get(f, 'asset.name', '').toLowerCase()
+
+                return (
+                    ext === 'vtt' ||
+                    mime === 'text/vtt' ||
+                    name.endsWith('.vtt')
+                )
+            })
 
             return linkedCaption || null
         },