@windward/integrations 0.18.0 → 0.19.0

package/models/ExternalIntegration/{LtiProvider.ts → Provider.ts}

@@ -1,13 +1,13 @@
 // @ts-ignore
 import Model from '~/models/Model'
 
-export default class LtiProvider extends Model {
+export default class Provider extends Model {
     get required(): string[] {
         return []
     }
 
     // Set the resource route of the model
     resource() {
-        return 'external-integrations/lti/providers'
+        return 'external-integration-providers'
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/integrations",
-    "version": "0.18.0",
+    "version": "0.19.0",
     "description": "Windward UI Plugin Integrations for 3rd Party Systems",
     "main": "plugin.js",
     "scripts": {
@@ -25,6 +25,7 @@
         "@windward/core": "^0.8.0",
         "canvas-confetti": "^1.6.0",
         "eslint": "^8.11.0",
+        "jwt-decode": "^4.0.0",
         "laravel-echo": "^1.15.0",
         "prettier": "^2.6.0",
         "pusher-js": "^8.0.1"

package/pages/course/externalIntegration/index.vue

@@ -61,5 +61,9 @@ export default {
             ]
         },
     },
+    mounted() {
+        // Emit the page load event so MenuMainNavigation knows what page is active
+        this.$eb.$emit('load:page', 'course_settings')
+    },
 }
 </script>

package/pages/login/scorm/error.vue

@@ -0,0 +1,102 @@
+<template>
+    <v-container>
+        <v-divider />
+        <v-row>
+            <v-col cols="12" md="6" offset-md="3">
+                <h1 class="text-center mt-5">
+                    {{
+                        $t(
+                            'windward.integrations.pages.login.scorm.launch_error'
+                        )
+                    }}
+                </h1>
+                <v-alert
+                    v-if="error.length === 0 && missing.length === 0"
+                    type="error"
+                    class="mt-5"
+                >
+                    <strong>{{
+                        $t(
+                            'windward.integrations.pages.login.scorm.error.unknown'
+                        )
+                    }}</strong>
+                </v-alert>
+                <v-alert v-if="missing.length" type="warning" class="mt-5">
+                    <strong>{{
+                        $t(
+                            'windward.integrations.pages.login.scorm.missing_title'
+                        )
+                    }}</strong>
+                    <ul>
+                        <li v-for="missingItem in missing" :key="missingItem">
+                            {{
+                                $t(
+                                    'windward.integrations.pages.login.scorm.missing.' +
+                                        missingItem
+                                )
+                            }}
+                        </li>
+                    </ul>
+                </v-alert>
+                <v-alert v-if="error.length" type="error" class="mt-5">
+                    <strong>{{
+                        $t(
+                            'windward.integrations.pages.login.scorm.error_title'
+                        )
+                    }}</strong>
+                    <ul>
+                        <li v-for="errorItem in error" :key="errorItem">
+                            {{
+                                $t(
+                                    'windward.integrations.pages.login.scorm.error.' +
+                                        errorItem
+                                )
+                            }}
+                        </li>
+                    </ul>
+                </v-alert>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script>
+import _ from 'lodash'
+export default {
+    name: 'PluginIntegrationsLoginScormErrorPage',
+    layout: 'default',
+    data() {
+        return {
+            missing: [],
+            error: [],
+        }
+    },
+    async fetch() {},
+    computed: {},
+    mounted() {
+        // Get the missing url parameters to display
+        if (!_.isEmpty(_.get(this.$route, 'query.missing', ''))) {
+            this.missing = _.get(this.$route, 'query.missing', '')
+                .split(',')
+                .map((v) => v.trim())
+        }
+
+        // Get the error url parameters to display
+        if (!_.isEmpty(_.get(this.$route, 'query.error', ''))) {
+            this.error = _.get(this.$route, 'query.error', '')
+                .split(',')
+                .map((v) => v.trim())
+        }
+
+        // Set the appropriate locale
+        if (!_.isEmpty(_.get(this.$route, 'query.locale', ''))) {
+            const locale = _.get(this.$route, 'query.locale', '')
+
+            if (this.$i18n.locales.includes(locale)) {
+                this.$i18n.setLocale(locale)
+            }
+        }
+    },
+    methods: {},
+}
+</script>

package/pages/login/scorm/promptEmail.vue

@@ -0,0 +1,180 @@
+<template>
+    <v-container>
+        <v-divider />
+        <v-row v-if="error">
+            <v-col cols="12" lg="6" offset-lg="3">
+                <v-alert type="error" class="mt-5 text-center">
+                    <strong>{{ error }}</strong>
+                </v-alert>
+            </v-col>
+        </v-row>
+
+        <div v-if="error === null">
+            <v-row>
+                <v-col cols="12" lg="6" offset-lg="3">
+                    <h2 class="text-center my-5">
+                        {{
+                            $t(
+                                'windward.integrations.pages.login.scorm.email_required'
+                            )
+                        }}
+                    </h2>
+
+                    <v-card>
+                        <v-card-text>
+                            <v-row>
+                                <v-col v-if="course.icon" cols="4">
+                                    <v-img :src="course.icon" />
+                                </v-col>
+                                <v-col :cols="course.icon ? 8 : 12">
+                                    <p>
+                                        <strong>{{ course.name }}</strong>
+                                    </p>
+                                    <p>
+                                        {{
+                                            $t(
+                                                'windward.integrations.pages.login.scorm.enter_email'
+                                            )
+                                        }}
+                                    </p>
+                                    <p>
+                                        <a
+                                            :href="privacyPolicyUrl"
+                                            target="_blank"
+                                            >{{
+                                                $t(
+                                                    'windward.integrations.pages.login.scorm.privacy_policy'
+                                                )
+                                            }}</a
+                                        >
+                                    </p>
+                                </v-col>
+                            </v-row>
+
+                            <v-row>
+                                <v-col cols="12">
+                                    <v-form
+                                        ref="form"
+                                        v-model="formValid"
+                                        lazy-validation
+                                        @submit.prevent="onSubmit"
+                                    >
+                                        <v-text-field
+                                            v-model="email"
+                                            :label="$t('shared.forms.email')"
+                                            :rules="
+                                                $Validation.getRule('email')
+                                            "
+                                        />
+                                        <v-btn
+                                            color="primary"
+                                            :disabled="!formValid"
+                                            @click="onSubmit"
+                                        >
+                                            {{ $t('shared.forms.continue') }}
+                                        </v-btn>
+                                    </v-form>
+                                </v-col>
+                            </v-row>
+                        </v-card-text>
+                    </v-card>
+                </v-col>
+            </v-row>
+            <v-divider class="my-8" />
+        </div>
+    </v-container>
+</template>
+
+<script>
+import _ from 'lodash'
+import Uuid from '~/helpers/Uuid'
+
+export default {
+    components: {},
+    name: 'PluginIntegrationsLoginScormErrorPage',
+    layout: 'default',
+    data() {
+        return {
+            loaded: false,
+            formValid: false,
+            email: null,
+            callback: null,
+            state: null,
+            course: {
+                id: null,
+                name: null,
+                icon: null,
+            },
+            privacyPolicyUrl: 'https://www.mindedge.com/privacy-policy/',
+        }
+    },
+    async fetch() {},
+    computed: {
+        error() {
+            if (!this.loaded) {
+                return null
+            } else if (!Uuid.test(this.course.id)) {
+                return this.$t(
+                    'windward.integrations.pages.login.scorm.missing.course_id'
+                )
+            } else if (this.course.name === null) {
+                return this.$t(
+                    'windward.integrations.pages.login.scorm.missing.course_name'
+                )
+            } else if (!this.callback) {
+                return this.$t(
+                    'windward.integrations.pages.login.scorm.missing.callback'
+                )
+            } else if (!this.state) {
+                return this.$t(
+                    'windward.integrations.pages.login.scorm.missing.state'
+                )
+            }
+            return null
+        },
+    },
+    mounted() {
+        // Get the state url parameter to callback with. This is just the encrypted payload from earlier
+        this.state = _.get(this.$route, 'query.state', null)
+
+        // Get the data url parameter to display course information
+        if (!_.isEmpty(_.get(this.$route, 'query.data', ''))) {
+            try {
+                const data = JSON.parse(
+                    atob(_.get(this.$route, 'query.data', ''))
+                )
+                this.course.id = data.id
+                this.course.name = data.name
+                this.course.icon = data.icon
+                this.callback = data.callback
+            } catch (e) {
+                console.error('Could not parse course data', e)
+            }
+        }
+
+        // Set the appropriate locale
+        if (!_.isEmpty(_.get(this.$route, 'query.locale', ''))) {
+            const locale = _.get(this.$route, 'query.locale', '')
+
+            if (this.$i18n.locales.includes(locale)) {
+                this.$i18n.setLocale(locale)
+            }
+        }
+
+        this.loaded = true
+    },
+    methods: {
+        onSubmit() {
+            if (this.email) {
+                let url = this.callback
+                url += '?state=' + this.state
+                url += '&email=' + btoa(this.email.trim())
+
+                console.log('Redirecting to ', url)
+                // Redirect back to the callback url
+                window.location = url
+            }
+        },
+    },
+}
+</script>

package/plugin.js

@@ -1,13 +1,22 @@
+import _ from 'lodash'
 import locales from './i18n'
 
 import AdminVendorsPage from './pages/admin/vendors.vue'
 import AdminImportCoursePage from './pages/admin/importCourse.vue'
 import ExternalIntegrationIndexPage from './pages/course/externalIntegration/index.vue'
 import LoginLtiErrorPage from './pages/login/lti/error.vue'
+import LoginScormErrorPage from './pages/login/scorm/error.vue'
+import LoginScormPromptEmailPage from './pages/login/scorm/promptEmail.vue'
+
 import IntegrationHelper from './helpers/IntegrationHelper'
+import ExternalIntegrationScormHelper from './helpers/ExternalIntegration/ScormHelper'
 
 import LtiConsumerBlock from './components/Content/Blocks/ExternalIntegration/LtiConsumer'
 import LtiConsumerBlockSettings from './components/Settings/ExternalIntegration/LtiConsumerSettings'
+
+import ScormConsumerBlock from './components/Content/Blocks/ExternalIntegration/ScormConsumer'
+import ScormConsumerBlockSettings from './components/Settings/ExternalIntegration/ScormConsumerSettings'
+
 import ManageCourseIntegrationSettings from './components/Settings/ExternalIntegration/ManageCourseIntegrationSettings'
 
 import FileImportMenu from './components/FileImport/FileImportMenu.vue'
@@ -27,14 +36,75 @@ export default {
     name: 'windward.integrations.name',
     version: null,
     hooks: {
-        beforeContent: (body) => {
-            return body
+        'update:enrollment': (app, enrollment = {}) => {
+            // If this tracking is for a SCORM enrollment then tell the service to emit the progess back to the host LMS
+            if (
+                enrollment &&
+                _.get(enrollment, 'metadata.integration.type', '') ===
+                    'scorm' &&
+                _.get(enrollment, 'course_progress.id', null) !== null
+            ) {
+                try {
+                    app.$ExternalIntegrationScorm.trackEnrollment(enrollment)
+                } catch (e) {
+                    console.error('Cannot track updated SCORM progress', e)
+                }
+            } else if (
+                enrollment &&
+                _.get(enrollment, 'metadata.integration.type', '') ===
+                    'scorm' &&
+                _.get(enrollment, 'course_progress.id', null) === null
+            ) {
+                console.error(
+                    'Could not push initial data to host LMS. The enrollment is missing progress.'
+                )
+            }
+        },
+        'load:enrollment': (app, enrollment = {}) => {
+            // If this tracking is for a SCORM enrollment then tell the service to emit the progess back to the host LMS
+            if (
+                enrollment &&
+                _.get(enrollment, 'metadata.integration.type', '') ===
+                    'scorm' &&
+                _.get(enrollment, 'course_progress.id', null) !== null
+            ) {
+                try {
+                    app.$ExternalIntegrationScorm.trackEnrollment(enrollment)
+                } catch (e) {
+                    console.error('Cannot track SCORM progress', e)
+                }
+            } else if (
+                enrollment &&
+                _.get(enrollment, 'metadata.integration.type', '') ===
+                    'scorm' &&
+                _.get(enrollment, 'course_progress.id', null) === null
+            ) {
+                console.error(
+                    'Could not push initial data to host LMS. The enrollment is missing progress.'
+                )
+            }
+        },
+        'update:tracking': (app, courseUserTracking = {}) => {
+            const enrollment = _.get(
+                app,
+                "store.getters['enrollment/get']",
+                null
+            )
+
+            // If this tracking is for a SCORM enrollment then tell the service to emit the progess back to the host LMS
+            if (
+                enrollment &&
+                _.get(enrollment, 'metadata.integration.type', '') === 'scorm'
+            ) {
+                try {
+                    app.$ExternalIntegrationScorm.trackProgress(
+                        courseUserTracking
+                    )
+                } catch (e) {
+                    console.error('Cannot track SCORM progress', e)
+                }
+            }
         },
-        beforeDestroy: () => {},
-        beforeNavigate: () => {},
-        onNavigate: () => {},
-        onLoad: (_page) => {},
-        onContent: () => {},
     },
     i18n: locales.messages,
     pages: [
@@ -66,6 +136,20 @@ export default {
             name: 'PluginIntegrationsLoginLtiErrorPage',
             template: LoginLtiErrorPage,
         },
+        {
+            page: 'scorm-error',
+            path: '/login/scorm/error',
+            i18n: 'windward.integrations.pages.login.scorm.scorm_error',
+            name: 'PluginIntegrationsLoginScormErrorPage',
+            template: LoginScormErrorPage,
+        },
+        {
+            page: 'scorm-prompt-email',
+            path: '/login/scorm/prompt-email',
+            i18n: 'windward.integrations.pages.login.scorm.scorm_prompt_email',
+            name: 'PluginIntegrationsLoginScormPromptEmailPage',
+            template: LoginScormPromptEmailPage,
+        },
     ],
     components: {
         userLogin: [
@@ -195,6 +279,16 @@ export default {
                         'windward.integrations.shared.content_blocks.grouping.integrations',
                 },
             },
+            /*{
+                tag: 'windward-integrations-scorm-consumer',
+                template: ScormConsumerBlock,
+                metadata: {
+                    icon: 'mdi-shield-link-variant-outline',
+                    name: 'windward.integrations.shared.content_blocks.title.scorm_consumer',
+                    grouping:
+                        'windward.integrations.shared.content_blocks.grouping.integrations',
+                },
+            },*/
         ],
         contentBlockSetting: [
             {
@@ -206,6 +300,15 @@ export default {
                     name: 'windward.integrations.shared.settings.title.lti_consumer',
                 },
             },
+            {
+                tag: 'windward-integrations-scorm-consumer-settings',
+                template: ScormConsumerBlockSettings,
+                context: ['block.windward-integrations-scorm-consumer'],
+                metadata: {
+                    icon: 'mdi-cog',
+                    name: 'windward.integrations.shared.settings.title.scorm_consumer',
+                },
+            },
         ],
         courseSetting: [
             {
@@ -268,5 +371,6 @@ export default {
     },
     services: {
         Integration: IntegrationHelper,
+        ExternalIntegrationScorm: ExternalIntegrationScormHelper,
     },
 }

package/test/Components/ExternalIntegration/ManageScorm.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { defaultMocks } from '@/test/mocks'
+
+import ManageScorm from '@/components/ExternalIntegration/Driver/ManageScorm.vue'
+
+Vue.use(Vuetify)
+
+describe('ManageScorm', () => {
+    test('ManageScorm is a Vue instance', () => {
+        const wrapper = shallowMount(ManageScorm, {
+            vuetify: new Vuetify(),
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/Components/ExternalIntegration/Scorm/ManageConsumer.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { defaultMocks } from '@/test/mocks'
+
+import ManageConsumer from '@/components/ExternalIntegration/Driver/Lti1p1/ManageConsumer.vue'
+
+Vue.use(Vuetify)
+
+describe('ManageConsumer', () => {
+    test('ManageConsumer is a Vue instance', () => {
+        const wrapper = shallowMount(ManageConsumer, {
+            vuetify: new Vuetify(),
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/Components/ExternalIntegration/Scorm/ManageConsumers.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { defaultMocks } from '@/test/mocks'
+
+import ManageConsumers from '@/components/ExternalIntegration/Driver/Scorm/ManageConsumers.vue'
+
+Vue.use(Vuetify)
+
+describe('ManageConsumers', () => {
+    test('ManageConsumers is a Vue instance', () => {
+        const wrapper = shallowMount(ManageConsumers, {
+            vuetify: new Vuetify(),
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/Components/ExternalIntegration/Scorm/ManageProvider.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { defaultMocks } from '@/test/mocks'
+
+import ManageProvider from '@/components/ExternalIntegration/Driver/Scorm/ManageProvider.vue'
+
+Vue.use(Vuetify)
+
+describe('ManageProvider', () => {
+    test('ManageProvider is a Vue instance', () => {
+        const wrapper = shallowMount(ManageProvider, {
+            vuetify: new Vuetify(),
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/Components/ExternalIntegration/Scorm/ManageProviders.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { defaultMocks } from '@/test/mocks'
+
+import ManageProviders from '@/components/ExternalIntegration/Driver/Scorm/ManageProviders.vue'
+
+Vue.use(Vuetify)
+
+describe('ManageProviders', () => {
+    test('ManageProviders is a Vue instance', () => {
+        const wrapper = shallowMount(ManageProviders, {
+            vuetify: new Vuetify(),
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/mocks.js

@@ -28,5 +28,17 @@ mocks.$Integration = {
     },
 }
 mocks.$PermissionService = { userHasAccessTo: () => true }
+mocks.$Validation = {
+    getRule() {
+        return []
+    },
+    getLimit() {
+        return 0
+    },
+    addLimit() {},
+    addRule() {},
+    addLimits() {},
+    addRules() {},
+}
 
 export const defaultMocks = mocks