@windward/core 0.2.0 → 0.2.2

package/components/Content/Blocks/Accordion.vue

@@ -1,17 +1,20 @@
 <template>
     <div>
         <v-expansion-panels
-            v-model="block.metadata.config.currentAccordion"
+            v-model="selectedPanels"
             flat
             accordion
             focusable
-            id="expansion-panel-setting"
+            class="expansion-panels-container"
         >
             <v-expansion-panel
                 v-for="(item, itemIndex) in block.metadata.config.items"
                 :key="itemIndex"
             >
-                <v-expansion-panel-header class="header" color="primary">
+                <v-expansion-panel-header
+                    class="expansion-panel-header"
+                    color="primary"
+                >
                     {{
                         item.header === '' || item.header === null
                             ? 'Item ' + (itemIndex + 1)
@@ -19,7 +22,7 @@
                     }}
                 </v-expansion-panel-header>
                 <v-expansion-panel-content
-                    class="body"
+                    class="expansion-panel-body"
                     :key="expansionPanelKey"
                 >
                     <v-container>
@@ -74,19 +77,30 @@ export default {
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
         }
-        if (_.isEmpty(this.block.metadata.config.currentAccordion)) {
-            this.block.metadata.config.currentAccordion = 0
+        if (_.isEmpty(this.block.metadata.config.selectedPanels)) {
+            this.block.metadata.config.selectedPanels = 0
         }
-        this.block.body = 'accordion'
+        this.block.body = this.$t(
+            'windward.core.shared.content_blocks.title.accordion'
+        )
     },
     data() {
         return {
             expansionPanelKey: '0',
             editingInContentItem: false,
+            selectedPanels: 0,
         }
     },
     watch: {
         value(newValue) {
+            if (
+                !this.render &&
+                this.selectedPanels !== newValue.metadata.config.selectedPanels
+            ) {
+                // update editing content block
+                this.selectedPanels = newValue.metadata.config.selectedPanels
+                this.expansionPanelKey = Crypto.id()
+            }
             const length = newValue.metadata.config.items.length
             let counter = 0
             newValue.metadata.config.items.forEach((element) => {
@@ -110,6 +124,7 @@ export default {
                 this.block.metadata.config.items.forEach((element) => {
                     element.expand = false
                 })
+                this.selectedPanels = 0
             }
         },
     },
@@ -118,21 +133,20 @@ export default {
             this.block.metadata.config.items.forEach((element) => {
                 element.expand = false
             })
-            this.block.metadata.config.currentAccordion = null
         },
     },
 }
 </script>
 
 <style lang="scss" scoped>
-.header {
+.expansion-panel-header {
     color: white;
     margin-top: 1px;
 }
-.body {
+.expansion-panel-body {
     background: var(--v-surface-base);
 }
-#expansion-panel-setting {
+.expansion-panels-container {
     z-index: 0;
 }
 </style>

package/components/Content/Blocks/BlockQuote.vue

@@ -70,7 +70,9 @@ export default {
                 source_type: '',
             }
         }
-        this.block.body = 'block quote'
+        this.block.body = this.$t(
+            'windward.core.components.content.blocks.block_quote.body'
+        )
     },
     data() {
         return {

package/components/Content/Blocks/ClickableIcons.vue

@@ -71,6 +71,35 @@ export default {
         TextViewer,
     },
     extends: BaseContentBlock,
+    beforeMount() {
+        // Apply the default config
+        this.block.body = this.$t(
+            'windward.core.shared.content_blocks.title.clickable_icons'
+        )
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            this.block.metadata.config.items = []
+        }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.description)) {
+            this.block.metadata.config.description = ''
+        }
+        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 (this.block.metadata.config.items.length) {
+            for (const index in this.block.metadata.config.items) {
+                this.block.metadata.config.items[index].active = false
+            }
+        }
+    },
     data() {
         return {}
     },
@@ -146,33 +175,6 @@ export default {
             }
         },
     },
