From 7c65f373d3d1a39c7b07cc70fca2058ea18a5f80 Mon Sep 17 00:00:00 2001
From: Sanja <sanja.cornelius@processmaker.com>
Date: Wed, 28 Aug 2024 12:37:05 -0700
Subject: [PATCH 1/7] Render 'Add photo' button for conversational form screen
 types

---
 src/components/renderer/file-upload.vue | 31 +++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/renderer/file-upload.vue b/src/components/renderer/file-upload.vue
index a055be113..343b11ae8 100644
--- a/src/components/renderer/file-upload.vue
+++ b/src/components/renderer/file-upload.vue
@@ -18,7 +18,7 @@
     >
       <uploader-unsupport/>
 
-      <uploader-drop v-if="uploaderLoaded" class="form-control-file">
+      <uploader-drop v-if="uploaderLoaded && screenType !== 'conversational-forms'" class="form-control-file">
         <p>{{ $t('Drop a file here to upload or') }}</p>
         <uploader-btn
           :attrs="nativeButtonAttrs"
@@ -32,6 +32,21 @@
         </uploader-btn>
         <span v-if="validation === 'required' && !value" class="required">{{ $t('Required') }}</span>
       </uploader-drop>
+
+      <!-- When the screen type is a conversational form, render the conversational form file upload ui -->
+      <uploader-drop v-if="uploaderLoaded && screenType === 'conversational-forms'" class="form-control-file"> 
+        <uploader-btn
+          :attrs="nativeButtonAttrs"
+          :class="{disabled: disabled}"
+          tabindex="0"
+          v-on:keyup.native="browse"
+          :aria-label="$attrs['aria-label']"
+          class="btn btn-conversational-forms"
+        >
+        <i class="far fa-image mr-3"></i> {{ $t('Add File/Photo') }}
+        </uploader-btn>
+      </uploader-drop>
+      
       <uploader-list>
         <template slot-scope = "{ fileList }">
           <ul v-if="uploading">
@@ -93,7 +108,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();
   },
@@ -335,6 +350,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() {
@@ -526,6 +542,7 @@ export default {
         this.$set(this.nativeFiles, id, rootFile);
         this.addToFiles(fileInfo);
       } else {
+        console.log("!!!!!! FILE UPLOADED", name);
         this.$emit('input', name);
       }
     },
@@ -598,4 +615,14 @@ export default {
   color: red;
   font-size: 0.8em;
 }
+
+.btn-conversational-forms {
+  background-color: #EAF2FF;
+  border: 1px solid #81AFFF;
+  color: #81AFFF;
+  width: 100%;
+  text-transform: capitalize;
+  margin: -47px 0 0 0;
+  padding: 10px;
+}
 </style>

From 2f0c1f501a76ec75e6c00e5e959c185161b656ae Mon Sep 17 00:00:00 2001
From: Sanja <sanja.cornelius@processmaker.com>
Date: Wed, 28 Aug 2024 20:45:40 -0700
Subject: [PATCH 2/7] Implement conversational forms UI

---
 src/components/renderer/file-upload.vue | 68 +++++++++++++++++++++----
 1 file changed, 59 insertions(+), 9 deletions(-)

diff --git a/src/components/renderer/file-upload.vue b/src/components/renderer/file-upload.vue
index 343b11ae8..dd1fd9aad 100644
--- a/src/components/renderer/file-upload.vue
+++ b/src/components/renderer/file-upload.vue
@@ -18,7 +18,7 @@
     >
       <uploader-unsupport/>
 
-      <uploader-drop v-if="uploaderLoaded && screenType !== 'conversational-forms'" 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,21 +33,50 @@
         <span v-if="validation === 'required' && !value" class="required">{{ $t('Required') }}</span>
       </uploader-drop>
 
-      <!-- When the screen type is a conversational form, render the conversational form file upload ui -->
-      <uploader-drop v-if="uploaderLoaded && screenType === 'conversational-forms'" class="form-control-file"> 
+      <!-- Render the conversational form file upload UI when the screen type is conversational forms -->
+      <uploader-drop 
+        v-if="uploaderLoaded && isConversationalForm" 
+        class="form-control-file"
+      > 
         <uploader-btn
+          v-if="canAddFiles"
           :attrs="nativeButtonAttrs"
           :class="{disabled: disabled}"
           tabindex="0"
           v-on:keyup.native="browse"
           :aria-label="$attrs['aria-label']"
-          class="btn btn-conversational-forms"
+          class="btn btn-convo-form-upload"
         >
-        <i class="far fa-image mr-3"></i> {{ $t('Add File/Photo') }}
+          <i class="far fa-image mr-2"></i> {{ $t('Add File/Photo') }}
         </uploader-btn>
       </uploader-drop>
