@qikdev/vue-ui 0.0.1 → 0.0.2

package/src/content/browser.vue

@@ -0,0 +1,477 @@
+<template>
+    <flex-column class="content-browser" v-if="definition">
+        <spinner large v-if="loading" />
+        <template v-if="dataSource">
+            <flex-column class="body" :class="{loading}">
+                <flex-row>
+                    <flex-cell flex>
+                        <native-table :total="totalItems" :selectAll="selectAll" :deselectAll="deselectAllFunction" :actions="false" :selection="manager.items" @click:row="rowClicked" @select:row:toggle="rowToggled" @select:multiple="selectMultiple" @deselect:multiple="deselectMultiple" :rows="items" :columns="columns" />
+                    </flex-cell>
+                    <flex-column style="max-width: 600px;">
+                        <flex-header>
+                            Filters
+                        </flex-header>
+                        <filter-builder :definition="definition" v-model="filter" />
+                    </flex-column>
+                </flex-row>
+            </flex-column>
+            <flex-footer>
+                <div class="footer">
+                    <flex-row center>
+                        <flex-cell shrink class="text">
+                            <native-select v-model="perPage" :field="perPageField">
+                                Showing {{displayStartIndex}} to {{endIndex}} of {{totalItems}} total
+                            </native-select>
+                        </flex-cell>
+                        <flex-cell>
+                        </flex-cell>
+                        <flex-cell shrink>
+                            <flex-row center>
+                                <flex-cell shrink class="text">
+                                    <native-select v-model="currentPage" :field="pageField">
+                                        Page {{currentPage}} of {{totalPages}}
+                                    </native-select>
+                                </flex-cell>
+                                <flex-cell shrink>
+                                    <ux-button icon @click="previousPage()">
+                                        <ux-icon icon="fa-arrow-left" />
+                                    </ux-button>
+                                </flex-cell>
+                                <flex-cell shrink>
+                                    <ux-button icon @click="nextPage()">
+                                        <ux-icon icon="fa-arrow-right" />
+                                    </ux-button>
+                                </flex-cell>
+                            </flex-row>
+                        </flex-cell>
+                    </flex-row>
+                </div>
+            </flex-footer>
+        </template>
+    </flex-column>
+</template>
+<script>
+import NativeSelect from '../form/inputs/select.vue';
+import NativeTable from '../table/Table.vue';
+
+import FilterBuilder from '../filter/FilterBuilder.vue';
+import Selection from '../services/selection.js';
+
+
+// import FilterRule from '../filter/FilterRule.vue';
+
+let cancelInflight;
+
+
+export default {
+    props: {
+        type: {
+            type: String,
+            required: true,
+        },
+        search: {
+            type: String,
+        },
+        options: {
+            type: Object,
+            default () {
+                return {}
+            }
+        },
+        cacheKey: {
+            type: String,
+        },
+        modelValue: {
+            type: Array,
+            default () {
+                return [];
+            }
+        },
+        maximum: {
+            type: Number,
+            default () {
+                return 0;
+            }
+        },
+        selectionManager: {
+            type: Object,
+        }
+    },
+    components: {
+        NativeSelect,
+        NativeTable,
+        FilterBuilder,
+        // FilterRule,
+    },
+    async created() {
+
+        var self = this;
+
+        //Get the type details
+        await Promise.all([
+            new Promise(async function(resolve, reject) {
+                var glossary = await self.$qik.content.glossary({ hash: true });
+                var definition = glossary[self.type]
+                self.definition = definition;
+
+
+                if (!definition) {
+                    return reject();
+                }
+                resolve();
+            }),
+            new Promise(async function(resolve, reject) {
+
+                var dataSource = await self.load();
+                self.dataSource = dataSource;
+                resolve();
+            }),
+        ]);
+    },
+    watch: {
+        async change() {
+            this.dataSource = await this.load();
+        },
+        loading() {
+            this.$emit('loading', this.loading)
+        },
+        totalPages() {
+            this.currentPage = 0;
+        },
+        selectedItems(items) {
+            this.$emit('update:modelValue', items);
+        },
+    },
+    computed: {
+        deselectAllFunction() {
+            return this.manager.items.length ? this.deselectAll : null;
+        },
+
+        selectedItems() {
+            return this.manager.items.slice();
+        },
+        activeFilters() {
+            var activeFilters = this.$qik.filter.activeFilters(this.filter);
+            return activeFilters;
+        },
+        searching() {
+            return this.loading && this.search.length;
+        },
+        title() {
+            return this.definition.title;
+        },
+        plural() {
+            return this.definition.plural;
+        },
+        perPage: {
+            get() {
+                return this.page.size;
+            },
+            set(i) {
+                i = Math.max(i, 1);
+                this.page.size = i;
+            }
+
+        },
+        selectFields() {
+            return this.columns.map(function(column) {
+                if (column.fields) {
+                    return [column.key, ...column.fields];
+                }
+                return column.key;
+
+            }).flat()
+        },
+        columns() {
+
+            let columns = [];
+
+            columns.push({
+                title: '',
+                key: '_id',
+                renderer: 'thumbnail',
+                shrink: true,
+                fields: ['width', 'height', 'fileMeta.colors.colors[0]'],
+            })
+
+            columns.push({
+                title: 'Title',
+                key: 'title',
+            })
+
+
+            var activeFilters = this.activeFilters;
+            activeFilters.forEach(function(filter) {
+                columns.push({
+                    title: filter.key,
+                    key: filter.key,
+                })
+            })
+
+            return columns;
+        },
+        pageField() {
+            return {
+                type: 'integer',
+                maximum: 1,
+                minimum: 1,
+                options: Array(this.totalPages).fill(1).map((x, y) => x + y),
+            }
+        },
+        filterChangeString() {
+            var string = this.$qik.filter.filterChangeString(this.filter);
+            return string;
+        },
+        change() {
+            return `${JSON.stringify([this.page, this.sort, this.search, this.selectFields, this.type, this.filterChangeString])}-${this.cacheKey}`;
+        },
+        startIndex() {
+            return (this.currentPage - 1) * this.page.size;
+        },
+        displayStartIndex() {
+            return this.totalItems ? this.startIndex + 1 : 0;
+        },
+        endIndex() {
+            return Math.min(this.startIndex + this.page.size, this.totalItems);
+        },
+        items() {
+            return this.dataSource.items;
+        },
+        currentPage: {
+            get() {
+                return this.page.index;
+            },
+            set(index) {
+
+
+                if (this.totalPages) {
+                    index = Math.min(this.totalPages, index);
+                }
+
+                index = Math.max(index, 1);
+
+                return this.page.index = index;
+            }
+        },
+        totalItems() {
+            return this.dataSource.total;
+        },
+        totalPages() {
+            return this.dataSource ? this.dataSource.page.total : 1;
+
+        },
+        basicType() {
+            return this.definition.definesType || this.definition.key;
+        },
+        loadCriteria() {
+
+            var self = this;
+            var sort = self.sort;
+            var search = self.search;
+            var select = self.selectFields;
+            var page = self.page;
+            var filter = self.filter;
+
+            return {
+                sort,
+                search,
+                select,
+                page,
+                filter,
+            }
+        },
+    },
+    methods: {
+        ensureMeta(row) {
+            if (!row.meta) {
+                row.meta = {}
+            }
+
+            row.meta.type = this.basicType;
+            row.meta.definition = this.definition.key;
+            return row;
+        },
+        deselectAll() {
+            this.manager.deselectAll();
+        },
+        async selectAll() {
+
+            //Load all items
+            var self = this;
+
+            //Load all the item ids and 
+            self.dataSource = await self.load(true);
+
+            //Create rows for all of them
+            var allItems = this.dataSource.all.map(function(_id) {
+                var row = self.ensureMeta({ _id });
+                return row;
+            });
+
+            //Set the selection to all items
+            console.log('Set Selection ALL', allItems)
+            self.manager.setSelection(allItems);
+        },
+        selectMultiple(rows) {
+            rows = rows.map(this.ensureMeta);
+            this.manager.selectMultiple(rows);
+        },
+        deselectMultiple(rows) {
+            rows = rows.map(this.ensureMeta);
+            this.manager.deselectMultiple(rows);
+        },
+        rowToggled(row) {
+            this.toggle(row);
+        },
+        rowClicked(row) {
+            this.$emit('click:row', row);
+        },
+        select(row) {
+            this.ensureMeta(row);
+            this.manager.select(row);
+        },
+        deselect(row) {
+            this.manager.deselect(row);
+        },
+        isSelected(row) {
+            return this.manager.isSelected(row);
+        },
+        toggle(row) {
+            this.ensureMeta(row);
+            this.manager.toggle(row);
+        },
+        previousPage() {
+            this.currentPage--;
+        },
+        nextPage() {
+            this.currentPage++;
+        },
+        async load(includeAll) {
+            var self = this;
+            self.loading = true;
+            if (cancelInflight) {
+                cancelInflight();
+                cancelInflight = null;
+            }
+
+            var loadCriteria = Object.assign({}, self.loadCriteria);
+            loadCriteria.includeAll = true;
+
+
+            const { promise, cancel } = await self.$qik.content.list(self.type, loadCriteria, { cancellable: true })
+
+            cancelInflight = cancel;
+
+            promise.then(function(res) {
+                self.loading = false;
+            })
+            promise.catch(function(err) {
+                // self.loading = false;
+            });
+
+
+            const { data } = await promise;
+
+
+            data.items.forEach(self.ensureMeta);
+            // function(item) {
+            //     if (!item.meta) {
+            //         item.meta = {}
+            //     }
+            //     item.meta.type = self.definition.definesType || self.definition.key;
+            //     item.meta.definition = self.definition.definesType ? self.definition.key : null;
+            // })
+
+            return data;
+
+
+
+
+        },
+    },
+    data() {
+
+        var manager = this.selectionManager;
+        if (!manager) {
+            manager = new Selection({ minimum: this.minimum, maximum: this.maximum });
+        }
+
+        //Set the initial selection
+        if (this.modelValue) {
+            manager.setSelection(this.modelValue);
+        }
+
+        ////////////////////////////////////
+
+        return {
+            definition: null,
+            manager,
+            loading: true,
+            // sort: {
+            //     key: 'meta.updated',
+            //     direction: 'dsc',
+            //     type: 'date',
+            // },
+            sort: {
+                key: 'title',
+                direction: 'asc',
+                type: 'string',
+            },
+
+            page: {
+                size: 50,
+                index: 1,
+            },
+            filter: {
+                operator: 'and',
+                filters: [],
+            },
+            dataSource: null,
+            perPageField: {
+                minimum: 1,
+                maximum: 1,
+                options: [{
+                        title: '50 per page',
+                        value: 50,
+                    },
+                    {
+                        title: '100 per page',
+                        value: 100,
+                    },
+                    {
+                        title: '250 per page',
+                        value: 250,
+                    },
+                    {
+                        title: '500 per page',
+                        value: 500,
+                    },
+                ]
+            }
+        }
+    },
+}
+</script>
+<style lang="scss" scoped>
+.content-browser {
+    background: #fff;
+    position: relative;
+}
+
+.body {
+    &.loading {
+        opacity: 0.5;
+    }
+}
+
+
+.footer {
+    padding: 1em;
+    border-top: 1px solid rgba(#000, 0.1);
+
+    .text {
+        opacity: 0.5;
+        font-size: 0.8em;
+    }
+}
+</style>

package/src/content/item.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="content-item" @click="clicked">
+        <flex-row>
+            <flex-cell shrink>
+            </flex-cell>
+            <flex-cell vcenter>
+                <slot>
+                    {{title}}
+                </slot>
+            </flex-cell>
+            <flex-cell shrink>
+                <slot name="actions"></slot>
+            </flex-cell>
+        </flex-row>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        item: {
+            type: Object,
+            required: true,
+        },
+    },
+    computed: {
+        title() {
+            return this.item.title || this.item.name || this.item.label;
+        }
+    },
+    methods:{
+        clicked() {
+            this.$qik.dispatch('item:view', this.item);
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.content-item {
+    padding: 0.8em;
+    border: 1px solid rgba(#000, 0.1);
+    background: #fff;
+    cursor: pointer;
+
+    &:hover {
+        background: rgba(#000, 0.03);
+    }
+}
+</style>