@windward/games 0.0.9 → 0.1.0

package/components/settings/FlashCardSlidesManager.vue

@@ -1,398 +1,315 @@
 <template>
     <div>
-        <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"
-            :label="
-                $t(
-                    'plugin.games.components.settings.bucket_game.form.instructions'
-                )
-            "
-        ></v-textarea>
-        <br />
-        <v-expansion-panels flat>
-            <v-expansion-panel>
-                <v-expansion-panel-header class="pa-0"
-                    ><h3>Sortable Flashcards</h3></v-expansion-panel-header
+        <v-form ref="outer-form" v-model="valid" v-if="!loading">
+            <v-container class="pa-0">
+                <v-text-field
+                    v-model="block.metadata.config.title"
+                    outlined
+                    :counter="50"
+                    :label="
+                        $t(
+                            'windward.games.components.settings.bucket_game.form.title'
+                        )
+                    "
+                    ref="title"
+                ></v-text-field>
+                <v-textarea
+                    outlined
+                    auto-grow
+                    v-model="block.metadata.config.instructions"
+                    :label="
+                        $t(
+                            'windward.games.components.settings.bucket_game.form.instructions'
+                        )
+                    "
+                ></v-textarea>
+            </v-container>
+            <v-divider class="my-4 primary"></v-divider>
+            <v-container class="pa-0">
+                <p>
+                    {{
+                        $t(
+                            'windward.games.components.content.blocks.flashcard.items'
+                        )
+                    }}
+                </p>
+                <SortableExpansionPanel
+                    v-model="block.metadata.config.cards"
+                    @click:close="onDelete($event)"
+                    v-bind:currentPanel.sync="
+                        block.metadata.config.currentSlide
+                    "
                 >
-                <v-expansion-panel-content class="ma-0">
-                    <v-container class="pa-0">
-                        <draggable
-                            v-model="block.metadata.config.cards"
-                            class="d-flex flex-column mb-6"
-                            group="cards"
-                        >
-                            <v-card
-                                v-for="(item, index) in block.metadata.config
-                                    .cards"
-                                :key="'card_' + index"
-                                class="pa-2 flex-fill cursorGrab"
-                                elevation="0"
-                                outlined
-                                tile
-                            >
-                                <v-row class="pa-3">
-                                    <div
-                                        class="text-truncate pa-0 ma-0"
-                                        @click="onOpenEditor(index)"
-                                        v-on:keyup.enter="onOpenEditor(index)"
-                                        @mouseover="onHover"
-                                        @mouseleave="onHoverLeave"
-                                        :class="cursor"
-                                        tabindex="0"
-                                    >
-                                        <v-icon class="pl-2"
-                                            >mdi-gesture-tap-hold
-                                        </v-icon>
-                                        {{
-                                            item.title
-                                                ? block.metadata.config.cards[
-                                                      index
-                                                  ].title
-                                                : $t(
-                                                      'plugin.games.components.settings.flashcard.form.card'
-                                                  ) +
-                                                  ' ' +
-                                                  (index + 1)
-                                        }}
-                                    </div>
-                                    <v-spacer />
-                                    <v-icon
-                                        class="float-right"
-                                        @click="onDelete(index, $event)"
-                                    >
-                                        mdi-delete-outline
-                                    </v-icon>
-                                </v-row>
+                    <template #header="{ item, index }">
+                        {{
+                            stripHtml(
+                                block.metadata.config.cards[index].front.text
+                            )
+                        }}
+                    </template>
+                    <template #body="{ item, index }">
+                        <v-container>
+                            <v-row
+                                class="d-flex justify-space-around pt-8"
+                                align="center"
+                                justify="center"
+                                ><v-btn
+                                    @click="flipCardFront(index)"
+                                    color="primary"
+                                    :outlined="
+                                        !block.metadata.config.cards[index].side
+                                    "
+                                    >{{
+                                        $t(
+                                            'windward.games.components.settings.flashcard.form.front'
+                                        )
+                                    }}</v-btn
+                                >
+                                {{
+                                    $t(
+                                        'windward.games.components.settings.flashcard.form.card'
+                                    ) +
+                                    ' ' +
+                                    (index + 1) +
+                                    ' ' +
+                                    (block.metadata.config.cards[index].side
+                                        ? $t(
+                                              'windward.games.components.settings.flashcard.form.front'
+                                          )
+                                        : $t(
+                                              'windward.games.components.settings.flashcard.form.back'
+                                          ))
+                                }}<v-btn
+                                    @click="flipCardBack(index)"
+                                    color="primary"
+                                    :outlined="
+                                        block.metadata.config.cards[index].side
+                                    "
+                                >
+                                    {{
+                                        $t(
+                                            'windward.games.components.settings.flashcard.form.back'
+                                        )
+                                    }}</v-btn
+                                ></v-row
+                            ><br />
+                            <v-form ref="form">
+                                <br />
 
