@windward/games 0.0.9 → 0.0.10

package/components/settings/BucketGameSettingsManager.vue

@@ -15,9 +15,9 @@
                     ref="title"
                 ></v-text-field>
                 <v-textarea
+                    v-model="block.metadata.config.instructions"
                     outlined
                     auto-grow
-                    v-model="block.metadata.config.instructions"
                     :counter="255"
                     :label="
                         $t(
@@ -35,257 +35,166 @@
                         )
                     }}
                 </p>
-                <draggable
+                <SortableExpansionPanel
                     v-model="block.metadata.config.bucket_titles"
-                    group="containers"
+                    @change="onDragged"
+                    @click:close="onConfirmDeleteBucket($event)"
+                    :copy="false"
                 >
-                    <v-container
-                        v-for="(item, index) in block.metadata.config
-                            .bucket_titles"
-                        :key="'bucket_' + index"
-                        class="container-card-outline"
-                        elevation="0"
-                        outlined
-                        tile
-                    >
-                        <v-layout row wrap outlined>
-                            <v-flex xs10 :class="bottomBorder(index)">
-                                <p
-                                    class="text-truncate mb-0 p-header"
-                                    @click="onOpenEditor(index)"
-                                    v-on:keyup.enter="onOpenEditor(index)"
-                                    @mouseover="onHover"
-                                    @mouseleave="onHoverLeave"
-                                    :class="cursor"
-                                    tabindex="0"
-                                >
-                                    <v-icon>mdi-drag-vertical</v-icon>
-                                    <span class="span-text-ellipsis">
-                                        {{
-                                            item.title
-                                                ? block.metadata.config
-                                                      .bucket_titles[index]
-                                                      .title
-                                                : $t(
-                                                      'plugin.games.components.settings.bucket_game.form.click_here'
-                                                  )
-                                        }}
-                                    </span>
+                    <template #header="{ item }">
+                        {{
+                            item.title
+                                ? item.title
+                                : $t(
+                                      'plugin.games.components.settings.bucket_game.form.enter_text'
+                                  )
+                        }}
+                    </template>
+                    <template #body="{ index }">
+                        <v-container>
+                            <v-flex xs12>
+                                <p class="p-label">
+                                    {{
+                                        $t(
+                                            'plugin.games.components.content.blocks.bucket_game.name'
+                                        )
+                                    }}
                                 </p>
+                                <v-text-field
+                                    v-model="
+                                        block.metadata.config.bucket_titles[
+                                            index
+                                        ].title
+                                    "
+                                    outlined
+                                    :autofocus="true"
+                                ></v-text-field>
                             </v-flex>
