FOUR-9501: Create control LIST TABLE

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,

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';

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>

src/components/renderer/form-list-table.vue

@@ -0,0 +1,91 @@
+<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");
+      }
+
+      if (option === "My Requests") {
+        this.callAPI("/requests");
+      }
+
+      if (option === "Start new Request") {
+        this.callAPI("/requests");
+      }
+      /*
+        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();
+        });
+      */
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.prevent-interaction.form-list-table::after {
+  content: attr(placeholder);
+}
+</style>

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';

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',
+          },
+        }
+      ]
+    }
+  }
 ];