Delegate data around the app

src/nginxconfig/templates/app.vue

@@ -29,15 +29,15 @@ limitations under the License.
         <div class="main container">
             <div class="tabs">
                 <ul>
-                    <li v-for="index in domains" :class="index === active ? 'is-active' : undefined">
-                        <a @click="active = index">{{ domainTitle(index) }}</a>
+                    <li v-for="(data, index) in domains" :class="index === active ? 'is-active' : undefined">
+                        <a @click="active = index">{{ data.python.test.value }}{{ changes(index) }}</a>
                     </li>
                 </ul>
             </div>
 
-            <template v-for="index in domains">
-                <Domain ref="domains"
-                        :key="index"
+            <template v-for="(data, index) in domains">
+                <Domain :key="index"
+                        :data="data"
                         :style="{ display: index === active ? 'block' : 'none' }"
                 ></Domain>
             </template>
@@ -63,16 +63,21 @@ limitations under the License.
         data() {
             return {
                 i18n,
-                domains: 1,
-                active: 1,
+                domains: [
+                    Domain.delegated,
+                ],
+                active: 0,
             };
         },
         methods: {
-            domainTitle(index) {
-                if (this.$refs.domains) {
-                    const data = this.$refs.domains[index-1].export();
-                    return data.Server.domain;
-                }
+            changes(index) {
+                const data = this.$data.domains[index];
+                const changes = Object.values(data).reduce((prev, current) => {
+                    prev += Object.values(current).filter(d => d.default !== d.computed).length;
+                    return prev;
+                }, 0);
+                if (changes) return ` (${changes.toLocaleString()})`;
+                return '';
             },
         },
     };

src/nginxconfig/templates/domain.vue

@@ -18,62 +18,48 @@ limitations under the License.
     <div>
         <div class="tabs">
             <ul>
-                <li v-for="(_, key) in tabs" :class="key === tab ? 'is-active' : undefined">
-                    <a @click="tab = key">{{ key }}{{ sectionChanges(key) }}</a>
+                <li v-for="tab in tabs" :class="active === tab.key ? 'is-active' : undefined">
+                    <a @click="active = tab.key">{{ tab.display }}{{ changes(tab.key) }}</a>
                 </li>
             </ul>
         </div>
-        <component :is="component"
-                   v-for="(component, key) in tabs"
-                   :ref="key"
-                   :key="key"
-                   :style="{ display: key === tab ? 'block' : 'none' }"
+
+        <component :is="tab"
+                   v-for="tab in tabs"
+                   :key="tab.key"
+                   :data="$props.data[tab.key]"
+                   :style="{ display: active === tab.key ? 'block' : 'none' }"
         ></component>
-        <a class="button" @click="log">Log export data to console</a>
     </div>
 </template>
 
 <script>
-    import * as Sections from './domain_sections';
+    import { Python } from './domain_sections';
+
+    const tabs = [ Python ];
+    const delegated = tabs.reduce((prev, tab) => {
+        prev[tab.key] = tab.delegated;
+        return prev;
+    }, {});
 
     export default {
         name: 'Domain',
+        delegated,          // Data the parent will present here
+        props: {
+            data: Object,   // Data delegated back to us from parent
+        },
         data() {
             return {
-                tab: Object.keys(Sections)[0],
-                tabs: Sections,
+                active: tabs[0].key,
+                tabs,
             };
         },
         methods: {
-            sectionChanges(key) {
-                if (key in this.$refs && this.$refs[key] && this.$refs[key][0].changes) {
-                    const changes = this.$refs[key][0].changes();
-                    if (changes) {
-                        return ` (${changes.toLocaleString()})`;
-                    }
-                }
+            changes(tab) {
+                const changes = Object.values(this.$props.data[tab]).filter(d => d.default !== d.computed).length;
+                if (changes) return ` (${changes.toLocaleString()})`;
                 return '';
             },
-            changes() {
-                return Object.keys(Sections).reduce((prev, key) => {
-                    if (key in this.$refs && this.$refs[key] && this.$refs[key][0].changes) {
-                        prev += this.$refs[key][0].changes();
-                    }
-                    return prev;
-                }, 0);
-            },
-            exports () {
-                return Object.keys(Sections).reduce((prev, key) => {
-                    prev[key] = {};
-                    if (key in this.$refs && this.$refs[key] && this.$refs[key][0].exports) {
-                        prev[key] = this.$refs[key][0].exports();
-                    }
-                    return prev;
-                }, {});
-            },
-            log () {
-                console.log(this.exports());
-            },
         },
     };
 </script>

src/nginxconfig/templates/domain_sections/python.vue

@@ -1,46 +1,43 @@
 <template>
-    <div>Hello world python</div>
+    <div>
+        Hello world python
+        <input v-model="test" type="text" />
+    </div>
 </template>
 
 <script>
     import i18n from '../../i18n';
+    import delegatedFromDefaults from '../../util/delegated_from_defaults';
+    import computedFromDefaults from '../../util/computed_from_defaults';
 
     const defaults = {
-        python: false,
-        djangoRules: false,
+        python: {
+            default: false,
+            enabled: true,
+        },
+        djangoRules: {
+            default: false,
+            enabled: true,
+        },
+        test: {
+            default: '',
+            enabled: true,
+        },
     };
 
     export default {
-        name: 'DomainPython',
+        name: 'DomainPython',                       // Component name
+        display: 'Python',                          // Display name for tab
+        key: 'python',                              // Key for data in parent
+        delegated: delegatedFromDefaults(defaults), // Data the parent will present here
         props: {
-            data: Object,
+            data: Object,                           // Data delegated back to us from parent
         },
         data () {
             return {
                 i18n,
-                defaults,
-                ...defaults,
             };
         },
-        created () {
-            if (this.$props.data) {
-                for (const key in this.$props.data) {
-                    if (key in defaults) {
-                        this.$data[key] = this.$props.data[key];
-                    }
-                }
-            }
-        },
-        methods: {
-            exports() {
-                return Object.keys(defaults).reduce((prev, key) => {
-                    prev[key] = this.$data[key];
-                    return prev;
-                }, {});
-            },
-        },
-        changes() {
-            return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
-        },
+        computed: computedFromDefaults(defaults),   // Getters & setters for the delegated data
     };
 </script>

src/nginxconfig/util/computed_from_defaults.js

@@ -0,0 +1,14 @@
+export default (defaults) => {
+    return Object.keys(defaults).reduce((prev, key) => {
+        prev[key] = {
+            get() {
+                return this.$props.data[key].value;
+            },
+            set (value) {
+                this.$props.data[key].value = value;
+                this.$props.data[key].computed = value;
+            },
+        };
+        return prev;
+    }, {});
+};

src/nginxconfig/util/delegated_from_defaults.js

@@ -0,0 +1,10 @@
+export default (defaults) => {
+    return Object.keys(defaults).reduce((prev, key) => {
+        prev[key] = {
+            value: defaults[key].default,
+            computed: defaults[key].default,
+            ...defaults[key],
+        };
+        return prev;
+    }, {});
+};