@windward/core 0.0.7 → 0.0.9

package/components/Content/Blocks/ScenarioChoice.vue

@@ -0,0 +1,262 @@
+<template>
+    <div>
+        <v-container>
+            <h3>{{ block.metadata.config.title }}</h3>
+            <h4>{{ block.metadata.config.description }}</h4>
+            <p>
+                {{
+                    $t(
+                        'windward.core.components.content.blocks.scenario_choice.information'
+                    )
+                }}
+            </p>
+            <div
+                v-if="choiceIndex !== null && block.metadata.config.show_reset"
+                class="text-right"
+            >
+                <v-btn color="primary" outlined @click="onClickReset">
+                    {{
+                        $t(
+                            'windward.core.components.content.blocks.scenario_choice.try_again'
+                        )
+                    }}
+                </v-btn>
+            </div>
+        </v-container>
+        <v-container>
+            <v-row
+                v-for="(item, itemIndex) in block.metadata.config.items"
+                :key="itemIndex"
+                no-gutters
+                :class="rowClass(item, itemIndex)"
+            >
+                <v-col cols="2" class="text-center">
+                    <div
+                        class="pt-8 pb-8 text-icon-container mb-4 mx-auto"
+                        role="button"
+                        @click="onClickItem(itemIndex)"
+                    >
+                        <span :class="iconClass(itemIndex)">{{
+                            itemIcon(itemIndex)
+                        }}</span>
+                    </div>
+                    <strong v-if="choiceIndex === itemIndex">
+                        {{
+                            $t(
+                                'windward.core.components.content.blocks.scenario_choice.selected_choice'
+                            )
+                        }}
+                    </strong>
+                </v-col>
+                <v-col cols="10">
+                    <h4
+                        role="button"
+                        class="mt-4"
+                        @click="onClickItem(itemIndex)"
+                    >
+                        {{ item.title }}
+                    </h4>
+
+                    <v-expand-transition>
+                        <div v-if="choiceIndex !== null">
+                            <v-divider light class="my-4" />
+                            <TextViewer v-model="item.body"></TextViewer>
+                            <a
+                                v-if="linkedPage !== null"
+                                class="white--text text-decoration-underline"
+                                @click="
+                                    onClickLink(linkedPage.course_content_id)
+                                "
+                            >
+                                {{ linkedPage.text }}
+                            </a>
+                        </div>
+                    </v-expand-transition>
+                </v-col>
+            </v-row>
+        </v-container>
+    </div>
+</template>
+<script>
+import _ from 'lodash'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import TextViewer from '~/components/Text/TextViewer'
+
+export default {
+    name: 'ClickableIcons',
+    components: {
+        TextViewer,
+    },
+    extends: BaseContentBlock,
+    data() {
+        return {
+            choiceIndex: null,
+        }
+    },
+    computed: {
+        rowClass() {
+            return (item, itemIndex) => {
+                let classes = 'option-container mb-4 pa-1 black--text '
+
+                // If an option was picked set the background to correct / incorrect
+                // Otherwise do the autocolor
+                if (this.choiceIndex !== null && item.correct) {
+                    classes += 'success'
+                } else if (this.choiceIndex !== null && !item.correct) {
+                    classes += 'error'
+                } else {
+                    classes += this.itemColor(itemIndex)
+                }
+                return classes
+            }
+        },
+        iconClass() {
+            return (itemIndex) => {
+                let classes = 'text-icon '
+                // Add the appropriate color / modifiers to make the icon color
+                const color = this.itemColor(itemIndex).split(' ')
+                classes += color[0] + '--text text--' + color[1]
+
+                return classes
+            }
+        },
+        itemColor() {
+            return (itemIndex) => {
+                const colors = [
+                    'light-blue lighten-4',
+                    'light-green lighten-4',
+                    'yellow lighten-4',
+                    'orange lighten-3',
+                    'red lighten-3',
+                    'deep-purple lighten-3',
+                ]
+                let colorIndex = itemIndex
+                // If we exceed the above list of colors loop back around to the beginning
+                if (colorIndex >= colors.length) {
+                    colorIndex =
+                        colorIndex -
+                        Math.floor(colorIndex / colors.length) * colors.length
+                }
+
+                return colors[colorIndex]
+            }
+        },
+        itemIcon() {
+            return (itemIndex) => {
+                if (isNaN(itemIndex) || itemIndex < 0) {
+                    return 'ERR'
+                }
+                // Return a letter if the display style is letter (with super complicated logic)
+                // ... or return the index + 1 for number styles
+                if (this.block.metadata.config.display_style === 'letter') {
+                    if (itemIndex <= 25) {
+                        // 65 is where capitals start
+                        return String.fromCharCode(65 + itemIndex)
+                    } else {
+                        // Calculate two character AA-ZZ or a max list length of 625 which we will never hit
+                        // I'd be surprised if we ever get to AA tbh but I'm gonna support it just in case
+                        const prependIndex = Math.floor(itemIndex / 26) - 1
+
+                        return (
+                            String.fromCharCode(65 + prependIndex) +
+                            String.fromCharCode(
+                                65 + (itemIndex - 26 * (prependIndex + 1))
+                            )
+                        )
+                    }
+                } else if (
+                    this.block.metadata.config.display_style === 'number'
+                ) {
+                    return itemIndex + 1
+                }
+            }
+        },
+        linkedPage() {
+            const isLinked =
+                !_.isEmpty(this.block.metadata.config.link_content_id) &&
+                !_.isEmpty(this.block.metadata.config.link_text)
+
+            if (isLinked) {
+                const flatTree = this.$ContentService.getFlatTree()
+                // Find the course_content_id that this content id is referencing
+                const pages = flatTree.filter((c) => {
+                    return (
+                        c.content_id ===
+                        this.block.metadata.config.link_content_id
+                    )
+                })
+
+                // We found it, so return it otherwise null
+                if (pages.length > 0) {
+                    return {
+                        text: this.block.metadata.config.link_text,
+                        course_content_id: pages[0].id,
+                    }
+                } else {
+                    return null
+                }
+            } else {
+                return null
+            }
+        },
+    },
+    beforeMount() {
+        // Apply the default config
+        this.block.body = 'scenario choice'
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            this.block.metadata.config.items = []
+        }
+        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
+        }
+    },
+    methods: {
+        onClickReset() {
+            this.choiceIndex = null
+        },
+        onClickItem(itemIndex) {
+            // Only set the choice if it's null
+            if (this.choiceIndex === null) {
+                this.choiceIndex = itemIndex
+            }
+        },
+        onClickLink(id) {
+            this.$ContentService.set(id, { direct: true })
+        },
+    },
+}
+</script>
+<style scoped>
+.option-container {
+    border-radius: 1rem;
+}
+.text-icon-container {
+    background: #fff;
+    width: 5rem;
+    height: 5rem;
+    text-align: center;
+    line-height: 0;
+    margin: 1rem;
+    border-radius: 4rem;
+}
+.text-icon {
+    font-size: 4rem;
+    vertical-align: text-bottom;
+    filter: brightness(0.5);
+}
+</style>

