@windward/core 0.0.1

package/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+    root: true,
+    env: {
+        browser: true,
+        node: true,
+    },
+    extends: ['plugin:nuxt/recommended', 'plugin:prettier/recommended'],
+    plugins: [],
+    // add your custom rules here
+    rules: {},
+}

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

package/README.md

@@ -0,0 +1,86 @@
+# Windward UI Plugin Library
+
+Windward UI plugin library implements content components add amplify windward's ability to simplify editor's workflow
+
+## Getting Started Locally with npm
+
+**Software Requirements**:
+
+-   Node v16+, npm v8+
+
+Clone the windward-ui-plugin-core repository
+
+```
+$ cd windward-ui-plugin-core
+$ npm install
+$ npm link
+```
+
+Clone the windward-ui repository and follow README to setup
+
+Link to Windward ui repo
+
+```
+$ cd windward-ui
+$ npm install
+$ cd node_modules
+$ npm link @mindedge/windward-ui-plugin-core
+$ npm run dev
+```
+
+Your Repos are linked at this point and you are ready to start developing windward plugins
+
+## Code Styles
+
+### `import x from 'path'`
+
+1. For files in **this repository** use `./` or `../`
+
+    eg:
+
+    ```
+    import UserFileAsset from './models/UserFileAsset'
+    ```
+
+2. For files in **the windward-core repository** use `~/`
+
+    eg:
+
+    ```
+    import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
+    import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+    ```
+
+3. When **unit testing only** and for files in **this repository** use `./` or `../` or `@/`
+
+    For ease of use the `@/` alias is available to navigate to the root of this project.
+    The `@/` alias is synonymous to the `~/` however it's bound to THIS repository instead of the windward-core repository.
+
+    eg:
+
+    ```
+    import UserUpload from '@/components/Content/Blocks/UserUpload.vue'
+    ```
+4. To add a page use the below format in your `pages: []` in `plugin.js`
+    ```javascript
+    {
+        // The name to be used by the vue router. This must be unique
+        name: 'PluginUserUploadPage',
+        // The vue router path. Use :course to allow the page to be accessed while in a course
+        path: '/course/:course/user-uploads',
+        // The template to use for the page
+        template: UserUploadPage,
+    }
+    ```
+
+## Code of Conduct
+
+In order to ensure that the Windward community is welcoming to all we follow the same code of conduct as [Laravel](https://laravel.com/docs/contributions#code-of-conduct).
+
+## Security Vulnerabilities
+
+If you discover a security vulnerability within Windward, please create a ticket on this repository and tag it as "security"
+
+## License
+
+Windward LMS is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).

package/babel.config.js

@@ -0,0 +1 @@
+module.exports = {presets: ['@babel/preset-env']}

package/components/Content/Blocks/Accordion.vue

@@ -0,0 +1,133 @@
+<template>
+    <div>
+        <v-expansion-panels
+            flat
+            accordion
+            focusable
+            id="expansion-panel-setting"
+        >
+            <v-expansion-panel
+                v-for="(item, itemIndex) in block.metadata.config.items"
+                :key="itemIndex"
+            >
+                <v-expansion-panel-header class="header" color="primary">
+                    {{
+                        item.header === '' || item.header === null
+                            ? 'Item ' + (itemIndex + 1)
+                            : item.header
+                    }}
+                </v-expansion-panel-header>
+                <v-expansion-panel-content
+                    class="body"
+                    :key="expansionPanelKey"
+                >
+                    <v-container>
+                        <TextViewer
+                            v-if="!item.expand"
+                            v-model="item.content"
+                            text-viewer
+                        ></TextViewer>
+                        <TextEditor
+                            v-if="!render && item.expand"
+                            v-model="
+                                block.metadata.config.items[itemIndex].content
+                            "
+                        ></TextEditor>
+                    </v-container>
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+        </v-expansion-panels>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import Crypto from '~/helpers/Crypto'
+import TextEditor from '~/components/Text/TextEditor.vue'
+import TextViewer from '~/components/Text/TextViewer.vue'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+
+export default {
+    name: 'ContentBlockAccordion',
+    components: {
+        TextEditor,
+        TextViewer,
+    },
+    extends: BaseContentBlock,
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            const defaultObject = {
+                header: '',
+                expand: false,
+                content: '',
+            }
+            this.block.metadata.config.items = []
+            this.block.metadata.config.items.push(defaultObject)
+        }
+        this.block.body = 'accordion'
+    },
+    data() {
+        return {
+            expansionPanelKey: '0',
+            editingInContentItem: false,
+        }
+    },
+    watch: {
+        value(newValue) {
+            const length = newValue.metadata.config.items.length
+            let counter = 0
+            newValue.metadata.config.items.forEach((element) => {
+                if (
+                    element.expand === true &&
+                    this.editingInContentItem !== true
+                ) {
+                    this.editingInContentItem = true
+                    this.expansionPanelKey = Crypto.id()
+                }
+                if (element.expand === false) {
+                    counter = counter + 1
+                }
+                if (counter === length) {
+                    this.editingInContentItem = false
+                }
+            })
+        },
+        render() {
+            if (this.render === true) {
+                this.block.metadata.config.items.forEach((element) => {
+                    element.expand = false
+                })
+            }
+        },
+    },
+    methods: {
+        async onBeforeSave() {
+            this.block.metadata.config.items.forEach((element) => {
+                element.expand = false
+            })
+        },
+    },
+}
+</script>
+
+<style scoped>
+.header {
+    color: white;
+    margin-top: 1px;
+}
+.body {
+    background: #f6f9f9;
+}
+#expansion-panel-setting {
+    z-index: 0;
+}
+</style>

