@windward/games 0.0.9 → 0.1.0

package/components/settings/CrosswordPuzzleSettingsManager.vue

@@ -1,149 +1,132 @@
 <template>
     <div>
-        <v-form ref="form" v-model="valid">
-            <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>
-            <v-expansion-panels flat>
-                <v-expansion-panel>
-                    <v-expansion-panel-header class="pa-0"
-                        ><h3>
-                            {{
-                                $t(
-                                    'plugin.games.components.settings.crossword.crossword_items'
-                                )
-                            }}
-                        </h3></v-expansion-panel-header
-                    >
-                    <v-expansion-panel-content class="ma-0">
-                        <v-container class="pa-0">
-                            <p>
+        <v-form ref="form" v-model="valid" v-if="!loading">
+            <v-container class="pa-0">
+                <v-text-field
+                    v-model="block.metadata.config.title"
+                    :counter="50"
+                    outlined
+                    :autofocus="true"
+                    :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"
+                    :counter="255"
+                    :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 class="mb-0">
+                    {{
+                        $t(
+                            'windward.games.components.settings.crossword.crossword_items'
+                        )
+                    }}
+                </p>
+                <p class="p-label-crosswords">
+                    {{
+                        $t(
+                            'windward.games.components.settings.crossword.min_length'
+                        )
+                    }}
+                </p>
+                <SortableExpansionPanel
+                    v-model="block.metadata.config.words"
+                    @click:close="onDelete($event)"
+                >
+                    <template #header="{ item, index }">
+                        {{
+                            item.word !== ''
+                                ? item.word
+                                : $t(
+                                      'windward.games.components.settings.bucket_game.form.enter_text'
+                                  )
+                        }}
+                    </template>
+                    <template #body="{ item, index }">
+                        <v-container>
+                            <p class="p-label mb-0">
                                 {{
                                     $t(
-                                        'plugin.games.components.settings.crossword.min_length'
+                                        'windward.games.components.settings.crossword.word'
                                     )
                                 }}
                             </p>
-                            <v-card
-                                v-for="(item, index) in block.metadata.config
-                                    .words"
-                                :key="'bucket_' + index"
-                                class="pa-2 flex-fill cardOutline"
-                                elevation="0"
+                            <v-textarea
                                 outlined
-                                tile
-                            >
-                                <v-row class="itemHeight">
-                                    <p
-                                        class="text-truncate pa-0 ma-0 seventy"
-                                        @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.word
-                                                ? item.word
-                                                : $t(
-                                                      'plugin.games.components.settings.bucket_game.form.enter_text'
-                                                  )
-                                        }}
-                                    </p>
-                                    <v-icon
-                                        class="twenty"
-                                        @click="onDelete(index)"
-                                        >mdi-delete-outline</v-icon
-                                    >
-                                </v-row>
-                                <v-textarea
-                                    v-if="item.expand"
-                                    outlined
-                                    :counter="20"
-                                    maxlength="20"
-                                    :autofocus="true"
-                                    :label="
-                                        $t(
-                                            'plugin.games.components.settings.crossword.word'
-                                        )
-                                    "
-                                    class="pt-4"
-                                    v-model="
-                                        block.metadata.config.words[index].word
-                                    "
-                                ></v-textarea>
-                                <v-textarea
-                                    v-if="item.expand"
-                                    outlined
-                                    :counter="155"
-                                    maxlength="155"
-                                    :label="
-                                        $t(
-                                            'plugin.games.components.settings.crossword.clue'
-                                        )
-                                    "
-                                    class="pt-4"
-                                    v-model="
-                                        block.metadata.config.words[index].clue
-                                    "
-                                ></v-textarea>
-                            </v-card>
-                            <p
-                                @mouseover="onHover"
-                                @mouseleave="onHoverLeave"
-                                @click="onAddElement"
-                                v-on:keyup.enter="onAddElement"
-                                class="fullWidth"
-                                :class="cursor"
-                                tabindex="0"
-                            >
-                                <v-icon class="primary addIcon"
-                                    >mdi-plus</v-icon
-                                >
+                                :counter="20"
+                                maxlength="20"
+                                :autofocus="true"
+                                class="pt-4"
+                                v-model="
+                                    block.metadata.config.words[index].word
+                                "
+                            ></v-textarea>
+                            <p class="p-label mb-0">
                                 {{
                                     $t(
-                                        'plugin.games.components.content.blocks.crossword.add_element'
+                                        'windward.games.components.settings.crossword.clue'
                                     )
                                 }}
                             </p>
