From c0ca4effc417948a822a8e9cda645124152a020c Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Tue, 22 Oct 2024 08:59:58 -0600
Subject: [PATCH 1/3] Apply Eslint formatting

---
 src/components/ScreenTemplateCard.vue |   3 +-
 src/components/ScreenTemplates.vue    | 258 +++++++++++++-------------
 2 files changed, 132 insertions(+), 129 deletions(-)

diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
index 71291a444..9db61488d 100644
--- a/src/components/ScreenTemplateCard.vue
+++ b/src/components/ScreenTemplateCard.vue
@@ -112,7 +112,8 @@ export default {
         this.template.template_media.length > 0
       ) {
         return this.template.template_media[0].url;
-      } else if (this.template?.template_media?.thumbnail?.url) {
+      }
+      if (this.template?.template_media?.thumbnail?.url) {
         return this.template?.template_media.thumbnail.url;
       }
       return null;
diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index ab477e95a..342473c11 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -1,32 +1,29 @@
 <template>
-  <div
-    class="screen-templates-container"
-    data-cy="screen-templates-section"
-  >
+  <div class="screen-templates-container" data-cy="screen-templates-section">
     <div class="d-flex justify-content-between">
       <h6 class="pt-2">{{ $t("Select a Template") }}</h6>
       <button
         class="panel-close-btn"
-        @click="$emit('close-templates-panel')"
         data-cy="close-templates-section"
+        @click="$emit('close-templates-panel')"
       >
         <i class="fas fa-times"></i>
       </button>
     </div>
     <div class="d-flex template-tabs justify-content-center">
       <b-button
-        @click="showMyTemplates"
         class="d-inline default-template-btn px-1"
         :class="{ 'my-templates-selected': myTemplatesSelected }"
         data-cy="my-templates-tab"
+        @click="showMyTemplates"
       >
         {{ $t("My Templates") }}
       </b-button>
       <b-button
-        @click="showSharedTemplates"
         class="d-inline default-template-btn"
         :class="{ 'shared-templates-selected': sharedTemplatesSelected }"
         data-cy="shared-templates-tab"
+        @click="showSharedTemplates"
       >
         {{ $t("Shared Templates") }}
       </b-button>
@@ -48,12 +45,12 @@
             <h5>{{ $t("No templates found.") }}</h5>
           </b-card-body>
           <screen-template-card
-            v-else
             v-for="template in myTemplatesData"
+            v-else
             :key="template.id"
             :template="template"
             :screen-id="screenId"
-            :currentScreenPage="currentScreenPage"
+            :current-screen-page="currentScreenPage"
           />
         </b-card-group>
       </div>
@@ -73,67 +70,71 @@
             <h5>{{ $t("No templates found.") }}</h5>
           </b-card-body>
           <screen-template-card
-            v-else
             v-for="template in sharedTemplatesData"
+            v-else
             :key="template.id"
             :template="template"
             :screen-id="screenId"
-            :currentScreenPage="currentScreenPage"
+            :current-screen-page="currentScreenPage"
           />
         </b-card-group>
       </div>
     </div>
   </div>
 </template>
-  
+
 <script>
-  import ScreenTemplateCard from './ScreenTemplateCard.vue';
+import ScreenTemplateCard from "./ScreenTemplateCard.vue";
 
