@mixd-id/web-scaffold 0.1.2301231347 → 0.1.2301231349

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.2301231347",
+  "version": "0.1.2301231349",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Image.vue

@@ -128,9 +128,9 @@ export default{
 							src['all'] = text
 						}
 					})
-					for(const b in screens){
-						if(window.innerWidth > b && src[screens[b]]){
 
+					for(const b in screens){
+						if(window.innerWidth > b && screens[b] in src){
 							var img = new Image()
 							img.addEventListener('load', () => {
 								this.status = 2

package/src/components/ListPage1.vue

@@ -58,11 +58,27 @@
 
 				<VirtualTable v-else class="flex-1 m-6" :columns="presetColumns" :items="items"
 											:appearances="appearances" @scroll-end="loadNext" :pinned="pinned">
+					<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
+						<div :class="getHeader(column)">
+							<div class="flex-1 p-2 cursor-pointer" @click="$refs[column.key][0].open($event.target)">
+								{{ column.label }}
+							</div>
+							<div>
+							</div>
+						</div>
+					</template>
 					<template v-for="(_, slot) in $slots" #[slot]="{ item, index }">
 						<slot :name="slot" :item="item" :index="index"></slot>
 					</template>
 				</VirtualTable>
 
+				<ContextMenu v-for="column in presetColumns" :ref="column.key">
+					<div class="p-4 min-w-[200px] max-w-[300px] min-h-[200px] flex flex-col gap-1">
+						<h5>{{ column.label }}</h5>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec metus nisi. Etiam faucibus tortor ut faucibus scelerisque. In vel odio mollis, facilisis arcu et, tristique dolor. Morbi sapien velit, porttitor ut neque id, facilisis tristique mi. Donec sed odio felis. Mauris id urna tempor, sagittis libero ornare, pulvinar nulla. </p>
+					</div>
+				</ContextMenu>
+
 			</div>
 
 			<div v-if="layout.presetOpen" class="w-[360px] border-l-[1px] border-text-50 bg-base-500 flex flex-col">
@@ -83,7 +99,7 @@
 												 @dismiss="layout.presetContextMenu = null" position="bottom-right">
 							<div class="min-w-[200px]">
 								<button class="w-full p-3 hover:bg-text-50" @click="copyPreset">Copy this Preset</button>
-								<button class="w-full p-3 text-red-500 hover:text-red-700" @click="removePreset">Remove</button>
+								<button class="w-full p-3 text-red-500 hover:text-red-700" @click="removePreset" v-if="presets.length > 1">Remove</button>
 							</div>
 						</ContextMenu>
 						<button @click="closePreset">
@@ -185,12 +201,16 @@
 			</div>
 
 		</div>
+		<template #fallback>
+			Loading...
+		</template>
 	</Suspense>
 </template>
 
 <script>
 
 import throttle from "lodash/throttle";
+import {urlQuery} from "../utils/helpers.mjs";
 
 export default{
 
@@ -256,6 +276,7 @@ export default{
 				presetFilterSelector: null,
 				presetSortSelector: null,
 			},
+			name: null,
 			columns: [],
 			presets: [],
 			presetIdx: -1,
@@ -279,7 +300,10 @@ export default{
 
 		patch(){
 
-			this.socketEmit(`${this.computedDataSource}.patch`, {}, (res) => {
+			this.socketEmit(`${this.computedDataSource}.patch`, {
+				...(urlQuery().reset ? { reset:1 } : {})
+			}, (res) => {
+				this.name = res.name
 				this.columns = res.columns
 				this.presets = res.presets
 				this.presetIdx = res.presetIdx
@@ -331,6 +355,7 @@ export default{
 		},
 
 		load(){
+			console.log('load')
 			this.socketEmit(`${this.computedDataSource}.load`, {
 				preset: this.preset
 			}, (res) => {
@@ -354,7 +379,11 @@ export default{
 		},
 
 		savePreset: throttle(function(preset) {
-			this.socketEmit('user.save-preset', { key:this.model, preset:{
+
+			const presetName = this.name ?? this.model
+			const presetUrl = this.name ?? 'user'
+
+			this.socketEmit(`${presetUrl}.save-preset`, { key:presetName, preset:{
 					presetIdx: this.presetIdx,
 					presets: this.presets
 				}}, (res) => {
@@ -498,6 +527,20 @@ export default{
 			this.preset.columns.splice(to, 0, this.preset.columns.splice(from, 1)[0])
 		},
 
+		colOf(key){
+			return 'col-' + key
+		},
+
+		getHeader(column){
+
+			return [
+				this.$style.header,
+				(this.preset.filters ?? []).findIndex((_) => _.key === column.key) >= 0 ?
+					this.$style.headerSelected : ''
+			]
+			.join(' ')
+		}
+
 	},
 
 	watch: {
@@ -522,4 +565,12 @@ export default{
 	@apply flex-1 flex flex-row;
 }
 
+.header{
+	@apply flex flex-row;
+}
+
+.headerSelected{
+	@apply bg-primary-700 border-[1px] border-primary-700;
+}
+
 </style>

package/src/components/ListPage1Filter.vue

@@ -56,7 +56,7 @@
 					</Checkbox>
 				</div>
 
-				<div v-else-if="column && column.type === 'currency'">
+				<div v-else-if="column && [ 'currency', 'number' ].includes(column.type)">
 					<div class="flex flex-row items-start gap-2 my-2">
 						<button v-if="filter.filters.length > 1" @click="filter.filters.splice(filter.filters.indexOf(item), 1)"
 										class="py-2">
@@ -89,7 +89,7 @@
 
 				<div v-else>
 					<div class="flex flex-row items-start gap-2 my-2">
-						<button v-if="filter.filters.length > 1" @click="filter.filters.splice(filter.filters.indexOf(item), 1)"
+						<button v-if="filter.filters.length > 1" @click="filter.filters.splice(filter.filters.indexOf(item), 1);onFilterChange(item)"
 								class="py-2">
 							<svg width="21" height="21" class="fill-text-100 hover:fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 								<path class="secondary" fill-rule="evenodd" d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z"/>
@@ -110,7 +110,7 @@
 								<option value="=">=</option>
 							</Dropdown>
 
-							<Textbox v-model="item.value" />
+							<Textbox v-model="item.value" @keyup.enter="onFilterChange(item)"/>
 
 							<button v-if="idx === filter.filters.length - 1" @click="addMore" class="text-primary">Add More</button>
 						</div>

package/src/index.js

@@ -171,7 +171,6 @@ export default{
     app.component('ImageFullScreen', defineAsyncComponent(() => import("./components/ImageFullScreen.vue")))
     app.component('ImportModal', defineAsyncComponent(() => import("./components/ImportModal.vue")))
     app.component('ListPage1', defineAsyncComponent(() => import("./components/ListPage1.vue")))
-    app.component('ListPage2', defineAsyncComponent(() => import("./components/ListPage2.vue")))
     app.component('ListPage1Filter', defineAsyncComponent(() => import("./components/ListPage1Filter.vue")))
     app.component('ListItem', defineAsyncComponent(() => import("./components/ListItem.vue")))
     app.component('Carousel', defineAsyncComponent(() => import("./components/Carousel.vue")))

package/src/utils/helpers.mjs

@@ -95,6 +95,18 @@ const strVars = function(text, vars){
   return text
 }
 
+let _QS
+const urlQuery = function(){
+
+  if(!_QS){
+    _QS = new Proxy(new URLSearchParams(window.location.search), {
+      get: (searchParams, prop) => searchParams.get(prop),
+    });
+  }
+
+  return _QS
+}
+
 let __uid = new Date().getTime()
 const uid = function(prefix){
   return (prefix ?? '') + __uid++;
@@ -106,6 +118,7 @@ export {
   observeInit,
   csvToArray,
   parseBoolean,
+  urlQuery
 }
 
 function observeInit(){

package/src/utils/listpage1.js

@@ -1,4 +1,6 @@
 const { Op } = require('sequelize')
+const util = require("util");
+const dayjs = require("dayjs");
 
 let ListPage1 = {
 
@@ -7,13 +9,13 @@ let ListPage1 = {
   model: '',
   channel: '',
 
-  async patch(){
+  async patch(params){
+
+    const { reset } = params
 
     let currentPreset
-    if(this.user && this.socket && this.socket.auth){
-      const { userId } = this.socket.auth
-      const user = await this.user.withId(userId)
-      const preset = await user.loadPreset(this.presetName)
+    const preset = this['loadPreset'] && !reset ? await this.loadPreset() : undefined
+    if(preset){
       currentPreset = {
         ...this.getDefaultPresets(),
         ...preset
@@ -25,6 +27,16 @@ let ListPage1 = {
       }
     }
 
+    /*if(this.user && this.socket && this.socket.auth){
+      const { userId } = this.socket.auth
+      const user = await this.user.withId(userId)
+      const preset = await user.loadPreset(this.presetName)
+
+    }
+    else{
+
+    }*/
+
     const data = await this.load({ preset:currentPreset.presets[currentPreset.presetIdx] })
 
     if(this.channel && this.socket){
@@ -58,7 +70,7 @@ let ListPage1 = {
       }
     }*/
 
-    const { afterItem, itemsPerPage = this.itemsPerPage } = params
+    const { afterItem, itemsPerPage = this.itemsPerPage ?? 24 } = params
     const { preset = {} } = params
     let where = {}
     let replacements = []
@@ -157,7 +169,7 @@ let ListPage1 = {
         const operand = items[0] && items[0].operand && items[0].operand === 'or' && items.length > 1 ?
             'or' : 'and'
 
-        let whereValue = {}
+        let whereValue = []
         switch(type){
 
           case 'date':
@@ -234,6 +246,7 @@ let ListPage1 = {
             })
             break
 
+          case 'number':
           case 'currency':
             items.forEach((item) => {
 
@@ -289,31 +302,27 @@ let ListPage1 = {
               switch(operator){
 
                 case 'startsWith':
-                  whereValue = {
-                    ...whereValue,
+                  whereValue.push({
                     [Op.like]: `${value}%`
-                  }
+                  })
                   break
 
                 case 'endsWith':
-                  whereValue = {
-                    ...whereValue,
+                  whereValue.push({
                     [Op.like]: `%${value}`
-                  }
+                  })
                   break
 
                 case 'contains':
-                  whereValue = {
-                    ...whereValue,
+                  whereValue.push({
                     [Op.like]: `%${value}%`
-                  }
+                  })
                   break
 
                 case '=':
-                  whereValue = {
-                    ...whereValue,
+                  whereValue.push({
                     [Op.eq]: value
-                  }
+                  })
                   break
               }
             })
@@ -343,7 +352,9 @@ let ListPage1 = {
       })
     }
 
-    //console.log('where#1', util.inspect(where, false, null, true /* enable colors */))
+    /*console.log(util.inspect(preset.filters, false, null, true /!* enable colors *!/))
+    console.log(where)
+    console.log(replacements)*/
 
     return {
       where,

package/src/components/ListPage2.vue

@@ -1,459 +0,0 @@
-<template>
-	<Suspense @resolve="patch">
-		<div :class="$style.comp">
-
-			<div class="flex-1 flex flex-col">
-
-				<div class="p-6 pb-0 flex flex-row gap-3 items-center">
-					<div class="mr-6">
-						<h2>{{ title }}</h2>
-					</div>
-					<div class="flex-1 overflow-hidden">
-						<slot name="lp-tabspace" :preset="preset"/>
-					</div>
-					<div>
-						<slot name="lp-opts" :preset="preset"/>
-					</div>
-					<div v-if="isSearchable">
-						<slot v-if="$slots['lp-search']" name="lp-search" />
-						<Textbox v-else :clearable="true" placeholder="Cari..." class="w-[200px]" v-model="preset.params.search"
-										 @clear="clearSearch" @submit="load">
-							<template #start>
-								<div class="px-2">
-									<svg width="16" height="16" class="fill-text-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-										<path fill-rule="evenodd" clip-rule="evenodd" d="M17.8723 16.8116C19.1996 15.2436 20 13.2153 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.2153 20 15.2436 19.1996 16.8116 17.8723L19.4697 20.5303C19.7626 20.8232 20.2374 20.8232 20.5303 20.5303C20.8232 20.2374 20.8232 19.7626 20.5303 19.4697L17.8723 16.8116ZM18.5 11C18.5 15.1421 15.1421 18.5 11 18.5C6.85786 18.5 3.5 15.1421 3.5 11C3.5 6.85786 6.85786 3.5 11 3.5C15.1421 3.5 18.5 6.85786 18.5 11Z"/>
-									</svg>
-								</div>
-							</template>
-						</Textbox>
-					</div>
-					<div>
-						<Dropdown class="w-[150px]" :value="preset.name" mode="custom" position="bottom-right">
-							<div class="min-w-[300px] divide-y divide-text-50 p-3">
-								<div v-for="(_preset, idx) in presets" class="cursor-pointer flex flex-row">
-									<div class="flex-1 p-3" @click="selectPreset(_preset)">
-										{{ _preset.name }}
-									</div>
-									<div>
-										<button class="p-3 text-primary" @click="selectPreset(_preset, true)">
-											Edit
-										</button>
-										<button class="p-3 text-primary" @click="copyPreset(preset)">
-											Duplicate
-										</button>
-									</div>
-								</div>
-							</div>
-						</Dropdown>
-					</div>
-				</div>
-
-				<VirtualTable class="flex-1 m-6" :columns="columns" :items="items" @scroll-end="loadNext">
-					<template v-for="(_, slot) in $slots" #[slot]="{ item }">
-						<slot :name="slot" :item="item"></slot>
-					</template>
-				</VirtualTable>
-
-			</div>
-
-			<div v-if="layout.presetOpen" class="w-[300px] border-l-[1px] border-text-100 flex flex-col">
-
-				<div class="p-6 pb-0">
-					<div class="flex flex-row gap-2 mb-3">
-						<input class="flex-1 text-xl bg-transparent outline-none" :value="preset.name" @blur="preset.name = $event.target.value" />
-						<button @click="layout.presetContextMenu = { caller:$event.target }">
-							<svg width="21" height="21" viewBox="0 0 24 24" class="fill-text-300 pointer-events-none" xmlns="http://www.w3.org/2000/svg">
-								<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.5C12.8284 6.5 13.5 5.82843 13.5 5C13.5 4.17157 12.8284 3.5 12 3.5C11.1716 3.5 10.5 4.17157 10.5 5C10.5 5.82843 11.1716 6.5 12 6.5ZM12 8C13.6569 8 15 6.65685 15 5C15 3.34315 13.6569 2 12 2C10.3431 2 9 3.34315 9 5C9 6.65685 10.3431 8 12 8Z"/>
-								<path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5C12.8284 13.5 13.5 12.8284 13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716 10.5 12C10.5 12.8284 11.1716 13.5 12 13.5ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"/>
-								<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20.5C12.8284 20.5 13.5 19.8284 13.5 19C13.5 18.1716 12.8284 17.5 12 17.5C11.1716 17.5 10.5 18.1716 10.5 19C10.5 19.8284 11.1716 20.5 12 20.5ZM12 22C13.6569 22 15 20.6569 15 19C15 17.3431 13.6569 16 12 16C10.3431 16 9 17.3431 9 19C9 20.6569 10.3431 22 12 22Z"/>
-							</svg>
-						</button>
-						<ContextMenu :state="!!layout.presetContextMenu"
-												 :caller="layout.presetContextMenu ? layout.presetContextMenu.caller : null"
-												 @dismiss="layout.presetContextMenu = null" position="bottom-right">
-							<div class="min-w-[200px]">
-								<button class="w-full p-3 hover:bg-text-50" @click="removePreset(preset)">Remove</button>
-							</div>
-						</ContextMenu>
-						<button @click="layout.presetOpen = false">
-							<svg width="21" height="21" viewBox="0 0 24 24" class="fill-text-300" xmlns="http://www.w3.org/2000/svg">
-								<path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
-							</svg>
-						</button>
-					</div>
-
-					<Tabs v-model="layout.presetTab">
-						<div value="column">Kolom</div>
-						<div value="filter">Filter</div>
-						<div value="sort">Urutan</div>
-					</Tabs>
-				</div>
-
-				<div class="flex-1 overflow-y-auto px-6 mb-6">
-
-					<div class="p-2 mt-6 flex flex-col" v-if="layout.presetTab === 'column'">
-						<ListItem :items="columns" @reorder="reorderColumns">
-						  <template v-slot="{ item }">
-								<div class="flex flex-row items-center gap-2" :key="item">
-									<div class="cursor-move" data-reorder>
-										<svg class="fill-text-200" width="21" height="21" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-											<path fill-rule="evenodd" clip-rule="evenodd" d="M4 16C4 15.4477 4.44772 15 5 15H19C19.5523 15 20 15.4477 20 16C20 16.5523 19.5523 17 19 17H5C4.44772 17 4 16.5523 4 16Z"/>
-											<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8C4 7.44772 4.44772 7 5 7H19C19.5523 7 20 7.44772 20 8C20 8.55228 19.5523 9 19 9H5C4.44772 9 4 8.55228 4 8Z"/>
-										</svg>
-									</div>
-									<input :id="`lp1column${item.key}`" type="checkbox" v-model="item.visible" :true-value="true" :false-value="false" @change="load"/>
-									<label :for="`lp1column${item.key}`" class="p-2">
-										{{ item.label ?? '(No Name)' }}
-									</label>
-								</div>
-						  </template>
-						</ListItem>
-					</div>
-
-					<div class="flex flex-col" v-if="layout.presetTab === 'filter'">
-						<div v-if="filterableColumns.length > 0">
-							<ListPage1Filter v-if="preset.filters" v-for="filter in preset.filters"
-															 :filter="filter" :column="preset.params.columns.filter((_) => _.key === filter.key).pop()"
-															 @remove="removeFilter(filter)" @change="load"/>
-
-							<div class="py-8 border-t-[1px] border-text-100">
-								<Dropdown @change="addFilter" v-model="layout.presetFilterSelector">
-									<option value="" disabled selected>Tambah Filter</option>
-									<option v-for="column in filterableColumns" :value="column.key">{{ column.label }}</option>
-								</Dropdown>
-							</div>
-						</div>
-						<div v-else>
-							<div class="p-6 text-center">
-								<label>Filter not available</label>
-							</div>
-						</div>
-					</div>
-
-					<div class="p-2 flex flex-col" v-if="layout.presetTab === 'sort'">
-						<div v-if="sortableColumns.length > 0">
-							<div v-for="sort in preset.sorts" class="py-4 border-b-[1px] border-text-100">
-								<div class="flex flex-row items-center gap-2">
-									<div class="flex-1">
-										<Dropdown v-model="sort.key">
-											<option value="" disabled selected>Tambah Urutan</option>
-											<option v-for="column in sortableColumns" :value="column.key">{{ column.label }}</option>
-										</Dropdown>
-									</div>
-									<div>
-										<Dropdown v-model="sort.type" @change="load" class="w-[80px]">
-											<option value="">Asc</option>
-											<option value="desc">Desc</option>
-										</Dropdown>
-									</div>
-									<button @click="removeSort(sort)">
-										<svg width="21" height="21" class="fill-text-100 hover:fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-											<path class="secondary" fill-rule="evenodd" d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z"/>
-										</svg>
-									</button>
-								</div>
-							</div>
-
-							<div class="py-8">
-								<Dropdown @change="addSort" v-model="layout.presetSortSelector">
-									<option value="" disabled selected>Tambah Urutan</option>
-									<option v-for="column in sortableColumns" :value="column.key">{{ column.label }}</option>
-								</Dropdown>
-							</div>
-						</div>
-						<div v-else>
-							<div class="p-6 text-center">
-								<label>Sort not available</label>
-							</div>
-						</div>
-					</div>
-
-				</div>
-
-				<div class="px-6 py-3 flex flex-row gap-2"></div>
-
-			</div>
-
-		</div>
-	</Suspense>
-</template>
-
-<script>
-
-import throttle from "lodash/throttle";
-import { parseBoolean } from "../utils/helpers.mjs";
-
-export default{
-
-	inject: [ 'socket', 'confirm', 'alert', 'socketEmit', 'toast' ],
-
-	props:{
-
-		model: String,
-
-		title: String,
-
-		searchable: {
-			type: undefined,
-			default: true
-		}
-
-	},
-
-	computed: {
-
-		preset(){
-			const presets = this.presets ?? []
-			return presets.length === 1 ? presets[0] : (this.presets ?? []).filter((_) => _.selected).pop() ?? { params:{} }
-		},
-
-		columns(){
-			return this.preset.params.columns ?? []
-		},
-
-		filterableColumns(){
-			return this.preset.params.columns.filter((_) => _.filterable)
-		},
-
-		sortableColumns(){
-			return this.preset.params.columns.filter((_) => _.sortable)
-		},
-
-		isSearchable(){
-			return parseBoolean(this.searchable)
-		}
-
-	},
-
-	data(){
-		return {
-			layout: {
-				presetOpen: false,
-				presetTab: 'column',
-				presetContextMenu: false,
-				presetFilterSelector: null,
-				presetSortSelector: null,
-			},
-			presets: [],
-			items: [],
-			hasNext: false,
-			modal: null
-		}
-	},
-
-	mounted() {
-		this.socket.onAny(this.onHooks)
-	},
-
-	unmounted() {
-		this.socket.offAny(this.onHooks)
-	},
-
-	methods:{
-
-		patch(){
-			this.socketEmit(`${this.model}.patch`, {}, (res) => {
-				this.$nextTick(() => {
-					this.presets = res.presets
-					this.items = res.items
-					this.hasNext = res.hasNext
-				})
-			})
-		},
-
-		load: throttle(function (){
-			this.socketEmit(`${this.model}.load`, {
-				preset: this.preset
-			}, (res) => {
-				this.items = res.items
-				this.hasNext = res.hasNext
-			})
-		}, 1000),
-
-		loadNext(){
-			this.socketEmit(`${this.model}.load`, {
-				preset: this.preset,
-				afterItem: this.items[this.items.length - 1]
-			}, (res) => {
-				this.items.push(...res.items)
-				this.hasNext = res.hasNext
-			})
-		},
-
-		savePreset: throttle(function() {
-			this.socketEmit('user.save-preset', {
-				preset:this.preset
-			}, undefined, (err) => {
-				console.error(err)
-			})
-		}, 1000),
-
-		clearSearch(){
-			this.preset.params.search = ''
-			this.load()
-		},
-
-		selectPreset(preset, edit){
-
-			this.presets.forEach((_) => {
-				_.selected = _ === preset
-			})
-			if(edit){
-				this.layout.presetOpen = true
-			}
-		},
-
-		copyPreset(preset){
-
-			this.presets.forEach((_) => _.selected = false)
-
-			const newPreset = Object.assign({}, preset)
-			newPreset.name += '(Copy)'
-			newPreset.selected = true
-			delete newPreset.id
-			this.presets.push(newPreset)
-			this.layout.presetOpen = true
-		},
-
-		removePreset(){
-
-			if(this.presets.length <= 1) return
-
-			this.socketEmit('user.remove-preset', this.preset.id, (res) => {
-				const index = this.presets.findIndex((_) => _ === this.preset)
-				console.log(index)
-				this.presets.splice(index, 1)
-				const nextIndex = index - 1 < 0 ? 0 : index - 1
-				this.presets[nextIndex].selected = true
-
-				console.log(this.presets)
-				console.log(nextIndex)
-			})
-		},
-
-		onHooks(module, event, items){
-
-			console.log('onHooks', module, event, items)
-
-			if(!Array.isArray(items)) return
-			items = items.filter((_) => _).map((_) => {
-				_['_highlight'] = 1
-				return _
-			})
-
-			if(module === this.model){
-
-				switch(event){
-
-					case 'create':
-						this.items.unshift(...items)
-						break
-
-					case 'update':
-						items.forEach((item) => {
-							const idx = this.items.findIndex((_) => _.id === item.id)
-							if(idx >= 0){
-								this.items[idx] = {
-									...this.items[idx],
-									...item
-								}
-							}
-						})
-						break
-
-					case 'remove':
-						items.forEach((item) => {
-							const idx = this.items.findIndex((_) => _.id === item.id)
-							if(idx >= 0){
-								this.items.splice(idx, 1)
-							}
-						})
-						break
-				}
-			}
-		},
-
-		addFilter(key){
-
-			const column = this.preset.params.columns.filter((_) => _.key === key).pop()
-
-			if(!this.preset.filters){
-				this.preset.filters = []
-			}
-
-			let filters = [{}]
-			switch(column.type){
-				case 'date':
-				case 'enum':
-					filters = [{ value:[] }]
-					break
-			}
-
-			this.preset.filters.push({
-				key: column.key,
-				label: column.label,
-				type: column.type,
-				typeParams: column.typeParams,
-				filters
-			})
-
-			this.layout.presetFilterSelector = null
-		},
-
-		addSort(key){
-
-			const column = this.preset.params.columns.filter((_) => _.key === key).pop()
-
-			if(!this.preset.sorts){
-				this.preset.sorts = []
-			}
-
-			this.preset.sorts.push({
-				key: column.key,
-				label: column.label
-			})
-
-			this.layout.presetSortSelector = null
-			this.load()
-		},
-
-		removeSort(sort){
-			this.preset.sorts.splice(this.preset.sorts.indexOf(sort), 1)
-			this.load()
-		},
-
-		removeFilter(filter){
-			this.preset.filters.splice(this.preset.filters.indexOf(filter), 1)
-			this.load()
-		},
-
-		reorderColumns(from, to){
-			this.preset.params.columns.splice(to, 0, this.preset.params.columns.splice(from, 1)[0])
-		},
-
-	},
-
-	watch: {
-
-		preset: {
-			deep: true,
-			handler(to, from){
-				if(from !== null){
-					this.savePreset()
-					this.load()
-				}
-			}
-		}
-
-	}
-}
-
-</script>
-
-<style module>
-
-.comp{
-	@apply flex-1 flex flex-row;
-}
-
-</style>