@windward/integrations 0.0.9 → 0.0.11

package/components/FileImport/Dropbox.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>Dropbox Import Disabled</div>
+</template>
+
+<script>
+export default {
+    name: 'FileImportDropbox',
+}
+</script>

package/components/FileImport/FileImportMenu.vue

@@ -0,0 +1,111 @@
+<template>
+    <div>
+        <v-list-item
+            v-for="importVendor in enabledFileImports"
+            :key="importVendor.product_code"
+            @click="onClickImport(importVendor)"
+        >
+            <v-list-item-icon>
+                <v-icon>{{ importVendor.icon }}</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>{{ $t(importVendor.i18n) }}</v-list-item-title>
+        </v-list-item>
+
+        <Dialog
+            v-model="showDialog"
+            :trigger="false"
+            persistent
+            @click:close="$emit('click:close')"
+        >
+            <template #title>{{ $t(activeVendor.i18n) }}</template>
+
+            <template #form="{ on, attrs }">
+                <component
+                    :is="activeVendor.template"
+                    v-if="activeVendor"
+                    :organization-integration="
+                        activeVendor.organization_integration
+                    "
+                    v-bind="attrs"
+                    v-on="on"
+                    @uploaded="$emit('uploaded', $event)"
+                ></component>
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import Organization from '../../models/Organization'
+import Dialog from '~/components/Dialog.vue'
+
+export default {
+    name: 'FileImportMenu',
+    components: { Dialog },
+    props: {
+        metadata: {
+            type: Object,
+            required: false,
+            default() {
+                return {}
+            },
+        },
+    },
+    data() {
+        return {
+            organizationIntegrations: [],
+            activeVendor: null,
+            showDialog: false,
+        }
+    },
+    async fetch() {
+        const organizationIntegrations = await new Organization({
+            id: this.organization.id,
+        })
+            .integrations()
+            .with(['vendor'])
+            .where('enabled', true)
+            .where('vendor.enabled', true)
+            .get()
+        if (!_.isEmpty(organizationIntegrations)) {
+            this.organizationIntegrations = organizationIntegrations
+        }
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+        }),
+        enabledFileImports() {
+            const enabled = []
+            // Get only the vendors that are defined to be displayed as a fileImport vendor from plugin.js
+            const available = _.get(this.metadata, 'vendors', [])
+
+            // Loop over all the orgIntegrations that we've confirmed are enabled
+            this.organizationIntegrations.forEach((orgInt) => {
+                const productCode = _.get(orgInt, 'vendor.product_code')
+                const found = available.find((c) => {
+                    return c.product_code === productCode && !!c.template
+                })
+
+                if (found) {
+                    // Set the organization integration so we can reference the api later
+                    found.organization_integration = orgInt
+                    enabled.push(found)
+                }
+            })
+
+            return enabled
+        },
+    },
+    mounted() {},
+    methods: {
+        onClickImport(importVendor) {
+            this.$emit('click', importVendor)
+            this.activeVendor = importVendor
+            this.showDialog = true
+        },
+    },
+}
+</script>

package/components/FileImport/GoogleDrive.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>Google Drive Import Disabled</div>
+</template>
+
+<script>
+export default {
+    name: 'FileImportGoogleDrive',
+}
+</script>

package/components/FileImport/Resourcespace.vue

