@windward/games 0.0.9 → 0.1.0

package/components/settings/MultipleChoiceSettingsManager.vue

@@ -1,123 +1,102 @@
 <template>
-    <v-container>
-        <div ref="form">
-            <v-text-field
-                v-model="block.metadata.config.title"
-                :counter="50"
-                maxlength="50"
-                :label="
-                    $t(
-                        'plugin.games.components.settings.multiple_choice.title_placeholder'
-                    )
-                "
-            ></v-text-field>
-            <v-textarea
-                outlined
-                auto-grow
-                v-model="block.metadata.config.instructions"
-                :counter="255"
-                maxlength="255"
-                :label="
-                    $t(
-                        'plugin.games.components.settings.multiple_choice.instructions'
-                    )
-                "
-            ></v-textarea>
-            <div>
-                <v-container class="pa-0">
-                    <v-expansion-panels flat>
-                        <v-expansion-panel>
-                            <v-expansion-panel-header class="pa-0">
-                                <h5>
-                                    {{
-                                        $t(
-                                            'plugin.games.components.settings.multiple_choice.questions'
-                                        )
-                                    }}
-                                </h5></v-expansion-panel-header
-                            >
-                            <v-expansion-panel-content class="ma-0">
-                                <v-container class="pa-0">
-                                    <draggable
-                                        :list="block.metadata.config.questions"
-                                        :disabled="false"
-                                        class="flex-fill"
-                                        :group="{
-                                            name: 'people',
-                                            pull: 'clone',
-                                            put: false,
-                                        }"
+    <div>
+        <v-form ref="form">
+            <v-container class="pa-0">
+                <v-text-field
+                    v-model="block.metadata.config.title"
+                    outlined
+                    :counter="50"
+                    :autofocus="true"
+                    maxlength="50"
+                    :label="
+                        $t(
+                            'windward.games.components.settings.multiple_choice.title_placeholder'
+                        )
+                    "
+                ></v-text-field>
+                <v-textarea
+                    v-model="block.metadata.config.instructions"
+                    outlined
+                    auto-grow
+                    :counter="255"
+                    maxlength="255"
+                    :label="
+                        $t(
+                            'windward.games.components.settings.multiple_choice.instructions'
+                        )
+                    "
+                ></v-textarea>
+            </v-container>
+            <v-divider class="my-4 primary"></v-divider>
+            <v-container class="pa-0">
+                <p>
+                    {{
+                        $t(
+                            'windward.games.components.settings.multiple_choice.questions'
+                        )
+                    }}
+                </p>
+                <draggable
+                    :list="block.metadata.config.questions"
+                    group="people"
+                >
+                    <v-container
+                        v-for="(question, index) in block.metadata.config
+                            .questions"
+                        :key="index"
+                        class="container-card-outline"
+                        elevation="0"
+                        outlined
+                        tile
+                    >
+                        <v-layout row wrap outlined>
+                            <v-flex xs10>
+                                <p
+                                    class="text-truncate mb-0 p-header"
+                                    :class="cursor"
+                                    @click="onOpenModal($event, index)"
+                                    @mouseover="onHover"
+                                    @mouseleave="onHoverLeave"
+                                >
+                                    <v-icon class="pl-2"
+                                        >mdi-drag-vertical</v-icon
                                     >
