FOUR-15851: On Task Completed - Default Behavior (front-end changes)

src/components/inspectors/ElementDestination.vue

@@ -0,0 +1,232 @@
+<template>
+  <div>
+    <form-multi-select
+      :label="$t('Element Destination')"
+      name="ElementDestination"
+      :helper="$t('Enter the destination...')"
+      v-model="elementDestination"
+      :placeholder="$t('Select element destination')"
+      :showLabels="false"
+      :allow-empty="false"
+      :options="options"
+      :loading="loading"
+      optionContent="content"
+      optionValue="value"
+      class="p-0 mb-2"
+      :validation="validation"
+      :searchable="false"
+      :internal-search="false"
+      :preserve-search="false"
+      :clear-on-select="true"
+      data-test="element-destination-type"
+    />
+
+    <form-multi-select
+      v-if="destinationType === 'customDashboard'"
+      :label="$t('Dashboard')"
+      name="Dashboard"
+      :helper="$t('Select the dashboard to show the summary of this request when it completes')"
+      v-model="customDashboard"
+      :placeholder="$t('Type here to search')"
+      :showLabels="false"
+      :allow-empty="false"
+      :options="dashboardList"
+      :loading="loading"
+      optionContent="title"
+      optionValue="url"
+      class="p-0 mb-2"
+      :validation="validation"
+      :searchable="true"
+      :internal-search="false"
+      :preserve-search="false"
+      :clear-on-select="true"
+      @search-change="searchChange"
+      data-test="dashboard"
+    />
+    <form-input
+      v-if="destinationType === 'externalURL'" 
+      :label="$t('URL')"
+      v-model="externalURL"
+      :error="getValidationErrorForURL(externalURL)"
+      data-cy="events-add-id"
+      :placeholder="urlPlaceholder"
+      :helper="$t('Determine de URL where the request will end')"
+      data-test="external-url"
+    />
+  </div>
+</template>
+
+<script>
+import debounce from 'lodash/debounce';
+import isEqual from 'lodash/isEqual';
+export default {
+  props: {
+    options: {
+      type: Array,
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  name: 'ElementDestination',
+
+  data() {
+    return {
+      loading: false ,
+      validation: '',
+      destinationType: null,
+      dashboards: [],
+      customDashboard: null,
+      elementDestination: null,
+      defaultValues: {
+        summaryScreen: null,
+        customDashboard: null,
+        processLaunchpad: `process-browser/${window.ProcessMaker.modeler.process.id}?categorySelected=-1`,
+        externalURL: null,
+        homepageDashboard: '/process-browser',
+        taskList: '/tasks',
+        taskSource: null,
+      },
+      urlModel: null,
+      local: null,
+      loadDashboardsDebounced: null,
+      urlPlaceholder: 'https://ci-ba427360a6.engk8s.processmaker.net/processes',
+      externalURL: '',
+    };  
+  },
+  watch: {
+    elementDestination: {
+      handler(newValue, oldValue) {
+        if (!isEqual(newValue, oldValue)) {
+          this.destinationTypeChange(newValue.value);
+        }
+      },
+      deep: true,
+    },
+    customDashboard: {
+      handler(newValue, oldValue) {
+        if (!isEqual(newValue, oldValue)) {
+          this.setBpmnValues({
+            title: newValue.title,
+            url: newValue.url,
+          });
+        }
+      },
+      deep: true,
+    },
+    externalURL() {
+      this.setBpmnValues(this.externalURL);
+    },
+  },
+  computed: {
+    dashboardList() {
+      const list = this.filterValidDashboards(this.dashboards) || [];
+      return list;
+    },
+  },
+  created() {
+    this.loadDashboardsDebounced = debounce((filter) => {
+      this.loadDashboards(filter);
+    }, 500);
+    if (this.dashboardList.length === 0) {
+      this.loadDashboards();
+    }
+  },
+  mounted() {
+    this.urlModel = { ...this.defaultValues };
+    this.loadData();
+
+  },
+  methods: {
+    getValidationErrorForURL(url) {
+      if (!this.isValidURL(url)) {
+        return this.$t('Must be a valid URL');
+      }
+      return '';
+    },
+    isValidURL(string) {
+      try {
+        new URL(string);
+        return true;
+      } catch (_) {
+        return false;
+      }
+    },
+    loadData() {  
+      if (this.value) {
+        this.local = JSON.parse(this.value);
+        this.elementDestination = this.getElementDestination();
+        this.destinationType = this.getDestinationType();
+        if (this.destinationType  === 'customDashboard'){
+          this.customDashboard = this.getDestinationValue();
+        } 
+        if (this.destinationType  === 'externalURL'){
+          this.externalURL = this.getDestinationValue();
+        }
+      }
+    },
+    getElementDestination() {
+      if (!this.local?.type) return null;
+      return this.options.find(element => element.value === this.local.type);
+    },
+    getDestinationType() {
+      if (!this.local?.type) return null;
+      return this.local?.type;
+    },
+    getDestinationValue() {
+      if (!this.local?.value) return null;
+      return this.local?.value;
+    },
+    destinationTypeChange(newType){
+      this.destinationType = newType;
+      this.resetProperties(); 
+      const data =  JSON.stringify({
+        type: this.destinationType,
+        value: this.urlModel[this.destinationType],
+      });
+      this.$emit('input', data);
+    },
+
+    resetProperties() {
+      this.urlModel = { ...this.defaultValues };
+    },
+    searchChange(filter) {
+      this.loadDashboardsDebounced(filter);
+    },
+    loadDashboards(filter) {
+      this.loading = true;
+
+      const params = {
+        order_direction: 'asc',
+        per_page: 20,
+        page: 1,
+        fields: 'title,url',
+      };
+
+      if (filter) {
+        params.filter = filter;
+      }
+      window.ProcessMaker.apiClient.get('dynamic-ui/dashboards', {
+        params,
+      }).then(response => {
+        this.loading = false;
+        this.dashboards = response.data.data;
+      })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    filterValidDashboards(dashboards) {
+      return dashboards;
+    },
+    setBpmnValues(value) {
+      const data =  JSON.stringify({
+        type: this.destinationType,
+        value,
+      });
+      this.$emit('input', data);
+    },
+  },
+};
+</script>

src/components/inspectors/InspectorPanel.vue

@@ -231,7 +231,6 @@ export default {
 
         return data;
       }, {});
-
       this.data = type && this.nodeRegistry[type].inspectorData
         ? this.nodeRegistry[type].inspectorData(this.highlightedNode, defaultDataTransform, this)
         : defaultDataTransform(this.highlightedNode);

src/components/inspectors/endEventElementDestination.js

@@ -0,0 +1,20 @@
+import ElementDestination from '@/components/inspectors/ElementDestination.vue';
+
+export default {
+  component: ElementDestination,
+  config: {
+    label: 'Element Destination',
+    helper: 'Select the element destination',
+    placeholder: 'Select the element destination',
+    name: 'elementDestination',
+    destinationType: 'taskSource',
+    options: [
+      { value: 'summaryScreen', content: 'Summary Screen' },
+      { value: 'taskList', content: 'Task List' },
+      { value: 'processLaunchpad', content: 'Process Launchpad' },
+      { value: 'homepageDashboard', content: 'Welcome Screen' },
+      { value: 'customDashboard', content: 'Dashboard' },
+      { value: 'externalURL', content: 'External URL' },
+    ],
+  },
+};

src/components/inspectors/taskElementDestination.js

@@ -0,0 +1,20 @@
+import ElementDestination from '@/components/inspectors/ElementDestination.vue';
+
+export default {
+  component: ElementDestination,
+  config: {
+    label: 'Element Destination',
+    helper: 'Select the element destination',
+    placeholder: 'Select the element destination',
+    name: 'elementDestination',
+    destinationType: 'taskSource',
+    options: [
+      { value: 'taskSource', content: 'Task Source (Default)' },
+      { value: 'taskList', content: 'Task List' },
+      { value: 'processLaunchpad', content: 'Process Launchpad' },
+      { value: 'homepageDashboard', content: 'Welcome Dashboard' },
+      { value: 'customDashboard', content: 'Custom Dashboard' },
+      { value: 'externalURL', content: 'External URL' },
+    ],
+  },
+};

src/components/nodes/endEvent/index.js

@@ -4,6 +4,7 @@ import advancedAccordionConfig from '@/components/inspectors/advancedAccordionCo
 import documentationAccordionConfig from '@/components/inspectors/documentationAccordionConfig';
 import defaultNames from '@/components/nodes/endEvent/defaultNames';
 
+import elementDestination from '@/components/inspectors/endEventElementDestination';
 const id = 'processmaker-modeler-end-event';
 
 export default {
@@ -85,11 +86,12 @@ export default {
               component: 'FormInput',
               config: nameConfigSettings,
             },
+            elementDestination,
           ],
         },
         documentationAccordionConfig,
         advancedAccordionConfig,
       ],
     },
   ],
