From 77be448a76f9ba894892ef0281666ac78f8b6c49 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Thu, 30 Apr 2020 15:35:09 +0200
Subject: [PATCH] model binding to fields

---
 zero.Core/Extensions/StringExtensions.cs      |  5 +++
 zero.Core/Renderer/AbstractRenderer.cs        |  3 +-
 zero.Core/Renderer/Options/StateOptions.cs    | 22 +++++++++---
 zero.TestData/Lists/SocialContent.cs          | 10 ++++++
 zero.TestData/Lists/SocialContentRenderer.cs  | 22 +++++++++++-
 .../App/Components/Buttons/state-button.vue   |  2 +-
 zero.Web/App/Components/Forms/property.vue    |  1 +
 .../pickers/iconPicker/iconpicker.vue         |  6 +++-
 zero.Web/App/Services/localization.js         |  2 +-
 zero.Web/App/editor/editor-component.vue      | 24 +++++++++----
 zero.Web/App/editor/editor-field.vue          | 34 -------------------
 zero.Web/App/editor/editor.vue                | 20 ++++++++---
 zero.Web/App/editor/fields/iconPicker.vue     | 15 ++++++++
 zero.Web/App/editor/fields/media.vue          | 12 +++++++
 zero.Web/App/editor/fields/output.vue         |  9 +++++
 zero.Web/App/editor/fields/rte.vue            | 12 +++++++
 zero.Web/App/editor/fields/state.vue          | 19 +++++++++++
 zero.Web/App/editor/fields/text.vue           |  7 ++--
 zero.Web/App/editor/fields/textarea.vue       | 15 ++++++++
 zero.Web/App/editor/fields/toggle.vue         |  9 +++--
 20 files changed, 191 insertions(+), 58 deletions(-)
 delete mode 100644 zero.Web/App/editor/editor-field.vue
 create mode 100644 zero.Web/App/editor/fields/iconPicker.vue
 create mode 100644 zero.Web/App/editor/fields/media.vue
 create mode 100644 zero.Web/App/editor/fields/output.vue
 create mode 100644 zero.Web/App/editor/fields/rte.vue
 create mode 100644 zero.Web/App/editor/fields/state.vue
 create mode 100644 zero.Web/App/editor/fields/textarea.vue

diff --git a/zero.Core/Extensions/StringExtensions.cs b/zero.Core/Extensions/StringExtensions.cs
index c8af54dd..f3a7c784 100644
--- a/zero.Core/Extensions/StringExtensions.cs
+++ b/zero.Core/Extensions/StringExtensions.cs
@@ -78,5 +78,10 @@ namespace zero.Core.Extensions
     {
       return String.IsNullOrWhiteSpace(input);
     }
+
+    public static string ToCamelCase(this string input)
+    {
+      return Char.ToLowerInvariant(input[0]) + input.Substring(1);
+    }
   }
 }
diff --git a/zero.Core/Renderer/AbstractRenderer.cs b/zero.Core/Renderer/AbstractRenderer.cs
index 54a6138b..db2531f4 100644
--- a/zero.Core/Renderer/AbstractRenderer.cs
+++ b/zero.Core/Renderer/AbstractRenderer.cs
@@ -7,6 +7,7 @@ using System.Linq;
 using System.Linq.Expressions;
 using System.Reflection;
 using System.Threading.Tasks;
+using zero.Core.Extensions;
 
 namespace zero.Core.Renderer
 {
@@ -117,7 +118,7 @@ namespace zero.Core.Renderer
             memberExpression = (MemberExpression)mapExpression.Body;
           }
 
-          string fieldName = memberExpression.Member.Name;
+          string fieldName = memberExpression.Member.Name.ToCamelCase();
 
           RendererFieldBuilder.Data fieldData = builder.Build();
 
diff --git a/zero.Core/Renderer/Options/StateOptions.cs b/zero.Core/Renderer/Options/StateOptions.cs
index 9d92bbfd..eac8ba11 100644
--- a/zero.Core/Renderer/Options/StateOptions.cs
+++ b/zero.Core/Renderer/Options/StateOptions.cs
@@ -1,11 +1,25 @@
-using System;
-using System.Collections.Generic;
-using System.Text;
+using System.Collections.Generic;
 
 namespace zero.Core.Renderer
 {
   public class StateOptions : AbstractFieldOptions
   {
-    public void Add(string label, object value) { }
+    public class Item
+    {
+      public string Label { get; set; }
+
+      public object Value { get; set; }
+    }
+
+    public List<Item> Items { get; set; } = new List<Item>();
+
+    public void Add(string label, object value)
+    {
+      Items.Add(new Item()
+      {
+        Label = label,
+        Value = value
+      });
+    }
   }
 }
