@windward/core 0.4.2 → 0.5.0

package/components/Content/Blocks/ScenarioChoice.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-container>
+        <v-container class="pa-0">
             <h2>{{ block.metadata.config.title }}</h2>
             <h4>{{ block.metadata.config.description }}</h4>
             <p>
@@ -23,7 +23,7 @@
                 </v-btn>
             </div>
         </v-container>
-        <v-container>
+        <v-container class="pa-0">
             <v-row
                 v-for="(item, itemIndex) in block.metadata.config.items"
                 :key="itemIndex"

package/components/Content/Blocks/UserUpload.vue

@@ -1,26 +1,22 @@
 <template>
-    <v-container>
-        <div v-if="render || !block.metadata.config.expand">
+    <v-container class="pa-0">
+        <div>
+            <h2 v-if="block.metadata.config.title">
+                {{ block.metadata.config.title }}
+            </h2>
             <v-row>
                 <v-col cols="12">
-                    {{
-                        $t(
-                            'windward.core.components.content.blocks.user_upload.instructions'
-                        )
-                    }}
-                    <p v-if="!block.metadata.config.instructions">
-                        {{
-                            $t(
-                                'windward.core.components.content.blocks.user_upload.instructions_none'
-                            )
-                        }}
-                    </p>
                     <TextViewer
+                        v-if="render || !block.__expandInstructions"
                         v-model="block.metadata.config.instructions"
                     ></TextViewer>
+                    <TextEditor
+                        v-if="!render && block.__expandInstructions"
+                        v-model="block.metadata.config.instructions"
+                    />
                 </v-col>
