@windward/core 0.7.0 → 0.9.0

package/components/Settings/ImageSettings.vue

@@ -1,176 +1,10 @@
 <template>
     <v-container>
-        <ContentBlockAsset
-            mimes="image/jpeg,image/png,image/gif"
-            v-model="block.metadata.config.asset"
-            class="mb-4"
-            :label="
-                $t(
-                    'windward.core.components.settings.image.current_image_file'
-                ) + ':'
-            "
-            :disabled="render"
+        <ImageAssetSettings
+            v-model="block.metadata.config"
             :assets.sync="block.assets"
-            @click:file="onFileSelect"
         >
-            <template #title>
-                {{ $t('windward.core.components.settings.image.place_image') }}
-            </template>
-        </ContentBlockAsset>
-
-        <v-switch
-            v-model="block.metadata.config.hideBackground"
-            :label="
-                $t('windward.core.components.settings.image.hide_background')
-            "
-            :disabled="render"
-        ></v-switch>
-        <v-switch
-            v-model="block.metadata.config.modal"
-            :label="$t('windward.core.components.settings.image.modal')"
-            :disabled="render"
-        ></v-switch>
-        <v-tooltip top color="primary">
-            <template #activator="{ on, attrs }">
-                <v-switch
-                    v-model="block.metadata.config.decorative"
-                    :disabled="render"
-                    @change="onDecorativeToggled($event)"
-                >
-                    <template #label>
-                        <span v-bind="attrs" v-on="on">
-                            {{
-                                $t(
-                                    'windward.core.components.settings.image.decorative'
-                                )
-                            }}
-                            <v-icon x-small class="help-offset-icon">
-                                mdi-help
-                            </v-icon>
-                        </span>
-                    </template>
-                </v-switch>
-            </template>
-            <span class="span-description">{{
-                $t(
-                    'windward.core.components.settings.image.decorative_toggle_description'
-                )
-            }}</span>
-        </v-tooltip>
-
-        <v-form v-if="!block.metadata.config.decorative">
-            <v-tooltip top color="primary">
-                <template #activator="{ on, attrs }">
-                    <v-switch
-                        v-model="block.metadata.config.inherit"
-                        :disabled="render"
-                    >
-                        <template #label>
-                            <span v-bind="attrs" v-on="on">
-                                {{
-                                    $t(
-                                        'windward.core.components.settings.image.inherit'
-                                    )
-                                }}
-                                <v-icon x-small class="help-offset-icon">
-                                    mdi-help
-                                </v-icon>
-                            </span>
-                        </template>
-                    </v-switch>
-                </template>
-                <span class="span-description">{{
-                    $t(
-                        'windward.core.components.settings.image.inherit_global_toggle_description'
-                    )
-                }}</span>
-            </v-tooltip>
-
-            <v-alert
-                v-if="block.metadata.config.inherit && !assetAltText"
-                type="warning"
-            >
-                {{
-                    $t('windward.core.components.settings.image.inherit_no_alt')
-                }}
-            </v-alert>
-
-            <v-text-field
-                v-if="block.metadata.config.inherit && assetAltText"
-                :value="assetAltText"
-                :label="
-                    $t('windward.core.components.navigation.image.default_alt')
-                "
-                outlined
-                counter
-                maxlength="125"
-                :rules="validation.textRules"
-                disabled
-            >
-            </v-text-field>
-
-            <v-text-field
-                v-if="!block.metadata.config.inherit"
-                v-model="block.metadata.config.alt"
-                outlined
-                counter
-                maxlength="125"
-                :label="
-                    $t('windward.core.components.navigation.image.default_alt')
-                "
-                :rules="validation.textRules"
-                :disabled="render"
-            >
-                <template #append>
-                    <v-tooltip top color="primary">
-                        <template #activator="{ on }">
-                            <v-icon v-on="on" small>mdi-help</v-icon>
-                        </template>
-                        <span class="span-description">{{
-                            $t(
-                                'windward.core.components.settings.image.alt_description'
-                            )
-                        }}</span>
-                    </v-tooltip>
-                </template>
-            </v-text-field>
-            <h5 class="pb-2">
-                {{ $t('windward.core.components.settings.image.screenreader') }}
-                <v-tooltip top color="primary">
-                    <template #activator="{ on }">
-                        <v-icon v-on="on" small class="help-offset-icon">
-                            mdi-help
-                        </v-icon>
-                    </template>
-                    <span class="span-description">{{
-                        $t(
-                            'windward.core.components.settings.image.screenreader_description'
-                        )
-                    }}</span>
-                </v-tooltip>
-            </h5>
-            <TextEditor
-                v-if="!block.metadata.config.inherit"
-                v-model="block.metadata.config.ariaDescribedBy"
-                menubar="bullist numlist"
-                :disabled="render"
-            ></TextEditor>
-
-            <div v-if="block.metadata.config.inherit">
-                <v-card v-if="assetDescribedByText">
-                    <v-card-text>
-                        <TextViewer v-model="assetDescribedByText"></TextViewer>
-                    </v-card-text>
-                </v-card>
-                <v-alert v-if="!assetDescribedByText" type="warning">
-                    {{
-                        $t(
-                            'windward.core.components.settings.image.inherit_no_aria'
-                        )
-                    }}
-                </v-alert>
-            </div>
-        </v-form>
+        </ImageAssetSettings>
     </v-container>
 </template>
 