-                                        <v-card
-                                            v-for="(question, index) in block
-                                                .metadata.config.questions"
-                                            :key="index"
-                                            class="pa-2 flex-fill cardOutline"
-                                            elevation="0"
-                                            outlined
-                                            tile
-                                        >
-                                            <v-row
-                                                class="itemHeight"
-                                                :class="cursor"
-                                            >
-                                                <p
-                                                    class="text-truncate ma-0 seventy"
-                                                    @click="
-                                                        onOpenModal(
-                                                            $event,
-                                                            index
-                                                        )
-                                                    "
-                                                    @mouseover="onHover"
-                                                    @mouseleave="onHoverLeave"
-                                                >
-                                                    <v-icon class="pl-2"
-                                                        >mdi-gesture-tap-hold</v-icon
-                                                    >
-                                                    {{
-                                                        question.body
-                                                            ? question.body
-                                                            : $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-card>
-                                    </draggable>
-                                    <v-container class="d-flex justify-center">
-                                        <p
-                                            @mouseover="onHover"
-                                            @mouseleave="onHoverLeave"
-                                            @click="onOpenModal"
-                                            v-on:keydown.enter="onOpenModal"
-                                            class="fullWidth"
-                                            :class="cursor"
-                                            tabindex="0"
-                                        >
-                                            <v-icon class="primary addIcon"
-                                                >mdi-plus</v-icon
-                                            >
-                                            {{
-                                                $t(
-                                                    'plugin.games.components.settings.multiple_choice.add_question'
-                                                )
-                                            }}
-                                        </p>
-                                    </v-container>
-                                </v-container>
-                            </v-expansion-panel-content>
-                        </v-expansion-panel>
-                    </v-expansion-panels>
-                </v-container>
-            </div>
-        </div>
+                                    <span class="span-text-ellipsis">
+                                        {{
+                                            question.body
+                                                ? question.body
+                                                : $t(
+                                                      'windward.games.components.settings.bucket_game.form.enter_text'
+                                                  )
+                                        }}
+                                    </span>
+                                </p>
+                            </v-flex>
+                            <v-flex
+                                xs2
+                                class="btn-header-delete d-flex justify-center"
+                            >
+                                <v-icon
+                                    class="btn-delete-icon"
+                                    @click="onDelete(index)"
+                                    >mdi-delete-outline</v-icon
+                                >
+                            </v-flex>
+                        </v-layout>
+                    </v-container>
+                </draggable>
+                <v-row justify="center" class="my-4">
+                    <v-btn color="primary" @click="onOpenModal">
+                        <v-icon>mdi-plus</v-icon>
+                        {{
+                            $t(
+                                'windward.games.components.settings.multiple_choice.add_question'
+                            )
+                        }}
+                    </v-btn>
+                </v-row>
+            </v-container>
+        </v-form>
         <Dialog
             v-model="dialog"
             :trigger="false"
@@ -129,19 +108,29 @@
         >
             <template #title>{{
                 $t(
-                    'plugin.games.components.settings.multiple_choice.modal_title'
+                    'windward.games.components.settings.multiple_choice.modal_title'
                 )
             }}</template>
             <template #form="{ on, attrs }">
                 <QuestionDialog
                     v-bind="attrs"
                     v-on="on"
-                    @saveAndNew="saveAndNewCalled"
                     v-model="block.metadata.config.questions[editingIndex]"
+                    @saveAndNew="saveAndNewCalled"
                 ></QuestionDialog>
             </template>
         </Dialog>