+
+      <uploader-list v-if="isConversationalForm">
+        <template v-slot="{ fileList }">
+          <ul v-if="uploading" class="convo-forms-upload-progress">
+            <li v-for="file in fileList" :key="file.id">
+              <uploader-file :file="file" list/>
+            </li>
+          </ul>
+          <ul v-else>
+            <li v-for="(file, i) in files" :key="file.id" :data-cy="file.id">
+              <span class="convo-forms-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')"
+              >
+                <i class="fas fa-trash-alt"></i>
+              </b-btn>
+            </li>
+          </ul>
+        </template>
+      </uploader-list>
       
-      <uploader-list>
+      <uploader-list v-else>
         <template slot-scope = "{ fileList }">
           <ul v-if="uploading">
             <li v-for="file in fileList" :key="file.id">
@@ -223,6 +252,12 @@ export default {
     fileDataName() {
       return this.prefix + this.name + (this.row_id ? '.' + this.row_id : '');
     },
+    isConversationalForm() {
+      return this.screenType === 'conversational-forms';
+    },
+    canAddFiles() {
+      return this.files.length === 0 || (this.files.length > 0 && this.multipleUpload);
+    }
   },
   watch: {
     filesData: {
@@ -606,6 +641,11 @@ export default {
           : null;
       }
     },
+    getFileIconClass(file) {
+      return this.nativeFiles[file.id].fileType.includes('image/') 
+        ? 'far fa-image' 
+        : 'far fa-file';
+    },
   },
 };
 </script>
@@ -616,13 +656,23 @@ export default {
   font-size: 0.8em;
 }
 
