Progress on configs functionality, not yet copying right from editor

_includes/vue-rule-script.html

@@ -84,18 +84,35 @@
                             <textarea v-model="editor.module.summary"></textarea>
                         </label>
 
-                        <label v-if="editor.module.config != 'b'"
-                               class="label">
-                          <span>Config: {{ editor.module.config }}</span>
+                        <label class="label configs">
                           <table>
-                            <tr v-for="(key, value) in editor.module.config">
-                              <td>{{ key }}</td>
-                              <td><input v-model="{{ value }}" /></td>
+                            <tr v-for="(value, key) in editor.module.config">
+                              <td>[[key]]</td>
+                              <td><input
+                                    v-model="editor.module.config[key]" /></td>
+                              <td><span class="config-button"
+                                        @click="removeConfig([[key]])">
+                                  <img :src="icons.minus" alt="Remove">
+                                </span>
+                              </td>
+                            </tr>
+                            <tr >
+                              <td><input id="newConfigKey"
+                                         value="Configuration" /></td>
+                              <td><input id="newConfigValue"
+                                         value="Value" /></td>
+                              <td><span class="config-button"
+                                        @click="addConfig">
+                                  <img :src="icons.plus" alt="Add">
+                                </span>
+                              </td>
                             </tr>
                           </table>
                         </label>
                         
-                        <!-- <div class="label-group">
+                        <!-- Working on custom module library
+
+                            <div class="label-group">
                             <label class="label">
                                 <span>Module ID:</span>
                                 <input type="text" v-model="editor.module.moduleID">
@@ -123,8 +140,8 @@
                 </div>
                 <div class="label-group is-mobile">
                     <div class="module" @click="newCustomModule">
-                        Create Custom Module
-                        <span class="plus"><img :src="icons.plus" alt="Add"></span>
+                      <span class="plus"><img :src="icons.plus" alt="Add"></span>
+                      Create Custom Module
                     </div>
                     <div class="module-editor__empty">
                         <small>Or click a module to start editing it.</small>
@@ -255,6 +272,14 @@
                 summary: "{{ module.summary }}",
                 type: "{{ module.type }}",
                 content: `{{ module.content | markdownify }}`,
+                {% if module.config %}
+                config: {
+                      {% for config in module.config %}
+                      "{{ config[0] }}": "{{ config[1] }}"
+                      {% unless forloop.last %}, {% endunless %}
+                      {% endfor %}
+                },
+                {% endif %}
                 readonly: true,
                 modules: []
             } {% unless forloop.last %}, {% endunless %}

_sass/communityrule.scss

@@ -103,6 +103,14 @@
     cursor: pointer;
 }
 
+.configs {
+    padding: 0px 0 20px 0;
+}
+
+.config-button {
+    cursor: pointer;
+}
+
 /* MODULE PAGES */
 
 #module-summary {

assets/js/vue.rules.js

@@ -23,7 +23,7 @@ const app = Vue.createApp({
         name: "",
         lineage: "",
         summary: "",
-        config: "", 
+        config: {}, 
         creator: {
           name: "",
           url: "",
@@ -105,7 +105,7 @@ const app = Vue.createApp({
         name: "",
         icon: "",
         summary: "",
-        config: "",  
+        config: {},  
         type: "",
         modules: []
       },
@@ -581,7 +581,26 @@ const app = Vue.createApp({
       this.addCustomModule(this.editor.module);
       this.setEditorPreviousState(this.editor.module);
     },
-    
+
+
+    // config methods =========================================================
+
+      /**
+       * Add custom config entry to the module
+       */
+      addConfig() {
+          const k = document.getElementById("newConfigKey").value;
+          const v = document.getElementById("newConfigValue").value;
+          this.editor.module.config[k] = v;
+      },
+      
+      /**
+       * Removes the config entry from the module
+       */
+      removeConfig(key) {
+          delete this.editor.module.config[key];
+      },
+      
     // custom module methods ==================================================
 
     /**
@@ -932,6 +951,11 @@ app.component('moduleList', {
   template: `
 <li class="module-list-item">
   <span class="module__icon" v-if="!hideIcon"><img :src="icon"> </span><strong>[[module.name]]</strong>: [[module.summary]]
+<span class="module__config">
+  <span v-for="(value, key) in module.config">
+  <br />[[key]]: [[value]]
+  </span>
+</span>
   <ul class="submodules" v-if="module.modules && module.modules.length">
       <module-list v-for="submodule in module.modules" :module="submodule" :hide-icon="hideIcon"></module-list>
   </ul>