-                                <div
+                                <v-text-field
                                     v-if="
-                                        block.metadata.config.cards[index]
-                                            .expand
+                                        !block.metadata.config.cards[index].side
+                                    "
+                                    outlined
+                                    auto-grow
+                                    v-model="
+                                        block.metadata.config.cards[index].back
+                                            .header
+                                    "
+                                    :counter="255"
+                                    :label="
+                                        $t(
+                                            'windward.games.components.settings.flashcard.form.header'
+                                        )
+                                    "
+                                    required
+                                />
+                                <v-card
+                                    elevation="0"
+                                    v-show="
+                                        block.metadata.config.cards[index].side
                                     "
                                 >
-                                    <br />
-                                    <hr />
-
-                                    <v-row
-                                        class="d-flex justify-space-around pt-8"
-                                        align="center"
-                                        justify="center"
-                                        ><v-btn
-                                            @click="flipCardFront(index)"
-                                            color="primary"
-                                            :outlined="
-                                                !block.metadata.config.cards[
-                                                    index
-                                                ].side
-                                            "
-                                            >{{
-                                                $t(
-                                                    'plugin.games.components.settings.flashcard.form.front'
-                                                )
-                                            }}</v-btn
-                                        >
+                                    <v-card-title>
+                                        {{
+                                            $t(
+                                                'windward.games.components.settings.flashcard.form.card_content'
+                                            )
+                                        }}
+                                    </v-card-title>
+                                    <textEditor
+                                        outlined
+                                        auto-grow
+                                        menubar="edit"
+                                        toolbar="undo redo | italic underline strikethrough removeformat | mathButton"
+                                        v-model="
+                                            block.metadata.config.cards[index]
+                                                .front.text
+                                        "
+                                        :label="
+                                            $t(
+                                                'windward.games.components.settings.flashcard.form.text'
+                                            )
+                                        "
+                                        required
+                                    />
+                                </v-card>
+                                <v-card
+                                    outlined
+                                    v-show="
+                                        !block.metadata.config.cards[index].side
+                                    "
+                                >
+                                    <v-card-text>
                                         {{
                                             $t(
-                                                'plugin.games.components.settings.flashcard.form.card'
-                                            ) +
-                                            ' ' +
-                                            (index + 1) +
-                                            ' ' +
-                                            (block.metadata.config.cards[index]
+                                                'windward.games.components.settings.flashcard.form.card_content'
+                                            )
+                                        }}
+                                    </v-card-text>
+                                    <textEditor
+                                        outlined
+                                        auto-grow
+                                        menubar="edit"
+                                        toolbar="undo redo | italic underline strikethrough removeformat | mathButton"
+                                        v-model="
+                                            block.metadata.config.cards[index]
+                                                .back.text
+                                        "
+                                        label="Text"
+                                        required
+                                    />
+                                </v-card>
+                                <br />
+                                <ContentBlockAsset
+                                    v-show="
+                                        block.metadata.config.cards[index].side
+                                    "
+                                    v-model="
+                                        block.metadata.config.cards[index].front
+                                            .img
+                                    "
+                                    mimes="image/png,image/jpeg"
+                                    @click:file="onImageSelect"
+                                >
+                                    <template #title>
+                                        {{
+                                            $t(
+                                                'windward.games.components.settings.flashcard.form.image.title'
+                                            )
+                                        }}
+                                    </template>
+                                    <template #description>
+                                        {{
+                                            $t(
+                                                'windward.games.components.settings.flashcard.form.image.configure_blurb'
+                                            )
+                                        }}
+                                    </template>
+                                </ContentBlockAsset>
+                                <ContentBlockAsset
+                                    v-show="
+                                        !block.metadata.config.cards[index].side
+                                    "
+                                    v-model="
+                                        block.metadata.config.cards[index].back
+                                            .img
+                                    "
+                                    mimes="image/png,image/jpeg"
+                                    @click:file="onImageSelect"
+                                >
+                                    <template #title>
+                                        {{
+                                            $t(
+                                                'windward.games.components.settings.flashcard.form.image.title'
+                                            )
+                                        }}
+                                    </template>
+                                    <template #description>
+                                        {{
+                                            $t(
+                                                'windward.games.components.settings.flashcard.form.image.configure_blurb'
+                                            )
+                                        }}
+                                    </template>
+                                </ContentBlockAsset>
+                                <br />
+                                <v-textarea
+                                    auto-grow
+                                    v-show="
+                                        block.metadata.config.cards[index].side
+                                    "
+                                    outlined
+                                    v-model="
+                                        block.metadata.config.cards[index].front
+                                            .altText
+                                    "
+                                    label="Alt Text"
+                                    required
+                                ></v-textarea>
+                                <v-textarea
+                                    auto-grow
+                                    v-show="
+                                        !block.metadata.config.cards[index].side
+                                    "
+                                    outlined
+                                    v-model="
+                                        block.metadata.config.cards[index].back
+                                            .altText
+                                    "
+                                    label="Alt Text"
+                                    required
+                                ></v-textarea>
+                                <v-row
+                                    class="d-flex justify-space-around pt-8"
+                                    align="center"
+                                    justify="center"
+                                    ><v-btn
+                                        @click="flipCardFront(index)"
+                                        color="primary"
+                                        :outlined="
+                                            !block.metadata.config.cards[index]
                                                 .side
