@windward/core 0.0.1

package/components/Content/Blocks/UserUpload/DisplayUserFilesTable.vue

@@ -0,0 +1,157 @@
+<template>
+    <v-card v-if="userFileAsset.id && userFileAsset.file_assets.length">
+        <v-card-title
+            >{{
+                $t(
+                    'windward.core.components.content.blocks.user_upload.user_uploads'
+                )
+            }}
+            -
+            {{ $d(new Date(userFileAsset.created_at), 'long') }}
+        </v-card-title>
+        <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>
+                            <th>
+                                {{ $t('shared.file.delete') }}
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr
+                            v-for="file in userFileAsset.file_assets"
+                            :key="file.id"
+                        >
+                            <td>
+                                {{ file.name }}
+                            </td>
+                            <td>
+                                {{ file.asset.metadata.size | humanFilesize }}
+                            </td>
+                            <td>
+                                <v-btn
+                                    link
+                                    @click="
+                                        Download.url(
+                                            file.asset.public_url,
+                                            file.name
+                                        )
+                                    "
+                                >
+                                    <v-icon>mdi-download</v-icon>
+                                    <span class="sr-only">
+                                        {{ $t('shared.file.download') }}
+                                    </span>
+                                </v-btn>
+                            </td>
+                            <td>
+                                <v-btn
+                                    link
+                                    color="error"
+                                    @click="onConfirmDelete(file)"
+                                >
+                                    <v-icon>mdi-delete</v-icon>
+                                    <span class="sr-only">
+                                        {{ $t('shared.file.delete') }}
+                                    </span>
+                                </v-btn>
+                            </td>
+                        </tr>
+                    </tbody>
+                </template>
+            </v-simple-table>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+import Download from '~/helpers/Download'
+
+import UserFileAsset from '../../../../models/UserFileAsset'
+import FileAsset from '~/models/FileAsset'
+
+import ContentBlock from '~/models/ContentBlock'
+import Enrollment from '~/models/Enrollment'
+
+export default {
+    name: 'DisplayUserFilesTable',
+    components: {},
+    props: {
+        value: {
+            type: Object,
+            required: false,
+            default: () => {
+                return {}
+            },
+        },
+        enrollment: { type: Object, required: true },
+    },
+    data() {
+        return {
+            Download,
+            userFileAsset: {},
+        }
+    },
+    watch: {
+        value(newVal) {
+            this.userFileAsset = newVal
+        },
+    },
+    mounted() {
+        this.userFileAsset = this.value
+    },
+    methods: {
+        onConfirmDelete(file) {
+            const self = this
+            this.$toast.info(this.$t('shared.forms.confirm_delete_text'), {
+                duration: null,
+                action: [
+                    {
+                        text: this.$t('shared.forms.cancel'),
+                        onClick: (e, toastObject) => {
+                            toastObject.goAway(0)
+                        },
+                    },
+                    {
+                        text: this.$t('shared.forms.confirm'),
+                        onClick: (e, toastObject) => {
+                            toastObject.goAway(0)
+                            self.deleteFile(file)
+                        },
+                    },
+                ],
+            })
+        },
+        async deleteFile(file) {
+            await new FileAsset({ id: file.file_asset_id })
+                .for(
+                    new Enrollment(this.enrollment),
+                    new ContentBlock({
+                        id: this.userFileAsset.content_block_id,
+                    }),
+                    new UserFileAsset({ id: this.userFileAsset.id })
+                )
+                .delete()
+
+            // Remove the deleted file from the array for display reasons
+            this.userFileAsset.file_assets =
+                this.userFileAsset.file_assets.filter(function (f) {
+                    return f.file_asset_id !== file.file_asset_id
+                })
+
+            this.$emit('input', this.userFileAsset)
+        },
+    },
+}
+</script>

package/components/Content/Blocks/UserUpload/ManageDataTableUserFiles.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="text-center">
+        <Dialog
+            v-bind="$attrs"
+            transition="dialog-bottom-transition"
+            :color="color"
+            v-if="value.file_assets && value.file_assets.length > 0"
+        >
+            <template #title>{{
+                $t(
+                    'windward.core.components.content.blocks.user_upload.dialog_view'
+                )
+            }}</template>
+            <template #trigger>
+                {{ $tc('shared.file.view_files', value.file_assets.length) }}
+            </template>
+            <template #form="{ on, attrs }">
+                <DisplayUserFilesTable
+                    v-bind="attrs"
+                    v-on="on"
+                    v-model="userUploads"
+                    :enrollment="enrollment"
+                ></DisplayUserFilesTable>
+            </template>
+        </Dialog>
+        <span v-else>---</span>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import Dialog from '~/components/Dialog'
+
+import DisplayUserFilesTable from './DisplayUserFilesTable.vue'
+
+export default {
+    name: 'ManageDataTableUserFiles',
+    components: { Dialog, DisplayUserFilesTable },
+    props: {
+        value: { type: Object, required: true },
+        enrollment: { type: Object, required: true },
+    },
+    data() {
+        return {
+            userUploads: {},
+        }
+    },
+    computed: {
+        color() {
+            if (this.value.file_assets && this.value.file_assets.length > 0) {
+                return 'success'
+            } else {
+                return ''
+            }
+        },
+    },
+    watch: {
+        value(newVal) {
+            this.userUploads = newVal
+        },
+    },
+    created() {
+        this.userUploads = this.value
+    },
+    mounted() {},
+    methods: {},
+}
+</script>

