Merge branch 'configs' into 'master'

Configs

See merge request medlabboulder/communityrule!10

_includes/vue-rule-script.html

@@ -84,20 +84,41 @@
                             <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 type="text"
+                                    v-model="editor.module.config[key]" /></td>
+                              <td style="vertical-align: initial">
+                                <span class="config-button"
+                                        @click="removeConfig([[key]])">
+                                  <img :src="icons.minus" alt="Remove">
+                                </span>
+                              </td>
+                            </tr>
+                            <tr >
+                              <td><input id="newConfigKey"
+                                         type="text"
+                                         value="Configuration" /></td>
+                              <td>
+                                <input id="newConfigValue"
+                                         type="text"
+                                         value="Value" /></td>
+                              <td style="vertical-align: initial">
+                                <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">
@@ -125,8 +146,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>
@@ -257,6 +278,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/_rule-app.scss

@@ -128,7 +128,7 @@ h2 .icon img {
 
   input[type='text'],
   textarea {
-    font-size: 1.2rem;
+    font-size: 1rem;
     font-family: monospace;
     margin: .5rem 0 1rem;
     padding: .25rem;
@@ -498,4 +498,4 @@ h2 .icon img {
       display: none;
     }
   }
-}
+}

_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: []
       },
@@ -258,12 +258,18 @@ const app = Vue.createApp({
      */
     cloneModule(sourceModule,includeSubmodules) {
       let output = {
-        ...this.moduleTemplate,
-        ...sourceModule,
+          ...this.moduleTemplate,
+          ...sourceModule,
         //TODO: implement lineage pattern, same as the rule does
         source: sourceModule, // keep track of where this module came from
       };
       if (!includeSubmodules) output.modules = [];
+      // clear configs
+      document.getElementById("newConfigKey").value =
+            "Configuration";
+      document.getElementById("newConfigValue").value =
+            "Value";
+      output.config = {};
       // delete unnecessary properties
       delete output.content;
       delete output.readonly;
@@ -581,7 +587,30 @@ 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;
+          document.getElementById("newConfigKey").value =
+              "Configuration";
+          document.getElementById("newConfigValue").value =
+              "Value";
+      },
+      
+      /**
+       * Removes the config entry from the module
+       */
+      removeConfig(key) {
+          delete this.editor.module.config[key];
+      },
+      
     // custom module methods ==================================================
 
     /**
@@ -932,6 +961,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>