@windward/games 0.0.1

package/components/settings/QuizShowSettingsManager.vue

@@ -0,0 +1,408 @@
+<template>
+    <div>
+        <br />
+        <v-form ref="form" v-if="!loading">
+            <v-text-field
+                v-model="block.metadata.config.title"
+                :counter="50"
+                maxlength="50"
+                :label="
+                    $t(
+                        'plugin.games.components.settings.quizshow_game.form.title'
+                    )
+                "
+            ></v-text-field>
+            <br />
+            <v-checkbox
+                v-model="block.metadata.config.responsive"
+                :label="
+                    $t(
+                        'plugin.games.components.settings.quizshow_game.form.responsive'
+                    )
+                "
+            ></v-checkbox>
+            <br />
+            <textEditor v-model="block.metadata.config.instructions" />
+            <br />
+
+            <v-card elevation="0" outlined>
+                <v-subheader
+                    >{{
+                        $t(
+                            'plugin.games.components.settings.quizshow_game.form.max_categories'
+                        )
+                    }}
+                </v-subheader>
+                <v-slider
+                    v-model="block.metadata.config.maxCategories"
+                    :tick-labels="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
+                    step="1"
+                    min="1"
+                    max="10"
+                    thumb-label
+                    ticks="always"
+                    tick-size="4"
+                    @change="onChange('categories')"
+                ></v-slider>
+            </v-card>
+            <br />
+            <v-card elevation="0" outlined>
+                <v-subheader
+                    >{{
+                        $t(
+                            'plugin.games.components.settings.quizshow_game.form.max_rows'
+                        )
+                    }}
+                </v-subheader>
+                <v-slider
+                    v-model="block.metadata.config.maxRows"
+                    :tick-labels="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
+                    step="1"
+                    min="1"
+                    max="10"
+                    thumb-label
+                    ticks="always"
+                    tick-size="4"
+                    @change="onChange('rows')"
+                ></v-slider>
+            </v-card>
+            <v-expansion-panels outlined tile flat>
+                <v-expansion-panel>
+                    <v-expansion-panel-header>
+                        <template v-slot:default="{ open }">
+                            <v-row no-gutters>
+                                {{
+                                    $t(
+                                        'plugin.games.components.settings.quizshow_game.form.categories'
+                                    )
+                                }}
+                            </v-row>
+                        </template>
+                        <template v-slot:actions>
+                            <v-icon
+                                :color="
+                                    expansionColor(
+                                        block.metadata.config.categories,
+                                        block.metadata.config.maxCategories
+                                    )
+                                "
+                            >
+                                {{
+                                    expansionIcon(
+                                        block.metadata.config.categories,
+                                        block.metadata.config.maxCategories
+                                    )
+                                }}
+                            </v-icon>
+                        </template>
+                    </v-expansion-panel-header>
+                    <v-expansion-panel-content>
+                        <v-text-field
+                            v-for="index in Number(
+                                block.metadata.config.maxCategories
+                            )"
+                            :key="'cat' + index"
+                            v-model="
+                                block.metadata.config.categories[index - 1]
+                            "
+                            :counter="255"
+                            maxlength="255"
+                            :label="
+                                $t(
+                                    'plugin.games.components.settings.quizshow_game.form.category'
+                                ) +
+                                ' ' +
+                                index
+                            "
+                            outlined
+                        ></v-text-field>
+                    </v-expansion-panel-content>
+                </v-expansion-panel>
+
+                <br />
+
+                <v-expansion-panel>
+                    <v-expansion-panel-header>
+                        <template v-slot:default="{ open }">
+                            <v-row no-gutters>
+                                {{
+                                    $t(
+                                        'plugin.games.components.settings.quizshow_game.form.points_per_row'
+                                    )
+                                }}
+                            </v-row>
+                        </template>
+                        <template v-slot:actions>
+                            <v-icon
+                                :color="
+                                    expansionColor(
+                                        block.metadata.config.points,
+                                        block.metadata.config.maxRows
+                                    )
+                                "
+                            >
+                                {{
+                                    expansionIcon(
+                                        block.metadata.config.points,
+                                        block.metadata.config.maxRows
+                                    )
+                                }}
+                            </v-icon>
+                        </template>
+                    </v-expansion-panel-header>
+                    <v-expansion-panel-content>
+                        <v-text-field
+                            v-for="index in Number(
+                                block.metadata.config.maxRows
+                            )"
+                            :key="'row' + index"
+                            v-model="block.metadata.config.points[index - 1]"
+                            type="number"
+                            min="1"
+                            max="9999"
+                            @input="onPointsChange(index - 1)"
+                            :rules="validation.pointsRules"
+                            :label="
+                                $t(
+                                    'plugin.games.components.settings.quizshow_game.form.row'
+                                ) +
+                                ' ' +
+                                index
+                            "
+                            outlined
+                        ></v-text-field>
+                    </v-expansion-panel-content>
+                </v-expansion-panel>
+            </v-expansion-panels>
+
+            <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>
+</template>
+
+<script>
+import TextEditor from '~/components/Text/TextEditor.vue'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+export default {
+    name: 'QuizShowSettingsManager',
+    extends: BaseContentSettings,
+    components: {
+        TextEditor,
+    },
+    watch: {
+        'block.metadata.config.maxCategories'(newValue, oldValue) {
+            this.quizShowSettings.maxCategories = _.isArray(
+                this.block.metadata.config.categories
+            )
+                ? this.block.metadata.config.categories.length
+                : oldValue
+        },
+        'block.metadata.config.maxRows'(newValue, oldValue) {
+            this.quizShowSettings.maxRows = _.isArray(
+                this.block.metadata.config.points
+            )
+                ? this.block.metadata.config.points.length
+                : oldValue
+        },
+    },
+    data() {
+        return {
+            validation: {
+                lengthRules: [
+                    (v) => !!v || this.$t('shared.forms.errors.required'),
+                    (v) =>
+                        (!!v && v.length >= 1) ||
+                        this.$t('shared.forms.errors.required'),
+                    (v) => {
+                        if (!!v && v <= 10) {
+                            return true
+                        } else {
+                            return this.$t('shared.forms.errors.number_lt', [
+                                10,
+                            ])
+                        }
+                    },
+                ],
+                pointsRules: [
+                    (v) => !!v || this.$t('shared.forms.errors.required'),
+                    (v) =>
+                        (!!v && v.length >= 1) ||
+                        this.$t('shared.forms.errors.required'),
+                    (v) => {
+                        if (!!v && v <= 9999) {
+                            return true
+                        } else {
+                            return this.$t('shared.forms.errors.number_lt', [
+                                9999,
+                            ])
+                        }
+                    },
+                ],
+            },
+            loading: false,
+            quizShowSettings: {
+                title: '',
+                responsive: true,
+                instructions: '',
+                maxCategories: 4,
+                maxRows: 4,
+                categories: [' ', ' ', ' ', ' '],
+                points: ['100', '200', '300', '400'],
+            },
+        }
+    },
+    computed: {},
+    beforeMount() {
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = _.cloneDeep(this.quizShowSettings)
+        }
+    },
+    methods: {
+        expansionIcon(element, elementMax) {
+            let icon = ''
+            switch (element.length) {
+                case 0:
+                    icon = 'mdi-alert-circle'
+                    break
+
+                default:
+                    icon = 'mdi-chevron-down'
+            }
+
+            return icon
+        },
+        expansionColor(element, elementMax) {
+            let color = ''
+            switch (element.length) {
+                case 0:
+                    color = 'error'
+                    break
+                case elementMax:
+                    color = 'success'
+                    break
+                default:
+                    color = ''
+            }
+
+            return color
+        },
+        changeMaxCategories() {
+            if (this.block.metadata.config.maxCategories > 10) {
+                this.block.metadata.config.maxCategories = 10
+            } else if (
+                !_.isNumber(this.block.metadata.config.maxCategories) ||
+                this.block.metadata.config.maxCategories < 1
+            ) {
+                this.block.metadata.config.maxCategories = 1
+            }
+            const max = this.block.metadata.config.maxCategories
+            if (this.block.metadata.config.categories.length > 0) {
+                this.block.metadata.config.categories =
+                    this.block.metadata.config.categories
+                        .map(function (element, index) {
+                            if (max > index) {
+                                return element
+                            }
+                        })
+                        .filter((cat) => cat != null)
+            }
+            this.block.metadata.config.categories =
+                this.block.metadata.config.categories.concat(
+                    ...Array(
+                        this.block.metadata.config.maxCategories -
+                            this.block.metadata.config.categories.length
+                    )
+                )
+        },
+        changeMaxRows() {
+            if (this.block.metadata.config.maxRows > 10) {
+                this.block.metadata.config.maxRows = 10
+            } else if (
+                !_.isNumber(this.block.metadata.config.maxRows) ||
+                this.block.metadata.config.maxRows < 1
+            ) {
+                this.block.metadata.config.maxRows = 1
+            }
+            const maxRows = this.block.metadata.config.maxRows
+            if (this.block.metadata.config.points.length > 0) {
+                this.block.metadata.config.points =
+                    this.block.metadata.config.points
+                        .map(function (element, index) {
+                            if (maxRows > index) {
+                                return element
+                            }
+                        })
+                        .filter((point) => point != null)
+            }
+            this.block.metadata.config.points =
+                this.block.metadata.config.points.concat(
+                    ...Array(
+                        this.block.metadata.config.maxRows -
+                            this.block.metadata.config.points.length
+                    )
+                )
+        },
+        onPointsChange(index) {
+            this.block.metadata.config.points[index] = _.toNumber(
+                this.block.metadata.config.points[index]
+            )
+            if (this.block.metadata.config.points[index] > 9999) {
+                this.block.metadata.config.points[index] = 9999
+            } else if (
+                !_.isNumber(this.block.metadata.config.points[index]) ||
+                this.block.metadata.config.points[index] < 1
+            ) {
+                this.block.metadata.config.points[index] = 1
+            }
+        },
+        onChange(input) {
+            this.$toast.info(
+                this.$t(
+                    'plugin.games.components.settings.quizshow_game.form.confirm_change_text'
+                ),
+                {
+                    icon: 'mdi-help',
+                    duration: null,
+                    action: [
+                        {
+                            text: this.$t('shared.forms.cancel'),
+                            onClick: (e, toastObject) => {
+                                toastObject.goAway(0)
+                                if (input === 'categories') {
+                                    this.block.metadata.config.maxCategories =
+                                        this.quizShowSettings.maxCategories
+                                } else if (input === 'rows') {
+                                    this.block.metadata.config.maxRows =
+                                        this.quizShowSettings.maxRows
+                                }
+                            },
+                        },
+                        {
+                            text: this.$t('shared.forms.confirm'),
+                            // router navigation
+                            onClick: (e, toastObject) => {
+                                if (input === 'categories') {
+                                    this.changeMaxCategories()
+                                } else if (input === 'rows') {
+                                    this.changeMaxRows()
+                                }
+                                toastObject.goAway(0)
+                            },
+                        },
+                    ],
+                }
+            )
+        },
+    },
+}
+</script>
+
+<style scoped></style>

