@windward/games 0.0.9 → 0.0.10

package/components/settings/SlideShowManager.vue

@@ -1,9 +1,10 @@
 <template>
     <div>
-        <div>
-            <v-form ref="form" v-model="valid" v-if="!loading">
+        <v-form ref="form" v-model="valid" v-if="!loading">
+            <v-container class="pa-0">
                 <v-text-field
                     v-model="block.metadata.config.title"
+                    outlined
                     :counter="50"
                     maxlength="50"
                     :label="
@@ -12,7 +13,6 @@
                         )
                     "
                 ></v-text-field>
-                <br />
                 <v-textarea
                     outlined
                     auto-grow
@@ -25,146 +25,106 @@
                         )
                     "
                 ></v-textarea>
-                <br />
-            </v-form>
-            <div v-if="loading" class="text-center">
-                <v-progress-circular
-                    :size="70"
-                    :width="7"
-                    color="primary"
-                    indeterminate
-                ></v-progress-circular>
-            </div>
-        </div>
-        <div>
-            <v-layout class="d-flex">
-                <v-toolbar flat class="toolbar">
-                    <v-text-field
-                        class="shrink pt-7 pr-2"
-                        :label="
-                            $t(
-                                'plugin.games.components.content.blocks.slideshow.amount_of_slides'
-                            )
-                        "
-                        :placeholder="
-                            $t(
-                                'plugin.games.components.content.blocks.slideshow.amount_of_slides'
-                            )
-                        "
-                        outlined
-                        dense
-                        type="number"
-                        :value="block.metadata.config.slides.length"
-                        :disabled="true"
-                    ></v-text-field>
-                    <v-btn @click="onAddSlide" color="primary">
+            </v-container>
+            <v-divider class="my-4 primary"></v-divider>
+            <v-container class="pa-0">
+                <p>
+                    {{
+                        $t(
+                            'plugin.games.components.settings.slideshow.form.items'
+                        )
+                    }}
+                </p>
+                <SortableExpansionPanel
+                    v-model="block.metadata.config.slides"
+                    @click:close="onDeleteSlide($event)"
+                >
+                    <template #header="{ item, index }">
                         {{
-                            $t(
-                                'plugin.games.components.content.blocks.slideshow.add_slide'
-                            )
+                            item.header
+                                ? item.header
+                                : $t(
+                                      'plugin.games.components.content.blocks.slideshow.slides.slide',
+                                      [index + 1]
+                                  )
                         }}
-                    </v-btn>
-                </v-toolbar>
-            </v-layout>
-            <div>
+                    </template>
+                    <template #body="{ item, index }">
+                        <v-text-field
+                            v-model="block.metadata.config.slides[index].header"
+                            :autofocus="true"
+                            outlined
+                            :label="
+                                $t(
+                                    'plugin.games.components.content.blocks.slideshow.slides.slide_header'
+                                )
+                            "
+                        ></v-text-field>
+                        <v-text-field
+                            v-model="
+                                block.metadata.config.slides[index].description
+                            "
+                            outlined
+                            :label="
+                                $t(
+                                    'plugin.games.components.content.blocks.slideshow.slides.slide_description'
+                                )
+                            "
+                        ></v-text-field>
+                        <v-text-field
+                            v-model="
+                                block.metadata.config.slides[index].image_alt
+                            "
+                            outlined
+                            :label="
+                                $t(
+                                    'plugin.games.components.content.blocks.slideshow.slides.image_alt'
+                                )
+                            "
+                        ></v-text-field>
+                        <ContentBlockAsset
+                            id="content-block-asset"
+                            v-model="block.metadata.config.slides[index].image"
+                            mimes="image/png,image/jpeg"
+                        ></ContentBlockAsset>
+                    </template>
+                </SortableExpansionPanel>
                 <v-container>