-  export default {
-    components: {
-      ScreenTemplateCard,
+export default {
+  components: {
+    ScreenTemplateCard
+  },
+  props: {
+    screenId: {
+      type: Number,
+      required: true
     },
-    props: {
-      screenId: {
-        type: Number,
-        required: true,
-      },
-      currentScreenPage: {
-        type: Number,   
-        default: 0,
-      },
-      screenType: {
-        type: String,   
-        default: 'FORM',
-      }
+    currentScreenPage: {
+      type: Number,
+      default: 0
     },
-    data() {
-      return {
-        myTemplatesData: null,
-        sharedTemplatesData: null,
-        myTemplatesSelected: true,
-        sharedTemplatesSelected: false,
-        noMyTemplatesFound: false,
-        noSharedTemplatesFound: false,
-        loading: false,
-      };
+    screenType: {
+      type: String,
+      default: "FORM"
+    }
+  },
+  data() {
+    return {
+      myTemplatesData: null,
+      sharedTemplatesData: null,
+      myTemplatesSelected: true,
+      sharedTemplatesSelected: false,
+      noMyTemplatesFound: false,
+      noSharedTemplatesFound: false,
+      loading: false
+    };
+  },
+  mounted() {
+    this.showMyTemplates();
+  },
+  methods: {
+    showMyTemplates() {
+      this.myTemplatesSelected = true;
+      this.sharedTemplatesSelected = false;
+      this.fetchMyTemplates();
     },
-    methods: {
-      showMyTemplates() {
-        this.myTemplatesSelected = true;
-        this.sharedTemplatesSelected = false;
-        this.fetchMyTemplates();
-      },
-      fetchMyTemplates() {
-        this.loading = true;
-        ProcessMaker.apiClient
-          .get(
-            `templates/screen?is_public=0&screen_type=${this.screenType}`,
-          )
-          .then((response) => {
-            this.myTemplatesData = response.data.data;
-            if (this.myTemplatesData.length === 0 || this.myTemplatesData === undefined) {
-              this.noMyTemplatesFound = true;
+    fetchMyTemplates() {
+      this.loading = true;
+      ProcessMaker.apiClient
+        .get(`templates/screen?is_public=0&screen_type=${this.screenType}`)
+        .then((response) => {
+          this.myTemplatesData = response.data.data;
+          if (
+            this.myTemplatesData.length === 0 ||
+            this.myTemplatesData === undefined
+          ) {
+            this.noMyTemplatesFound = true;
           }
         })
         .catch((error) => {
@@ -142,36 +143,34 @@
         .finally(() => {
           this.loading = false;
         });
-      },
-      fetchSharedTemplates() {
-        this.loading = true;
-        ProcessMaker.apiClient
-          .get(
-            `templates/screen?is_public=1&screen_type=${this.screenType}`,
-          )
-          .then((response) => {
-            this.sharedTemplatesData = response.data.data;
-            if (this.sharedTemplatesData.length === 0 || this.sharedTemplatesData === undefined) {
-              this.noSharedTemplatesFound = true;
-            }
-          })
-          .catch((error) => {
-            console.error(error);
-          })
-          .finally(() => {
-            this.loading = false;
-          });
-      },
-      showSharedTemplates() {
-        this.myTemplatesSelected = false;
-        this.sharedTemplatesSelected = true;
-        this.fetchSharedTemplates();
-      },
     },
-    mounted() {
-      this.showMyTemplates();
+    fetchSharedTemplates() {
+      this.loading = true;
+      ProcessMaker.apiClient
+        .get(`templates/screen?is_public=1&screen_type=${this.screenType}`)
+        .then((response) => {
+          this.sharedTemplatesData = response.data.data;
+          if (
+            this.sharedTemplatesData.length === 0 ||
+            this.sharedTemplatesData === undefined
+          ) {
+            this.noSharedTemplatesFound = true;
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    showSharedTemplates() {
+      this.myTemplatesSelected = false;
+      this.sharedTemplatesSelected = true;
+      this.fetchSharedTemplates();
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -179,53 +178,56 @@
   height: 100%;
 }
 
-  .panel-close-btn {
-    background-color: transparent;
-    border: none;
-    color: #596372;
-  }
-
-  .template-tabs {
-    padding: 4px;
-    background-color: #E9ECF1;
-    border-radius: 8px;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
+.panel-close-btn {
+  background-color: transparent;
+  border: none;
+  color: #596372;
+}
 
-  .default-template-btn {
-    width: 50%;
-    background-color: transparent;
-    border: none;
-    color: #596372;
-    font-size: 12px;
-    padding-left: 0px;
-    padding-right: 0px;
-    text-transform: none;
-  }
+.template-tabs {
+  padding: 4px;
+  background-color: #e9ecf1;
+  border-radius: 8px;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 
-  .my-templates-selected {
-    background-color: #ffffff;
-    color: #20242A;
-    border-radius: 8px;
-    border: none;
-    font-weight: 600;
-    font-size: 12px;
-    padding-left: 0px;
-    padding-right: 0px;
-    box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05), 0px 2px 4px -2px rgba(0, 0, 0, 0.05), 0px 1px 2px -1px rgb(0, 0, 0, 0.05), 0px 1px 0px -1px rgb(0, 0, 0, 0.05);
-  }
+.default-template-btn {
+  width: 50%;
+  background-color: transparent;
+  border: none;
+  color: #596372;
+  font-size: 12px;
+  padding-left: 0px;
+  padding-right: 0px;
+  text-transform: none;
+}
 
-  .shared-templates-selected {
-    background-color: #ffffff;
-    color: #20242A;
-    border-radius: 8px;
-    border: none;
-    font-weight: 600;
-    font-size: 12px;
-    padding-left: 0px;
-    padding-right: 0px;
-    box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05), 0px 2px 4px -2px rgba(0, 0, 0, 0.05), 0px 1px 2px -1px rgb(0, 0, 0, 0.05), 0px 1px 0px -1px rgb(0, 0, 0, 0.05);
-  }
+.my-templates-selected {
+  background-color: #ffffff;
+  color: #20242a;
+  border-radius: 8px;
+  border: none;
+  font-weight: 600;
+  font-size: 12px;
+  padding-left: 0px;
+  padding-right: 0px;
+  box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05),
+    0px 2px 4px -2px rgba(0, 0, 0, 0.05), 0px 1px 2px -1px rgb(0, 0, 0, 0.05),
+    0px 1px 0px -1px rgb(0, 0, 0, 0.05);
+}
 
+.shared-templates-selected {
+  background-color: #ffffff;
+  color: #20242a;
+  border-radius: 8px;
+  border: none;
+  font-weight: 600;
+  font-size: 12px;
+  padding-left: 0px;
+  padding-right: 0px;
+  box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05),
+    0px 2px 4px -2px rgba(0, 0, 0, 0.05), 0px 1px 2px -1px rgb(0, 0, 0, 0.05),
+    0px 1px 0px -1px rgb(0, 0, 0, 0.05);
+}
 </style>

From 8f0f55fa2a1d35fb572b61ccdf1870ef6ed96032 Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Tue, 22 Oct 2024 09:12:17 -0600
Subject: [PATCH 2/3] add text truncation method for template description
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Implemented method to truncate template description to 100 characters.
- Added ellipsis (…) for longer descriptions.
---
 src/components/ScreenTemplateCard.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
index 9db61488d..e979481ce 100644
--- a/src/components/ScreenTemplateCard.vue
+++ b/src/components/ScreenTemplateCard.vue
@@ -26,7 +26,7 @@
         <div class="template-details">
           <span class="template-name d-block pt-1">{{ template.name }}</span>
           <span class="template-description d-block">{{
-            template.description
+            truncateText(template.description, 100)
           }}</span>
         </div>
         <b-collapse v-model="showApplyOptions">
@@ -157,6 +157,10 @@ export default {
       } else {
         this.selected.splice(index, 1);
       }
+    },
+    truncateText(text, limit) {
+      if (!text) return "";
+      return text.length > limit ? `${text.substring(0, limit)}...` : text;
     }
   }
 };

From 3ccd63e5675d99cfdbad6e48888a148b32742c7a Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Tue, 22 Oct 2024 09:28:41 -0600
Subject: [PATCH 3/3] fix: ensure vertical images fit within thumbnail
 container

- Updated CSS to handle vertical images by using object-fit: cover.
- Ensured all images are displayed properly in 107px height container without distortion (according to Figma mockups).
---
 src/components/ScreenTemplateCard.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
index e979481ce..12b9f7968 100644
--- a/src/components/ScreenTemplateCard.vue
+++ b/src/components/ScreenTemplateCard.vue
@@ -196,10 +196,14 @@ export default {
 
 .thumbnail-image {
   width: 100%;
+  height: 100%;
+  object-fit: cover;
   border-radius: 8px 8px 0px 0px;
 }
 
 .thumbnail-image-container {
+  width: 100%;
+  height: 107px;
   border-radius: 8px;
   padding: 0px !important;
   background-size: contain;