@windward/core 0.4.3 → 0.5.1

package/components/Content/Blocks/Accordion.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <v-expansion-panels
-            v-model="selectedPanels"
+            :value="selectedPanels"
             flat
             accordion
             focusable
@@ -101,9 +101,6 @@ export default {
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
         }
-        if (_.isEmpty(this.block.metadata.config.selectedPanels)) {
-            this.block.metadata.config.selectedPanels = 0
-        }
         this.block.body = this.$t(
             'windward.core.shared.content_blocks.title.accordion'
         )
@@ -112,7 +109,7 @@ export default {
         return {
             expansionPanelKey: '0',
             editingInContentItem: false,
-            selectedPanels: 0,
+            selectedPanels: null,
         }
     },
     watch: {
@@ -125,6 +122,7 @@ export default {
                 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) => {
@@ -148,10 +146,16 @@ export default {
                 this.block.metadata.config.items.forEach((element) => {
                     element.expand = false
                 })
-                this.selectedPanels = 0
+                this.selectedPanels = null
             }
         },
     },
+    mounted() {
+        if (this.render) {
+            // ensure panels are always loaded closed
+            this.selectedPanels = null
+        }
+    },
     methods: {
         getImagePublicUrl(asset) {
             const foundAsset = this.resolveAsset(asset)

package/components/Content/Blocks/BlockQuote.vue

@@ -21,17 +21,18 @@
             </v-col>
             <v-col cols="11" class="pl-0">
                 <p class="pt-2">
-                    {{ block.metadata.config.block_quote.quote }}
+                    <TextViewer
+                        v-model="block.metadata.config.block_quote.quote"
+                    ></TextViewer>
                 </p>
             </v-col>
         </v-row>
         <v-row>
             <v-col cols="12">
-                <p v-if="render">
-                    {{ finalcitation
-                    }}<span :class="classCitation">{{ finalsource }}</span>
+                <p>
+                    {{ citation }}
+                    <span :class="sourceClass">{{ source }}</span>
                 </p>
-                <p v-if="!render">Citation Here</p>
             </v-col>
         </v-row>
     </v-container>
@@ -39,6 +40,9 @@
 
 <script>
 import _ from 'lodash'
+import he from 'he'
+
+import TextViewer from '~/components/Text/TextViewer.vue'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 
 export default {
@@ -68,6 +72,7 @@ export default {
                 organization: '',
                 source_title: '',
                 source_type: '',
+                source_url: '',
             }
         }
         this.block.body = this.$t(
@@ -75,108 +80,86 @@ export default {
         )
     },
     data() {
-        return {
-            finalcitation: '',
-            finalsource: '',
-            classCitation: '',
-        }
+        return {}
     },
-    watch: {
-        render(newValue) {
-            if (newValue) {
-                this.createCitation()
+    computed: {
+        citation() {
+            const parts = []
+
+            // List of all keys in `block.metadata.config.block_quote.x` to include in the citation
+            const keys = ['author', 'author_title', 'organization']
+
+            // Go over all citation keys to compile
+            for (const key of keys) {
+                const value = this.block.metadata.config.block_quote[key] || ''
+
+                if (value) {
+                    parts.push(value)
+                }
+            }
+
+            // If there were parts to return then prepend with a mdash
+            if (parts.length > 0) {
+                return he.decode('&mdash;') + parts.join(', ')
+            } else {
+                return ''
             }
         },
-    },
-    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 =
-                                '—' +
-                                '"' +
+        source() {
+            const parts = []
+
+            const sourceTitle =
+                this.block.metadata.config.block_quote['source_title'] || ''
+            const sourceType =
+                this.block.metadata.config.block_quote['source_type'] || ''
+
+            if (sourceTitle && sourceType) {
+                switch (sourceType) {
+                    case 'online_journal':
+                        // Wrap the sourceTitle for online journals in quotes
+                        parts.push('"' + sourceTitle + '"')
+
+                        // For online journals also add the url if it exists
+                        if (
+                            this.block.metadata.config.block_quote['source_url']
+                        ) {
+                            parts.push(
                                 this.block.metadata.config.block_quote[
-                                    property
-                                ] +
-                                '"'
-                            this.classCitation = ''
+                                    'source_url'
+                                ]
+                            )
                         }
-                    }
+                        break
+                    default:
+                        // Book sources are not wrapped
+                        parts.push(sourceTitle)
+                        break
                 }
             }
+
+            // If the citation is empty (aka we only have sources)
+            // and there's sources then prepend with a mdash
+            if (parts.length > 0 && this.citation === '') {
+                return he.decode('&mdash;') + parts.join(', ')
+            } else if (parts.length > 0) {
+                // Otherwise there's a citation / no sources. Don't prepend with mdash
+                return parts.join(', ')
+            } else {
+                return ''
+            }
+        },
+        sourceClass() {
+            if (
+                this.block.metadata.config.block_quote['source_title'] &&
+                this.block.metadata.config.block_quote['source_type'] &&
+                this.block.metadata.config.block_quote['source_type'] === 'book'
+            ) {
+                return 'span-title'
+            }
         },
     },
+    mounted() {},
+    methods: {},
 }
 </script>
 

package/components/Content/Blocks/ClickableIcons.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>
@@ -13,14 +13,15 @@
                 }}
             </p>
         </v-container>
