@windward/core 0.0.9 → 0.1.1

package/components/Content/Blocks/Accordion.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
         <v-expansion-panels
+            v-model="block.metadata.config.currentAccordion"
             flat
             accordion
             focusable
@@ -43,8 +44,8 @@
 <script>
 import _ from 'lodash'
 import Crypto from '~/helpers/Crypto'
-import TextEditor from '~/components/Text/TextEditor.vue'
-import TextViewer from '~/components/Text/TextViewer.vue'
+import TextEditor from '~/components/Text/TextEditor'
+import TextViewer from '~/components/Text/TextViewer'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 
 export default {
@@ -73,6 +74,9 @@ 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 = 'accordion'
     },
     data() {
@@ -114,6 +118,7 @@ export default {
             this.block.metadata.config.items.forEach((element) => {
                 element.expand = false
             })
+            this.block.metadata.config.currentAccordion = null
         },
     },
 }

package/components/Content/Blocks/BlockQuote.vue

@@ -0,0 +1,191 @@
+<template>
+    <v-container class="container-left-border">
+        <v-row
+            v-if="
+                block.metadata.config.title ||
+                block.metadata.config.instructions
+            "
+        >
+            <v-col cols="12" class="pb-0">
+                <h3 v-if="block.metadata.config.title">
+                    {{ block.metadata.config.title }}
+                </h3>
+                <p v-if="block.metadata.config.instructions" class="pb-0 mb-0">
+                    {{ block.metadata.config.instructions }}
+                </p>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col cols="1">
+                <v-icon color="primary">mdi-format-quote-open</v-icon>
+            </v-col>
+            <v-col cols="11" class="pl-0">
+                <p class="pt-2">
+                    {{ block.metadata.config.block_quote.quote }}
+                </p>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col cols="12">
+                <p v-if="render">
+                    {{ finalcitation
+                    }}<span :class="classCitation">{{ finalsource }}</span>
+                </p>
+                <p v-if="!render">Citation Here</p>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script>
+import _ from 'lodash'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+
+export default {
+    name: 'ContentBlockTab',
+    extends: BaseContentBlock,
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        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.block_quote)) {
+            this.block.metadata.config.block_quote = {
+                quote: '',
+                author: '',
+                author_title: '',
+                organization: '',
+                source_title: '',
+                source_type: '',
+            }
+        }
+        this.block.body = 'block quote'
+    },
+    data() {
+        return {
+            finalcitation: '',
+            finalsource: '',
+            classCitation: '',
+        }
+    },
+    watch: {
+        render(newValue) {
+            if (newValue) {
+                this.createCitation()
+            }
+        },
+    },
+    mounted() {
+        this.createCitation()
+    },
+    methods: {
+        createCitation() {
+            this.finalcitation = ''
+            this.finalsource = ''
+            let counter = 0
+            for (const property in this.block.metadata.config.block_quote) {
+                // author details processed here counter added to see if a comma is needed before key
+                if (
+                    property !== 'quote' &&
+                    property !== 'source_type' &&
+                    property !== 'source_title' &&
+                    this.block.metadata.config.block_quote[property] !== null &&
+                    this.block.metadata.config.block_quote[property] !== ''
+                ) {
+                    if (counter > 0) {
+                        //not first hit so a comma is needed before key
+                        counter = counter + 1
+                        this.finalcitation =
+                            this.finalcitation +
+                            ', ' +
+                            this.block.metadata.config.block_quote[property]
+                    } else {
+                        //first hit, no comma needed
+                        counter = counter + 1
+                        this.finalcitation =
+                            '—' +
+                            this.finalcitation +
+                            this.block.metadata.config.block_quote[property]
+                    }
+                    // checks that source_type isn't none and there is a source title
+                } else if (
+                    property === 'source_title' &&
+                    this.block.metadata.config.block_quote['source_type'] !==
+                        'None' &&
+                    this.block.metadata.config.block_quote[property] !== null &&
+                    this.block.metadata.config.block_quote[property] !== ''
+                ) {
+                    // filters out source types book. Adds class to italicize books
+                    if (
+                        this.block.metadata.config.block_quote[
+                            'source_type'
+                        ] === 'Book'
+                    ) {
+                        // checks if comma needed or not
+                        if (counter > 0) {
+                            this.finalsource =
+                                ', ' +
+                                this.block.metadata.config.block_quote[property]
+                            this.classCitation = 'span-title'
+                        } else {
+                            this.finalsource =
+                                '—' +
+                                this.block.metadata.config.block_quote[property]
+                            this.classCitation = 'span-title'
+                        }
+                        //checks if online journal
+                    } else if (
+                        this.block.metadata.config.block_quote[
+                            'source_type'
+                        ] === 'Online Journal'
+                    ) {
+                        // checks if comma needed or not. Not Italicized
+                        if (counter > 0) {
+                            this.finalsource =
+                                ', ' +
+                                '"' +
+                                this.block.metadata.config.block_quote[
+                                    property
+                                ] +
+                                '"'
+                            this.classCitation = ''
+                        } else {
+                            this.finalsource =
+                                '—' +
+                                '"' +
+                                this.block.metadata.config.block_quote[
+                                    property
+                                ] +
+                                '"'
+                            this.classCitation = ''
+                        }
+                    }
+                }
+            }
+        },
+    },
+}
+</script>
+
+<style scoped>
+.container-left-border {
+    border-style: solid;
+    border-color: var(--v-secondary-base);
+    border-width: 2px 2px 2px 16px;
+    border-radius: 4px;
+}
+.span-title {
+    font-style: italic;
+}
+</style>