-                                                ? $t(
-                                                      'plugin.games.components.settings.flashcard.form.front'
-                                                  )
-                                                : $t(
-                                                      'plugin.games.components.settings.flashcard.form.back'
-                                                  ))
-                                        }}<v-btn
-                                            @click="flipCardBack(index)"
-                                            color="primary"
-                                            :outlined="
-                                                block.metadata.config.cards[
-                                                    index
-                                                ].side
-                                            "
-                                        >
-                                            {{
-                                                $t(
-                                                    'plugin.games.components.settings.flashcard.form.back'
-                                                )
-                                            }}</v-btn
-                                        ></v-row
-                                    ><br />
-                                    <v-form ref="form">
-                                        <v-text-field
-                                            v-model="
-                                                block.metadata.config.cards[
-                                                    index
-                                                ].title
-                                            "
-                                            :label="
-                                                $t(
-                                                    'plugin.games.components.settings.flashcard.form.label'
-                                                )
-                                            "
-                                        ></v-text-field>
-                                        <br />
-                                        <v-textarea
-                                            v-if="
-                                                block.metadata.config.cards[
-                                                    index
-                                                ].side
-                                            "
-                                            outlined
-                                            auto-grow
-                                            v-model="
-                                                block.metadata.config.cards[
-                                                    index
-                                                ].front.header
-                                            "
-                                            :label="
-                                                $t(
-                                                    'plugin.games.components.settings.flashcard.form.header'
-                                                )
-                                            "
-                                        />
-                                        <v-textarea
-                                            v-if="
-                                                !block.metadata.config.cards[
-                                                    index
-                                                ].side
-                                            "
-                                            outlined
-                                            auto-grow
-                                            v-model="
-                                                block.metadata.config.cards[
-                                                    index
-                                                ].back.header
-                                            "
-                                            :counter="255"
-                                            :label="
-                                                $t(
-                                                    'plugin.games.components.settings.flashcard.form.header'
-                                                )
-                                            "
-                                            required
-                                        />
-                                        <v-card
-                                            outlined
-                                            v-show="
-                                                block.metadata.config.cards[
-                                                    index
-                                                ].side
-                                            "
-                                        >
-                                            <v-card-text>
-                                                {{
-                                                    $t(
-                                                        'plugin.games.components.settings.flashcard.form.card_content'
-                                                    )
-                                                }}
-                                            </v-card-text>
-                                            <textEditor
-                                                outlined
-                                                auto-grow
-                                                v-model="
-                                                    block.metadata.config.cards[
-                                                        index
-                                                    ].front.text
-                                                "
-                                                :label="
-                                                    $t(
-                                                        'plugin.games.components.settings.flashcard.form.text'
-                                                    )
-                                                "
-                                                required
-                                            />
-                                        </v-card>
-                                        <v-card
-                                            outlined
-                                            v-show="
-                                                !block.metadata.config.cards[
-                                                    index
-                                                ].side
-                                            "
-                                        >
-                                            <v-card-text>
-                                                {{
-                                                    $t(
-                                                        'plugin.games.components.settings.flashcard.form.card_content'
-                                                    )
-                                                }}
-                                            </v-card-text>
-                                            <textEditor
-                                                outlined
-                                                auto-grow
-                                                v-model="
-                                                    block.metadata.config.cards[
-                                                        index
-                                                    ].back.text
-                                                "
-                                                label="Text"
-                                                required
-                                            />
-                                        </v-card>
-                                        <br />
-                                        <ContentBlockAsset
-                                            v-show="
-                                                block.metadata.config.cards[
-                                                    index
-                                                ].side
-                                            "
-                                            v-model="
-                                                block.metadata.config.cards[
-                                                    index
-                                                ].front.img
-                                            "
-                                            mimes="image/png,image/jpeg"
-                                            @click:file="onImageSelect"
-                                        >
-                                            <template #title>
-                                                {{
-                                                    $t(
-                                                        'plugin.games.components.settings.flashcard.form.image.title'
-                                                    )
-                                                }}
-                                            </template>
-                                            <template #description>
-                                                {{
-                                                    $t(
-                                                        'plugin.games.components.settings.flashcard.form.image.configure_blurb'
-                                                    )
-                                                }}
-                                            </template>
-                                        </ContentBlockAsset>
-                                        <ContentBlockAsset
-                                            v-show="
-                                                !block.metadata.config.cards[
-                                                    index
-                                                ].side
-                                            "
-                                            v-model="
-                                                block.metadata.config.cards[
-                                                    index
-                                                ].back.img
-                                            "
-                                            mimes="image/png,image/jpeg"
-                                            @click:file="onImageSelect"
-                                        >
-                                            <template #title>
-                                                {{
-                                                    $t(
-                                                        'plugin.games.components.settings.flashcard.form.image.title'
-                                                    )
-                                                }}
-                                            </template>
-                                            <template #description>
-                                                {{
-                                                    $t(
-                                                        'plugin.games.components.settings.flashcard.form.image.configure_blurb'
-                                                    )
-                                                }}
-                                            </template>
-                                        </ContentBlockAsset>
-                                        <br />
-                                        <v-textarea
-                                            auto-grow
-                                            v-show="
-                                                block.metadata.config.cards[
-                                                    index
-                                                ].side
-                                            "
-                                            outlined
-                                            v-model="
-                                                block.metadata.config.cards[
-                                                    index
-                                                ].front.altText
-                                            "
-                                            label="Alt Text"
-                                            required
-                                        ></v-textarea>
-                                        <v-textarea
-                                            auto-grow
-                                            v-show="
-                                                !block.metadata.config.cards[
-                                                    index
-                                                ].side
-                                            "
-                                            outlined
-                                            v-model="
-                                                block.metadata.config.cards[
-                                                    index
-                                                ].back.altText
-                                            "
-                                            label="Alt Text"
-                                            required
-                                        ></v-textarea>
-                                        <v-row
-                                            class="d-flex justify-space-around pt-8"
-                                            align="center"
-                                            justify="center"
-                                            ><v-btn
-                                                @click="flipCardFront(index)"
-                                                color="primary"
-                                                :outlined="
-                                                    !block.metadata.config
-                                                        .cards[index].side
-                                                "
-                                                >{{
-                                                    $t(
-                                                        'plugin.games.components.settings.flashcard.form.front'
-                                                    )
-                                                }}</v-btn
-                                            >
+                                        "
+                                        >{{
+                                            $t(
+                                                'windward.games.components.settings.flashcard.form.front'
+                                            )
+                                        }}</v-btn
+                                    >
 
