@windward/integrations 0.0.8 → 0.0.9

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

@@ -0,0 +1,259 @@
+<template>
+    <div>
+        <Dialog
+            color="primary"
+            action-save
+            action-save-new
+            @click:save="onSaved"
+        >
+            <template #title>{{
+                $t(
+                    'windward.integrations.components.external_integration.driver.lti1p1.new'
+                )
+            }}</template>
+            <template #trigger>{{ $t('shared.forms.new') }}</template>
+            <template #form="{ on, attrs }"
+                ><ManageProvider v-bind="attrs" v-on="on"></ManageProvider
+            ></template>
+        </Dialog>
+
+        <v-data-table
+            :headers="headers"
+            :items="providers"
+            :items-per-page="10"
+            class="elevation-1"
+        >
+            <template #[`item.target`]="{ item }">
+                <ProviderTargetViewer
+                    class="field--target text-truncate"
+                    :target="item.target"
+                ></ProviderTargetViewer>
+            </template>
+            <template #[`item.metadata.tool_public_keyset_url`]="{ item }">
+                <SecretField
+                    v-model="item.metadata.tool_public_keyset_url"
+                    :hidden="false"
+                ></SecretField>
+            </template>
+            <template #[`item.metadata.tool_oidc_auth_endpoint`]="{ item }">
+                <SecretField
+                    v-model="item.metadata.tool_oidc_auth_endpoint"
+                    :hidden="false"
+                ></SecretField>
+            </template>
+            <template #[`item.url`]="{ item }">
+                <SecretField v-model="item.url" :hidden="false"></SecretField>
+            </template>
+
+            <template #[`item.enabled`]="{ item }">
+                <v-icon :color="item.enabled ? 'success' : 'error'"
+                    >{{ item.enabled ? 'mdi-check' : 'mdi-close' }}
+                </v-icon>
+                <span v-if="!item.enabled" class="sr-only">{{
+                    $t('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.grade_sync'
+                    )
+                }}</span>
+            </template>
+
+            <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">
+                    <template #title>{{
+                        $t(
+                            'windward.integrations.components.external_integration.driver.lti1p3.edit'
+                        )
+                    }}</template>
+                    <template #trigger>
+                        <v-icon small>mdi-pencil</v-icon>
+                        <span class="sr-only">{{
+                            $t(
+                                'windward.integrations.components.external_integration.driver.lti1p3.edit'
+                            )
+                        }}</span>
+                    </template>
+                    <template #form="{ on, attrs }"
+                        ><ManageProvider
+                            v-model="providers[index]"
+                            v-bind="attrs"
+                            v-on="on"
+                        ></ManageProvider
+                    ></template>
+                </Dialog>
+
+                <v-btn icon>
+                    <v-icon @click="onConfirmDelete(item)"> mdi-delete </v-icon>
+                    <span class="sr-only">{{ $t('shared.forms.delete') }}</span>
+                </v-btn>
+            </template>
+        </v-data-table>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import LtiProvider from '../../../../models/ExternalIntegration/LtiProvider'
+import SecretField from '../../../SecretField.vue'
+import ProviderTargetViewer from '../../ProviderTargetViewer.vue'
+import ManageProvider from './ManageProvider.vue'
+import Dialog from '~/components/Dialog.vue'
+import Organization from '~/models/Organization'
+import Course from '~/models/Course'
+
+export default {
+    name: 'ManageLti1p1ProvidersDriver',
+    components: { SecretField, Dialog, ManageProvider, ProviderTargetViewer },
+    data() {
+        return {
+            providers: [],
+            headers: [
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.target'
+                    ),
+                    value: 'target',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p3.tool_public_keyset_url'
+                    ),
+                    value: 'metadata.tool_public_keyset_url',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p3.tool_oidc_auth_endpoint'
+                    ),
+                    value: 'metadata.tool_oidc_auth_endpoint',
+                },
+                {
+                    text: this.$t(
+                        '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.grade_sync'
+                    ),
+                    value: 'grade_sync',
+                },
+                { text: this.$t('shared.forms.created'), value: 'created_at' },
+                {
+                    text: this.$t('shared.forms.actions'),
+                    value: 'actions',
+                    sortable: false,
+                },
+            ],
+        }
+    },
+
+    async fetch() {
+        if (
+            !this.$PermissionService.userHasAccessTo(
+                'plugin.windward.integrations.course.externalIntegration',
+                'readable'
+            ) ||
+            _.isEmpty(this.organization.id) ||
+            _.isEmpty(this.course.id)
+        ) {
+            // Display an angry error that they can't view this driver
+            this.$dialog.error(this.$t('shared.error.description_401'), {
+                duration: null,
+                action: {
+                    text: this.$t('shared.forms.close'),
+                    onClick: (_e, toastObject) => {
+                        toastObject.goAway(0)
+                    },
+                },
+            })
+            if (_.isEmpty(this.organization.id) || _.isEmpty(this.course.id)) {
+                // 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!'
+                )
+            }
+
+            // Return so we don't even attempt loading
+            return false
+        }
+
+        await this.loadProviders()
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    methods: {
+        onSaved() {
+            this.loadProviders()
+        },
+        async loadProviders() {
+            this.providers = await new LtiProvider()
+                .for(
+                    new Organization({ id: this.organization.id }),
+                    new Course({ id: this.course.id })
+                )
+                .where('version', '1.3')
+                .get()
+        },
+        onConfirmDelete(provider) {
+            this.$dialog.show(this.$t('shared.forms.confirm_delete_text'), {
+                icon: 'mdi-help',
+                duration: null,
+                action: [
+                    {
+                        text: this.$t('shared.forms.cancel'),
+                        onClick: (_e, toastObject) => {
+                            toastObject.goAway(0)
+                        },
+                    },
+                    {
+                        text: this.$t('shared.forms.confirm'),
+                        // router navigation
+                        onClick: (_e, toastObject) => {
+                            this.deleteProvider(provider)
+                            toastObject.goAway(0)
+                        },
+                    },
+                ],
+            })
+        },
+        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/ManageLti1p3.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <v-expansion-panels v-model="panel">
+            <v-expansion-panel>
+                <v-expansion-panel-header>
+                    {{
+                        $t(
+                            'windward.integrations.components.external_integration.provider_panel_title'
+                        )
+                    }}
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                    <ManageProviders></ManageProviders>
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+            <v-expansion-panel>
+                <v-expansion-panel-header>
+                    {{
+                        $t(
+                            'windward.integrations.components.external_integration.consumer_panel_title'
+                        )
+                    }}
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                    <!--                    <ManageConsumers></ManageConsumers>-->
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+        </v-expansion-panels>
+    </div>
+</template>
+
+<script>
+import ManageProviders from './Lti1p3/ManageProviders.vue'
+/* import ManageConsumers from './Lti1p3/ManageConsumers.vue' */
+
+export default {
+    name: 'ManageLti1p3Driver',
+    components: { ManageProviders },
+    data() {
+        return {
+            panel: 0,
+        }
+    },
+}
+</script>

package/components/Integration/Driver/ManageAtutor.vue

@@ -16,6 +16,7 @@
                     />
 
                     <v-text-field
+                        ref="atutor_url"
                         v-model="integration.metadata.config.url"
                         :label="
                             $t(
@@ -27,6 +28,7 @@
                                 'windward.integrations.components.integration.driver.atutor.url_hint'
                             )
                         "
+                        :rules="urlValidation"
                     ></v-text-field>
                     <v-text-field
                         v-model="integration.metadata.config.username"
@@ -47,6 +49,7 @@
                     ></v-text-field>
 
                     <v-text-field
+                        ref="aws-url"
                         v-model="integration.metadata.config.aws_secure_url"
                         :label="
                             $t(
@@ -58,6 +61,7 @@
                                 'windward.integrations.components.integration.driver.atutor.aws_secure_url_hint'
                             )
                         "
+                        :rules="urlValidation"
                     ></v-text-field>
 
                     <v-switch
@@ -100,6 +104,17 @@ export default {
             // integration: { metadata: {...} } The integration object to write to. Defined and loaded in ManageBase.vue
             errorMessage: '',
             testConnectionLoading: false,
+            urlValidation: [
+                (value) => {
+                    if (value && value.slice(-1) === '/') {
+                        return this.$t(
+                            'windward.integrations.components.integration.driver.remove_slash'
+                        )
+                    } else {
+                        return true
+                    }
+                },
+            ],
         }
     },
     methods: {

package/components/Integration/JobLog.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <v-btn color="primary" outlined @click="onViewLog()">
+            <v-icon>mdi-note-search</v-icon>
+        </v-btn>
+        <Dialog v-model="logDialog" :trigger="false">
+            <template #title>{{
+                $t('windward.integrations.components.integration.job.view_log')
+            }}</template>
+            <template #form>
+                <v-progress-circular v-if="loading" size="128" indeterminate />
+                <div v-if="!loading">
+                    <SearchField v-model="search" hide-filters></SearchField>
+
+                    <v-alert
+                        v-for="logItem in filteredLog"
+                        :key="logItem.id"
+                        :type="logItem.level"
+                    >
+                        {{ logItem.message }}
+                    </v-alert>
+
+                    <p v-if="filteredLog.length === 0">
+                        {{
+                            $t(
+                                'windward.integrations.components.integration.job.log_no_results'
+                            )
+                        }}
+                    </p>
+                </div>
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SearchField from '~/components/SearchField.vue'
+import Organization from '../../models/Organization'
+
+export default {
+    components: { SearchField },
+    name: 'IntegrationJobLog',
+    props: {
+        id: { type: String, required: true },
+    },
+    data() {
+        return {
+            search: {},
+            loading: true,
+            log: [],
+            logDialog: false,
+        }
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+        }),
+        filteredLog() {
+            if (!this.search.term || this.search.term.length < 3) {
+                return this.log
+            }
+            const filtered = this.log.filter((item) => {
+                return item.message
+                    .toLowerCase()
+                    .includes(this.search.term.toLowerCase())
+            })
+
+            return filtered
+        },
+    },
+    methods: {
+        async onViewLog() {
+            this.logDialog = true
+            this.log = []
+
+            const job = await new Organization({
+                id: this.organization.id,
+            })
+                .integrationJobs()
+                .with('log')
+                .find(this.id)
+
+            this.log = job.log
+            this.loading = false
+        },
+    },
+}
+</script>
+
+<style scoped>
+.col-progress {
+    min-width: 200px;
+}
+.col-details {
+    max-width: 100px;
+}
+</style>