@@ -0,0 +1,202 @@
+<template>
+    <div>
+        <SearchField
+            v-model="search"
+            :num-results="numFiles"
+            @click:search="onLoadAssets($event)"
+            @click:clear="onClickClear"
+        ></SearchField>
+
+        <v-btn
+            color="primary"
+            block
+            :disabled="selectedFiles.length === 0"
+            :loading="loading"
+            @click="onConfirmImportFiles"
+        >
+            <v-icon>mdi-content-duplicate</v-icon>
+            {{
+                $t('shared.file.import_selected_count', [selectedFiles.length])
+            }}
+        </v-btn>
+
+        <div v-if="loaded && !loading && numFiles === 0" class="text-center">
+            <p>{{ $t('shared.file.none_found') }}</p>
+        </div>
+
+        <v-data-table
+            v-if="numFiles"
+            v-model="selectedFiles"
+            class="mt-5"
+            show-select
+            item-key="id"
+            :headers="headers"
+            :items="files"
+            :items-per-page="25"
+            :loading="loading"
+        >
+            <template #[`item.preview`]="{ item }">
+                <v-img :src="item.preview" width="150px" :aspect-ratio="16 / 9">
+                    <template #placeholder>
+                        <v-skeleton-loader
+                            class="mx-auto"
+                            max-width="300"
+                            type="image"
+                        ></v-skeleton-loader>
+                    </template>
+                </v-img>
+            </template>
+            <template #[`item.created_at`]="{ item }">
+                {{ $d(new Date(item.created_at), 'shorttime') }}
+            </template>
+            <template #[`item.updated_at`]="{ item }">
+                {{ $d(new Date(item.updated_at), 'shorttime') }}
+            </template>
+        </v-data-table>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import OrganizationIntegration from '../../models/OrganizationIntegration'
+import RemoteFile from '../../models/RemoteFile'
+import Course from '~/models/Course'
+import SearchField from '~/components/SearchField.vue'
+
+export default {
+    name: 'FileImportResourcespace',
+    components: { SearchField },
+    props: {
+        organizationIntegration: { type: Object, required: true },
+    },
+    data() {
+        return {
+            loading: false,
+            loaded: false,
+            search: {},
+            files: [],
+            selectedFiles: [],
+            headers: [
+                {
+                    text: this.$t('shared.file.preview'),
+                    align: 'start',
+                    sortable: false,
+                    value: 'preview',
+                },
+                {
+                    text: this.$t('shared.file.name'),
+                    value: 'filename',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.file_import.resourcespace.resource_id'
+                    ),
+                    value: 'id',
+                },
+                {
+                    text: this.$t('shared.forms.created'),
+                    value: 'created_at',
+                },
+                {
+                    text: this.$t('shared.forms.updated'),
+                    value: 'updated_at',
+                },
+            ],
+        }
+    },
+    async fetch() {},
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+        numFiles() {
+            return this.files.length
+        },
+    },
+    mounted() {},
+    methods: {
+        async onLoadAssets(search = {}) {
+            this.loading = true
+            this.loaded = true
+            try {
+                this.files = await new OrganizationIntegration(
+                    this.organizationIntegration
+                )
+                    .remoteFiles()
+                    .where('term', search.term)
+                    .get()
+            } catch (e) {
+                this.$dialog.error(
+                    this.$t(
+                        'windward.integrations.components.file_import.resourcespace.load_error'
+                    )
+                )
+                console.error(e)
+            }
+
+            this.loading = false
+        },
+        onClickClear() {
+            this.selectedFiles = []
+        },
+        onConfirmImportFiles() {
+            const self = this
+            this.$dialog.show(
+                this.$t('shared.file.confirm_import', [
+                    this.selectedFiles.length,
+                ]),
+                {
+                    icon: 'mdi-question',
+                    duration: null,
+                    action: [
+                        {
+                            text: this.$t('shared.forms.cancel'),
+                            onClick: (_e, toastObject) => {
+                                toastObject.goAway(0)
+                            },
+                        },
+                        {
+                            text: this.$t('shared.forms.confirm'),
+                            // router navigation
+                            onClick: (_e, toastObject) => {
+                                self.importFiles()
+                                toastObject.goAway(0)
+                            },
+                        },
+                    ],
+                }
+            )
+        },
+        async importFiles() {
+            this.loading = true
+            try {
+                const uploaded = await new RemoteFile(this.selectedFiles)
+                    .for(
+                        new OrganizationIntegration(
+                            this.organizationIntegration
+                        ),
+                        new Course({ id: this.course.id })
+                    )
+                    .save()
+
+                this.$dialog.success(
+                    this.$t('shared.file.import_success', [
+                        this.selectedFiles.length,
+                    ])
+                )
+                this.$emit('uploaded', uploaded)
+            } catch (e) {
+                console.log('Failed to import!', this.selectedFiles)
+                console.error(e)
+                this.$dialog.error(
+                    this.$t('shared.file.import_failed', [
+                        this.selectedFiles.length,
+                    ])
+                )
+            }
+            this.loading = false
+        },
+    },
+}
+</script>

package/components/Integration/Driver/ManageAtutor.vue

