@processmaker/screen-builder 2.99.2 → 3.0.0

package/src/components/renderer/form-collection-view-control.vue

@@ -0,0 +1,236 @@
+<template>
+  <vue-form-renderer
+    ref="collectionViewControl"
+    class="form-collection-record-control"
+    :placeholder="placeholder"
+    v-model="data"
+    mode="preview"
+    :config="validatedConfig"
+    :computed="computed"
+    :custom-css="customCss"
+    :watchers="watchers"
+    :_parent="_parent"
+  />
+</template>
+
+<script>
+import VueFormRenderer from "../vue-form-renderer.vue";
+
+const globalObject = typeof window === "undefined" ? global : window;
+
+const defaultConfig = [
+  {
+    name: "empty",
+    items: []
+  }
+];
+
+export default {
+  components: {
+    VueFormRenderer
+  },
+  props: {
+    name: String,
+    validationData: null,
+    _parent: null,
+    record: null,
+    collection: {
+      type: Object
+    },
+    taskdraft: Object,
+  },
+  data() {
+    return {
+      localData: {},
+      config: defaultConfig,
+      computed: [],
+      customCSS: null,
+      watchers: [],
+      screenTitle: null,
+      selCollectionId: Number,
+      selRecordId: Number,
+      selDisplayMode: String,
+      screenCollectionId: null,
+      placeholder: "Select a collection",
+      screenType: "",
+      hasMustache: false,
+      flagDraft: {},
+      taskDraft: {},
+      collectionmode: "View"
+    };
+  },
+  computed: {
+    validatedConfig() {
+      return this.config && this.config[0] ? this.config : defaultConfig;
+    },
+    data: {
+      get() {
+        if(this.hasMustache) {
+          this.clearDataObject();
+        }
+        return this.localData;
+      },
+      set(data) {
+        Object.keys(data).forEach((variable) => {
+          this.validationData && this.$set(this.validationData, variable, data[variable]);
+        });
+
+        if (this.collection) {
+          this.$set(this.collection, 'data', Array.isArray(data) ? data : [data]);
+          this.$set(this.collection, 'screen', this.screenCollectionId);
+        }
+      },
+    },
+  },
+  methods: {
+    isSubmitButton(item) {
+      return (
+        item.config &&
+        item.component === "FormButton" &&
+        item.config.event === "submit"
+      );
+    },
+    hideSubmitButtons(config) {
+      config.forEach((item) => {
+        //If the element has containers
+        if (Array.isArray(item)) {
+          this.hideSubmitButtons(item);
+        }
+
+        //If the element has items
+        if (item.items) {
+          this.hideSubmitButtons(item.items);
+        }
+
+        //hidden buttons
+        if (this.isSubmitButton(item)) {
+          item.config.hidden = true;
+        }
+      });
+    },
+    disableForm(config) {
+      config.forEach((item) => {
+        //If the element has containers
+        if (Array.isArray(item)) {
+          this.disableForm(item);
+        }
+
+        //If the element has items
+        if (item.items) {
+          this.disableForm(item.items);
+        }
+
+        //Disable element
+        if (item && item.config) {
+          item.config.disabled = true;
+          item.config.readonly = true;
+          item.config.editable = false;
+        }
+      });
+    },
+    loadScreen(id) {
+      this.config = defaultConfig;
+      this.computed = [];
+      this.customCSS = null;
+      this.watchers = [];
+      this.screenTitle = null;
+
+      if (id) {
+        this.$dataProvider.getScreen(id).then((response) => {
+          this.config = response.data.config;
+          this.hideSubmitButtons(this.config);
+          this.computed = response.data.computed;
+          this.customCSS = response.data.custom_css;
+          this.watchers = response.data.watchers;
+          this.screenTitle = response.data.title;
+
+          if (this.$attrs["disabled"]) {
+            this.disableForm(this.config);
+          }
+        });
+      }
+    },
+    callbackRecord() {
+      this.hasMustache = true;
+      this.loadRecordCollection(this.selCollectionId, 1, this.selDisplayMode);
+    },
+    errors() {
+      this.$refs.nestedScreen.isValid();
+      return this.$refs.nestedScreen.errors;
+    },
+    loadRecordCollection(collectionId, recordId, modeId) {
+      this.selCollectionId = collectionId;
+      this.selRecordId = recordId;
+      this.selDisplayMode = modeId;
+
+      this.$dataProvider
+        .getCollectionRecordsView(collectionId, recordId)
+        .then((response) => {
+          this.placeholder = "";
+          const respData = response.data;
+          const viewScreen = response.collection.read_screen_id;
+            //Choose screen id regarding of the display Mode
+          this.screenCollectionId = viewScreen;
+          this.loadScreen(this.screenCollectionId);
+
+          //This section validates if Collection has draft data
+          if(this.taskDraft?.draft?.data == null || this.taskDraft.draft.data === '') {
+            this.localData = respData;
+          }else{
+            this.localData = this.taskDraft.draft.data;
+          }
+          
+        })
+        .catch(() => {
+          this.localData = {};
+          globalObject.ProcessMaker.alert(this.$t('This content does not exist. We could not locate indicated data'), "danger");
+        });;
+    },
+    isMustache(record) {
+      return /\{\{.*\}\}/.test(record);
+    },
+    clearDataObject() {
+      Object.keys(this.localData).forEach(key => {
+        if (key !== "id") {
+          this.localData[key] = "";
+        }
+      });
+    },
+  },
+  watch: {
+    collection(collection) {
+      if(collection) {
+        this.selCollectionId = collection.collectionId;
+        this.$root.$emit("collection-screen-mode", "display");
+      }
+    },
+    record(record) {
+      this.hasMustache = false;
+      if (record && !isNaN(record) && record > 0 && this.collection) {
+        this.selRecordId = record;
+        this.loadRecordCollection(this.selCollectionId, record, this.collectionmode);
+      } else {
+        if (this.isMustache(record)) {
+          this.callbackRecord();
+        }
+        this.localData = {};
+      }
+    }
+  },
+  mounted() {
+    this.$root.$on("taskdraft-input", (val)=>{
+      this.taskDraft = val;
+    });
+
+    if (this.collection && this.record) {
+      this.loadRecordCollection(this.collection.collectionId, this.record, this.collectionmode);
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+.prevent-interaction.form-collection-view-control::after {
+  content: attr(placeholder);
+}
+</style>

package/src/components/renderer/form-masked-input.vue

@@ -3,7 +3,7 @@
     <required-asterisk /><label v-uni-for="name">{{ label }}</label>
     <component
       :is="componentType"
-      v-if="componentType !== 'input'"
+      v-if="componentType !== 'input' && !encryptedConfig?.encrypted"
       v-model="localValue"
       v-bind="componentConfigComputed"
       v-uni-id="name"
@@ -14,7 +14,7 @@
       @change="onChange"
     />
     <input
-      v-else
+      v-else-if="componentType === 'input' && !encryptedConfig?.encrypted"
       v-model="localValue"
       v-bind="componentConfig"
       v-uni-id="name"
@@ -25,6 +25,37 @@
       :maxlength="maxlength"
       @change="onChange"
     />
+    <div class="div-data-container" v-else-if="encryptedConfig?.encrypted">
+      <component
+        :is="componentType"
+        v-if="componentType !== 'input'"
+        v-model="localValue"
+        v-bind="componentConfigComputed"
+        v-uni-id="name"
+        :name="name"
+        class="form-control"
+        :class="classList"
+        :type="inputType"
+        @change="onChange"
+      />
+      <input
+        v-else
+        v-model="localValue"
+        v-bind="componentConfig"
+        v-uni-id="name"
+        :name="name"
+        class="form-control"
+        :class="classList"
+        :type="inputType"
+        :maxlength="maxlength"
+        @change="onChange"
+      />
+      <b-button variant="outline-secondary conceal-reveal-btn" @click="concealOrReveal">
+        <i :class="iconBtn"></i>
+        <span> {{ labelBtn }} </span>
+      </b-button>
+    </div>
+
     <template v-if="validator && validator.errorCount">
       <div
         v-for="(errors, index) in validator.errors.all()"
@@ -37,6 +68,7 @@
       </div>
     </template>
     <div v-if="error" class="invalid-feedback">{{ error }}</div>
+    <div v-if="encryptedConfig?.encrypted && errorEncryptedField" class="invalid-feedback d-block">{{ errorEncryptedField }}</div>
     <small v-if="helper" class="form-text text-muted">{{ helper }}</small>
   </div>
 </template>
@@ -52,6 +84,7 @@ import {
   ValidationMixin
 } from "@processmaker/vue-form-elements";
 import Inputmasked from "./form-input-masked.vue";
+import { validate as uuidValidate } from 'uuid';
 
 const uniqIdsMixin = createUniqIdsMixin();
 const componentTypes = {
@@ -86,7 +119,8 @@ export default {
     // these should not be passed by $attrs
     "transientData",
     "formConfig",
-    "form-watchers"
+    "form-watchers",
+    "encryptedConfig",
   ],
   data() {
     const { dataFormat, customFormatter } = this.config;
@@ -190,20 +224,35 @@ export default {
       localValue: null,
       validationRules: {
         percentage: "regex:/^[+-]?\\d+(\\.\\d+)?$/"
-      }
+      },
+      // For encrypted field
+      inputType: '',
+      iconBtn: '',
+      labelBtn: '',
+      errorEncryptedField: '',
+      concealExecuted: false,
     };
   },
   computed: {
     classList() {
       return {
         "is-invalid":
-          (this.validator && this.validator.errorCount) || this.error,
+          (this.validator && this.validator.errorCount) || this.error || this.errorEncryptedField,
         [this.controlClass]: !!this.controlClass
       };
     },
     componentConfigComputed() {
       return JSON.parse(JSON.stringify(this.componentConfig));
-    }
+    },
+    mode() {
+      return this.$root.$children[0].mode;
+    },
+    inStandAloneMode() {
+      return this.mode === 'preview' && window.exampleScreens !== undefined;
+    },
+    inPreviewMode() {
+      return this.mode === 'preview';
+    },
   },
   watch: {
     value(value) {
@@ -212,8 +261,22 @@ export default {
       }
     },
     localValue(value) {
-      if (value !== this.value) {
-        this.$emit("input", this.convertToData(value));
+      if (!this.encryptedConfig?.encrypted) {
+        // Normal behaviour
+        if (value !== this.value) {
+          this.$emit("input", this.convertToData(value));
+        }
+      } else {
+        // Encrypted field behaviour
+        if (!this.concealExecuted) {
+          if (value !== this.value) {
+            this.$emit("input", this.convertToData(value));
+          }
+        } else {
+          if (uuidValidate(value)) {
+            this.$emit("input", value);
+          }
+        }
       }
     }
   },
@@ -221,6 +284,26 @@ export default {
     if (this.value !== undefined) {
       this.localValue = this.value;
     }
+    /*
+     * Set initial atttributes for Conceal/Reveal button only if
+     * "encrypted" attribute is enabled
+     */
+    if (this.encryptedConfig?.encrypted) {
+      if (uuidValidate(this.localValue)) {
+        this.inputType = "password";
+        this.iconBtn = "fas fa-eye";
+        this.labelBtn = this.$t("Reveal");
+        this.concealExecuted = true;
+        this.componentConfig.readonly = true;
+      } else {
+        this.inputType = "text";
+        this.iconBtn = "fas fa-eye-slash";
+        this.labelBtn = this.$t("Conceal");
+        this.componentConfig.readonly = false;
+      }
+    } else {
+      this.inputType = this.dataType;
+    }
   },
   methods: {
     onChange() {
@@ -291,7 +374,109 @@ export default {
         date: ["####-##-##"],
         dateTime: ["####-##-## ##:##"]
       };
-    }
+    },
+    afterEncrypt(encryptedValue) {
+      // Change controls appearance
+      this.inputType = "password";
+      this.iconBtn = "fas fa-eye";
+      this.labelBtn = this.$t("Reveal");
+      this.concealExecuted = true;
+      this.componentConfig.readonly = true;
+      this.errorEncryptedField = "";
+
+      // Assign uuid from encrypted data
+      this.localValue = encryptedValue;
+    },
+    afterDecrypt(decryptedValue) {
+      // Change controls appearance
+      this.inputType = this.dataType;
+      this.iconBtn = "fas fa-eye-slash";
+      this.labelBtn = this.$t("Conceal");
+      this.componentConfig.readonly = false;
+
+      // Assign value decrypted
+      this.localValue = decryptedValue;
+    },
+    concealOrReveal() {
+      // Execute only if "encrypted" attribute is enabled
+      if (this.encryptedConfig?.encrypted) {
+        if (this.inputType === "text") {
+          if (this.localValue !== "") {
+            if (this.inStandAloneMode || !this.inPreviewMode) {
+              // Build data to send
+              const dataToEncrypt = {
+                uuid: uuidValidate(this.value) ? this.value : null,
+                field_name: this.name,
+                plain_text: this.localValue,
+                screen_id: this.$root.task?.screen?.screen_id || window?.PM4ConfigOverrides?.authParams?.screen_id
+              };
+
+              // Call endpoint to encrypt data
+              window.ProcessMaker.apiClient
+                .post("/api/1.0/encrypted_data/encryptText", dataToEncrypt)
+                .then((response) => {
+                  const v = response?.data !== undefined ? response?.data : response;
+                  this.afterEncrypt(v);
+                })
+                .catch((err) => {
+                  const { data } = err.response;
+                  if (data.message) {
+                    this.errorEncryptedField = data.message;
+                  }
+                });
+            } else {
+              const response = this.localValue;
+              this.afterEncrypt(response);
+            }
+          } else {
+            this.errorEncryptedField = this.$t(
+              "The current value is empty but a value is required. Please provide a valid value."
+            );
+          }
+        } else {
+          if (this.inStandAloneMode || !this.inPreviewMode) {
+            // Build data to send
+            const dataToDecrypt = {
+              uuid: this.value,
+              field_name: this.name,
+              screen_id: this.$root.task?.screen?.screen_id || window?.PM4ConfigOverrides?.authParams?.screen_id
+            };
+
+            // Call endpoint to decrypt data
+            window.ProcessMaker.apiClient
+              .post("/api/1.0/encrypted_data/decryptText", dataToDecrypt)
+              .then((response) => {
+                const v = response?.data !== undefined ? response?.data : response;
+                this.afterDecrypt(v);
+              })
+              .catch((err) => {
+                const { data } = err.response;
+                if (data.message) {
+                  this.errorEncryptedField = data.message;
+                }
+              });
+          } else {
+            const response = this.localValue;
+            this.afterDecrypt(response);
+          }
+        }
+      }
+    },
   }
 };
 </script>
+<style scoped>
+.div-data-container {
+  display: inline-flex;
+  width: 100%;
+}
+.conceal-reveal-btn {
+  width: 25%;
+  margin-left: 5px;
+}
+@media screen and (max-width: 1000px) {
+  .conceal-reveal-btn span {
+    display: none;
+  }
+}
+</style>