material 0.4.2 → 0.5.0

package/src/form/controller.js

@@ -0,0 +1,90 @@
+
+export default {
+
+  initController () {
+    // console.log('initController', this.field)
+
+    this.disableControls()
+
+    for (var field in this.field) {
+      if (this.field.hasOwnProperty(field)) {
+        this.bindControl(this.field[field])
+      }
+    }
+
+    for (var file in this.file) {
+      if (this.file.hasOwnProperty(file)) {
+        this.bindControl(this.file[file])
+      }
+    }
+  },
+
+  setMode (mode) {
+    // console.log('setMode', mode)
+    this.mode = mode
+
+    this.updateClassMode(mode)
+
+    this.emit('mode', mode)
+  },
+
+  updateClassMode (mode) {
+    var modes = ['read', 'create', 'update']
+
+    for (var i = 0; i < modes.length; i++) {
+      this.form.classList.remove(modes[i] + '-mode')
+    }
+
+    this.form.classList.add(mode + '-mode')
+  },
+
+  changeMode (mode) {
+    console.log('changeMode', mode)
+
+    if (mode === 'update' && this.enableControls) {
+      this.enableControls()
+    } else if (mode === 'update' && this.disableControls) {
+      this.disableControls()
+    } else if (mode === 'read' && this.disableControls) {
+      this.disableControls()
+    }
+  },
+
+  bindControl (control) {
+    // console.log('bindControl')
+    if (control && control.on) {
+      control.on('change', () => {
+        // console.log('change', control, this.mode)
+        if (this.mode === 'read') {
+          this.setMode('update')
+        }
+      })
+    }
+  },
+
+  enableControls () {
+    // console.log('enableControls')
+    var controls = this.options.controls || ['submit', 'cancel']
+
+    if (controls === null) return
+
+    for (var i = 0; i < controls.length; i++) {
+      if (this.ui[controls[i]] && this.ui[controls[i]].enable) {
+        this.ui[controls[i]].enable()
+      }
+    }
+  },
+
+  disableControls () {
+    // console.log('disableControls')
+    var controls = this.options.controls || ['submit', 'cancel']
+
+    if (controls === null) return
+
+    for (var i = 0; i < controls.length; i++) {
+      if (this.ui[controls[i]] && this.ui[controls[i]].disable) {
+        this.ui[controls[i]].disable()
+      }
+    }
+  }
+}

package/src/form/create.js

