@windward/games 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,43 @@
+# Windward UI Plugin Library
+
+Windward game plugin implements components and models required for windward games
+
+## Getting Started Locally with npm
+
+**Software Requirements**:
+
+-   Node v16+, npm v8+
+
+Clone the windward-ui-plugin-games repository
+
+```
+$ cd windward-ui-plugin-games
+$ 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-games
+$ npm run dev
+```
+
+Your Repos are linked at this point and you are ready to start developing windward plugins
+
+## 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/CrudTable.vue

@@ -0,0 +1,295 @@
+<template>
+    <div>
+        <v-data-table
+            :headers="tableHeaders"
+            :items="items"
+            sort-by="calories"
+            class="elevation-1"
+        >
+            <template #top>
+                <v-toolbar flat>
+                    <v-toolbar-title> {{ title }}</v-toolbar-title>
+                    <v-divider class="mx-4" inset vertical></v-divider>
+                    <v-spacer></v-spacer>
+                    <v-btn color="primary" dark class="mb-2" @click="addNew">
+                        {{
+                            $t(
+                                'plugin.games.components.content.crud_table.add_row'
+                            )
+                        }}
+                    </v-btn>
+                    &nbsp;
+                    <v-dialog
+                        v-model="dialog"
+                        max-width="500px"
+                        v-if="useModal"
+                    >
+                        <template #activator="{ on, attrs }">
+                            <v-btn
+                                color="primary"
+                                dark
+                                class="mb-2"
+                                v-bind="attrs"
+                                v-on="on"
+                            >
+                                {{
+                                    $t(
+                                        'plugin.games.components.content.crud_table.new_item'
+                                    )
+                                }}
+                            </v-btn>
+                        </template>
+                        <v-card>
+                            <v-card-title>
+                                <span class="text-h5">{{ formTitle }}</span>
+                            </v-card-title>
+
+                            <v-card-text>
+                                <v-container>
+                                    <v-row>
+                                        <v-col
+                                            v-for="(header, index) in headers"
+                                            :key="index"
+                                            cols="12"
+                                            sm="6"
+                                            md="4"
+                                        >
+                                            <v-text-field
+                                                v-model="
+                                                    editedItem[
+                                                        headers[index].value
+                                                    ]
+                                                "
+                                                :label="headers[index].text"
+                                            ></v-text-field>
+                                        </v-col>
+                                    </v-row>
+                                </v-container>
+                            </v-card-text>
+
+                            <v-card-actions>
+                                <v-spacer></v-spacer>
+                                <v-btn
+                                    color="blue darken-1"
+                                    text
+                                    @click="close"
+                                >
+                                    {{ $t('shared.forms.cancel') }}
+                                </v-btn>
+                                <v-btn color="blue darken-1" text @click="save">
+                                    {{ $t('shared.forms.save') }}
+                                </v-btn>
+                            </v-card-actions>
+                        </v-card>
+                    </v-dialog>
+                    <v-dialog v-model="dialogDelete" max-width="500px">
+                        <v-card>
+                            <v-card-title class="text-h5">
+                                {{ $t('shared.forms.confirm_delete_text') }}
+                            </v-card-title>
+                            <v-card-actions>
+                                <v-spacer></v-spacer>
+                                <v-btn
+                                    color="blue darken-1"
+                                    text
+                                    @click="closeDelete"
+                                    >{{ $t('shared.forms.cancel') }}
+                                </v-btn>
+                                <v-btn
+                                    color="blue darken-1"
+                                    text
+                                    @click="deleteItemConfirm"
+                                    >{{ $t('shared.forms.confirm') }}
+                                </v-btn>
+                                <v-spacer></v-spacer>
+                            </v-card-actions>
+                        </v-card>
+                    </v-dialog>
+                </v-toolbar>
+            </template>
+
+            <template #body="props">
+                <draggable
+                    v-model="items"
+                    tag="tbody"
+                    :disabled="!allowDrag"
+                    :move="onMoveCallback"
+                    :clone="onCloneCallback"
+                    @end="onDropCallback"
+                >
+                    <DataTableRowHandler
+                        v-model="editedItem"
+                        v-for="(item, index) in props.items"
+                        :editedItemId="editedItem.id"
+                        :headers="tableHeaders"
+                        :key="index"
+                        :item="item"
+                        @input="onDropCallback"
+                    >
+                        <template #item.actions="{ item }">
+                            <v-btn outlined v-if="useModal">
+                                <span class="sr-only">
+                                    {{ $t('shared.forms.edit') }}</span
+                                >
+                                <v-icon
+                                    small
+                                    class="mr-2"
+                                    @click="editItem(item)"
+                                >
+                                    mdi-pencil
+                                </v-icon>
+                            </v-btn>
+                            <v-btn outlined>
+                                <span class="sr-only">
+                                    {{ $t('shared.forms.delete') }}</span
+                                >
+                                <v-icon small @click="deleteItem(item)">
+                                    mdi-delete
+                                </v-icon>
+                            </v-btn>
+                        </template>
+                        <template #no-data>
+                            <div>{{ $t('shared.forms.no_data') }}</div>
+                        </template>
+                    </DataTableRowHandler>
+                </draggable>
+            </template>
+        </v-data-table>
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import DataTableRowHandler from './DataTableRowHandler'
+import _ from 'lodash'
+export default {
+    components: { DataTableRowHandler, draggable },
+    props: {
+        title: { type: String, required: false, default: 'CRUD' },
+        headers: { type: Array, required: true, default: [] },
+        defaultItem: { type: Object, required: true, default: {} },
+        allowDrag: { type: Boolean, required: false, default: false },
+        useModal: { type: Boolean, required: false, default: false },
+        data: { type: Array, required: true, default: [] },
+        maxItems: { type: Number, required: false, default: null },
+    },
+    data: () => ({
+        dialog: false,
+        dialogDelete: false,
+        items: [],
+        editedIndex: -1,
+        editedItem: {},
+    }),
+
+    computed: {
+        formTitle() {
+            return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
+        },
+        tableHeaders() {
+            let new_headers = JSON.parse(JSON.stringify(this.headers))
+            new_headers.push({
+                text: 'Actions',
+                value: 'actions',
+                sortable: false,
+            })
+            return new_headers
+        },
+    },
+
+    watch: {
+        dialog(val) {
+            val || this.close()
+        },
+        dialogDelete(val) {
+            val || this.closeDelete()
+        },
+    },
+    mounted() {
+        this.items = _.cloneDeep(this.data)
+        this.editedItem = _.cloneDeep(this.defaultItem)
+    },
+    created() {},
+
+    methods: {
+        editItem(item) {
+            this.editedIndex = this.items.indexOf(item)
+            this.editedItem = Object.assign({}, item)
+            this.dialog = true
+        },
+
+        deleteItem(item) {
+            this.editedIndex = this.items.indexOf(item)
+            this.editedItem = Object.assign({}, item)
+            this.dialogDelete = true
+        },
+
+        deleteItemConfirm() {
+            this.items.splice(this.editedIndex, 1)
+            this.data.splice(this.editedIndex, 1)
+            this.closeDelete()
+        },
+        addNew() {
+            if (this.maxItems && this.maxItems > this.items.length) {
+                const addObj = _.cloneDeep(this.defaultItem)
+                addObj.id = this.items.length + 1
+                this.items.push(addObj)
+                this.$emit('input', this.items)
+            }
+
+            if (this.maxItems === null) {
+                const addObj = _.cloneDeep(this.defaultItem)
+                addObj.id = this.items.length + 1
+                this.items.push(addObj)
+                this.$emit('input', this.items)
+            }
+        },
+
+        close() {
+            this.dialog = false
+            this.$nextTick(() => {
+                this.editedItem = Object.assign({}, this.defaultItem)
+                this.editedIndex = -1
+            })
+        },
+
+        closeDelete() {
+            this.dialogDelete = false
+            this.$nextTick(() => {
+                this.editedItem = Object.assign({}, this.defaultItem)
+                this.editedIndex = -1
+            })
+        },
+
+        save() {
+            if (this.editedIndex > -1) {
+                Object.assign(this.items[this.editedIndex], this.editedItem)
+            } else {
+                this.items.push(this.editedItem)
+            }
+            this.$emit('input', this.items)
+            this.close()
+        },
+        onCloneCallback(item) {
+            // Create a fresh copy of item
+            const cloneMe = JSON.parse(JSON.stringify(item))
+            return cloneMe
+        },
+        onMoveCallback(evt, originalEvent) {
+            const item = evt.draggedContext.element
+            const itemIdx = evt.draggedContext.futureIndex
+
+            if (item.locked) {
+                return false
+            }
+
+            return true
+        },
+        onDropCallback(evt, originalEvent) {
+            this.$emit('input', this.items)
+        },
+    },
+}
+</script>
+
+<style scoped></style>

