@qikdev/vue-ui 0.0.4 → 0.1.2

package/src/content/browser.vue

@@ -1,86 +1,293 @@
 <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-column class="browser-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 class="filter-column" style="max-width: 600px;" v-if="showFilters">
-<flex-body>
-                        <search v-model="search" :loading="searching" :debounce="500" placeholder="Keyword Search" />
-
-
-<p></p>
-
-                        
-
-                        <filter-builder :definition="definition" v-model="filter" />
-                    </flex-body>
+                    <flex-column v-if="items.length">
+                        <template v-if="viewMode && viewMode.component">
+                            <component :is="viewMode.component" :selection="manager.items" :items="items"  @click:actions="actionsClicked" @select:item:toggle="rowToggled" @click:item="rowClicked"/>
+                        </template>
+                        <template v-else>
+                            <native-table :enableActions="enableActions" :total="totalItems" :selectAll="selectAll" :deselectAll="deselectAllFunction" :selection="manager.items" @click:row="rowClicked" @click:actions="actionsClicked" @select:row:toggle="rowToggled" @select:multiple="selectMultiple" @deselect:multiple="deselectMultiple" :rows="items" :columns="columns">
+                                <template #corner>
+                                    <ux-menu right>
+                                        <template #activator="{ on }">
+                                            <ux-button icon v-on="on">
+                                                <ux-icon icon="fa-cog" />
+                                            </ux-button>
+                                        </template>
+                                        <ux-list>
+                                            <ux-list-item @click="toggleField(field)" v-for="field in fields">
+                                                <ux-icon :icon="fieldEnabled[field.key] ? 'fa-check-square' : 'fa-regular fa-square' " left /> {{field.title}}
+                                            </ux-list-item>
+                                            <!-- <ux-list-item @click="selectPage()">
+                                            Select Page
+                                        </ux-list-item>
+                                        <ux-list-item v-if="someSelectedOnPage" @click="deselectPage()">
+                                            Deselect Page
+                                        </ux-list-item>
+                                        <ux-list-item v-if="selectAll" @click="selectAll()">
+                                            Select All ({{total}})
+                                        </ux-list-item>
+                                        <ux-list-item v-if="deselectAll" @click="deselectAll()">
+                                            Deselect All
+                                        </ux-list-item> -->
+                                        </ux-list>
+                                    </ux-menu>
+                                </template>
+                            </native-table>
+                        </template>
+                    </flex-column>
+                    <flex-column class="empty" v-else-if="!loading" center>
+                        <ux-panel>
+                            <ux-panel-body>
+                                <div>No {{definition.plural}} found.</div>
+                            </ux-panel-body>
+                        </ux-panel>
+                    </flex-column>
+                    <flex-column class="filter-column" v-if="showFilters">
+                        <flex-body>
+                            <search v-model="keywords" :loading="searching" :debounce="500" placeholder="Keyword Search" />
+                            <p></p>
+                            <filter-builder :definition="definition" v-model="filter" />
+                        </flex-body>
                     </flex-column>
                 </flex-row>
             </flex-column>
             <flex-footer>
+                <slot name="footera"></slot>
                 <div class="footer">
-                    <flex-row center gap >
-                        <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 v-if="totalPages > 1">
-                            <flex-row gap 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>
+                    <pager v-model:page="page" :total="totalItems"/>
                 </div>
+                <slot name="footerb"></slot>
             </flex-footer>
         </template>
+        <spinner large v-if="loading" />
     </flex-column>
 </template>
 <script>
-import NativeSelect from '../form/inputs/select.vue';
+// 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 Search from '../form/inputs/search.vue';
+import Pager from '../ui/pager.vue';
 
+//////////////////////////////////////////////
 
