@windward/integrations 0.0.5 → 0.0.7

package/components/ExternalIntegration/ProviderTargetPicker.vue

@@ -0,0 +1,234 @@
+<template>
+    <div>
+        <v-radio-group
+            v-model="localMetadata.target_type"
+            row
+            @change="onTargetTypeChange"
+        >
+            <template #label>
+                <div>
+                    {{
+                        $t(
+                            'windward.integrations.components.external_integration.provider_target.link_to'
+                        )
+                    }}:
+                </div>
+            </template>
+            <v-radio
+                :label="
+                    $t(
+                        'windward.integrations.components.external_integration.provider_target.whole_course'
+                    )
+                "
+                value="course"
+            ></v-radio>
+            <v-radio
+                :label="
+                    $t(
+                        'windward.integrations.components.external_integration.provider_target.content_with_children'
+                    )
+                "
+                value="locked_course_content_children"
+            ></v-radio>
+            <v-radio
+                :label="
+                    $t(
+                        'windward.integrations.components.external_integration.provider_target.content_no_children'
+                    )
+                "
+                value="locked_course_content"
+            ></v-radio>
+            <v-radio
+                :label="
+                    $t(
+                        'windward.integrations.components.external_integration.provider_target.whole_course_page'
+                    )
+                "
+                value="course_content"
+            ></v-radio>
+        </v-radio-group>
+
+        <div
+            v-if="
+                localMetadata.target_type === 'course_content' ||
+                localMetadata.target_type ===
+                    'locked_course_content_children' ||
+                localMetadata.target_type === 'locked_course_content'
+            "
+            class="content-tree secondary"
+        >
+            <v-treeview
+                v-model="selectedTreeviewContent"
+                selectable
+                selected-color="primary"
+                selection-type="independent"
+                return-object
+                open-all
+                :items="contentTree"
+                @input="onTreeChange"
+            >
+                <template #prepend="{ item }">
+                    <v-chip v-if="isIncludedChild(item)" color="primary">
+                        {{
+                            $t(
+                                'windward.integrations.components.external_integration.provider_target.included'
+                            )
+                        }}
+                    </v-chip>
+                </template>
+                <template #label="{ item }">
+                    {{ item.content.name_prefix }}
+                    {{ item.content.name }}
+                </template>
+            </v-treeview>
+        </div>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+export default {
+    name: 'ExternalIntegrationProviderTargetPicker',
+    props: {
+        target: { type: String, required: true, default: '' },
+        metadata: { type: Object, required: true, default: () => {} },
+    },
+    data() {
+        return {
+            selectedContent: null,
+            selectedTreeviewContent: [],
+            localTarget: '',
+            localMetadata: {},
+        }
+    },
+    computed: {
+        ...mapGetters({
+            contentTree: 'content/getTree',
+            course: 'course/get',
+        }),
+    },
+    watch: {
+        // Apply any changes coming up
+        target: {
+            handler(value) {
+                this.localTarget = _.cloneDeep(value)
+            },
+        },
+        metadata: {
+            deep: true,
+            handler(value) {
+                this.localMetadata = _.cloneDeep(value)
+            },
+        },
+    },
+    mounted() {
+        // Init our local vars
+        this.localTarget = _.cloneDeep(this.target)
+        this.localMetadata = _.cloneDeep(this.metadata)
+
+        // Set the target_type key if it doesn't exist
+        if (!this.localMetadata.target_type) {
+            this.localMetadata.target_type = ''
+        }
+
+        // Preset the selected content
+        if (this.localTarget) {
+            const match = this.localTarget.match(
+                /\/content\/(?<content_id>[a-zA-Z0-9-]{36})/i
+            )
+
+            if (!_.isEmpty(match) && _.get(match, 'groups.content_id', null)) {
+                this.setSelectedContentById(
+                    _.get(match, 'groups.content_id', null)
+                )
+            }
+        }
+        this.sync(this.localMetadata.target_type)
+    },
+    methods: {
+        setSelectedContentById(id) {
+            this.selectedContent = { id }
+            this.selectedTreeviewContent = [{ id }]
+        },
+        sync(targetType) {
+            let url = ''
+
+            if (
+                this.selectedContent &&
+                (targetType === 'course_content' ||
+                    targetType === 'locked_course_content' ||
+                    targetType === 'locked_course_content_children')
+            ) {
+                url = `/course/${this.course.id}/content/${this.selectedContent.id}`
+            } else if (targetType === 'course') {
+                url = `/course/${this.course.id}/`
+            }
+            this.localTarget = url
+            // Sync up the changes to the parent component
+            this.$emit('update:target', this.localTarget)
+            this.$emit('update:metadata', this.localMetadata)
+        },
+        onTargetTypeChange(e) {
+            // Reset the selected content if you pick by course
+            if (e === 'course') {
+                this.selectedContent = null
+                this.selectedTreeviewContent = []
+            }
+
+            this.sync(e)
+        },
+        isIncludedChild(page, children = null) {
+            let isIncluded = false
+            // If we aren't including children then return hard false
+            if (
+                this.localMetadata.target_type !==
+                'locked_course_content_children'
+            ) {
+                return false
+            }
+
+            // First run, assign the children from the selected page
+            if (this.selectedContent && children === null) {
+                children = _.get(this.selectedContent, 'children', [])
+            }
+
+            if (this.selectedContent && page.parent_id) {
+                if (this.selectedContent.id === page.parent_id) {
+                    return true
+                }
+
+                for (let i = 0; i < children.length; i++) {
+                    const child = children[i]
+
+                    if (child.id === page.parent_id) {
+                        return true
+                    } else if (child.children && child.children.length) {
+                        isIncluded = this.isIncludedChild(page, child.children)
+                    }
+                }
+            }
+            return isIncluded
+        },
+        onTreeChange() {
+            // Enforce that only 1 item is selected at a time in the treeview
+            if (this.selectedTreeviewContent.length > 0) {
+                const last = this.selectedTreeviewContent.pop()
+                this.selectedTreeviewContent = [last]
+                this.selectedContent = last
+            } else {
+                this.selectedContent = null
+            }
+
+            this.sync(this.localMetadata.target_type)
+        },
+    },
+}
+</script>
+
+<style scoped>
+.content-tree {
+    height: 230px;
+    overflow-y: auto;
+}
+</style>