@@ -180,35 +14,22 @@ import TextEditor from '~/components/Text/TextEditor'
 import TextViewer from '~/components/Text/TextViewer'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
+import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
 
 export default {
     name: 'ImageSettings',
     extends: BaseContentSettings,
-    components: { ContentBlockAsset, TextEditor, TextViewer },
+    components: {
+        ImageAssetSettings,
+        ContentBlockAsset,
+        TextEditor,
+        TextViewer,
+    },
     props: {
         settings: { type: Object, required: false, default: null },
         context: { type: String, required: false, default: 'block' },
     },
-    computed: {
-        assetAltText() {
-            // Get the block aria info and fallback to the asset metadata
-            return _.get(this.fileAsset, 'metadata.props.alt', null)
-        },
-        assetDescribedByText() {
-            // Get the block aria info and fallback to the asset metadata
-            return _.get(
-                this.fileAsset,
-                'metadata.props.aria_describedby',
-                null
-            )
-        },
-        fileAsset() {
-            return _.get(this.block, 'assets[0].asset', null)
-        },
-        fileAssetMap() {
-            return _.get(this.block, 'metadata.config.asset', null)
-        },
-    },
+    computed: {},
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -245,65 +66,10 @@ export default {
         }
     },
     data() {
-        return {
-            validation: {
-                textRules: [
-                    (v) => !!v || this.$t('shared.forms.errors.required'),
-                ],
-            },
-        }
+        return {}
     },
     watch: {},
     mounted() {},
-    methods: {
-        onDecorativeToggled(evt) {
-            if (evt) {
-                this.block.metadata.config.ariaDescribedBy = ''
-                this.block.metadata.config.alt = ''
-            }
-        },
-        onFileSelect(file) {
-            // Clear out the body since we're defining a proper file link now
-            this.block.body = ''
-
-            // file = null when you remove a file
-            if (_.isEmpty(file)) {
-                this.block.assets = []
-            } else {
-                this.block.assets = [file]
-
-                //Assign height and width for skeleton loader
-                if (!_.isEmpty(file.asset.metadata.props)) {
-                    this.block.metadata.config.height =
-                        file.asset.metadata.props['height']
-                    this.block.metadata.config.width =
-                        file.asset.metadata.props['width']
-                }
-                // Assign any alt text from the filemanager file
-                this.block.metadata.config.alt = _.get(
-                    file,
-                    'asset.metadata.props.alt',
-                    ''
-                )
-
-                this.block.metadata.config.ariaDescribedBy = _.get(
-                    file,
-                    'asset.metadata.props.aria_describedby',
-                    ''
-                )
-            }
-        },
-    },
+    methods: {},
 }
 </script>
-<style>
-.span-description {
-    display: flex;
-    justify-content: center;
-    width: 200px;
-}
-.help-offset-icon {
-    position: relative;
-    top: -8px;
-}
-</style>

package/components/Settings/OpenResponseCollateSettings.vue

@@ -33,41 +33,31 @@
                     color="primary"
                     @change="onLinkedChange"
                 >
-                    <draggable
-                        v-bind="dragOptions"
-                        :list="contentBlocks"
-                        @change="onDragChange"
+                    <v-list-item
+                        v-for="contentBlock in contentBlocks"
+                        :key="contentBlock.block_id"
+                        :value="contentBlock.block_id"
                     >