package/components/Integration/JobTable.vue

@@ -42,7 +42,14 @@
                         <th class="text-left">
                             {{
                                 $t(
-                                    'windward.integrations.components.integration.job.created'
+                                    'windward.integrations.components.integration.job.started'
+                                )
+                            }}
+                        </th>
+                        <th class="text-left">
+                            {{
+                                $t(
+                                    'windward.integrations.components.integration.job.view_log'
                                 )
                             }}
                         </th>
@@ -119,6 +126,9 @@
                             {{ jobDetails(item) }}
                         </td>
                         <td>{{ $d(new Date(item.created_at), 'long') }}</td>
+                        <td>
+                            <JobLog :id="item.id"></JobLog>
+                        </td>
                     </tr>
                 </tbody>
             </template>
@@ -132,9 +142,11 @@ import _ from 'lodash'
 import { mapGetters } from 'vuex'
 import Vendor from '../../models/Vendor'
 import Organization from '../../models/Organization'
+import JobLog from './JobLog.vue'
 
 export default {
     name: 'IntegrationJobs',
+    components: { JobLog },
     props: {
         channel: { type: String, required: true },
         event: { type: String, required: true },
@@ -145,6 +157,8 @@ export default {
             vendors: [],
             orgIntegrations: [],
             jobs: [],
+            log: [],
+            logDialog: false,
         }
     },
     async fetch() {

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

@@ -0,0 +1,13 @@
+export default {
+    key: 'Key',
+    tool_public_keyset_url: 'Tool Keyset Url',
+    tool_oidc_auth_endpoint: 'Tool OpenID Connect Endpoint',
+    platform_public_keyset_url: 'Platform Keyset Url',
+    platform_oidc_auth_endpoint: 'Platform OpenID Connect Endpoint',
+    platform_client_id: 'Platform Client ID',
+    platform_deployment_id: 'Platform Deployment ID',
+    parameter_name: 'Custom Parameter Name',
+    value: 'Value',
+    new: 'New LTI Link',
+    edit: 'Edit LTI Link',
+}

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

@@ -1,7 +1,8 @@
 import lti1p1 from './driver/lti1p1'
+import lti1p3 from './driver/lti1p3'
 import providerTarget from './provider_target'
 export default {
-    driver: { lti1p1 },
+    driver: { lti1p1, lti1p3 },
     provider_target: providerTarget,
 
     provider_panel_title: 'Provider (Students incoming to Windward)',

package/i18n/en-US/components/integration/driver.ts

@@ -8,6 +8,7 @@ export default {
         aws_secure_url: 'AWS CDN Url',
         aws_secure_url_hint: 'Eg: https://cdn-d.mindedgecollege.com',
     },
+    remove_slash: 'Remove / at end of url',
     atutor_wgu: {
         manage_dialog_title: 'Manage ATutor WGU Integration',
     },

package/i18n/en-US/components/integration/job.ts

@@ -8,6 +8,9 @@ export default {
     progress: 'Progress',
     created: 'Created',
     details: 'Details',
+    started: 'Date started',
+    view_log: 'View Log',
+    log_no_results: 'No results found',
     job_details: {
         none: 'No details available',
         import_course: "Importing Course Id {0} '{1}'",

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

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

package/package.json

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

package/pages/admin/importCourse.vue

@@ -164,13 +164,13 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import Course from '~/models/Course'
 import Organization from '../../models/Organization'
 import OrganizationIntegration from '../../models/OrganizationIntegration'
 import RemoteOrganization from '../../models/RemoteOrganization'
 import RemoteCourse from '../../models/RemoteCourse'
 import RemoteContent from '../../models/RemoteContent'
 import IntegrationJobTable from '../../components/Integration/JobTable.vue'
+import Course from '~/models/Course'
 
 export default {
     name: 'PluginIntegrationsAdminImportCoursePage',

package/pages/admin/vendors.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+        <Breadcrumbs></Breadcrumbs>
         <v-row justify="center" align="center">
             <v-col cols="12">
                 <div class="d-flex mb-5">
@@ -150,14 +151,14 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-
+import Breadcrumbs from '~/components/Breadcrumbs.vue'
 import Dialog from '~/components/Dialog.vue'
 import Organization from '../../models/Organization'
 import IntegrationJobTable from '../../components/Integration/JobTable.vue'
 
 export default {
     name: 'PluginIntegrationsAdminVendorsPage',
-    components: { Dialog, IntegrationJobTable },
+    components: { Dialog, IntegrationJobTable, Breadcrumbs },
     layout: 'authenticated',
     meta: {
         privilege: {

package/pages/course/externalIntegration/index.vue

@@ -38,7 +38,8 @@
         <v-tabs-items v-model="tab">
             <v-tab-item> <ManageLti1p1></ManageLti1p1> </v-tab-item>
             <v-tab-item>
-                <p class="ma-5">LTI 1.3 Not yet implemented</p>
+                <ManageLti1p3 />
+                <!--                <p class="ma-5">LTI 1.3 Not yet implemented</p>-->
             </v-tab-item>
             <v-tab-item>
                 <p class="ma-5">SCORM 1.2 Not yet implemented</p>
@@ -49,10 +50,10 @@
 
 <script>
 import ManageLti1p1 from '../../../components/ExternalIntegration/Driver/ManageLti1p1.vue'
-
+import ManageLti1p3 from '../../../components/ExternalIntegration/Driver/ManageLti1p3.vue'
 export default {
     name: 'PluginIntegrationsExternalIntegrationIndexPage',
-    components: { ManageLti1p1 },
+    components: { ManageLti1p1, ManageLti1p3 },
     layout: 'authenticated',
     meta: {
         privilege: {