@windward/core 0.0.8 → 0.0.9

package/components/Settings/AccordionSettings.vue

@@ -1,77 +1,95 @@
 <template>
     <div>
-        <v-container class="pa-0">
-            <v-btn
-                color="primary"
-                outlined
-                @click="onAddElement"
-                class="fullWidth"
-                ><v-icon>mdi-plus</v-icon>{{ $t('shared.forms.add') }}</v-btn
-            >
-            <v-expansion-panels flat>
-                <v-expansion-panel
-                    v-for="(item, itemIndex) in block.metadata.config.items"
-                    :key="itemIndex"
-                    class="elevation-0"
+        <v-form ref="form" v-model="valid" v-if="!loading">
+            <v-container class="pa-0">
+                <v-divider class="my-4 primary"></v-divider>
+                <p>
+                    {{
+                        $t('windward.core.components.settings.accordion.items')
+                    }}
+                </p>
+                <SortableExpansionPanel
+                    v-model="block.metadata.config.items"
+                    @click:close="onRemoveElement($event)"
+                    @change="onDragged"
                 >
-                    <v-expansion-panel-header class="elevation-0">{{
-                        'item ' + (itemIndex + 1)
-                    }}</v-expansion-panel-header>
-                    <v-expansion-panel-content
-                        class="elevation-0"
-                        :key="expansionPanelKey"
-                    >
-                        <v-text-field
-                            v-model="
-                                block.metadata.config.items[itemIndex].header
-                            "
-                            :label="'Item Title'"
-                        ></v-text-field>
-                        <v-btn
-                            @click="
-                                onToggleExpand(
-                                    block.metadata.config.items[itemIndex]
-                                )
-                            "
-                        >
-                            <v-icon
-                                v-if="
-                                    !block.metadata.config.items[itemIndex]
-                                        .expand
+                    <template #header="{ item }">{{
+                        item.header
+                            ? item.header
+                            : $t(
+                                  'plugin.games.components.settings.bucket_game.form.enter_text'
+                              )
+                    }}</template>
+                    <template #body="{ index }">
+                        <v-container :key="expansionPanelKey">
+                            <v-text-field
+                                outlined
+                                :autofocus="true"
+                                v-model="
+                                    block.metadata.config.items[index].header
                                 "
-                                >mdi-arrow-expand-all</v-icon
-                            >
-                            <v-icon
-                                v-if="
-                                    block.metadata.config.items[itemIndex]
-                                        .expand
+                                :label="
+                                    $t(
+                                        'windward.core.shared.settings.title.title'
+                                    )
+                                "
+                            ></v-text-field>
+                            <v-btn
+                                @click="
+                                    onToggleExpand(
+                                        block.metadata.config.items[index]
+                                    )
                                 "
                             >
-                                mdi-arrow-collapse-all
-                            </v-icon>
-                        </v-btn>
-                        <TextEditor
-                            :api_key="api_key"
-                            v-show="
-                                !block.metadata.config.items[itemIndex].expand
-                            "
-                            v-model="
-                                block.metadata.config.items[itemIndex].content
-                            "
-                        ></TextEditor>
-                        <br />
-                        <v-btn
-                            class="mt-2 fullWidth"
-                            color="primary"
-                            outlined
-                            @click="onRemoveElement(itemIndex)"
-                            ><v-icon>mdi-delete-outline</v-icon
-                            >{{ $t('shared.forms.delete') }}</v-btn
-                        >
-                    </v-expansion-panel-content>
-                </v-expansion-panel>
-            </v-expansion-panels>
-        </v-container>
+                                <v-icon
+                                    v-if="
+                                        !block.metadata.config.items[index]
+                                            .expand
+                                    "
+                                    >mdi-arrow-expand-all</v-icon
+                                >
+                                <v-icon
+                                    v-if="
+                                        block.metadata.config.items[index]
+                                            .expand
+                                    "
+                                >
+                                    mdi-arrow-collapse-all
+                                </v-icon>
+                            </v-btn>
+                            <TextEditor
+                                v-show="
+                                    !block.metadata.config.items[index].expand
+                                "
+                                v-model="
+                                    block.metadata.config.items[index].content
+                                "
+                            ></TextEditor>
+                        </v-container>
+                    </template>
+                </SortableExpansionPanel>
+            </v-container>
+            <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.core.components.settings.accordion.add'
+                            )
+                        }}</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>
 <script>
