@windward/games 0.0.1

package/components/content/DatableEditor.vue

@@ -0,0 +1,223 @@
+<template>
+    <div>
+        <!--        <v-switch v-model="allowDrag" label="Draggable"> </v-switch>-->
+        <v-data-table
+            ref="myTable"
+            v-model="selected"
+            :headers="item_headers"
+            :items="items"
+            :search="search"
+            item-key="text"
+            class="elevation-1"
+        >
+            <v-divider inset></v-divider>
+            <template #top>
+                <v-toolbar flat color="white">
+                    <div class="d-flex w-100">
+                        <!--                        <v-text-field
+                            v-model="search"
+                            append-icon="mdi-magnify"
+                            label="Search"
+                            dense
+                            outlined
+                            single-line
+                            hide-details
+                        ></v-text-field>-->
+                        <v-btn
+                            color="primary"
+                            class="col-md-12 white--text"
+                            @click="addNew"
+                        >
+                            <v-icon dark>mdi-plus</v-icon>Add
+                        </v-btn>
+                    </div>
+                </v-toolbar>
+            </template>
+            <template #body="props">
+                <draggable
+                    v-model="items"
+                    tag="tbody"
+                    :disabled="!allowDrag"
+                    :move="onMoveCallback"
+                    :clone="onCloneCallback"
+                    @end="onDropCallback"
+                >
+                    <data-table-row-handler
+                        v-model="editedItem"
+                        v-for="(item, index) in props.items"
+                        :key="index"
+                        :item="item"
+                        :editedItemId="editedItem.id"
+                        :headers="item_headers"
+                        v-on:keyup.enter="addNew"
+                    >
+                        <!--                        <template #item.lock="{ item }">
+                            <v-icon
+                                @click="
+                                    item.locked = item.locked ? false : true
+                                "
+                                >{{
+                                    item.locked
+                                        ? 'mdi-pin-outline'
+                                        : 'mdi-pin-off-outline'
+                                }}</v-icon
+                            >
+                        </template>-->
+                        <template v-slot:item.actions="{ item }">
+                            <div v-if="item.id === editedItem.id">
+                                <v-icon color="red" class="mr-3" @click="close">
+                                    mdi-window-close
+                                </v-icon>
+                                <v-icon color="green" @click="save">
+                                    mdi-content-save
+                                </v-icon>
+                            </div>
+                            <div v-else>
+                                <v-icon
+                                    color="green"
+                                    class="mr-3"
+                                    @click="editItem(item)"
+                                >
+                                    mdi-pencil
+                                </v-icon>
+                                <v-icon color="red" @click="deleteItem(item)">
+                                    mdi-delete
+                                </v-icon>
+                            </div>
+                        </template>
+                    </data-table-row-handler>
+                </draggable>
+            </template>
+        </v-data-table>
+    </div>
+</template>
+
+<script>
+import DataTableRowHandler from './DataTableRowHandler.vue'
+import draggable from 'vuedraggable'
+import _ from 'lodash'
+
+export default {
+    name: 'DataTableEditor',
+    components: {
+        draggable,
+        DataTableRowHandler,
+    },
+    props: {
+        headers: { type: Array, required: true, default: [] },
+        data: { type: Array, required: true, default: [] },
+    },
+    data() {
+        return {
+            allowDrag: true,
+            search: '',
+            selected: [],
+            item_headers: [],
+            items: [],
+            editedIndex: -1,
+            editedItem: {
+                id: 0,
+                text: '',
+            },
+            defaultItem: {
+                id: 0,
+                text: 'New Item',
+                value: 'new value',
+            },
+        }
+    },
+    mounted() {
+        this.items = _.cloneDeep(this.data)
+        this.item_headers = _.cloneDeep(this.headers)
+        if (!this.hasActions()) {
+            this.item_headers.push({
+                text: 'Actions',
+                align: 'right',
+                value: 'actions',
+                sortable: false,
+                width: '100px',
+            })
+        }
+    },
+    computed: {
+        activeHeaders() {
+            return this.headers.filter((h) => {
+                if (!this.allowDrag && h.value === 'lock') {
+                    return false
+                }
+                return true
+            })
+        },
+    },
+    methods: {
+        hasActions() {
+            let result = false
+            this.headers.forEach((element) => {
+                if (element.text === 'actions') {
+                    result = true
+                }
+
+                return result
+            })
+        },
+        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
+
+            console.log('onMoveCallback', evt)
+
+            if (item.locked) {
+                return false
+            }
+
+            return true
+        },
+        onDropCallback(evt, originalEvent) {
+            console.log('onDropCallback')
+            this.$emit('input', this.items)
+        },
+        editItem(item) {
+            this.editedIndex = this.items.indexOf(item)
+            this.editedItem = Object.assign({}, item)
+        },
+
+        deleteItem(item) {
+            const index = this.items.indexOf(item)
+            //confirm('Are you sure you want to delete this item?') &&
+            this.items.splice(index, 1)
+        },
+
+        close() {
+            setTimeout(() => {
+                this.editedItem = Object.assign({}, this.defaultItem)
+                this.editedIndex = -1
+            }, 300)
+        },
+        addNew() {
+            const addObj = Object.assign({}, this.defaultItem)
+            addObj.id = this.items.length + 1
+            this.items.unshift(addObj)
+            this.editItem(addObj)
+        },
+        save() {
+            if (this.editedIndex > -1) {
+                Object.assign(this.items[this.editedIndex], this.editedItem)
+            }
+            this.$emit('input', this.items)
+            this.close()
+        },
+    },
+}
+</script>
+
+<style>
+.w-100 {
+    width: 100%;
+}
+</style>

package/components/content/blocks/BaseContentBlock.vue

@@ -0,0 +1,8 @@
+<template>
+    <div>Mock</div>
+</template>
+<script>
+export default {
+    name: 'BaseContentBlock',
+}
+</script>