-// import FilterRule from '../filter/FilterRule.vue';
+function defaultColumns(self, type) {
 
-let cancelInflight;
+    var columns = [];
+    var ignoreTitle;
+
+    ///////////////////////////////////////
+
+    //Prefix Columns
+    switch (type) {
+        case 'image':
+        case 'video':
+            columns.push({
+                title: '',
+                key: '_id',
+                renderer: 'thumbnail',
+                shrink: true,
+                fields: ['width', 'height', 'fileMeta.colors.colors[0]'],
+            })
+            break;
+    }
+
+
+    ///////////////////////////////////////
+
+    switch (type) {
+        case 'profile':
+            ignoreTitle = true;
+
+            columns.push({
+                title: 'First Name',
+                key: 'firstName',
+                // shrink: true,
+            })
+
+            columns.push({
+                title: 'Last Name',
+                key: 'lastName',
+                // shrink: true,
+            })
+
+            columns.push({
+                title: 'Gender',
+                key: 'gender',
+                // shrink: true,
+            })
+
+            columns.push({
+                title: 'Age',
+                key: 'age',
+                // shrink: true,
+            })
+            break;
+        case 'definition':
+            columns.push({
+                title: 'Plural',
+                key: 'plural',
+                // shrink: true,
+            })
+
+
+
+            columns.push({
+                title: 'Defines Type',
+                key: 'definesType',
+                // shrink: true,
+            })
+
+            columns.push({
+                title: 'Database Key',
+                key: 'key',
+                // shrink: true,
+            })
+
+            columns.push({
+                title: 'Category',
+                key: 'category',
+                // shrink: true,
+            })
+
+            break;
+        case 'file':
+        case 'audio':
+        case 'image':
+        case 'video':
+
+            ignoreTitle = true;
+            columns.push({
+                title: 'Title',
+                key: 'title',
+                // shrink: true,
+            })
+
+            switch (type) {
+                case 'image':
+                case 'video':
+                    columns.push({
+                        title: 'Width',
+                        key: 'width',
+                        shrink: true,
+                    })
+
+                    columns.push({
+                        title: 'Height',
+                        key: 'height',
+                        shrink: true,
+                    })
+
+                    break;
+            }
+
+            columns.push({
+                title: 'Ext',
+                key: 'fileExtension',
+                shrink: true,
+            })
+
+            columns.push({
+                title: 'Mime Type',
+                key: 'fileMime',
+                // shrink: true,
+            })
+
+
+            columns.push({
+                title: 'File Type',
+                key: 'mediaIntegrationType',
+                shrink: true,
+            })
+
+            break;
+    }
+
+
+    ///////////////////////////////////////
 
 
+    if (!ignoreTitle) {
+        columns.unshift({
+            title: 'Title',
+            key: 'title',
+        })
+    }
+
+    ///////////////////////////////////////
+
+    //Suffix Columns
+    switch (type) {
+        case 'file':
+        case 'audio':
+        case 'image':
+        case 'video':
+            columns.push({
+                title: '',
+                key: '_id',
+                renderer: 'button',
+                shrink: true,
+                button: {
+                    size: "sm",
+                    text: 'Download',
+                    icon: 'fa-download',
+                    action(row) {
+                        return new Promise(async function(resolve, reject) {
+
+                            //Refresh our token if it's stale
+                            var validToken = await self.$qik.auth.ensureValidToken();
+
+                            //Open the URL
+                            var url = self.$qik.files.downloadUrl(self.basicType, row)
+
+                            window.open(url);
+
+                            resolve();
+                        })
+                    }
+                }
+            })
+            break;
+    }
+
+
+
+
+
+    return columns;
+}
+
+//////////////////////////////////////////////
+
+let cancelInflight;
+let typeCacheKey;
+
 export default {
     props: {
+        view: {
+            type: Object,
+            default() {
+                return {
+                    title:'List',
+                    key:'table',
+                }
+            },
+        },
         type: {
             type: String,
             required: true,
         },
-        showFilters:{
-            type:Boolean,
+        showFilters: {
+            type: Boolean,
         },
         search: {
             type: String,
+            default: '',
         },
         options: {
             type: Object,
@@ -89,7 +296,7 @@ export default {
             }
         },
         cacheKey: {
-            type: String,
+            type: [String, Number],
         },
         modelValue: {
             type: Array,
@@ -105,15 +312,31 @@ export default {
         },
         selectionManager: {
             type: Object,
-        }
+        },
+        enableActions: {
+            type: Boolean,
+            default: false,
+        },
     },
     components: {
-        NativeSelect,
+        // NativeSelect,
+        Pager,
         NativeTable,
         FilterBuilder,
         Search,
         // FilterRule,
     },
+    deactivated() {
+        typeCacheKey = this.$qik.global.cacheKeys[this.type];
+    },
+    async activated() {
+        var self = this;
+        var nowCacheKey = self.$qik.global.cacheKeys[self.type];
+        if (typeCacheKey != nowCacheKey) {
+            typeCacheKey = nowCacheKey;
+            self.dataSource = await self.load();
+        }
+    },
     async created() {
 
         var self = this;
@@ -140,20 +363,88 @@ export default {
         ]);
     },
     watch: {
+        keywords(k) {
+            this.$emit('update:search', k)
+        },
+        search(k) {
+            this.keywords = k;
+        },
         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: {
+        viewMode() {
+            var view = this.view;
+
+            switch(view.key) {
+                case 'list':
+                case 'table':
+                    return;
+                break;
+            }
+
+            return view;
+        },
+        sort() {
+
+            //TODO Update to allow for a prop
+            //And user sort by clicking on the table headers
+            var defaultSort = {
+                key: 'title',
+                direction: 'asc',
+                type: 'string',
+            }
+
+            switch (this.basicType) {
+                case 'log':
+                    defaultSort = {
+                        key: 'meta.created',
+                        direction: 'dsc',
+                        type: 'date',
+                    }
+                    break;
+            }
+
+            return defaultSort
+        },
+        fields() {
+            var allFields = [...this.definition.fields];
+            var definedFields = this.definition.definedFields || [];
+            if (definedFields.length) {
+                var customFields = {
+                    title: `${this.definition.title}`,
+                    minimum: 1,
+                    maximum: 1,
+                    key: 'data',
+                    asObject: true,
+                    type: 'group',
+                    fields: definedFields,
+                }
+
+                allFields.push(customFields);
+            }
+
+            var mapped = this.$qik.utils.mapFields(allFields)
+                .filter(function(field) {
+                    var isObject = field.type == 'group' && field.asObject && (field.minimum == 1 && field.maximum == 1);
+                    return !isObject;
+                })
+                .map(function(field) {
+                    field.title = field.titles.join(' > ');
+                    return field;
+                })
+                .sort(function(a, b) {
+                    return a.title < b.title ? -1 : 1;
+                });
+            return mapped;
+        },
         deselectAllFunction() {
             return this.manager.items.length ? this.deselectAll : null;
         },
@@ -166,7 +457,7 @@ export default {
             return activeFilters;
         },
         searching() {
-            return this.loading && this.search.length;
+            return this.loading && this.keywords.length;
         },
         title() {
             return this.definition.title;
@@ -174,16 +465,16 @@ export default {
         plural() {
             return this.definition.plural;
         },
-        perPage: {
-            get() {
-                return this.page.size;
-            },
-            set(i) {
-                i = Math.max(i, 1);
-                this.page.size = i;
-            }
+        // 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) {
@@ -197,88 +488,109 @@ export default {
 
             let columns = [];
 
-            columns.push({
-                title: '',
-                key: '_id',
-                renderer: 'thumbnail',
-                shrink: true,
-                fields: ['width', 'height', 'fileMeta.colors.colors[0]'],
-            })
 
-            columns.push({
-                title: 'Title',
-                key: 'title',
+            columns = defaultColumns(this, this.basicType);
+
+
+
+            var existingColumns = columns.reduce(function(set, column) {
+                set[column.key] = 1;
+                return set;
+            }, {})
+
+            /////////////////////////////////////
+
+            var additionalFields = this.additionalFields;
+            additionalFields.forEach(function(field) {
+
+                if (!existingColumns[field.key]) {
+                    existingColumns[field.key] = 1;
+                    columns.push({
+                        title: field.title,
+                        key: field.path,
+                        type: field.type,
+                    })
+                }
             })
 
 
+
+            /////////////////////////////////////
+
             var activeFilters = this.activeFilters;
             activeFilters.forEach(function(filter) {
-                columns.push({
-                    title: filter.key,
-                    key: filter.key,
-                })
+
+                if (!existingColumns[filter.key]) {
+                    existingColumns[filter.key] = 1;
+                    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),
-            }
-        },
+        // 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);
-        },
+            return `${JSON.stringify([this.page, this.sort, this.keywords, this.selectFields, this.type, this.filterChangeString])}-${this.cacheKey}-${this.$qik.global.cacheKeys[this.type]}`;
+        },
+        // 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) {
+        // currentPage: {
+        //     get() {
+        //         return this.page.index;
+        //     },
+        //     set(index) {
 
 
-                if (this.totalPages) {
-                    index = Math.min(this.totalPages, index);
-                }
+        //         if (this.totalPages) {
+        //             index = Math.min(this.totalPages, index);
+        //         }
 
-                index = Math.max(index, 1);
+        //         index = Math.max(index, 1);
 
-                return this.page.index = index;
-            }
-        },
+        //         return this.page.index = index;
+        //     }
+        // },
         totalItems() {
             return this.dataSource.total;
         },
-        totalPages() {
-            return this.dataSource ? this.dataSource.page.total : 1;
+        // totalPages() {
+        //     return this.dataSource ? this.dataSource.page.total : 1;
 
-        },
+        // },
         basicType() {
-            return this.definition.definesType || this.definition.key;
+            return this.definition ? this.definition.definesType || this.definition.key : this.type;
         },
         loadCriteria() {
 
             var self = this;
             var sort = self.sort;
-            var search = self.search;
+            var search = self.keywords;
             var select = self.selectFields;
             var page = self.page;
             var filter = self.filter;
@@ -291,8 +603,30 @@ export default {
                 filter,
             }
         },
+        fieldEnabled() {
+            var self = this;
+            return self.columns.reduce(function(set, field) {
+                set[field.key] = true;
+                return set;
+            }, {})
+        },
     },
     methods: {
+
+        toggleField(field) {
+
+            var key = field.path;
+
+            var index = this.additionalFields.findIndex(function(f) {
+                return f.key == key;
+            })
+
+            if (index == -1) {
+                this.additionalFields.push(field);
+            } else {
+                this.additionalFields.splice(index, 1);
+            }
+        },
         ensureMeta(row) {
             if (!row.meta) {
                 row.meta = {}
@@ -303,6 +637,7 @@ export default {
             return row;
         },
         deselectAll() {
+
             this.manager.deselectAll();
         },
         async selectAll() {
@@ -320,44 +655,58 @@ export default {
             });
 
             //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) {
+
+            console.log('CLICKED ROW')
             this.$emit('click:row', row);
         },
+        actionsClicked(row) {
+
+            this.$emit('click:actions', 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++;
-        },
+        // previousPage() {
+        //     this.currentPage--;
+        // },
+        // nextPage() {
+        //     this.currentPage++;
+        // },
         async load(includeAll) {
+
+
+
             var self = this;
             self.loading = true;
             if (cancelInflight) {
@@ -366,7 +715,7 @@ export default {
             }
 
             var loadCriteria = Object.assign({}, self.loadCriteria);
-            loadCriteria.includeAll = true;
+            loadCriteria.includeAll = includeAll;
 
 
             const { promise, cancel } = await self.$qik.content.list(self.type, loadCriteria, { cancellable: true })
@@ -418,17 +767,7 @@ export default {
             definition: null,
             manager,
             loading: true,
-            // sort: {
-            //     key: 'meta.updated',
-            //     direction: 'dsc',
-            //     type: 'date',
-            // },
-            sort: {
-                key: 'title',
-                direction: 'asc',
-                type: 'string',
-            },
-
+            additionalFields: [],
             page: {
                 size: 50,
                 index: 1,
@@ -437,28 +776,29 @@ export default {
                 operator: 'and',
                 filters: [],
             },
+            keywords: this.search,
             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,
-                    },
-                ]
-            }
+            // 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,
+            //         },
+            //     ]
+            // }
         }
     },
 }
@@ -469,15 +809,27 @@ export default {
     position: relative;
 }
 
-.body {
+.browser-body {
     &.loading {
         opacity: 0.5;
     }
 }
 
 .filter-column {
-    padding:1em;
+    padding: 1em;
     background: rgba(#000, 0.1);
+    max-width: 500px;
+    width: 40%;
+    flex: none;
+    font-size: clamp(13px, 0.9em, 17px);
+}
+
+.empty {
+    background: rgba(#000, 0.05);
+
+    .panel {
+        background: #fff;
+    }
 }
 
 
@@ -485,9 +837,6 @@ export default {
     padding: 1em;
     border-top: 1px solid rgba(#000, 0.1);
 
-    .text {
-        opacity: 0.5;
-        font-size: 0.8em;
-    }
+    
 }
 </style>