@windward/games 0.0.1

package/components/settings/BucketGameSettingsManager.vue

@@ -0,0 +1,683 @@
+<template>
+    <div>
+        <br />
+        <v-form ref="form" v-model="valid" v-if="!loading">
+            <v-text-field
+                v-model="block.metadata.config.title"
+                :counter="50"
+                :label="
+                    $t(
+                        'plugin.games.components.settings.bucket_game.form.title'
+                    )
+                "
+                ref="title"
+            ></v-text-field>
+            <br />
+            <v-textarea
+                outlined
+                auto-grow
+                v-model="block.metadata.config.instructions"
+                :counter="255"
+                :label="
+                    $t(
+                        'plugin.games.components.settings.bucket_game.form.instructions'
+                    )
+                "
+            ></v-textarea>
+            <br />
+            <v-container class="background pa-0">
+                <v-expansion-panels flat>
+                    <v-expansion-panel>
+                        <v-expansion-panel-header class="pa-0">
+                            <h3>
+                                {{
+                                    $t(
+                                        'plugin.games.components.settings.bucket_game.form.buckets'
+                                    )
+                                }}
+                            </h3>
+                        </v-expansion-panel-header>
+                        <v-expansion-panel-content>
+                            <v-container
+                                v-for="(item, index) in block.metadata.config
+                                    .bucket_titles"
+                                :key="'bucket_' + index"
+                                fluid
+                                grid-list
+                                class="cardOutline"
+                                elevation="0"
+                                outlined
+                                tile
+                            >
+                                <v-layout row wrap outlined>
+                                    <v-flex xs10 :class="bottomBorder(index)">
+                                        <p
+                                            class="text-truncate pa-0 ma-0 pTagContainer"
+                                            @click="onOpenEditor(index)"
+                                            v-on:keyup.enter="
+                                                onOpenEditor(index)
+                                            "
+                                            @mouseover="onHover"
+                                            @mouseleave="onHoverLeave"
+                                            :class="cursor"
+                                            tabindex="0"
+                                        >
+                                            <v-icon class="pl-2"
+                                                >mdi-drag-vertical</v-icon
+                                            >
+                                            <span class="ellipsisText">
+                                                {{
+                                                    item.title
+                                                        ? block.metadata.config
+                                                              .bucket_titles[
+                                                              index
+                                                          ].title
+                                                        : $t(
+                                                              'plugin.games.components.settings.bucket_game.form.click_here'
+                                                          )
+                                                }}
+                                            </span>
+                                        </p>
+                                    </v-flex>
+                                    <v-flex
+                                        xs2
+                                        class="sideBorder d-flex justify-center"
+                                        :class="bottomBorder(index)"
+                                    >
+                                        <v-icon
+                                            @click="
+                                                onConfirmDeleteBucket(index)
+                                            "
+                                            >mdi-delete-outline</v-icon
+                                        >
+                                    </v-flex>
+                                    <v-container v-if="item.expand">
+                                        <v-flex xs12 class="pt-4">
+                                            <p
+                                                color="primary"
+                                                class="labelChanges"
+                                            >
+                                                {{
+                                                    $t(
+                                                        'plugin.games.components.content.blocks.bucket_game.name'
+                                                    )
+                                                }}
+                                            </p>
+                                            <v-text-field
+                                                v-if="item.expand"
+                                                outlined
+                                                :autofocus="true"
+                                                v-model="
+                                                    block.metadata.config
+                                                        .bucket_titles[index]
+                                                        .title
+                                                "
+                                            ></v-text-field>
+                                        </v-flex>
+                                        <v-flex xs12 class="pt-4">
+                                            <p
+                                                color="primary"
+                                                class="labelChanges"
+                                            >
+                                                {{
+                                                    $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 class="pt-4">
+                                            <p
+                                                color="primary"
+                                                class="labelChanges"
+                                            >
+                                                {{
+                                                    $t(
+                                                        'plugin.games.components.content.blocks.bucket_game.answers'
+                                                    )
+                                                }}
+                                            </p>
+                                        </v-flex>
+                                        <template
+                                            v-for="(
+                                                bucket, indexBucket
+                                            ) in block.metadata.config
+                                                .bucket_answers[index]"
+                                        >
+                                            <v-container
+                                                :key="indexBucket"
+                                                class="pa-0 d-flex flex-wrap align-center cardOutline"
+                                            >
+                                                <v-flex
+                                                    xs10
+                                                    :class="
+                                                        bottomBorder(
+                                                            indexBucket,
+                                                            true,
+                                                            index
+                                                        )
+                                                    "
+                                                    class="rightSideBorder"
+                                                >
+                                                    <p
+                                                        class="text-truncate pa-0 ma-0 pTagContainer"
+                                                        @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="ellipsisText"
+                                                        >
+                                                            {{
+                                                                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 setHeight"
+                                                    :class="
+                                                        bottomBorder(
+                                                            indexBucket,
+                                                            true,
+                                                            index
+                                                        )
+                                                    "
+                                                >
+                                                    <v-icon
+                                                        @click="
+                                                            onConfirmDelete(
+                                                                indexBucket,
+                                                                index
+                                                            )
+                                                        "
+                                                        >mdi-delete-outline</v-icon
+                                                    >
+                                                </v-flex>
+                                                <v-flex
+                                                    xs12
+                                                    v-if="bucket.expand"
+                                                    class="pa-4"
+                                                >
+                                                    <v-row
+                                                        class="ma-1 d-flex align-center justify-space-between"
+                                                    >
+                                                        <div
+                                                            color="primary mb-0"
+                                                            class="labelChanges d-flex align-center"
+                                                        >
+                                                            {{
+                                                                $t(
+                                                                    'plugin.games.components.content.blocks.bucket_game.form.answer'
+                                                                )
+                                                            }}
+                                                        </div>
+                                                    </v-row>
+                                                    <v-text-field
+                                                        outlined
+                                                        :autofocus="true"
+                                                        v-model="
+                                                            block.metadata
+                                                                .config
+                                                                .bucket_answers[
+                                                                index
+                                                            ][indexBucket]
+                                                                .display
+                                                        "
+                                                    ></v-text-field>
+                                                    <v-row
+                                                        class="ma-1 d-flex align-center justify-space-between"
+                                                    >
+                                                        <div
+                                                            color="primary mb-0"
+                                                            class="labelChanges d-flex align-center"
+                                                        >
+                                                            {{
+                                                                $t(
+                                                                    'plugin.games.components.content.blocks.bucket_game.form.value'
+                                                                )
+                                                            }}
+                                                        </div>
+                                                    </v-row>
+                                                    <v-text-field
+                                                        outlined
+                                                        v-model="
+                                                            block.metadata
+                                                                .config
+                                                                .bucket_answers[
+                                                                index
+                                                            ][indexBucket]
+                                                                .display_value
+                                                        "
+                                                    ></v-text-field>
+                                                    <v-row
+                                                        class="ma-1 d-flex align-center justify-space-between"
+                                                    >
+                                                        <div
+                                                            color="primary mb-0"
+                                                            class="labelChanges d-flex align-center"
+                                                        >
+                                                            {{
+                                                                $t(
+                                                                    'plugin.games.components.content.blocks.bucket_game.form.feedback.feedback'
+                                                                )
+                                                            }}
+                                                        </div>
+                                                    </v-row>
+                                                    <v-text-field
+                                                        outlined
+                                                        v-model="
+                                                            block.metadata
+                                                                .config
+                                                                .bucket_answers[
+                                                                index
+                                                            ][indexBucket]
+                                                                .feedback
+                                                        "
+                                                    ></v-text-field>
+                                                </v-flex>
+                                            </v-container>
+                                        </template>
+                                        <p
+                                            @mouseover="onHover"
+                                            @mouseleave="onHoverLeave"
+                                            @click="onAddBucketAnswer(index)"
+                                            v-on:keyup.enter="
+                                                onAddBucketAnswer(index)
+                                            "
+                                            class="fullWidth"
+                                            :class="cursor"
+                                            tabindex="0"
+                                        >
+                                            <v-icon class="primary mr-2"
+                                                >mdi-plus</v-icon
+                                            >
+                                            {{
+                                                $t(
+                                                    'plugin.games.components.settings.bucket_game.form.add_answer'
+                                                )
+                                            }}
+                                        </p>
+                                    </v-container>
+                                </v-layout>
+                            </v-container>
+                            <p
+                                @mouseover="onHover"
+                                @mouseleave="onHoverLeave"
+                                @click="onAddBucket"
+                                v-on:keyup.enter="onAddBucket"
+                                class="fullWidth"
+                                :class="cursor"
+                                tabindex="0"
+                            >
+                                <v-icon class="primary mr-2">mdi-plus</v-icon>
+                                {{
+                                    $t(
+                                        'plugin.games.components.settings.bucket_game.form.add_bucket'
+                                    )
+                                }}
+                            </p>
+                            <br />
+                        </v-expansion-panel-content>
+                    </v-expansion-panel>
+                </v-expansion-panels>
+            </v-container>
+            <v-textarea
+                class="pt-4"
+                outlined
+                auto-grow
+                v-model="block.metadata.config.feedback_correct"
+                :counter="255"
+                :label="
+                    $t(
+                        'plugin.games.components.settings.bucket_game.form.feedback.correct'
+                    )
+                "
+            ></v-textarea>
+            <v-textarea
+                outlined
+                auto-grow
+                v-model="block.metadata.config.feedback_incorrect"
+                :counter="255"
+                :label="
+                    $t(
+                        'plugin.games.components.settings.bucket_game.form.feedback.incorrect'
+                    )
+                "
+            ></v-textarea>
+        </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>
+import _ from 'lodash'
+import {
+    MathExpressionEditor,
+    MathLiveWrapper,
+    ContentViewer,
+} from '@windward/core/utils'
+import colors from 'vuetify/lib/util/colors'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+export default {
+    name: 'BucketGameSettingsManager',
+    extends: BaseContentSettings,
+    components: {
+        MathExpressionEditor,
+        MathLiveWrapper,
+        ContentViewer,
+    },
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        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.instructions)) {
+            this.block.metadata.config.instructions = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
+            this.block.metadata.config.feedback_correct = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
+            this.block.metadata.config.feedback_incorrect = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.bucket_titles)) {
+            this.block.metadata.config.bucket_titles = []
+            this.onAddBucket()
+        }
+        if (_.isEmpty(this.block.metadata.config.bucket_answers)) {
+            this.block.metadata.config.bucket_answers = []
+        }
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = this.$t(
+                'plugin.games.components.content.blocks.bucket_game.game_title'
+            )
+        }
+    },
+    data() {
+        return {
+            valid: true,
+            dialog: false,
+            loading: false,
+            cursor: '',
+            swatches: [
+                [colors.grey.lighten1, colors.blueGrey.lighten5],
+                [colors.brown.lighten3, colors.red.lighten3],
+                [colors.orange.lighten3, colors.yellow.lighten4],
+                [colors.lightGreen.lighten4, colors.teal.lighten4],
+                [colors.lightBlue.lighten4, colors.deepPurple.lighten3],
+            ],
+        }
+    },
+    methods: {
+        onAddBucket() {
+            this.block.metadata.config.bucket_titles.forEach((element) => {
+                element.expand = false
+            })
+            let emptyString = {
+                title: '',
+                color: '',
+                expand: true,
+            }
+            this.block.metadata.config.bucket_titles.push(emptyString)
+        },
+        onAddBucketAnswer(mainBucketIndex) {
+            if (
+                this.block.metadata.config.bucket_answers[mainBucketIndex] ===
+                undefined
+            ) {
+                this.block.metadata.config.bucket_answers.push([])
+            } else if (
+                this.block.metadata.config.bucket_answers[mainBucketIndex]
+                    .length > 0
+            ) {
+                this.block.metadata.config.bucket_answers[
+                    mainBucketIndex
+                ].forEach((element) => {
+                    element.expand = false
+                })
+            }
+            const answerObject = {
+                bucket_index: mainBucketIndex,
+                display: '',
+                display_value: '',
+                feedback: '',
+                expand: true,
+                id: this.block.metadata.config.bucket_answers.length + 1,
+            }
+            this.block.metadata.config.bucket_answers[mainBucketIndex].push(
+                answerObject
+            )
+        },
+        onHover(index) {
+            this.cursor = 'changePointer'
+        },
+        onHoverLeave() {
+            this.cursor = ''
+        },
+        bottomBorder(index, bucketAnswer = null, mainIndex = null) {
+            if (bucketAnswer !== null) {
+                if (
+                    this.block.metadata.config.bucket_answers[mainIndex][index]
+                        .expand === true
+                ) {
+                    return 'bottomBorder'
+                } else {
+                    return null
+                }
+            } else {
+                if (
+                    this.block.metadata.config.bucket_titles[index].expand ===
+                    true
+                ) {
+                    return 'bottomBorder'
+                } 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',
+                duration: null,
+                action: [
+                    {
+                        text: this.$t('shared.forms.cancel'),
+                        onClick: (e, toastObject) => {
+                            toastObject.goAway(0)
+                        },
+                    },
+                    {
+                        text: this.$t('shared.forms.confirm'),
+                        // router navigation
+                        onClick: (e, toastObject) => {
+                            this.block.metadata.config.bucket_titles.splice(
+                                index,
+                                1
+                            )
+                            this.block.metadata.config.bucket_answers.splice(
+                                index,
+                                1
+                            )
+                            toastObject.goAway(0)
+                        },
+                    },
+                ],
+            })
+        },
+        onConfirmDelete(answerIndex, bucketIndex) {
+            this.$toast.info(this.$t('shared.forms.confirm_delete_text'), {
+                icon: 'mdi-help',
+                duration: null,
+                action: [
+                    {
+                        text: this.$t('shared.forms.cancel'),
+                        onClick: (e, toastObject) => {
+                            toastObject.goAway(0)
+                        },
+                    },
+                    {
+                        text: this.$t('shared.forms.confirm'),
+                        // router navigation
+                        onClick: (e, toastObject) => {
+                            this.block.metadata.config.bucket_answers[
+                                bucketIndex
+                            ].splice(answerIndex, 1)
+                            toastObject.goAway(0)
+                        },
+                    },
+                ],
+            })
+        },
+    },
+}
+</script>
+
+<style scoped>
+.v-progress-circular {
+    margin: 1rem;
+}
+.changePointer {
+    cursor: pointer !important;
+}
+.v-expansion-panel-content >>> .v-expansion-panel-content__wrap {
+    padding: 0 !important;
+}
+.pTagContainer {
+    height: 45px;
+    display: flex;
+    align-items: center;
+}
+#contentBlockAsset {
+    max-width: 251px;
+}
+.customButton {
+    min-width: 34px !important;
+}
+.itemHeight {
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+}
+.bottomBorder {
+    border-bottom: 2px solid var(--v-primary-base);
+}
+.setHeight {
+    height: 47px;
+}
+.fullWidth {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    font-size: 16px;
+}
+.cardOutline {
+    border: solid 2px var(--v-primary-base);
+    border-radius: 3px !important;
+    margin-bottom: 8px;
+}
+.sideBorder {
+    border-left: 2px solid var(--v-primary-base);
+}
+.rightSideBorder {
+    border-right: 2px solid var(--v-primary-base);
+}
+.labelChanges {
+    font-size: 16px;
+    font-weight: 500;
+}
+.ellipsisText {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>