@processmaker/screen-builder 2.65.0 → 2.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.65.0",
+  "version": "2.66.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -39,7 +39,7 @@
     "@cypress/code-coverage": "^3.8.1",
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.43.5",
+    "@processmaker/vue-form-elements": "0.44.0",
     "@processmaker/vue-multiselect": "^2.2.0",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-e2e-cypress": "^4.0.3",
@@ -88,7 +88,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.43.5",
+    "@processmaker/vue-form-elements": "0.44.0",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/DataProvider.js

@@ -3,6 +3,7 @@ import axios from "axios";
 import { has, get } from "lodash";
 import { cacheAdapterEnhancer } from "axios-extensions";
 import LRUCache from "lru-cache";
+import i18next from 'i18next';
 
 const FIVE_MINUTES = 1000 * 60 * 5;
 
@@ -215,5 +216,41 @@ export default {
 
   download(url) {
     return this.apiInstance().get(url, { responseType: "blob" });
-  }
+  },
+
+  getCollections() {
+    return this.get("/collections?per_page=1000").catch((error) => {
+      if (error.response && error.response.status === 404) {
+        throw new Error(i18next.t("Collections package not installed"));
+      }
+      throw error;
+    });
+  },
+
+  getCollectionFields(collectionId) {
+    return this.get(`/collections/${collectionId}/columns?per_page=1000`).catch((error) => {
+      if (error.response && error.response.status === 404) {
+        throw new Error(i18next.t("Collection id not found"));
+      }
+      throw error;
+    })
+  },
+
+  getCollectionRecords(collectionId, options, nonce = null) {
+    options.useCache = window.ProcessMaker.screen.cacheEnabled;
+
+    return this.get(`/collections/${collectionId}/records` + this.authQueryString(), options).then((response) => {
+      const data = response ? response.data : null;
+      if (!data) {
+        throw new Error(i18next.t("No data returned"));
+      }
+      return [data, nonce];
+    }).catch((error) => {
+      if (error.response && error.response.status === 404) {
+        const data = { data: [] };
+        return [data, nonce];
+      }
+      throw error;
+    });
+  },
 };

package/src/components/inspector/collection-select-list.vue

@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <div>
+      <label for="collection">{{ $t("Collection") }}</label>
+      <b-form-select
+        id="collection"
+        v-model="collectionId"
+        @change="resetFields"
+        :options="collections"
+        data-cy="inspector-collection"
+      />
+    </div>
+
+    <div class="mt-3" v-if="fields.length > 1">
+      <label for="label">{{ $t("Label") }}</label>
+      <b-form-select
+        id="label"
+        v-model="labelField"
+        :options="fields"
+        data-cy="inspector-collection-label"
+      />
+    </div>
+
+    <div class="mt-3" v-if="fields.length > 1">
+      <label for="value">{{ $t("Value") }}</label>
+      <b-form-select
+        id="value"
+        v-model="valueField"
+        :options="fields"
+        data-cy="inspector-collection-value"
+      />
+    </div>
+
+    <div class="mt-3" v-if="fields.length > 1">
+      <label for="pmql">{{ $t("PMQL") }}</label>
+      <mustache-helper />
+      <b-form-textarea
+        id="pmql"
+        rows="4"
+        v-model="pmql"
+        data-cy="inspector-collection-pmql"
+      />
+      <small class="form-text text-muted">{{
+        $t("Add a PMQL query to filter the result list. Use `data` as prefix")
+      }}</small>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import MustacheHelper from "./mustache-helper";
+import ScreenVariableSelector from '../screen-variable-selector.vue';
+
+const CONFIG_FIELDS = [
+  "collectionId",
+  "labelField",
+  "valueField",
+  "pmql",
+];
+
+export default {
+  props: ["value"],
+  components: {
+    MustacheHelper,
+    ScreenVariableSelector,
+  },
+  data() {
+    return {
+      collections: [],
+      fields: [],
+      collectionId: null,
+      labelField: null,
+      valueField: null,
+      pmql: "",
+    };
+  },
+  watch: {
+    value: {
+      handler(value) {
+        if (!value) {
+          return;
+        }
+        CONFIG_FIELDS.forEach(field => this[field] = value[field]);
+      },
+      immediate: true
+    },
+    collectionId: {
+      handler() {
+        this.getFields();
+      }
+    },
+    options: {
+      handler() {
+        this.$emit("input", this.options);
+      },
+      deep: true
+    }
+  },
+  computed: {
+    options() {
+      return Object.fromEntries(CONFIG_FIELDS.map(field => [field, this[field]]));
+    }
+  },
+  methods: {
+    resetFields() {
+      this.labelField = null;
+      this.valueField = null;
+    },
+    getCollections() {
+      this.$dataProvider.getCollections().then((response) => {
+        this.collections = [
+          { value: null, text: this.$t("Select a collection") },
+          ...response.data.data.map((collection) => {
+            return {
+              text: collection.name,
+              value: collection.id
+            };
+          })
+        ];
+      });
+    },
+    getFields() {
+      if (!this.collectionId) {
+        return;
+      }
+
+      this.$dataProvider
+        .getCollectionFields(this.collectionId)
+        .then((response) => {
+          this.fields = [
+            { value: null, text: this.$t("Select a field") },
+            { value: "id", text: this.$t("Collection Record ID") },
+            ...response.data.data.map((field) => {
+              return {
+                text: field.label,
+                value: field.field
+              };
+            })
+          ];
+        });
+    }
+  },
+  mounted() {
+    this.getCollections();
+    if (this.collectionId) {
+      this.getFields();
+    }
+  }
+};
+</script>

