Bkp/FOUR-9486

src/components/index.js

@@ -11,6 +11,7 @@ import MultiColumn from './editor/multi-column';
 import FormLoop from './renderer/form-loop';
 import NewFormMultiColumn from './renderer/new-form-multi-column';
 import FormNestedScreen from './renderer/form-nested-screen';
+import FormMyCustomChart from './renderer/form-my-custom-chart';
 import ScreenRenderer from './screen-renderer';
 import AddLoopRow from './renderer/add-loop-row';
 import FormRecordList from './renderer/form-record-list';
@@ -76,6 +77,7 @@ export default {
     Vue.component('FormImage', FormImage);
     Vue.component('FormLoop', FormLoop);
     Vue.component('FormMultiColumn', FormMultiColumn);
+    Vue.component('FormMyCustomChart', FormMyCustomChart);
     Vue.component('FormNestedScreen', FormNestedScreen);
     Vue.component('FormRecordList', FormRecordList);
     Vue.component('Loop', Loop);

src/components/inspector/chart-selector.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <label class="typo__label">{{ $t('Select Chart Type') }}</label>
+    <multiselect
+      v-model="selectedOption"
+      :placeholder="$t('Select option')"
+      label="title"
+      :options="options"
+    />
+  </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 my-custom-chart component
+      window.ProcessMaker.EventBus.$emit("option-selected", newValue.title);
+    }
+  }
+};
+</script>

src/components/inspector/index.js

@@ -7,6 +7,7 @@ export { default as ColumnSetup } from './column-setup';
 export { default as PageSelect } from './page-select';
 export { default as ValidationSelect } from './validation-select';
 export { default as ScreenSelector } from './screen-selector';
+export { default as ChartSelector } from './chart-selector';
 export { default as LoopInspector } from './loop';
 export { default as ImageVariable } from './image-variable.vue';
 export { default as InputVariable } from './input-variable.vue';

src/components/renderer/form-my-custom-chart.vue

@@ -0,0 +1,41 @@
+<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 class="card-body">
+        <div class="text-center">
+          <i class="far fa-list-alt fa-5x" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: this.$t("Custom Control") // Default Control Title
+    };
+  },
+  created() {
+    window.ProcessMaker.EventBus.$on("option-selected", (option) => {
+      // Title is updated when event is received
+      this.title = option;
+    });
+  }
+};
+</script>
+
+<style lang="scss">
+.prevent-interaction.form-my-custom-chart::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 FormMyCustomChart } from './form-my-custom-chart';

src/form-builder-controls.js

@@ -6,6 +6,7 @@ import FormRecordList from './components/renderer/form-record-list';
 import FormImage from './components/renderer/form-image';
 import FormMaskedInput from './components/renderer/form-masked-input';
 import FormNestedScreen from './components/renderer/form-nested-screen';
+import FormMyCustomChart from "./components/renderer/form-my-custom-chart";
 import FileUpload from './components/renderer/file-upload';
 import FileDownload from './components/renderer/file-download';
 import {DataTypeProperty, DataFormatProperty, DataTypeDateTimeProperty} from './VariableDataTypeProperties';
@@ -821,4 +822,28 @@ export default [
       ],
     },
   },
+  {
+    editorComponent: FormMyCustomChart,
+    editorBinding: "FormMyCustomChart",
+    rendererComponent: FormMyCustomChart,
+    rendererBinding: "FormMyCustomChart",
+    control: {
+      label: "Custom Control",
+      component: "FormMyCustomChart",
+      "editor-component": "FormMyCustomChart",
+      "editor-control": "FormMyCustomChart",
+      config: {
+        label: "Label Custom Chart",
+        icon: "far fa-chart-bar",
+        variant: "primary",
+        name: "Custom Control Chart"
+      },
+      inspector: [
+        {
+          type: "ChartSelector",
+          field: "screen"
+        }
+      ]
+    }
+  }
 ];