@windward/integrations 0.18.0 → 0.19.0

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

@@ -0,0 +1,299 @@
+<template>
+    <div>
+        <DialogBox
+            color="primary"
+            action-save
+            action-save-new
+            @click:save="onSaved"
+            @click:save-new="onSaved"
+        >
+            <template #title>{{
+                $t(
+                    'windward.integrations.components.external_integration.driver.scorm.new'
+                )
+            }}</template>
+            <template #trigger>{{ $t('shared.forms.new') }}</template>
+            <template #form="{ on, attrs }"
+                ><ManageProvider v-bind="attrs" v-on="on"></ManageProvider
+            ></template>
+        </DialogBox>
+
+        <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.download_package`]="{ item }">
+                <v-btn
+                    color="primary"
+                    :loading="isDownloading"
+                    @click="onClickDownload(item)"
+                    >{{
+                        $t(
+                            'windward.integrations.components.external_integration.driver.scorm.download_package'
+                        )
+                    }}</v-btn
+                >
+            </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.created_at`]="{ item }">
+                {{ $d(new Date(item.created_at), 'short') }}
+            </template>
+            <template #[`item.actions`]="{ index, item }">
+                <SpeedDial
+                    direction="left"
+                    color="primary"
+                    transition="slide-x-reverse-transition"
+                >
+                    <v-btn
+                        color="error"
+                        outlined
+                        elevation="0"
+                        class="outlined"
+                        @click="onConfirmDelete(item)"
+                    >
+                        {{ $t('shared.forms.delete') }}
+                        <span class="sr-only">{{
+                            $t('shared.forms.delete')
+                        }}</span>
+                    </v-btn>
+                    <DialogBox
+                        color="primary"
+                        outlined
+                        :class-prop="'outlined'"
+                        action-save
+                        @click:save="onSaved"
+                    >
+                        <template #title>{{
+                            $t(
+                                'windward.integrations.components.external_integration.driver.scorm.edit'
+                            )
+                        }}</template>
+                        <template #trigger>
+                            {{
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.scorm.edit_display'
+                                )
+                            }}
+                            <span class="sr-only">{{
+                                $t(
+                                    'windward.integrations.components.external_integration.driver.scorm.edit'
+                                )
+                            }}</span>
+                        </template>
+                        <template #form="{ on, attrs }"
+                            ><ManageProvider
+                                v-model="providers[index]"
+                                v-bind="attrs"
+                                v-on="on"
+                            ></ManageProvider
+                        ></template>
+                    </DialogBox>
+                </SpeedDial>
+            </template>
+        </v-data-table>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import Provider from '../../../../models/ExternalIntegration/Provider'
+import SecretField from '../../../SecretField.vue'
+import ProviderTargetViewer from '../../ProviderTargetViewer.vue'
+import ManageProvider from './ManageProvider.vue'
+import DialogBox from '~/components/Core/DialogBox.vue'
+import Organization from '~/models/Organization'
+import Course from '~/models/Course'
+import SpeedDial from '~/components/Core/SpeedDial.vue'
+
+export default {
+    name: 'ManageScormProvidersDriver',
+    components: {
+        SecretField,
+        DialogBox,
+        ManageProvider,
+        ProviderTargetViewer,
+        SpeedDial,
+    },
+    data() {
+        return {
+            providers: [],
+            headers: [
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.target'
+                    ),
+                    value: 'target',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.version'
+                    ),
+                    value: 'version',
+                },
+                {
+                    text: this.$t(
+                        'windward.integrations.components.external_integration.driver.scorm.download_package'
+                    ),
+                    value: 'download_package',
+                },
+                {
+                    text: this.$t('shared.forms.enabled'),
+                    value: 'enabled',
+                },
+                { text: this.$t('shared.forms.created'), value: 'created_at' },
+                {
+                    text: this.$t('shared.forms.actions'),
+                    value: 'actions',
+                    sortable: false,
+                },
+            ],
+            isDownloading: 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 Provider()
+                .for(
+                    new Organization({ id: this.organization.id }),
+                    new Course({ id: this.course.id })
+                )
+                .where('type', 'scorm')
+                .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()
+        },
+        async onClickDownload(provider) {
+            this.isDownloading = true
+
+            try {
+                const result = await Provider.config({
+                    method: 'GET',
+                })
+                    .custom(
+                        new Organization(this.organization),
+                        new Course(this.course),
+                        new Provider(provider),
+                        'download'
+                    )
+                    .file()
+
+                let filename = `${this.organization.name}_${this.course.name}_${provider.type}_${provider.version}_provider_${provider.id}`
+                // Replace all non letter/numbers with _
+                filename = filename.replaceAll(/[^a-zA-Z0-9\_\-]/gi, '_')
+                // Replace all double+ underscores with single
+                filename = filename.replaceAll(/_+/gi, '_')
+                filename += '.zip'
+
+                const url = URL.createObjectURL(result)
+                const link = document.createElement('a')
+                link.href = url
+                link.download = filename
+                link.click()
+                URL.revokeObjectURL(url)
+            } catch (e) {
+                console.error('Error getting download', e)
+            }
+
+            this.isDownloading = false
+        },
+    },
+}
+</script>
+
+<style scoped>
+.field--target {
+    max-width: 15em;
+    display: inline-block;
+}
+</style>