@@ -1,13 +1,19 @@
 
 export default {
 
-  create (info) {
-  	console.log('create', info, this.info)
-  	this.form.style.display = 'flex'
+  create () {
+    console.log('create', this.options.create.info)
 
+    this.clean()
+
+    var info = this.options.create.info || { name: 'New Item' }
+
+    console.log('info', info)
+
+    this.render(info, 'create')
     this.setMode('create')
-    this.render(this.options.create, 'create')
-    this.ui.cancel.enable()
-    // this.ui.submit.enable()
+    this.enableControls()
+
+    this.emit('new')
   }
 }

package/src/form/data.js

@@ -0,0 +1,82 @@
+import { byString } from '../module/object'
+
+export default {
+
+  initData () {
+    // console.log('submit', this.mode)
+
+    var data = new FormData()
+
+    if (this.mode !== 'create') {
+      this.appendSysinfo(data)
+    }
+
+    this.appendFields(data)
+    this.appendFiles(data)
+
+    return data
+  },
+
+  appendSysinfo (data) {
+    var sys = this.options.sysinfo
+    for (var i = 0; i < sys.length; i++) {
+      // console.log('sys', sys[i], this.info[sys[i]])
+      var name = sys[i]
+      if (sys[i] === '_id') name = 'id'
+
+      data.append(name, this.info[sys[i]])
+    }
+
+    return data
+  },
+
+  appendFields (data) {
+    for (var field in this.field) {
+      // console.log('field', field)
+      if (this.field.hasOwnProperty(field)) {
+        // console.log('check field', field)
+        var value = this.field[field].get()
+        if (value !== null) {
+          if (this.mode === 'update' && this.options.update && this.options.update.modifiedOnly) {
+            var modified = this.isModified(field, value)
+            if (modified) {
+              data.append(field, value)
+            }
+          } else {
+            data.append(field, value)
+          }
+        }
+      }
+    }
+
+    return data
+  },
+
+  appendFiles (data) {
+    // console.log('appendFiles', this.file)
+    for (var file in this.file) {
+      // console.log('this file', this.file, this.file[file].input)
+      // console.log('file', file, this.file[file])
+      if (this.file.hasOwnProperty(file) && this.file[file].input && this.file[file].input.value) {
+        data.append(file, this.file[file].input.files[0])
+      }
+    }
+
+    return data
+  },
+
+  isModified (field, value) {
+    var initial = byString(this.info, field)
+
+    if (typeof initial === 'number') {
+      value = Number(value)
+    }
+
+    if (initial !== value) {
+      // console.log('field', field, typeof value, value)
+      return true
+    } else {
+      return false
+    }
+  }
+}

package/src/form/delete.js

@@ -18,7 +18,7 @@ export default {
     // console.log('delete', this.info._id)
     if (!this.info._id) return
     this.setMode('delete')
-    fetch(this.options.route, {
+    fetch(this.options.action, {
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json'
@@ -32,6 +32,7 @@ export default {
       return resp.json()
     }).then((data) => {
       // console.log('data', data)
+      this.form.reset()
       this.emit('deleted', this.info._id)
     })
   }

package/src/form/fetch.js

@@ -0,0 +1,30 @@
+export default {
+  fetch (option) {
+    // console.log('fetch', this.options.route, option.method)
+    fetch(this.options.route, {
+      method: option.method,
+      body: option.formData
+    }).then(r => r.json()).then(info => {
+      if (info.error) {
+        // console.log('Error: ' + info.error)
+        if (this.error) {
+          this.error(info)
+        }
+      } else {
+        // console.log('updated', info, this.mode)
+        if (this.mode === 'create') {
+          this.emit('created', info)
+          this.mode = 'read'
+        } else {
+          this.info = info
+          this.emit('updated', info)
+          this.mode = 'read'
+        }
+
+        if (this.success) {
+          this.success(info)
+        }
+      }
+    })
+  }
+}

package/src/form/render.js

@@ -2,7 +2,7 @@ import dot from '../module/dot'
 
 export default {
   render (object, option) {
-    console.log('render', object)
+    // console.log('render', object)
 
     var info = dot(object)
 
@@ -18,26 +18,19 @@ export default {
 
     for (var field in this.field) {
       if (this.field.hasOwnProperty(field)) {
-        // console.log('field type', field)
-        if (
-        this.field[field] &&
-        this.field[field].set) {
-          if (info[field] !== undefined) {
-            this.field[field].set(info[field])
-          } else if (object[field] !== undefined) {
-            var value = this.objectValueByDotKey(object, field)
-            this.field[field].set(value)
-          }
+        // console.log('field type', field, this.field[field])
+        if (this.field[field] &&
+            this.field[field].set) {
+          var value = this.objectValueByDotKey(object, field)
+          // console.log('value', value)
+          this.field[field].set(value, true)
         }
       }
     }
 
-    this.ui.submit.disable()
-    this.ui.cancel.disable()
-
     this.emit('rendered')
 
-    // won't stay there
+    // won't stay here
     if (option === 'create' && this.field['name']) {
       this.focusNameOnRender(this.field['name'])
     }
@@ -47,18 +40,20 @@ export default {
     // console.log('objectValueByDotKey', object, dotkey)
     var keys = dotkey.split(/\./)
 
-    var value
-    var o = object
+    var value = Object.assign({}, object)
 
     for (var i = 0; i < keys.length; i++) {
-      value = o[keys[i]]
+      if (value !== undefined) {
+        value = value[keys[i]]
+      }
     }
 
     return value
   },
 
   focusNameOnRender (field) {
-    field.focus()
+    // console.log('focusNameOnRender', field)
+    field.input.focus()
     field.input.select()
   }
 }

package/src/form/set.js

@@ -1,13 +1,17 @@
 export default {
   set (id) {
-    // console.log('set', info._id)
+    // console.log('set', id)
     if (!id) return
 
+    if (this.clean) {
+      this.clean()
+    }
+
     this.emit('set', id)
 
     this.setMode('read')
     // this.render(info)
-    fetch(this.options.route + id, {
+    fetch(this.options.action + id, {
       headers: {
         'Accept': 'application/json'
       },
@@ -15,17 +19,28 @@ export default {
     }).then((resp) => {
       // console.log('resp', resp)
       return resp.json()
-    }).then((data) => {
-      // console.log('data', data)
-      this.form.style.display = 'flex'
-      this.info = data
-      this.render(data)
-
-      if (this.ui.delete) {
-        this.ui.delete.enable()
+    }).then((info) => {
+      if (this.options.debug) {
+        console.log('info', info)
       }
-
-      this.emit('fetched', id)
+      this.info = info
+      this.render(info)
+      this.emit('setted', info)
     })
+  },
+
+  setInfo (info) {
+    // console.log('set', id)
+    if (!info) return
+
+    // console.log('info', info)
+    this.info = info
+    this.render(info)
+    this.emit('setted', info)
+  },
+
+  updateInfo (info) {
+    Object.assign(this.info, info)
+    this.render(info)
   }
 }

package/src/form/submit.js

@@ -1,66 +1,41 @@
 export default {
 
   submit (ev) {
-    // console.log('submit', this.ui, this.file, this.info)
-    // ev.preventDefault()
-    if (!this.verify()) return
+    ev.preventDefault()
+    // console.log('submit', this.mode)
 
-    // console.log('submit')
-    this.ui.submit.disable()
-    this.ui.cancel.disable()
+    var data = this.initData()
 
-    var formData = new FormData()
+    // console.log('data', data)
 
-    if (this.info && this.info._id) {
-      formData.append('id', this.info._id)
-      formData.append('uuid', this.info.uuid)
+    if (this.update) {
+      this.update(data)
+    } else {
+      this.setMethod(data)
     }
 
-    // append field
-
-    for (var field in this.field) {
-      if (this.field.hasOwnProperty(field)) {
-        // console.log('append field', field, this.field[field])
-        formData.append(field, this.field[field].get())
-      }
-    }
-
-    // append files
-
-    for (var file in this.file) {
-      // console.log('this file', this.file, this.file[file].input)
-      // console.log('file', file, this.file[file])
-      if (this.file.hasOwnProperty(file) && this.file[file].input && this.file[file].input.value) {
-        // console.log('---- append file', this.file[file].input.value)
-        formData.append(file, this.file[file].input.files[0])
-      }
-    }
-
-    // console.log('formData', formData.keys())
+    return false
+  },
 
+  setMethod (formData) {
     var method = 'PUT'
     if (this.mode === 'create') {
       method = 'POST'
     }
 
-    fetch(this.options.route, {
-      method: method,
-      body: formData
-    }).then(r => r.json()).then(info => {
-      if (info.error) {
-        console.log('Error: ' + info.error)
-      } else {
-        // console.log('submit ok', info, this.mode)
-        this.ui.submit.setLabel('Apply')
+    if (this.fetch) {
+      // console.log('formData', formData.keys())
+      this.fetch({
+        method: method,
+        formData: formData
+      })
+    }
 
-        if (this.mode === 'create') {
-          this.emit('created', info)
-          this.mode = null
-        } else {
-          this.info = info
-          this.emit('updated', info)
-        }
-      }
-    })
+    if (this.action) {
+      this.action({
+        method: method,
+        formData: formData
+      })
+    }
   }
 }

package/src/form/update.js

@@ -0,0 +1,46 @@
+export default {
+  update (data, options) {
+    // console.log('update', data, options)
+    // console.log('mode', this.mode)
+    options = options || {}
+
+    // console.log('mode', this.mode)
+    var method = options.method ||
+        this.options[this.mode].method ||
+        'put'
+
+    var action = options.action ||
+        this.options[this.mode].action ||
+        this.options.action
+
+    if (this.beforeCreate) {
+      this.beforeCreate(data)
+    }
+
+    fetch(action, {
+      method: method,
+      body: data
+    }).then((resp) => {
+      // console.log('resp', resp)
+      return resp.json()
+    }).then(info => {
+      // console.log('update', info)
+      if (info.error) {
+        // console.log('Error: ' + info.error)
+        if (this.error) {
+          this.error(info)
+        }
+      } else {
+        // console.log('info', this.mode, info)
+        if (this.mode === 'create') {
+          this.emit('created', info)
+          this.setMode('read')
+        } else {
+          this.emit('updated', info)
+          this.setMode('read')
+        }
+        this.info = info
+      }
+    })
+  }
+}

package/src/layout.js

@@ -1,6 +1,6 @@
+
 import { is as isObject } from './module/object'
 import css from './module/css'
-import insert from './element/insert'
 
 /**
  *
@@ -13,8 +13,10 @@ class Layout {
    * @return {?}           [description]
    */
   constructor (schema, container) {
+    this.components = []
     this.component = this.create(schema, container)
-    // this.field = this.extractInfo(this.component)
+
+    // console.log('this', this)
 
     return this
   }
@@ -30,9 +32,6 @@ class Layout {
     level = level || 0
     level++
 
-    // console.log('level', level, schema)
-    // console.log('-------------')
-
     structure = structure || {}
     let component = null
 
@@ -43,39 +42,44 @@ class Layout {
 
       if (schema[i] instanceof Object &&
         typeof schema[i] === 'function') {
-        if (isObject(schema[i + 2])) {
+        if (isObject(schema[i + 1])) {
+          options = schema[i + 1]
+        } else if (isObject(schema[i + 2])) {
           options = schema[i + 2]
         }
 
         if (typeof schema[i + 1] === 'string') {
           name = schema[i + 1]
-          if (!schema[i].isElement) {
+          if (!schema[i].isElement && !schema[i].isComponent) {
             options.name = name
           }
         }
 
         component = new schema[i](options)
+        var element = component.root || component
 
-        if (name) {
-          structure[name] = component
+        if (level === 1) {
+          structure.root = element
         }
 
-        if (component) {
-          this.display(component.root, options)
-          this.style(component, options)
+        if (name) {
+          structure[name] = component
+          this.components.push([name, component])
         }
 
-        if (level === 1) {
-          var isClass = fn => /^\sclass/.test(schema[i].toString())
-
-          // console.log('isClass', isClass)
-          // console.log('root', component.root)
-          structure.root = component.root
-        }
+        // if (component) {
+        //   this.display(component.root, options)
+        //   this.style(component, options)
+        // }
 
         if (component && container) {
-          if (component.insert) component.insert(container)
-          else insert(component, container)
+          if (component.insert) {
+            component.insert(container)
+          } else {
+            var wrapper = container.root || container
+
+            wrapper.appendChild(element)
+          }
           component._container = container
         }
       } else if (Array.isArray(schema[i])) {
@@ -162,7 +166,7 @@ class Layout {
       }
     }
 
-    console.log('--- field', field)
+    // console.log('--- field', field)
 
     return field
   }

package/src/list/add.js

@@ -1,4 +1,38 @@
 
 export default {
+  add (info, context) {
+    // console.log('list add', info)
 
+    if (!this.dataStore) return
+    context = context || null
+
+    this.dataList = this.dataList || []
+
+    if (context === 'bottom') {
+      if (this.data) { this.data.push(info) }
+      if (this.dataList) { this.dataList.push(info[this.dataId]) }
+    } else {
+      if (this.data) {
+        this.data.unshift(info)
+      } else {
+        console.log('error no data')
+      }
+
+      if (this.dataList) { this.dataList.unshift(info[this.dataId]) }
+    }
+
+    this.dataStore[info[this.dataId]] = info
+    // console.log('data', this.data.length, this.data)
+
+    if (window.getComputedStyle(this.root, null).display === 'none') {
+      this.virtual.items = this.data
+    } else {
+      this.virtual.update(this.data)
+    }
+
+    // this.ui.body.scrollTo(0, this.ui.body.scrollTop + 1)
+    // this.ui.body.scrollTo(0, this.ui.body.scrollTop - 1)
+
+    return info
+  }
 }