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

src/components/inspectors/ElementDestination.vue

@@ -0,0 +1,204 @@
+<template>
+  <div>
+    <b-form-group :label="$t('Element Destination')">
+      <b-form-select id="" v-model="destinationType" @change="destinationTypeChange" data-test="element-destination-type">
+        <b-form-select-option :value="null" disabled>{{ $t('Select element destination') }}</b-form-select-option>
+        <option v-for="option in options" :key="option.value" :value="option.value">{{ $t(option.content) }}</option>
+      </b-form-select>
+      <small class="form-text text-muted">{{ $t("Enter the destination...") }}</small>
+    </b-form-group>
+
+    <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="customDashboad"
+      :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="false"
+      @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';
+export default {
+  props: {
+    options: {
+      type: Array,
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  name: 'ElementDestination',
+
+  data() {
+    return {
+      loading: false ,
+      validation: '',
+      destinationType: null,
+      dashboards: [],
+      customDashboad: 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',
+      dashboardOptions: [
+        { value: 'first', title: 'Dashboard 1' },
+        { value: 'second', title: 'Dashboard 2' },
+      ],
+      externalURL: '',
+    };  
+  },
+  watch: {
+    customDashboad() {
+      this.setBpmnValues({
+        title: this.customDashboad.title,
+        url: this.customDashboad.url,
+      });
+    },
+    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('invalid URL');
+      }
+      return '';
+    },
+    isValidURL(string) {
+      try {
+        new URL(string);
+        return true;
+      } catch (_) {
+        return false;
+      }
+    },
+    loadData() {  
+      if (this.value) {
+        this.local = JSON.parse(this.value);
+        this.destinationType = this.getDestinationType();
+        if (this.destinationType  === 'customDashboard'){
+          this.customDashboad = this.getDestinationValue();
+        } 
+        if (this.destinationType  === 'externalURL'){
+          this.externalURL = this.getDestinationValue();
+        }
+      }
+    },
+    getDestinationType() {
+      if (!this.local?.type) return null;
+      return this.local?.type;
+    },
+    getDestinationValue() {
+      if (!this.local?.value) return null;
+      return this.local?.value;
+    },
+    destinationTypeChange(){
+      this.resetProperties(this.destinationType); 
+      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/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: [],

src/setup/mockDashboards.json

@@ -0,0 +1,34 @@
+{
+  "data": [
+      {
+          "title": "DEFAULT_WELCOME_DASHBOARD",
+          "url": "http:\/\/processmaker.test\/home\/customize-ui\/dashboards\/mvPXig3uFOfiTwkCG8qpW6Fytk6KEbmNEFCxZ8mQHyCRROTYfY4x2yETnwRfFwzG"
+      }
+  ],
+  "meta": {
+      "current_page": 1,
+      "from": 1,
+      "last_page": 1,
+      "links": [
+          {
+              "url": null,
+              "label": "« Previous",
+              "active": false
+          },
+          {
+              "url": "\/?page=1",
+              "label": "1",
+              "active": true
+          },
+          {
+              "url": null,
+              "label": "Next »",
+              "active": false
+          }
+      ],
+      "path": "\/",
+      "per_page": 20,
+      "to": 1,
+      "total": 1
+  }
+}

src/setup/registerNodes.js

@@ -42,7 +42,6 @@ import {
   textAnnotation,
 } from '@/components/nodes';
 import bpmnExtension from '@processmaker/processmaker-bpmn-moddle/resources/processmaker';
-
 const nodeTypes = [
   startEvent,
   dataObject,