package/components/Content/Blocks/Tab.vue

@@ -5,7 +5,7 @@
                 background-color="primary"
                 v-model="block.metadata.config.tab"
             >
-                <v-tabs-slider color="primary"></v-tabs-slider>
+                <v-tabs-slider></v-tabs-slider>
                 <v-tab
                     v-for="(tab, tabIndex) in block.metadata.config.items"
                     :key="tabIndex"
@@ -24,12 +24,7 @@
                     <v-container>
                         <TextViewer
                             v-if="!tabContent.expand"
-                            v-model="
-                                tabContent.content === '' ||
-                                tabContent.content === null
-                                    ? 'Item ' + (tabContentIndex + 1)
-                                    : tabContent.content
-                            "
+                            v-model="tabContent.content"
                             text-viewer
                         ></TextViewer>
                         <TextEditor

package/components/Settings/AccordionSettings.vue

@@ -1,77 +1,95 @@
 <template>
     <div>
-        <v-container class="pa-0">
-            <v-btn
-                color="primary"
-                outlined
-                @click="onAddElement"
-                class="fullWidth"
-                ><v-icon>mdi-plus</v-icon>{{ $t('shared.forms.add') }}</v-btn
-            >
-            <v-expansion-panels flat>
-                <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-container class="pa-0">
+                <v-divider class="my-4 primary"></v-divider>
+                <p>
+                    {{
+                        $t('windward.core.components.settings.accordion.items')
+                    }}
+                </p>
+                <SortableExpansionPanel
+                    v-model="block.metadata.config.items"
+                    @click:close="onRemoveElement($event)"
+                    @change="onDragged"
                 >