package/components/Content/Blocks/ClickableIcons.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <v-container>
+            <v-row no-gutters>
+                <h2>{{ block.metadata.config.title }}</h2>
+            </v-row>
+            <v-row no-gutters>
+                <h3>{{ block.metadata.config.description }}</h3>
+            </v-row>
+            <v-row no-gutters>
+                <p>
+                    {{
+                        $t(
+                            'windward.core.components.settings.clickable_icon.information'
+                        )
+                    }}
+                </p>
+            </v-row>
+        </v-container>
+        <v-container>
+            <v-row
+                v-for="(item, itemIndex) in block.metadata.config.items"
+                :key="itemIndex"
+                no-gutters
+            >
+                <v-col cols="2">
+                    <v-btn
+                        class="pt-8 pb-8 outlined-button mb-4"
+                        :color="itemColor(item.color)"
+                        x-large
+                        outlined
+                        @click="item.active = !item.active"
+                    >
+                        <v-icon>{{ item.icon }}</v-icon>
+                    </v-btn>
+                </v-col>
+                <v-col cols="10" v-if="item.active">
+                    <h4>{{ item.title }}</h4>
+                    <TextViewer v-model="item.body"></TextViewer>
+                </v-col>
+            </v-row>
+        </v-container>
+    </div>
+</template>
+<script>
+import _ from 'lodash'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import TextViewer from '~/components/Text/TextViewer'
+
+export default {
+    name: 'ClickableIcons',
+    components: {
+        TextViewer,
+    },
+    extends: BaseContentBlock,
+    computed: {
+        itemColor() {
+            return (v) => {
+                if (_.isObject(v)) {
+                    return _.get(v, 'class', '')
+                } else {
+                    return v
+                }
+            }
+        },
+    },
+    beforeMount() {
+        // Apply the default config
+        this.block.body = 'clickable icons'
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            this.block.metadata.config.items = []
+        }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.description)) {
+            this.block.metadata.config.description = ''
+        }
+        if (this.block.metadata.config.items) {
+            this.block.metadata.config.items.forEach((element) => {
+                element.active = false
+            })
+        }
+    },
+    data() {
+        return {
+            api_key: process.env.TINY_MCE_API_KEY,
+            title: 'Title',
+            displayText: false,
+        }
+    },
+}
+</script>
+<style scoped>
+.outlined-button {
+    border-width: 4px;
+}
+</style>

package/components/Content/Blocks/Feedback.vue

