From ea5a2b8349bd27c7b7e97918d905f5ee3a39d14e Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Wed, 27 Sep 2023 09:35:10 -0400
Subject: [PATCH 1/3] Ready for PR

---
 src/components/index.js                     |   2 +
 src/components/inspector/index.js           |   1 +
 src/components/inspector/list-selector.vue  |  34 +++++
 src/components/renderer/form-list-table.vue | 136 ++++++++++++++++++++
 src/components/renderer/index.js            |   1 +
 src/form-builder-controls.js                |  27 ++++
 6 files changed, 201 insertions(+)
 mode change 100644 => 100755 src/components/index.js
 mode change 100644 => 100755 src/components/inspector/index.js
 create mode 100755 src/components/inspector/list-selector.vue
 create mode 100755 src/components/renderer/form-list-table.vue
 mode change 100644 => 100755 src/components/renderer/index.js
 mode change 100644 => 100755 src/form-builder-controls.js

diff --git a/src/components/index.js b/src/components/index.js
old mode 100644
new mode 100755
index 23a951c43..4e58df3de
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -27,6 +27,7 @@ import LRUCache from "lru-cache";
 import Vuex from "vuex";
 import globalErrorsModule from "@/store/modules/globalErrorsModule";
 import undoRedoModule from "@/store/modules/undoRedoModule";
+import FormListTable from './renderer/form-list-table';
 
 const rendererComponents = {
   ...renderer,
@@ -95,6 +96,7 @@ export default {
     Vue.use(DataProvider);
 
     Vue.use(Vuex);
+    Vue.component('FormListTable', FormListTable);
     const store = new Vuex.Store({
       modules: {
         globalErrorsModule,
diff --git a/src/components/inspector/index.js b/src/components/inspector/index.js
old mode 100644
new mode 100755
index c3c417107..c9bfd9d97
--- a/src/components/inspector/index.js
+++ b/src/components/inspector/index.js
@@ -12,3 +12,4 @@ export { default as ImageVariable } from './image-variable.vue';
 export { default as InputVariable } from './input-variable.vue';
 export { default as Tooltip } from './tooltip';
 export { default as DeviceVisibility } from './device-visibility';
+export { default as ListSelector } from './list-selector';
diff --git a/src/components/inspector/list-selector.vue b/src/components/inspector/list-selector.vue
new file mode 100755
index 000000000..f4da85cd7
--- /dev/null
+++ b/src/components/inspector/list-selector.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <label class="typo__label">{{ $t("Select Chart Type") }}</label>
+    <multiselect
+      v-model="selectedOption"
+      :placeholder="$t('Select option')"
+      :internal-search="false"
+      :show-labels="false"
+      :options="options"
+      label="title"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedOption: null,
+      options: [
+        { title: this.$t("My Tasks") },
+        { title: this.$t("My Requests") },
+        { title: this.$t("Start new Request") }
+      ]
+    };
+  },
+  watch: {
+    selectedOption(newValue) {
+      // when Multiselect option is selected, an event is emmited to notify form-list-table component
+      window.ProcessMaker.EventBus.$emit("option-selected", newValue.title);
+    }
+  }
+};
+</script>
diff --git a/src/components/renderer/form-list-table.vue b/src/components/renderer/form-list-table.vue
new file mode 100755
index 000000000..622125b29
--- /dev/null
+++ b/src/components/renderer/form-list-table.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="container mt-4">
+    <div class="card">
+      <div
+        class="card-header d-flex justify-content-between align-items-center"
+      >
+        <h4>{{ title }}</h4>
+        <div>
+          <i class="fas fa-search" />
+        </div>
+      </div>
+      <div>
+        <vuetable :api-mode="false" :fields="fields" :data="tableData">
+        </vuetable>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: this.$t("List Table"),
+      fields: [
+        {
+          name: "created_at",
+          title: () => "Created At"
+        },
+        {
+          name: "due_at",
+          title: () => "Due At"
+        },
+        {
+          name: "element_name",
+          title: () => "Element Name"
+        }
+      ],
+      data: [],
+      tableData: []
+    };
+  },
+  created() {
+    window.ProcessMaker.EventBus.$on("option-selected", (option) => {
+      this.title = option;
+      this.populateFields(this.title);
+    });
+  },
+  methods: {
+    callAPI(url) {
+      try {
+        ProcessMaker.apiClient.get(url).then((response) => {
+          this.tableData = response.data;
+        });
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    },
+    populateFields(option) {
+      this.fields = [];
+      if (option === "My Tasks") {
+        this.callAPI("/tasks");
+        let field = [
+          {
+            name: "created_at",
+            title: "Created At"
+          },
+          {
+            name: "due_at",
+            title: "Due At"
+          },
+          {
+            name: "element_name",
+            title: "Element Name"
+          }
+        ];
+        this.fields.push(field);
+      }
+
+      if (option === "My Requests") {
+        this.callAPI("/requests");
+        let field = [
+          {
+            name: "created_at",
+            title: "Created At Request"
+          },
+          {
+            name: "due_at",
+            title: "Due At Request"
+          },
+          {
+            name: "element_name",
+            title: "Element Name Request"
+          }
+        ];
+        this.fields.push(field);
+      }
+
+      if (option === "Start new Request") {
+        this.callAPI("/requests");
+        let field = [
+          {
+            name: "created_at",
+            title: "Created new Request"
+          },
+          {
+            name: "due_at",
+            title: "Due new Request"
+          },
+          {
+            name: "element_name",
+            title: "Element new Request"
+          }
+        ];
+        this.fields.push(field);
+      }
+      /*
+        This is needed because fields in vuetable2 are not reactive
+        TO-DO: Vuetable component should be imported from CORE to use normalizeFields
+        import datatableMixin from "../../components/common/mixins/datatable";
+        Uncomment code below when import is done
+      */
+
+      // this.$nextTick(() => {
+      //   this.$refs.vuetable.normalizeFields();
+      // });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.prevent-interaction.form-list-table::after {
+  content: attr(placeholder);
+}
+</style>
diff --git a/src/components/renderer/index.js b/src/components/renderer/index.js
old mode 100644
new mode 100755
index 015bcb6e6..ec830027d
--- a/src/components/renderer/index.js
+++ b/src/components/renderer/index.js
@@ -4,3 +4,4 @@ export { default as FormRecordList } from './form-record-list';
 export { default as FormRecordListStatic } from './form-record-list-static.vue';
 export { default as FormText } from './form-text';
 export { default as FormNestedScreen } from './form-nested-screen';
+export { default as FormListTable } from './form-list-table';
\ No newline at end of file
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
old mode 100644
new mode 100755
index caadde5d8..670bdcd9e
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -8,6 +8,7 @@ import FormMaskedInput from './components/renderer/form-masked-input';
 import FormNestedScreen from './components/renderer/form-nested-screen';
 import FileUpload from './components/renderer/file-upload';
 import FileDownload from './components/renderer/file-download';
+import FormListTable from './components/renderer/form-list-table';
 import {DataTypeProperty, DataFormatProperty, DataTypeDateTimeProperty} from './VariableDataTypeProperties';
 import {
   FormInput,
@@ -821,4 +822,30 @@ export default [
       ],
     },
   },
+  {
+    editorComponent: FormListTable,
+    editorBinding: "FormListTable",
+    rendererComponent: FormListTable,
+    rendererBinding: "FormListTable",
+    control: {
+      label: "List Table",
+      component: "FormListTable",
+      "editor-component": "FormListTable",
+      "editor-control": "FormListTable",
+      config: {
+        label: "List Table",
+        icon: "fas fa-list",
+        variant: "primary",
+      },
+      inspector: [
+        {
+          type: "ListSelector",
+          field: "screen",
+          config: {
+            label: 'List Table',
+          },
+        }
+      ]
+    }
+  }
 ];