package/src/components/inspector/data-source-types.js

@@ -2,6 +2,7 @@ export const dataSources = [
   { value: 'provideData', text: 'Provide Values' },
   { value: 'dataObject', text: 'Request Data' },
   { value: 'dataConnector', text: 'Data Connector' },
+  { value: 'collection', text: 'Collection' },
 ];
 
 export const dataSourceValues = dataSources.reduce((values, source) => {

package/src/components/inspector/options-list.vue

@@ -129,6 +129,10 @@
       <b-form-input id="value" v-model="value" placeholder="Request Variable Property" @change="valueChanged" data-cy="inspector-options-label" />
       <small class="form-text text-muted mb-3">{{ $t('Enter the property name from the Request data variable that displays to the user on the screen.') }}</small>
     </div>
+    
+    <div v-if="dataSource === dataSourceValues.collection">
+      <collection-select-list v-model="collectionOptions"></collection-select-list>
+    </div>
 
     <div v-if="showRenderAs">
       <div class="row mb-3">
@@ -181,9 +185,11 @@
       </button>
     </div>
 
-    <label for="value-type-returned">{{ $t('Type of Value Returned') }}</label>
-    <b-form-select id="value-type-returded" v-model="valueTypeReturned" :options="returnValueOptions" data-cy="inspector-value-returned" />
-    <small class="form-text text-muted mb-3">{{ $t("Select 'Single Value' to use parts of the selected object. Select 'Object' to use the entire selected value.") }}</small>
+    <div v-if="showTypeOfValueReturned">
+      <label for="value-type-returned">{{ $t('Type of Value Returned') }}</label>
+      <b-form-select id="value-type-returded" v-model="valueTypeReturned" :options="returnValueOptions" data-cy="inspector-value-returned" />
+      <small class="form-text text-muted mb-3">{{ $t("Select 'Single Value' to use parts of the selected object. Select 'Object' to use the entire selected value.") }}</small>
+    </div>
 
     <div v-if="dataSource === dataSourceValues.dataConnector">
       <div v-if="valueTypeReturned === 'single'">
@@ -243,12 +249,14 @@ import { dataSources, dataSourceValues } from './data-source-types';
 import MonacoEditor from 'vue-monaco';
 import MustacheHelper from './mustache-helper';
 import _ from 'lodash';
+import CollectionSelectList from './collection-select-list';
 
 export default {
   components: {
     draggable,
     MonacoEditor,
-    MustacheHelper
+    MustacheHelper,
+    CollectionSelectList,
   },
   props: ['options', 'selectedControl'],
   model: {
@@ -266,6 +274,7 @@ export default {
       key: null,
       value: null,
       dataName: '',
+      collectionOptions: null,
       selectedDataSource: '',
       dataSourcesList: [],
       selectedEndPoint: '',
@@ -336,13 +345,22 @@ export default {
         case 'dataConnector':
           this.jsonData = '';
           this.dataName = '';
+          this.collectionOptions = null;
           this.getDataSourceList();
           break;
         case 'dataObject':
           this.jsonData = '';
           this.selectedDataSource = '';
+          this.collectionOptions = null;
           break;
         case 'provideData':
+          this.dataName = '';
+          this.selectedDataSource = '';
+          this.collectionOptions = null;
+          break;
+        case 'collection':
+          this.showRenderAs = false;
+          this.jsonData = '';
           this.dataName = '';
           this.selectedDataSource = '';
           break;
@@ -371,6 +389,9 @@ export default {
     },
   },
   computed: {
+    showTypeOfValueReturned() {
+      return this.dataSource !== dataSourceValues.collection
+    },
     endPointList() {
       return _.get(this.endpoints, this.selectedDataSource, []);
     },
@@ -413,6 +434,7 @@ export default {
         dataSource: this.dataSource,
         jsonData: this.jsonData,
         dataName: this.dataName,
+        collectionOptions: this.collectionOptions,
         selectedDataSource: this.selectedDataSource,
         selectedEndPoint: this.selectedEndPoint,
         key: this.key,
@@ -442,6 +464,7 @@ export default {
     this.dataSource = this.options.dataSource;
     this.jsonData = this.options.jsonData;
     this.dataName = this.options.dataName;
+    this.collectionOptions = this.options.collectionOptions;
     this.selectedDataSource = this.options.selectedDataSource,
     this.selectedEndPoint = this.options.selectedEndPoint,
     this.key = this.options.key;

package/src/components/screen-variable-selector.vue

@@ -0,0 +1,98 @@
+<template>
+  <form-multi-select
+    :name="$t('Variable to Watch')"
+    :label="$t('Variable to Watch') + ' *'"
+    :options="variables"
+    :taggable="true"
+    v-model="selectedVariable"
+    :placeholder="$t('None')"
+    :multiple="false"
+    :show-labels="false"
+    :internal-search="true"
+    :validation="validation"
+    :helper="helper"
+    @open="loadVariables"
+    @tag="addTag"
+    :tag-placeholder="$t('Press enter to use this variable')"
+    :data-cy="dataCy"
+  />
+</template>
+
+
+<script>
+
+import {
+  FormMultiSelect,
+} from '@processmaker/vue-form-elements';
+
+export default {
+  props: ["name", "label", "value", "helper", "validation", "dataCy"],
+  components: { FormMultiSelect },
+  data() {
+    return {
+      variables:[],
+      newTags:[],
+    };
+  },
+  computed: {
+    selectedVariable: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', value);
+      }
+    }
+  },
+  methods: {
+    addTag(tag) {
+      this.newTags.push(tag);
+      this.selectedVariable = tag;
+      this.variables = this.newTags.concat(this.variables);
+    },
+    loadVariables() {
+      this.variables = [];
+      //Search in all config screen
+      this.findElements(this.$root.$children[0].config);
+      this.variables = this.newTags.concat(this.variables);
+      if (this.selectedVariable && !this.variables.includes(this.selectedVariable)) {
+        this.variables.unshift(this.selectedVariable);
+      }
+    },
+    findElements(items, screens=[]) {
+      items.forEach(item => {
+        //If the element has containers (Multi-columns)
+        if (Array.isArray(item)) {
+          this.findElements(item);
+        }
+
+        //If the element has items
+        if (item.items) {
+          this.findElements(item.items);
+        }
+
+        //If the element has configuration only
+        if (item.config && item.config.name) {
+          this.variables.push(item.config.name);
+        }
+
+        // Variables from Nested screens
+        if (item.component === 'FormNestedScreen') {
+          this.loadVariablesFromScreen(item.config.screen, screens);
+        }
+      });
+    },
+    loadVariablesFromScreen(id, screens) {
+      if (screens.indexOf(id) === -1) {
+        screens.push(id);
+        if (id) {
+          this.$dataProvider.getScreen(id)
+            .then(response => {
+              this.findElements(response.data.config);
+            });
+        }
+      }
+    },
+  }
+};
+</script>

package/src/components/vue-form-builder.vue

@@ -702,6 +702,7 @@ export default {
     },
     updateState() {
       this.$store.dispatch('undoRedoModule/pushState', {'config': JSON.stringify(this.config), 'currentPage': this.currentPage});
+      window.ProcessMaker.EventBus.$emit('screen-change');
     },
     undo() {
       this.inspect();

package/src/components/watchers-form.vue

@@ -24,7 +24,7 @@
               aria-required="true"
             />
 
-            <form-multi-select
+            <!-- <form-multi-select
               :name="$t('Variable to Watch')"
               :label="$t('Variable to Watch') + ' *'"
               :options="variables"
@@ -41,6 +41,15 @@
               :tag-placeholder="$t('Press enter to use this variable')"
               data-cy="watchers-watcher-variable"
               ref="watching"
+            /> -->
+            <screen-variable-selector
+              :name="$t('Variable to Watch')"
+              :label="$t('Variable to Watch') + ' *'"
+              v-model="config.watching"
+              :validation="ruleWatcherVariable"
+              :helper="$t('Select the variable to watch on this screen or type any request variable name')"
+              data-cy="watchers-watcher-variable"
+              ref="watching"
             />
 
             <form-checkbox
@@ -267,6 +276,7 @@ import MonacoEditor from 'vue-monaco';
 import DataMapping from './inspector/data-mapping';
 import OutboundConfig from './inspector/outbound-config';
 import FocusErrors from '../mixins/focusErrors';
+import ScreenVariableSelector from './screen-variable-selector'
 
 import _ from 'lodash';
 
@@ -284,6 +294,7 @@ export default {
     MonacoEditor,
     DataMapping,
     OutboundConfig,
+    ScreenVariableSelector,
   },
   props: {
     config: {
@@ -318,8 +329,6 @@ export default {
       required: true,
       inputDataInvalid: false,
       scriptConfigurationInvalid: false,
-      variables:[],
-      newTags:[],
       scripts:[],
       script: null,
       monacoOptions: {
@@ -502,54 +511,6 @@ export default {
         });
       }
     },
-    addTag(tag) {
-      this.newTags.push(tag);
-      this.config.watching = tag;
-      this.variables = this.newTags.concat(this.variables);
-    },
-    loadVariables() {
-      this.variables = [];
-      //Search in all config screen
-      this.findElements(this.$root.$children[0].config);
-      this.variables = this.newTags.concat(this.variables);
-      if (this.config.watching && !this.variables.includes(this.config.watching)) {
-        this.variables.unshift(this.config.watching);
-      }
-    },
-    findElements(items, screens=[]) {
-      items.forEach(item => {
-        //If the element has containers (Multi-columns)
-        if (Array.isArray(item)) {
-          this.findElements(item);
-        }
-
-        //If the element has items
-        if (item.items) {
-          this.findElements(item.items);
-        }
-
-        //If the element has configuration only
-        if (item.config && item.config.name) {
-          this.variables.push(item.config.name);
-        }
-
-        // Variables from Nested screens
-        if (item.component === 'FormNestedScreen') {
-          this.loadVariablesFromScreen(item.config.screen, screens);
-        }
-      });
-    },
-    loadVariablesFromScreen(id, screens) {
-      if (screens.indexOf(id) === -1) {
-        screens.push(id);
-        if (id) {
-          this.$dataProvider.getScreen(id)
-            .then(response => {
-              this.findElements(response.data.config);
-            });
-        }
-      }
-    },
     loadSources() {
       this.scripts =  [];
       //call load data