package/components/ExternalIntegration/ProviderTargetViewer.vue

@@ -0,0 +1,50 @@
+<template>
+    <span>{{ targetDisplayName }}</span>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+export default {
+    name: 'ExternalIntegrationProviderTargetViewer',
+    props: {
+        target: { type: String, required: true, default: '' },
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+            contentTree: 'content/getTree',
+        }),
+        targetDisplayName() {
+            if (_.isEmpty(this.target)) {
+                return ''
+            }
+            const match = this.target.match(
+                /\/content\/(?<content_id>[a-zA-Z0-9-]{36})/i
+            )
+            if (!_.isEmpty(match) && _.get(match, 'groups.content_id', null)) {
+                const flatTree = this.$ContentService.flattenTree(
+                    this.contentTree
+                )
+                const item = flatTree.find(
+                    (c) => c.id === _.get(match, 'groups.content_id', null)
+                )
+
+                if (!_.isEmpty(item)) {
+                    return (
+                        _.get(item, 'content.name_prefix', '') +
+                        ' ' +
+                        _.get(item, 'content.name', '')
+                    )
+                }
+            } else {
+                return this.$t(
+                    'windward.integrations.components.external_integration.provider_target.whole_course'
+                )
+            }
+            return ''
+        },
+    },
+}
+</script>

package/components/Integration/Driver/ManageBase.vue

@@ -38,11 +38,12 @@ export default {
                 duration: null,
                 action: {
                     text: this.$t('shared.forms.close'),
-                    onClick: (e, toastObject) => {
+                    onClick: (_e, toastObject) => {
                         toastObject.goAway(0)
                     },
                 },
             })