diff --git a/zero.TestData/Lists/SocialContent.cs b/zero.TestData/Lists/SocialContent.cs
index 124ea829..147923ae 100644
--- a/zero.TestData/Lists/SocialContent.cs
+++ b/zero.TestData/Lists/SocialContent.cs
@@ -11,5 +11,15 @@ namespace zero.TestData
     public string Facebook { get; set; }
 
     public string Youtube { get; set; }
+
+    public string xRte { get; set; }
+
+    public string xTextarea { get; set; }
+
+    public string xState { get; set; }
+
+    public string xMedia { get; set; }
+
+    public string xIconPicker { get; set; }
   }
 }
diff --git a/zero.TestData/Lists/SocialContentRenderer.cs b/zero.TestData/Lists/SocialContentRenderer.cs
index 45fcf2ce..777c74c8 100644
--- a/zero.TestData/Lists/SocialContentRenderer.cs
+++ b/zero.TestData/Lists/SocialContentRenderer.cs
@@ -12,7 +12,27 @@ namespace zero.TestData.Lists
 
       Validator = new SocialContentValidator();
 
-      Field(x => x.IsVisible).Toggle();    
+      Field(x => x.IsVisible).Toggle();
+
+      Field(x => x.xIconPicker).IconPicker();
+
+      Field(x => x.xTextarea).Textarea();
+
+      Field(x => x.xRte).Rte();
+
+      Field(x => x.xMedia).Media(opts =>
+      {
+        opts.Type = MediaOptionsType.Image;
+      });
+
+      Field(x => x.xTextarea).Output();
+
+      Field(x => x.xState).State(opts =>
+      {
+        opts.Add("Image", "image");
+        opts.Add("Video" , "video");
+        opts.Add("Other", "other");
+      });
 
       Tab("Networks", () => {
 
diff --git a/zero.Web/App/Components/Buttons/state-button.vue b/zero.Web/App/Components/Buttons/state-button.vue
index ab40471a..c0819f97 100644
--- a/zero.Web/App/Components/Buttons/state-button.vue
+++ b/zero.Web/App/Components/Buttons/state-button.vue
@@ -21,7 +21,7 @@
         default: []
       },
       value: {
-        type: String,
+        type: [ String, Number ],
         default: null
       }
     },
diff --git a/zero.Web/App/Components/Forms/property.vue b/zero.Web/App/Components/Forms/property.vue
index 7bacc6dd..43047437 100644
--- a/zero.Web/App/Components/Forms/property.vue
+++ b/zero.Web/App/Components/Forms/property.vue
@@ -109,5 +109,6 @@
   {
     flex: 1;
     max-width: 800px;
+    font-size: var(--font-size);
   }
 </style>
\ No newline at end of file
diff --git a/zero.Web/App/Components/pickers/iconPicker/iconpicker.vue b/zero.Web/App/Components/pickers/iconPicker/iconpicker.vue
index 0aa50184..804ed9a4 100644
--- a/zero.Web/App/Components/pickers/iconPicker/iconpicker.vue
+++ b/zero.Web/App/Components/pickers/iconPicker/iconpicker.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="ui-iconpicker" :class="{'is-disabled': disabled }">
     <input ref="input" type="hidden" :value="value" />
-    <ui-select-button :icon="value" label="@ui.icon" :description="buttonDescription" @click="pick" :disabled="disabled" />
+    <ui-select-button :icon="previewIcon" label="@ui.icon" :description="buttonDescription" @click="pick" :disabled="disabled" />
   </div>
 </template>
 
@@ -40,6 +40,10 @@
       buttonDescription()
       {
         return this.value ? this.value.split(' ')[0] : '@ui.icon_select';
+      },
+      previewIcon()
+      {
+        return this.value || 'fth-plus';
       }
     },
 
