@processmaker/screen-builder 2.99.3 → 3.0.0

package/src/components/inspector/encrypted-config.vue

@@ -0,0 +1,78 @@
+<template>
+  
+  <div>
+    <div class="form-group">
+      <b-form-checkbox
+        v-model="settings.encrypted"
+        @change="emitChanges"
+        switch
+      >
+        {{ $t("Encrypted") }}
+      </b-form-checkbox>
+
+      <div v-if="settings.encrypted">
+        <select-user-group
+          :key="componentKey"
+          :label="$t('Users/Groups to View')"
+          v-model="settings.assignments"
+          :multiple="true"
+          @input="emitChanges"
+        />
+      </div>
+  </div>
+</div>
+
+</template>
+
+<script>
+import SelectUserGroup from '../../components/SelectUserGroup.vue';
+
+export default {
+  components: { SelectUserGroup },
+  props: {
+    label: String,
+    value: {
+      type: Object,
+      default: () => {
+        return {
+          encrypted: false,
+          assignments: {users: [], groups: []},
+        };
+      }
+    },
+    helper: String,
+  },
+  data() {
+    return {
+      componentKey: 0,
+      settings:{
+        encrypted: false,
+        assignments: {users: [], groups: []},
+      },
+    };
+  },
+  watch: {
+    value: {
+      handler() {
+        this.settings = this.value;
+        if (this.value.encrypted) {
+          // Force to redraw component
+          this.componentKey += 1;
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    emitChanges() {
+      if (!this.settings.encrypted) {
+        this.settings.assignments = {users: [], groups: []};
+      }
+      this.$emit("input", this.settings);
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/inspector/index.js

@@ -1,4 +1,7 @@
 export { default as CollectionSelectList } from "./collection-select-list.vue";
+export { default as CollectionRecordsList } from "./collection-records-list.vue";
+export { default as collectionDataSource } from "./collection-data-source.vue";
+export { default as CollectionDisplayMode } from "./collection-display-mode.vue";
 export { default as ColorSelect } from "./color-select.vue";
 export { default as ColumnSetup } from "./column-setup.vue";
 export { default as ContainerColumns } from "./container-columns.vue";
@@ -23,3 +26,4 @@ export { default as ValidationSelect } from "./validation-select.vue";
 export { default as LoadingSubmitButton } from "./loading-submit-button.vue";
 export { default as LabelSubmitButton } from "./label-submit-button.vue";
 export { default as AnalyticsSelector } from "./analytics-selector.vue";
+export { default as EncryptedConfig } from "./encrypted-config.vue";

package/src/components/inspector/page-select.vue

@@ -9,6 +9,7 @@
       :show-labels="false"
       :options="options.map(option => option.value)"
       :custom-label="getLabelFromValue"
+      data-cy="inspector-eventData"
     >
       <template slot="noResult">
         {{ $t('No elements found. Consider changing the search query.') }}

package/src/components/renderer/file-upload.vue

@@ -19,7 +19,7 @@
     >
       <uploader-unsupport/>
 
-      <uploader-drop v-if="uploaderLoaded" class="form-control-file">
+      <uploader-drop v-if="uploaderLoaded && !isConversationalForm" class="form-control-file">
         <p>{{ $t('Drop a file here to upload or') }}</p>
         <uploader-btn
           :attrs="nativeButtonAttrs"
@@ -33,7 +33,64 @@
         </uploader-btn>
         <span v-if="validation === 'required' && !value" class="required">{{ $t('Required') }}</span>
       </uploader-drop>
-      <uploader-list>
+
+      <!-- Render the conversational form file upload UI when the screen type is conversational forms -->
+      <uploader-list v-if="isConversationalForm" class="cf-uploader-list">
+        <template v-slot="{fileList}">
+          <ul v-if="uploading" class="cf-upload-progress">
+            <li v-for="file in fileList" :key="file.id || file.name">
+              <uploader-file :file="file" list />
+            </li>
+          </ul>
+          <ul v-else>
+            <li v-for="(file, i) in files" :key="file.id || i" :data-cy="file.id" class="cf-file-upload-list">
+              <span class="cf-filename text-truncate">
+                <i :class="getFileIconClass(file)" class="mr-2"></i>
+                {{ nativeFiles[file.id].name }}
+              </span>
+              <b-btn 
+                variant="outline" 
+                @click="removeFile(file)" 
+                v-b-tooltip.hover :title="$t('Delete')"
+                class="pr-0"
+                :aria-label="$t('Delete file {{ nativeFiles[file.id].name }}')"
+              >
+                <i class="fas fa-trash-alt"></i>
+              </b-btn>
+            </li>
+          </ul>
+        </template>
+      </uploader-list>
+      <uploader-drop v-if="uploaderLoaded && isConversationalForm" class="form-control-file">
+        <b-button
+          v-if="!required"
+          @click="cfSkipFileUpload"
+          class="btn cf-skip-btn mb-3"
+        >
+          <i class="fas fa-arrow-left mr-2"></i> {{ $t('Skip Uploading') }}
+        </b-button>
+
+        <uploader-btn
+          :attrs="nativeButtonAttrs"
+          :class="[
+            { disabled: disabled }, 
+            'btn',
+            showSingleUploadButton ? 'cf-single-upload-btn' : (showMultiUploadButton ? 'cf-multi-upload-btn' : '')
+          ]"
+          tabindex="0"
+          v-on:keyup.native="browse"
+          :aria-label="$attrs['aria-label']"
+        >
+          <span v-if="showSingleUploadButton"><i class="far fa-image mr-2"></i> {{ $t('Add File/Photo') }}</span>
+          <span v-else-if="showMultiUploadButton"><i class="fas fa-plus mr-2"></i> {{ $t('Add another') }}</span>
+        </uploader-btn>
+
+        <b-button v-if="files.length !== 0" class="cf-file-upload-submit" variant="primary" @click="emitConversationalFormSubmit" :aria-label="$t('Submit')">
+          <i class="fas fa-paper-plane"></i> <span v-if="files.length !== 0 && showMultiUploadButton">{{ $t('Send All') }}</span>
+        </b-button>
+      </uploader-drop>
+      
+      <uploader-list v-else>
         <template slot-scope = "{ fileList }">
           <ul v-if="uploading">
             <li v-for="file in fileList" :key="file.id">
@@ -94,7 +151,7 @@ const ignoreErrors = [
 export default {
   components: { ...uploader, RequiredAsterisk },
   mixins: [uniqIdsMixin],
-  props: ['label', 'error', 'helper', 'name', 'value', 'controlClass', 'endpoint', 'accept', 'validation', 'parent', 'config', 'multipleUpload'],
+  props: ['label', 'error', 'helper', 'name', 'value', 'controlClass', 'endpoint', 'accept', 'validation', 'parent', 'config', 'multipleUpload', 'screenType'],
   updated() {
     this.removeDefaultClasses();
   },
@@ -209,6 +266,15 @@ export default {
     fileDataName() {
       return this.prefix + this.name + (this.row_id ? '.' + this.row_id : '');
     },
+    isConversationalForm() {
+      return this.screenType === 'conversational-forms';
+    },
+    showSingleUploadButton() {
+      return this.files.length === 0 || !this.multipleUpload;
+    },
+    showMultiUploadButton() {
+      return this.files.length !== 0 && this.multipleUpload;
+    },
   },
   watch: {
     filesData: {
@@ -336,6 +402,7 @@ export default {
     },
     setRequestFiles() {
       _.set(window, `PM4ConfigOverrides.requestFiles["${this.fileDataName}"]`, this.files);
+      console.log("!!!!!! SET REQUEST FILES", this.valueToSend());
       this.$emit('input', this.valueToSend());
     },
     valueToSend() {
@@ -545,6 +612,7 @@ export default {
         this.$set(this.nativeFiles, id, rootFile);
         this.addToFiles(fileInfo);
       } else {
+        console.log("!!!!!! FILE UPLOADED", name);
         this.$emit('input', name);
       }
     },
@@ -608,6 +676,17 @@ export default {
           : null;
       }
     },
+    getFileIconClass(file) {
+      return this.nativeFiles[file.id].fileType.includes('image/') 
+        ? 'far fa-image' 
+        : 'far fa-file';
+    },
+    emitConversationalFormSubmit($event) {
+      this.$emit('cf-submit', $event);
+    },
+    cfSkipFileUpload() {
+      this.$emit('cf-skip-file-upload');
+    }
   },
 };
 </script>
@@ -617,4 +696,58 @@ export default {
   color: red;
   font-size: 0.8em;
 }
+
+/* Conversational Forms Styling */
+.cf-single-upload-btn {
+  background-color: #EAF2FF;
+  border: 1px solid #81AFFF;
+  color: #81AFFF;
+  width: 100%;
+  padding: 12px 10px;
+  text-transform: capitalize;
+  margin: 0;
+}
+.cf-multi-upload-btn {
+  background: #fff;
+  color: #20242A;
+  border: 1px solid #D7DDE5;
+  font-size: 12px;
+  width: 57%;
+  padding: 7px;
+  border-radius: 8px;
+  margin: 0;
+  text-transform: capitalize;
+  margin-right: 30px;
+}
+.cf-file-upload-submit {
+  border-radius: 8px;
+  color: #fff;
+  font-size: 12px;
+  text-transform: capitalize;
+  padding: 7px;
+}
+.cf-filename {
+  width: 88%;
+  display: inline-block;
+  vertical-align: middle;
+}
+.cf-uploader-list {
+  margin-bottom: 14px;
+  max-height: 75px;
+  overflow:auto;
+}
+.cf-file-upload-list {
+  color: #20242A;
+  margin-bottom: 3px;
+  border-bottom: 1px solid #F3F5F7;
+}
+.cf-skip-btn {
+  background-color: #FFF;
+  border: 1px solid #D7DDE5;
+  color: #20242A;
+  width: 100%;
+  padding: 12px 10px;
+  box-shadow: 0px 12px 24px -12px #0000001F;
+}
+
 </style>

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

@@ -0,0 +1,248 @@
+<template>
+  <vue-form-renderer
+    ref="collectionRecordControl"
+    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";
+import CollectionRecordsList from "../inspector/collection-records-list.vue";
+
+const globalObject = typeof window === "undefined" ? global : window;
+
+const defaultConfig = [
+  {
+    name: "empty",
+    items: []
+  }
+];
+
+export default {
+  components: {
+    VueFormRenderer,
+    CollectionRecordsList
+  },
+  props: {
+    name: String,
+    validationData: null,
+    _parent: null,
+    record: null,
+    collection: {
+      type: Object
+    },
+    collectionmode: {
+      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: {}
+    };
+  },
+  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;
+          const editScreen = response.collection.update_screen_id;
+            //Choose screen id regarding of the display Mode
+            this.screenCollectionId =
+              this.selDisplayMode === "View" ? viewScreen : editScreen;
+          
+          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;
+      }
+    },
+    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 = {};
+      }
+    },
+    collectionmode(collectionmode) {
+      if(collectionmode) {
+        this.selDisplayMode = collectionmode.modeId;
+      }
+      this.loadRecordCollection(this.selCollectionId, this.selRecordId, this.selDisplayMode);
+    },
+  },
+  mounted() {
+    this.$root.$on("taskdraft-input", (val)=>{
+      this.taskDraft = val;
+    });
+
+    if (this.collection && this.record) {
+      this.loadRecordCollection(this.collection.collectionId, this.record, this.collectionmode.modeId);
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+.prevent-interaction.form-collection-record-control::after {
+  content: attr(placeholder);
+}
+</style>