@@ -0,0 +1,323 @@
+<template>
+    <v-container>
+        <v-container v-if="!doesFeedbackExist">
+            <v-row>
+                <h2>
+                    {{
+                        block.metadata.config.definition.name
+                            ? block.metadata.config.definition.name
+                            : $t(
+                                  'plugin.core.components.content.blocks.feedback.feedback'
+                              )
+                    }}
+                </h2>
+            </v-row>
+            <v-row class="pt-2">
+                <p>
+                    {{
+                        $t(
+                            'plugin.core.components.content.blocks.feedback.description'
+                        )
+                    }}
+                </p>
+            </v-row>
+        </v-container>
+        <v-container v-if="doesFeedbackExist">
+            <v-row>
+                <h2>
+                    {{ block.metadata.config.definition.name }}
+                </h2>
+            </v-row>
+            <v-row class="pt-2">
+                <p>
+                    {{
+                        $t(
+                            'plugin.core.components.content.blocks.feedback.sent_feedback'
+                        )
+                    }}
+                </p>
+            </v-row>
+        </v-container>
+        <v-divider class="mt-4 mb-6"></v-divider>
+        <v-form
+            ref="form"
+            v-model="valid"
+            lazy-validation
+            v-if="!doesFeedbackExist"
+        >
+            <div v-if="block.metadata.config.definition.metadata">
+                <v-container
+                    v-for="(question, questionIndex) in chosenPreset"
+                    :key="questionIndex"
+                    fluid
+                >
+                    <v-container
+                        v-if="question.type === 'likert'"
+                        class="pa-0 ma-0"
+                    >
+                        <FeedbackQuestionLikert
+                            v-model="chosenPreset[questionIndex]"
+                        ></FeedbackQuestionLikert>
+                    </v-container>
+                    <v-container
+                        v-if="question.type === 'true_false'"
+                        class="pa-0 ma-0"
+                    >
+                        <FeedbackQuestionTrueFalse
+                            v-model="chosenPreset[questionIndex]"
+                        ></FeedbackQuestionTrueFalse>
+                    </v-container>
+                    <v-container
+                        v-if="question.type === 'open_response'"
+                        class="pa-0 ma-0"
+                    >
+                        <FeedbackQuestionOpenResponse
+                            v-model="chosenPreset[questionIndex]"
+                        ></FeedbackQuestionOpenResponse>
+                    </v-container>
+                </v-container>
+            </div>
+        </v-form>
+        <v-row
+            class="d-flex justify-end align-center"
+            v-if="render && !doesFeedbackExist"
+        >
+            <v-btn
+                color="error"
+                class="text-center mt-4 mr-2"
+                @click="onReset()"
+                >{{
+                    $t('plugin.core.components.content.blocks.feedback.reset')
+                }}</v-btn
+            >
+            <v-btn color="success" class="text-center mt-4" @click="validate">{{
+                $t('plugin.core.components.content.blocks.feedback.save')
+            }}</v-btn>
+        </v-row>
+        <v-form
+            ref="form"
+            v-model="valid"
+            disabled
+            lazy-validation
+            v-if="doesFeedbackExist"
+        >
+            <v-container
+                v-for="(
+                    question, questionIndex
+                ) in existingFeedback.survey_question_answers"
+                :key="questionIndex"
+                fluid
+            >
+                <div v-if="question.type === 'likert'">
+                    <FeedbackQuestionLikert
+                        v-model="
+                            existingFeedback.survey_question_answers[
+                                questionIndex
+                            ]
+                        "
+                    ></FeedbackQuestionLikert>
+                </div>
+                <div v-if="question.type === 'true_false'">
+                    <FeedbackQuestionTrueFalse
+                        v-model="
+                            existingFeedback.survey_question_answers[
+                                questionIndex
+                            ]
+                        "
+                    ></FeedbackQuestionTrueFalse>
+                </div>
+                <div v-if="question.type === 'open_response'">
+                    <FeedbackQuestionOpenResponse
+                        v-model="
+                            existingFeedback.survey_question_answers[
+                                questionIndex
+                            ]
+                        "
+                        :feedbackExist="true"
+                    ></FeedbackQuestionOpenResponse>
+                </div>
+            </v-container>
+        </v-form>
+    </v-container>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import FeedbackQuestionLikert from './FeedbackTemplates/FeedbackQuestionLikert.vue'
+import FeedbackQuestionOpenResponse from './FeedbackTemplates/FeedbackQuestionOpenResponse.vue'
+import FeedbackQuestionTrueFalse from './FeedbackTemplates/FeedbackQuestionTrueFalse.vue'
+import Uuid from '~/helpers/Uuid'
+
+import SurveyResult from '../../../models/SurveyResult'
+import Enrollment from '~/models/Enrollment'
+import ContentBlock from '~/models/ContentBlock'
+import Crypto from '~/helpers/Crypto'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+
+export default {
+    name: 'Feedback',
+    components: {
+        FeedbackQuestionLikert,
+        FeedbackQuestionOpenResponse,
+        FeedbackQuestionTrueFalse,
+    },
+    extends: BaseContentBlock,
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.definition)) {
+            this.block.metadata.config.definition = {}
+        }
+        this.block.body = 'feedback'
+    },
+    data() {
+        return {
+            saveState: false,
+            courseUserId: '',
+            valid: true,
+            key: '0',
+            existingFeedback: '',
+            doesFeedbackExist: false,
+            templates: '',
+            chosenPreset: '',
+            studentResponse: '',
+            noResponse: this.$t(
+                'plugin.core.components.content.blocks.feedback.no_response_entered'
+            ),
+        }
+    },
+    computed: {
+        ...mapGetters({
+            enrollment: 'enrollment/get',
+            course: 'course/get',
+        }),
+        blockExists() {
+            return Uuid.test(this.block.id)
+        },
+    },
+    watch: {
+        value(newValue) {
+            if (
+                newValue.metadata.config.definition &&
+                newValue.metadata.config.definition.metadata &&
+                newValue.metadata.config.definition.metadata.definition &&
+                !this.render
+            ) {
+                this.setUpBlock()
+            }
+        },
+    },
+    mounted() {
+        if (this.blockExists) {
+            this.courseUserId = this.enrollment.id
+            this.onCheckForFeedback()
+            if (_.isEmpty(this.chosenPreset)) {
+                this.setUpBlock()
+            }
+        }
+    },
+    methods: {
+        setUpBlock() {
+            if (this.block.metadata.config.definition.metadata) {
+                this.block.metadata.config.definition.metadata.definition.forEach(
+                    (element) => {
+                        element.response = ''
+                    }
+                )
+                this.chosenPreset =
+                    this.block.metadata.config.definition.metadata.definition
+            }
+        },
+        async onCheckForFeedback() {
+            if (this.enrollment && this.block.id) {
+                this.existingFeedback = await new SurveyResult()
+                    .for(
+                        new Enrollment({ id: this.enrollment.id }),
+                        new ContentBlock({ id: this.block.id })
+                    )
+                    .first()
+            }
+            if (!_.isEmpty(this.existingFeedback)) {
+                this.handleExistingFeedback()
+            } else {
+                this.onReset()
+            }
+        },
+        handleExistingFeedback() {
+            this.existingFeedback.survey_question_answers = JSON.parse(
+                this.existingFeedback.survey_question_answers
+            )
+            this.existingFeedback.survey_snapshot = JSON.parse(
+                this.existingFeedback.survey_snapshot
+            )
+            this.doesFeedbackExist = true
+        },
+        async onSaveFeedback() {
+            let version =
+                this.block.metadata.config.definition.id +
+                this.block.metadata.config.definition.updated_at
+            const feedbackData = {
+                survey_snapshot:
+                    this.block.metadata.config.definition.metadata.definition,
+                survey_question_answers: this.chosenPreset,
+                version: version,
+            }
+            let feedback = new SurveyResult(feedbackData).for(
+                new Enrollment({ id: this.enrollment.id }),
+                new ContentBlock({ id: this.block.id })
+            )
+            try {
+                feedback = await feedback.save()
+                this.$toast.success(this.$t('shared.forms.saved'))
+                this.onCheckForFeedback()
+            } catch (e) {
+                this.$toast.error(this.$t('shared.forms.errors.unknown'))
+            }
+        },
+        async validate() {
+            const valid = await this.$refs.form.validate()
+            if (valid) {
+                this.onSaveFeedback()
+            } else {
+                this.$toast.error(
+                    this.$t(
+                        'plugin.core.components.content.blocks.feedback.fill_out'
+                    )
+                )
+            }
+        },
+        onReset() {
+            this.existingFeedback = null
+            if (this.chosenPreset) {
+                this.chosenPreset.forEach((element) => {
+                    element.response = ''
+                })
+            }
+            this.doesFeedbackExist = false
+            this.key = Crypto.id()
+        },
+    },
+}
+</script>
+<style scoped>
+.question {
+    font-weight: bold;
+}
+.radio-group {
+    width: 100% !important;
+}
+.likert-radio {
+    margin-left: 55px;
+}
+</style>