package/components/content/DataTableRowHandler.vue

@@ -0,0 +1,113 @@
+<template>
+    <tr>
+        <td v-for="(header, index) in headers" :key="index">
+            <slot :item="item" :name="columnName(header)">
+                <div :style="getAlignment(header)">
+                    <div>
+                        <v-color-picker
+                            v-if="header.type === 'color_picker'"
+                            v-model="item[header.value]"
+                            class="ma-2"
+                            hide-inputs
+                        ></v-color-picker>
+                        <v-select
+                            v-if="header.type === 'select'"
+                            v-model="item[header.value]"
+                            :items="header.options"
+                            :hide-details="true"
+                            dense
+                            outlined
+                            :autofocus="true"
+                            :label="header.value"
+                            @input="change"
+                        >
+                        </v-select>
+                        <v-textarea
+                            v-if="header.type === 'text_area'"
+                            v-model="item[header.value]"
+                            :hide-details="true"
+                            dense
+                            outlined
+                            :autofocus="true"
+                            :label="header.value"
+                            @input="change"
+                        >
+                            <v-icon v-if="header.draggable" slot="prepend"
+                                >mdi-drag-vertical</v-icon
+                            >
+                        </v-textarea>
+                        <v-text-field
+                            v-if="!header.type"
+                            v-model="item[header.value]"
+                            :hide-details="true"
+                            dense
+                            outlined
+                            :autofocus="true"
+                            :label="header.value"
+                            @input="change"
+                        >
+                            <v-icon v-if="header.draggable" slot="prepend"
+                                >mdi-drag-vertical</v-icon
+                            >
+                        </v-text-field>
+                    </div>
+                </div>
+            </slot>
+        </td>
+    </tr>
+</template>
+
+<script>
+export default {
+    name: 'DataTableRowHandler',
+    components: {},
+    props: {
+        itemClass: {
+            type: String,
+            default: '',
+        },
+        item: {
+            type: Object,
+            default: () => {
+                return {}
+            },
+        },
+        headers: {
+            type: Array,
+            default: () => {
+                return []
+            },
+        },
+    },
+    data() {
+        return {}
+    },
+    computed: {
+        getClass() {
+            return this.itemClass
+        },
+    },
+    methods: {
+        columnName(header) {
+            return `item.${header.value}`
+        },
+        getAlignment(header) {
+            const align = header.align ? header.align : 'left'
+            return `text-align: ${align}`
+        },
+        getNonSlotValue(item, header) {
+            console.log(item, header)
+            const val = item[header.value]
+
+            if (val) {
+                return val
+            }
+
+            return ''
+        },
+        change(e) {
+            this.$emit('input', this.item)
+        },
+    },
+}
+</script>