@windward/integrations 0.0.6 → 0.0.8

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

@@ -23,29 +23,44 @@
             :items-per-page="10"
             class="elevation-1"
         >
-            <template #item.metadata.key="{ item }">
+            <template #[`item.target`]="{ item }">
+                <ProviderTargetViewer
+                    class="field--target text-truncate"
+                    :target="item.target"
+                ></ProviderTargetViewer>
+            </template>
+            <template #[`item.metadata.key`]="{ item }">
                 <SecretField v-model="item.metadata.key"></SecretField>
             </template>
-            <template #item.metadata.secret="{ item }">
+            <template #[`item.metadata.secret`]="{ item }">
                 <SecretField v-model="item.metadata.secret"></SecretField>
             </template>
-            <template #item.url="{ item }">
+            <template #[`item.url`]="{ item }">
                 <SecretField v-model="item.url" :hidden="false"></SecretField>
             </template>
 
-            <template #item.enabled="{ item }">
+            <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.driver.lti1p1.enabled'
+                        'windward.integrations.components.external_integration.grade_sync'
                     )
                 }}</span>
             </template>
 
-            <template #item.created_at="{ item }">
-                {{ $d(new Date(item.created_at), 'long') }}
+            <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">
@@ -83,23 +98,24 @@
 <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'
