@windward/integrations 0.0.8 → 0.0.10

package/components/ExternalIntegration/Driver/Lti1p3/ManageProviders.vue

@@ -0,0 +1,259 @@
+<template>
+    <div>
+        <Dialog
+            color="primary"
+            action-save
+            action-save-new
+            @click:save="onSaved"
+        >
+            <template #title>{{
+                $t(
+                    'windward.integrations.components.external_integration.driver.lti1p1.new'
+                )
+            }}</template>
+            <template #trigger>{{ $t('shared.forms.new') }}</template>
+            <template #form="{ on, attrs }"
+                ><ManageProvider v-bind="attrs" v-on="on"></ManageProvider
+            ></template>
+        </Dialog>
+
+        <v-data-table
+            :headers="headers"
+            :items="providers"
+            :items-per-page="10"
+            class="elevation-1"
+        >
+            <template #[`item.target`]="{ item }">
+                <ProviderTargetViewer
+                    class="field--target text-truncate"
+                    :target="item.target"
+                ></ProviderTargetViewer>
+            </template>
+            <template #[`item.metadata.tool_public_keyset_url`]="{ item }">
+                <SecretField
+                    v-model="item.metadata.tool_public_keyset_url"
+                    :hidden="false"
+                ></SecretField>
+            </template>
+            <template #[`item.metadata.tool_oidc_auth_endpoint`]="{ item }">
+                <SecretField
+                    v-model="item.metadata.tool_oidc_auth_endpoint"
+                    :hidden="false"
+                ></SecretField>
+            </template>
+            <template #[`item.url`]="{ item }">
+                <SecretField v-model="item.url" :hidden="false"></SecretField>
+            </template>
+
+            <template #[`item.enabled`]="{ item }">
+                <v-icon :color="item.enabled ? 'success' : 'error'"
+                    >{{ item.enabled ? 'mdi-check' : 'mdi-close' }}
+                </v-icon>
+                <span v-if="!item.enabled" class="sr-only">{{
+                    $t('shared.forms.enabled')
+                }}</span>
+            </template>
+
+            <template #[`item.grade_sync`]="{ item }">
+                <v-icon :color="item.grade_sync ? 'success' : 'error'"
+                    >{{ item.grade_sync ? 'mdi-check' : 'mdi-close' }}
+                </v-icon>
+                <span v-if="!item.grade_sync" class="sr-only">{{
+                    $t(
+                        'windward.integrations.components.external_integration.grade_sync'
+                    )
+                }}</span>
+            </template>
+
+            <template #[`item.created_at`]="{ item }">
+                {{ $d(new Date(item.created_at), 'short') }}
+            </template>
+            <template #[`item.actions`]="{ index, item }">
+                <Dialog color="primary" action-save @click:save="onSaved">
+                    <template #title>{{
+                        $t(
+                            'windward.integrations.components.external_integration.driver.lti1p3.edit'
+                        )
+                    }}</template>
+                    <template #trigger>
+                        <v-icon small>mdi-pencil</v-icon>
+                        <span class="sr-only">{{
+                            $t(
+                                'windward.integrations.components.external_integration.driver.lti1p3.edit'
+                            )
+                        }}</span>
+                    </template>
+                    <template #form="{ on, attrs }"
+                        ><ManageProvider
+                            v-model="providers[index]"
+                            v-bind="attrs"
+                            v-on="on"
+                        ></ManageProvider
+                    ></template>
+                </Dialog>
+
+                <v-btn icon>
+                    <v-icon @click="onConfirmDelete(item)"> mdi-delete </v-icon>
+                    <span class="sr-only">{{ $t('shared.forms.delete') }}</span>
+                </v-btn>
+            </template>
+        </v-data-table>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import LtiProvider from '../../../../models/ExternalIntegration/LtiProvider'
+import SecretField from '../../../SecretField.vue'
+import ProviderTargetViewer from '../../ProviderTargetViewer.vue'
+import ManageProvider from './ManageProvider.vue'
+import Dialog from '~/components/Dialog.vue'
+import Organization from '~/models/Organization'
+import Course from '~/models/Course'
+
+export default {
+    name: 'ManageLti1p1ProvidersDriver',
+    components: { SecretField, Dialog, ManageProvider, ProviderTargetViewer },
+    data() {
+        return {
+            providers: [],
+            headers: [
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.target'
+                    ),
+                    value: 'target',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p3.tool_public_keyset_url'
+                    ),
+                    value: 'metadata.tool_public_keyset_url',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p3.tool_oidc_auth_endpoint'
+                    ),
+                    value: 'metadata.tool_oidc_auth_endpoint',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.launch_url'
+                    ),
+                    value: 'url',
+                },
+                {
+                    text: this.$t('shared.forms.enabled'),
+                    value: 'enabled',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.grade_sync'
+                    ),
+                    value: 'grade_sync',
+                },
+                { text: this.$t('shared.forms.created'), value: 'created_at' },
+                {
+                    text: this.$t('shared.forms.actions'),
+                    value: 'actions',
+                    sortable: false,
+                },
+            ],
+        }
+    },
+
+    async fetch() {
+        if (
+            !this.$PermissionService.userHasAccessTo(
+                'plugin.windward.integrations.course.externalIntegration',
+                'readable'
+            ) ||
+            _.isEmpty(this.organization.id) ||
+            _.isEmpty(this.course.id)
+        ) {
+            // Display an angry error that they can't view this driver
+            this.$dialog.error(this.$t('shared.error.description_401'), {
+                duration: null,
+                action: {
+                    text: this.$t('shared.forms.close'),
+                    onClick: (_e, toastObject) => {
+                        toastObject.goAway(0)
+                    },
+                },
+            })
+            if (_.isEmpty(this.organization.id) || _.isEmpty(this.course.id)) {
+                // eslint-disable-next-line no-console
+                console.error(
+                    'Cannot load external integrations because organization or course is not set!'
+                )
+            } else {
+                // eslint-disable-next-line no-console
+                console.error(
+                    'You do not have access to this external integration!'
+                )
+            }
+
+            // Return so we don't even attempt loading
+            return false
+        }
+
+        await this.loadProviders()
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    methods: {
+        onSaved() {
+            this.loadProviders()
+        },
+        async loadProviders() {
+            this.providers = await new LtiProvider()
+                .for(
+                    new Organization({ id: this.organization.id }),
+                    new Course({ id: this.course.id })
+                )
+                .where('version', '1.3')
+                .get()
+        },
+        onConfirmDelete(provider) {
+            this.$dialog.show(this.$t('shared.forms.confirm_delete_text'), {
+                icon: 'mdi-help',
+                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) => {
+                            this.deleteProvider(provider)
+                            toastObject.goAway(0)
+                        },
+                    },
+                ],
+            })
+        },
+        async deleteProvider(provider) {
+            await provider.delete()
+            this.$dialog.success(this.$t('shared.response.deleted'))
+            // Reload providers now that we deleted one
+            this.loadProviders()
+        },
+    },
+}
+</script>
+
+<style scoped>
+.field--target {
+    max-width: 15em;
+    display: inline-block;
+}
+</style>

package/components/ExternalIntegration/Driver/ManageLti1p3.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <v-expansion-panels v-model="panel">
+            <v-expansion-panel>
+                <v-expansion-panel-header>
+                    {{
+                        $t(
+                            'windward.integrations.components.external_integration.provider_panel_title'
+                        )
+                    }}
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                    <ManageProviders></ManageProviders>
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+            <v-expansion-panel>
+                <v-expansion-panel-header>
+                    {{
+                        $t(
+                            'windward.integrations.components.external_integration.consumer_panel_title'
+                        )
+                    }}
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                    <!--                    <ManageConsumers></ManageConsumers>-->
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+        </v-expansion-panels>
+    </div>
+</template>
+
+<script>
+import ManageProviders from './Lti1p3/ManageProviders.vue'
+/* import ManageConsumers from './Lti1p3/ManageConsumers.vue' */
+
+export default {
+    name: 'ManageLti1p3Driver',
+    components: { ManageProviders },
+    data() {
+        return {
+            panel: 0,
+        }
+    },
+}
+</script>

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>