-    beforeMount() {
-        // Apply the default config
-        this.block.body = 'clickable icons'
-        if (_.isEmpty(this.block.metadata.config.items)) {
-            this.block.metadata.config.items = []
-        }
-        if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
-        }
-        if (_.isEmpty(this.block.metadata.config.description)) {
-            this.block.metadata.config.description = ''
-        }
-        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 (this.block.metadata.config.items.length) {
-            for (const index in this.block.metadata.config.items) {
-                this.block.metadata.config.items[index].active = false
-            }
-        }
-    },
     methods: {
         isIcon(str) {
             return str && _.isString(str) && str.indexOf('mdi-') === 0

package/components/Content/Blocks/Email.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-container class="container-left-border">
+    <v-container>
         <v-row
             v-if="
                 block.metadata.config.title ||
@@ -16,16 +16,20 @@
             </v-col>
         </v-row>
         <v-row>
-            <v-expansion-panels v-model="selectedPanels" accordion>
+            <v-expansion-panels
+                v-model="selectedPanels"
+                :key="expansionPanelKey"
+                accordion
+            >
                 <v-container
                     class="pa-0 primary container-subject d-flex justify-center align-center"
                 >
-                    <v-row class="d-flex pa-5">
+                    <v-row class="d-flex ma-5">
                         <v-col cols="6">
                             {{
-                                block.metadata.config.subject
-                                    ? block.metadata.config.subject
-                                    : 'Subject'
+                                $t(
+                                    'windward.core.components.content.blocks.email.email'
+                                )
                             }}
                         </v-col>
                         <v-col
@@ -75,10 +79,10 @@
                                 >
                             </v-col>
                             <v-col
-                                xl="1"
-                                lg="3"
-                                md="11"
-                                sm="10"
+                                xl="4"
+                                lg="4"
+                                md="5"
+                                sm="5"
                                 xs="10"
                                 class="d-flex align-center"
                             >
@@ -88,12 +92,16 @@
                             </v-col>
                             <v-col
                                 v-if="selectedPanels !== index"
-                                xl="10"
-                                lg="8"
+                                xl="7"
+                                lg="7"
+                                md="6"
+                                sm="5"
                                 class="d-flex align-center container-body-preview"
                             >
                                 <div class="div-preview">
-                                    {{ onRemoveTags(item.body) }}
+                                    {{
+                                        item.body ? onRemoveTags(item.body) : ''
+                                    }}
                                 </div>
                             </v-col>
                         </v-row>
@@ -127,18 +135,25 @@
                                             )
                                         }}: {{ item.cc }}
                                     </div>
+                                    <div class="div-details-cc">
+                                        {{
+                                            $t(
+                                                'windward.core.components.content.blocks.email.subject'
+                                            )
+                                        }}: {{ item.subject }}
+                                    </div>
                                 </v-col>
                             </v-row>
                             <v-row>
                                 <v-col cols="1"></v-col>
                                 <v-col class="pl-4">
                                     <TextViewer
-                                        v-if="!item.expand"
+                                        v-if="!item.tinymce_expand"
                                         v-model="item.body"
                                         text-viewer
                                     ></TextViewer>
                                     <TextEditor
-                                        v-if="!render && item.expand"
+                                        v-if="!render && item.tinymce_expand"
                                         v-model="
                                             block.metadata.config.emails[index]
                                                 .body
@@ -155,7 +170,7 @@
                         >
                             <v-row class="pt-4">
                                 <v-col cols="10" class="pa-0">
-                                    <v-btn color="primary" outlined>
+                                    <v-btn color="primary" text>
                                         <v-icon>mdi-reply</v-icon>
                                         {{
                                             $t(
@@ -163,7 +178,7 @@
                                             )
                                         }}</v-btn
                                     >
-                                    <v-btn color="primary" outlined>
+                                    <v-btn color="primary" text>
                                         <v-icon>mdi-reply-all</v-icon>
                                         {{
                                             $t(
@@ -171,7 +186,7 @@
                                             )
                                         }}</v-btn
                                     >
