@processmaker/screen-builder 2.99.3 → 3.0.1

package/src/form-builder-controls.js

@@ -11,6 +11,8 @@ 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 FormCollectionRecordControl from './components/renderer/form-collection-record-control.vue';
+import FormCollectionViewControl from './components/renderer/form-collection-view-control.vue';
 import {DataTypeProperty, DataFormatProperty, DataTypeDateTimeProperty} from './VariableDataTypeProperties';
 import {
   FormInput,
@@ -43,7 +45,7 @@ import {
   buttonTypeEvent,
   tooltipProperty,
   LoadingSubmitButtonProperty,
-  LabelSubmitButtonProperty
+  LabelSubmitButtonProperty,
 } from './form-control-common-properties';
 
 export default [
@@ -54,7 +56,7 @@ export default [
     rendererBinding: 'FormHtmlEditor',
     control: {
       popoverContent: "Use a Rich Text Editor to add HTML-formatted",
-      order: 1.0,
+      order: 2.0,
       group: 'Content Fields',
       label: 'Rich Text',
       component: 'FormHtmlViewer',
@@ -96,7 +98,7 @@ export default [
     rendererBinding: 'FormMaskedInput',
     control: {
       popoverContent: "Collect a string of text and format it as one of several data types",
-      order: 1.0,
+      order: 2.0,
       group: 'Input Fields',
       label: 'Line Input',
       component: 'FormInput',
@@ -127,6 +129,7 @@ export default [
       ],
     },
   },
+
   {
     editorComponent: FormTextArea,
     editorBinding: 'FormTextArea',
@@ -134,7 +137,7 @@ export default [
     rendererBinding: 'FormTextArea',
     control: {
       popoverContent: "Collect a multi-line string of text, to allow for extensive, richly formatted responses",
-      order: 4.0,
+      order: 5.0,
       group: 'Input Fields',
       label: 'Textarea',
       component: 'FormTextArea',
@@ -192,7 +195,7 @@ export default [
     rendererBinding: 'FormSelectList',
     control: {
       popoverContent: "Collect options from a list, as radio butttons or dropdowns",
-      order: 2.0,
+      order: 3.0,
       group: 'Input Fields',
       label: 'Select List',
       component: 'FormSelectList',
@@ -247,7 +250,7 @@ export default [
     rendererBinding: 'FormCheckbox',
     control: {
       popoverContent: "Add a checkbox or toggle for true/false responses",
-      order: 6.0,
+      order: 7.0,
       group: 'Input Fields',
       label: 'Checkbox',
       component: 'FormCheckbox',
@@ -289,7 +292,7 @@ export default [
     rendererBinding: 'FormDatePicker',
     control: {
       popoverContent: "Collect a date or date/time",
-      order: 5.0,
+      order: 6.0,
       group: 'Input Fields',
       label: 'Date Picker',
       component: 'FormDatePicker',
@@ -343,7 +346,7 @@ export default [
     rendererBinding: 'FormButton',
     control: {
       popoverContent: "Add special buttons that link between subpages within this Form",
-      order: 1.0,
+      order: 2.0,
       group: 'Navigation',
       label: 'Page Navigation',
       component: 'FormButton',
@@ -378,7 +381,7 @@ export default [
     rendererBinding: 'FormMultiColumn',
     control: {
       popoverContent: "Organize and group your content in columns",
-      order: 2.0,
+      order: 3.0,
       group: 'Content Fields',
       label: 'Multicolumn / Table',
       component: 'FormMultiColumn',
@@ -423,7 +426,7 @@ export default [
     rendererBinding: 'FormLoop',
     control: {
       popoverContent: "Add a repeatable section of content",
-      order: 5.0,
+      order: 6.0,
       group: 'Content Fields',
       label: 'Loop',
       component: 'FormLoop',
@@ -459,7 +462,7 @@ export default [
     rendererBinding: 'FormRecordList',
     control: {
       popoverContent: "Format content in a table structure and allow for adding rows",
-      order: 4.0,
+      order: 5.0,
       group: 'Content Fields',
       label: 'Record List',
       component: 'FormRecordList',
@@ -486,6 +489,14 @@ export default [
             helper: 'The label describes this record list',
           },
         },
+        {
+          type: 'collectionDataSource',
+          field: 'source',
+          config: {
+            label: 'Source of Record List',
+            helper: 'A record list can display the data of a defined variable or a collection'
+          }
+        },
         {
           type: 'FormCheckbox',
           field: 'editable',
@@ -493,6 +504,7 @@ export default [
             label: 'Editable?',
             helper: 'Should records be editable/removable and can new records be added',
           },
+          if: 'hideControl'
         },
         {
           type: 'ColumnSetup',
@@ -502,6 +514,40 @@ export default [
             helper: 'List of columns to display in the record list',
           },
         },
+        {
+          type: 'FormMultiselect',
+          field: 'paginationOption',
+          config: {
+            icon: 'fas',
+            label: 'Pagination',
+            options: [
+              {
+                content:'No Pagination (show all)' ,
+                value: 0,
+              },
+              {
+                content: '5 items per page',
+                value: 5,
+              },
+              {
+                content: '10 items per page',
+                value: 10,
+              },
+              {
+                content: '15 items per page',
+                value: 15,
+              },
+              {
+                content: '25 items per page',
+                value: 25,
+              },
+              {
+                content: '50 items per page',
+                value: 50,
+              },
+            ],
+          },
+        },
         {
           type: 'PageSelect',
           field: 'form',
@@ -509,6 +555,7 @@ export default [
             label: 'Record Form',
             helper: 'The form to use for adding/editing records',
           },
+          if: 'hideControl'
         },
         colorProperty,
         bgcolorProperty,
@@ -522,7 +569,7 @@ export default [
     rendererBinding: 'FormImage',
     control: {
       popoverContent: "Upload an image to your screen",
-      order: 3.0,
+      order: 4.0,
       group: 'Content Fields',
       label: 'Image',
       component: 'FormImage',
@@ -589,7 +636,7 @@ export default [
     rendererBinding: 'FormAvatar',
     control: {
       popoverContent: "User avatar",
-      order: 3.0,
+      order: 4.0,
       group: 'Dashboards',
       label: 'User Avatar',
       component: 'FormAvatar',
@@ -633,7 +680,7 @@ export default [
     rendererBinding: 'FormButton',
     control: {
       popoverContent: "Add an action to submit your form or update a field",
-      order: 3.0,
+      order: 4.0,
       group: 'Input Fields',
       label: 'Submit Button',
       component: 'FormButton',
@@ -694,7 +741,7 @@ export default [
     rendererBinding: 'FormNestedScreen',
     control: {
       popoverContent: "Add and reuse another Form within this Form",
-      order: 6.0,
+      order: 7.0,
       group: 'Content Fields',
       label: 'Nested Screen',
       component: 'FormNestedScreen',
@@ -729,7 +776,7 @@ export default [
     control: {
       group: "Files",
       popoverContent: "Collect files uploaded into the Form",
-      order: 1.0,
+      order: 2.0,
       label: 'File Upload',
       component: 'FileUpload',
       'editor-component': 'FileUpload',
@@ -781,7 +828,7 @@ export default [
     builderBinding: 'FileDownload',
     control: {
       popoverContent: "Offer a File download",
-      order: 2.0,
+      order: 3.0,
       group: "Files",
       label: 'File Download',
       component: 'FileDownload',
@@ -817,7 +864,7 @@ export default [
     builderBinding: 'BFormComponent',
     control: {
       popoverContent: "Add one of several Bootstrap Vue components",
-      order: 1.0,
+      order: 2.0,
       group: 'Advanced',
       label: 'Bootstrap Component',
       component: 'BFormComponent',
@@ -871,7 +918,7 @@ export default [
     builderBinding: 'BWrapperComponent',
     control: {
       popoverContent: "Wrap an existing subpage within this Form into a Bootstrap Vue component",
-      order: 2.0,
+      order: 3.0,
       group: 'Advanced',
       label: 'Bootstrap Wrapper',
       component: 'BWrapperComponent',
@@ -970,7 +1017,7 @@ export default [
     rendererBinding: "FormAnalyticsChart",
     control: {
       popoverContent: "Add a chart from the Analytics Reports",
-      order: 6.0,
+      order: 7.0,
       group: 'Dashboards',
       label: "Analytics Chart",
       component: "FormAnalyticsChart",
@@ -1001,7 +1048,7 @@ export default [
     control: {
       popoverContent: "Add a URL where this link should redirect",
       group: 'Content Fields',
-      order: 6.0,
+      order: 7.0,
       label: "Link URL",
       component: "LinkButton",
       "editor-component": "LinkButton",
@@ -1032,5 +1079,105 @@ export default [
         buttonVariantStyleProperty
       ]
     }
+  },
+  {
+    control: {
+      popoverContent: "Drag and paste copied elements to your desired location.",
+      order: 1.0,
+      group: 'Clipboard',
+      label: 'Drag & Paste',
+      component: "Clipboard",
+      config: {
+        icon: 'fa fa-clipboard',
+      },
+      inspector: [],
+    },
+  },
+  {
+    editorComponent: FormCollectionRecordControl,
+    editorBinding: 'FormCollectionRecordControl',
+    rendererComponent: FormCollectionRecordControl,
+    rendererBinding: 'FormCollectionRecordControl',
+    control: {
+      popoverContent: "Create a Collection Record Control",
+      order: 7.0,
+      group: 'Content Fields',
+      label: 'Collection Record Control',
+      component: 'FormCollectionRecordControl',
+      'editor-component': 'FormCollectionRecordControl',
+      'editor-control': 'FormCollectionRecordControl',
+      config: {
+        name: 'Collection Record Control',
+        icon: 'fas fa-database',
+        label: 'Collection Record Control',
+      },
+      inspector: [
+        {
+          type: "collectionRecordsList",
+          field: "collection",
+          config: {
+            label: 'Collection Name',
+            helper: 'Select a collection',
+            value: '',
+          }
+        },
+        {
+          type: 'FormInput',
+          field: 'record',
+          config: {
+            label: 'Record ID',
+            helper: 'Supports Mustache Variable and the Collection Record',
+            value: '',
+          },
+        },
+        {
+          type: "collectionDisplayMode",
+          field: "collectionmode",
+          config: {
+            label: "Mode",
+          }
+        },
+      ],
+    },
+  },
+  {
+    editorComponent: FormCollectionViewControl,
+    editorBinding: 'FormCollectionViewControl',
+    rendererComponent: FormCollectionViewControl,
+    rendererBinding: 'FormCollectionViewControl',
+    control: {
+      popoverContent: "Create a Collection View Control",
+      order: 7.0,
+      group: 'Content Fields',
+      label: 'Collection Record View',
+      component: 'FormCollectionViewControl',
+      'editor-component': 'FormCollectionViewControl',
+      'editor-control': 'FormCollectionViewControl',
+      config: {
+        name: 'Collection View Control',
+        icon: 'fas fa-database',
+        label: 'Collection View Control',
+      },
+      inspector: [
+        {
+          type: "collectionRecordsList",
+          field: "collection",
+          config: {
+            label: 'Collection Name',
+            helper: 'Select a collection',
+            value: '',
+          }
+        },
+        {
+          type: 'FormInput',
+          field: 'record',
+          config: {
+            label: 'Record ID',
+            helper: 'Supports Mustache Variable and the Collection Record',
+            value: '',
+          },
+        }
+      ],
+    },
   }
 ];

package/src/global-properties.js

@@ -57,6 +57,14 @@ export default [
           validation: 'regex: [0-9]*',
         },
       },
+      {
+        type: 'EncryptedConfig',
+        field: 'encryptedConfig',
+        config: {
+          label: 'Encrypted',
+          helper: '',
+        },
+      },
     ],
   },
 ];

package/src/main.js

@@ -15,6 +15,7 @@ import { LRUCache } from "lru-cache";
 import VueFormElements from "@processmaker/vue-form-elements";
 import undoRedoModule from "@/store/modules/undoRedoModule";
 import globalErrorsModule from "@/store/modules/globalErrorsModule";
+import clipboardModule from "@/store/modules/clipboardModule";
 import ScreenBuilder from "@/components";
 import TestComponents from "../tests/components";
 
@@ -52,7 +53,8 @@ Vue.component("PmqlInput", {
 const store = new Vuex.Store({
   modules: {
     globalErrorsModule,
-    undoRedoModule
+    undoRedoModule,
+    clipboardModule
   }
 });
 
@@ -114,6 +116,35 @@ window.exampleScreens = [
     status: "ACTIVE"
   }
 ];
+
+const exampleUsers = [
+  {
+    id: 1,
+    username: 'admin',
+    status: 'ACTIVE',
+    fullname: 'Administrator',
+  },
+  {
+    id: 2,
+    username: 'jdavis',
+    status: 'INACTIVE',
+    fullname: 'Jonathan Davis',
+  }
+];
+
+const exampleGroups = [
+  {
+    id: 1,
+    name: 'Super Users',
+    status: 'ACTIVE',
+  },
+  {
+    id: 2,
+    name: 'Metalheads',
+    status: 'INACTIVE',
+  }
+];
+
 // get cache config from header
 const cacheEnabled = document.head.querySelector(
   "meta[name='screen-cache-enabled']"
@@ -179,6 +210,28 @@ window.ProcessMaker = {
               ]
             }
           });
+        }  else if (url === "users") {
+            resolve({
+              data: {
+                data: exampleUsers
+              }
+            });
+        }  else if (url === "groups") {
+            resolve({
+              data: {
+                data: exampleGroups
+              }
+            });
+        }  else if (url.substr(0, 6) === "users/") {
+          const index = url.substr(6, 1);
+          resolve({
+            data: exampleUsers[index - 1]
+          });
+        }  else if (url.substr(0, 7) === "groups/") {
+          const index = url.substr(7, 1);
+          resolve({
+            data: exampleGroups[index - 1]
+          });
         } else {
           window.axios
             .get(url, params)
@@ -202,6 +255,12 @@ window.ProcessMaker = {
               }
             });
             break;
+          case "/api/1.0/encrypted_data/encryptText":
+            resolve("62abf17e-d1a6-4f68-a382-ed63872d29b0");
+            break;
+          case "/api/1.0/encrypted_data/decryptText":
+            resolve("Secret Value");
+            break;
           default:
             window.axios
               .post(url, body)

package/src/mixins/Clipboard.js

@@ -0,0 +1,153 @@
+import { v4 as uuidv4 } from 'uuid';
+import _ from "lodash";
+
+const clipboardComponentName = "Clipboard";
+
+export default {
+  data() {
+    return {
+      showClipboard: false,
+    };
+  },
+  methods: {
+    /**
+     * Adds a deep-cloned item to the clipboard, ensuring the original item is unmodified.
+     * 
+     * @param {Object} item - The item to add to the clipboard.
+     * @returns {void}
+     */
+    addToClipboard(item) {
+      const duplicate = _.cloneDeep(item); // Create a deep copy of the item
+      this.$store.dispatch("clipboardModule/addToClipboard", duplicate); // Dispatch action to add item to the Vuex store
+      this.$root.$emit('update-clipboard');
+    },
+
+    /**
+     * Removes the specified item from the clipboard.
+     * 
+     * @param {Object} item - The item to remove from the clipboard.
+     * @returns {void}
+     */
+    removeFromClipboard(item) {
+      this.$store.dispatch("clipboardModule/removeFromClipboard", item); // Dispatch action to remove item from the Vuex store
+      this.$root.$emit('update-clipboard');
+    },
+
+    /**
+     * Checks if the specified item is currently in the clipboard.
+     * 
+     * @param {Object} item - The item to check.
+     * @returns {Boolean} - Returns true if the item is in the clipboard, otherwise false.
+     */
+    isInClipboard(item) {
+      return this.$store.getters["clipboardModule/isInClipboard"](item); // Use Vuex getter to check if item exists in the clipboard
+    },
+
+    /**
+     * Generate a unique UUID for the specified item.
+     */
+    generateUUID() {
+      return uuidv4(); // Generate a unique identifier using UUID v4
+    },
+
+    /**
+     * Add a UUID to each element in the screen configuration.
+     *
+     * @param array screenConfig 
+     */
+    addUuidToElements(screenConfig) {
+      const replaceInPage = (page) => {
+        page.items.forEach((item, index) => {
+          if (!item.uuid) {
+            item.uuid = this.generateUUID();
+          }
+          if (item.items) {
+            replaceInPage(item);
+          }
+        });
+      }
+
+      screenConfig.forEach((item) => replaceInPage(item));
+    },
+
+    /**
+     * Setup or update UUID for the item and its children.
+     *
+     * @param {*} item Control item in the screen configuration
+     */
+    updateUuids(item) {
+      item.uuid = this.generateUUID();
+      if (item.items) {
+        item.items.forEach(item => {
+          if (item instanceof Array) {
+            // multi-column each item in the column
+            item.forEach(this.updateUuids)
+          } else {
+            // loop through children
+            this.updateUuids(item);
+          }
+        })
+      }
+    },
+
+    /**
+     * Find { component: "Clipboard" } and replace with the clipboard content.
+     */
+    replaceClipboardContent(screenConfig) {
+      if (
+        !screenConfig
+        || screenConfig instanceof Array === false
+      ) {
+        throw new Error("Expected a screen configuration array");
+      }
+
+      const replaceInPage = (page) => {
+        page.items.forEach((item, index) => {
+          if (item.component === clipboardComponentName) {
+            // clone clipboard content to avoid modifying the original
+            const clipboardContent = _.cloneDeep(this.$store.getters["clipboardModule/clipboardItems"]);
+            // replace uuids in clipboard content
+            clipboardContent.forEach(this.updateUuids);
+            page.items.splice(index, 1, ...clipboardContent);
+          }
+          if (item.items) {
+            replaceInPage(item);
+          }
+        });
+      }
+      screenConfig.forEach((item) => replaceInPage(item));
+    },
+
+    /**
+     * Clear the clipboard
+     */
+    async clearClipboard() {
+      const confirm = await this.$bvModal.msgBoxConfirm(
+        this.$t("Deleting the clipboard will permanently remove all information, and you will need to copy all components again."),
+        {
+          title: this.$t("Are you sure you want to clear clipboard?"),
+          size: "md",
+          buttonSize: "sm",
+          okVariant: "primary py-2 px-4",
+          cancelVariant: "outline-secondary py-2 px-4",
+          okTitle: this.$t("Confirm"),
+          cancelTitle: this.$t("Cancel"),
+          footerClass: "p-2 border-0",
+          hideHeaderClose: true,
+          centered: true,
+        }
+      );
+      if (confirm) {
+        this.$store.dispatch("clipboardModule/clearClipboard");
+        this.$root.$emit('update-clipboard');
+      }
+    },
+
+    /**
+     * Close Clipboard
+     */
+    closeClipboard() {
+      this.showClipboard = false;
+    },
+  },
+};

package/src/mixins/ScreenBase.js

@@ -43,6 +43,12 @@ export default {
     _initialPage: {
       default: 0,
     },
+    taskdraft: Object
+  },
+  mounted() {
+    if(this.taskdraft){
+      this.$root.$emit("taskdraft-input", this.taskdraft);
+    }
   },
   computed: {
     ...mapState("globalErrorsModule", {
@@ -164,7 +170,7 @@ export default {
         // if the form is not valid the data is not emitted
         return;
       }
-      this.$emit('submit', this.vdata, loading, buttonInfo);
+      this.$emit('submit', this.vdata, loading, buttonInfo);;
     },
     resetValue(safeDotName, variableName) {
       this.setValue(safeDotName, null);

package/src/mixins/index.js

@@ -18,3 +18,4 @@ export { default as testing } from "./testing";
 export { ValidationMsg, validators } from "./ValidationRules";
 export { default as VisibilityRule } from "./VisibilityRule";
 export { default as watchers } from "./watchers";
+export { default as Clipboard } from "./Clipboard";