-                    <v-expansion-panels flat>
-                        <draggable
-                            :list="block.metadata.config.slides"
-                            :disabled="false"
-                            class="flex-fill"
-                            :group="{
-                                name: 'people',
-                                pull: 'clone',
-                                put: false,
-                            }"
-                        >
-                            <v-expansion-panel
-                                v-for="(slide, index) in block.metadata.config
-                                    .slides"
-                                :key="index"
-                            >
-                                <v-expansion-panel-header>
-                                    <v-container>
-                                        <v-row
-                                            align="center"
-                                            justify="space-between"
-                                        >
-                                            <h3>
-                                                {{
-                                                    $t(
-                                                        'plugin.games.components.content.blocks.slideshow.slides.slide',
-                                                        [index + 1]
-                                                    )
-                                                }}
-                                            </h3>
-                                            <v-btn
-                                                @click="onDeleteSlide(index)"
-                                                color="primary"
-                                            >
-                                                <v-icon> mdi-delete</v-icon>
-                                                <span class="sr-only">{{
-                                                    $t('shared.forms.delete')
-                                                }}</span>
-                                            </v-btn>
-                                        </v-row>
-                                    </v-container>
-                                </v-expansion-panel-header>
-                                <v-expansion-panel-content>
-                                    <v-text-field
-                                        v-model="slide['header']"
-                                        :autofocus="true"
-                                        outlined
-                                        :label="
-                                            $t(
-                                                'plugin.games.components.content.blocks.slideshow.slides.slide_header'
-                                            )
-                                        "
-                                    ></v-text-field>
-                                    <v-text-field
-                                        v-model="slide['description']"
-                                        outlined
-                                        :label="
-                                            $t(
-                                                'plugin.games.components.content.blocks.slideshow.slides.slide_description'
-                                            )
-                                        "
-                                    ></v-text-field>
-                                    <v-text-field
-                                        v-model="slide['image_alt']"
-                                        outlined
-                                        :label="
-                                            $t(
-                                                'plugin.games.components.content.blocks.slideshow.slides.image_alt'
-                                            )
-                                        "
-                                    ></v-text-field>
-                                    <ContentBlockAsset
-                                        id="content-block-asset"
-                                        v-model="slide['image']"
-                                        mimes="image/png,image/jpeg"
-                                    ></ContentBlockAsset>
-                                </v-expansion-panel-content>
-                            </v-expansion-panel>
-                        </draggable>
-                    </v-expansion-panels>
+                    <v-row justify="center" class="my-4">
+                        <v-btn @click="onAddSlide" color="primary">
+                            <v-icon>mdi-plus</v-icon>
+                            {{
+                                $t(
+                                    'plugin.games.components.content.blocks.slideshow.add_slide'
+                                )
+                            }}
+                        </v-btn>
+                    </v-row>
                 </v-container>
