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] 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>