From 0f8a7bb19ae55f8cb6488d766596c0b7dd81d4aa Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Mon, 3 Feb 2020 11:52:55 -0800
Subject: [PATCH 1/2] Add loop control

---
 src/App.vue                           |  17 ++-
 src/components/editor/loop.vue        | 194 ++++++++++++++++++++++++++
 src/components/renderer/form-loop.vue | 119 ++++++++++++++++
 src/components/vue-form-builder.vue   |   2 +
 src/form-builder-controls.js          |  32 +++++
 5 files changed, 363 insertions(+), 1 deletion(-)
 create mode 100644 src/components/editor/loop.vue
 create mode 100644 src/components/renderer/form-loop.vue

diff --git a/src/App.vue b/src/App.vue
index 4c8c85b42..71b0c63b4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,7 +33,7 @@
             <b-btn variant="secondary" size="sm" v-b-modal="'uploadmodal'" class="mr-2" :title="$t('Load Screen')">
               <i class="fas fa-upload mr-1"/>
             </b-btn>
-            <button v-b-modal.preview-config type="button" class="btn btn-secondary btn-sm ml-1" :title="$t('Save Screen')"><i class="fas fa-save"/></button>
+            <button v-b-modal.preview-config type="button" @click="saveToLocalStorage()" class="btn btn-secondary btn-sm ml-1" :title="$t('Save Screen')"><i class="fas fa-save"/></button>
           </b-col>
           <b-modal
             ref="uploadmodal"
@@ -320,8 +320,20 @@ export default {
         config.builderBinding
       );
     });