@@ -79,11 +97,13 @@ import _ from 'lodash'
 import Crypto from '~/helpers/Crypto'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
 import TextEditor from '~/components/Text/TextEditor'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
 
 export default {
     name: 'AccordionSettings',
     components: {
         TextEditor,
+        SortableExpansionPanel,
     },
     extends: BaseContentSettings,
     beforeMount() {
@@ -108,15 +128,17 @@ export default {
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
         }
-        this.block.body = 'accordion'
+        this.block.body = this.$t(
+            'windward.core.components.settings.accordion.accordion'
+        )
     },
     data() {
         return {
-            api_key: process.env.TINY_MCE_API_KEY,
             expansionPanelKey: '0',
+            valid: true,
+            loading: false,
         }
     },
-    mounted() {},
     beforeDestroy() {
         if (this.debouncer) {
             clearTimeout(this.debouncer)
@@ -140,6 +162,10 @@ export default {
             this.expansionPanelKey = Crypto.id()
             return (item.expand = !item.expand)
         },
+        onDragged() {
+            // need to remount body after dragged to update the content body on the element
+            this.expansionPanelKey = Crypto.id()
+        },
     },
 }
 </script>
@@ -147,7 +173,4 @@ export default {
 .v-progress-circular {
     margin: 1rem;
 }
-.fullWidth {
-    width: 100%;
-}
 </style>

package/components/Settings/ClickableIconsSettings.vue

@@ -4,6 +4,7 @@
             <v-col class="pa-0">
                 <v-text-field
                     v-model="block.metadata.config.title"
+                    id="title"
                     :label="
                         $t(
                             'windward.core.components.settings.clickable_icon.title'
@@ -12,49 +13,91 @@
                 ></v-text-field>
                 <v-text-field
                     v-model="block.metadata.config.description"
+                    id="description"
                     :label="
                         $t(
                             'windward.core.components.settings.clickable_icon.description'
                         )
                     "
                 ></v-text-field>
-                <v-btn
-                    color="primary"
-                    outlined
-                    @click="onAddElement"
-                    class="btn-add"
+                <v-switch
+                    v-model="block.metadata.config.display.show_title"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.clickable_icon.display.show_title'
+                        )
+                    "
+                ></v-switch>
+                <v-switch
+                    v-model="block.metadata.config.display.show_background"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.clickable_icon.display.show_background'
+                        )
+                    "
+                ></v-switch>
+                <v-switch
+                    v-model="block.metadata.config.display.round_icon"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.clickable_icon.display.round_icon'
+                        )
+                    "
+                ></v-switch>
+                <v-switch
+                    v-model="block.metadata.config.display.italic_icon"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.clickable_icon.display.italic_icon'
+                        )
+                    "
+                ></v-switch>
+                <v-switch
+                    v-model="block.metadata.config.display.autocolor"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.clickable_icon.autocolor'
+                        )
+                    "
+                ></v-switch>
+                <v-btn color="primary" outlined block @click="onAddElement"
                     ><v-icon>mdi-plus</v-icon
                     >{{ $t('shared.forms.add') }}</v-btn
                 >
             </v-col>
-            <v-expansion-panels flat>
-                <v-expansion-panel
-                    v-for="(item, itemIndex) in block.metadata.config.items"
-                    :key="itemIndex"
-                    class="elevation-0"
+            <v-col>
+                <SortableExpansionPanel
+                    v-model="block.metadata.config.items"
+                    @click:close="onRemoveElement"
                 >
-                    <v-expansion-panel-header class="elevation-0 pa-0">{{
-                        'item ' + (itemIndex + 1)
-                    }}</v-expansion-panel-header>
-                    <v-expansion-panel-content
-                        class="elevation-0"
-                        :key="expansionPanelKey"
-                    >
-                        <v-text-field
-                            v-model="
-                                block.metadata.config.items[itemIndex].icon
-                            "
+                    <template #header="{ item }">
+                        <v-icon v-if="item.icon && isIcon(item.icon)">{{
+                            item.icon
+                        }}</v-icon>
+                        <span v-else-if="item.icon && !isIcon(item.icon)">{{
+                            item.icon
+                        }}</span>
+                        <span v-else class="font-italic">
+                            {{
+                                $t(
+                                    'windward.core.components.settings.clickable_icon.no_icon'
+                                )
+                            }}
+                        </span>
+                    </template>
+                    <template #body="{ index }">
+                        <TextIconPicker
+                            v-model="block.metadata.config.items[index].icon"
                             :label="
                                 $t(
                                     'windward.core.components.settings.clickable_icon.item_icon',
-                                    [itemIndex + 1]
+                                    [index + 1]
                                 )
                             "