-            </div>
+            </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 BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
-import draggable from 'vuedraggable'
 import _ from 'lodash'
 import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
 
 export default {
     name: 'SlideShowManager',
     extends: BaseContentSettings,
     components: {
-        draggable,
         ContentBlockAsset,
+        SortableExpansionPanel,
     },
     beforeMount() {
         if (_.isEmpty(this.block)) {
@@ -180,7 +140,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(
+                'plugin.games.components.settings.slideshow.form.slideshow_title'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''

package/components/settings/SortingGameSettingsManager.vue

@@ -35,77 +35,38 @@
                         )
                     }}
                 </p>
-                <draggable
+                <SortableExpansionPanel
                     v-model="block.metadata.config.answer"
-                    group="cards"
-                    @change="onDragged"
+                    @click:close="onDelete($event)"
                 >
-                    <v-container
-                        v-for="(item, index) in block.metadata.config.answer"
-                        :key="'bucket_' + index"
-                        class="container-card-outline"
-                        elevation="0"
-                        outlined
-                        tile
-                    >
-                        <v-layout row wrap outlined>
-                            <v-flex xs10 :class="bottomBorder(index)">
-                                <p
-                                    class="text-truncate mb-0 p-header"
-                                    @click="onOpenEditor(index)"
-                                    v-on:keyup.enter="onOpenEditor(index)"
-                                    @mouseover="onHover"
-                                    @mouseleave="onHoverLeave"
-                                    :class="cursor"
-                                    tabindex="0"
-                                >
-                                    <v-icon>mdi-drag-vertical</v-icon>
-                                    <span class="span-text-ellipsis">
-                                        {{
-                                            item.value
-                                                ? block.metadata.config.answer[
-                                                      index
-                                                  ].value
-                                                : $t(
-                                                      'plugin.games.components.settings.bucket_game.form.enter_text'
-                                                  )
-                                        }}
-                                    </span>
-                                </p>
-                            </v-flex>
-                            <v-flex
-                                xs2
-                                class="btn-header-delete d-flex justify-center"
-                                :class="bottomBorder(index)"
-                            >
-                                <v-icon
-                                    class="btn-delete-icon"
-                                    @click="onDelete(index)"
-                                    >mdi-delete-outline</v-icon
-                                >
-                            </v-flex>
-                            <v-container v-if="item.expand">
-                                <v-flex xs12>
-                                    <p class="p-label">
-                                        {{
-                                            $t(
-                                                'plugin.games.components.settings.sorting_game.word'
-                                            )
-                                        }}
-                                    </p>
-                                    <v-textarea
-                                        outlined
-                                        v-model="
-                                            block.metadata.config.answer[index]
-                                                .value
-                                        "
-                                        :autofocus="true"
-                                    ></v-textarea>
-                                </v-flex>
-                            </v-container>
-                        </v-layout>
-                    </v-container>
-                </draggable>
+                    <template #header="{ item, index }">
+                        {{
+                            item.value
+                                ? block.metadata.config.answer[index].value
+                                : $t(
+                                      'plugin.games.components.settings.bucket_game.form.enter_text'
+                                  )
+                        }}
+                    </template>
+                    <template #body="{ item, index }">
+                        <v-container>
+                            <p class="p-label">
+                                {{
+                                    $t(
+                                        'plugin.games.components.settings.sorting_game.word'
+                                    )
+                                }}
+                            </p>
+                            <v-textarea
+                                outlined
+                                v-model="
+                                    block.metadata.config.answer[index].value
+                                "
+                                :autofocus="true"
+                            ></v-textarea>
+                        </v-container>
+                    </template>
+                </SortableExpansionPanel>
             </v-container>
             <v-container class="pa-0">
                 <v-row justify="center" class="my-4">
@@ -155,13 +116,12 @@
 
 <script>
 import _ from 'lodash'
-import draggable from 'vuedraggable'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
-import CrudTable from '../content/CrudTable.vue'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
 export default {
     name: 'SortingGameSettingsManager',
     extends: BaseContentSettings,
-    components: { CrudTable, draggable },
+    components: { SortableExpansionPanel },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -214,13 +174,6 @@ export default {
         }
     },
     methods: {
-        bottomBorder(index) {
-            if (this.block.metadata.config.answer[index].expand === true) {
-                return 'container-header-border'
-            } else {
-                return null
-            }
-        },
         onAddElement() {
             this.block.metadata.config.answer.forEach((element) => {
                 element.expand = false
@@ -240,28 +193,6 @@ export default {
                 return (element.id = startingIndex)
             })
         },
-        onOpenEditor(index) {
-            this.block.metadata.config.answer[index].expand =
-                !this.block.metadata.config.answer[index].expand
-            this.block.metadata.config.answer.forEach((element) => {
-                if (index + 1 !== element.id) {
-                    element.expand = false
-                }
-            })
-        },
-        onHover(index) {
-            this.cursor = 'change-pointer'
-        },
-        onHoverLeave() {
-            this.cursor = ''
-        },
-        onDragged() {
-            let counter = 1
-            this.block.metadata.config.answer.forEach((element) => {
-                element.id = counter
-                counter = counter + 1
-            })
-        },
     },
 }
 </script>
@@ -270,49 +201,6 @@ export default {
 .v-progress-circular {
     margin: 1rem;
 }
-.container-card-outline {
-    border: solid 1px var(--v-primary-base);
-    border-radius: 3px !important;
-    margin-bottom: 8px;
-}
-.container-header-border {
-    border-bottom: 1px solid var(--v-primary-base);
-}
-.fullWidth {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: bold;
-    font-size: 16px;
-}
-.change-pointer {
-    cursor: pointer !important;
-}
-.p-header {
-    height: 45px;
-    display: flex;
-    align-items: center;
-}
-.p-header:hover {
-    background-color: rgb(243, 243, 243);
-}
-.span-text-ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.btn-header-delete {
-    border-left: 1px solid var(--v-primary-base);
-}
-.btn-header-delete:hover {
-    background-color: rgb(243, 243, 243);
-}
-.btn-delete-icon {
-    color: var(--v-primary-base);
-}
-.addIcon {
-    margin-right: 5px;
-}
 .p-label {
     font-size: 16px;
     font-weight: 500;