@windward/core 0.0.8 → 0.1.0

package/components/Settings/ClickableIconsSettings.vue

@@ -4,6 +4,7 @@
             <v-col class="pa-0">
                 <v-text-field
                     v-model="block.metadata.config.title"
+                    id="title"
                     :label="
                         $t(
                             'windward.core.components.settings.clickable_icon.title'
@@ -12,49 +13,91 @@
                 ></v-text-field>
                 <v-text-field
                     v-model="block.metadata.config.description"
+                    id="description"
                     :label="
                         $t(
                             'windward.core.components.settings.clickable_icon.description'
                         )
                     "
                 ></v-text-field>
-                <v-btn
-                    color="primary"
-                    outlined
-                    @click="onAddElement"
-                    class="btn-add"
+                <v-switch
+                    v-model="block.metadata.config.display.show_title"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.clickable_icon.display.show_title'
+                        )
+                    "
+                ></v-switch>
+                <v-switch
+                    v-model="block.metadata.config.display.show_background"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.clickable_icon.display.show_background'
+                        )
+                    "
+                ></v-switch>
+                <v-switch
+                    v-model="block.metadata.config.display.round_icon"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.clickable_icon.display.round_icon'
+                        )
+                    "
+                ></v-switch>
+                <v-switch
+                    v-model="block.metadata.config.display.italic_icon"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.clickable_icon.display.italic_icon'
+                        )
+                    "
+                ></v-switch>
+                <v-switch
+                    v-model="block.metadata.config.display.autocolor"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.clickable_icon.autocolor'
+                        )
+                    "
+                ></v-switch>
+                <v-btn color="primary" outlined block @click="onAddElement"
                     ><v-icon>mdi-plus</v-icon
                     >{{ $t('shared.forms.add') }}</v-btn
                 >
             </v-col>
-            <v-expansion-panels flat>
-                <v-expansion-panel
-                    v-for="(item, itemIndex) in block.metadata.config.items"
-                    :key="itemIndex"
-                    class="elevation-0"
+            <v-col>
+                <SortableExpansionPanel
+                    v-model="block.metadata.config.items"
+                    @click:close="onRemoveElement"
                 >
-                    <v-expansion-panel-header class="elevation-0 pa-0">{{
-                        'item ' + (itemIndex + 1)
-                    }}</v-expansion-panel-header>
-                    <v-expansion-panel-content
-                        class="elevation-0"
-                        :key="expansionPanelKey"
-                    >
-                        <v-text-field
-                            v-model="
-                                block.metadata.config.items[itemIndex].icon
-                            "
+                    <template #header="{ item }">
+                        <v-icon v-if="item.icon && isIcon(item.icon)">{{
+                            item.icon
+                        }}</v-icon>
+                        <span v-else-if="item.icon && !isIcon(item.icon)">{{
+                            item.icon
+                        }}</span>
+                        <span v-else class="font-italic">
+                            {{
+                                $t(
+                                    'windward.core.components.settings.clickable_icon.no_icon'
+                                )
+                            }}
+                        </span>
+                    </template>
+                    <template #body="{ index }">
+                        <TextIconPicker
+                            v-model="block.metadata.config.items[index].icon"
                             :label="
                                 $t(
                                     'windward.core.components.settings.clickable_icon.item_icon',
-                                    [itemIndex + 1]
+                                    [index + 1]
                                 )
                             "
-                        ></v-text-field>
+                        ></TextIconPicker>
                         <v-text-field
-                            v-model="
-                                block.metadata.config.items[itemIndex].title
-                            "
+                            v-model="block.metadata.config.items[index].title"
+                            :id="'item-' + index + '-title'"
                             :label="
                                 $t(
                                     'windward.core.components.settings.clickable_icon.item_title'
@@ -63,9 +106,8 @@
                         ></v-text-field>
 
                         <ColorPicker
-                            v-model="
-                                block.metadata.config.items[itemIndex].color
-                            "
+                            v-if="!block.metadata.config.display.autocolor"
+                            v-model="block.metadata.config.items[index].color"
                             :label="
                                 $t(
                                     'windward.core.components.settings.clickable_icon.item_color'
@@ -79,40 +121,36 @@
                             )
                         }}</span>
                         <TextEditor