-                            <v-flex
-                                xs2
-                                class="btn-header-delete d-flex justify-center"
-                                :class="bottomBorder(index)"
-                            >
-                                <v-icon
-                                    @click="onConfirmDeleteBucket(index)"
-                                    class="btn-delete-icon"
-                                    >mdi-delete-outline</v-icon
-                                >
-                            </v-flex>
-                            <v-container v-if="item.expand">
-                                <v-flex xs12>
-                                    <p class="p-label">
-                                        {{
-                                            $t(
-                                                'plugin.games.components.content.blocks.bucket_game.name'
-                                            )
-                                        }}
-                                    </p>
-                                    <v-text-field
-                                        outlined
-                                        :autofocus="true"
-                                        v-model="
-                                            block.metadata.config.bucket_titles[
-                                                index
-                                            ].title
-                                        "
-                                    ></v-text-field>
-                                </v-flex>
-                                <v-flex xs12>
-                                    <p class="p-label">
-                                        {{
-                                            $t(
-                                                'plugin.games.components.settings.bucket_game.form.color'
-                                            )
-                                        }}
-                                    </p>
-                                    <v-color-picker
-                                        v-model="item.color"
-                                        hide-canvas
-                                        hide-inputs
-                                        hide-sliders
-                                        show-swatches
-                                        :swatches="swatches"
-                                        swatches-max-height="130"
-                                    ></v-color-picker>
-                                </v-flex>
-                                <v-flex xs12>
-                                    <p class="p-label">
-                                        {{
-                                            $t(
-                                                'plugin.games.components.content.blocks.bucket_game.answers'
-                                            )
-                                        }}
-                                    </p>
-                                </v-flex>
-                                <template>
-                                    <v-container
-                                        v-for="(bucket, indexBucket) in block
-                                            .metadata.config.bucket_answers[
+                            <v-flex xs12>
+                                <p class="p-label">
+                                    {{
+                                        $t(
+                                            'plugin.games.components.settings.bucket_game.form.color'
+                                        )
+                                    }}
+                                </p>
+                                <v-color-picker
+                                    v-model="
+                                        block.metadata.config.bucket_titles[
                                             index
-                                        ]"
-                                        :key="indexBucket"
-                                        class="container-card-outline"
-                                    >
-                                        <v-layout row wrap outlined>
-                                            <v-flex
-                                                xs10
-                                                :class="
-                                                    bottomBorder(
-                                                        indexBucket,
-                                                        true,
-                                                        index
+                                        ].color
+                                    "
+                                    hide-canvas
+                                    hide-inputs
+                                    hide-sliders
+                                    show-swatches
+                                    :swatches="swatches"
+                                    swatches-max-height="130"
+                                ></v-color-picker>
+                            </v-flex>
+                            <v-flex xs12>
+                                <p class="p-label">
+                                    {{
+                                        $t(
+                                            'plugin.games.components.content.blocks.bucket_game.answers'
+                                        )
+                                    }}
+                                </p>
+                            </v-flex>
+                        </v-container>
+                        <v-container
+                            v-if="
+                                block.metadata.config.bucket_answers.length > 0
+                            "
+                        >
+                            <SortableExpansionPanel
+                                v-model="
+                                    block.metadata.config.bucket_answers[index]
+                                "
+                                @click:close="onConfirmDelete($event, index)"
+                                :copy="false"
+                            >
+                                <template #header="{ item }">
+                                    {{
+                                        item.display
+                                            ? item.display
+                                            : $t(
+                                                  'plugin.games.components.settings.bucket_game.form.enter_text'
+                                              )
+                                    }}
+                                </template>
+                                <template #body="{ index: answerIndex }">
+                                    <v-container>
+                                        <v-flex xs12>
+                                            <p class="p-label mb-0">
+                                                {{
+                                                    $t(
+                                                        'plugin.games.components.content.blocks.bucket_game.form.answer'
+                                                    )
+                                                }}
+                                            </p>
+                                            <v-text-field
+                                                v-model="
+                                                    block.metadata.config
+                                                        .bucket_answers[index][
+                                                        answerIndex
+                                                    ].display
+                                                "
+                                                outlined
+                                                :autofocus="true"
+                                            ></v-text-field>
+                                            <p class="p-label mb-0">
+                                                {{
+                                                    $t(
+                                                        'plugin.games.components.content.blocks.bucket_game.form.value'
                                                     )
+                                                }}
+                                            </p>
+                                            <v-text-field
+                                                v-model="
+                                                    block.metadata.config
+                                                        .bucket_answers[index][
+                                                        answerIndex
+                                                    ].display_value
                                                 "
-                                            >
-                                                <p
-                                                    class="text-truncate pa-0 ma-0 p-header"
-                                                    @click="
-                                                        onOpenEditor(
-                                                            index,
-                                                            indexBucket
-                                                        )
-                                                    "
-                                                    v-on:keyup.enter="
-                                                        onOpenEditor(
-                                                            index,
-                                                            indexBucket
-                                                        )
-                                                    "
-                                                    @mouseover="onHover"
-                                                    @mouseleave="onHoverLeave"
-                                                    :class="cursor"
-                                                    tabindex="0"
-                                                >
-                                                    <v-icon class="pl-2"
-                                                        >mdi-drag-vertical</v-icon
-                                                    >
-                                                    <span
-                                                        class="span-text-ellipsis"
-                                                    >
-                                                        {{
-                                                            bucket.display
-                                                                ? bucket.display
-                                                                : $t(
-                                                                      'plugin.games.components.settings.bucket_game.form.click_here'
-                                                                  )
-                                                        }}
-                                                    </span>
-                                                </p>
-                                            </v-flex>
-                                            <v-flex
-                                                xs2
-                                                class="d-flex justify-center btn-header-delete"
-                                                :class="
-                                                    bottomBorder(
-                                                        indexBucket,
-                                                        true,
-                                                        index
+                                                outlined
+                                            ></v-text-field>
+                                            <p class="p-label mb-0">
+                                                {{
+                                                    $t(
+                                                        'plugin.games.components.content.blocks.bucket_game.form.feedback.feedback'
                                                     )
+                                                }}
+                                            </p>
+                                            <v-text-field
+                                                v-model="
+                                                    block.metadata.config
+                                                        .bucket_answers[index][
+                                                        answerIndex
+                                                    ].feedback
                                                 "
-                                            >
-                                                <v-icon
-                                                    @click="
-                                                        onConfirmDelete(
-                                                            indexBucket,
-                                                            index
-                                                        )
-                                                    "
-                                                    class="btn-delete-icon"
-                                                    >mdi-delete-outline</v-icon
-                                                >
-                                            </v-flex>
-                                            <v-container v-if="bucket.expand">
-                                                <v-flex xs12>
-                                                    <p class="p-label">
-                                                        {{
-                                                            $t(
-                                                                'plugin.games.components.content.blocks.bucket_game.form.answer'
-                                                            )
-                                                        }}
-                                                    </p>
-                                                    <v-text-field
-                                                        outlined
-                                                        :autofocus="true"
-                                                        v-model="
-                                                            block.metadata
-                                                                .config
-                                                                .bucket_answers[
-                                                                index
-                                                            ][indexBucket]
-                                                                .display
-                                                        "
-                                                    ></v-text-field>
-                                                    <p class="p-label">
-                                                        {{
-                                                            $t(
-                                                                'plugin.games.components.content.blocks.bucket_game.form.value'
-                                                            )
-                                                        }}
-                                                    </p>
-                                                    <v-text-field
-                                                        outlined
-                                                        v-model="
-                                                            block.metadata
-                                                                .config
-                                                                .bucket_answers[
-                                                                index
-                                                            ][indexBucket]
-                                                                .display_value
-                                                        "
-                                                    ></v-text-field>
-                                                    <p class="p-label">
-                                                        {{
-                                                            $t(
-                                                                'plugin.games.components.content.blocks.bucket_game.form.feedback.feedback'
-                                                            )
-                                                        }}
-                                                    </p>
-                                                    <v-text-field
-                                                        outlined
-                                                        v-model="
-                                                            block.metadata
-                                                                .config
-                                                                .bucket_answers[
-                                                                index
-                                                            ][indexBucket]
-                                                                .feedback
-                                                        "
-                                                    ></v-text-field>
-                                                </v-flex>
-                                            </v-container>
-                                        </v-layout>
+                                                outlined
+                                            ></v-text-field>
+                                        </v-flex>
                                     </v-container>
                                 </template>
-                                <v-row justify="center" class="my-4">
-                                    <v-btn
-                                        color="primary"
-                                        @click="onAddBucketAnswer(index)"
-                                    >
-                                        <v-icon>mdi-plus</v-icon>
-                                        {{
-                                            $t(
-                                                'plugin.games.components.settings.bucket_game.form.add_answer'
-                                            )
-                                        }}
-                                    </v-btn>
-                                </v-row>
-                            </v-container>
-                        </v-layout>
-                    </v-container>
-                </draggable>
+                            </SortableExpansionPanel>
+                        </v-container>
+                        <v-row justify="center" class="my-4">
+                            <v-btn
+                                color="primary"
+                                @click="onAddBucketAnswer(index)"
+                            >
+                                <v-icon>mdi-plus</v-icon>
+                                {{
+                                    $t(
+                                        'plugin.games.components.settings.bucket_game.form.add_answer'
+                                    )
+                                }}
+                            </v-btn>
+                        </v-row>
+                    </template>
+                </SortableExpansionPanel>
             </v-container>
             <v-container class="pa-0">
                 <v-row justify="center" class="my-4">
@@ -299,10 +208,10 @@
                     </v-btn>
                 </v-row>
                 <v-textarea
+                    v-model="block.metadata.config.feedback_correct"
                     class="pt-4"
                     outlined
                     auto-grow
-                    v-model="block.metadata.config.feedback_correct"
                     :counter="255"
                     :label="
                         $t(
@@ -311,9 +220,9 @@
                     "
                 ></v-textarea>
                 <v-textarea
+                    v-model="block.metadata.config.feedback_incorrect"
                     outlined
                     auto-grow
-                    v-model="block.metadata.config.feedback_incorrect"
                     :counter="255"
                     :label="
                         $t(
@@ -343,7 +252,7 @@ import {
 } from '@windward/core/utils'
 import colors from 'vuetify/lib/util/colors'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
-import draggable from 'vuedraggable'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
 
 export default {
     name: 'BucketGameSettingsManager',
@@ -352,7 +261,7 @@ export default {
         MathExpressionEditor,
         MathLiveWrapper,
         ContentViewer,
-        draggable,
+        SortableExpansionPanel,
     },
     beforeMount() {
         if (_.isEmpty(this.block)) {
@@ -398,9 +307,7 @@ export default {
     data() {
         return {
             valid: true,
-            dialog: false,
             loading: false,
-            cursor: '',
             panel: 0,
             swatches: [
                 [colors.grey.lighten1, colors.blueGrey.lighten5],
@@ -412,13 +319,33 @@ export default {
         }
     },
     methods: {
+        onDragged(panels, oldPanelOrder) {
+            const oldAnswerArray = _.cloneDeep(
+                this.block.metadata.config.bucket_answers
+            )
+            let answerArray = _.cloneDeep(
+                this.block.metadata.config.bucket_answers
+            )
+            panels.forEach(function (newPanel, index) {
+                oldPanelOrder.forEach(function (oldPanel, oldIndex) {
+                    if (
+                        newPanel.title == oldPanel.title &&
+                        newPanel.color == oldPanel.color
+                    ) {
+                        // update the answer array to have the new order so it stays with its parent prompt
+                        answerArray[index] = oldAnswerArray[oldIndex]
+                    }
+                })
+            })
+            this.block.metadata.config.bucket_answers = answerArray
+        },
         onAddBucket() {
             this.block.metadata.config.bucket_titles.forEach((element) => {
                 element.expand = false
             })
             let emptyString = {
                 title: '',
-                color: '',
+                color: colors.grey.lighten1,
                 expand: true,
             }
             this.block.metadata.config.bucket_titles.push(emptyString)
@@ -451,74 +378,6 @@ export default {
                 answerObject
             )
         },
-        onHover(index) {
-            this.cursor = 'change-pointer'
-        },
-        onHoverLeave() {
-            this.cursor = ''
-        },
-        bottomBorder(index, bucketAnswer = null, mainIndex = null) {
-            if (bucketAnswer !== null) {
-                if (
-                    this.block.metadata.config.bucket_answers[mainIndex][index]
-                        .expand === true
-                ) {
-                    return 'container-header-border'
-                } else {
-                    return null
-                }
-            } else {
-                if (
-                    this.block.metadata.config.bucket_titles[index].expand ===
-                    true
-                ) {
-                    return 'container-header-border'
-                } else {
-                    return null
-                }
-            }
-        },
-        onOpenEditor(bucketIndex, answerIndex = null) {
-            if (answerIndex !== null) {
-                this.block.metadata.config.bucket_answers[bucketIndex][
-                    answerIndex
-                ].expand =
-                    !this.block.metadata.config.bucket_answers[bucketIndex][
-                        answerIndex
-                    ].expand
-                this.block.metadata.config.bucket_answers[bucketIndex].forEach(
-                    (element) => {
-                        let getIndex =
-                            this.block.metadata.config.bucket_answers[
-                                bucketIndex
-                            ].indexOf(element)
-                        if (answerIndex !== getIndex) {
-                            element.expand = false
-                        }
-                    }
-                )
-            } else {
-                this.block.metadata.config.bucket_titles[bucketIndex].expand =
-                    !this.block.metadata.config.bucket_titles[bucketIndex]
-                        .expand
-                if (this.block.metadata.config.bucket_answers[bucketIndex]) {
-                    this.block.metadata.config.bucket_answers[
-                        bucketIndex
-                    ].forEach((element) => {
-                        element.expand = false
-                    })
-                }
-                this.block.metadata.config.bucket_titles.forEach((element) => {
-                    let getIndex =
-                        this.block.metadata.config.bucket_titles.indexOf(
-                            element
-                        )
-                    if (bucketIndex !== getIndex) {
-                        element.expand = false
-                    }
-                })
-            }
-        },
         onConfirmDeleteBucket(index) {
             this.$toast.info(this.$t('shared.forms.confirm_delete_subject'), {
                 icon: 'mdi-help',
@@ -577,44 +436,11 @@ export default {
 </script>
 
 <style scoped>
-.btn-delete-icon {
-    color: var(--v-primary-base);
-}
-.btn-header-delete {
-    border-left: 1px solid var(--v-primary-base);
-}
-.btn-header-delete:hover {
-    background-color: rgb(243, 243, 243);
-}
-.p-header {
-    height: 45px;
-    display: flex;
-    align-items: center;
-}
-.p-header:hover {
-    background-color: rgb(243, 243, 243);
-}
 .p-label {
     font-size: 16px;
     font-weight: 500;
 }
-.container-header-border {
-    border-bottom: 1px solid var(--v-primary-base);
-}
-.container-card-outline {
-    border: solid 1px var(--v-primary-base);
-    border-radius: 3px !important;
-    margin-bottom: 8px;
-}
-.span-text-ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
 .v-progress-circular {
     margin: 1rem;
 }
-.change-pointer {
-    cursor: pointer !important;
-}
 </style>