+            // eslint-disable-next-line no-console
             console.error('You do not have access to this integration!')
 
             // Return so we don't even attempt loading
@@ -129,6 +130,7 @@ export default {
         },
 
         onIntegrationLoaded() {
+            // eslint-disable-next-line no-console
             console.warn(
                 'Integration/Driver/ManageBase.vue onIntegrationLoaded called. Not extended!'
             )

package/components/Integration/JobTable.vue

@@ -247,7 +247,7 @@ export default {
         connect(channel, event) {
             this.socket.connector.pusher.connection.bind(
                 'connected',
-                function (socket) {
+                function (_socket) {
                     // Connected to socket id: socket.socket_id
                 }
             )
@@ -266,6 +266,7 @@ export default {
 
         onSocketJob(data) {
             if (_.isEmpty(data.integrationJob)) {
+                // eslint-disable-next-line no-console
                 console.error('onSocketJob Missing data', data)
                 return false
             }

package/components/SecretField.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-text-field :value="value" readonly :type="fieldType">
+    <v-text-field id="secret-field" :value="value" readonly :type="fieldType">
         <template #append>
             <v-btn icon @click="toggleClear">
                 <v-icon>{{ showClear ? 'mdi-eye-off' : 'mdi-eye' }}</v-icon>

package/components/Settings/ExternalIntegration/LtiConsumerSettings.vue

@@ -0,0 +1,105 @@
+<template>
+    <v-container>
+        <v-select
+            v-model="block.metadata.config.launch_type"
+            :label="
+                $t(
+                    'windward.integrations.components.settings.external_integration.lti_consumer.launch_type'
+                )
+            "
+            :items="launchTypes"
+            item-text="name"
+            item-value="value"
+        ></v-select>
+        {{
+            $t(
+                'windward.integrations.components.settings.external_integration.lti_consumer.link_select'
+            )
+        }}
+        <v-list>
+            <v-list-item
+                v-for="consumer in consumers"
+                :key="consumer.id"
+                two-line
+                :disabled="!consumer.enabled"
+                @click="onSelectLink(consumer)"
+            >
+                <v-list-item-avatar :color="!consumer.enabled ? 'error' : ''">
+                    <v-icon> mdi-shield-link-variant-outline </v-icon>
+                </v-list-item-avatar>
+                <v-list-item-content>
+                    <v-list-item-title>{{ consumer.name }}</v-list-item-title>
+                    <v-list-item-subtitle v-if="!consumer.enabled">
+                        <v-chip color="error">{{
+                            $t(
+                                'windward.integrations.components.settings.external_integration.lti_consumer.link_disabled'
+                            )
+                        }}</v-chip>
+                    </v-list-item-subtitle>
+                    <v-list-item-subtitle>{{
+                        consumer.description.replace(/(<([^>]+)>)/gi, '').trim()
+                    }}</v-list-item-subtitle>
+                </v-list-item-content>
+            </v-list-item>
+        </v-list>
+    </v-container>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import Course from '~/models/Course'
+import Organization from '~/models/Organization'
+import Lti1p1Consumer from '../../../models/ExternalIntegration/Lti1p1Consumer'
+
+export default {
+    name: 'ContentBlockExternalIntegrationLti1p1ConsumerSettings',
+    extends: BaseContentSettings,
+    props: {
+        settings: { type: Object, required: false, default: null },
+        context: { type: String, required: false, default: 'block' },
+    },
+    data() {
+        return {
+            consumers: [],
+            launchTypes: [
+                {
+                    name: this.$t(
+                        'windward.integrations.components.settings.external_integration.lti_consumer.launch_type_new_window'
+                    ),
+                    value: 'new_window',
+                },
+                {
+                    name: this.$t(
+                        'windward.integrations.components.settings.external_integration.lti_consumer.launch_type_inline_frame'
+                    ),
+                    value: 'inline',
+                },
+            ],
+        }
+    },
+    async fetch() {
+        this.consumers = await new Lti1p1Consumer()
+            .for(
+                new Organization({ id: this.organization.id }),
+                new Course({ id: this.course.id })
+            )
+            .orderBy('name')
+            .get()
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    watch: {},
+    beforeMount() {},
+    mounted() {},
+    methods: {
+        onSelectLink(consumer) {
+            this.block.metadata.config.tool_id = consumer.id
+        },
+    },
+}
+</script>

package/i18n/en-US/components/content/blocks/external_integration/index.ts

@@ -0,0 +1,5 @@
+import ltiConsumer from './lti_consumer'
+
+export default {
+    lti_consumer: ltiConsumer,
+}

package/i18n/en-US/components/content/blocks/external_integration/lti_consumer.ts

@@ -0,0 +1,8 @@
+export default {
+    launch: 'Launch',
+    configure_warning:
+        'This block needs to be configured. Please select a LTI tool in the settings panel.',
+    missing_tool: 'The tool id {0} is missing',
+    unknown_error: 'Something went wrong! Could not launch this link!',
+    link_disabled: 'Link disabled',
+}

package/i18n/en-US/components/content/blocks/index.ts

@@ -0,0 +1,5 @@
+import externalIntegration from './external_integration'
+
+export default {
+    external_integration: externalIntegration,
+}

package/i18n/en-US/components/content/index.ts

@@ -0,0 +1,5 @@
+import blocks from './blocks'
+
+export default {
+    blocks,
+}

package/i18n/en-US/components/external_integration/driver/lti1p1.ts

@@ -1,8 +1,17 @@
 export default {
+    name: 'Name',
+    description: 'Description',
     key: 'Key',
     secret: 'Secret',
-    auto_key: 'Autogenerated Key',
-    auto_secret: 'Autogenerated Secret',
+    parameter_name: 'Custom Parameter Name',
+    value: 'Value',
+    auto_key: 'Leave empty for autogenerated key',
+    auto_secret: 'Leave empty for autogenerated secret',
+    change_key: 'Change Key',
+    change_secret: 'Change Secret',
+    new_key: 'New Key',
+    new_secret: 'New Secret',
+    target: 'Target',
     target_url: 'Target Url',
     launch_url: 'Launch Url',
     new: 'New LTI Link',

package/i18n/en-US/components/external_integration/index.ts

@@ -1,5 +1,6 @@
 import lti1p1 from './driver/lti1p1'
-
+import providerTarget from './provider_target'
 export default {
     driver: { lti1p1 },
+    provider_target: providerTarget,
 }

package/i18n/en-US/components/external_integration/provider_target.ts

@@ -0,0 +1,9 @@
+export default {
+    name: 'Target Name',
+    link_to: 'Link To',
+    included: 'Included',
+    whole_course: 'Whole Course',
+    whole_course_page: 'Whole Course Choose Landing Page',
+    content_with_children: 'Content with Child Pages',
+    content_no_children: 'Single Content Page',
+}

package/i18n/en-US/components/index.ts

@@ -1,8 +1,12 @@
+import content from './content'
+import settings from './settings'
 import navigation from './navigation'
 import integration from './integration'
 import externalIntegration from './external_integration'
 
 export default {
+    content,
+    settings,
     navigation,
     integration,
     external_integration: externalIntegration,

package/i18n/en-US/components/settings/external_integration/index.ts

@@ -0,0 +1,5 @@
+import ltiConsumer from './lti_consumer'
+
+export default {
+    lti_consumer: ltiConsumer,
+}

package/i18n/en-US/components/settings/external_integration/lti_consumer.ts

@@ -0,0 +1,7 @@
+export default {
+    launch_type: 'Launch Type',
+    launch_type_new_window: 'New Window',
+    launch_type_inline_frame: 'Inline Frame',
+    link_select: 'Select a Link:',
+    link_disabled: 'Link Disabled',
+}

package/i18n/en-US/components/settings/index.ts

@@ -0,0 +1,5 @@
+import externalIntegration from './external_integration'
+
+export default {
+    external_integration: externalIntegration,
+}

package/i18n/en-US/shared/content_blocks.ts

@@ -0,0 +1,8 @@
+export default {
+    title: {
+        lti_consumer: 'LTI Link',
+    },
+    grouping: {
+        integrations: 'Integrations',
+    },
+}

package/i18n/en-US/shared/index.ts

@@ -1,9 +1,11 @@
+import contentBlocks from './content_blocks'
 import settings from './settings'
 import menu from './menu'
 import permission from './permission'
 import error from './error'
 
 export default {
+    content_blocks: contentBlocks,
     settings,
     menu,
     permission,

package/i18n/en-US/shared/settings.ts

@@ -1 +1,5 @@
-export default {}
+export default {
+    title: {
+        lti_consumer: 'LTI Consumer',
+    },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/integrations",
-    "version": "0.0.5",
+    "version": "0.0.7",
     "description": "Windward UI Plugin Integrations for 3rd Party Systems",
     "main": "plugin.js",
     "scripts": {

package/pages/admin/importCourse.vue

@@ -287,6 +287,7 @@ export default {
                         .get()
                 } catch (e) {
                     if (e.response.status === 404) {
+                        // eslint-disable-next-line no-console
                         console.error(e)
                         this.$dialog.error(
                             this.$t(
@@ -329,6 +330,7 @@ export default {
                     .get()
             } catch (e) {
                 if (e.response.status === 404) {
+                    // eslint-disable-next-line no-console
                     console.error(e)
                     this.$dialog.error(
                         this.$t(
@@ -374,6 +376,7 @@ export default {
                     }
                 } catch (e) {
                     if (e.response.status === 404) {
+                        // eslint-disable-next-line no-console
                         console.error(e)
                         this.$dialog.error(
                             this.$t(

package/pages/admin/vendors.vue

@@ -151,9 +151,9 @@
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
 
+import Dialog from '~/components/Dialog.vue'
 import Organization from '../../models/Organization'
 import IntegrationJobTable from '../../components/Integration/JobTable.vue'
-import Dialog from '~/components/Dialog.vue'
 
 export default {
     name: 'PluginIntegrationsAdminVendorsPage',
@@ -216,6 +216,7 @@ export default {
                     .integrations()
                     .get()
             } catch (e) {
+                // eslint-disable-next-line no-console
                 console.error('Could not load organization integrations', e)
             }
         },

package/plugin.js

@@ -6,6 +6,9 @@ import ExternalIntegrationIndexPage from './pages/course/externalIntegration/ind
 import LoginLtiErrorPage from './pages/login/lti/error.vue'
 import IntegrationHelper from './helpers/IntegrationHelper'
 
+import LtiConsumerBlock from './components/Content/Blocks/ExternalIntegration/LtiConsumer'
+import LtiConsumerBlockSettings from './components/Settings/ExternalIntegration/LtiConsumerSettings'
+
 export default {
     name: 'windward.integrations.name',
     hooks: {
@@ -15,7 +18,7 @@ export default {
         beforeDestroy: () => {},
         beforeNavigate: () => {},
         onNavigate: () => {},
-        onLoad: (page) => {},
+        onLoad: (_page) => {},
         onContent: () => {},
     },
     i18n: {
@@ -131,6 +134,29 @@ export default {
                 ],
             },
         ],
+        contentBlock: [
+            {
+                tag: 'windward-integrations-lti-consumer',
+                template: LtiConsumerBlock,
+                metadata: {
+                    icon: 'mdi-shield-link-variant-outline',
+                    name: 'windward.integrations.shared.content_blocks.title.lti_consumer',
+                    grouping:
+                        'windward.integrations.shared.content_blocks.grouping.integrations',
+                },
+            },
+        ],
+        settings: [
+            {
+                tag: 'windward-integrations-lti-consumer-settings',
+                template: LtiConsumerBlockSettings,
+                context: ['block.windward-integrations-lti-consumer'],
+                metadata: {
+                    icon: 'mdi-cog',
+                    name: 'windward.integrations.shared.settings.title.lti_consumer',
+                },
+            },
+        ],
     },
     services: {
         Integration: IntegrationHelper,