diff --git a/zero.Web/App/Services/localization.js b/zero.Web/App/Services/localization.js
index d7444a5b..ba2401bd 100644
--- a/zero.Web/App/Services/localization.js
+++ b/zero.Web/App/Services/localization.js
@@ -27,7 +27,7 @@ export default {
     // TODO only return key if in debug mode
     if (!value || typeof value !== 'string')
     {
-      return ''; // '[' + key + ']';
+      return '[' + key + ']';
     }
 
     return this.replaceTokens(value, params.tokens);
diff --git a/zero.Web/App/editor/editor-component.vue b/zero.Web/App/editor/editor-component.vue
index 51d6012c..894a336c 100644
--- a/zero.Web/App/editor/editor-component.vue
+++ b/zero.Web/App/editor/editor-component.vue
@@ -1,6 +1,6 @@
 <template>
-  <ui-property :field="params.field" :label="params.label" :description="params.description" :required="params.required" :class="params.options.classes">
-    <component v-if="fieldComponent" :is="fieldComponent" />
+  <ui-property :field="params.field" :label="params.label" :description="params.description" :required="params.required" :class="params.options.classes" :is-text="isText">
+    <component v-if="fieldComponent" :is="fieldComponent" :config="params" :value="value" @input="onChange" />
   </ui-property>
 </template>
 
@@ -9,9 +9,12 @@
   import Axios from 'axios';
 
   export default {
-    name: 'uiEditor',
+    name: 'uiEditorComponent',
 
     props: {
+      value: {
+        type: [ Object, Number, Array, String, Boolean, Date ]
+      },
       component: {
         type: Object,
         required: true
@@ -26,16 +29,23 @@
       params()
       {
         return this.component.params;
+      },
+      isText()
+      {
+        return this.component.params.view === 'output';
       }
     },
 
-    data: () => ({
-      
-    }),
-
     created()
     {
       this.fieldComponent = () => import(`zero/editor/fields/${this.component.params.view}`);
+    },
+
+    methods: {
+      onChange(value)
+      {
+        this.$emit('input', value);
+      }
     }
   }
 </script>
\ No newline at end of file
diff --git a/zero.Web/App/editor/editor-field.vue b/zero.Web/App/editor/editor-field.vue
deleted file mode 100644
index b49a2021..00000000
--- a/zero.Web/App/editor/editor-field.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <component :is="node" class="editor-component">
-    {{component.params.view}}
-  </component>
-</template>
-
-
-<script>
-  import Axios from 'axios';
-
-  export default {
-    name: 'uiEditor',
-
-    props: {
-      component: {
-        type: Object,
-        required: true
-      }
-    },
-
-    data: () => ({
-      method: null,
-      node: 'div',
-    }),
-
-    created()
-    {
-      //if (this.component.method === 'box')
-      //{
-      //  this.node = 'ui-tab';
-      //}
-    }
-  }
-</script>
\ No newline at end of file
diff --git a/zero.Web/App/editor/editor.vue b/zero.Web/App/editor/editor.vue
index eb835b75..3655605f 100644
--- a/zero.Web/App/editor/editor.vue
+++ b/zero.Web/App/editor/editor.vue
@@ -1,9 +1,9 @@
 <template>
   <component v-if="loaded" :is="rootNode" class="editor">
-    <ui-tab class="ui-box" v-if="hasTabs" :label="component.params.name" v-for="component in components">
-       <editor-component v-for="child in component.components" :component="child" />
+    <ui-tab v-if="hasTabs" class="ui-box" :label="component.params.name" v-for="component in components">
+      <editor-component v-for="child in component.components" v-model="model[child.params.field]" :component="child" />
     </ui-tab>
-    <editor-component v-if="!hasTabs" v-for="component in components" :component="component" />
+    <editor-component v-if="!hasTabs" v-for="component in components" v-model="model[component.params.field]" :component="component" />
   </component>
 </template>
 
@@ -20,6 +20,7 @@
     data: () => ({
       loaded: false,
       hasTabs: false,
+      model: {},
       components: []
     }),
 
@@ -30,6 +31,17 @@
       }
     },
 
+    watch: {
+      model: {
+        deep: true,
+        handler: function()
+        {
+          console.info('change:editor')
+          console.table(JSON.parse(JSON.stringify(this.model)));
+        }
+      }
+    },  
+
     created()
     {
       Axios.get('test/renderConfig').then(res =>
@@ -37,7 +49,7 @@
         this.components = res.data.components;
         this.hasTabs = this.components.length > 0 && this.components[0].method === 'tab';
         this.loaded = true;
-        console.dir(JSON.parse(JSON.stringify(res.data.components)));
+        console.info(JSON.parse(JSON.stringify(this.components)));
       });
     }
   }