-                    <v-expansion-panel-header class="elevation-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].header
-                            "
-                            :label="'Item Title'"
-                        ></v-text-field>
-                        <v-btn
-                            @click="
-                                onToggleExpand(
-                                    block.metadata.config.items[itemIndex]
-                                )
-                            "
-                        >
-                            <v-icon
-                                v-if="
-                                    !block.metadata.config.items[itemIndex]
-                                        .expand
+                    <template #header="{ item }">{{
+                        item.header
+                            ? item.header
+                            : $t(
+                                  'plugin.games.components.settings.bucket_game.form.enter_text'
+                              )
+                    }}</template>
+                    <template #body="{ index }">
+                        <v-container :key="expansionPanelKey">
+                            <v-text-field
+                                outlined
+                                :autofocus="true"
+                                v-model="
+                                    block.metadata.config.items[index].header
                                 "
-                                >mdi-arrow-expand-all</v-icon
-                            >
-                            <v-icon
-                                v-if="
-                                    block.metadata.config.items[itemIndex]
-                                        .expand
+                                :label="
+                                    $t(
+                                        'windward.core.shared.settings.title.title'
+                                    )
+                                "
+                            ></v-text-field>
+                            <v-btn
+                                @click="
+                                    onToggleExpand(
+                                        block.metadata.config.items[index]
+                                    )
                                 "
                             >
-                                mdi-arrow-collapse-all
-                            </v-icon>
-                        </v-btn>
-                        <TextEditor
-                            :api_key="api_key"
-                            v-show="
-                                !block.metadata.config.items[itemIndex].expand
-                            "
-                            v-model="
-                                block.metadata.config.items[itemIndex].content
-                            "
-                        ></TextEditor>
-                        <br />
-                        <v-btn
-                            class="mt-2 fullWidth"
-                            color="primary"
-                            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>
-        </v-container>
+                                <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
+                                v-show="
+                                    !block.metadata.config.items[index].expand
+                                "
+                                v-model="
+                                    block.metadata.config.items[index].content
+                                "
+                            ></TextEditor>
+                        </v-container>
+                    </template>
+                </SortableExpansionPanel>
+            </v-container>
+            <v-container class="pa-0">
+                <v-row justify="center" class="my-4">
+                    <v-btn color="primary" @click="onAddElement"
+                        ><v-icon>mdi-plus</v-icon
+                        >{{
+                            $t(
+                                'windward.core.components.settings.accordion.add'
+                            )
+                        }}</v-btn
+                    >
+                </v-row>
+            </v-container>
+        </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>
 <script>
@@ -79,11 +97,13 @@ import _ from 'lodash'
 import Crypto from '~/helpers/Crypto'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
 import TextEditor from '~/components/Text/TextEditor'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
 
 export default {
     name: 'AccordionSettings',
     components: {
         TextEditor,
+        SortableExpansionPanel,
     },
     extends: BaseContentSettings,
     beforeMount() {
@@ -108,15 +128,17 @@ export default {
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
         }
-        this.block.body = 'accordion'
+        this.block.body = this.$t(
+            'windward.core.components.settings.accordion.accordion'
+        )
     },
     data() {
         return {
-            api_key: process.env.TINY_MCE_API_KEY,
             expansionPanelKey: '0',
+            valid: true,
+            loading: false,
         }
     },
-    mounted() {},
     beforeDestroy() {
         if (this.debouncer) {
             clearTimeout(this.debouncer)
@@ -140,6 +162,10 @@ export default {
             this.expansionPanelKey = Crypto.id()
             return (item.expand = !item.expand)
         },
+        onDragged() {
+            // need to remount body after dragged to update the content body on the element
+            this.expansionPanelKey = Crypto.id()
+        },
     },
 }
 </script>
@@ -147,7 +173,4 @@ export default {
 .v-progress-circular {
     margin: 1rem;
 }
-.fullWidth {
-    width: 100%;
-}
 </style>