@windward/integrations 0.0.2 → 0.0.4

package/components/ExternalIntegration/Driver/Lti1p1/ManageConsumer.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>LTI 1.1 Consumers Not Implemented yet</div>
+</template>
+
+<script>
+export default {
+    name: 'ManageLti1p1ConsumerDriver',
+    data() {
+        return {}
+    },
+    methods: {},
+}
+</script>

package/components/ExternalIntegration/Driver/Lti1p1/ManageConsumers.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>LTI 1.1 Consumers Not Implemented yet</div>
+</template>
+
+<script>
+export default {
+    name: 'ManageLti1p1ConsumersDriver',
+    data() {
+        return {}
+    },
+    methods: {},
+}
+</script>

package/components/ExternalIntegration/Driver/Lti1p1/ManageProvider.vue

@@ -0,0 +1,374 @@
+<template>
+    <div>
+        <div v-if="!render" class="integration-loading">
+            <v-progress-circular size="128" indeterminate />
+        </div>
+        <div v-if="render">
+            <v-form v-model="formValid" @submit.prevent>
+                <v-row justify="center" align="center" class="mt-5">
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="provider.target"
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.target_url'
+                                )
+                            "
+                            :hint="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.target_url'
+                                )
+                            "
+                        ></v-text-field>
+
+                        <v-switch
+                            v-model="provider.enabled"
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.enabled'
+                                )
+                            "
+                        />
+
+                        <v-text-field
+                            v-model="provider.metadata.key"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.auto_key'
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.key'
+                                )
+                            "
+                            :hint="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.key'
+                                )
+                            "
+                        ></v-text-field>
+
+                        <v-text-field
+                            v-model="provider.metadata.secret"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.auto_secret'
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.secret'
+                                )
+                            "
+                            :hint="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p1.secret'
+                                )
+                            "
+                        >
+                        </v-text-field>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col cols="12">
+                        <v-expansion-panels v-model="rolePanel">
+                            <v-expansion-panel>
+                                <v-expansion-panel-header>
+                                    {{
+                                        $t(
+                                            'windward.integrations.components.external_integration.driver.lti1p1.role_map_panel'
+                                        )
+                                    }}
+                                </v-expansion-panel-header>
+                                <v-expansion-panel-content>
+                                    <p>
+                                        <strong>
+                                            {{
+                                                $t(
+                                                    'windward.integrations.components.external_integration.driver.lti1p1.role_map_instructions'
+                                                )
+                                            }}
+                                        </strong>
+                                    </p>
+                                    <p>
+                                        {{
+                                            $t(
+                                                'windward.integrations.components.external_integration.driver.lti1p1.role_map_warning'
+                                            )
+                                        }}
+                                    </p>
+                                    <v-simple-table>
+                                        <template #default>
+                                            <thead>
+                                                <tr>
+                                                    <th>
+                                                        {{
+                                                            $t(
+                                                                'windward.integrations.components.external_integration.driver.lti1p1.role_in_host'
+                                                            )
+                                                        }}
+                                                    </th>
+                                                    <th>
+                                                        {{
+                                                            $t(
+                                                                'windward.integrations.components.external_integration.driver.lti1p1.role_in_local'
+                                                            )
+                                                        }}
+                                                    </th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <tr
+                                                    v-for="(
+                                                        id, externalName
+                                                    ) in provider.role_metadata"
+                                                    :key="externalName"
+                                                >
+                                                    <td>
+                                                        {{
+                                                            uppercase(
+                                                                externalName
+                                                            )
+                                                        }}
+                                                    </td>
+                                                    <td>
+                                                        <v-select
+                                                            v-model="
+                                                                provider
+                                                                    .role_metadata[
+                                                                    externalName
+                                                                ]
+                                                            "
+                                                            :items="roles"
+                                                            item-value="id"
+                                                            item-text="name"
+                                                            :label="
+                                                                $t(
+                                                                    'windward.integrations.components.external_integration.driver.lti1p1.map_to_role'
+                                                                )
+                                                            "
+                                                        ></v-select>
+                                                    </td>
+                                                    <td>
+                                                        <v-btn
+                                                            icon
+                                                            @click="
+                                                                deleteMapItem(
+                                                                    externalName
+                                                                )
+                                                            "
+                                                        >
+                                                            <v-icon>
+                                                                mdi-delete
+                                                            </v-icon>
+                                                            <span
+                                                                class="sr-only"
+                                                            >
+                                                                {{
+                                                                    $t(
+                                                                        'windward.integrations.components.external_integration.driver.lti1p1.delete_role_map_item'
+                                                                    )
+                                                                }}
+                                                            </span>
+                                                        </v-btn>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>
+                                                        <v-text-field
+                                                            v-model="
+                                                                newMap.name
+                                                            "
+                                                            :label="
+                                                                $t(
+                                                                    'windward.integrations.components.external_integration.driver.lti1p1.remote_role'
+                                                                )
+                                                            "
+                                                        ></v-text-field>
+                                                    </td>
+                                                    <td>
+                                                        <v-select
+                                                            v-model="newMap.id"
+                                                            :items="roles"
+                                                            :label="
+                                                                $t(
+                                                                    'windward.integrations.components.external_integration.driver.lti1p1.map_to_role'
+                                                                )
+                                                            "
+                                                            item-value="id"
+                                                            item-text="name"
+                                                        ></v-select>
+                                                    </td>
+                                                    <td>
+                                                        <v-btn
+                                                            icon
+                                                            :disabled="
+                                                                !newMap.id ||
+                                                                !newMap.name
+                                                            "
+                                                            @click="addMapItem"
+                                                        >
+                                                            <v-icon>
+                                                                mdi-plus
+                                                            </v-icon>
+                                                            <span
+                                                                class="sr-only"
+                                                            >
+                                                                {{
+                                                                    $t(
+                                                                        'windward.integrations.components.external_integration.driver.lti1p1.add_role_map_item'
+                                                                    )
+                                                                }}
+                                                            </span>
+                                                        </v-btn>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </template>
+                                    </v-simple-table>
+                                </v-expansion-panel-content>
+                            </v-expansion-panel>
+                        </v-expansion-panels>
+                    </v-col>
+                </v-row>
+            </v-form>
+        </div>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import Lti1p1Provider from '../../../../models/ExternalIntegration/Lti1p1Provider'
+import FormVue from '~/components/Form'
+import Role from '~/models/Role'
+import Organization from '~/models/Organization'
+import Course from '~/models/Course'
+
+export default {
+    name: 'ManageLti1p1ProviderDriver',
+    components: {},
+    extends: FormVue,
+    props: {
+        value: {
+            type: [Lti1p1Provider, null],
+            required: false,
+            default: null,
+        },
+    },
+    emits: ['update:provider'],
+    meta: {
+        privilege: {
+            '': {
+                writable: true,
+            },
+        },
+    },
+    data() {
+        return {
+            render: false,
+            provider: {
+                role_metadata: {},
+                metadata: {},
+            },
+            rolePanel: false,
+            roles: [],
+            newMap: {
+                name: null,
+                id: null,
+            },
+        }
+    },
+    async fetch() {
+        // Get available roles but filter out default high level roles since they'll be ignore anyways from the api
+        this.roles = await Role.whereIn('name,ne', [
+            'admin',
+            'editor',
+            'instructor',
+            'student',
+        ]).all()
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    created() {
+        if (_.isEmpty(this.value)) {
+            this.provider = new Lti1p1Provider({
+                role_metadata: {},
+                metadata: {},
+            })
+        } else {
+            this.provider = _.cloneDeep(this.value)
+        }
+    },
+    mounted() {
+        if (
+            !this.$PermissionService.userHasAccessTo(
+                'plugin.windward.integrations.course.externalIntegration',
+                'writable'
+            )
+        ) {
+            // 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)
+                    },
+                },
+            })
+            console.error('You do not have access to this provider!')
+
+            // Return so we don't even attempt loading
+            return false
+        }
+
+        this.render = true
+    },
+    methods: {
+        uppercase(value) {
+            return _.startCase(value)
+        },
+        deleteMapItem(key) {
+            this.$delete(this.provider.role_metadata, key)
+        },
+        addMapItem() {
+            this.provider.role_metadata[this.newMap.name] = this.newMap.id
+            this.newMap.name = null
+            this.newMap.id = null
+        },
+        async save() {
+            let provider = new Lti1p1Provider(this.provider).for(
+                new Organization({ id: this.organization.id }),
+                new Course({ id: this.course.id })
+            )
+
+            try {
+                provider = await provider.save()
+                this.provider = provider
+
+                // Clone and delete the metadata since we don't need to share that around
+                // Also include the vendor going back for easier mapping
+                const providerEvent = _.cloneDeep(provider)
+
+                this.$dialog.success(this.$t('shared.forms.saved'))
+                this.$emit('update:provider', providerEvent)
+            } catch (e) {
+                this.$dialog.error(
+                    this.$t('windward.integrations.shared.error.save_failed')
+                )
+            }
+        },
+        async onSave() {
+            if (this.formValid) {
+                await this.save()
+            }
+        },
+    },
+}
+</script>

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