-                                    <v-btn color="primary" outlined>
+                                    <v-btn color="primary" text>
                                         <v-icon>mdi-share</v-icon>
                                         {{
                                             $t(
@@ -199,6 +214,7 @@
 </template>
 <script>
 import _ from 'lodash'
+import Crypto from '~/helpers/Crypto'
 import TextEditor from '~/components/Text/TextEditor'
 import TextViewer from '~/components/Text/TextViewer'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
@@ -231,7 +247,12 @@ export default {
         if (_.isEmpty(this.block.metadata.config.activeEmail)) {
             this.block.metadata.config.activeEmail = 0
         }
-        this.block.body = 'emails'
+        if (_.isEmpty(this.block.metadata.config.selectedPanels)) {
+            this.block.metadata.config.selectedPanels = 0
+        }
+        this.block.body = this.$t(
+            'windward.core.components.content.blocks.email.title'
+        )
     },
     data() {
         return {
@@ -240,18 +261,34 @@ export default {
         }
     },
     watch: {
-        render() {
-            if (this.render) {
+        render(newValue) {
+            if (newValue) {
                 this.block.metadata.config.emails.forEach((element) => {
-                    element.expand = false
+                    element.tinymce_expand = false
                 })
                 this.selectedPanels =
                     this.block.metadata.config.emails.length - 1
+            } else {
+                // when in editing mode first panel opens initially
+                this.selectedPanels = 0
+            }
+        },
+        value(newValue) {
+            if (
+                !this.render &&
+                this.selectedPanels !== newValue.metadata.config.selectedPanels
+            ) {
+                // update editing content block
+                this.selectedPanels = newValue.metadata.config.selectedPanels
+                this.expansionPanelKey = Crypto.id()
             }
         },
     },
     mounted() {
-        this.selectedPanels = this.block.metadata.config.emails.length - 1
+        this.selectedPanels =
+            this.block.metadata.config.emails.length === 0
+                ? this.block.metadata.config.emails.length
+                : this.block.metadata.config.emails.length - 1
     },
     methods: {
         onRemoveTags(body) {
@@ -282,7 +319,7 @@ export default {
 .v-expansion-panel {
     border: 1px solid var(--v-primary-base);
 }
-@media only screen and (max-width: 1264px) {
+@media only screen and (max-width: 800px) {
     .container-body-preview {
         display: none !important;
     }
@@ -297,4 +334,7 @@ export default {
 .container-header {
     width: 100%;
 }
+.v-expansion-panels {
+    z-index: 0 !important;
+}
 </style>

package/components/Content/Blocks/Feedback.vue

@@ -90,7 +90,8 @@
             v-if="render && !doesFeedbackExist"
         >
             <v-btn
-                color="error"
+                color="primary"
+                outlined
                 class="text-center mt-4 mr-2"
                 @click="onReset()"
                 >{{
@@ -186,7 +187,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.definition)) {
             this.block.metadata.config.definition = {}
         }
-        this.block.body = 'feedback'
+        this.block.body = this.$t(
+            'windward.core.components.content.blocks.feedback.feedback'
+        )
     },
     data() {
         return {
@@ -318,14 +321,3 @@ export default {
     },
 }
 </script>
-<style scoped>
-.question {
-    font-weight: bold;
-}
-.radio-group {
-    width: 100% !important;
-}
-.likert-radio {
-    margin-left: 55px;
-}
-</style>

package/components/Content/Blocks/Image.vue

@@ -78,7 +78,7 @@
 
 <script>
 import _ from 'lodash'
-import DialogBox from '~/components/DialogBox'
+import DialogBox from '~/components/DialogBox.vue'
 import TextViewer from '~/components/Text/TextViewer'
 import Crypto from '~/helpers/Crypto'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
@@ -128,6 +128,10 @@ export default {
         },
         imageClass() {
             let imageClass = ''
+            // change cursor to pointer for images that open in larger modal
+            if (this.block.metadata.config.modal) {
+                imageClass += ' container-pointer'
+            }
             // If NOT hide background, inclide the extra class
             if (!_.get(this.block.metadata, 'config.hide_background', false)) {
                 imageClass += ' img-white'
@@ -174,6 +178,9 @@ export default {
     text-align: center;
     margin-top: -175px;
 }
+.container-pointer {
+    cursor: pointer;
+}
 ::v-deep .v-skeleton-loader.v-skeleton-loader--is-loading {
     .v-skeleton-loader__image {
         height: 100%;

package/components/Content/Blocks/Math.vue

@@ -33,7 +33,9 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = 'Math Editor'
+            this.block.body = this.$t(
+                'windward.core.shared.content_blocks.title.math'
+            )
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}

package/components/Content/Blocks/OpenResponseCollate.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div v-if="block.metadata.config.linked.length">
-            <v-btn color="primary" block @click="onCollate">
+            <v-btn color="primary" outlined block @click="onCollate">
                 <v-icon class="mr-3">mdi-file-word</v-icon>
                 {{
                     $t(

package/components/Content/Blocks/ScenarioChoice.vue

@@ -202,7 +202,9 @@ export default {
     },
     beforeMount() {
         // Apply the default config
-        this.block.body = 'scenario choice'
+        this.block.body = this.$t(
+            'windward.core.shared.content_blocks.title.scenario_choice'
+        )
         if (_.isEmpty(this.block.metadata.config.items)) {
             this.block.metadata.config.items = []
         }

package/components/Content/Blocks/Tab.vue

@@ -49,7 +49,9 @@ export default {
     },
     extends: BaseContentBlock,
     beforeMount() {
-        this.block.body = 'tab'
+        this.block.body = this.$t(
+            'windward.core.shared.content_blocks.title.tab'
+        )
         if (_.isEmpty(this.block.metadata.config.items)) {
             const defaultObject = {
                 tabHeader: '',

package/components/Content/Blocks/UserUpload.vue

@@ -57,10 +57,10 @@
                                 "
                             ></FileDropZone>
 
-                            <v-container class="primary lighten-1 text-center">
+                            <v-container class="text-center">
                                 <v-btn
                                     :disabled="!canUpload || loading"
-                                    color="success"
+                                    color="primary"
                                     class="text-center"
                                     @click="handleUpload"
                                 >
@@ -119,7 +119,9 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = 'user uplaod'
+            this.block.body = this.$t(
+                'windward.core.shared.content_blocks.title.user_upload'
+            )
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}

package/components/Settings/AccordionSettings.vue

@@ -10,11 +10,9 @@
                 </p>
                 <SortableExpansionPanel
                     v-model="block.metadata.config.items"
-                    v-bind:currentPanel.sync="
-                        block.metadata.config.currentAccordion
-                    "
                     @click:close="onRemoveElement($event)"
                     @change="onDragged"
+                    @update:currentPanel="onUpdatePanel"
                 >
                     <template #header="{ item }">{{
                         item.header
@@ -26,16 +24,17 @@
                     <template #body="{ index }">
                         <v-container :key="expansionPanelKey">
                             <v-text-field
-                                outlined
-                                :autofocus="true"
                                 v-model="
                                     block.metadata.config.items[index].header
                                 "
+                                :autofocus="true"
+                                outlined
                                 :label="
                                     $t(
                                         'windward.core.shared.settings.title.title'
                                     )
                                 "
+                                @focus="onTextAreaFocus"
                             ></v-text-field>
                             <v-btn
                                 @click="
@@ -43,12 +42,14 @@
                                         block.metadata.config.items[index]
                                     )
                                 "
+                                text
                             >
                                 <v-icon
                                     v-if="
                                         !block.metadata.config.items[index]
                                             .expand
                                     "
+                                    color="primary"
                                     >mdi-arrow-expand-all</v-icon
                                 >
                                 <v-icon
@@ -56,6 +57,7 @@
                                         block.metadata.config.items[index]
                                             .expand
                                     "
+                                    color="primary"
                                 >
                                     mdi-arrow-collapse-all
                                 </v-icon>
@@ -67,6 +69,11 @@
                                 v-model="
                                     block.metadata.config.items[index].content
                                 "
+                                :label="
+                                    $t(
+                                        'windward.core.components.settings.accordion.label'
+                                    )
+                                "
                             ></TextEditor>
                         </v-container>
                     </template>
@@ -131,11 +138,8 @@ export default {
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
         }
-        if (_.isEmpty(this.block.metadata.config.currentAccordion)) {
-            this.block.metadata.config.currentAccordion = 0
-        }
         this.block.body = this.$t(
-            'windward.core.components.settings.accordion.accordion'
+            'windward.core.shared.content_blocks.title.accordion'
         )
     },
     data() {
@@ -150,8 +154,20 @@ export default {
             clearTimeout(this.debouncer)
         }
     },
-
+    mounted() {
+        this.block.metadata.config.selectedPanels = 0
+    },
     methods: {
+        onUpdatePanel($event) {
+            if ($event !== this.block.metadata.config.selectedPanels) {
+                //catch click event to open selected panel to edit
+                this.block.metadata.config.selectedPanels = $event
+            } else {
+                // if user clicks same panel again expansion panel closes
+                // setting selected to null will close content blocks expansion panels
+                this.block.metadata.config.selectedPanels = null
+            }
+        },
         onAddElement() {
             const default_item = {
                 header: '',
@@ -159,7 +175,7 @@ export default {
                 content: '',
             }
             this.block.metadata.config.items.push(default_item)
-            this.block.metadata.config.currentAccordion =
+            this.block.metadata.config.selectedPanels =
                 this.block.metadata.config.items.length - 1
         },
         onRemoveElement(index) {
@@ -173,6 +189,13 @@ export default {
         onDragged() {
             // need to remount body after dragged to update the content body on the element
             this.expansionPanelKey = Crypto.id()
+            //close all panels on drag, leaving them open confuses the tracking as indexes changes around
+            this.block.metadata.config.selectedPanels = null
+        },
+        onTextAreaFocus($event) {
+            // prevent focus error that is happening on text field because of last pass
+            $event.preventDefault()
+            $event.stopPropagation()
         },
     },
 }

package/components/Settings/BlockQuoteSettings.vue

@@ -117,7 +117,7 @@ export default {
             }
         }
         this.block.body = this.$t(
-            'windward.core.shared.settings.title.block_quote'
+            'windward.core.components.content.blocks.block_quote.body'
         )
     },
     data() {

package/components/Settings/ClickableIconsSettings.vue

@@ -171,7 +171,7 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = 'clickable icons'
+            this.block.body = this.$t('windward.core.shared.content_blocks.title.clickable_icons')
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}