@windward/core 0.0.8 → 0.0.9

package/components/Settings/ScenarioChoiceSettings.vue

@@ -0,0 +1,329 @@
+<template>
+    <div>
+        <v-container>
+            <v-col class="pa-0">
+                <v-text-field
+                    v-model="block.metadata.config.title"
+                    id="title"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.scenario_choice.title'
+                        )
+                    "
+                ></v-text-field>
+                <v-text-field
+                    v-model="block.metadata.config.description"
+                    id="description"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.scenario_choice.description'
+                        )
+                    "
+                ></v-text-field>
+                <v-select
+                    v-model="block.metadata.config.display_style"
+                    :items="displayStyles"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.scenario_choice.display_style'
+                        )
+                    "
+                ></v-select>
+                <v-switch
+                    v-model="isLinked"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.scenario_choice.is_linked'
+                        )
+                    "
+                    @click="onClickLinkSwitch"
+                ></v-switch>
+
+                <v-switch
+                    v-model="block.metadata.config.show_reset"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.scenario_choice.show_reset'
+                        )
+                    "
+                ></v-switch>
+
+                <v-btn
+                    color="primary"
+                    outlined
+                    block
+                    :disabled="block.metadata.config.items.length > 26"
+                    @click="onAddElement"
+                >
+                    <v-icon>mdi-plus</v-icon>
+                    <span v-if="block.metadata.config.items.length <= 26">
+                        {{ $t('shared.forms.add') }}
+                    </span>
+                    <span v-else>
+                        {{
+                            $t(
+                                'windward.core.components.settings.scenario_choice.over_item_limit'
+                            )
+                        }}
+                    </span>
+                </v-btn>
+            </v-col>
+            <v-col>
+                <SortableExpansionPanel
+                    v-model="block.metadata.config.items"
+                    @click:close="onRemoveElement"
+                >
+                    <template #header="{ item }">
+                        <span v-if="item.title">{{ item.title }}</span>
+                        <span v-else>
+                            {{
+                                $t(
+                                    'windward.core.components.settings.scenario_choice.no_title'
+                                )
+                            }}
+                        </span>
+                    </template>
+                    <template #body="{ index }">
+                        <v-text-field
+                            v-model="block.metadata.config.items[index].title"
+                            :id="'item-' + index + '-title'"
+                            :label="
+                                $t(
+                                    'windward.core.components.settings.scenario_choice.item_title'
+                                )
+                            "
+                        ></v-text-field>
+
+                        <v-switch
+                            v-model="block.metadata.config.items[index].correct"
+                            :label="
+                                $t(
+                                    'windward.core.components.settings.scenario_choice.correct_choice'
+                                )
+                            "
+                        ></v-switch>
+
+                        <span>{{
+                            $t(
+                                'windward.core.components.settings.scenario_choice.item_text'
+                            )
+                        }}</span>
+                        <TextEditor
+                            v-model="block.metadata.config.items[index].body"
+                            :height="200"
+                        ></TextEditor>
+                    </template>
+                </SortableExpansionPanel>
+            </v-col>
+        </v-container>
+
+        <Dialog
+            v-model="showLinkDialog"
+            :trigger="false"
+            action-save
+            @click:save="onSetLinkedContent"
+        >
+            <template #title>{{
+                $t(
+                    'windward.core.components.settings.scenario_choice.link_content'
+                )
+            }}</template>
+
+            <template #form="{ on, attrs }">
+                <v-form
+                    v-model="linkDialogFormValid"
+                    v-bind="attrs"
+                    v-on="on"
+                    @submit.prevent
+                    @input="on['change:valid']($event)"
+                >
+                    <v-text-field
+                        v-model="block.metadata.config.link_text"
+                        :rules="validation.existsRules"
+                        :label="
+                            $t(
+                                'windward.core.components.settings.scenario_choice.link_text'
+                            )
+                        "
+                    ></v-text-field>
+                    <v-treeview
+                        v-model="selectedTreeviewContent"
+                        selectable
+                        selected-color="primary"
+                        selection-type="independent"
+                        return-object
+                        open-all
+                        :items="contentTree"
+                        @input="onTreeChange(attrs.ref)"
+                    >
+                        <template #label="{ item }">
+                            <span
+                                :class="
+                                    selectedTreeviewContent.length === 0
+                                        ? 'error--text'
+                                        : ''
+                                "
+                            >
+                                {{ item.content.name_prefix }}
+                                {{ item.content.name }}
+                            </span>
+                        </template>
+                    </v-treeview>
+                </v-form>
+            </template>
+        </Dialog>
+    </div>
+</template>
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import TextEditor from '~/components/Text/TextEditor'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
+import Dialog from '~/components/Dialog.vue'
+
+export default {
+    name: 'ScenarioChoiceSettings',
+    components: {
+        SortableExpansionPanel,
+        TextEditor,
+        Dialog,
+    },
+    extends: BaseContentSettings,
+    computed: {
+        ...mapGetters({
+            contentTree: 'content/getTree',
+        }),
+    },
+    data() {
+        return {
+            isLinked: false,
+            showLinkDialog: false,
+            linkDialogFormValid: false,
+            selectedTreeviewContent: [],
+            validation: {
+                existsRules: [
+                    (v) =>
+                        (!!v && !!this.block.metadata.config.link_content_id) ||
+                        this.$t(
+                            'windward.core.components.settings.scenario_choice.link_required'
+                        ),
+                ],
+            },
+            displayStyles: [
+                {
+                    text: this.$t(
+                        'windward.core.components.settings.scenario_choice.style.letter'
+                    ),
+                    value: 'letter',
+                },
+                {
+                    text: this.$t(
+                        'windward.core.components.settings.scenario_choice.style.number'
+                    ),
+                    value: 'number',
+                },
+            ],
+        }
+    },
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = 'scenario choice'
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        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.description)) {
+            this.block.metadata.config.description = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.display_style)) {
+            this.block.metadata.config.display_style = 'letter'
+        }
+        if (_.isEmpty(this.block.metadata.config.link_content_id)) {
+            this.block.metadata.config.link_content_id = null
+        }
+        if (_.isEmpty(this.block.metadata.config.link_text)) {
+            this.block.metadata.config.link_text = null
+        }
+        if (!_.isBoolean(this.block.metadata.config.show_reset)) {
+            this.block.metadata.config.show_reset = false
+        }
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            this.block.metadata.config.items = []
+        }
+    },
+    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)
+    },
+    methods: {
+        onAddElement() {
+            const defaultObject = {
+                title: '',
+                body: '<p></p>',
+                correct: false,
+            }
+            this.block.metadata.config.items.push(defaultObject)
+        },
+        onRemoveElement(index) {
+            this.block.metadata.config.items.splice(index, 1)
+        },
+        onClickLinkSwitch() {
+            // Show the dialog to set the links
+            if (this.isLinked) {
+                this.showLinkDialog = true
+                this.$nextTick(() => {
+                    this.isLinked = false
+                })
+            } else {
+                // clear the links
+                this.block.metadata.config.link_content_id = null
+                this.block.metadata.config.link_text = null
+                this.selectedTreeviewContent.splice(0)
+            }
+        },
+        onTreeChange(ref) {
+            // Enforce that only 1 item is selected at a time in the treeview
+            if (this.selectedTreeviewContent.length > 0) {
+                const last = this.selectedTreeviewContent.pop()
+                this.selectedTreeviewContent = [last]
+            }
+
+            // Set the actual content id for this link
+            this.block.metadata.config.link_content_id = _.get(
+                this.selectedTreeviewContent,
+                '[0].content_id',
+                null
+            )
+
+            // Validate the other form forms
+            this.$refs[ref].validate()
+
+            // Overwrite the validation since treeview doesn't implement rules
+            if (this.block.metadata.config.link_text) {
+                this.$refs[ref].$emit('input', true)
+            } else {
+                this.$refs[ref].$emit('input', false)
+            }
+        },
+        onSetLinkedContent() {
+            this.isLinked =
+                !_.isEmpty(this.block.metadata.config.link_content_id) &&
+                !_.isEmpty(this.block.metadata.config.link_text)
+        },
+    },
+}
+</script>