package/components/Content/Blocks/Email.vue

@@ -0,0 +1,248 @@
+<template>
+    <v-container class="container-left-border">
+        <v-row
+            v-if="
+                block.metadata.config.title ||
+                block.metadata.config.instructions
+            "
+        >
+            <v-col cols="12" class="pa-0">
+                <h3 v-if="block.metadata.config.title">
+                    {{ block.metadata.config.title }}
+                </h3>
+                <p v-if="block.metadata.config.instructions" class="pb-0 mb-0">
+                    {{ block.metadata.config.instructions }}
+                </p>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-expansion-panels v-model="selectedPanels" accordion>
+                <v-container
+                    class="pa-0 primary container-subject d-flex justify-center align-center"
+                >
+                    <v-row class="d-flex pa-5">
+                        <v-col cols="6">
+                            {{
+                                block.metadata.config.subject
+                                    ? block.metadata.config.subject
+                                    : 'Subject'
+                            }}
+                        </v-col>
+                        <v-col
+                            cols="6"
+                            class="d-flex justify-end column-simulation"
+                        >
+                            {{
+                                $t(
+                                    'windward.core.components.content.blocks.email.simulation'
+                                )
+                            }}
+                        </v-col>
+                    </v-row>
+                </v-container>
+                <v-expansion-panel
+                    v-for="(item, index) in block.metadata.config.emails"
+                    :key="index"
+                    elevation="0"
+                >
+                    <v-expansion-panel-header>
+                        <v-row>
+                            <v-col class="pa-0 d-flex align-center">
+                                <v-btn fab x-small class="primary" elevation="0"
+                                    >{{ item.initials ? item.initials : '' }}
+                                </v-btn>
+                                <v-icon
+                                    v-if="
+                                        block.metadata.config.emails.length !==
+                                        index + 1
+                                    "
+                                    >mdi-circle-medium</v-icon
+                                >
+                                <v-icon
+                                    v-if="
+                                        block.metadata.config.emails.length ===
+                                        index + 1
+                                    "
+                                    color="secondary"
+                                    >mdi-circle-medium</v-icon
+                                >
+                                <span class="span-details"
+                                    >{{ item.from ? item.from : 'From' }}
+                                </span>
+                            </v-col>
+                            <v-col> </v-col>
+                        </v-row>
+                    </v-expansion-panel-header>
+                    <v-expansion-panel-content>
+                        <v-container class="pa-0 container-details">
+                            <v-row>
+                                <v-col cols="1"></v-col>
+                                <v-col class="pa-0 div-details">
+                                    <div class="div-details-to pl-4">
+                                        {{
+                                            $t(
+                                                'windward.core.components.content.blocks.email.to'
+                                            )
+                                        }}: {{ item.to }}
+                                    </div>
+                                    <div class="div-details-cc pl-4">
+                                        {{
+                                            $t(
+                                                'windward.core.components.content.blocks.email.cc'
+                                            )
+                                        }}: {{ item.cc }}
+                                    </div>
+                                </v-col>
+                            </v-row>
+                            <v-row>
+                                <v-col cols="1"></v-col>
+                                <v-col class="pl-4">
+                                    <TextViewer
+                                        v-if="!item.expand"
+                                        v-model="item.body"
+                                        text-viewer
+                                    ></TextViewer>
+                                    <TextEditor
+                                        v-if="!render && item.expand"
+                                        v-model="
+                                            block.metadata.config.emails[index]
+                                                .body
+                                        "
+                                    ></TextEditor>
+                                </v-col>
+                            </v-row>
+                        </v-container>
+                        <v-container
+                            v-if="
+                                block.metadata.config.emails.length ===
+                                index + 1
+                            "
+                        >
+                            <v-row class="pt-4">
+                                <v-col cols="10" class="pa-0">
+                                    <v-btn color="primary" outlined>
+                                        <v-icon>mdi-reply</v-icon>
+                                        {{
+                                            $t(
+                                                'windward.core.components.content.blocks.email.reply'
+                                            )
+                                        }}</v-btn
+                                    >
+                                    <v-btn color="primary" outlined>
+                                        <v-icon>mdi-reply-all</v-icon>
+                                        {{
+                                            $t(
+                                                'windward.core.components.content.blocks.email.reply_all'
+                                            )
+                                        }}</v-btn
+                                    >
+                                    <v-btn color="primary" outlined>
+                                        <v-icon>mdi-share</v-icon>
+                                        {{
+                                            $t(
+                                                'windward.core.components.content.blocks.email.forward'
+                                            )
+                                        }}</v-btn
+                                    >
+                                </v-col>
+                                <v-col cols="2" class="pa-0 d-flex justify-end">
+                                    <v-btn color="primary" outlined>
+                                        {{
+                                            $t(
+                                                'windward.core.components.content.blocks.email.reset'
+                                            )
+                                        }}
+                                    </v-btn>
+                                </v-col>
+                            </v-row>
+                        </v-container>
+                    </v-expansion-panel-content>
+                </v-expansion-panel>
+            </v-expansion-panels>
+        </v-row>
+    </v-container>
+</template>
+<script>
+import _ from 'lodash'
+import TextEditor from '~/components/Text/TextEditor'
+import TextViewer from '~/components/Text/TextViewer'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+export default {
+    name: 'ContentBlockEmail',
+    extends: BaseContentBlock,
+    components: {
+        TextEditor,
+        TextViewer,
+    },
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        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.emails)) {
+            this.block.metadata.config.emails = []
+        }
+        if (_.isEmpty(this.block.metadata.config.activeEmail)) {
+            this.block.metadata.config.activeEmail = 0
+        }
+        this.block.body = 'emails'
+    },
+    data() {
+        return {
+            expansionPanelKey: 0,
+            selectedPanels: 0,
+        }
+    },
+    watch: {
+        render() {
+            if (this.render) {
+                this.block.metadata.config.emails.forEach((element) => {
+                    element.expand = false
+                })
+                this.selectedPanels =
+                    this.block.metadata.config.emails.length - 1
+            }
+        },
+    },
+    mounted() {
+        this.selectedPanels = this.block.metadata.config.emails.length - 1
+    },
+    methods: {},
+}
+</script>
+<style scoped>
+.container-subject {
+    height: 40px;
+}
+.column-simulation {
+    font-size: 12px;
+}
+.container-details {
+    font-size: 10px;
+    margin-top: -26px;
+}
+.div-details {
+    color: grey;
+}
+.div-details-cc {
+    margin-top: -9px;
+}
+.span-details {
+    font-weight: bold;
+    font-size: 14px;
+}
+.v-expansion-panel {
+    border: 1px solid var(--v-primary-base);
+}
+</style>