package/components/Content/Blocks/UserUpload.vue

@@ -0,0 +1,240 @@
+<template>
+    <v-container>
+        <div v-if="render || !block.metadata.config.expand">
+            <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-model="block.metadata.config.instructions"
+                    ></TextViewer>
+                </v-col>
+                <v-col cols="12">
+                    <v-alert v-if="!blockExists" color="warning">
+                        <p>
+                            {{
+                                $t(
+                                    'windward.core.components.content.blocks.user_upload.must_save'
+                                )
+                            }}
+                        </p>
+                    </v-alert>
+                </v-col>
+            </v-row>
+            <v-row>
+                <v-col cols="12">
+                    <DisplayUserFilesTable
+                        v-model="userFileAsset"
+                        :enrollment="enrollment"
+                    ></DisplayUserFilesTable>
+                </v-col>
+                <v-col cols="12">
+                    <div v-if="blockExists">
+                        <v-form
+                            ref="form"
+                            v-model="valid"
+                            lazy-validation
+                            class="pb-0"
+                        >
+                            <FileDropZone
+                                v-model="uploadFiles"
+                                :accept="
+                                    block.metadata.config.uploadSettings.accept
+                                "
+                                :multiple="
+                                    block.metadata.config.uploadSettings
+                                        .multiple
+                                "
+                            ></FileDropZone>
+
+                            <v-container class="primary lighten-1 text-center">
+                                <v-btn
+                                    :disabled="!canUpload || loading"
+                                    color="success"
+                                    class="text-center"
+                                    @click="handleUpload"
+                                >
+                                    {{ $t('shared.forms.upload') }}
+                                </v-btn>
+                            </v-container>
+                        </v-form>
+                    </div>
+                </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>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import TextViewer from '~/components/Text/TextViewer.vue'
+import TextEditor from '~/components/Text/TextEditor.vue'
+import Uuid from '~/helpers/Uuid'
+import Download from '~/helpers/Download'
+
+import UserFileAsset from '../../../models/UserFileAsset'
+import Enrollment from '~/models/Enrollment'
+import ContentBlock from '~/models/ContentBlock'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import FileDropZone from '~/components/FileDropZone.vue'
+
+import DisplayUserFilesTable from './UserUpload/DisplayUserFilesTable.vue'
+
+export default {
+    name: 'UserUpload',
+    components: {
+        TextEditor,
+        TextViewer,
+        FileDropZone,
+        DisplayUserFilesTable,
+    },
+    extends: BaseContentBlock,
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = 'user uplaod'
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        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 = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.uploadSettings)) {
+            this.block.metadata.config.uploadSettings = {
+                multiple: false,
+                accept: '',
+            }
+        }
+    },
+    data() {
+        return {
+            Download,
+            saveState: false, // Override the base block to disable state saving
+            valid: true,
+            loading: false,
+            uploadFiles: [],
+            userFileAsset: {},
+            studentUpload: null,
+        }
+    },
+    computed: {
+        ...mapGetters({
+            enrollment: 'enrollment/get',
+        }),
+        blockExists() {
+            return Uuid.test(this.block.id)
+        },
+        canUpload() {
+            if (this.valid) {
+                // Multiple disabled, single file selected
+                if (
+                    !Array.isArray(this.uploadFiles) &&
+                    !this.block.metadata.config.uploadSettings.multiple &&
+                    this.uploadFiles
+                ) {
+                    return true
+                } else if (
+                    // Multi enabled, one or more files selected
+                    Array.isArray(this.uploadFiles) &&
+                    this.uploadFiles.length > 0
+                ) {
+                    return true
+                } else {
+                    // No files
+                    return false
+                }
+            }
+            return false
+        },
+    },
+    mounted() {
+        if (this.blockExists) {
+            this.loadUserUploads()
+        }
+    },
+    methods: {
+        async handleUpload() {
+            this.loading = true
+
+            let uploadFiles = this.uploadFiles
+
+            // If multiple is disabled pack the file in a single array
+            // The API wants an array of files as an input
+            if (
+                !Array.isArray(this.uploadFiles) &&
+                !this.block.metadata.config.uploadSettings.multiple
+            ) {
+                uploadFiles = [uploadFiles]
+            }
+
+            // Create a new UserFileAsset if we don't have an instance yet
+            if (!Uuid.test(this.userFileAsset.id)) {
+                this.userFileAsset = new UserFileAsset({
+                    file: uploadFiles,
+                }).for(
+                    new Enrollment(this.enrollment),
+                    new ContentBlock({ id: this.block.id })
+                )
+            }
+
+            this.userFileAsset.file = uploadFiles
+
+            try {
+                this.userFileAsset = await this.userFileAsset.save()
+            } catch (e) {
+                this.$toast.error(this.$t('shared.forms.errors.unknown'))
+                console.log(e)
+            }
+            this.loading = false
+            this.uploadFiles = []
+        },
+        async loadUserUploads() {
+            if (this.enrollment && this.block.id) {
+                this.userFileAsset = await new UserFileAsset()
+                    .for(
+                        new Enrollment(this.enrollment),
+                        new ContentBlock({ id: this.block.id })
+                    )
+                    .first()
+            }
+        },
+        async onBeforeSave() {
+            return (this.block.metadata.config.expand = false)
+        },
+    },
+}
+</script>