package/components/Settings/TabSettings.vue

@@ -1,60 +1,69 @@
 <template>
     <div>
-        <v-btn color="primary" @click="onAddElement" class="fullWidth">
-            <v-icon>mdi-plus</v-icon>
-            {{ $t('windward.core.components.content.blocks.tab.add_tab') }}
-        </v-btn>
-        <v-expansion-panels flat v-model="block.metadata.config.tab">
-            <v-expansion-panel
-                v-for="(item, itemIndex) in block.metadata.config.items"
-                :key="itemIndex"
-                class="elevation-0"
+        <v-form ref="form" v-model="valid" v-if="!loading">
+            <v-divider class="my-4 primary"></v-divider>
+            <p>{{ $t('windward.core.components.settings.tab.tabs') }}</p>
+            <SortableExpansionPanel
+                v-model="block.metadata.config.items"
+                @click:close="onRemoveElement($event)"
+                :copy="false"
             >
-                <v-expansion-panel-header>{{
-                    'Tab ' + (itemIndex + 1)
-                }}</v-expansion-panel-header>
-                <v-expansion-panel-content :key="expansionPanelKey">
-                    <v-text-field
-                        v-model="
-                            block.metadata.config.items[itemIndex].tabHeader
-                        "
-                        :placeholder="'item ' + (itemIndex + 1)"
-                    ></v-text-field>
-                    <v-btn @click="onToggleExpand(item)" class="mb-3">
-                        <v-icon
-                            v-if="
-                                !block.metadata.config.items[itemIndex].expand
+                <template #header="{ item, index }">
+                    {{ item.tabHeader !== '' ? item.tabHeader : 'No Header' }}
+                </template>
+                <template #body="{ item, index }">
+                    <v-container :key="expansionPanelKey">
+                        <p class="p-label">
+                            {{
+                                $t(
+                                    'windward.core.components.settings.tab.header'
+                                )
+                            }}
+                        </p>
+                        <v-text-field
+                            outlined
+                            :autofocus="true"
+                            v-model="
+                                block.metadata.config.items[index].tabHeader
                             "