-                <v-col cols="12">
-                    <v-alert v-if="!blockExists" color="warning">
+                <v-col v-if="!blockExists" cols="12">
+                    <v-alert color="warning">
                         <p>
                             {{
                                 $t(
@@ -73,20 +69,6 @@
                 </v-col>
             </v-row>
         </div>
-        <div v-if="!render && block.metadata.config.expand">
-            <v-row>
-                <v-col cols="12">
-                    <h3 class="pb-4">
-                        {{
-                            $t(
-                                'windward.core.components.content.blocks.user_upload.instructions_title'
-                            )
-                        }}
-                    </h3>
-                    <TextEditor v-model="block.metadata.config.instructions" />
-                </v-col>
-            </v-row>
-        </div>
     </v-container>
 </template>
 
@@ -119,6 +101,9 @@ export default {
         if (_.isEmpty(this.block)) {
             this.block = {}
         }
+        // Default the instructions to collapsed
+        this.block.__expandInstructions = false
+
         if (_.isEmpty(this.block.body)) {
             this.block.body = this.$t(
                 'windward.core.shared.content_blocks.title.user_upload'
@@ -130,9 +115,6 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
-        if (_.isEmpty(this.block.metadata.config.expand)) {
-            this.block.metadata.config.expand = false
-        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }
@@ -271,9 +253,6 @@ export default {
                     .first()
             }
         },
-        async onBeforeSave() {
-            return (this.block.metadata.config.expand = false)
-        },
     },
 }
 </script>

package/components/Content/Blocks/Video.vue

@@ -21,7 +21,7 @@
             type="image, image, list-item-avatar"
             class="reload-skeleton"
         ></v-skeleton-loader>
-        <h2 v-if="block.metadata.config.title" class="pl-4">
+        <h2 v-if="block.metadata.config.title">
             {{ block.metadata.config.title }}
         </h2>
         <VuetifyPlayer
@@ -158,10 +158,7 @@ export default {
     data() {
         return {
             saveState: false,
-
             fileTab: null,
-
-            saveKey: null, // Used for checking changes in settings
             // Default config settings
             defaultConfig: {
                 // Default settings for new blocks
@@ -247,63 +244,11 @@ export default {
             this.$set(this.block, 'assets', [])
         }
     },
-    mounted() {
-        this.saveKey = this.settingsKey()
-    },
+    mounted() {},
     methods: {
-        /**
-         * Hash out the settings to see if there's any changes
-         */
-        settingsKey() {
-            const str = JSON.stringify(this.block.metadata.config)
-            return str.split('').reduce(function (a, b) {
-                a = (a << 5) - a + b.charCodeAt(0)
-                return a & a
-            }, 0)
-        },
-        async onActionPanelEdit() {
-            // Push any setting changes up
-            await this.onBeforeSave
-
-            // We're moving from edit mode to render mode
-            // Prompt about any unsaved changes
-            if (!this.render && this.settingsKey() !== this.saveKey) {
-                const self = this
-                this.$toast.info(this.$t('shared.forms.unsaved'), {
-                    icon: 'mdi-help',
-                    duration: null,
-                    action: [
-                        {
-                            text: this.$t('shared.forms.cancel'),
-                            onClick: (e, toastObject) => {
-                                toastObject.goAway(0)
-                                self.render = true
-                            },
-                        },
-                        {
-                            text: this.$t('shared.forms.confirm'),
-                            // router navigation
-                            onClick: async (e, toastObject) => {
-                                await this.onBeforeSave()
-                                // Saved, rehash the setting changes key
-                                this.saveKey = this.settingsKey()
-
-                                self.render = true
-                                toastObject.goAway(0)
-                            },
-                        },
-                    ],
-                })
-            } else {
-                this.render = !this.render
-            }
-        },
         async onBeforeSave() {
             this.block.body = 'video'
         },
-        onAfterSave() {
-            this.saveKey = this.settingsKey()
-        },
     },
 }
 </script>

package/components/Settings/AccordionSettings.vue

@@ -18,9 +18,7 @@
                     <template #header="{ item }">{{
                         item.header
                             ? item.header
-                            : $t(
-                                  'windward.core.shared.settings.title.placeholder'
-                              )
+                            : $t('components.content.settings.base.placeholder')
                     }}</template>
                     <template #body="{ index }">
                         <v-container :key="expansionPanelKey">
@@ -31,9 +29,7 @@
                                 :autofocus="true"
                                 outlined
                                 :label="
-                                    $t(
-                                        'windward.core.shared.settings.title.title'
-                                    )
+                                    $t('components.content.settings.base.title')
                                 "
                                 :disabled="render"
                                 @focus="onTextAreaFocus"
@@ -41,6 +37,7 @@
                             <v-btn
                                 text
                                 elevation="0"
+                                class="mb-3"
                                 :disabled="render"
                                 @click="
                                     onToggleExpand(

package/components/Settings/BlockQuoteSettings.vue

@@ -7,7 +7,7 @@
                 outlined
                 :counter="50"
                 :autofocus="true"
-                :label="$t('windward.core.shared.settings.title.title')"
+                :label="$t('components.content.settings.base.title')"
                 ref="title"
                 :disabled="render"
             ></v-text-field>
@@ -16,7 +16,7 @@
                 outlined
                 auto-grow
                 :counter="255"
-                :label="$t('windward.core.shared.settings.title.instructions')"
+                :label="$t('components.content.settings.base.instructions')"
                 :disabled="render"
             ></v-textarea>
         </v-container>

package/components/Settings/EmailSettings.vue

@@ -8,7 +8,7 @@
                 outlined
                 :counter="50"
                 :autofocus="true"
-                :label="$t('windward.core.shared.settings.title.title')"
+                :label="$t('components.content.settings.base.title')"
                 :disabled="render"
             ></v-text-field>
             <v-textarea
@@ -16,7 +16,7 @@
                 outlined
                 auto-grow
                 :counter="255"
-                :label="$t('windward.core.shared.settings.title.instructions')"
+                :label="$t('components.content.settings.base.instructions')"
                 :disabled="render"
             ></v-textarea>
         </v-container>

package/components/Settings/FileDownloadSettings.vue

@@ -0,0 +1,168 @@
+<template>
+    <div>
+        <v-text-field
+            v-model="block.metadata.config.title"
+            outlined
+            :counter="50"
+            :autofocus="true"
+            :label="$t('components.content.settings.base.title_optional')"
+            :disabled="render"
+        ></v-text-field>
+        <TextEditor
+            v-model="block.metadata.config.instructions"
+            :disabled="render"
+            :label="
+                $t('components.content.settings.base.instructions_optional')
+            "
+        />
+        <v-switch
+            v-model="block.metadata.config.display_detailed"
+            :label="
+                $t(
+                    'windward.core.components.settings.file_download.display_detailed'
+                )
+            "
+            :disabled="render"
+        ></v-switch>
+        <v-spacer class="my-6" />
+
+        <SortableExpansionPanel
+            v-model="block.metadata.config.items"
+            :disabled="render"
+            @click:close="onRemoveElement($event)"
+        >
+            <template #header="{ item }">{{ filename(item) }}</template>
+            <template #body="{ index }">
+                <v-container>
+                    <v-text-field
+                        v-model="block.metadata.config.items[index].name"
+                        :autofocus="true"
+                        outlined
+                        :label="
+                            $t(
+                                'windward.core.components.settings.file_download.filename_optional'
+                            )
+                        "
+                        :disabled="render"
+                    ></v-text-field>
+                    <v-container class="pa-0 pt-3">
+                        <ContentBlockAsset
+                            v-model="block.metadata.config.items[index].file"
+                            :assets.sync="block.assets"
+                            :label="$t('shared.file.file')"
+                            :disabled="render"
+                        >
+                            <template #title>
+                                {{
+                                    $t(
+                                        'windward.core.components.settings.file_download.place_file'
+                                    )
+                                }}
+                            </template>
+                        </ContentBlockAsset>
+                    </v-container>
+                </v-container>
+            </template>
+        </SortableExpansionPanel>
+
+        <v-container class="pa-0">
+            <v-row justify="center" class="my-4">
+                <v-btn
+                    color="primary"
+                    elevation="0"
+                    :disabled="render"
+                    @click="onAddElement"
+                    ><v-icon>mdi-plus</v-icon
+                    >{{
+                        $t(
+                            'windward.core.components.settings.file_download.add'
+                        )
+                    }}</v-btn
+                >
+            </v-row>
+        </v-container>
+    </div>
+</template>
+<script>
+import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
+import TextEditor from '~/components/Text/TextEditor'
+import _ from 'lodash'
+import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
+
+export default {
+    name: 'FileDownloadSettings',
+    extends: BaseContentSettings,
+    components: { TextEditor, SortableExpansionPanel },
+    data() {
+        return {}
+    },
+    computed: {
+        filename() {
+            return (item) => {
+                let filename = item.name
+
+                if (!filename && item.file) {
+                    const asset = this.resolveAsset(item.file)
+                    filename =
+                        _.get(asset, 'name', '') ||
+                        _.get(asset, 'asset.name', '')
+                }
+
+                if (!filename && item.file) {
+                    filename = this.$t(
+                        'windward.core.components.settings.file_download.no_file_selected'
+                    )
+                }
+                return filename
+            }
+        },
+    },
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = this.$t(
+                'windward.core.shared.content_blocks.title.file_download'
+            )
+        }
+        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 (!_.isBoolean(this.block.metadata.config.display_detailed)) {
+            this.block.metadata.config.display_detailed = false
+        }
+
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            this.block.metadata.config.items = []
+        }
+    },
+    mounted() {},
+    methods: {
+        onAddElement() {
+            const defaultItem = {
+                name: '',
+                file: null,
+            }
+            this.block.metadata.config.items.push(defaultItem)
+        },
+        onRemoveElement(index) {
+            this.block.metadata.config.items.splice(index, 1)
+        },
+    },
+}
+</script>
+<style scoped>
+.v-progress-circular {
+    margin: 1rem;
+}
+</style>

package/components/Settings/UserUploadSettings.vue

@@ -1,5 +1,33 @@
 <template>
     <div>
+        <v-text-field
+            v-model="block.metadata.config.title"
+            outlined
+            :counter="50"
+            :autofocus="true"
+            :label="$t('components.content.settings.base.title_optional')"
+            :disabled="render"
+        ></v-text-field>
+        <v-btn
+            elevation="0"
+            text
+            class="mb-4"
+            :disabled="render"
+            @click="block.__expandInstructions = !block.__expandInstructions"
+        >
+            <v-icon v-if="!block.__expandInstructions" color="primary"
+                >mdi-arrow-expand-all</v-icon
+            >
+            <v-icon v-if="block.__expandInstructions" color="primary">
+                mdi-arrow-collapse-all
+            </v-icon>
+        </v-btn>
+        <TextEditor
+            v-model="block.metadata.config.instructions"
+            :label="$t('components.content.settings.base.instructions')"
+            :loading="block.__expandInstructions"
+            :disabled="render"
+        />
         <v-switch
             v-model="block.metadata.config.uploadSettings.multiple"
             :label="
@@ -22,34 +50,6 @@
             "
             :disabled="render"
         ></v-select>
-        <v-btn elevation="0" text class="mt-4" :disabled="render" @click="onToggleExpand()">
-            <v-icon v-if="!block.metadata.config.expand" color="primary"
-                >mdi-arrow-expand-all</v-icon
-            >
-            <v-icon v-if="block.metadata.config.expand" color="primary">
-                mdi-arrow-collapse-all
-            </v-icon>
-        </v-btn>
-        <v-row v-if="!block.metadata.config.expand">
-            <v-col cols="12">
-                <h4 class="pb-4 pt-4">
-                    {{
-                        $t(
-                            'windward.core.components.content.blocks.user_upload.instructions_title'
-                        )
-                    }}
-                </h4>
-                <TextEditor
-                    v-model="block.metadata.config.instructions"
-                    :disabled="render"
-                />
-            </v-col>
-        </v-row>
-        <v-skeleton-loader
-            v-bind="attrs"
-            type=" table-row-divider, list-item, divider, list-item, divider, image,image"
-            v-show="block.metadata.config.expand"
-        ></v-skeleton-loader>
     </div>
 </template>
 <script>
@@ -66,6 +66,10 @@ export default {
         if (_.isEmpty(this.block)) {
             this.block = {}
         }
+
+        // Default the instructions to collapsed
+        this.block.__expandInstructions = false
+
         if (_.isEmpty(this.block.body)) {
             this.block.body = this.$t(
                 'windward.core.shared.content_blocks.title.user_upload'
@@ -77,10 +81,10 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
-        if (_.isEmpty(this.block.metadata.config.expand)) {
-            this.block.metadata.config.expand = false
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
         }
-        if (_.isEmpty(this.block.metadata.config.instructions)) {
+        if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.instructions = ''
         }
         if (_.isEmpty(this.block.metadata.config.uploadSettings)) {
@@ -95,7 +99,6 @@ export default {
             valid: true,
             debounce: null,
             loading: false,
-            key: '',
             acceptOptions: [
                 {
                     name: this.$t(
@@ -142,13 +145,7 @@ export default {
         }
     },
 
-    methods: {
-        onToggleExpand() {
-            this.key = Crypto.id()
-            return (this.block.metadata.config.expand =
-                !this.block.metadata.config.expand)
-        },
-    },
+    methods: {},
 }
 </script>
 <style scoped>

package/components/utils/ContentViewer.vue

@@ -1,5 +1,6 @@
 <template>
     <component
+        v-show="value"
         :class="textViewer ? 'text-viewer' : ''"
         :is="convertedContent"
     ></component>

package/components/utils/TinyMCEWrapper.vue

@@ -6,6 +6,7 @@
                 (isDarkTheme ? '--theme-dark' : '--theme-light')
             "
         >
+            <label v-if="label" class="editor-label">{{ label }}</label>
             <Editor
                 :key="seed + (isDarkTheme ? '-theme-dark' : '-theme-light')"
                 v-model="text"
@@ -44,7 +45,7 @@
                 </v-btn-toggle>
 
                 <v-btn
-                    v-if="render"
+                    v-if="render && !inline"
                     color="primary"
                     elevation="0"
                     outlined
@@ -142,6 +143,7 @@ export default {
         },
         root_block: { type: String, required: false, default: 'div' },
         label: { type: String, required: true, default: '' },
+        inline: { type: Boolean, required: false, default: false },
         allowRead: { type: Boolean, required: false, default: false },
     },
     beforeMount() {
@@ -242,6 +244,7 @@ export default {
                     'WindwardToolKit',
                 ],
                 toolbar: this.filteredToolbar,
+                inline: this.inline,
                 table_advtab: false,
                 table_cell_advtab: false,
                 table_row_advtab: false,
@@ -321,7 +324,7 @@ export default {
                         value: 'windward-table-subject-report',
                     },
                 ],
-                setup() {
+                setup(_editor) {
                     // Here we can add plugin
                     getTinymce().PluginManager.add(
                         'WindwardToolKit',
@@ -429,9 +432,7 @@ export default {
                 ],
                 placeholder: this.label
                     ? this.label
-                    : this.$t(
-                          'windward.core.shared.settings.title.placeholder'
-                      ),
+                    : this.$t('components.content.settings.base.placeholder'),
                 //required as it will be displayed as inline style in tinymce renderer
                 skin: false,
                 content_css: this.$vuetify.theme.isDark ? 'dark' : 'default',
@@ -534,12 +535,22 @@ export default {
 }
 </script>
 
+<style lang="scss" scoped>
+.editor-label {
+    font-size: 1rem;
+    margin-top: -1rem;
+    display: block;
+    transform-origin: top left;
+    transform: scale(0.75);
+}
+</style>
+
 <style lang="scss">
-html:has(body.theme--light) {
+html body.theme--light {
     @import './assets/tinymce/ui/light/content.scss';
     @import './assets/tinymce/ui/light/skin.scss';
 }
-html:has(body.theme--dark) {
+html body.theme--dark {
     @import './assets/tinymce/ui/dark/content.scss';
     @import './assets/tinymce/ui/dark/skin.scss';
 }

package/components/utils/assets/tinymce/content/global.scss

@@ -1,3 +1,4 @@
+@import '~/assets/sass/global.scss';
 table {
     max-width: 100%;
     border: 1px solid var(--v-primary-base);
@@ -190,6 +191,15 @@ body {
     font-family: 'Roboto', sans-serif;
 }
 
+h1, h2, h3, h4, h5, h6, ul, ol, table {
+    margin-top:16px;
+    margin-bottom:16px;
+}
+
+li::marker {
+    font-weight: bold;
+}
+
 html:has(body.editor--theme-light) {
     @import './light/content.scss';
 }