FOUR-18107 - Feature/FOUR-18319: Save data to collection (backend) if enabled - create/update

resources/js/tasks/show.js

@@ -13,6 +13,7 @@ import TasksList from "./components/TasksList.vue";
 import TaskSavePanel from "./components/TaskSavePanel.vue";
 import autosaveMixins from "../modules/autosave/autosaveMixin";
 import draftFileUploadMixin from "../modules/autosave/draftFileUploadMixin";
+import Mustache from "mustache";
 
 Vue.use(Vuex);
 Vue.use("task", Task);
@@ -31,3 +32,4 @@ Vue.mixin(draftFileUploadMixin);
 
 window.debounce = debounce;
 window.Vuex = Vuex;
+window.Mustache = Mustache;

resources/views/tasks/edit.blade.php

@@ -643,6 +643,48 @@ class="multiselect__tag-icon"></i>
           updateTask(val) {
             this.$set(this, 'task', val);
           },
+          processCollectionData(task) {
+            const results = [];
+            // Verify if object "screen" exists
+            if (task.screen) {
+                // Verify if "config" array exists and it has at least one element
+                if (Array.isArray(task.screen.config) && task.screen.config.length > 0) {
+                    // Iteration on "config" array
+                    for (let configItem of task.screen.config) {
+                        // Verify if "items" array exists
+                        if (Array.isArray(configItem.items)) {
+                            // Iteration over each "items" element
+                            for (let item of configItem.items) {
+                                // Verify if component "FormCollectionRecordControl" is inside the screen
+                                if (item.component === "FormCollectionRecordControl") {
+                                    // Access to FormCollectionRecordControl "config" object
+                                    const config = item.config;
+
+                                    // Saving values into variables
+                                    const collectionFields = config.collection.data[0];
+                                    const submitCollectionChecked = config.collectionmode.submitCollectionCheck;
+                                    let recordId = "";
+                                    const record = config.record;
+
+                                    if (this.isMustache(record)) {
+                                      recordId = Mustache.render(record, this.formData);
+                                    } else {
+                                      recordId = parseInt(record, 10);
+                                    }
+                                    const collectionId = config.collection.collectionId;
+                                    // Save the values into the results array
+                                    results.push({ submitCollectionChecked, recordId, collectionId, collectionFields });
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            return results.length > 0 ? results : null;
+          },
+          isMustache(record) {
+            return /\{\{.*\}\}/.test(record);
+          },
           submit(task) {
             if (this.isSelfService) {
               ProcessMaker.alert(this.$t('Claim the Task to continue.'), 'warning');
@@ -651,6 +693,29 @@ class="multiselect__tag-icon"></i>
                 return;
               }
 
+              // If screen has CollectionControl components saves collection data (if submit check is true)
+              const resultCollectionComponent = this.processCollectionData(this.task);
+              let messageCollection = this.$t('Collection data was updated');
+
+              if (resultCollectionComponent && resultCollectionComponent.length > 0) {
+                resultCollectionComponent.forEach(result => {
+                  if (result.submitCollectionChecked) {
+                    let collectionKeys = Object.keys(result.collectionFields);
+                    let matchingKeys = _.intersection(Object.keys(this.formData), collectionKeys);
+                    let collectionsData = _.pick(this.formData, matchingKeys);
+
+                    ProcessMaker.apiClient
+                      .put("collections/" + result.collectionId + "/records/" + result.recordId, {
+                        data: collectionsData,
+                        uploads: []
+                      })
+                      .then(() => {
+                        window.ProcessMaker.alert(messageCollection, 'success', 5, true);
+                      });
+                  }
+                });
+              }
+
               let message = this.$t('Task Completed Successfully');
               const taskId = task.id;
               this.submitting = true;