-                            >mdi-arrow-expand-all</v-icon
-                        >
-                        <v-icon
-                            v-if="block.metadata.config.items[itemIndex].expand"
-                        >
-                            mdi-arrow-collapse-all
-                        </v-icon>
-                    </v-btn>
-                    <br />
-                    <TextEditor
-                        :api_key="api_key"
-                        v-model="block.metadata.config.items[itemIndex].content"
-                        v-show="!block.metadata.config.items[itemIndex].expand"
-                    ></TextEditor>
-                    <br />
-                    <v-btn
-                        color="primary"
-                        @click="onRemoveElement(itemIndex)"
-                        class="fullWidth"
-                    >
-                        <v-icon>mdi-minus</v-icon>
-                        {{
-                            $t(
-                                'windward.core.components.content.blocks.tab.delete_tab'
-                            )
-                        }}
-                    </v-btn>
-                </v-expansion-panel-content>
-            </v-expansion-panel>
-        </v-expansion-panels>
+                            :placeholder="'item ' + (index + 1)"
+                        ></v-text-field>
+                        <v-btn @click="onToggleExpand(index)" class="mb-3">
+                            <v-icon
+                                v-if="
+                                    !block.metadata.config.items[index].expand
+                                "
+                                >mdi-arrow-expand-all</v-icon
+                            >
+                            <v-icon
+                                v-if="block.metadata.config.items[index].expand"
+                            >
+                                mdi-arrow-collapse-all
+                            </v-icon>
+                        </v-btn>
+                        <TextEditor
+                            :api_key="api_key"
+                            v-model="block.metadata.config.items[index].content"
+                            v-if="!item.expand"
+                        ></TextEditor>
+                    </v-container>
+                </template>
+            </SortableExpansionPanel>
+            <v-row justify="center" class="my-4">
+                <v-btn color="primary" @click="onAddElement">
+                    <v-icon>mdi-plus</v-icon>
+                    {{ $t('windward.core.components.settings.tab.add_tab') }}
+                </v-btn>
+            </v-row>
+        </v-form>
+        <div v-if="loading" class="text-center">
+            <v-progress-circular
+                :size="70"
+                :width="7"
+                color="primary"
+                indeterminate
+            ></v-progress-circular>
+        </div>
     </div>
 </template>
 
@@ -63,17 +72,20 @@ import _, { get } from 'lodash'
 import Crypto from '~/helpers/Crypto'
 import TextEditor from '~/components/Text/TextEditor.vue'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
 
 export default {
     name: 'TabSettings',
-    components: { TextEditor },
+    components: { TextEditor, SortableExpansionPanel },
     extends: BaseContentSettings,
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = ''
+            this.block.body = this.$t(
+                'windward.core.components.settings.tab.tab'
+            )
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}
@@ -93,12 +105,13 @@ export default {
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
         }
-        this.block.body = 'tab'
     },
     data() {
         return {
             expansionPanelKey: '0',
             api_key: process.env.TINY_MCE_API_KEY,
+            valid: true,
+            loading: false,
         }
     },
     mounted() {
@@ -111,7 +124,6 @@ export default {
             clearTimeout(this.debouncer)
         }
     },