-        <v-container>
+        <v-container class="pa-0">
             <v-row
                 v-for="(item, itemIndex) in block.metadata.config.items"
                 :key="itemIndex"
                 no-gutters
                 :class="rowClass(itemIndex)"
+                class="pa-0"
             >
-                <v-col cols="12" v-bind="iconColumnAttrs" class="pa-4">
+                <v-col cols="12" v-bind="iconColumnAttrs">
                     <button
                         :class="activatorButtonClass(itemIndex)"
                         @click="item.active = !item.active"
@@ -144,14 +145,14 @@ export default {
             if (this.block.metadata.config.display.large_icon) {
                 return {
                     xl: '3',
-                    lg: '4',
+                    lg: '3',
                     md: '4',
                     sm: '4',
                 }
             } else {
                 return {
                     xl: '2',
-                    lg: '3',
+                    lg: '2',
                     md: '3',
                     sm: '3',
                 }

package/components/Content/Blocks/Feedback.vue

@@ -1,6 +1,6 @@
 <template>
     <v-container>
-        <v-container v-if="!doesFeedbackExist">
+        <v-container v-if="!doesFeedbackExist" class="pa-0">
             <v-row>
                 <h2>
                     {{

package/components/Content/Blocks/FileDownload/FileLinks.vue

@@ -0,0 +1,82 @@
+<template>
+    <v-list>
+        <v-list-item
+            v-for="(item, index) in value"
+            :key="item.file.id + '-' + index"
+            :data-activator="'file-link-item-' + index"
+            class="pa-0"
+            dense
+            @click="onClickFile(item)"
+        >
+            <v-list-item-icon class="mx-3">
+                <v-icon>mdi-file-download</v-icon>
+            </v-list-item-icon>
+
+            <v-list-item-content class="text-link py-0"
+                >{{ filename(item) }}
+            </v-list-item-content>
+
+            <v-tooltip
+                left
+                eager
+                :activator="'[data-activator=file-link-item-' + index + ']'"
+            >
+                <span>{{ item.file.asset.metadata.size | humanFilesize }}</span>
+            </v-tooltip>
+        </v-list-item>
+    </v-list>
+</template>
+
+<script>
+import _ from 'lodash'
+import Download from '~/helpers/Download'
+
+export default {
+    name: 'DisplayFileLinks',
+    components: {},
+    props: {
+        value: {
+            type: Array,
+            required: false,
+            default: () => {
+                return []
+            },
+        },
+    },
+    data() {
+        return {
+            Download,
+        }
+    },
+    computed: {
+        filename() {
+            return (item) => {
+                const extension = _.get(
+                    item,
+                    'file.asset.metadata.extension',
+                    ''
+                )
+                let filename = ''
+                // Resolve the filename from either the user defined or from the fileasset itself
+                if (item.name) {
+                    // If we're defining a custom name make sure the file has the extension on it so users know what it is
+                    filename = item.name
+                    filename =
+                        filename.replace(new RegExp(extension + '$'), '') +
+                        '.' +
+                        extension
+                } else {
+                    filename = item.file.name || item.file.asset.name
+                }
+                return filename
+            }
+        },
+    },
+    mounted() {},
+    methods: {
+        onClickFile(item) {
+            Download.url(item.file.asset.public_url, this.filename(item))
+        },
+    },
+}
+</script>

package/components/Content/Blocks/FileDownload/FileTable.vue

@@ -0,0 +1,106 @@
+<template>
+    <v-card>
+        <v-card-text>
+            <v-simple-table>
+                <template #default>
+                    <thead>
+                        <tr>
+                            <th>
+                                {{ $t('shared.file.name') }}
+                            </th>
+                            <th>
+                                {{ $t('shared.file.size') }}
+                            </th>
+                            <th>
+                                {{ $t('shared.file.download') }}
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr
+                            v-for="(item, index) in value"
+                            :key="item.file.id + '-' + index"
+                        >
+                            <td>
+                                {{ filename(item) }}
+                            </td>
+                            <td>
+                                {{
+                                    item.file.asset.metadata.size
+                                        | humanFilesize
+                                }}
+                            </td>
+                            <td>
+                                <v-btn
+                                    link
+                                    elevation="0"
+                                    @click="
+                                        Download.url(
+                                            item.file.asset.public_url,
+                                            item.file.name
+                                        )
+                                    "
+                                >
+                                    <v-icon>mdi-download</v-icon>
+                                    <span class="sr-only">
+                                        {{ $t('shared.file.download') }}
+                                    </span>
+                                </v-btn>
+                            </td>
+                        </tr>
+                    </tbody>
+                </template>
+            </v-simple-table>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+import _ from 'lodash'
+import Download from '~/helpers/Download'
+
+export default {
+    name: 'DisplayFilesTable',
+    components: {},
+    props: {
+        value: {
+            type: Array,
+            required: false,
+            default: () => {
+                return []
+            },
+        },
+    },
+    data() {
+        return {
+            Download,
+        }
+    },
+    computed: {
+        filename() {
+            return (item) => {
+                const extension = _.get(
+                    item,
+                    'file.asset.metadata.extension',
+                    ''
+                )
+                let filename = ''
+                // Resolve the filename from either the user defined or from the fileasset itself
+                if (item.name) {
+                    // If we're defining a custom name make sure the file has the extension on it so users know what it is
+                    filename = item.name
+                    filename =
+                        filename.replace(new RegExp(extension + '$'), '') +
+                        '.' +
+                        extension
+                } else {
+                    filename = item.file.name || item.file.asset.name
+                }
+                return filename
+            }
+        },
+    },
+    mounted() {},
+    methods: {},
+}
+</script>

package/components/Content/Blocks/FileDownload.vue

@@ -0,0 +1,145 @@
+<template>
+    <v-container>
+        <h2>
+            {{
+                block.metadata.config.title ||
+                $t(
+                    'windward.core.components.content.blocks.file_download.default_title'
+                )
+            }}
+        </h2>
+        <p v-if="!block.metadata.config.instructions">
+            {{
+                $t(
+                    'windward.core.components.content.blocks.file_download.default_instructions'
+                )
+            }}
+        </p>
+        <TextViewer
+            v-if="block.metadata.config.instructions"
+            :value="block.metadata.config.instructions"
+        />
+        <v-alert
+            v-if="
+                !block.metadata.config.items ||
+                block.metadata.config.items.length === 0
+            "
+            type="warning"
+        >
+            {{
+                $t(
+                    'windward.core.components.content.blocks.file_download.no_files'
+                )
+            }}
+        </v-alert>
+        <FileTable
+            v-if="
+                block.metadata.config.display_detailed &&
+                block.metadata.config.items &&
+                block.metadata.config.items.length !== 0
+            "
+            :value="resolvedItemAssets"
+        ></FileTable>
+        <FileLinks
+            v-if="
+                !block.metadata.config.display_detailed &&
+                block.metadata.config.items &&
+                block.metadata.config.items.length !== 0
+            "
+            :value="resolvedItemAssets"
+        ></FileLinks>
+    </v-container>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import TextViewer from '~/components/Text/TextViewer'
+import TextEditor from '~/components/Text/TextEditor'
+import Download from '~/helpers/Download'
+
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import FileTable from './FileDownload/FileTable.vue'
+import FileLinks from './FileDownload/FileLinks.vue'
+
+export default {
+    name: 'FileDownloadBlock',
+    components: {
+        TextEditor,
+        TextViewer,
+        FileTable,
+        FileLinks,
+    },
+    extends: BaseContentBlock,
+    data() {
+        return {
+            Download,
+            saveState: false, // Override the base block to disable state saving
+            valid: true,
+            loading: false,
+            uploadFiles: [],
+            userFileAsset: {},
+            studentUpload: null,
+            maxFileLimit: 10,
+        }
+    },
+    computed: {
+        ...mapGetters({
+            enrollment: 'enrollment/get',
+        }),
+        resolvedItemAssets() {
+            const items = []
+            for (const index in this.block.metadata.config.items) {
+                // Skip items missing a file since we're probably adding a new one in the settings
+                if (_.isEmpty(this.block.metadata.config.items[index].file)) {
+                    continue
+                }
+
+                const item = {
+                    name: this.block.metadata.config.items[index].name,
+                    file: this.resolveAsset(
+                        this.block.metadata.config.items[index].file
+                    ),
+                }
+                items.push(item)
+            }
+
+            return items
+        },
+    },
+    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 = this.$t(
+                'windward.core.components.content.blocks.file_download.default_title'
+            )
+        }
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = this.$t(
+                'windward.core.components.content.blocks.file_download.default_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: {},
+}
+</script>