@windward/integrations 0.0.12 → 0.1.1

package/components/Content/Blocks/ExternalIntegration/LtiConsumer.vue

@@ -1,23 +1,52 @@
 <template>
     <div>
         <div v-if="!missing && consumer">
-            <h1>{{ consumer.name }}</h1>
-            <TextViewer v-model="consumer.description"></TextViewer>
+            <h3>{{ block.metadata.config.title }}</h3>
 
-            <v-btn
-                v-if="consumer.enabled"
-                color="primary"
-                block
-                @click="onLaunch"
+            <TextViewer
+                v-model="block.metadata.config.instructions"
+            ></TextViewer>
+
+            <v-row
+                v-if="
+                    consumer.enabled &&
+                    block.metadata.config.launch_type !== 'inline'
+                "
+                class="d-flex justify-center"
             >
-                <v-icon>mdi-launch</v-icon>
-                {{
-                    $t(
-                        'windward.integrations.components.content.blocks.external_integration.lti_consumer.launch',
-                        [block.metadata.config.tool_id]
-                    )
-                }}
-            </v-btn>
+                <v-col class="d-flex justify-center col-md-4">
+                    <v-btn
+                        v-if="
+                            block.metadata.config.launch_type === 'new_window'
+                        "
+                        color="primary"
+                        block
+                        @click="onLaunch"
+                    >
+                        {{
+                            $t(
+                                'windward.integrations.components.content.blocks.external_integration.lti_consumer.launch_in_' +
+                                    block.metadata.config.launch_type,
+                                [consumer.name]
+                            )
+                        }}
+                    </v-btn>
+                    <v-btn
+                        v-else
+                        color="primary"
+                        block
+                        @click="setLaunchTimer(100)"
+                    >
+                        {{
+                            $t(
+                                'windward.integrations.components.content.blocks.external_integration.lti_consumer.launch_in_' +
+                                    block.metadata.config.launch_type,
+                                [consumer.name]
+                            )
+                        }}
+                    </v-btn>
+                </v-col>
+            </v-row>
 
             <v-alert v-if="!consumer.enabled" type="error">
                 {{
@@ -33,6 +62,7 @@
                 :target="target"
                 :action="launchData.target || ''"
                 :method="launchData.method || 'POST'"
+                @submit.prevent
             >
                 <input
                     v-for="(value, key) of launchData.payload"
@@ -50,6 +80,35 @@
                 :name="frameId"
                 class="launch-frame"
             ></iframe>
+            <Dialog
+                v-if="block.metadata.config.launch_type === 'modal'"
+                v-model="openModal"
+                :trigger="false"
+                persistent
+                max-width="1350px"
+                @click:close="closeModal"
+            >
+                <template #title>{{ block.metadata.config.title }}</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 }">
+                    <iframe
+                        v-if="launched"
+                        v-bind="attrs"
+                        :name="frameId"
+                        class="launch-frame"
+                        v-on="on"
+                    ></iframe>
+
+                    <div v-else></div>
+                </template>
+            </Dialog>
         </div>
 
         <v-alert v-if="missing" type="error">
@@ -88,17 +147,18 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import Lti1p1Consumer from '../../../../models/ExternalIntegration/Lti1p1Consumer'
+import LtiConsumer from '../../../../models/ExternalIntegration/LtiConsumer'
 import Crypto from '~/helpers/Crypto'
 import TextViewer from '~/components/Text/TextViewer.vue'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import Course from '~/models/Course'
 import Organization from '~/models/Organization'
 import Enrollment from '~/models/Enrollment'
+import Dialog from '~/components/Dialog.vue'
 
 export default {
     name: 'ContentBlockExternalIntegrationLti1p1Consumer',
-    components: { TextViewer },
+    components: { TextViewer, Dialog },
     extends: BaseContentBlock,
     data() {
         return {
@@ -109,6 +169,8 @@ export default {
             frameId: Crypto.id() + '_frame',
             missing: false,
             launched: false,
+            launchTimeout: {},
+            openModal: false,
         }
     },
     async fetch() {
@@ -123,12 +185,27 @@ export default {
         }),
     },
     watch: {
+        'block.metadata.config.launch_type': {
+            deep: true,
+            handler(newVal, oldVal) {
+                // We changed the consumer tool id, reload
+                if (
+                    newVal === 'inline' &&
+                    this.block.metadata.config.tool_id !== null
+                ) {
+                    this.setLaunchTimer()
+                }
+            },
+        },
         'block.metadata.config.tool_id': {
             deep: true,
             handler(newVal, oldVal) {
                 // We changed the consumer tool id, reload
                 if (newVal !== oldVal) {
                     this.loadConsumer()
+                    if (this.block.metadata.config.launch_type === 'inline') {
+                        this.setLaunchTimer()
+                    }
                 }
             },
         },
@@ -140,13 +217,45 @@ export default {
         if (_.isEmpty(this.block.metadata.config.tool_id)) {
             this.block.metadata.config.tool_id = null
         }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = this.$t(
+                'windward.integrations.components.content.blocks.external_integration.lti_consumer.title'
+            )
+        }
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = this.$t(
+                'windward.integrations.components.content.blocks.external_integration.lti_consumer.instructions'
+            )
+        }
+    },
+    mounted() {
+        if (
+            this.block.metadata.config.tool_id !== null &&
+            this.block.metadata.config.launch_type === 'inline'
+        ) {
+            this.setLaunchTimer()
+        }
+    },
+
+    destroyed() {
+        clearTimeout(this.launchTimeout)
     },
-    mounted() {},
     methods: {
+        setLaunchTimer(timeout = 1000) {
+            clearTimeout(this.launchTimeout)
+            this.launchTimeout = setTimeout(this.onLaunch, timeout)
+            this.launched = true
+        },
+        closeModal() {
+            this.launchData = {}
+            this.target = ''
+            this.openModal = false
+            this.launched = false
+        },
         async loadConsumer() {
             try {
                 if (!_.isEmpty(this.block.metadata.config.tool_id)) {
-                    this.consumer = await new Lti1p1Consumer()
+                    this.consumer = await new LtiConsumer()
                         .for(
                             new Organization({ id: this.organization.id }),
                             new Course({ id: this.course.id })
@@ -168,8 +277,11 @@ export default {
                 // Clear the launch data in-case we're in inline mode
                 // If the iframe isn't destroyed subsequent launches will be new windows instead of the target iframe
                 this.launchData = {}
+                if (this.block.metadata.config.launch_type === 'modal') {
+                    this.openModal = true
+                }
 
-                this.launchData = await Lti1p1Consumer.custom(
+                this.launchData = await LtiConsumer.custom(
                     new Enrollment({ id: this.enrollment.id }),
                     this.consumer,
                     '/launch'
@@ -182,6 +294,9 @@ export default {
                     case 'inline':
                         this.target = this.frameId
                         break
+                    case 'modal':
+                        this.target = this.frameId
+                        break
                     default:
                         this.target = '_blank'
                 }
@@ -216,5 +331,6 @@ export default {
 .launch-frame {
     aspect-ratio: 16/9;
     width: 100%;
+    border-style: none;
 }
 </style>

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

@@ -33,6 +33,8 @@
                         <TextEditor
                             id="description"
                             v-model="consumer.description"
+                            menubar="edit"
+                            toolbar="undo redo | bold italic underline strikethrough "
                             :height="200"
                         ></TextEditor>
 
@@ -148,7 +150,7 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import Lti1p1Consumer from '../../../../models/ExternalIntegration/Lti1p1Consumer'
+import LtiConsumer from '../../../../models/ExternalIntegration/LtiConsumer'
 import Organization from '~/models/Organization'
 import Course from '~/models/Course'
 import TextEditor from '~/components/Text/TextEditor.vue'
@@ -160,7 +162,7 @@ export default {
     extends: FormVue,
     props: {
         value: {
-            type: [Lti1p1Consumer, null],
+            type: [LtiConsumer, null],
             required: false,
             default: null,
         },
@@ -220,9 +222,9 @@ export default {
     },
     created() {
         if (_.isEmpty(this.value)) {
-            this.consumer = new Lti1p1Consumer(this.consumer)
+            this.consumer = new LtiConsumer(this.consumer)
         } else {
-            this.consumer = new Lti1p1Consumer(_.cloneDeep(this.value))
+            this.consumer = new LtiConsumer(_.cloneDeep(this.value))
         }
     },
     mounted() {
@@ -260,7 +262,7 @@ export default {
             this.consumer.metadata.custom.splice(index, 1)
         },
         async save() {
-            let consumer = new Lti1p1Consumer(this.consumer).for(
+            let consumer = new LtiConsumer(this.consumer).for(
                 new Organization({ id: this.organization.id }),
                 new Course({ id: this.course.id })
             )

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

@@ -79,7 +79,7 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import Lti1p1Consumer from '../../../../models/ExternalIntegration/Lti1p1Consumer'
+import LtiConsumer from '../../../../models/ExternalIntegration/LtiConsumer'
 import ManageConsumer from './ManageConsumer.vue'
 import Course from '~/models/Course'
 import Organization from '~/models/Organization'
@@ -168,11 +168,12 @@ export default {
             this.loadConsumers()
         },
         async loadConsumers() {
-            this.consumers = await new Lti1p1Consumer()
+            this.consumers = await new LtiConsumer()
                 .for(
                     new Organization({ id: this.organization.id }),
                     new Course({ id: this.course.id })
                 )
+                .where('version', '1.1')
                 .get()
         },
         onConfirmDelete(consumer) {

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

@@ -0,0 +1,284 @@
+<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="consumer.target"
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.target_url'
+                                )
+                            "
+                            :hint="
+                                $t(
+                                    'windward.integrations.components.external_integration.target_url'
+                                )
+                            "
+                        ></v-text-field>
+                        <v-text-field
+                            v-model="consumer.name"
+                            :placeholder="$t('shared.forms.name')"
+                            :label="$t('shared.forms.name')"
+                            :hint="$t('shared.forms.name')"
+                        ></v-text-field>
+
+                        <label for="description">{{
+                            $t('shared.forms.description')
+                        }}</label>
+                        <TextEditor
+                            id="description"
+                            v-model="consumer.description"
+                            menubar="edit"
+                            toolbar="undo redo | bold italic underline strikethrough "
+                            :height="200"
+                        ></TextEditor>
+
+                        <v-switch
+                            v-model="consumer.enabled"
+                            :label="$t('shared.forms.enabled')"
+                        />
+                        <v-text-field
+                            v-model="consumer.metadata.tool_oidc_auth_endpoint"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.tool_oidc_auth_endpoint'
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.tool_oidc_auth_endpoint'
+                                )
+                            "
+                        ></v-text-field>
+                        <v-text-field
+                            v-model="consumer.metadata.tool_public_keyset_url"
+                            :placeholder="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.tool_public_keyset_url'
+                                )
+                            "
+                            :label="
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.lti1p3.tool_public_keyset_url'
+                                )
+                            "
+                        ></v-text-field>
+
+                        <v-data-table
+                            :headers="customParameterHeaders"
+                            :items="consumer.metadata.custom"
+                            hide-default-footer
+                            class="elevation-1"
+                        >
+                            <template #[`item.key`]="{ index }">
+                                <v-text-field
+                                    v-model="
+                                        consumer.metadata.custom[index].key
+                                    "
+                                    :label="
+                                        $t(
+                                            'windward.integrations.components.external_integration.driver.lti1p1.parameter_name'
+                                        )
+                                    "
+                                />
+                            </template>
+                            <template #[`item.value`]="{ index }">
+                                <v-text-field
+                                    v-model="
+                                        consumer.metadata.custom[index].value
+                                    "
+                                    :label="
+                                        $t(
+                                            'windward.integrations.components.external_integration.driver.lti1p1.value'
+                                        )
+                                    "
+                                />
+                            </template>
+                            <template #[`item.actions`]="{ index }">
+                                <v-btn
+                                    text
+                                    color="primary"
+                                    @click="deleteCustomParameter(index)"
+                                >
+                                    <v-icon small> mdi-delete </v-icon>
+                                    <span class="sr-only">{{
+                                        $t('shared.forms.delete')
+                                    }}</span>
+                                </v-btn>
+                            </template>
+                            <template #footer>
+                                <div class="text-center">
+                                    <v-btn
+                                        color="primary"
+                                        class="mb-3"
+                                        @click="addCustomParameter"
+                                        >{{ $t('shared.forms.add') }}</v-btn
+                                    >
+                                </div>
+                            </template>
+                        </v-data-table>
+                        <br />
+                        <v-select
+                            v-model="consumer.metadata.security_level"
+                            :items="securityLevels"
+                            item-text="name"
+                            item-value="value"
+                            label="Security Level"
+                            outlined
+                        ></v-select>
+                    </v-col>
+                </v-row>
+            </v-form>
+        </div>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import LtiConsumer from '../../../../models/ExternalIntegration/LtiConsumer'
+import Organization from '~/models/Organization'
+import Course from '~/models/Course'
+import TextEditor from '~/components/Text/TextEditor.vue'
+import FormVue from '~/components/Form'
+
+export default {
+    name: 'ManageLti1p3ConsumerDriver',
+    components: { TextEditor },
+    extends: FormVue,
+    props: {
+        value: {
+            type: [LtiConsumer, null],
+            required: false,
+            default: null,
+        },
+    },
+    emits: ['update:consumer'],
+    meta: {
+        privilege: {
+            '': {
+                writable: true,
+            },
+        },
+    },
+    data() {
+        return {
+            render: false,
+            consumer: {
+                version: '1.3',
+                metadata: {
+                    custom: [],
+                    security_level: '',
+                    security: [],
+                },
+            },
+            customParameterHeaders: [
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.parameter_name'
+                    ),
+                    value: 'key',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.value'
+                    ),
+                    value: 'value',
+                },
+                {
+                    text: this.$t('shared.forms.actions'),
+                    value: 'actions',
+                    sortable: false,
+                },
+            ],
+            securityLevels: [
+                { name: 'Full Access', value: 'full' },
+                { name: 'Email Only', value: 'email' },
+                { name: 'Name Only', value: 'name' },
+                { name: 'Anonymous', value: 'anonymous' },
+                // { name: 'Custom', value: 'custom' }, // TODO: When this is selected provide direct access to check off LTI fields
+            ],
+        }
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    created() {
+        if (_.isEmpty(this.value)) {
+            this.consumer = new LtiConsumer(this.consumer)
+        } else {
+            this.consumer = new LtiConsumer(_.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)
+                    },
+                },
+            })
+
+            // eslint-disable-next-line no-console
+            console.error('You do not have access to this consumer!')
+
+            // Return so we don't even attempt loading
+            return false
+        }
+
+        this.render = true
+    },
+    methods: {
+        addCustomParameter() {
+            this.consumer.metadata.custom.push({ key: '', value: '' })
+        },
+        deleteCustomParameter(index) {
+            this.consumer.metadata.custom.splice(index, 1)
+        },
+        async save() {
+            let consumer = new LtiConsumer(this.consumer).for(
+                new Organization({ id: this.organization.id }),
+                new Course({ id: this.course.id })
+            )
+
+            try {
+                consumer = await consumer.save()
+                this.consumer = consumer
+
+                // Clone and delete the metadata since we don't need to share that around
+                // Also include the vendor going back for easier mapping
+                const consumerEvent = _.cloneDeep(consumer)
+
+                this.$dialog.success(this.$t('shared.forms.saved'))
+                this.$emit('update:consumer', consumerEvent)
+            } catch (e) {
+                this.$dialog.error(
+                    this.$t('windward.integrations.shared.error.save_failed')
+                )
+            }
+        },
+        async onSave() {
+            if (this.formValid) {
+                await this.save()
+            }
+        },
+    },
+}
+</script>