-.btn-conversational-forms {
+/* Button styling for conversational form file upload */
+.btn-convo-form-upload {
   background-color: #EAF2FF;
   border: 1px solid #81AFFF;
   color: #81AFFF;
   width: 100%;
+  padding: 12px 10px;
   text-transform: capitalize;
-  margin: -47px 0 0 0;
-  padding: 10px;
+  position: absolute;
+  top: 0;
+  z-index: 3;
+}
+
+/* Styling for the file name in conversational forms */
+.convo-forms-filename {
+  width: 70%;
+  display: inline-block;
+  vertical-align: middle;
 }
 </style>

From 13c2474fdab4d9931ccb2dbb0d1093096d2cb8e1 Mon Sep 17 00:00:00 2001
From: Sanja <sanja.cornelius@processmaker.com>
Date: Fri, 6 Sep 2024 11:08:25 -0700
Subject: [PATCH 3/7] Remove unused CSS

---
 src/components/renderer/file-upload.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/renderer/file-upload.vue b/src/components/renderer/file-upload.vue
index dd1fd9aad..ac3e6dc93 100644
--- a/src/components/renderer/file-upload.vue
+++ b/src/components/renderer/file-upload.vue
@@ -664,9 +664,7 @@ export default {
   width: 100%;
   padding: 12px 10px;
   text-transform: capitalize;
-  position: absolute;
-  top: 0;
-  z-index: 3;
+  margin: 0;
 }
 
 /* Styling for the file name in conversational forms */

From fc2a195490bae3d0168fbe1ede8b68dd539ac9ae Mon Sep 17 00:00:00 2001
From: Sanja <sanja.cornelius@processmaker.com>
Date: Wed, 11 Sep 2024 16:11:18 -0700
Subject: [PATCH 4/7] Support multi file upload in conversational forms; Add
 skip button for conversational forms

---
 src/components/renderer/file-upload.vue | 112 +++++++++++++++++++-----
 1 file changed, 89 insertions(+), 23 deletions(-)

diff --git a/src/components/renderer/file-upload.vue b/src/components/renderer/file-upload.vue
index ac3e6dc93..8b8421b22 100644
--- a/src/components/renderer/file-upload.vue
+++ b/src/components/renderer/file-upload.vue
@@ -34,24 +34,7 @@
       </uploader-drop>
 
       <!-- Render the conversational form file upload UI when the screen type is conversational forms -->
-      <uploader-drop 
-        v-if="uploaderLoaded && isConversationalForm" 
-        class="form-control-file"
-      > 
-        <uploader-btn
-          v-if="canAddFiles"
-          :attrs="nativeButtonAttrs"
-          :class="{disabled: disabled}"
-          tabindex="0"
-          v-on:keyup.native="browse"
-          :aria-label="$attrs['aria-label']"
-          class="btn btn-convo-form-upload"
-        >
-          <i class="far fa-image mr-2"></i> {{ $t('Add File/Photo') }}
-        </uploader-btn>
-      </uploader-drop>
-
-      <uploader-list v-if="isConversationalForm">
+      <uploader-list v-if="isConversationalForm" class="cf-uploader-list">
         <template v-slot="{ fileList }">
           <ul v-if="uploading" class="convo-forms-upload-progress">
             <li v-for="file in fileList" :key="file.id">
@@ -59,7 +42,7 @@
             </li>
           </ul>
           <ul v-else>
-            <li v-for="(file, i) in files" :key="file.id" :data-cy="file.id">
+            <li v-for="(file, i) in files" :key="file.id" :data-cy="file.id" class="cf-file-upload-list">
               <span class="convo-forms-filename text-truncate">
                 <i :class="getFileIconClass(file)" class="mr-2"></i>
                 {{ nativeFiles[file.id].name }}
@@ -68,6 +51,7 @@
                 variant="outline" 
                 @click="removeFile(file)" 
                 v-b-tooltip.hover :title="$t('Delete')"
+                class="pr-0"
               >
                 <i class="fas fa-trash-alt"></i>
               </b-btn>
@@ -75,6 +59,45 @@
           </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
+          v-if="files.length == 0 || !this.multipleUpload"
+          :attrs="nativeButtonAttrs"
+          :class="{disabled: disabled}"
+          tabindex="0"
+          v-on:keyup.native="browse"
+          :aria-label="$attrs['aria-label']"
+          class="btn btn-convo-form-upload"
+        >
+          <i class="far fa-image mr-2"></i> {{ $t('Add File/Photo') }}
+        </uploader-btn>
+        <uploader-btn 
+          v-else-if="files.length !== 0 && multipleUpload"
+          :attrs="nativeButtonAttrs"
+          :class="{disabled: disabled}"
+          tabindex="0"
+          v-on:keyup.native="browse"
+          :aria-label="$attrs['aria-label']"
+          class="btn btn-convo-multiupload"
+        >
+        <i class="fas fa-plus mr-2"></i> {{ $t('Add another') }}
+        </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 && multipleUpload">{{ $t('Send All') }}</span>
+        </b-button>
+      </uploader-drop>
       
       <uploader-list v-else>
         <template slot-scope = "{ fileList }">
@@ -255,9 +278,6 @@ export default {
     isConversationalForm() {
       return this.screenType === 'conversational-forms';
     },
-    canAddFiles() {
-      return this.files.length === 0 || (this.files.length > 0 && this.multipleUpload);
-    }
   },
   watch: {
     filesData: {
@@ -646,6 +666,12 @@ export default {
         ? 'far fa-image' 
         : 'far fa-file';
     },
+    emitConversationalFormSubmit($event) {
+      this.$emit('cf-submit', $event);
+    },
+    cfSkipFileUpload() {
+      this.$emit('cf-skip-file-upload');
+    }
   },
 };
 </script>
@@ -667,10 +693,50 @@ export default {
   margin: 0;
 }
 
+.btn-convo-multiupload {
+  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;
+}
+
 /* Styling for the file name in conversational forms */
 .convo-forms-filename {
-  width: 70%;
+  width: 88%;
   display: inline-block;
   vertical-align: middle;
 }
+
+.cf-uploader-list {
+  margin-bottom: 14px;
+}
+.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>

From 1d4b8740cbd5fd6a83189f77b192789484f0dc03 Mon Sep 17 00:00:00 2001
From: Sanja <sanja.cornelius@processmaker.com>
Date: Thu, 12 Sep 2024 10:16:44 -0700
Subject: [PATCH 5/7] Add multi file upload support for conversational form
 type screens

---
 src/components/renderer/file-upload.vue | 88 +++++++++++--------------
 1 file changed, 39 insertions(+), 49 deletions(-)

diff --git a/src/components/renderer/file-upload.vue b/src/components/renderer/file-upload.vue
index 8b8421b22..01702c1cd 100644
--- a/src/components/renderer/file-upload.vue
+++ b/src/components/renderer/file-upload.vue
@@ -35,15 +35,15 @@
 
       <!-- 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="convo-forms-upload-progress">
-            <li v-for="file in fileList" :key="file.id">
-              <uploader-file :file="file" 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" :data-cy="file.id" class="cf-file-upload-list">
-              <span class="convo-forms-filename text-truncate">
+            <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>
@@ -52,6 +52,7 @@
                 @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>
@@ -59,43 +60,32 @@
           </ul>
         </template>
       </uploader-list>
-
-      <uploader-drop 
-        v-if="uploaderLoaded && isConversationalForm" 
-        class="form-control-file"
-      > 
-
-      <b-button 
+      <uploader-drop v-if="uploaderLoaded && isConversationalForm" class="form-control-file">
+        <b-button
           v-if="!required"
           @click="cfSkipFileUpload"
-          class="btn cf-skip-btn mb-3" 
-      >
+          class="btn cf-skip-btn mb-3"
+        >
           <i class="fas fa-arrow-left mr-2"></i> {{ $t('Skip Uploading') }}
-      </b-button>
+        </b-button>
+
         <uploader-btn
-          v-if="files.length == 0 || !this.multipleUpload"
-          :attrs="nativeButtonAttrs"
-          :class="{disabled: disabled}"
-          tabindex="0"
-          v-on:keyup.native="browse"
-          :aria-label="$attrs['aria-label']"
-          class="btn btn-convo-form-upload"
-        >
-          <i class="far fa-image mr-2"></i> {{ $t('Add File/Photo') }}
-        </uploader-btn>
-        <uploader-btn 
-          v-else-if="files.length !== 0 && multipleUpload"
           :attrs="nativeButtonAttrs"
-          :class="{disabled: disabled}"
+          :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']"
-          class="btn btn-convo-multiupload"
         >
-        <i class="fas fa-plus mr-2"></i> {{ $t('Add another') }}
+          <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 && multipleUpload">{{ $t('Send All') }}</span>
+
+        <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>
       
@@ -278,6 +268,12 @@ export default {
     isConversationalForm() {
       return this.screenType === 'conversational-forms';
     },
+    showSingleUploadButton() {
+      return this.files.length === 0 || !this.multipleUpload;
+    },
+    showMultiUploadButton() {
+      return this.files.length !== 0 && this.multipleUpload;
+    },
   },
   watch: {
     filesData: {
@@ -682,8 +678,8 @@ export default {
   font-size: 0.8em;
 }
 
-/* Button styling for conversational form file upload */
-.btn-convo-form-upload {
+/* Conversational Forms Styling */
+.cf-single-upload-btn {
   background-color: #EAF2FF;
   border: 1px solid #81AFFF;
   color: #81AFFF;
@@ -692,8 +688,7 @@ export default {
   text-transform: capitalize;
   margin: 0;
 }
-
-.btn-convo-multiupload {
+.cf-multi-upload-btn {
   background: #fff;
   color: #20242A;
   border: 1px solid #D7DDE5;
@@ -705,7 +700,6 @@ export default {
   text-transform: capitalize;
   margin-right: 30px;
 }
-
 .cf-file-upload-submit {
   border-radius: 8px;
   color: #fff;
@@ -713,14 +707,11 @@ export default {
   text-transform: capitalize;
   padding: 7px;
 }
-
-/* Styling for the file name in conversational forms */
-.convo-forms-filename {
+.cf-filename {
   width: 88%;
   display: inline-block;
   vertical-align: middle;
 }
-
 .cf-uploader-list {
   margin-bottom: 14px;
 }
@@ -729,14 +720,13 @@ export default {
   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;
+  background-color: #FFF;
+  border: 1px solid #D7DDE5;
+  color: #20242A;
+  width: 100%;
+  padding: 12px 10px;
+  box-shadow: 0px 12px 24px -12px #0000001F;
 }
 
 </style>

From c6778e0cd8dc11dfd6da876b2419ed78b1bebd1a Mon Sep 17 00:00:00 2001
From: Sanja <sanja.cornelius@processmaker.com>
Date: Mon, 30 Sep 2024 15:48:52 -0700
Subject: [PATCH 6/7] Implement 'update' listener on custom rendered components

---
 src/components/task.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/task.vue b/src/components/task.vue
index caae40eba..6e988983c 100644
--- a/src/components/task.vue
+++ b/src/components/task.vue
@@ -49,6 +49,7 @@
             :watchers="screen.watchers"
             :data="requestData"
             :type="screen.type"
+            @update="onUpdate"
             @after-submit="afterSubmit"
             @submit="submit"
           />

From 6de18e6243fd8ffe1e4a213b95fc4313b5188d53 Mon Sep 17 00:00:00 2001
From: Sanja <sanja.cornelius@processmaker.com>
Date: Thu, 3 Oct 2024 13:13:52 -0700
Subject: [PATCH 7/7] Set max height for file uploads in conversational forms

---
 src/components/renderer/file-upload.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/renderer/file-upload.vue b/src/components/renderer/file-upload.vue
index 01702c1cd..4c614aff1 100644
--- a/src/components/renderer/file-upload.vue
+++ b/src/components/renderer/file-upload.vue
@@ -714,6 +714,8 @@ export default {
 }
 .cf-uploader-list {
   margin-bottom: 14px;
+  max-height: 75px;
+  overflow:auto;
 }
 .cf-file-upload-list {
   color: #20242A;