package/components/LLM/GenerateContent/BlockQuestionGenerateButton.vue

@@ -105,7 +105,8 @@ export default {
                 this.value.tag === 'plugin-games-bucket' ||
                 this.value.tag === 'plugin-games-wordjumble-game' ||
                 this.value.tag === 'plugin-games-multiple-choice' ||
-                this.value.tag === 'plugin-games-seven-strikes-game',
+                this.value.tag === 'plugin-games-seven-strikes-game' ||
+                this.value.tag === 'plugin-games-crossword-puzzle-game',
         }
     },
     computed: {
@@ -119,7 +120,8 @@ export default {
                 this.isSortingGameType ||
                 this.isWordJumbleType ||
                 this.isMultipleChoiceType ||
-                this.isSevenStrikesType
+                this.isSevenStrikesType ||
+                this.isCrosswordType
             )
         },
         isFlashcardType() {
@@ -148,6 +150,9 @@ export default {
         isMultipleChoiceType() {
             return this.value.tag === 'plugin-games-multiple-choice'
         },
+        isCrosswordType() {
+            return this.value.tag === 'plugin-games-crossword-puzzle-game'
+        },
         replaceExistingLabel() {
             if (this.isBucketGameType) {
                 return this.$t(
@@ -174,6 +179,11 @@ export default {
                     'windward.integrations.components.llm.generate_content.generate_questions.replace_existing_multiple_choice'
                 )
             }
+            if (this.isCrosswordType) {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.replace_existing_crossword'
+                )
+            }
             if (this.isFlashcardType) {
                 return this.$t(
                     'windward.integrations.components.llm.generate_content.generate_questions.replace_existing_flashcard'
@@ -190,11 +200,17 @@ export default {
                 (!this.isFlashcardType &&
                     !this.isBucketGameType &&
                     !this.isMatchingGameType &&
-                    !this.isSevenStrikesType)
+                    !this.isSevenStrikesType &&
+                    !this.isWordJumbleType &&
+                    !this.isCrosswordType &&
+                    !this.isMultipleChoiceType)
 
             return supportsAdvancedTaxonomy
         },
         taxonomyLevels() {
+            if (this.isCrosswordType) {
+                return ['None', 'Remember', 'Understand', 'Apply']
+            }
             // For word jumble games, only show None, Remember, Understand, Apply
             if (this.isWordJumbleType) {
                 return ['None', 'Remember', 'Understand', 'Apply']
@@ -254,6 +270,10 @@ export default {
                 return this.$t(
                     'windward.integrations.components.llm.generate_content.generate_questions.button_label_multiple_choice'
                 )
+            } else if (this.value.tag === 'plugin-games-crossword-puzzle-game') {
+                return this.$t(
+                    'windward.integrations.components.llm.generate_content.generate_questions.button_label_crossword'
+                )
             } else {
                 return this.$t(
                     'windward.integrations.components.llm.generate_content.generate_questions.button_label'
@@ -422,6 +442,17 @@ export default {
                         this.$t(
                             `${basePath}.content_mismatch_word_jumble_support`
                         )
+                } else if (
+                    (errorMessage === 'activity.error.content_mismatch' ||
+                        errorType === 'content_mismatch') &&
+                    this.isCrosswordType
+                ) {
+                    errorText =
+                        this.$t(`${basePath}.content_mismatch_crossword`) +
+                        '\n\n' +
+                        this.$t(
+                            `${basePath}.content_mismatch_crossword_support`
+                        )
                 } else if (
                     errorType === 'insufficient_content' &&
                     error.response?.data?.error?.details

package/components/SecretField.vue

@@ -1,39 +1,66 @@
 <template>
-    <component
-        :is="activeComponent"
-        :id="'secret-field-' + key"
-        :name="'secret-field-' + key"
-        :value="value"
-        :readonly="readonly"
-        :autocomplete="autocomplete"
-        :type="fieldType"
-        :placeholder="placeholder"
-        :label="label"
-        :hint="hint"
-        :append-icon="appendIcon"
-        :rules="rules"
-        :rows="rows"
-        @input="$emit('input', $event)"
-    >
-        <template #append>
-            <v-btn icon elevation="0" @click="toggleClear">
-                <v-icon>{{ showClear ? 'mdi-eye-off' : 'mdi-eye' }}</v-icon>
-            </v-btn>
-            <v-btn v-if="copy" icon elevation="0" @click="copyText(value)">
-                <v-icon>mdi-content-copy</v-icon>
-                <span class="sr-only">{{ $t('shared.forms.copy') }}</span>
-            </v-btn>
-        </template>
-    </component>
+    <div>
+        <v-text-field
+            v-show="activeTag === 'v-text-field'"
+            :id="'secret-field-' + key"
+            :name="'secret-field-' + key"
+            :value="value"
+            :readonly="readonly"
+            :autocomplete="autocomplete"
+            :type="fieldType"
+            :placeholder="placeholder"
+            :label="label"
+            :hint="hint"
+            :append-icon="appendIcon"
+            :rules="rules"
+            :rows="rows"
+            @input="$emit('input', $event)"
+        >
+            <template #append>
+                <v-btn icon elevation="0" @click="toggleClear">
+                    <v-icon>{{ showClear ? 'mdi-eye-off' : 'mdi-eye' }}</v-icon>
+                </v-btn>
+                <v-btn v-if="copy" icon elevation="0" @click="copyText(value)">
+                    <v-icon>mdi-content-copy</v-icon>
+                    <span class="sr-only">{{ $t('shared.forms.copy') }}</span>
+                </v-btn>
+            </template>
+        </v-text-field>
+        <v-textarea
+            v-show="activeTag === 'v-textarea'"
+            :id="'secret-field-' + key"
+            :name="'secret-field-' + key"
+            :value="value"
+            :readonly="readonly"
+            :autocomplete="autocomplete"
+            :type="fieldType"
+            :placeholder="placeholder"
+            :label="label"
+            :hint="hint"
+            :append-icon="appendIcon"
+            :rules="rules"
+            :rows="rows"
+            @input="$emit('input', $event)"
+        >
+            <template #append>
+                <v-btn icon elevation="0" @click="toggleClear">
+                    <v-icon>{{ showClear ? 'mdi-eye-off' : 'mdi-eye' }}</v-icon>
+                </v-btn>
+                <v-btn v-if="copy" icon elevation="0" @click="copyText(value)">
+                    <v-icon>mdi-content-copy</v-icon>
+                    <span class="sr-only">{{ $t('shared.forms.copy') }}</span>
+                </v-btn>
+            </template>
+        </v-textarea>
+    </div>
 </template>
 
 <script>
 import Crypto from '~/helpers/Crypto'
-import { VTextarea, VTextField } from 'vuetify/lib'
 
 export default {
     name: 'SecretField',
-    components: { VTextarea, VTextField },
+    components: {},
     props: {
         tag: { type: String, required: false, default: 'v-text-field' },
         value: { type: String, required: false, default: '' },
@@ -81,7 +108,7 @@ export default {
         }
     },
     computed: {
-        activeComponent() {
+        activeTag() {
             let tag = this.tag
 
             // If the field type is password we need to hard-change to textfield since other components don't support password text
@@ -89,11 +116,7 @@ export default {
                 tag = 'v-text-field'
             }
 
-            if (tag === 'v-textarea') {
-                return VTextarea
-            } else {
-                return VTextField
-            }
+            return tag
         },
         key() {
             return Crypto.id()

package/components/Settings/ExternalIntegration/LtiConsumerSettings.vue

@@ -74,7 +74,7 @@ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettin
 import Course from '~/models/Course'
 import Organization from '~/models/Organization'
 import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
-import LtiConsumer from '../../../models/ExternalIntegration/LtiConsumer'
+import Consumer from '../../../models/ExternalIntegration/Consumer'
 
 export default {
     name: 'ContentBlockExternalIntegrationLti1p1ConsumerSettings',
@@ -138,7 +138,7 @@ export default {
         }
     },
     async fetch() {
-        this.consumers = await new LtiConsumer()
+        this.consumers = await new Consumer()
             .for(
                 new Organization({ id: this.organization.id }),
                 new Course({ id: this.course.id })

package/components/Settings/ExternalIntegration/ManageCourseIntegrationSettings.vue

@@ -19,10 +19,10 @@
                 }}
             </v-tab>
 
-            <v-tab v-if="ltiReady">
+            <v-tab>
                 {{
                     $t(
-                        'windward.integrations.pages.course.external_integration.scorm_1p2'
+                        'windward.integrations.pages.course.external_integration.scorm'
                     )
                 }}
             </v-tab>
@@ -30,13 +30,13 @@
 
         <v-tabs-items v-model="tab">
             <v-tab-item>
-                <ManageLti1p1></ManageLti1p1>
+                <ManageLti1p1 />
             </v-tab-item>
             <v-tab-item>
                 <ManageLti1p3 />
             </v-tab-item>
             <v-tab-item>
-                <p class="ma-5">SCORM 1.2 Not yet implemented</p>
+                <ManageScorm />
             </v-tab-item>
         </v-tabs-items>
     </div>
@@ -45,13 +45,13 @@
 <script>
 import ManageLti1p1 from '../../ExternalIntegration/Driver/ManageLti1p1.vue'
 import ManageLti1p3 from '../../ExternalIntegration/Driver/ManageLti1p3.vue'
+import ManageScorm from '../../ExternalIntegration/Driver/ManageScorm.vue'
 export default {
     name: 'PluginIntegrationsExternalIntegrationManageCourseIntegrationSettings',
-    components: { ManageLti1p1, ManageLti1p3 },
+    components: { ManageLti1p1, ManageLti1p3, ManageScorm },
     data() {
         return {
             tab: 0,
-            ltiReady: false,
         }
     },
 }

package/components/Settings/ExternalIntegration/ScormConsumerSettings.vue

@@ -0,0 +1,42 @@
+<template>
+    <v-container>
+        <BaseContentBlockSettings
+            v-if="false"
+            v-model="block.metadata.config"
+            :disabled="render"
+        ></BaseContentBlockSettings>
+        <v-alert type="warning">Not implemented</v-alert>
+    </v-container>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
+
+export default {
+    name: 'ContentBlockExternalIntegrationScormConsumerSettings',
+    components: {
+        BaseContentBlockSettings,
+    },
+    extends: BaseContentSettings,
+    props: {
+        settings: { type: Object, required: false, default: null },
+        context: { type: String, required: false, default: 'block' },
+    },
+    data() {
+        return {}
+    },
+    async fetch() {},
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+    },
+    watch: {},
+    beforeMount() {},
+    mounted() {},
+    methods: {},
+}
+</script>