From 670edc74f2ec5c8c52425ad7207865ff21cfb4a9 Mon Sep 17 00:00:00 2001
From: James Isbell <james@isbell.net>
Date: Wed, 16 Mar 2016 12:13:52 +0000
Subject: [PATCH] working

---
 viewmodel-demo.html | 110 ++++++++++++++++++--------------
 viewmodel-demo.js   | 151 +++++++++++++++++++-------------------------
 2 files changed, 126 insertions(+), 135 deletions(-)
diff --git a/viewmodel-demo.html b/viewmodel-demo.html
index e421824..aaf15b5 100644
--- a/viewmodel-demo.html
+++ b/viewmodel-demo.html
@@ -3,25 +3,76 @@
 </head>
 
 <body>
-  {{> demoVM }}
+    {{>myForm shared="pages"}}
 </body>
 
-<template name="demoVM">
-    <input {{b "value: tester('layout~3~item' this)"}} type="text" style="width: 100%;box-sizing: border-box;">
+<template name="myForm">
+    {{>textInput shared="pages" ss="title" val=(b "value: formData.title") style="width:40%;background:red;float:left"}}
+    {{>textInput shared="pages" ss="url" val=(b "value: formData.url") style="width:40%;background:red;float:left"}}
+    {{>checkInput shared="pages" ss="active" val=(b "check: formData.active") style="width:20%;background:red;float:left"}}
+    {{>textareaInput shared="pages" ss="body" val=(b "value: formData.body") style="background:red;"}}
+    {{> dynamicCompsForm shared="pages"}}
     <button {{b "click: submit"}}>submit</button>