+                            <v-textarea
+                                outlined
+                                :counter="155"
+                                maxlength="155"
+                                class="pt-4"
+                                v-model="
+                                    block.metadata.config.words[index].clue
+                                "
+                            ></v-textarea>
                         </v-container>
-                    </v-expansion-panel-content>
-                </v-expansion-panel>
-            </v-expansion-panels>
+                    </template>
+                </SortableExpansionPanel>
+                <v-container class="pa-0">
+                    <v-row justify="center" class="my-4">
+                        <v-btn color="primary" @click="onAddElement">
+                            <v-icon>mdi-plus</v-icon>
+                            {{
+                                $t(
+                                    'windward.games.components.settings.bucket_game.form.add_answer'
+                                )
+                            }}
+                        </v-btn>
+                    </v-row>
+                </v-container>
+            </v-container>
         </v-form>
+        <div v-if="loading" class="text-center">
+            <v-progress-circular
+                :size="70"
+                :width="7"
+                color="primary"
+                indeterminate
+            ></v-progress-circular>
+        </div>
     </div>
 </template>
 
 <script>
 import _ from 'lodash'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
+
 export default {
     name: 'CrosswordPuzzleSettingsManager',
     extends: BaseContentSettings,
-    components: {},
+    components: { SortableExpansionPanel },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -155,7 +138,9 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.games.components.content.blocks.crossword.crossword'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
@@ -169,7 +154,6 @@ export default {
                     id: counter,
                     word: '',
                     clue: '',
-                    expand: false,
                 }
                 counter = counter + 1
                 !this.block.metadata.config.words.push(default_object)
@@ -179,21 +163,16 @@ export default {
     data() {
         return {
             valid: true,
-            cursor: null,
+            loading: false,
         }
     },
     methods: {
         onAddElement() {
-            // closes all elements that were expanded
-            this.block.metadata.config.words.forEach((element) => {
-                element.expand = false
-            })
-            // pushes in new crossword object and expands element
+            // pushes in new crossword object
             const default_object = {
                 id: this.block.metadata.config.words.length,
                 word: '',
                 clue: '',
-                expand: true,
             }
             this.block.metadata.config.words.push(default_object)
         },
@@ -208,21 +187,6 @@ export default {
                 this.onAddElement()
             }
         },
-        onOpenEditor(index) {
-            this.block.metadata.config.words[index].expand =
-                !this.block.metadata.config.words[index].expand
-            this.block.metadata.config.words.forEach((element) => {
-                if (index !== element.id) {
-                    element.expand = false
-                }
-            })
-        },
-        onHover(index) {
-            this.cursor = 'changePointer'
-        },
-        onHoverLeave() {
-            this.cursor = ''
-        },
     },
 }
 </script>
@@ -230,42 +194,11 @@ export default {
 .v-progress-circular {
     margin: 1rem;
 }
-.changePointer {
-    cursor: pointer !important;
+.p-label-crosswords {
+    font-size: 0.85rem;
 }
-.cardOutline {
-    border: 2px solid var(--v-primary-base);
-    margin-bottom: 8px;
-}
-.fullWidth {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: bold;
+.p-label {
     font-size: 16px;
-}
-.itemHeight {
-    display: flex;
-    align-content: center;
-    justify-content: space-between;
-    height: 60px;
-}
-.seventy {
-    width: 70%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-}
-.twenty {
-    width: 20%;
-    height: 90%;
-    margin-top: 3px;
-    border-left: 2px solid var(--v-primary-base);
-}
-.addIcon {
-    margin-right: 5px;
-}
-.v-expansion-panel-content::v-deep .v-expansion-panel-content__wrap {
-    padding: 0 !important;
+    font-weight: 500;
 }
 </style>