♻️ : extract stack-vars vue component

gaia-app · Jul 5, 2019 · 6efd602 · 6efd602
1 parent 2a2d419
commit 6efd602
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/src/main/resources/templates/stack.html b/src/main/resources/templates/stack.html
@@ -39,6 +39,8 @@
 
 <script src="/webjars/vue/2.5.16/vue.js"></script>
 
+<div th:replace="vue_templates/stack-vars"></div>
+
 <template id="stack-controls">
     <div class="row column_title">
         <div class="full">
@@ -120,16 +122,7 @@ <h2>Module variables values</h2>
                         <small>This is the configuration of your module's variables !</small>
                     </div>
                     <div class="block_content">
-                        <div class="form-row align-items-end" v-for="(modVar,modVarIdx) in editableVars" v-if="editableVars.length > 0">
-                            <div class="form-group col">
-                                <label for="var-name">{{modVar.name}}: </label>
-                                <input type="text" class="form-control" id="var-name" v-model="stack.variableValues[modVar.name]" @change="recomputeState">
-                                <small id="emailHelp" class="form-text text-muted">{{modVar.description}}</small>
-                            </div>
-                        </div>
-                        <div v-if="editableVars.length === 0">
-                            <p>No editable variable defined for this module.</p>
-                        </div>
+                        <stack-vars v-bind:module="stack.module" v-bind:stack="stack"></stack-vars>
                     </div>
                 </div>
             </div>

diff --git a/src/main/resources/templates/vue_templates/stack-vars.vue b/src/main/resources/templates/vue_templates/stack-vars.vue
@@ -0,0 +1,26 @@
+<template id="stack-vars">
+    <div>
+        <div class="form-row align-items-end" v-for="(modVar,modVarIdx) in editableVars" v-if="editableVars.length > 0">
+            <div class="form-group col">
+                <label for="var-name">{{modVar.name}}: </label>
+                <input type="text" class="form-control" id="var-name" v-model="stack.variableValues[modVar.name]">
+                <small id="emailHelp" class="form-text text-muted">{{modVar.description}}</small>
+            </div>
+        </div>
+        <div v-if="editableVars.length === 0">
+            <p>No editable variable defined for this module.</p>
+        </div>
+    </div>
+</template>
+
+<script>
+Vue.component('stack-vars', {
+    template: "#stack-vars",
+    props: ["stack", "module"],
+    computed: {
+        editableVars: function() {
+            return this.module.variables.filter(variable => variable.editable);
+        }
+    }
+});
+</script>