-    <!-- {{#each collection}} -->
-        <!-- {{>Template.dynamic template=(getArrayVal 'layout~$~item' @index) }} -->
-    <!-- {{/each}} -->
-    {{#each staticFormData.layout}}
+</template>
+
+<template name="dynamicCompsForm">
+    {{#each formData.layout}}
         <hr />
-        <input {{b "value: this.item"}} type="text" name="name">
+        <b>{{this.item}}</b>
+        <button type="button" {{b "click: delete(this._id)"}}>Del</button>
         {{>Template.dynamic template=this.item data=this}}
         <hr />
     {{/each}}
-    <button type="button" {{b "click: add(hero)"}}>Add Hero</button>
-    <button type="button" {{b "click: add(billboard)"}}>Add Billboard</button>
+    <div class="">
+        <button type="button" {{b "click: add('hero')"}}>Add Hero</button>
+        <button type="button" {{b "click: add('billboard')"}}>Add Billboard</button>
+    </div>
+</template>
+
+<template name="textInput">
+    <div class="{{class}}" style="{{style}}">
+        <div style="padding:5px">
+            <label>{{ssLabel ss}}</label>
+            <!-- <input {{b "value: ssDefaultValue(val(field))"}} type="text" style="width: 100%;box-sizing: border-box;"> -->
+            <input {{val}} type="text" style="width: 100%;box-sizing: border-box;">
+        </div>
+    </div>
+</template>
+
+<template name="checkInput">
+    <div class="{{class}}" style="{{style}}">
+        <div style="padding:5px">
+            <label for="check-{{ss}}">{{ssLabel ss}}</label><br />
+            <input {{val}} {{name}} type="checkbox" id="check-{{ss}}" />
+        </div>
+    </div>
 </template>
 
+<template name="textareaInput">
+    <div class="{{class}}" style="{{style}}">
+        <div style="padding:5px">
+            <label>{{ssLabel ss}}</label>
+            <textarea {{val}} style="width: 100%;box-sizing: border-box;" cols="40"></textarea>
+        </div>
+    </div>
+</template>
+
+<template name="hero">
+    <div>
+        {{>textInput shared="pages" ss="layout.$.hero.title" val=(b "value: this.hero.title") style=""}}
+        {{>textInput shared="pages" ss="layout.$.hero.alignment" val=(b "value: this.hero.alignment") style=""}}
+    </div>
+</template>
+
+<template name="billboard">
+    <div>
+        {{>textInput shared="pages" ss="layout.$.billboard.title" val=(b "value: this.billboard.title") style=""}}
+        {{>textInput shared="pages" ss="layout.$.billboard.background" val=(b "value: this.billboard.background") style=""}}
+    </div>
+</template>
+
+
+
 
 <!-- <template name="demoVM">
     <input {{b "value: val()"}} type="text" style="width: 100%;box-sizing: border-box;"> -->
@@ -39,10 +90,6 @@
 
 
 
-
-
-
-
 <template name="basicForm">
     <form id="hellojames">
         <div id="name">
@@ -52,25 +99,6 @@
     </form>
 </template>
 
-
-<template name="textInput">
-    <div class="{{class}}" style="{{style}}">
-        <div style="padding:5px">
-            <label>{{ssLabel}}</label>
-            <!-- <input {{b "value: ssDefaultValue(val(field))"}} type="text" style="width: 100%;box-sizing: border-box;"> -->
-            <input {{b "value: ssDefaultValue(val(field))"}} type="text" style="width: 100%;box-sizing: border-box;">
-        </div>
-    </div>
-</template>
-<template name="textareaInput">
-    <div class="{{class}}" style="{{style}}">
-        <div style="padding:5px">
-            <label>{{ssLabel}}</label>
-            <textarea {{b "value: ssDefaultValue(val(field))"}} style="width: 100%;box-sizing: border-box;" cols="40"></textarea>
-        </div>
-    </div>
-</template>
-
 <template name="dynamicForm">
     <button {{b "click: add('hero','layout.$.hero')"}}>Add Hero</button>
     <button {{b "click: add('billboard','layout.$.billboard')"}}>Add Billboard</button>
@@ -92,19 +120,3 @@
         <hr />
     </li>
 </template>
-
-<template name="hero">
-    <div>
-        <div>hero Item:</div>
-        <input {{b "value: this.hero.title"}} type="text">
-        <input {{b "value: this.hero.alignment"}} type="text">
-    </div>
-</template>
-
-<template name="billboard">
-    <div>
-        <div>billboard Item:</div>
-        <input {{b "value: this.billboard.title"}} type="text">
-        <input {{b "value: this.billboard.background"}} type="text">
-    </div>
-</template>
diff --git a/viewmodel-demo.js b/viewmodel-demo.js
index f5a0389..134ca9e 100644
--- a/viewmodel-demo.js
+++ b/viewmodel-demo.js
@@ -45,7 +45,6 @@ JSON.flatten = function(data) {
     return result;
 };
 
-
 function createTemplateObjFromSchema(schema, pick){
     var ss;
     if(pick){
@@ -79,17 +78,13 @@ var hero = new SimpleSchema({
 var billboard = new SimpleSchema({
     title: { type: String, label:"Title"},
     background: { type: String, label:"Background"},
-    items: {type:[Object],label:"Items Group"},
-    'items.$.name': {type:String,label:"Item name"},
-    'items.$.number': {type:Number,label:"Items number"},
-    items2: {type:[String],label:"Items Group"},
-    'items2.$': {type:String,label:"Item String"},
 });
 
 TestSchema = new SimpleSchema({
     title: {type: String, label:"Title", defaultValue:"defaulting"},
+    url:{type: String, label:"url", defaultValue:"undefined"},
     body: {type: String, label:"Body", defaultValue:"defaulting"},
-    'test.test2': {type: String, label:"test2", defaultValue:"defaulting"},
+    active: {type: Boolean, label:"Active"},
     layout: {type:[Object],label:"layout"},
     'layout.$.item':{type:String, label: "Comp Name",defaultValue:"hello", allowedValues: ["hero","billboard"]},
     'layout.$.hero':{type:hero, label: "Hero"},
@@ -102,42 +97,30 @@ if (Meteor.isClient) {
         console.log("log: ", argument);
     });
 
-    // localColl = new Mongo.Collection(null);
-    // localColl.insert({item:"hero", hero:{title:"hello moon", alignment: "left"}});
-    // localColl.insert({item:"billboard", billboard:{title:"What's your favorite bar?", background:"Twix"}});
-    // localColl.insert({item:"hero", hero:{title:"hello sun", alignment: "top"}});
-
     Pages = new Mongo.Collection(null);
     Pages.insert({
-        _id:"khds89g8",
         title: "hello james",
         body: "body text here",
         test:{
             test2: "yo yo"
         },
-        layout:[
-            {_id:"gfds8089", item:"hero", hero:{title:"hello moon", alignment: "left"}},
-            {_id:"jhds8908", item:"billboard", billboard:{title:"What's your favorite bar?", background:"Twix"}},
-            {_id:"h8g9f090", item:"hero", hero:{title:"hello sun", alignment: "top"}}
-        ]
+        // layout:[
+            // {_id:"gfds8089", item:"hero", hero:{title:"hello moon", alignment: "left"}},
+            // {_id:"jhds8908", item:"billboard", billboard:{title:"What's your favorite bar?", background:"Twix"}},
+            // {_id:"h8g9f090", item:"hero", hero:{title:"hello sun", alignment: "top"}}
+        // ]
     });
 
-    var pagesShare;
-    pagesShare = JSON.flatten(Pages.findOne({}));
-    pagesShare.staticFormData = Pages.findOne({});
-    pagesShare.collection = Pages;
-    pagesShare.schema = TestSchema;
 
     ViewModel.share({
-        pages: pagesShare,
+        pages: {
+            formData: Pages.findOne({}),
+            collection: Pages,
+            schema: TestSchema
+        },
         utils:{
-            val(field){
-                console.log(field, this);
-                return this[field]();
-            },
-            ssLabel: function(){
-                var field = this.templateInstance.data.field;
-                return field, this.schema()._schema[field].label;
+            ssLabel: function(field){
+                return this.schema()._schema[field].label;
             },
             ssDefaultValue: function(liveValue){
                 if(liveValue){
@@ -146,83 +129,68 @@ if (Meteor.isClient) {
                     var field = this.templateInstance.data.field;
                     return this.schema()._schema[field].defaultValue || "";
                 }
-            },
-            updateStaticFormData(data){
-                var self = this;
-                clearTimeout(timer);
-                timer = setTimeout(function () {
-                    console.log(self);
-                    // self.load(self.staticFormData(JSON.unflatten(data)) );
-                }, 400);
             }
         }
     });
 
-    var timer;
-    Template.demoVM.viewmodel({
-        tester(val, val2){
-            console.log(val,val2);
-            // var d = Pages.findOne({});
-            // Pages.update({_id:"khds89g8"}, d);
-            // var flat = {};
-            // flat[val] = "hello world";
-            //
-            // var d = this.staticFormData.value;
-
-            // d.layout.push({test:"hello"});
-            // this.staticFormData(d);
-            // console.log(this.staticFormData.value);
-
-            //
-            // this.staticFormData(Pages.findOne());
-            // console.log(Pages.findOne({}));
-            // var test = _.extendOwn(d,newData);
-            // console.log(this.staticFormData());
-        },
+    Template.myForm.viewmodel({
         onCreated: function() {
-            this.load({share:['pages', 'utils']});
+            this.load({share:[this.templateInstance.data.shared, 'utils']});
+            var localColl = new Mongo.Collection(null);
+            var data = this.collection().findOne();
+            localColl.insert(data);
+            this.collection(localColl);
+            this.formData(data);
         },
         submit(){
-            console.log(this.data().staticFormData);
+            console.log(this.data().formData);
             event.preventDefault();
+        }
+    });
+
+    Template.dynamicCompsForm.viewmodel({
+        onCreated: function() {
+            this.load({share:[this.templateInstance.data.shared, 'utils']});
         },
-        layout(){
-            return Pages.findOne().layout;
-        },
-        add(){
-            Pages.update({_id:"khds89g8"}, this.staticFormData.value); // update current values
-            Pages.update({_id:"khds89g8"},{$push:{layout:{item:"hero"}}});
-            this.staticFormData(Pages.findOne());
-            console.log(this.staticFormData.value);
+        add(comp, schemaName){
+            // var objTml = createTemplateObjFromSchema(this.schema(), 'layout.$.hero').layout[0][comp];
+            this.collection().update({_id: this.formData()._id},this.formData.value); // update current values
+            this.collection().update({_id: this.formData()._id},{$push:{layout:{_id: Math.random(),item:comp,[comp]:{}}}});
+            this.formData(this.collection().findOne());
+            console.log(this.formData.value);
         },
-        delete(id){
-            Pages.update({_id:"khds89g8"},this.staticFormData.value); // update current values
-            Pages.update({_id:"khds89g8"},{$push:{layout:{test:"test"}}});
-            var test = Pages.findOne();
-            this.staticFormData(test);
-            console.log(this.staticFormData.value);
+        delete(val){
+            this.collection().update({_id: this.formData()._id},this.formData.value); // update current values
+            this.collection().update({_id: this.formData()._id}, {$pull: {
+                'layout': {'_id': val}
+            }});
+            this.formData(this.collection().findOne());
+            console.log(this.formData.value);
         }
     });
 
+    Template.hero.viewmodel({
+        onCreated() {
+            this.load({share:['pages', 'utils']});
+        },
+    });
 
+    Template.billboard.viewmodel({
+        onCreated() {
+            this.load({share:['pages', 'utils']});
+        },
+    });
 
-    Template.basicForm.viewmodel({
+    Template.textInput.viewmodel({
         onCreated: function() {
             this.load({share:[this.templateInstance.data.shared, 'utils']});
-        },
-        submit(){
-          console.log(this.data(),this.formData().findOne({}));
-          event.preventDefault();
         }
     });
 
-    Template.textInput.viewmodel({
+    Template.checkInput.viewmodel({
         onCreated: function() {
             this.load({share:[this.templateInstance.data.shared, 'utils']});
-        },
-        // onRendered(){
-        //     console.log(this);
-        // }
+        }
     });
 
     Template.textareaInput.viewmodel({
@@ -231,6 +199,17 @@ if (Meteor.isClient) {
         }
     });
 
+    Template.basicForm.viewmodel({
+        onCreated: function() {
+            this.load({share:[this.templateInstance.data.shared, 'utils']});
+        },
+        submit(){
+          console.log(this.data(),this.formData().findOne({}));
+          event.preventDefault();
+        }
+    });
+
+
     //TODO on create of this template create a localCollection and add only the needed field into it
         // this.formData().find({},{fields:{layout:1}})
 