@@ -0,0 +1,220 @@
+<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.metadata.key="{ item }">
+                <SecretField v-model="item.metadata.key"></SecretField>
+            </template>
+            <template #item.metadata.secret="{ item }">
+                <SecretField v-model="item.metadata.secret"></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(
+                        'windward.integrations.components.external_integration.driver.lti1p1.enabled'
+                    )
+                }}</span>
+            </template>
+
+            <template #item.created_at="{ item }">
+                {{ $d(new Date(item.created_at), 'long') }}
+            </template>
+            <template #[`item.actions`]="{ index, item }">
+                <Dialog color="primary" action-save @click:save="onSaved">
+                    <template #title>{{
+                        $t(
+                            'windward.integrations.components.external_integration.driver.lti1p1.edit'
+                        )
+                    }}</template>
+                    <template #trigger>
+                        <v-icon small>mdi-pencil</v-icon>
+                        <span class="sr-only">{{
+                            $t(
+                                'windward.integrations.components.external_integration.driver.lti1p1.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 Lti1p1Provider from '../../../../models/ExternalIntegration/Lti1p1Provider'
+import SecretField from '../../../SecretField.vue'
+import ManageProvider from './ManageProvider.vue'
+import Course from '~/models/Course'
+import Organization from '~/models/Organization'
+import Dialog from '~/components/Dialog.vue'
+
+export default {
+    name: 'ManageLti1p1ProvidersDriver',
+    components: { SecretField, Dialog, ManageProvider },
+    data() {
+        return {
+            providers: [],
+            headers: [
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.target_url'
+                    ),
+                    value: 'target',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.key'
+                    ),
+                    value: 'metadata.key',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.secret'
+                    ),
+                    value: 'metadata.secret',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.launch_url'
+                    ),
+                    value: 'url',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.enabled'
+                    ),
+                    value: 'enabled',
+                },
+                { 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)) {
+                console.error(
+                    'Cannot load external integrations because organization or course is not set!'
+                )
+            } else {
+                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(e) {
+            this.loadProviders()
+        },
+        async loadProviders() {
+            this.providers = await new Lti1p1Provider()
+                .for(
+                    new Organization({ id: this.organization.id }),
+                    new Course({ id: this.course.id })
+                )
+                .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)
+                        },
+                    },
+                ],
+            })
+        },
+        deleteProvider(provider) {
+            provider.delete()
+        },
+    },
+}
+</script>

package/components/ExternalIntegration/Driver/ManageLti1p1.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.driver.lti1p1.provider_panel'
+                        )
+                    }}
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                    <ListProviders></ListProviders>
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+            <v-expansion-panel>
+                <v-expansion-panel-header>
+                    {{
+                        $t(
+                            'windward.integrations.components.external_integration.driver.lti1p1.consumer_panel'
+                        )
+                    }}
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                    <ListConsumers></ListConsumers>
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+        </v-expansion-panels>
+    </div>
+</template>
+
+<script>
+import ListProviders from './Lti1p1/ManageProviders.vue'
+import ListConsumers from './Lti1p1/ManageConsumers.vue'
+
+export default {
+    name: 'ManageLti1p1Driver',
+    components: { ListProviders, ListConsumers },
+    data() {
+        return {
+            panel: 0,
+        }
+    },
+}
+</script>