Merge branch 'release-2024-fall' of github.com:ProcessMaker/screen-bu…

…ilder into feature/FOUR-18116
ProcessMaker · Oct 9, 2024 · 9160010 · 9160010
2 parents 67cfe84 + 0ee7dcb
commit 9160010
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.99.1",
+  "version": "2.99.3",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
@@ -56,7 +56,7 @@
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.59.0",
+    "@processmaker/vue-form-elements": "0.60.0",
     "@processmaker/vue-multiselect": "2.3.0",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
@@ -115,7 +115,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.59.0",
+    "@processmaker/vue-form-elements": "0.60.0",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

diff --git a/src/DataProvider.js b/src/DataProvider.js
@@ -81,16 +81,26 @@ export default {
     const hasIncludeScreen = params.match(/include=.*,screen,/);
     const hasIncludeNested = params.match(/include=.*,nested,/);
 
+    // Extract screen_version from params.
+    const screenVersionMatch = params.match(/screen_version=([^&]+)/);
+    const screenVersion = screenVersionMatch ? screenVersionMatch[1] : null;
+
     // remove params ?...
     promises.push(
       this.get(endpoint + params.replace(/,screen,|,nested,/g, ","))
     );
     // Get the screen from a separated cached endpoint
     if (hasIncludeScreen) {
-      const screenEndpoint = `${(endpoint + params).replace(
+      let screenEndpoint = `${(endpoint + params).replace(
         /\?.+$/,
         ""
       )}/screen?include=screen${hasIncludeNested ? ",nested" : ""}`;
+
+      // Append screen_version only if screenVersion is not empty.
+      if (screenVersion) {
+        screenEndpoint += `&screen_version=${screenVersion}`;
+      }
+
       promises.push(this.get(screenEndpoint));
     }
     // Await for both promises to resolve

diff --git a/src/components/renderer/file-upload.vue b/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>
diff --git a/src/components/task.vue b/src/components/task.vue
@@ -50,6 +50,7 @@
             :watchers="screen.watchers"
             :data="requestData"
             :type="screen.type"
+            @update="onUpdate"
             @after-submit="afterSubmit"
             @submit="submit"
           />
@@ -95,6 +96,7 @@ export default {
     initialRequestId: { type: Number, default: null },
     initialProcessId: { type: Number, default: null },
     initialNodeId: { type: String, default: null },
+    screenVersion: { type: Number, default: null },
     userId: { type: Number, default: null },
     csrfToken: { type: String, default: null },
     value: { type: Object, default: () => {} },
@@ -266,7 +268,12 @@ export default {
         return;
       }
 
-      const url = `/${this.taskId}?include=data,user,draft,requestor,processRequest,component,screen,requestData,loopContext,bpmnTagName,interstitial,definition,nested,userRequestPermission,elementDestination`;
+      let url = `/${this.taskId}?include=data,user,draft,requestor,processRequest,component,screen,requestData,loopContext,bpmnTagName,interstitial,definition,nested,userRequestPermission,elementDestination`;
+
+      if (this.screenVersion) {
+        url += `&screen_version=${this.screenVersion}`;
+      }
+
       // For Vocabularies
       if (window.ProcessMaker && window.ProcessMaker.packages && window.ProcessMaker.packages.includes('package-vocabularies')) {
         window.ProcessMaker.VocabulariesSchemaUrl = `vocabularies/task_schema/${this.taskId}`;
@@ -532,6 +539,7 @@ export default {
           } else if (this.parentRequest && ['COMPLETED', 'CLOSED'].includes(this.task.process_request.status)) {
             this.$emit('completed', this.getAllowedRequestId());
           }
+          this.disabled = false;
         });
     },
     emitIfTaskCompleted(requestId) {
@@ -994,6 +1002,7 @@ export default {
     this.requestData = this.value;
     this.loopContext = this.initialLoopContext;
     this.loadTask(true);
+    this.setSelfService();
   },
   destroyed() {
     this.unsubscribeSocketListeners();