-                                            <v-btn
-                                                @click="flipCardBack(index)"
-                                                color="primary"
-                                                :outlined="
-                                                    block.metadata.config.cards[
-                                                        index
-                                                    ].side
-                                                "
-                                            >
-                                                {{
-                                                    $t(
-                                                        'plugin.games.components.settings.flashcard.form.back'
-                                                    )
-                                                }}</v-btn
-                                            ></v-row
-                                        >
-                                        <br />
-                                    </v-form>
-                                </div>
-                            </v-card>
-                        </draggable>
-                        <p
-                            @click="onAddCard"
-                            v-on:keyup.enter="onAddCard"
-                            class="fullWidth"
-                            tabindex="0"
-                        >
-                            <v-icon class="primary addIcon">mdi-plus</v-icon>
-                            {{
-                                $t(
-                                    'plugin.games.components.settings.flashcard.form.add_card'
-                                )
-                            }}
-                        </p>
-                    </v-container>
-                </v-expansion-panel-content>
-            </v-expansion-panel>
-        </v-expansion-panels>
+                                    <v-btn
+                                        @click="flipCardBack(index)"
+                                        color="primary"
+                                        :outlined="
+                                            block.metadata.config.cards[index]
+                                                .side
+                                        "
+                                    >
+                                        {{
+                                            $t(
+                                                'windward.games.components.settings.flashcard.form.back'
+                                            )
+                                        }}</v-btn
+                                    ></v-row
+                                >
+                                <br />
+                            </v-form>
+                        </v-container>
+                    </template>
+                </SortableExpansionPanel>
+            </v-container>
+            <v-container class="pa-0">
+                <v-row justify="center" class="my-4">
+                    <v-btn color="primary" @click="onAddCard">
+                        <v-icon>mdi-plus</v-icon>
+                        {{
+                            $t(
+                                'windward.games.components.settings.flashcard.form.add_card'
+                            )
+                        }}
+                    </v-btn>
+                </v-row>
+            </v-container>
+        </v-form>
+        <div v-if="loading" class="text-center">
+            <v-progress-circular
+                :size="70"
+                :width="7"
+                color="primary"
+                indeterminate
+            ></v-progress-circular>
+        </div>
     </div>
 </template>
 
