@windward/games 0.0.1

package/components/settings/MatchingGameManager.vue

@@ -0,0 +1,775 @@
+<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.matching_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.matching_game.form.instructions'
+                    )
+                "
+            ></v-textarea>
+            <div>
+                <v-container class="background pa-0">
+                    <v-expansion-panels v-model="expansionPanel" flat>
+                        <v-expansion-panel>
+                            <v-expansion-panel-header class="pa-0">
+                                <h3>
+                                    {{
+                                        $t(
+                                            'plugin.games.components.content.blocks.matching_game.terms'
+                                        )
+                                    }}
+                                </h3>
+                            </v-expansion-panel-header>
+                            <v-expansion-panel-content>
+                                <draggable
+                                    v-model="
+                                        block.metadata.config.answerObjects
+                                    "
+                                    class="d-flex flex-column mb-6"
+                                    group="cards"
+                                    @change="onDragged"
+                                >
+                                    <v-container
+                                        v-for="(item, index) in block.metadata
+                                            .config.answerObjects"
+                                        :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.display
+                                                                ? block.metadata
+                                                                      .config
+                                                                      .answerObjects[
+                                                                      index
+                                                                  ].display
+                                                                : $t(
+                                                                      'plugin.games.components.content.blocks.matching_game.click_here'
+                                                                  )
+                                                        }}
+                                                    </span>
+                                                </p>
+                                            </v-flex>
+                                            <v-flex
+                                                xs2
+                                                class="sideBorder d-flex justify-center"
+                                                :class="bottomBorder(index)"
+                                            >
+                                                <v-icon
+                                                    @click="
+                                                        onConfirmDeleteAnswer(
+                                                            item
+                                                        )
+                                                    "
+                                                    >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.matching_game.term'
+                                                            )
+                                                        }}
+                                                    </p>
+                                                    <v-text-field
+                                                        v-if="item.expand"
+                                                        outlined
+                                                        :autofocus="true"
+                                                        v-model="
+                                                            block.metadata
+                                                                .config
+                                                                .answerObjects[
+                                                                index
+                                                            ].display
+                                                        "
+                                                    ></v-text-field>
+                                                </v-flex>
+                                                <v-flex xs12 class="pt-4">
+                                                    <p
+                                                        color="primary"
+                                                        class="labelChanges"
+                                                    >
+                                                        {{
+                                                            $t(
+                                                                'plugin.games.components.content.blocks.matching_game.prompts'
+                                                            )
+                                                        }}
+                                                    </p>
+                                                </v-flex>
+                                                <template
+                                                    v-for="(
+                                                        prompt, indexPrompt
+                                                    ) in block.metadata.config
+                                                        .prompts"
+                                                >
+                                                    <v-container
+                                                        :key="indexPrompt"
+                                                        class="pa-0 d-flex flex-wrap align-center cardOutline"
+                                                        v-if="
+                                                            onPromptAnswer(
+                                                                prompt,
+                                                                item
+                                                            )
+                                                        "
+                                                    >
+                                                        <v-flex
+                                                            xs10
+                                                            :class="
+                                                                bottomBorder(
+                                                                    indexPrompt,
+                                                                    true
+                                                                )
+                                                            "
+                                                            class="rightSideBorder"
+                                                        >
+                                                            <p
+                                                                class="text-truncate pa-0 ma-0 pTagContainer"
+                                                                @click="
+                                                                    onOpenEditor(
+                                                                        indexPrompt,
+                                                                        true
+                                                                    )
+                                                                "
+                                                                v-on:keyup.enter="
+                                                                    onOpenEditor(
+                                                                        indexPrompt,
+                                                                        true
+                                                                    )
+                                                                "
+                                                                @mouseover="
+                                                                    onHover
+                                                                "
+                                                                @mouseleave="
+                                                                    onHoverLeave
+                                                                "
+                                                                :class="cursor"
+                                                                tabindex="0"
+                                                            >
+                                                                <v-icon
+                                                                    class="pl-2"
+                                                                    >mdi-drag-vertical</v-icon
+                                                                >
+                                                                <span
+                                                                    v-if="
+                                                                        !prompt.toggle
+                                                                    "
+                                                                    class="ellipsisText"
+                                                                >
+                                                                    {{
+                                                                        prompt.prompt
+                                                                            ? block
+                                                                                  .metadata
+                                                                                  .config
+                                                                                  .prompts[
+                                                                                  indexPrompt
+                                                                              ]
+                                                                                  .prompt
+                                                                            : $t(
+                                                                                  'plugin.games.components.content.blocks.matching_game.click_here'
+                                                                              )
+                                                                    }}
+                                                                </span>
+                                                                <span
+                                                                    v-if="
+                                                                        prompt.toggle
+                                                                    "
+                                                                    class="ellipsisText"
+                                                                    >{{
+                                                                        prompt.file !==
+                                                                        null
+                                                                            ? prompt
+                                                                                  .file
+                                                                                  .name
+                                                                            : $t(
+                                                                                  'plugin.games.components.content.blocks.matching_game.image'
+                                                                              )
+                                                                    }}</span
+                                                                >
+                                                            </p>
+                                                        </v-flex>
+                                                        <v-flex
+                                                            xs2
+                                                            class="d-flex justify-center setHeight"
+                                                            :class="
+                                                                bottomBorder(
+                                                                    indexPrompt,
+                                                                    true
+                                                                )
+                                                            "
+                                                        >
+                                                            <v-icon
+                                                                @click="
+                                                                    onConfirmDelete(
+                                                                        prompt
+                                                                    )
+                                                                "
+                                                                >mdi-delete-outline</v-icon
+                                                            >
+                                                        </v-flex>
+
+                                                        <v-flex
+                                                            xs12
+                                                            v-if="prompt.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.matching_game.prompt'
+                                                                        )
+                                                                    }}
+                                                                </div>
+                                                                <div
+                                                                    class="justify-end"
+                                                                >
+                                                                    <v-btn
+                                                                        outlined
+                                                                        class="pa-0 customButton"
+                                                                        @click="
+                                                                            prompt.toggle = false
+                                                                        "
+                                                                        ><v-icon
+                                                                            >mdi-alpha-t</v-icon
+                                                                        ></v-btn
+                                                                    >
+                                                                    <v-btn
+                                                                        outlined
+                                                                        class="pa-0 customButton"
+                                                                        @click="
+                                                                            prompt.toggle = true
+                                                                        "
+                                                                        ><v-icon
+                                                                            >mdi-image-area</v-icon
+                                                                        ></v-btn
+                                                                    >
+                                                                </div>
+                                                            </v-row>
+                                                            <v-text-field
+                                                                v-if="
+                                                                    prompt.expand &&
+                                                                    !prompt.toggle
+                                                                "
+                                                                outlined
+                                                                :autofocus="
+                                                                    true
+                                                                "
+                                                                v-model="
+                                                                    block
+                                                                        .metadata
+                                                                        .config
+                                                                        .prompts[
+                                                                        indexPrompt
+                                                                    ].prompt
+                                                                "
+                                                            ></v-text-field>
+                                                            <v-container
+                                                                v-if="
+                                                                    prompt.expand &&
+                                                                    prompt.toggle
+                                                                "
+                                                                class="pa-0"
+                                                            >
+                                                                <v-text-field
+                                                                    class="pt-3 pb-3"
+                                                                    v-if="
+                                                                        prompt.toggle
+                                                                    "
+                                                                    v-model="
+                                                                        prompt.altText
+                                                                    "
+                                                                    :hide-details="
+                                                                        true
+                                                                    "
+                                                                    dense
+                                                                    outlined
+                                                                    :autofocus="
+                                                                        true
+                                                                    "
+                                                                    :label="
+                                                                        $t(
+                                                                            'plugin.games.components.content.blocks.matching_game.alt_image'
+                                                                        )
+                                                                    "
+                                                                ></v-text-field>
+                                                                <v-text-field
+                                                                    class="pt-3 pb-3"
+                                                                    v-if="
+                                                                        prompt.toggle
+                                                                    "
+                                                                    v-model="
+                                                                        prompt.ariaDescribedBy
+                                                                    "
+                                                                    :hide-details="
+                                                                        true
+                                                                    "
+                                                                    dense
+                                                                    outlined
+                                                                    :label="
+                                                                        $t(
+                                                                            'plugin.games.components.content.blocks.matching_game.aria_described'
+                                                                        )
+                                                                    "
+                                                                ></v-text-field>
+                                                                <ContentBlockAsset
+                                                                    v-if="
+                                                                        prompt.toggle
+                                                                    "
+                                                                    id="contentBlockAsset"
+                                                                    mimes="image/png,image/jpeg"
+                                                                    v-model="
+                                                                        prompt.file
+                                                                    "
+                                                                ></ContentBlockAsset>
+                                                            </v-container>
+                                                        </v-flex>
+                                                    </v-container>
+                                                </template>
+                                                <p
+                                                    @mouseover="onHover"
+                                                    @mouseleave="onHoverLeave"
+                                                    @click="onAddPrompt(index)"
+                                                    v-on:keyup.enter="
+                                                        onAddPrompt(index)
+                                                    "
+                                                    class="fullWidth"
+                                                    :class="cursor"
+                                                    tabindex="0"
+                                                >
+                                                    <v-icon
+                                                        class="primary addIcon"
+                                                        >mdi-plus</v-icon
+                                                    >
+                                                    {{
+                                                        $t(
+                                                            'plugin.games.components.content.blocks.matching_game.add_prompt'
+                                                        )
+                                                    }}
+                                                </p>
+                                            </v-container>
+                                        </v-layout>
+                                    </v-container>
+                                </draggable>
+                                <br />
+                                <p
+                                    @mouseover="onHover"
+                                    @mouseleave="onHoverLeave"
+                                    @click="onAddAnswer"
+                                    v-on:keyup.enter="onAddAnswer"
+                                    class="fullWidth"
+                                    :class="cursor"
+                                    tabindex="0"
+                                >
+                                    <v-icon class="primary addIcon"
+                                        >mdi-plus</v-icon
+                                    >
+                                    {{
+                                        $t(
+                                            'plugin.games.components.content.blocks.matching_game.add_answer'
+                                        )
+                                    }}
+                                </p>
+                                <br />
+                            </v-expansion-panel-content>
+                        </v-expansion-panel>
+                    </v-expansion-panels>
+                </v-container>
+            </div>
+            <v-textarea
+                class="mt-2"
+                outlined
+                auto-grow
+                v-model="block.metadata.config.feedback_correct"
+                :counter="255"
+                :label="
+                    $t(
+                        'plugin.games.components.settings.matching_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.matching_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 BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import draggable from 'vuedraggable'
+import _ from 'lodash'
+export default {
+    name: 'MatchingGameManager',
+    extends: BaseContentSettings,
+    components: { draggable },
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = 'Matching Game'
+        }
+        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.prompts)) {
+            this.block.metadata.config.prompts = []
+        }
+        if (_.isEmpty(this.block.metadata.config.answerObjects)) {
+            this.block.metadata.config.answerObjects = []
+            this.onAddAnswer
+        }
+    },
+    beforeDestroy() {
+        if (this.debouncer) {
+            clearTimeout(this.debouncer)
+        }
+    },
+    data() {
+        return {
+            valid: true,
+            loading: false,
+            default_item: {
+                id: 0,
+                display: '',
+                expand: true,
+            },
+            cursor: '',
+            openPanel: '',
+            expansionPanel: false,
+        }
+    },
+    watch: {
+        expansionPanel(val) {
+            if (val == undefined) {
+                this.closeAllExpandedAreas()
+            }
+        },
+    },
+    mounted() {
+        if (this.block.metadata.config.answerObjects.length === 0) {
+            this.onAddAnswer()
+        }
+        if (this.block.metadata.config.prompts.length === 0) {
+            this.onAddPrompt()
+        }
+        this.closeAllExpandedAreas()
+    },
+    methods: {
+        closeAllExpandedAreas() {
+            this.block.metadata.config.prompts.forEach((element) => {
+                element.expand = false
+            })
+            this.block.metadata.config.answerObjects.forEach((element) => {
+                element.expand = false
+            })
+        },
+        onPromptAnswer(prompt, answer) {
+            if (answer.id == prompt.answer.id) {
+                return true
+            } else {
+                return false
+            }
+        },
+        onAddPrompt(index = 0) {
+            this.block.metadata.config.prompts.forEach((element) => {
+                element.expand = false
+            })
+            let default_prompt = {
+                id: 0,
+                toggle: false,
+                prompt: '',
+                file: null,
+                altText: '',
+                ariaDescribedBy: '',
+                answer: this.block.metadata.config.answerObjects[index],
+                expand: true,
+            }
+            default_prompt.id = this.block.metadata.config.prompts.length + 1
+            this.block.metadata.config.prompts.push(default_prompt)
+        },
+        onAddAnswer() {
+            this.block.metadata.config.answerObjects.forEach((element) => {
+                element.expand = false
+            })
+            const addObj = _.cloneDeep(this.default_item)
+            addObj.id = this.block.metadata.config.answerObjects.length + 1
+            this.openPanel = this.block.metadata.config.answerObjects.length
+            this.block.metadata.config.answerObjects.push(addObj)
+        },
+        onConfirmDelete(item) {
+            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) => {
+                            const deleteIndex =
+                                this.block.metadata.config.prompts.indexOf(item)
+                            this.block.metadata.config.prompts.splice(
+                                deleteIndex,
+                                1
+                            )
+                            toastObject.goAway(0)
+                        },
+                    },
+                ],
+            })
+        },
+        onConfirmDeleteAnswer(item) {
+            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) => {
+                            const deleteIndex =
+                                this.block.metadata.config.answerObjects.indexOf(
+                                    item
+                                )
+                            this.block.metadata.config.answerObjects.splice(
+                                deleteIndex,
+                                1
+                            )
+                            this.block.metadata.config.prompts =
+                                this.block.metadata.config.prompts.filter(
+                                    (element) => {
+                                        if (element.answer.id !== item.id) {
+                                            return element
+                                        }
+                                    }
+                                )
+                            let startId = 1
+                            this.block.metadata.config.answerObjects.forEach(
+                                (element) => {
+                                    element.id = startId
+                                    startId = startId + 1
+                                }
+                            )
+                            toastObject.goAway(0)
+                        },
+                    },
+                ],
+            })
+        },
+        onHover(index) {
+            this.cursor = 'changePointer'
+        },
+        onHoverLeave() {
+            this.cursor = ''
+        },
+        onOpenEditor(index, prompt = null) {
+            if (prompt === null) {
+                this.block.metadata.config.answerObjects[index].expand =
+                    !this.block.metadata.config.answerObjects[index].expand
+                this.block.metadata.config.answerObjects.forEach((element) => {
+                    let getIndex =
+                        this.block.metadata.config.answerObjects.indexOf(
+                            element
+                        )
+                    if (index !== getIndex) {
+                        element.expand = false
+                    }
+                })
+            } else {
+                this.block.metadata.config.prompts[index].expand =
+                    !this.block.metadata.config.prompts[index].expand
+                this.block.metadata.config.prompts.forEach((element) => {
+                    let getIndex =
+                        this.block.metadata.config.prompts.indexOf(element)
+                    if (index !== getIndex) {
+                        element.expand = false
+                    }
+                })
+            }
+        },
+        onDragged() {
+            let counter = 1
+            this.block.metadata.config.answerObjects.forEach((element) => {
+                element.id = counter
+                counter = counter + 1
+            })
+        },
+        bottomBorder(index, prompt = null) {
+            if (prompt === null) {
+                if (
+                    this.block.metadata.config.answerObjects[index].expand ===
+                    true
+                ) {
+                    return 'bottomBorder'
+                } else {
+                    return null
+                }
+            } else {
+                if (this.block.metadata.config.prompts[index].expand === true) {
+                    return 'bottomBorder'
+                } else {
+                    return null
+                }
+            }
+        },
+    },
+}
+</script>
+
+<style scoped>
+.v-progress-circular {
+    margin: 1rem;
+}
+.fullWidth {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    font-size: 16px;
+}
+#contentBlockAsset {
+    max-width: 251px;
+}
+.customButton {
+    min-width: 34px !important;
+}
+.changePointer {
+    cursor: pointer !important;
+}
+.addIcon {
+    margin-right: 5px;
+}
+.v-expansion-panel-content >>> .v-expansion-panel-content__wrap {
+    padding: 0 !important;
+}
+.pTagContainer {
+    height: 45px;
+    display: flex;
+    align-items: center;
+}
+.ellipsisText {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.itemHeight {
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+}
+.bottomBorder {
+    border-bottom: 2px solid var(--v-primary-base);
+}
+.setHeight {
+    height: 47px;
+}
+.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;
+}
+</style>