-};
+};

src/components/nodes/manualTask/index.js

@@ -3,6 +3,7 @@ import nameConfigSettings from '@/components/inspectors/nameConfigSettings';
 import advancedAccordionConfig from '@/components/inspectors/advancedAccordionConfig';
 import documentationAccordionConfig from '@/components/inspectors/documentationAccordionConfig';
 import defaultNames from '@/components/nodes/task/defaultNames';
+import elementDestination from '@/components/inspectors/taskElementDestination';
 
 export const taskHeight = 76;
 export const id = 'processmaker-modeler-manual-task';
@@ -50,11 +51,12 @@ export default {
               component: 'FormInput',
               config: nameConfigSettings,
             },
+            elementDestination,
           ],
         },
         documentationAccordionConfig,
         advancedAccordionConfig,
       ],
     },
   ],
-};
+};

src/components/nodes/signalEndEvent/index.js

@@ -4,7 +4,7 @@ import merge from 'lodash/merge';
 import cloneDeep from 'lodash/cloneDeep';
 import { signalSelector, default as signalEventDefinition } from '../signalEventDefinition';
 import defaultNames from '@/components/nodes/endEvent/defaultNames';
-
+import elementDestination from '@/components/inspectors/endEventElementDestination';
 export const id = 'processmaker-modeler-signal-end-event';
 
 export default merge(cloneDeep(endEventConfig), {
@@ -28,6 +28,7 @@ export default merge(cloneDeep(endEventConfig), {
           items: [
             {},
             signalSelector('Select the signal reference that this element throws'),
+            elementDestination,
           ],
         },
       ],

src/components/nodes/task/index.js

@@ -3,6 +3,8 @@ import nameConfigSettings from '@/components/inspectors/nameConfigSettings';
 import { taskHeight, taskWidth } from './taskConfig';
 import defaultNames from '@/components/nodes/task/defaultNames';
 import advancedAccordionConfigWithMarkerFlags from '@/components/inspectors/advancedAccordionConfigWithMarkerFlags';
+
+import elementDestination from '@/components/inspectors/taskElementDestination';
 import loopCharacteristicsInspector from '@/components/inspectors/LoopCharacteristics';
 import { loopCharacteristicsHandler, loopCharacteristicsData } from '@/components/inspectors/LoopCharacteristics';
 import documentationAccordionConfig from '@/components/inspectors/documentationAccordionConfig';
@@ -67,6 +69,7 @@ export default {
     handleMarkerFlagsValue(value.markerFlags, node, setNodeProp);
     loopCharacteristicsHandler(value, node, setNodeProp, moddle, definitions, isMultiplayer);
     defaultInspectorHandler(omit(value, 'markerFlags', '$loopCharactetistics'), isMultiplayer);
+    handleElementDestination(value.elementDestination, node, setNodeProp);
   },
   inspectorData(node, defaultDataTransform, inspector) {
     const inspectorData = defaultDataTransform(node);
@@ -96,6 +99,7 @@ export default {
               component: 'FormInput',
               config: nameConfigSettings,
             },
+            elementDestination,
           ],
         },
         loopCharacteristicsInspector,
@@ -121,3 +125,9 @@ function handleMarkerFlagsValue(markerFlags, node, setNodeProp) {
     setNodeProp(node, 'isForCompensation', newIsForCompensationValue);
   }
 }
+
+function handleElementDestination(value, node, setNodeProp) {
+  if (value) {
+    setNodeProp(node, 'elementDestination', value);
+  }
+}

src/setup/globals.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import mockProcesses from './mockProcesses.json';
+import mockDashboards from './mockDashboards.json';
 import mockSignals from './mockSignals.json';
 import mockProcessSvg from './mockProcessSvg';
 import { faker } from '@faker-js/faker';
@@ -29,7 +30,7 @@ mock.onGet(/\/processes\/\d+/).reply((config) => {
     setTimeout(() => resolve([200, { svg: mockProcessSvg, ...process }]), 1000);
   });
 });
-
+mock.onGet('dynamic-ui/dashboards').reply(200, mockDashboards);
 window.ProcessMaker = {
   navbar: {
     alerts: [],