-                        <v-list-item
-                            v-for="contentBlock in contentBlocks"
-                            :key="contentBlock.block_id"
-                            :value="contentBlock.block_id"
-                        >
-                            <template #default="{ active }">
-                                <v-list-item-icon>
-                                    <v-icon>mdi-drag</v-icon>
-                                </v-list-item-icon>
-
-                                <v-list-item-content>
-                                    <v-list-item-title>
-                                        {{
-                                            contentBlock.block.body.replace(
-                                                /<[^>]*>?/gm,
-                                                ''
-                                            )
-                                        }}
-                                    </v-list-item-title>
-                                </v-list-item-content>
-                                <v-list-item-action>
-                                    <v-checkbox
-                                        :input-value="active"
-                                        color="primary"
-                                        :disabled="render"
-                                    ></v-checkbox>
-                                </v-list-item-action>
-                            </template>
-                        </v-list-item>
-                    </draggable>
+                        <template #default="{ active }">
+                            <v-list-item-content>
+                                <v-list-item-title>
+                                    {{
+                                        contentBlock.body.replace(
+                                            /<[^>]*>?/gm,
+                                            ''
+                                        )
+                                    }}
+                                </v-list-item-title>
+                            </v-list-item-content>
+                            <v-list-item-action>
+                                <v-checkbox
+                                    :input-value="active"
+                                    color="primary"
+                                    :disabled="render"
+                                ></v-checkbox>
+                            </v-list-item-action>
+                        </template>
+                    </v-list-item>
                 </v-list-item-group>
             </v-list>
         </v-form>
