Merge pull request #1444 from ProcessMaker/feature/FOUR-9491

FOUR-9491: Create a control ANALYTICS CHART

src/components/index.js

@@ -28,6 +28,7 @@ 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,
@@ -91,7 +92,7 @@ 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);
 

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-custom/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

@@ -12,6 +12,6 @@ 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';
 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

@@ -19,6 +19,7 @@
 
 <script>
 export default {
+  props: ["listOption"],
   data() {
     return {
       title: this.$t("List Table"),
@@ -40,11 +41,15 @@ export default {
       tableData: []
     };
   },
-  created() {
-    window.ProcessMaker.EventBus.$on("option-selected", (option) => {
-      this.title = option;
+  watch: {
+    listOption(){
+      this.title = this.listOption;
       this.populateFields(this.title);
-    });
+    }
+  },
+  mounted() {
+    this.title = this.listOption;
+    this.populateFields(this.title);
   },
   methods: {
     callAPI(url) {
@@ -58,15 +63,15 @@ export default {
     },
     populateFields(option) {
       this.fields = [];
-      if (option === "My Tasks") {
+      if (option === this.$t("My Tasks")) {
         this.callAPI("/tasks");
       }
 
-      if (option === "My Requests") {
+      if (option === this.$t("My Requests")) {
         this.callAPI("/requests");
       }
 
-      if (option === "Start new Request") {
+      if (option === this.$t("Start new Request")) {
         this.callAPI("/requests");
       }
       /*

src/components/renderer/index.js

@@ -5,3 +5,4 @@ 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

@@ -9,6 +9,7 @@ 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,
@@ -841,15 +842,50 @@ export default [
       config: {
         label: "List Table",
         icon: "fas fa-list",
-        variant: "primary",
+        variant: "primary"
       },
       inspector: [
         {
-          type: "ListSelector",
-          field: "screen",
+          type: "FormMultiselect",
+          field: "listOption",
           config: {
-            label: 'List Table',
-          },
+            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"
+          }
         }
       ]
     }