+
+    this.loadFromLocalStorage();
   },
   methods: {
+    loadFromLocalStorage() {
+      const savedConfig = localStorage.getItem('savedConfig');
+      if (savedConfig) {
+        let config = JSON.parse(savedConfig);
+        this.$refs.builder.config = config;
+      }
+    },
+    saveToLocalStorage() {
+      localStorage.setItem('savedConfig', JSON.stringify(this.config));
+    },
     editorDidMount(editor) {
       editor.getAction('editor.action.formatDocument').run();
     },
@@ -331,6 +343,9 @@ export default {
       items.forEach(item => {
         if (item.container) {
           item.items.forEach(containerItems => {
+            if (!Array.isArray(containerItems)) {
+              containerItems = [containerItems];
+            }
             validationErrors.push(...this.getValidationErrorsForItems(containerItems, page));
           });
         }
diff --git a/src/components/editor/loop.vue b/src/components/editor/loop.vue
new file mode 100644
index 000000000..70b947219
--- /dev/null
+++ b/src/components/editor/loop.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="column-draggable">
+    <draggable
+      style="min-height: 80px;"
+      v-model="items"
+      :options="{group: {name: 'controls'}}"
+    >
+      <div class="control-item"
+        :class="{selected: selected === element, hasError: hasError(element)}"
+        v-for="(element,index) in items"
+        :key="index"
+        @click.stop="inspect(element)"
+      >
+              <div v-if="element.container" @click.stop="inspect(element)">
+                <div class="m-2 card border-0">
+                  <div
+                    v-if="selected === element"
+                    class="card-header form-element-header d-flex align-items-center border rounded"
+                  >
+                    <i class="fas fa-arrows-alt-v mr-1 text-muted"/>
+                    <i v-if="element.config.icon" :class="element.config.icon" class="mr-2 ml-1"/>
+                    {{ element.config.name || $t('Variable Name') }}
+                    <button
+                      class="btn btn-sm btn-danger ml-auto"
+                      @click="deleteItem(index)"
+                    >
+                      <i class="far fa-trash-alt text-light"/>
+                    </button>
+                  </div>
+
+                  <component :class="elementCssClass(element)"
+                    :validationErrors="validationErrors"
+                    class="mb-3 mr-3 ml-3"
+                    :selected="selected"
+                    @inspect="inspect"
+                    @update-state="$emit('update-state')"
+                    v-model="element.items"
+                    :config="element.config"
+                    :is="element['editor-component']"
+                  />
+                </div>
+              </div>
+
+              <div v-else :id="element.config.name ? element.config.name : undefined">
+                <div class="m-2" :class="{ 'card' : selected === element }">
+                  <div
+                    v-if="selected === element"
+                    class="card-header form-element-header d-flex align-items-center"
+                  >
+                    <i class="fas fa-arrows-alt-v mr-1 text-muted"/>
+                    <i v-if="element.config.icon" :class="element.config.icon" class="mr-2 ml-1"/>
+                    {{ element.config.name || $t('Variable Name') }}
+                    <button
+                      class="btn btn-sm btn-danger ml-auto"
+                      @click="deleteItem(index)"
+                    >
+                      <i class="far fa-trash-alt text-light"/>
+                    </button>
+                  </div>
+
+                  <component
+                    class="p-3"
+                    :class="[elementCssClass(element), { 'prevent-interaction': !element.config.interactive }]"
+                    :tabindex="element.config.interactive ? 0 : -1"
+                    v-bind="element.config"
+                    :config="element.config"
+                    @input="element.config.interactive ? element.config.content = $event : null"
+                    :is="element['editor-component']"
+                  />
+                </div>
+              </div>
+      </div>
+    </draggable>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable';
+import { HasColorProperty } from '@/mixins';
+import * as renderer from '@/components/renderer';
+import * as editor from '@/components/editor';
+import {
+  FormInput,
+  FormSelectList,
+  FormTextArea,
+  FormCheckbox,
+  FormDatePicker,
+  FormHtmlEditor,
+  FormHtmlViewer,
+} from '@processmaker/vue-form-elements';
+
+const defaultColumnWidth = 1;
+
+export default {
+  name: 'Loop',
+  mixins: [HasColorProperty],
+  props: ['value', 'name', 'config', 'selected', 'validationErrors'],
+  components: {
+    draggable,
+    FormInput,
+    FormSelectList,
+    FormCheckbox,
+    FormTextArea,
+    FormDatePicker,
+    FormHtmlEditor,
+    FormHtmlViewer,
+    ...renderer,
+    ...editor,
+  },
+  data() {
+    return {
+      items: [],
+    };
+  },
+  watch: {
+    value: {
+      handler() {
+        this.items = this.value;
+      },
+      immediate: true,
+    },
+    items() {
+      this.$emit('input', this.items);
+    },
+  },
+  methods: {
+    hasError(element) {
+      if (!this.validationErrors) { return false; }
+      return this.validationErrors.some(({ item }) => item === element);
+    },
+    inspect(element) {
+      this.$emit('inspect', element);
+    },
+    deleteItem(index) {
+      // Remove the item from the array in currentPage
+      this.items.splice(index, 1);
+      this.$emit('update-state');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+    .hasError {
+      border: 1px solid red;
+      border-radius: 0.25rem;
+
+      .form-element-header {
+        border-bottom: 1px solid red;
+        color: red;
+      }
+    }
+
+    .column-draggable {
+        border: 1px dashed #000;
+        min-height: 80px;
+        content: "Drag Controls";
+    }
+
+    .selected .column-draggable {
+      border: none;
+    }
+
+    .control-item {
+        position: relative;
+
+        .delete {
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            display: none;
+        }
+
+        &.selected,
+        &:hover {
+            .mask {
+                border: 1px solid red;
+            }
+
+            .delete {
+                display: inline-block;
+            }
+        }
+
+        .mask {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            background-color: rgba(0, 0, 0, 0);
+            width: 100%;
+            height: 100%;
+        }
+    }
+</style>
diff --git a/src/components/renderer/form-loop.vue b/src/components/renderer/form-loop.vue
new file mode 100644
index 000000000..7a6fe2332
--- /dev/null
+++ b/src/components/renderer/form-loop.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="form-group">
+    <div v-for="loopIndex in times" :key="loopIndex">
+      <vue-form-renderer
+        @submit="submit"
+        :data="getMatrixValue(loopIndex)"
+        @update="setMatrixValue(loopIndex, $event)"
+        :config="rendererConfig"
+        :computed="null"
+        :custom-css="null"
+        :watchers="null"
+        />
+    </div>
+  </div>
+</template>
+
+<script>
+import VueFormRenderer from '../vue-form-renderer.vue';
+import Mustache from 'mustache';
+
+export default {
+  name: 'FormLoop',
+  mixins: [],
+  props: ['value', 'name', 'config', 'transientData'],
+  components: {
+    VueFormRenderer
+  },
+  data() {
+    return {
+      matrix: [],
+      items: [],
+    };
+  },
+  computed: {
+    rendererConfig() {
+      let items = this.items;
+      return [{
+        name: 'LoopItem',
+        items: items,
+      }];
+    },
+    times() {
+      if (!this.config) {
+        return [];
+      }
+
+      let times = this.config.times;
+
+      try {
+        times = Mustache.render(times, this.transientData);
+      } catch (error) { }
+  
+      times = parseInt(times);
+
+      if (Number.isNaN(times)) {
+        return []
+      }
+
+      if (times > 100) {
+        times = 100;
+      }
+
+      return [...Array(times).keys()];
+    }
+  },
+  watch: {
+    transientData: {
+      handler() {
+        if (this.transientData && this.transientData[this.name]) {
+          this.matrix = this.transientData[this.name];
+        } else {
+          this.matrix = [];
+        }
+        this.setupMatrix();
+      },
+      immediate: true,
+    },
+    value: {
+      handler() {
+        this.items = this.value;
+      },
+      immediate: true,
+    },
+    matrix: {
+      handler() {
+        this.$parent.model[this.name] = this.matrix;
+      },
+      deep: true,
+    },
+    times() {
+      this.setupMatrix();
+    }
+  },
+  methods: {
+    setMatrixValue(i, v) {
+      this.$set(this.matrix, i, v);
+    },
+    getMatrixValue(i) {
+      let val = this.matrix[i];
+      if (!val) {
+        val = '';
+      }
+      return val;
+    },
+    setupMatrix() {
+      for (const i of this.times) {
+        if (typeof this.matrix[i] === 'undefined') {
+          this.$set(this.matrix, i, {});
+        } else {
+        }
+      }
+    },
+    submit() {
+      // Just bubble up
+      this.$emit('submit');
+    },
+  },
+};
+</script>
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index cdcb99f25..d5780a091 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -269,6 +269,7 @@ import undoRedoModule from '../undoRedoModule';
 import accordions from './accordions';
 import { keyNameProperty } from '../form-control-common-properties';
 import VariableNameGenerator from '@/components/VariableNameGenerator';
+import Loop from './editor/loop';
 
 Vue.use(BootstrapVue);
 
@@ -330,6 +331,7 @@ export default {
   mixins: [HasColorProperty],
   components: {
     draggable,
+    Loop,
     FormInput,
     FormSelectList,
     FormCheckbox,
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index acfb51eec..b64959efb 100644
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -1,6 +1,8 @@
 import FormText from './components/renderer/form-text';
 import FormButton from './components/renderer/form-button';
 import FormMultiColumn from './components/renderer/form-multi-column';
+import FormLoop from './components/renderer/form-loop';
+import Loop from './components/editor/loop';
 import FormRecordList from './components/renderer/form-record-list';
 import FormImage from './components/renderer/form-image';
 import FormMaskedInput from './components/renderer/form-masked-input';
@@ -346,6 +348,36 @@ export default [
       ],
     },
   },
+  {
+    editorComponent: Loop,
+    editorBinding: 'Loop',
+    rendererComponent: FormLoop,
+    rendererBinding: 'FormLoop',
+    control: {
+      label: 'Loop',
+      component: 'FormLoop',
+      'editor-component': 'Loop',
+      'editor-control': 'Loop',
+      container: true,
+      // Default items container
+      items: [],
+      config: {
+        icon: 'fas fa-redo',
+        times: '2',
+      },
+      inspector: [
+        keyNameProperty,
+        {
+          type: 'FormInput',
+          field: 'times',
+          config: {
+            label: 'Number of times',
+            helper: 'Enter the number of times to repeat the element(s)',
+          },
+        },
+      ],
+    },
+  },
   {
     editorComponent: FormText,
     editorBinding: 'FormText',

From d2014ff877ac440eb749a4dec842a7477b2cfb1d Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Mon, 3 Feb 2020 12:47:13 -0800
Subject: [PATCH 2/2] Remove duplicate component registration

---
 src/components/renderer/form-loop.vue | 4 ----
 src/components/vue-form-renderer.vue  | 2 ++
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/renderer/form-loop.vue b/src/components/renderer/form-loop.vue
index 7a6fe2332..70444c0a3 100644
--- a/src/components/renderer/form-loop.vue
+++ b/src/components/renderer/form-loop.vue
@@ -15,16 +15,12 @@
 </template>
 
 <script>
-import VueFormRenderer from '../vue-form-renderer.vue';
 import Mustache from 'mustache';
 
 export default {
   name: 'FormLoop',
   mixins: [],
   props: ['value', 'name', 'config', 'transientData'],
-  components: {
-    VueFormRenderer
-  },
   data() {
     return {
       matrix: [],
diff --git a/src/components/vue-form-renderer.vue b/src/components/vue-form-renderer.vue
index eb6233bf5..86e7f7296 100644
--- a/src/components/vue-form-renderer.vue
+++ b/src/components/vue-form-renderer.vue
@@ -52,6 +52,7 @@ import * as editor from './editor';
 import * as renderer from './renderer';
 import * as inspector from './inspector';
 import FormMultiColumn from '@/components/renderer/form-multi-column';
+import FormLoop from '@/components/renderer/form-loop';
 import FormMaskedInput from '@/components/renderer/form-masked-input';
 import CustomCSS from './custom-css';
 import {
@@ -99,6 +100,7 @@ export default {
     FormHtmlViewer,
     FormMultiColumn,
     CustomCSS,
+    FormLoop,
     ...editor,
     ...inspector,
     ...renderer,