-    </v-container>
+        <div>
+            <div v-if="loading" class="text-center">
+                <v-progress-circular
+                    :size="70"
+                    :width="7"
+                    color="primary"
+                    indeterminate
+                ></v-progress-circular>
+            </div>
+        </div>
+    </div>
 </template>
 <script>
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
@@ -166,7 +155,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.multiple_choice.game_title'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
@@ -182,6 +173,8 @@ export default {
             emittedQuestion: {},
             editingIndex: null,
             isNotEditing: false,
+            valid: true,
+            loading: false,
         }
     },
     mounted() {
@@ -274,30 +267,27 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.cardOutline {
-    border: 2px solid var(--v-primary-base);
+.container-card-outline {
+    border: solid 1px var(--v-primary-base);
+    border-radius: 3px !important;
     margin-bottom: 8px;
 }
-.itemHeight {
+.p-header {
+    height: 45px;
     display: flex;
-    align-content: center;
-    justify-content: space-between;
-    height: 60px;
+    align-items: center;
 }
-.v-expansion-panel-content::v-deep .v-expansion-panel-content__wrap {
-    padding: 0 !important;
+.p-header:hover {
+    background-color: rgb(243, 243, 243);
 }
-.seventy {
-    width: 70%;
-    height: 100%;
-    display: flex;
-    align-items: center;
+.btn-delete-icon {
+    color: var(--v-primary-base);
+}
+.btn-header-delete {
+    border-left: 1px solid var(--v-primary-base);
 }
-.twenty {
-    width: 20%;
-    height: 90%;
-    margin-top: 3px;
-    border-left: 2px solid var(--v-primary);
+.btn-header-delete:hover {
+    background-color: rgb(243, 243, 243);
 }
 .changePointer {
     cursor: pointer !important;

package/components/settings/QuizShowSettingsManager.vue

@@ -8,7 +8,7 @@
                 maxlength="50"
                 :label="
                     $t(
-                        'plugin.games.components.settings.quizshow_game.form.title'
+                        'windward.games.components.settings.quizshow_game.form.title'
                     )
                 "
             ></v-text-field>
@@ -17,7 +17,7 @@
                 v-model="block.metadata.config.responsive"
                 :label="
                     $t(
-                        'plugin.games.components.settings.quizshow_game.form.responsive'
+                        'windward.games.components.settings.quizshow_game.form.responsive'
                     )
                 "
             ></v-checkbox>
@@ -30,7 +30,7 @@
                 maxlength="300"
                 :label="
                     $t(
-                        'plugin.games.components.settings.multiple_choice.instructions'
+                        'windward.games.components.settings.multiple_choice.instructions'
                     )
                 "
             ></v-textarea>
@@ -44,7 +44,7 @@
                                 <h5>
                                     {{
                                         $t(
-                                            'plugin.games.components.settings.quizshow_game.form.categories'
+                                            'windward.games.components.settings.quizshow_game.form.categories'
                                         )
                                     }}
                                 </h5>
@@ -76,7 +76,7 @@
                                             maxlength="255"
                                             :label="
                                                 $tc(
-                                                    'plugin.games.components.settings.quizshow_game.form.category',
+                                                    'windward.games.components.settings.quizshow_game.form.category',
                                                     1
                                                 ) +
                                                 ' ' +
@@ -102,7 +102,7 @@
                                         >
                                             <v-icon>mdi-plus</v-icon>&nbsp{{
                                                 $t(
-                                                    'plugin.games.components.settings.quizshow_game.form.add_category'
+                                                    'windward.games.components.settings.quizshow_game.form.add_category'
                                                 )
                                             }}</v-btn
                                         >
@@ -120,7 +120,7 @@
                                 <h5>
                                     {{
                                         $t(
-                                            'plugin.games.components.settings.quizshow_game.form.max_rows'
+                                            'windward.games.components.settings.quizshow_game.form.max_rows'
                                         )
                                     }}
                                 </h5>
@@ -155,7 +155,7 @@
                                             @input="onPointsChange(index - 1)"
                                             :label="
                                                 $t(
-                                                    'plugin.games.components.settings.quizshow_game.form.row'
+                                                    'windward.games.components.settings.quizshow_game.form.row'
                                                 ) +
                                                 ' ' +
                                                 index
@@ -178,7 +178,7 @@
                                         >
                                             <v-icon>mdi-plus</v-icon>&nbsp{{
                                                 $t(
-                                                    'plugin.games.components.settings.quizshow_game.form.add_row'
+                                                    'windward.games.components.settings.quizshow_game.form.add_row'
                                                 )
                                             }}</v-btn
                                         >
@@ -265,32 +265,32 @@ export default {
             cursor: 'changePointer',
             quizShowSettings: {
                 title: this.$t(
-                    'plugin.games.components.settings.quizshow_game.title'
+                    'windward.games.components.settings.quizshow_game.title'
                 ),
                 responsive: true,
                 instructions: this.$t(
-                    'plugin.games.components.settings.quizshow_game.form.default_instructions'
+                    'windward.games.components.settings.quizshow_game.form.default_instructions'
                 ),
                 maxCategories: 4,
                 maxRows: 4,
                 categories: [
                     this.$tc(
-                        'plugin.games.components.settings.quizshow_game.form.category',
+                        'windward.games.components.settings.quizshow_game.form.category',
                         1,
                         { index: 1 }
                     ),
                     this.$tc(
-                        'plugin.games.components.settings.quizshow_game.form.category',
+                        'windward.games.components.settings.quizshow_game.form.category',
                         1,
                         { index: 2 }
                     ),
                     this.$tc(
-                        'plugin.games.components.settings.quizshow_game.form.category',
+                        'windward.games.components.settings.quizshow_game.form.category',
                         1,
                         { index: 3 }
                     ),
                     this.$tc(
-                        'plugin.games.components.settings.quizshow_game.form.category',
+                        'windward.games.components.settings.quizshow_game.form.category',
                         1,
                         { index: 4 }
                     ),
@@ -380,11 +380,11 @@ export default {
                 this.block.metadata.config.maxCategories
             ] =
                 this.$t(
-                    'plugin.games.components.settings.quizshow_game.form.new'
+                    'windward.games.components.settings.quizshow_game.form.new'
                 ) +
                 ' ' +
                 this.$tc(
-                    'plugin.games.components.settings.quizshow_game.form.category',
+                    'windward.games.components.settings.quizshow_game.form.category',
                     1
                 )
             this.block.metadata.config.maxCategories++