From 166ed66b1bd730ea07fc7d33e41cda873807c337 Mon Sep 17 00:00:00 2001
From: Sanja <sanja.cornelius@processmaker.com>
Date: Fri, 18 Oct 2024 13:51:00 -0700
Subject: [PATCH 1/4] Handle Changes in Conversational Forms UI for File
 Uploads and Emit File Deletion Event

---
 src/components/renderer/file-upload.vue | 26 ++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/renderer/file-upload.vue b/src/components/renderer/file-upload.vue
index b3881bc4e..ceeb00bb7 100644
--- a/src/components/renderer/file-upload.vue
+++ b/src/components/renderer/file-upload.vue
@@ -61,32 +61,34 @@
           </ul>
         </template>
       </uploader-list>
-      <uploader-drop v-if="uploaderLoaded && isConversationalForm" class="form-control-file">
+      <uploader-drop v-if="uploaderLoaded && isConversationalForm" class="form-control-file" 
+        :class="this.files.length > 0 && !this.multipleUpload ? 'cf-single-file-upload' : ''"
+      > 
         <b-button
           v-if="!required"
           @click="cfSkipFileUpload"
-          class="btn cf-skip-btn mb-3"
+          class="btn cf-skip-btn"
+          :class="showMultiUploadButton ? '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' : '')
+            showSingleUploadButton || files.length === 0 && !showMultiUploadButton ? 'cf-single-upload-btn mt-3' : (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-if="showSingleUploadButton || files.length === 0 && !showMultiUploadButton"><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 v-if="files.length !== 0" class="cf-file-upload-submit" :class="!showMultiUploadButton ? 'w-100 mt-3' : ''" variant="primary" @click="emitConversationalFormSubmit" :aria-label="$t('Submit')">
+          <i class="fas fa-paper-plane"></i> <span v-if="showMultiUploadButton">{{ $t('Send All') }}</span> <span v-else>{{ $t('Submit File/Photo') }}</span>
         </b-button>
       </uploader-drop>
       
@@ -270,7 +272,7 @@ export default {
       return this.screenType === 'conversational-forms';
     },
     showSingleUploadButton() {
-      return this.files.length === 0 || !this.multipleUpload;
+      return this.files.length === 0 && !this.multipleUpload;
     },
     showMultiUploadButton() {
       return this.files.length !== 0 && this.multipleUpload;
@@ -402,7 +404,6 @@ export default {
     },
     setRequestFiles() {
       _.set(window, `PM4ConfigOverrides.requestFiles["${this.fileDataName}"]`, this.files);
-      console.log("!!!!!! SET REQUEST FILES", this.valueToSend());
       this.$emit('input', this.valueToSend());
     },
     valueToSend() {
@@ -491,7 +492,7 @@ export default {
         }
         this.$delete(this.nativeFiles, id);
       }
-
+      this.$emit('file-deleted', this.files);
     },
     addToFiles(fileInfo) {
       if (this.multipleUpload) {
@@ -625,7 +626,6 @@ export default {
         this.$set(this.nativeFiles, id, rootFile);
         this.addToFiles(fileInfo);
       } else {
-        console.log("!!!!!! FILE UPLOADED", name);
         this.$emit('input', name);
       }
     },
@@ -763,4 +763,8 @@ export default {
   box-shadow: 0px 12px 24px -12px #0000001F;
 }
 
+.form-control-file.cf-single-file-upload label {
+  display: none;
+}
+
 </style>

From 857c2437cdfbc5721dfd678aade95b61f6137701 Mon Sep 17 00:00:00 2001
From: Sanja <sanja.cornelius@processmaker.com>
Date: Fri, 18 Oct 2024 21:41:59 -0700
Subject: [PATCH 2/4] Update vue-form-elements

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8f6623704..7fc60e48b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,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.60.0",
+        "@processmaker/vue-form-elements": "0.60.1",
         "@processmaker/vue-multiselect": "2.3.0",
         "@storybook/addon-essentials": "^7.6.13",
         "@storybook/addon-interactions": "^7.6.13",
@@ -4015,9 +4015,9 @@
       }
     },
     "node_modules/@processmaker/vue-form-elements": {
-      "version": "0.60.0",
-      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.60.0.tgz",
-      "integrity": "sha512-Rndk+TlCl3SXGx7VeZq0207fzA3ALNEjfapXazra1yI+AQFqPYAdSLrisckSvGYPTG0TFGGBhpzh+cHjOWlwug==",
+      "version": "0.60.1",
+      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.60.1.tgz",
+      "integrity": "sha512-cFmhrqMz0n3aOS556wJpb5Jm0dasvqLNIaHAuT1T4uhboo+JI6Lxfp57JbJuQ8NS7c2FcTm0MgoPAxtiWTt6Ng==",
       "dev": true,
       "dependencies": {
         "@chantouchsek/validatorjs": "1.2.3",
diff --git a/package.json b/package.json
index a5b52751c..2b37b7ab0 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,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.60.0",
+    "@processmaker/vue-form-elements": "0.60.1",
     "@processmaker/vue-multiselect": "2.3.0",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",

From 1bc71cc3c35da4457fe64119ec434202841b4703 Mon Sep 17 00:00:00 2001
From: Sanja <sanja.cornelius@processmaker.com>
Date: Mon, 21 Oct 2024 10:04:11 -0700
Subject: [PATCH 3/4] Update vue-form-elements to 0.60.1

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7fc60e48b..1842e8d98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -97,7 +97,7 @@
       },
       "peerDependencies": {
         "@panter/vue-i18next": "^0.15.0",
-        "@processmaker/vue-form-elements": "0.60.0",
+        "@processmaker/vue-form-elements": "0.60.1",
         "i18next": "^15.0.8",
         "vue": "^2.6.12",
         "vuex": "^3.1.1"
diff --git a/package.json b/package.json
index 2b37b7ab0..a4aeaba6f 100644
--- a/package.json
+++ b/package.json
@@ -116,7 +116,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.60.0",
+    "@processmaker/vue-form-elements": "0.60.1",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

From 30167bb7cf774709ae76bedb1ef4dda1fb377817 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Mon, 21 Oct 2024 14:48:59 -0400
Subject: [PATCH 4/4] Update icon selection functionality

---
 src/components/ScreenTemplateCard.vue | 154 +++++++++++++++-----------
 1 file changed, 88 insertions(+), 66 deletions(-)

diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
index 323173bf5..71291a444 100644
--- a/src/components/ScreenTemplateCard.vue
+++ b/src/components/ScreenTemplateCard.vue
@@ -9,7 +9,11 @@
         v-if="thumbnail"
         class="thumbnail-container thumbnail-image-container"
       >
-        <img class="thumbnail-image" :src="thumbnail" :alt="`${template.name}`"/>
+        <img
+          class="thumbnail-image"
+          :src="thumbnail"
+          :alt="`${template.name}`"
+        />
       </div>
       <div
         v-else
@@ -17,25 +21,31 @@
       >
         <i class="p-4 fas fa-palette thumbnail-icon"></i>
       </div>
-      <hr class="card-divider">
+      <hr class="card-divider" />
       <b-card-body class="p-1">
         <div class="template-details">
           <span class="template-name d-block pt-1">{{ template.name }}</span>
-          <span class="template-description d-block">{{ template.description }}</span>
+          <span class="template-description d-block">{{
+            template.description
+          }}</span>
         </div>
         <b-collapse v-model="showApplyOptions">
-            <b-form-checkbox-group
-              class="apply-options-group p-2"
-              v-model="selected"
-              name="apply-options"
-            >
+          <b-form-checkbox-group
+            v-model="selected"
+            class="apply-options-group p-2"
+            name="apply-options"
+          >
             <div class="row row-cols-3 icons-row">
               <div
                 v-for="option in applyOptions"
                 :key="option.value"
                 class="col apply-options-container d-flex align-items-baseline flex-column"
               >
-                <div class="icon-container">
+                <div
+                  class="icon-container"
+                  :class="{ selected: selected.includes(option.value) }"
+                  @click.stop="toggleOption(option.value)"
+                >
                   <div v-if="option.value === 'CSS'">
                     <css-icon />
                   </div>
@@ -43,74 +53,72 @@
                     <i :class="option.icon"></i>
                   </div>
                 </div>
-                <b-form-checkbox
-                  class="option-checkbox"
-                  :value="option.value"
-                >
+                <b-form-checkbox class="option-checkbox" :value="option.value">
                   {{ option.text }}
                 </b-form-checkbox>
               </div>
             </div>
-            </b-form-checkbox-group>
-            <hr class="bottom-card-divider">
-            <div class="apply-btn-container d-flex justify-content-end">
-              <button
-                type="button"
-                size="sm"
-                class="btn btn-outline-secondary card-btn"
-                @click="onCancel"
-              >
-                {{ $t("Cancel") }}
-              </button>
-              <button
-                :disabled="!selected.length"
-                type="button"
-                size="sm"
-                class="btn btn-primary ml-2 card-btn"
-                @click="applyTemplate"
-              >
-                {{ $t("Apply") }}
-              </button>
-            </div>
+          </b-form-checkbox-group>
+          <hr class="bottom-card-divider" />
+          <div class="apply-btn-container d-flex justify-content-end">
+            <button
+              type="button"
+              size="sm"
+              class="btn btn-outline-secondary card-btn"
+              @click.stop="onCancel"
+            >
+              {{ $t("Cancel") }}
+            </button>
+            <button
+              :disabled="!selected.length"
+              type="button"
+              size="sm"
+              class="btn btn-primary ml-2 card-btn"
+              @click.stop="applyTemplate"
+            >
+              {{ $t("Apply") }}
+            </button>
+          </div>
         </b-collapse>
       </b-card-body>
     </b-card>
-    
   </div>
 </template>
 
 <script>
-import CssIcon from './CssIcon.vue';
+import CssIcon from "./CssIcon.vue";
 
 export default {
   components: {
-    CssIcon,
+    CssIcon
   },
   mixins: [],
-  props: ['template', 'screenId', 'currentScreenPage'],
+  props: ["template", "screenId", "currentScreenPage"],
   data() {
     return {
       showApplyOptions: false,
       selected: [],
       applyOptions: [
-        { text: 'CSS', value: 'CSS' },
-        { text: 'Fields', value: 'Fields', icon: 'fp-fields-icon' },
-        { text: 'Layout', value: 'Layout', icon: 'fp-layout-icon' },
-      ],
+        { text: "CSS", value: "CSS" },
+        { text: "Fields", value: "Fields", icon: "fp-fields-icon" },
+        { text: "Layout", value: "Layout", icon: "fp-layout-icon" }
+      ]
     };
   },
   computed: {
     thumbnail() {
-      if (this.template?.template_media && this.template.template_media.length > 0) {
+      if (
+        this.template?.template_media &&
+        this.template.template_media.length > 0
+      ) {
         return this.template.template_media[0].url;
       } else if (this.template?.template_media?.thumbnail?.url) {
-        return this.template?.template_media.thumbnail.url
+        return this.template?.template_media.thumbnail.url;
       }
       return null;
-    },
-  },
-  mounted() {
+    }
   },
+  mounted() {},
   methods: {
     showDetails() {
       this.showApplyOptions = !this.showApplyOptions;
@@ -120,49 +128,64 @@ export default {
         .post(`/template/screen/${this.template.id}/apply`, {
           screenId: this.screenId,
           templateOptions: this.selected,
-          currentScreenPage: this.currentScreenPage,
+          currentScreenPage: this.currentScreenPage
         })
         .then((response) => {
-          ProcessMaker.alert(this.$t("The template options have been applied."), "success");
+          ProcessMaker.alert(
+            this.$t("The template options have been applied."),
+            "success"
+          );
           window.location.reload();
         })
         .catch((error) => {
-          const errorMessage = error.response?.data?.message  || error.response?.data?.error || error.message;
+          const errorMessage =
+            error.response?.data?.message ||
+            error.response?.data?.error ||
+            error.message;
           ProcessMaker.alert(errorMessage, "danger");
         });
     },
     onCancel() {
       this.showApplyOptions = false;
       this.selected = [];
+    },
+    toggleOption(value) {
+      const index = this.selected.indexOf(value);
+      if (index === -1) {
+        this.selected.push(value);
+      } else {
+        this.selected.splice(index, 1);
+      }
     }
-  },
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-
-.fp-fields-icon, .fp-layout-icon {
-  color: #EAF2FF;
+.fp-fields-icon,
+.fp-layout-icon {
+  color: #eaf2ff;
 }
 
 .screenbuilder-template-card {
   width: 225px;
   margin: 8px;
-  border: 1px solid #D7DDE5;
+  border: 1px solid #d7dde5;
   border-radius: 8px;
-  box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05), 0px 2px 4px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05),
+    0px 2px 4px -2px rgba(0, 0, 0, 0.05);
   cursor: pointer;
 }
 
 .card-divider {
   width: 100%;
   margin: 0px;
-  background-color: #D7DDE5;
+  background-color: #d7dde5;
 }
 
 .thumbnail-container:hover,
 .thumbnail-container.active {
-  border-color: #1572C2;
+  border-color: #1572c2;
   cursor: pointer;
 }
 
@@ -180,7 +203,7 @@ export default {
 }
 
 .thumbnail-icon {
-  color: #CDDDEE;
+  color: #cdddee;
   font-size: 59px;
 }
 
@@ -192,14 +215,14 @@ export default {
   font-size: 14px;
   font-weight: 600;
   line-height: 20px;
-  color: #2F343B;
+  color: #2f343b;
 }
 
 .template-description {
   font-size: 12.5px;
   font-weight: 400;
   line-height: 18px;
-  color: #4E5663;
+  color: #4e5663;
 }
 
 .apply-options-group {
@@ -214,7 +237,7 @@ export default {
 }
 
 .apply-options-container {
-    padding: 5px;
+  padding: 5px;
 }
 
 .apply-options-group i {
@@ -228,7 +251,7 @@ export default {
   justify-content: center;
   width: 66px;
   height: 76px;
-  border: 0.7px solid #D7DDE5;
+  border: 0.7px solid #d7dde5;
   border-radius: 8px;
   margin-bottom: 10px;
 }
@@ -239,7 +262,7 @@ export default {
 
 .bottom-card-divider {
   width: 90%;
-  background-color: #E9ECF1;
+  background-color: #e9ecf1;
   margin-top: 0px;
 }
 
@@ -253,5 +276,4 @@ export default {
   border-radius: 8px;
   padding: 5px 10px;
 }
-
-</style>
\ No newline at end of file
+</style>