+import Lti1p1Provider from '../../../../models/ExternalIntegration/Lti1p1Provider'
+import SecretField from '../../../SecretField.vue'
+import ProviderTargetViewer from '../../ProviderTargetViewer.vue'
+import ManageProvider from './ManageProvider.vue'
 
 export default {
     name: 'ManageLti1p1ProvidersDriver',
-    components: { SecretField, Dialog, ManageProvider },
+    components: { SecretField, Dialog, ManageProvider, ProviderTargetViewer },
     data() {
         return {
             providers: [],
             headers: [
                 {
                     text: this.$t(
-                        'windward.integrations.components.external_integration.driver.lti1p1.target_url'
+                        'windward.integrations.components.external_integration.target'
                     ),
                     value: 'target',
                 },
@@ -117,15 +133,19 @@ export default {
                 },
                 {
                     text: this.$t(
-                        'windward.integrations.components.external_integration.driver.lti1p1.launch_url'
+                        '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.driver.lti1p1.enabled'
+                        'windward.integrations.components.external_integration.grade_sync'
                     ),
-                    value: 'enabled',
+                    value: 'grade_sync',
                 },
                 { text: this.$t('shared.forms.created'), value: 'created_at' },
                 {
@@ -151,16 +171,18 @@ export default {
                 duration: null,
                 action: {
                     text: this.$t('shared.forms.close'),
-                    onClick: (e, toastObject) => {
+                    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!'
                 )
@@ -179,7 +201,7 @@ export default {
         }),
     },
     methods: {
-        onSaved(e) {
+        onSaved() {
             this.loadProviders()
         },
         async loadProviders() {
@@ -197,14 +219,14 @@ export default {
                 action: [
                     {
                         text: this.$t('shared.forms.cancel'),
-                        onClick: (e, toastObject) => {
+                        onClick: (_e, toastObject) => {
                             toastObject.goAway(0)
                         },
                     },
                     {
                         text: this.$t('shared.forms.confirm'),
                         // router navigation
-                        onClick: (e, toastObject) => {
+                        onClick: (_e, toastObject) => {
                             this.deleteProvider(provider)
                             toastObject.goAway(0)
                         },
@@ -212,9 +234,19 @@ export default {
                 ],
             })
         },
-        deleteProvider(provider) {
-            provider.delete()
+        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/ManageLti1p1.vue

@@ -5,7 +5,7 @@
                 <v-expansion-panel-header>
                     {{
                         $t(
-                            'windward.integrations.components.external_integration.driver.lti1p1.provider_panel'
+                            'windward.integrations.components.external_integration.provider_panel_title'
                         )
                     }}
                 </v-expansion-panel-header>
@@ -17,7 +17,7 @@
                 <v-expansion-panel-header>
                     {{
                         $t(
-                            'windward.integrations.components.external_integration.driver.lti1p1.consumer_panel'
+                            'windward.integrations.components.external_integration.consumer_panel_title'
                         )
                     }}
                 </v-expansion-panel-header>

package/components/ExternalIntegration/ProviderTargetPicker.vue

@@ -0,0 +1,218 @@
+<template>
+    <div>
+        <v-radio-group
+            v-model="provider.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="
+                provider.target_type === 'course_content' ||
+                provider.target_type === 'locked_course_content_children' ||
+                provider.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: {
+        value: { type: Object, required: true },
+    },
+    data() {
+        return {
+            selectedContent: null,
+            selectedTreeviewContent: [],
+            provider: {},
+        }
+    },
+    computed: {
+        ...mapGetters({
+            contentTree: 'content/getTree',
+            course: 'course/get',
+        }),
+    },
+    watch: {
+        // Apply any changes coming up
+        value: {
+            handler(value) {
+                this.provider = _.cloneDeep(value)
+            },
+        },
+    },
+    mounted() {
+        // Init our local vars
+        this.provider = _.cloneDeep(this.value)
+
+        // Set the target_type key if it doesn't exist
+        if (!this.provider.target_type) {
+            this.provider.target_type = 'course'
+        }
+
+        // Preset the selected content
+        if (this.provider.target) {
+            if (!_.isEmpty(this.provider.course_content_id)) {
+                this.setSelectedContentById(this.provider.course_content_id)
+            }
+        }
+        this.sync(this.provider.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}`
+                this.provider.course_content_id = this.selectedContent.id
+            } else if (targetType === 'course') {
+                url = `/course/${this.course.id}/`
+                this.provider.course_content_id = null
+            }
+            this.provider.target = url
+            // Sync up the changes to the parent component
+            this.$emit('input', this.provider)
+        },
+        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.provider.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.provider.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

@@ -46,10 +46,8 @@
 </template>
 
 <script>
-import _ from 'lodash'
 import { mapGetters } from 'vuex'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
-import ManageConsumer from '../../ExternalIntegration/Driver/Lti1p1/ManageConsumer.vue'
 import Course from '~/models/Course'
 import Organization from '~/models/Organization'
 import Lti1p1Consumer from '../../../models/ExternalIntegration/Lti1p1Consumer'
@@ -57,27 +55,10 @@ import Lti1p1Consumer from '../../../models/ExternalIntegration/Lti1p1Consumer'
 export default {
     name: 'ContentBlockExternalIntegrationLti1p1ConsumerSettings',
     extends: BaseContentSettings,
-    components: { ManageConsumer },
     props: {
         settings: { type: Object, required: false, default: null },
         context: { type: String, required: false, default: 'block' },
     },
-    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',
-        }),
-    },
-    beforeMount() {},
     data() {
         return {
             consumers: [],
@@ -97,7 +78,23 @@ export default {
             ],
         }
     },
+    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) {

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

@@ -2,6 +2,8 @@ export default {
     launch: 'Launch',
     configure_warning:
         'This block needs to be configured. Please select a LTI tool in the settings panel.',
+    no_access:
+        'You do not have permissions to launch this link. Please contact your system administrator.',
     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/external_integration/driver/lti1p1.ts

@@ -1,6 +1,4 @@
 export default {
-    name: 'Name',
-    description: 'Description',
     key: 'Key',
     secret: 'Secret',
     parameter_name: 'Custom Parameter Name',
@@ -11,24 +9,6 @@ export default {
     change_secret: 'Change Secret',
     new_key: 'New Key',
     new_secret: 'New Secret',
-    target_url: 'Target Url',
-    launch_url: 'Launch Url',
     new: 'New LTI Link',
     edit: 'Edit LTI Link',
-    enabled: 'Enabled',
-    provider: 'Provider',
-    consumer: 'Consumer',
-    provider_panel: 'Provider (Students incoming to Windward)',
-    consumer_panel: 'Consumer (Students outgoing from Windward)',
-    role_map_panel: 'Role map',
-    role_in_host: 'Role in Host LMS',
-    role_in_local: 'Role in Windward',
-    remote_role: 'Remote Role name',
-    map_to_role: 'Map to Windward Role',
-    delete_role_map_item: 'Delete role map item',
-    add_role_map_item: 'Add role map item',
-    role_map_instructions:
-        'Only add roles to the below map if the host LMS uses different role names that you want to elevated permissions. Eg "Mentor" that you want to elevate to "External Instructor"',
-    role_map_warning:
-        'Only add roles to the below map if the host LMS uses different role names that you want to elevated permissions. Eg "Mentor" that you want to elevate to "External Instructor"',
 }

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

@@ -1,5 +1,30 @@
 import lti1p1 from './driver/lti1p1'
-
+import providerTarget from './provider_target'
 export default {
     driver: { lti1p1 },
+    provider_target: providerTarget,
+
+    provider_panel_title: 'Provider (Students incoming to Windward)',
+    consumer_panel_title: 'Consumer (Students outgoing from Windward)',
+
+    target: 'Target',
+    target_url: 'Target Url',
+    launch_url: 'Launch Url',
+
+    send_grades: 'Send grades to host LMS',
+    grade_sync: 'Grade Sync',
+    provider: 'Provider',
+    consumer: 'Consumer',
+
+    role_map_panel: 'Role map',
+    role_in_host: 'Role in Host LMS',
+    role_in_local: 'Role in Windward',
+    remote_role: 'Remote Role name',
+    map_to_role: 'Map to Windward Role',
+    delete_role_map_item: 'Delete role map item',
+    add_role_map_item: 'Add role map item',
+    role_map_instructions:
+        'Only add roles to the below map if the host LMS uses different role names that you want to elevated permissions. Eg "Mentor" that you want to elevate to "External Instructor"',
+    role_map_warning:
+        'Only add roles to the below map if the host LMS uses different role names that you want to elevated permissions. Eg "Mentor" that you want to elevate to "External Instructor"',
 }

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/pages/login/lti.ts

@@ -4,7 +4,7 @@ export default {
     missing_title: 'The below fields are missing:',
     error_title: 'The below errors occurred:',
     error: {
-        unknown: 'An unknown error occurred',
+        unknown: 'An unknown communication error occurred',
         organization: 'Invalid organization',
         tool: 'Invalid tool id',
         tool_organization: 'This tool does not belong to this organization',

package/package.json

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