-                        ></v-text-field>
+                        ></TextIconPicker>
                         <v-text-field
-                            v-model="
-                                block.metadata.config.items[itemIndex].title
-                            "
+                            v-model="block.metadata.config.items[index].title"
+                            :id="'item-' + index + '-title'"
                             :label="
                                 $t(
                                     'windward.core.components.settings.clickable_icon.item_title'
@@ -63,9 +106,8 @@
                         ></v-text-field>
 
                         <ColorPicker
-                            v-model="
-                                block.metadata.config.items[itemIndex].color
-                            "
+                            v-if="!block.metadata.config.display.autocolor"
+                            v-model="block.metadata.config.items[index].color"
                             :label="
                                 $t(
                                     'windward.core.components.settings.clickable_icon.item_color'
@@ -79,40 +121,36 @@
                             )
                         }}</span>
                         <TextEditor
-                            :api_key="api_key"
-                            v-model="
-                                block.metadata.config.items[itemIndex].body
-                            "
+                            v-model="block.metadata.config.items[index].body"
+                            :height="200"
                         ></TextEditor>
-                        <v-divider class="mt-3 mb-3" />
-                        <v-btn
-                            class="mt-2"
-                            color="primary"
-                            block
-                            outlined
-                            @click="onRemoveElement(itemIndex)"
-                            ><v-icon>mdi-delete-outline</v-icon
-                            >{{ $t('shared.forms.delete') }}</v-btn
-                        >
-                    </v-expansion-panel-content>
-                </v-expansion-panel>
-            </v-expansion-panels>
+                    </template>
+                </SortableExpansionPanel>
+            </v-col>
         </v-container>
     </div>
 </template>
 <script>
 import _ from 'lodash'
-import Crypto from '~/helpers/Crypto'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
 import TextEditor from '~/components/Text/TextEditor'
+import TextIconPicker from '~/components/TextIconPicker.vue'
 import ColorPicker from '~/components/ColorPicker.vue'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
+
 export default {
     name: 'ClickableIconsSettings',
     components: {
+        SortableExpansionPanel,
         TextEditor,
+        TextIconPicker,
         ColorPicker,
     },
     extends: BaseContentSettings,
+
+    data() {
+        return {}
+    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -129,66 +167,43 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (_.isEmpty(this.block.metadata.config.display)) {
+            this.block.metadata.config.display = {
+                show_title: false,
+                show_background: false,
+                round_icon: false,
+                italic_icon: false,
+                autocolor: true,
+            }
+        }
         if (_.isEmpty(this.block.metadata.config.items)) {
             this.block.metadata.config.items = []
         }
     },
-    data() {
-        return {
-            valid: true,
-            debounce: null,
-            loading: false,
-            api_key: process.env.TINY_MCE_API_KEY,
-            title: '',
-            description: '',
-            items: [
-                {
-                    icon: '',
-                    title: '',
-                    body: '',
-                    active: false,
-                },
-            ],
-            expansionPanelKey: '0',
-        }
-    },
     mounted() {
         if (this.block.metadata.config.items.length <= 0) {
             this.onAddElement()
         }
     },
-    beforeDestroy() {
-        if (this.debouncer) {
-            clearTimeout(this.debouncer)
-        }
-    },
-
     methods: {
-        async onBeforeSave() {
-            this.block.metadata.config.items = this.items
-        },
         onAddElement() {
             const defaultObject = {
                 icon: '',
                 title: '',
-                body: '',
-                color: {},
+                body: '<p></p>',
+                color: {
+                    class: '',
+                },
                 active: false,
             }
             this.block.metadata.config.items.push(defaultObject)
         },
         onRemoveElement(index) {
             this.block.metadata.config.items.splice(index, 1)
-            this.expansionPanelKey = Crypto.id()
+        },
+        isIcon(str) {
+            return str && _.isString(str) && str.indexOf('mdi-') === 0
         },
     },
 }
 </script>
-<style scoped>
-.v-progress-circular {
-    margin: 1rem;
-}
-.btn-add {
-    width: 100%;
-}
-</style>