diff --git a/zero.Web/App/editor/fields/iconPicker.vue b/zero.Web/App/editor/fields/iconPicker.vue
new file mode 100644
index 00000000..aa86d5dc
--- /dev/null
+++ b/zero.Web/App/editor/fields/iconPicker.vue
@@ -0,0 +1,15 @@
+<template>
+  <ui-iconpicker :value="value" @input="$emit('input', $event)" />
+</template>
+
+
+<script>
+  export default {
+    props: {
+      value: {
+        type: String
+      },
+      config: Object
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Web/App/editor/fields/media.vue b/zero.Web/App/editor/fields/media.vue
new file mode 100644
index 00000000..8f0d9731
--- /dev/null
+++ b/zero.Web/App/editor/fields/media.vue
@@ -0,0 +1,12 @@
+<template>
+   <input type="text" class="ui-input" v-localize:placeholder="" />
+</template>
+
+
+<script>
+  export default {
+    props: {
+
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Web/App/editor/fields/output.vue b/zero.Web/App/editor/fields/output.vue
new file mode 100644
index 00000000..db91be80
--- /dev/null
+++ b/zero.Web/App/editor/fields/output.vue
@@ -0,0 +1,9 @@
+<template>
+  <span class="ui-property-output">{{ value }}</span>
+</template>
+
+<script>
+  export default {
+    props: [ 'value' ]
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Web/App/editor/fields/rte.vue b/zero.Web/App/editor/fields/rte.vue
new file mode 100644
index 00000000..8f0d9731
--- /dev/null
+++ b/zero.Web/App/editor/fields/rte.vue
@@ -0,0 +1,12 @@
+<template>
+   <input type="text" class="ui-input" v-localize:placeholder="" />
+</template>
+
+
+<script>
+  export default {
+    props: {
+
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Web/App/editor/fields/state.vue b/zero.Web/App/editor/fields/state.vue
new file mode 100644
index 00000000..f34c6de1
--- /dev/null
+++ b/zero.Web/App/editor/fields/state.vue
@@ -0,0 +1,19 @@
+<template>
+  <ui-state-button :items="config.options.items" :value="value" @input="$emit('input', $event)" />
+</template>
+
+
+<script>
+  export default {
+    props: {
+      value: {
+        type: [ String, Number ]
+      },
+      config: Object
+    },
+
+    data: () => ({
+      items: []
+    })
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Web/App/editor/fields/text.vue b/zero.Web/App/editor/fields/text.vue
index 8f0d9731..f0f56118 100644
--- a/zero.Web/App/editor/fields/text.vue
+++ b/zero.Web/App/editor/fields/text.vue
@@ -1,12 +1,15 @@
 <template>
-   <input type="text" class="ui-input" v-localize:placeholder="" />
+  <input :value="value" @input="$emit('input', $event.target.value)" type="text" class="ui-input" v-localize:placeholder="" />
 </template>
 
 
 <script>
   export default {
     props: {
-
+      value: {
+        type: String,
+        default: null
+      }
     }
   }
 </script>
\ No newline at end of file
diff --git a/zero.Web/App/editor/fields/textarea.vue b/zero.Web/App/editor/fields/textarea.vue
new file mode 100644
index 00000000..e0b44c83
--- /dev/null
+++ b/zero.Web/App/editor/fields/textarea.vue
@@ -0,0 +1,15 @@
+<template>
+  <textarea class="ui-textarea" :value="value" @input="$emit('input', $event.target.value)" rows="3"></textarea>
+</template>
+
+
+<script>
+  export default {
+    props: {
+      value: {
+        type: String
+      },
+      config: Object
+    },
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Web/App/editor/fields/toggle.vue b/zero.Web/App/editor/fields/toggle.vue
index 65e56540..c36e65f8 100644
--- a/zero.Web/App/editor/fields/toggle.vue
+++ b/zero.Web/App/editor/fields/toggle.vue
@@ -1,10 +1,15 @@
 <template>
-  <ui-toggle />
+  <ui-toggle :value="value" @input="$emit('input', $event)" />
 </template>
 
 
 <script>
   export default {
-    
+    props: {
+      value: {
+        type: Boolean,
+        default: false
+      }
+    }
   }
 </script>
\ No newline at end of file