package/components/Content/Blocks/FeedbackTemplates/FeedbackQuestionLikert.vue

@@ -3,7 +3,7 @@
         <p class="question">
             {{ value.body }}
         </p>
-        <div class="d-flex justify-space-around">
+        <div class="d-flex">
             <v-radio-group
                 :rules="[
                     (v) =>
@@ -12,12 +12,12 @@
                             'windward.core.components.content.blocks.feedback.required'
                         ),
                 ]"
-                row
                 class="radio-group"
+                :row="row"
+                :column="column"
                 v-model="value.response"
             >
                 <v-radio
-                    class="likert-radio"
                     color="green"
                     :label="
                         $t(
@@ -27,7 +27,6 @@
                     value="5"
                 ></v-radio>
                 <v-radio
-                    class="likert-radio"
                     color="light-green"
                     :label="
                         $t(
@@ -37,7 +36,6 @@
                     value="4"
                 ></v-radio>
                 <v-radio
-                    class="likert-radio"
                     color="amber"
                     :label="
                         $t(
@@ -47,7 +45,6 @@
                     value="3"
                 ></v-radio>
                 <v-radio
-                    class="likert-radio"
                     color="orange"
                     :label="
                         $t(
@@ -57,7 +54,6 @@
                     value="2"
                 ></v-radio>
                 <v-radio
-                    class="likert-radio"
                     color="red"
                     :label="
                         $t(
@@ -78,7 +74,28 @@ export default {
         value: { type: Object, required: true, default: '' },
     },
     data() {
-        return {}
+        return {
+            windowWidth: window.innerWidth,
+            row: true,
+            column: false,
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            window.addEventListener('resize', this.onResize)
+        })
+    },
+    methods: {
+        onResize() {
+            this.windowWidth = window.innerWidth
+            if (this.windowWidth <= 760) {
+                this.row = false
+                this.column = true
+            } else {
+                this.row = true
+                this.column = false
+            }
+        },
     },
 }
 </script>
@@ -86,10 +103,4 @@ export default {
 .question {
     font-weight: bold;
 }
-.radio-group {
-    width: 100% !important;
-}
-.likert-radio {
-    margin-left: 55px;
-}
 </style>

package/components/Content/Blocks/FeedbackTemplates/FeedbackQuestionTrueFalse.vue

@@ -24,7 +24,9 @@
             ></v-radio>
             <v-radio
                 class="likert-radio"
-                :label="$t('windward.core.components.content.blocks.feedback.no')"
+                :label="
+                    $t('windward.core.components.content.blocks.feedback.no')
+                "
                 value="false"
             ></v-radio>
         </v-radio-group>
@@ -46,10 +48,4 @@ export default {
 .question {
     font-weight: bold;
 }
-.radio-group {
-    width: 100% !important;
-}
-.likert-radio {
-    margin-left: 55px;
-}
 </style>

package/components/Content/Blocks/Image.vue

@@ -45,7 +45,7 @@
 
 <script>
 import _ from 'lodash'
-import TextViewer from '~/components/Text/TextViewer.vue'
+import TextViewer from '~/components/Text/TextViewer'
 import Crypto from '~/helpers/Crypto'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 

package/components/Content/Blocks/OpenResponse.vue

@@ -76,8 +76,8 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import TextViewer from '~/components/Text/TextViewer.vue'
-import TextEditor from '~/components/Text/TextEditor.vue'
+import TextViewer from '~/components/Text/TextViewer'
+import TextEditor from '~/components/Text/TextEditor'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import UserContentBlockState from '~/models/UserContentBlockState'
 
@@ -128,22 +128,28 @@ export default {
             // Check to see if we have a state already for this block with the same block_id
             // States are loaded via the ContentBlock.id but in this particular case we want to
             // maintain the state ACROSS different ContentBlock.ids but with the same linked Block.id
-            const userState = await UserContentBlockState.where({
-                'metadata->block->tag': 'plugin-core-open-response',
-                course_user_id: this.enrollment.id,
-            })
-                .where('metadata->block->block_id', this.block.block_id)
-                .first()
+            if (this.block.block_id) {
+                const userState = await UserContentBlockState.where({
+                    'metadata->block->tag': 'plugin-core-open-response',
+                    course_user_id: this.enrollment.id,
+                })
+                    .where('metadata->block->block_id', this.block.block_id)
+                    .first()
 
-            // Apply the "True" state
-            if (!_.isEmpty(userState)) {
-                this.response = _.get(userState, 'metadata.response', '')
-                this.submitted = _.get(userState, 'metadata.submitted', false)
-            }
+                // Apply the "True" state
+                if (!_.isEmpty(userState)) {
+                    this.response = _.get(userState, 'metadata.response', '')
+                    this.submitted = _.get(
+                        userState,
+                        'metadata.submitted',
+                        false
+                    )
+                }
 
-            // If after the state is applied the response is still empty then apply the default response
-            if (this.response === '') {
-                this.response = this.block.metadata.config.starting_text
+                // If after the state is applied the response is still empty then apply the default response
+                if (this.response === '') {
+                    this.response = this.block.metadata.config.starting_text
+                }
             }
 
             this.stateLoaded = true