@windward/integrations 0.0.5 → 0.0.7

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

@@ -1,13 +1,209 @@
 <template>
-    <div>LTI 1.1 Consumers Not Implemented yet</div>
+    <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 }"
+                ><ManageConsumer v-bind="attrs" v-on="on"></ManageConsumer
+            ></template>
+        </Dialog>
+
+        <v-data-table
+            :headers="headers"
+            :items="consumers"
+            :items-per-page="10"
+            class="elevation-1"
+        >
+            <template #[`item.description`]="{ item }">
+                {{ item.description.replace(/(<([^>]+)>)/gi, '').trim() }}
+            </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(
+                        'windward.integrations.components.external_integration.driver.lti1p1.enabled'
+                    )
+                }}</span>
+            </template>
+
+            <template #[`item.created_at`]="{ item }">
+                {{ $d(new Date(item.created_at), 'long') }}
+            </template>
+            <template #[`item.actions`]="{ index, item }">
+                <Dialog color="primary" action-save @click:save="onSaved">
+                    <template #title>{{
+                        $t(
+                            'windward.integrations.components.external_integration.driver.lti1p1.edit'
+                        )
+                    }}</template>
+                    <template #trigger>
+                        <v-icon small>mdi-pencil</v-icon>
+                        <span class="sr-only">{{
+                            $t(
+                                'windward.integrations.components.external_integration.driver.lti1p1.edit'
+                            )
+                        }}</span>
+                    </template>
+                    <template #form="{ on, attrs }"
+                        ><ManageConsumer
+                            v-model="consumers[index]"
+                            v-bind="attrs"
+                            v-on="on"
+                        ></ManageConsumer
+                    ></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 Course from '~/models/Course'
+import Organization from '~/models/Organization'
+import Dialog from '~/components/Dialog.vue'
+import Lti1p1Consumer from '../../../../models/ExternalIntegration/Lti1p1Consumer'
+import ManageConsumer from './ManageConsumer.vue'
+
 export default {
     name: 'ManageLti1p1ConsumersDriver',
+    components: { Dialog, ManageConsumer },
     data() {
-        return {}
+        return {
+            consumers: [],
+            headers: [
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.target_url'
+                    ),
+                    value: 'target',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.name'
+                    ),
+                    value: 'name',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.description'
+                    ),
+                    value: 'description',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.lti1p1.enabled'
+                    ),
+                    value: 'enabled',
+                },
+                { 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.loadConsumers()
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    methods: {
+        onSaved() {
+            this.loadConsumers()
+        },
+        async loadConsumers() {
+            this.consumers = await new Lti1p1Consumer()
+                .for(
+                    new Organization({ id: this.organization.id }),
+                    new Course({ id: this.course.id })
+                )
+                .get()
+        },
+        onConfirmDelete(consumer) {
+            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.deleteConsumer(consumer)
+                            toastObject.goAway(0)
+                        },
+                    },
+                ],
+            })
+        },
+        deleteConsumer(consumer) {
+            consumer.delete()
+        },
     },
-    methods: {},
 }
 </script>

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

@@ -4,11 +4,18 @@
             <v-progress-circular size="128" indeterminate />
         </div>
         <div v-if="render">
-            <v-form v-model="formValid" @submit.prevent>
-                <v-row justify="center" align="center" class="mt-5">
+            <v-form ref="form" v-model="formValid" @submit.prevent>
+                <v-row justify="center" align="center">
                     <v-col cols="12">
+                        <ProviderTargetPicker
+                            :target.sync="provider.target"
+                            :metadata.sync="provider.metadata"
+                        ></ProviderTargetPicker>
+
                         <v-text-field
+                            id="target-url"
                             v-model="provider.target"
+                            disabled
                             :label="
                                 $t(
                                     'windward.integrations.components.external_integration.driver.lti1p1.target_url'
@@ -19,6 +26,7 @@
                                     'windward.integrations.components.external_integration.driver.lti1p1.target_url'
                                 )
                             "
+                            :rules="validation.existsRules"
                         ></v-text-field>
 
                         <v-switch