From 07afbaf2ecc7d6c460ad6ae665f09b1100b12307 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Wed, 27 Sep 2023 10:12:46 -0400
Subject: [PATCH 2/3] Making adjustments

---
 src/components/renderer/form-list-table.vue | 55 ++-------------------
 1 file changed, 5 insertions(+), 50 deletions(-)

diff --git a/src/components/renderer/form-list-table.vue b/src/components/renderer/form-list-table.vue
index 622125b29..168fe9180 100755
--- a/src/components/renderer/form-list-table.vue
+++ b/src/components/renderer/form-list-table.vue
@@ -60,70 +60,25 @@ export default {
       this.fields = [];
       if (option === "My Tasks") {
         this.callAPI("/tasks");
-        let field = [
-          {
-            name: "created_at",
-            title: "Created At"
-          },
-          {
-            name: "due_at",
-            title: "Due At"
-          },
-          {
-            name: "element_name",
-            title: "Element Name"
-          }
-        ];
-        this.fields.push(field);
       }
 
       if (option === "My Requests") {
         this.callAPI("/requests");
-        let field = [
-          {
-            name: "created_at",
-            title: "Created At Request"
-          },
-          {
-            name: "due_at",
-            title: "Due At Request"
-          },
-          {
-            name: "element_name",
-            title: "Element Name Request"
-          }
-        ];
-        this.fields.push(field);
       }
 
       if (option === "Start new Request") {
         this.callAPI("/requests");
-        let field = [
-          {
-            name: "created_at",
-            title: "Created new Request"
-          },
-          {
-            name: "due_at",
-            title: "Due new Request"
-          },
-          {
-            name: "element_name",
-            title: "Element new Request"
-          }
-        ];
-        this.fields.push(field);
       }
       /*
-        This is needed because fields in vuetable2 are not reactive
+        This code is needed because fields in vuetable2 are not reactive
         TO-DO: Vuetable component should be imported from CORE to use normalizeFields
         import datatableMixin from "../../components/common/mixins/datatable";
         Uncomment code below when import is done
-      */
 
-      // this.$nextTick(() => {
-      //   this.$refs.vuetable.normalizeFields();
-      // });
+        this.$nextTick(() => {
+         this.$refs.vuetable.normalizeFields();
+        });
+      */
     }
   }
 };

From 5bfce7489782a270dc49b22f021d7c2ef30969b7 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Wed, 27 Sep 2023 11:57:00 -0400
Subject: [PATCH 3/3] Observation solved

---
 src/components/renderer/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/renderer/index.js b/src/components/renderer/index.js
index ec830027d..c644dae3c 100755
--- a/src/components/renderer/index.js
+++ b/src/components/renderer/index.js
@@ -4,4 +4,4 @@ export { default as FormRecordList } from './form-record-list';
 export { default as FormRecordListStatic } from './form-record-list-static.vue';
 export { default as FormText } from './form-text';
 export { default as FormNestedScreen } from './form-nested-screen';
-export { default as FormListTable } from './form-list-table';
\ No newline at end of file
+export { default as FormListTable } from './form-list-table';