-
     methods: {
         onAddElement() {
             const defaultObject = {
@@ -125,9 +137,10 @@ export default {
             this.block.metadata.config.items.splice(index, 1)
             this.expansionPanelKey = Crypto.id()
         },
-        onToggleExpand(item) {
+        onToggleExpand(index) {
             this.expansionPanelKey = Crypto.id()
-            return (item.expand = !item.expand)
+            return (this.block.metadata.config.items[index].expand =
+                !this.block.metadata.config.items[index].expand)
         },
     },
 }
@@ -136,7 +149,8 @@ export default {
 .v-progress-circular {
     margin: 1rem;
 }
-.fullWidth {
-    width: 100%;
+.p-label {
+    font-size: 16px;
+    font-weight: 500;
 }
 </style>

package/components/Settings/TextEditorSettings.vue

@@ -100,9 +100,7 @@
         <br />
         <text-editor
             v-model="block.body"
-            v-show="
-                settingSelector.includes(1) && !block.metadata.config.expand
-            "
+            v-if="settingSelector.includes(1) && !block.metadata.config.expand"
             autofill
         ></text-editor>
         <v-skeleton-loader

package/components/utils/FillInBlank/FillInBlankInput.vue

@@ -133,7 +133,10 @@ export default {
 
     computed: {
         answerIsCorrect() {
-            if (_.toLower(this.answer) === _.toLower(this.userInput)) {
+            if (
+                _.trim(_.toLower(this.answer)) ===
+                _.trim(_.toLower(this.userInput))
+            ) {
                 return true
             }
             return false

package/components/utils/TinyMCEWrapper.vue

@@ -190,7 +190,7 @@ export default {
                             contenteditable: 'true',
                             'data-feedback': btoa(
                                 this.$t(
-                                    'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.default.description'
+                                    'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.default_description'
                                 )
                             ),
                         },

package/helpers/FillInBlankHelper.ts

@@ -1,5 +1,3 @@
-import * as _ from "lodash";
-import GlossaryTerm from "~/helpers/GlossaryTerm";
 
 export default class FillInBlankHelper {
 

package/i18n/en-US/components/content/blocks/index.ts

@@ -2,18 +2,18 @@ import user_upload from './user_upload'
 import image from './image'
 import video from './video'
 import table from './table'
-import tab from './tab'
 import feedback from './feedback'
 import open_response from './open_response'
 import open_response_collate from './open_response_collate'
+import scenarioChoice from './scenario_choice'
 
 export default {
     user_upload,
     image,
     video,
     table,
-    tab,
     feedback,
     open_response,
     open_response_collate,
+    scenario_choice: scenarioChoice,
 }

package/i18n/en-US/components/content/blocks/scenario_choice.ts

@@ -0,0 +1,5 @@
+export default {
+    information: 'Click one of the items below to make a choice.',
+    try_again: 'Try again',
+    selected_choice: 'Your choice',
+}

package/i18n/en-US/components/settings/accordion.ts

@@ -0,0 +1,5 @@
+export default {
+    items: 'Accordion Items',
+    add: 'Add Accordion',
+    accordion: 'Accordion',
+}

package/i18n/en-US/components/settings/clickable_icon.ts

@@ -2,8 +2,16 @@ export default {
     title: 'Title',
     description: 'Description',
     information: 'Click on each of the list items below for more information.',
+    no_icon: 'No Icon',
     item_icon: 'Item {0} icon',
     item_title: 'Item Title',
     item_color: 'Item Color',
     item_text: 'Item Text',
+    autocolor: 'Auto-color Options',
+    display: {
+        show_title: 'Always Show Title',
+        show_background: 'Show Background',
+        round_icon: 'Round Icons',
+        italic_icon: 'Italic Icons',
+    },
 }

package/i18n/en-US/components/settings/index.ts

@@ -5,13 +5,19 @@ import video from './video'
 import clickable_icon from './clickable_icon'
 import open_response from './open_response'
 import open_response_collate from './open_response_collate'
+import scenarioChoice from './scenario_choice'
+import accordion from './accordion'
+import tab from './tab'
 
 export default {
+    accordion,
     image,
     user_upload,
     text_editor,
+    tab,
     video,
     clickable_icon,
     open_response,
     open_response_collate,
+    scenario_choice: scenarioChoice,
 }

package/i18n/en-US/components/settings/scenario_choice.ts

@@ -0,0 +1,19 @@
+export default {
+    title: 'Title',
+    description: 'Description',
+    over_item_limit: 'Cannot add more items',
+    no_title: 'No Title',
+    item_title: 'Item Title',
+    item_text: 'Item Text',
+    correct_choice: 'Is Correct Choice',
+    show_reset: 'Allow Retries',
+    display_style: 'Display Style',
+    is_linked: 'Block links to a page',
+    link_content: 'Link Content',
+    link_text: 'Link Text',
+    link_required: 'Link text and target page are required',
+    style: {
+        letter: 'Letters',
+        number: 'Numbers',
+    },
+}

package/i18n/en-US/components/settings/tab.ts

@@ -0,0 +1,7 @@
+export default {
+    tab: 'Tab',
+    tabs: 'Tabs',
+    header: 'Tab Header',
+    add_tab: 'Add Tab',
+    delete_tab: 'Delete Tab',
+}

package/i18n/en-US/components/utils/FillInBlank/FillInBlankInput.ts

@@ -5,7 +5,7 @@ export default {
     check_answer: 'Click to check answer',
     close: 'Close',
     correct: 'Correct',
-    default_description: 'default description',
+    default_description: 'Your input is correct',
     incorrect: 'Incorrect',
     input_incorrect: "'{0}' is incorrect",
     reset: 'reset',