package/components/settings/SlideShowManager.vue

@@ -0,0 +1,248 @@
+<template>
+    <div>
+        <div>
+            <v-form ref="form" v-model="valid" v-if="!loading">
+                <v-text-field
+                    v-model="block.metadata.config.title"
+                    :counter="50"
+                    maxlength="50"
+                    :label="
+                        $t(
+                            'plugin.games.components.settings.slideshow.form.title'
+                        )
+                    "
+                ></v-text-field>
+                <br />
+                <v-textarea
+                    outlined
+                    auto-grow
+                    v-model="block.metadata.config.instructions"
+                    :counter="255"
+                    maxlength="255"
+                    :label="
+                        $t(
+                            'plugin.games.components.settings.slideshow.form.instructions'
+                        )
+                    "
+                ></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">
+                        {{
+                            $t(
+                                'plugin.games.components.content.blocks.slideshow.add_slide'
+                            )
+                        }}
+                    </v-btn>
+                </v-toolbar>
+            </v-layout>
+            <div>
+                <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-container>
+            </div>
+        </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'
+
+export default {
+    name: 'SlideShowManager',
+    extends: BaseContentSettings,
+    components: {
+        draggable,
+        ContentBlockAsset,
+    },
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = 'Slideshow'
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = ''
+        }
+
+        if (_.isEmpty(this.block.metadata.config.slides)) {
+            this.block.metadata.config.slides = []
+        }
+    },
+    beforeDestroy() {
+        if (this.debouncer) {
+            clearTimeout(this.debouncer)
+        }
+    },
+    data() {
+        return {
+            valid: true,
+            debounce: null,
+            loading: false,
+        }
+    },
+    methods: {
+        onAddSlide() {
+            let defaultSlide = {
+                id: this.block.metadata.config.slides.length + 1,
+                header: '',
+                description: '',
+                image: null,
+                image_alt: '',
+            }
+            this.block.metadata.config.slides.push(defaultSlide)
+        },
+        onDeleteSlide(index) {
+            this.$toast.info(this.$t('shared.forms.confirm_delete_text'), {
+                icon: 'mdi-help',
+                duration: null,
+                action: [
+                    {
+                        text: this.$t('shared.forms.cancel'),
+                        onClick: (e, toastObject) => {
+                            toastObject.goAway(0)
+                        },
+                    },
+                    {
+                        text: this.$t('shared.forms.confirm'),
+                        // router navigation
+                        onClick: (e, toastObject) => {
+                            this.block.metadata.config.slides.splice(index, 1)
+                            toastObject.goAway(0)
+                        },
+                    },
+                ],
+            })
+        },
+    },
+}
+</script>
+<style scoped>
+.v-progress-circular {
+    margin: 1rem;
+}
+#content-block-asset {
+    max-width: 251px;
+}
+</style>