@@ -31,6 +39,7 @@
                         />
 
                         <v-text-field
+                            id="lti-key"
                             v-model="provider.metadata.key"
                             :placeholder="
                                 $t(
@@ -50,6 +59,7 @@
                         ></v-text-field>
 
                         <v-text-field
+                            id="lti-secret"
                             v-model="provider.metadata.secret"
                             :placeholder="
                                 $t(
@@ -240,15 +250,16 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import Lti1p1Provider from '../../../../models/ExternalIntegration/Lti1p1Provider'
-import FormVue from '~/components/Form'
+import FormVue from '~/components/Form.vue'
 import Role from '~/models/Role'
 import Organization from '~/models/Organization'
 import Course from '~/models/Course'
+import ProviderTargetPicker from '../../ProviderTargetPicker.vue'
+import Lti1p1Provider from '../../../../models/ExternalIntegration/Lti1p1Provider'
 
 export default {
     name: 'ManageLti1p1ProviderDriver',
-    components: {},
+    components: { ProviderTargetPicker },
     extends: FormVue,
     props: {
         value: {
@@ -293,6 +304,7 @@ export default {
         ...mapGetters({
             organization: 'organization/get',
             course: 'course/get',
+            contentTree: 'content/getTree',
         }),
     },
     created() {
@@ -317,11 +329,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 provider!')
 
             // Return so we don't even attempt loading
@@ -358,13 +371,30 @@ export default {
 
                 this.$dialog.success(this.$t('shared.forms.saved'))
                 this.$emit('update:provider', providerEvent)
+                this.$emit('input', provider)
             } catch (e) {
                 this.$dialog.error(
                     this.$t('windward.integrations.shared.error.save_failed')
                 )
             }
+
+            // Create a new provider to clear the form if the original value is empty aka new
+            if (_.isEmpty(this.value)) {
+                this.provider = new Lti1p1Provider({
+                    role_metadata: {},
+                    metadata: {},
+                })
+            }
         },
         async onSave() {
+            this.$refs.form.validate()
+            if (this.formValid) {
+                await this.save()
+            }
+        },
+
+        async onSaveAndNew() {
+            this.$refs.form.validate()
             if (this.formValid) {
                 await this.save()
             }

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

@@ -23,17 +23,23 @@
             :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>
@@ -44,8 +50,8 @@
                 }}</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), 'shorttime') }}
             </template>
             <template #[`item.actions`]="{ index, item }">
                 <Dialog color="primary" action-save @click:save="onSaved">
@@ -83,23 +89,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.driver.lti1p1.target'
                     ),
                     value: 'target',
                 },
@@ -151,16 +158,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 +188,7 @@ export default {
         }),
     },
     methods: {
-        onSaved(e) {
+        onSaved() {
             this.loadProviders()
         },
         async loadProviders() {
@@ -197,14 +206,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 +221,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

@@ -10,7 +10,7 @@
                     }}
                 </v-expansion-panel-header>
                 <v-expansion-panel-content>
-                    <ListProviders></ListProviders>
+                    <ManageProviders></ManageProviders>
                 </v-expansion-panel-content>
             </v-expansion-panel>
             <v-expansion-panel>
@@ -22,7 +22,7 @@
                     }}
                 </v-expansion-panel-header>
                 <v-expansion-panel-content>
-                    <ListConsumers></ListConsumers>
+                    <ManageConsumers></ManageConsumers>
                 </v-expansion-panel-content>
             </v-expansion-panel>
         </v-expansion-panels>
@@ -30,12 +30,12 @@
 </template>
 
 <script>
-import ListProviders from './Lti1p1/ManageProviders.vue'
-import ListConsumers from './Lti1p1/ManageConsumers.vue'
+import ManageProviders from './Lti1p1/ManageProviders.vue'
+import ManageConsumers from './Lti1p1/ManageConsumers.vue'
 
 export default {
     name: 'ManageLti1p1Driver',
-    components: { ListProviders, ListConsumers },
+    components: { ManageProviders, ManageConsumers },
     data() {
         return {
             panel: 0,