@@ -130,21 +130,29 @@ export default {
         },
         async onTestConnection() {
             this.testConnectionLoading = true
-            const response = await this.testConnection(
-                this.integration.metadata
-            )
+            let response = { result: false }
+            try {
+                response = await this.testConnection(this.integration.metadata)
 
-            if (response.result) {
-                this.errorMessage = ''
-                this.$dialog.success(
-                    this.$t(
-                        'windward.integrations.shared.error.connect_success'
+                if (response.result) {
+                    this.errorMessage = ''
+                    this.$dialog.success(
+                        this.$t(
+                            'windward.integrations.shared.error.connect_success'
+                        )
                     )
-                )
-            } else {
-                this.errorMessage = response.message
+                } else {
+                    this.errorMessage = response.message
+                    this.$dialog.error(
+                        this.$t(
+                            'windward.integrations.shared.error.connect_fail'
+                        )
+                    )
+                }
+            } catch (e) {
+                console.error(e)
                 this.$dialog.error(
-                    this.$t('windward.integrations.shared.error.connect_fail')
+                    this.$t('windward.integrations.shared.error.unknown')
                 )
             }
 

package/components/Integration/Driver/ManageResourcespace.vue

@@ -0,0 +1,137 @@
+<template>
+    <div>
+        <div v-if="!render" class="integration-loading">
+            <v-progress-circular size="128" indeterminate />
+        </div>
+        <div v-if="render">
+            <v-row justify="center" align="center" class="mt-5">
+                <v-col cols="12">
+                    <v-switch
+                        v-model="integration.enabled"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.enabled'
+                            )
+                        "
+                    />
+
+                    <v-text-field
+                        v-model="integration.metadata.config.url"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.resourcespace.url'
+                            )
+                        "
+                        :hint="
+                            $t(
+                                'windward.integrations.components.integration.driver.resourcespace.url_hint'
+                            )
+                        "
+                    ></v-text-field>
+                    <v-text-field
+                        v-model="integration.metadata.config.username"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.resourcespace.username'
+                            )
+                        "
+                    ></v-text-field>
+                    <v-text-field
+                        v-model="integration.metadata.config.key"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.resourcespace.key'
+                            )
+                        "
+                        type="password"
+                    ></v-text-field>
+
+                    <v-switch
+                        v-model="integration.metadata.config.ssl"
+                        :label="
+                            $t(
+                                'windward.integrations.components.integration.driver.ssl_enabled'
+                            )
+                        "
+                    />
+
+                    <TestConnection
+                        :disabled="
+                            !integration.metadata.config.url ||
+                            !integration.metadata.config.username ||
+                            !integration.metadata.config.key
+                        "
+                        :loading="testConnectionLoading"
+                        :errors="errorMessage"
+                        @click="onTestConnection"
+                    ></TestConnection>
+                </v-col>
+            </v-row>
+        </div>
+    </div>
+</template>
+
+<script>
+import TestConnection from '../TestConnection.vue'
+import ManageBaseVue from './ManageBase.vue'
+
+export default {
+    name: 'ManageResourcespaceDriver',
+    components: { TestConnection },
+    extends: ManageBaseVue,
+    data() {
+        return {
+            // formValid: true|false If this form is "complete" and passed validation on THIS component. Defined and watched in ManageBase.vue
+            // render: true|false If we should show the form aka when validation has passed. Defined and managed in ManageBase.vue
+            // integration: { metadata: {...} } The integration object to write to. Defined and loaded in ManageBase.vue
+            errorMessage: '',
+            testConnectionLoading: false,
+        }
+    },
+    methods: {
+        /**
+         * Lifecycle event called from ManageBase.vue when async fetch() completes.
+         * Once called this.integration will be available containing the integration model (or a new one)
+         */
+        onIntegrationLoaded() {
+            // Set SSL to enabled by default
+            if (_.get(this.integration.metadata.config, 'ssl', null) === null) {
+                this.integration.metadata.config.ssl = true
+            }
+        },
+        async onTestConnection() {
+            this.testConnectionLoading = true
+            let response = { result: false }
+            try {
+                response = await this.testConnection(this.integration.metadata)
+
+                if (response.result) {
+                    this.errorMessage = ''
+                    this.$dialog.success(
+                        this.$t(
+                            'windward.integrations.shared.error.connect_success'
+                        )
+                    )
+                } else {
+                    this.errorMessage = response.message
+                    this.$dialog.error(
+                        this.$t(
+                            'windward.integrations.shared.error.connect_fail'
+                        )
+                    )
+                }
+            } catch (e) {
+                console.error(e)
+                this.$dialog.error(
+                    this.$t('windward.integrations.shared.error.unknown')
+                )
+            }
+
+            // We will indirectly validate the form via connection tests
+            // That way we can 100% confirm that the integration is valid
+            this.formValid = response.result
+            this.testConnectionLoading = false
+        },
+    },
+}
+</script>