feature/FOUR-9486: IT5 Default Welcome Screens

src/components/index.js

@@ -27,6 +27,8 @@ 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';
+import FormAnalyticsChart from './renderer/form-analytics-chart';
 
 const rendererComponents = {
   ...renderer,
@@ -90,11 +92,12 @@ export default {
     Vue.component('FormButton', FormButton);
     Vue.component('FileUpload', FileUpload);
     Vue.component('FileDownload', FileDownload);
-
+    Vue.component('FormAnalyticsChart', FormAnalyticsChart);
     Vue.component('FormMaskedInput', FormMaskedInput);
     Vue.use(DataProvider);
 
     Vue.use(Vuex);
+    Vue.component('FormListTable', FormListTable);
     const store = new Vuex.Store({
       modules: {
         globalErrorsModule,

src/components/inspector/analytics-selector.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <label class="typo__label">{{ $t("Analytics Management") }}</label>
+    <multiselect
+      v-model="selectedOption"
+      :placeholder="$t('Select Chart')"
+      :internal-search="false"
+      :show-labels="false"
+      :options="formattedOptions"
+      label="name"
+      track-by="link"
+      :multiple="false"
+      :allow-empty="false"
+    />
+  </div>
+</template>
+
+<script>
+const globalObject = typeof window === "undefined" ? global : window;
+
+export default {
+  data() {
+    return {
+      selectedOption: null,
+      formattedOptions: [{ name: "", link: "" }]
+    };
+  },
+  watch: {
+    selectedOption(newValue) {
+      this.$emit("input", newValue);
+    }
+  },
+  created() {
+    this.fetchChartData();
+  },
+  methods: {
+    fetchChartData() {
+      try {
+        ProcessMaker.apiClient
+          .get(`analytics-reporting-all`)
+          .then((response) => {
+            this.formattedOptions = response.data.data.map((item) => ({
+              name: item.name,
+              link: item.link
+            }));
+          });
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    }
+  }
+};
+</script>

src/components/inspector/index.js

@@ -14,3 +14,4 @@ export { default as Tooltip } from './tooltip';
 export { default as DeviceVisibility } from './device-visibility';
 export { default as LoadingSubmitButton } from './loading-submit-button';
 export { default as LabelSubmitButton } from './label-submit-button';
+export { default as AnalyticsSelector } from './analytics-selector';

src/components/renderer/form-analytics-chart.vue

@@ -0,0 +1,68 @@
+<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>
+      <div>
+        <div class="d-flex flex-wrap p-2">
+          <template>
+            <b-col cols="12">
+              <b-card
+                :title="graphic.name"
+                img-top
+                tag="article"
+                class="mb-0 mr-0 card-graphic"
+              >
+                <b-card-text>
+                  <b-embed type="iframe" :src="graphic.link"></b-embed>
+                </b-card-text>
+              </b-card>
+            </b-col>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["listChartOption"],
+  data() {
+    return {
+      title: this.$t("Analytics Chart"),
+      graphic: []
+    };
+  },
+  watch: {
+    listChartOption() {
+      if (this.listChartOption && this.listChartOption.name) {
+        this.graphic = this.listChartOption;
+      }
+    }
+  },
+  mounted() {
+    if (this.listChartOption && this.listChartOption.name) {
+      this.graphic = this.listChartOption;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.prevent-interaction.form-analytics-chart::after {
+  content: attr(placeholder);
+}
+.card-graphic {
+  max-width: 560px;
+}
+.graphic-description {
+  -webkit-line-clamp: 3;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>

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

@@ -0,0 +1,96 @@
+<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 {
+  props: ["listOption"],
+  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: []
+    };
+  },
+  watch: {
+    listOption(){
+      this.title = this.listOption;
+      this.populateFields(this.title);
+    }
+  },
+  mounted() {
+    this.title = this.listOption;
+    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 === this.$t("My Tasks")) {
+        this.callAPI("/tasks");
+      }
+
+      if (option === this.$t("My Requests")) {
+        this.callAPI("/requests");
+      }
+
+      if (option === this.$t("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,5 @@ 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';
+export { default as FormAnalyticsChart } from './form-analytics-chart';

src/form-builder-controls.js

@@ -8,6 +8,8 @@ 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 FormAnalyticsChart from "./components/renderer/form-analytics-chart";
 import {DataTypeProperty, DataFormatProperty, DataTypeDateTimeProperty} from './VariableDataTypeProperties';
 import {
   FormInput,
@@ -827,4 +829,65 @@ 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: "FormMultiselect",
+          field: "listOption",
+          config: {
+            icon: "fas fa-list",
+            label: "List Table",
+            options: [
+              { value: "My Tasks", content: "My Tasks" },
+              { value: "My Requests", content: "My Requests" },
+              {
+                value: "Start new Request",
+                content: "Start new Request"
+              }
+            ]
+          }
+        }
+      ]
+    }
+  },
+  {
+    editorComponent: FormAnalyticsChart,
+    editorBinding: "FormAnalyticsChart",
+    rendererComponent: FormAnalyticsChart,
+    rendererBinding: "FormAnalyticsChart",
+    control: {
+      label: "Analytics Chart",
+      component: "FormAnalyticsChart",
+      "editor-component": "FormAnalyticsChart",
+      "editor-control": "FormAnalyticsChart",
+      config: {
+        label: "Analytics Chart",
+        icon: "fas fa-chart-area",
+        variant: "primary"
+      },
+      inspector: [
+        {
+          type: "AnalyticsSelector",
+          field: "listChartOption",
+          config: {
+            label: "Chart"
+          }
+        }
+      ]
+    }
+  }
 ];