@@ -406,7 +323,7 @@ import {
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
 import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
 import TextEditor from '~/components/Text/TextEditor.vue'
-import draggable from 'vuedraggable'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
 
 export default {
     name: 'FlashCardSlidesManager',
@@ -416,12 +333,13 @@ export default {
         MathLiveWrapper,
         ContentViewer,
         ContentBlockAsset,
-        draggable,
         TextEditor,
+        SortableExpansionPanel,
     },
     data() {
         return {
-            cursor: null,
+            loading: false,
+            valid: true,
         }
     },
     beforeMount() {
@@ -431,6 +349,14 @@ export default {
         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 = this.$t(
+                'windward.games.components.content.blocks.flashcard.title'
+            )
+        }
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
             this.block.metadata.config.currentSlide = 0
@@ -444,15 +370,17 @@ export default {
             return {
                 front: {
                     img: {},
-                    header: 'front header',
-                    text: 'front text',
-                    imgAltText: 'alt',
+                    header: '',
+                    text: '',
+                    imgAltText: '',
                 },
                 back: {
                     img: {},
-                    header: 'back header ',
-                    text: 'back text ',
-                    imgAltText: 'back alt ',
+                    header: this.$t(
+                        'windward.games.components.settings.flashcard.form.header'
+                    ),
+                    text: '',
+                    imgAltText: '',
                 },
                 expand: false,
                 title: '',
@@ -487,18 +415,6 @@ export default {
                 ],
             })
         },
-        onOpenEditor(index) {
-            this.block.metadata.config.currentSlide = index
-            this.block.metadata.config.cards[index].expand =
-                !this.block.metadata.config.cards[index].expand
-            this.block.metadata.config.cards.forEach(
-                (element, element_index) => {
-                    if (index !== element_index) {
-                        element.expand = false
-                    }
-                }
-            )
-        },
         onImageSelect(img) {
             let currentSlide = this.block.metadata.config.currentSlide
             this.block.metadata.config.cards[currentSlide].img = img
@@ -510,21 +426,9 @@ export default {
         flipCardBack(index) {
             this.block.metadata.config.cards[index].side = false
         },
-        onHover(index) {
-            this.cursor = 'changePointer'
-        },
-        onHoverLeave() {
-            this.cursor = ''
+        stripHtml(htmlString) {
+            return htmlString.replace(/(<([^>]+)>)/gi, '')
         },
     },
 }
 </script>
-
-<style scoped>
-.changePointer {
-    cursor: pointer !important;
-}
-.cursorGrab {
-    cursor: grab;
-}
-</style>