@@ -84,7 +74,7 @@ import ContentBlock from '~/models/ContentBlock'
 import Course from '~/models/Course'
 
 export default {
-    name: 'ImageSettings',
+    name: 'OpenResponseCollateSettings',
     extends: BaseContentSettings,
     components: { draggable, TextEditor },
     props: {
@@ -117,6 +107,8 @@ export default {
         )
             .for(new Course({ id: this.course.id }))
             .get()
+
+        this.sortContentBlocks(this.contentBlocks)
     },
     beforeMount() {
         if (_.isEmpty(this.block)) {
@@ -141,34 +133,34 @@ export default {
         if (!_.isBoolean(this.block.metadata.config.include_prompts)) {
             this.block.metadata.config.include_prompts = false
         }
-
         this.linked = this.block.metadata.config.linked
     },
     watch: {},
     mounted() {},
     methods: {
-        // Called when the order changes
-        onDragChange(e) {
-            this.setLinkedBlocks()
+        sortContentBlocks(contentBlocks) {
+            let contentBlocksByPage = []
+            const blockMap = []
+            // getting page order
+            const contentBlockTree = this.$ContentService.getFlatTree()
+            contentBlockTree.forEach(function (page, index) {
+                contentBlocks.forEach((block) => {
+                    // If the block is on this page and it wasn't already used on a different page
+                    if (
+                        page.content_id === block.content_id &&
+                        !blockMap.includes(block.block_id)
+                    ) {
+                        contentBlocksByPage.push(block)
+                        blockMap.push(block.block_id)
+                    }
+                })
+            })
+            this.contentBlocks = contentBlocksByPage
         },
         // Called when blocks are added / removed
         onLinkedChange() {
-            this.setLinkedBlocks()
-        },
-        setLinkedBlocks() {
-            const linkedBlockIds = []
-
-            // Loop over content blocks since they have the correct order we want to collate
-            this.contentBlocks.forEach((contentBlock) => {
-                // If the unsorted this.linked includes the block id, add it in the right order
-                if (this.linked.includes(contentBlock.block_id)) {
-                    linkedBlockIds.push(contentBlock.block_id)
-                }
-            })
-
-            // Set the linked and also body for convenience
-            this.block.metadata.config.linked = linkedBlockIds
-            this.block.body = linkedBlockIds.join()
+            // update block with linked open response for download
+            this.block.metadata.config.linked = this.linked
         },
     },
 }

package/components/Settings/OpenResponseSettings.vue

@@ -1,43 +1,63 @@
 <template>
     <v-container>
-        <v-form>
-            <p>
-                {{
-                    $t(
-                        'windward.core.components.settings.open_response.question'
-                    )
-                }}
-            </p>
-            <TextEditor
-                v-model="block.body"
-                :height="200"
+        <v-row class="pl-3 pr-3">
+            <v-text-field
+                id="block-settings-title"
+                v-model="block.metadata.config.title"
+                :autofocus="true"
+                :rules="$Validation.getRule('block.title')"
+                :counter="$Validation.getLimit('block.title')"
+                outlined
+                :label="
+                    $t('windward.core.components.settings.clickable_icon.title')
+                "
                 :disabled="render"
-            ></TextEditor>
-            <p class="pt-4">
-                {{
-                    $t(
-                        'windward.core.components.settings.open_response.sample_response'
-                    )
-                }}
-            </p>
-            <TextEditor
-                v-model="block.metadata.config.sample_response"
-                :height="200"
+            ></v-text-field>
+            <v-textarea
+                id="block-settings-instructions"
+                v-model="block.metadata.config.instructions"
+                :rules="$Validation.getRule('block.instructions')"
+                :counter="$Validation.getLimit('block.instructions')"
+                outlined
+                :label="$t('components.content.settings.base.instructions')"
                 :disabled="render"
-            ></TextEditor>
-            <p class="pt-4">
-                {{
-                    $t(
-                        'windward.core.components.settings.open_response.starting_text'
-                    )
-                }}
-            </p>
-            <TextEditor
-                v-model="block.metadata.config.starting_text"
-                :height="200"
-                :disabled="render"
-            ></TextEditor>
-        </v-form>
+            ></v-textarea>
+        </v-row>
+        <p>
+            {{ $t('windward.core.components.settings.open_response.question') }}
+        </p>
+        <TextEditor
+            id="block-settings-body"
+            v-model="block.body"
+            :height="200"
+            :disabled="render"
+        ></TextEditor>
+        <p class="pt-4">
+            {{
+                $t(
+                    'windward.core.components.settings.open_response.sample_response'
+                )
+            }}
+        </p>
+        <TextEditor
+            id="block-settings-sample-response"
+            v-model="block.metadata.config.sample_response"
+            :height="200"
+            :disabled="render"
+        ></TextEditor>
+        <p class="pt-4">
+            {{
+                $t(
+                    'windward.core.components.settings.open_response.starting_text'
+                )
+            }}
+        </p>
+        <TextEditor
+            id="block-settings-starting-text"
+            v-model="block.metadata.config.starting_text"
+            :height="200"
+            :disabled="render"
+        ></TextEditor>
     </v-container>
 </template>
 
@@ -67,6 +87,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/Settings/ScenarioChoiceSettings.vue

@@ -3,11 +3,11 @@
         <v-container class="pa-0">
             <v-col class="pa-0">
                 <v-text-field
+                    id="block-settings-title"
                     v-model="block.metadata.config.title"
-                    :rules="validation.shortInputRules"
-                    :counter="50"
+                    :rules="$Validation.getRule('block.title')"
+                    :counter="$Validation.getLimit('block.title')"
                     outlined
-                    id="title"
                     :label="
                         $t(
                             'windward.core.components.settings.scenario_choice.title'
@@ -16,10 +16,10 @@
                     :disabled="render"
                 ></v-text-field>
                 <v-textarea
+                    id="block-settings-instructions"
                     v-model="block.metadata.config.description"
-                    id="description"
-                    :rules="validation.instructionRule"
-                    :counter="255"
+                    :rules="$Validation.getRule('block.instructions')"
+                    :counter="$Validation.getLimit('block.instructions')"
                     outlined
                     :label="$t('components.content.settings.base.instructions')"
                     :disabled="render"
@@ -77,8 +77,8 @@
                                 v-model="
                                     block.metadata.config.items[index].title
                                 "
-                                :rules="validation.shortInputRules"
-                                :counter="50"
+                                :rules="$Validation.getRule('longInput')"
+                                :counter="$Validation.getLimit('longInput')"
                                 outlined
                                 :id="'item-' + index + '-title'"
                                 :label="
@@ -128,7 +128,11 @@
                 >
                     <v-icon>mdi-plus</v-icon>
                     <span v-if="block.metadata.config.items.length <= 26">
-                        {{ $t('shared.forms.add') }}
+                        {{
+                            $t(
+                                'windward.core.components.settings.scenario_choice.add_choice'
+                            )
+                        }}
                     </span>
                     <span v-else>
                         {{
@@ -249,32 +253,6 @@ export default {
                     value: 'number',
                 },
             ],
-            validation: {
-                shortInputRules: [
-                    (v) => {
-                        if (v && v.length >= 50) {
-                            return this.$t(
-                                'windward.core.shared.settings.errors.input_limitations',
-                                [50]
-                            )
-                        } else {
-                            return true
-                        }
-                    },
-                ],
-                instructionRule: [
-                    (v) => {
-                        if (v && v.length >= 255) {
-                            return this.$t(
-                                'windward.core.shared.settings.errors.input_limitations',
-                                [255]
-                            )
-                        } else {
-                            return true
-                        }
-                    },
-                ],
-            },
         }
     },
     beforeMount() {