-                            :api_key="api_key"
-                            v-model="
-                                block.metadata.config.items[itemIndex].body
-                            "
+                            v-model="block.metadata.config.items[index].body"
+                            :height="200"
                         ></TextEditor>
-                        <v-divider class="mt-3 mb-3" />
-                        <v-btn
-                            class="mt-2"
-                            color="primary"
-                            block
-                            outlined
-                            @click="onRemoveElement(itemIndex)"
-                            ><v-icon>mdi-delete-outline</v-icon
-                            >{{ $t('shared.forms.delete') }}</v-btn
-                        >
-                    </v-expansion-panel-content>
-                </v-expansion-panel>
-            </v-expansion-panels>
+                    </template>
+                </SortableExpansionPanel>
+            </v-col>
         </v-container>
     </div>
 </template>
 <script>
 import _ from 'lodash'
-import Crypto from '~/helpers/Crypto'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
 import TextEditor from '~/components/Text/TextEditor'
+import TextIconPicker from '~/components/TextIconPicker.vue'
 import ColorPicker from '~/components/ColorPicker.vue'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
+
 export default {
     name: 'ClickableIconsSettings',
     components: {
+        SortableExpansionPanel,
         TextEditor,
+        TextIconPicker,
         ColorPicker,
     },
     extends: BaseContentSettings,
+
+    data() {
+        return {}
+    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -129,66 +167,43 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (_.isEmpty(this.block.metadata.config.display)) {
+            this.block.metadata.config.display = {
+                show_title: false,
+                show_background: false,
+                round_icon: false,
+                italic_icon: false,
+                autocolor: true,
+            }
+        }
         if (_.isEmpty(this.block.metadata.config.items)) {
             this.block.metadata.config.items = []
         }
     },
-    data() {
-        return {
-            valid: true,
-            debounce: null,
-            loading: false,
-            api_key: process.env.TINY_MCE_API_KEY,
-            title: '',
-            description: '',
-            items: [
-                {
-                    icon: '',
-                    title: '',
-                    body: '',
-                    active: false,
-                },
-            ],
-            expansionPanelKey: '0',
-        }
-    },
     mounted() {
         if (this.block.metadata.config.items.length <= 0) {
             this.onAddElement()
         }
     },
-    beforeDestroy() {
-        if (this.debouncer) {
-            clearTimeout(this.debouncer)
-        }
-    },
-
     methods: {
-        async onBeforeSave() {
-            this.block.metadata.config.items = this.items
-        },
         onAddElement() {
             const defaultObject = {
                 icon: '',
                 title: '',
-                body: '',
-                color: {},
+                body: '<p></p>',
+                color: {
+                    class: '',
+                },
                 active: false,
             }
             this.block.metadata.config.items.push(defaultObject)
         },
         onRemoveElement(index) {
             this.block.metadata.config.items.splice(index, 1)
-            this.expansionPanelKey = Crypto.id()
+        },
+        isIcon(str) {
+            return str && _.isString(str) && str.indexOf('mdi-') === 0
         },
     },
 }
 </script>
-<style scoped>
-.v-progress-circular {
-    margin: 1rem;
-}
-.btn-add {
-    width: 100%;
-}
-</style>

package/components/Settings/OpenResponseSettings.vue

@@ -1,34 +1,32 @@
 <template>
     <v-container>
         <v-form>
-            <h3 class="pb-2">
+            <p>
                 {{
                     $t(
                         'windward.core.components.settings.open_response.question'
                     )
                 }}
-            </h3>
+            </p>
             <TextEditor v-model="block.body" :height="200"></TextEditor>
-
-            <h3 class="pb-2">
+            <p class="pt-4">
                 {{
                     $t(
                         'windward.core.components.settings.open_response.sample_response'
                     )
                 }}
-            </h3>
+            </p>
             <TextEditor
                 v-model="block.metadata.config.sample_response"
                 :height="200"
             ></TextEditor>
-
-            <h3 class="pb-2">
+            <p class="pt-4">
                 {{
                     $t(
                         'windward.core.components.settings.open_response.starting_text'
                     )
                 }}
-            </h3>
+            </p>
             <TextEditor
                 v-model="block.metadata.config.starting_text"
                 :height="200"

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>