From 3ed499783d2a3d22db5ce098eb9118a85783ed60 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Thu, 12 Sep 2024 22:36:32 -0400
Subject: [PATCH 1/9] Rename test file; update test for displaying My Templates

---
 tests/e2e/specs/ScreenTemplateSection.js      | 84 ----------------
 tests/e2e/specs/ScreenTemplateSection.spec.js | 99 +++++++++++++++++++
 2 files changed, 99 insertions(+), 84 deletions(-)
 delete mode 100644 tests/e2e/specs/ScreenTemplateSection.js
 create mode 100644 tests/e2e/specs/ScreenTemplateSection.spec.js

diff --git a/tests/e2e/specs/ScreenTemplateSection.js b/tests/e2e/specs/ScreenTemplateSection.js
deleted file mode 100644
index c40ebb329..000000000
--- a/tests/e2e/specs/ScreenTemplateSection.js
+++ /dev/null
@@ -1,84 +0,0 @@
-describe('Screen Template Section', () => {
-  it('Opens the screen template panel when Templates button is clicked', () => {
-    cy.visit("/");
-    cy.get("[data-cy=screen-templates]").click();
-    cy.get("[data-cy=screen-templates-section]").should(
-      "be.visible"
-    );
-  })
-});
-
-it("Closes the screen template panel when X button is clicked", () => {
-  cy.visit("/");
-  cy.get("[data-cy=screen-templates]").click();
-  cy.get("[data-cy=screen-templates-section]").should(
-    "be.visible"
-  );
-  cy.get("[data-cy=close-templates-section]").click();
-  cy.get("[data-cy=screen-templates-section]").should(
-    "not.exist"
-  );
-});
-
-it("Displays My Templates when My Templates button is clicked", () => {
-  cy.visit("/");
-  cy.get("[data-cy=screen-templates]").click();
-  cy.get("[data-cy=screen-templates-section]").should(
-    "be.visible"
-  );
-  cy.get("[data-cy=screen-templates]").click();
-  cy.get("[data-cy=my-templates-tab]").click();
-
-  // CHECK REQUEST DATA FOR is_public = 0
-
-  cy.intercept(
-    "POST",
-    "/api/1.0/scripts/execute/1",
-    JSON.stringify({
-      output: [
-        {
-          value: "Jobs",
-          content: "Steve Jobs"
-        },
-        {
-          value: "Musk",
-          content: "Elon Musk"
-        }
-      ]
-    })
-  );
-
-});
-
-it("Displays Shared Templates when Shared Templates button is clicked", () => {
-  cy.visit("/");
-  cy.get("[data-cy=screen-templates]").click();
-  cy.get("[data-cy=screen-templates-section]").should(
-    "be.visible"
-  );
-  cy.get("[data-cy=screen-templates]").click();
-  cy.get("[data-cy=shared-templates-tab]").click();
-
-  // CHECK REQUEST DATA FOR is_public = 1
-
-});
-
-it("Is hidden when an Inspector Panel should open", () => {
-  cy.visit("/");
-
-  cy.get("[data-cy=screen-templates]").click();
-  cy.get("[data-cy=screen-templates-section]").should(
-    "be.visible"
-  );
-  
-  cy.setPreviewDataInput({ name: "" });
-  cy.openAcordeon("collapse-1");
-  cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
-    position: "bottom"
-  });
-  cy.get("[data-cy=screen-element-container]").click();
-
-  cy.get("[data-cy=screen-templates-section]").should(
-    "not.exist"
-  );
-});
\ No newline at end of file
diff --git a/tests/e2e/specs/ScreenTemplateSection.spec.js b/tests/e2e/specs/ScreenTemplateSection.spec.js
new file mode 100644
index 000000000..06be37f5d
--- /dev/null
+++ b/tests/e2e/specs/ScreenTemplateSection.spec.js
@@ -0,0 +1,99 @@
+describe('Screen Template Section', () => {
+//   it('Opens the screen template panel when Templates button is clicked', () => {
+//     cy.visit("/");
+//     cy.get("[data-cy=screen-templates]").click();
+//     cy.get("[data-cy=screen-templates-section]").should(
+//       "be.visible"
+//     );
+//   })
+// });
+
+// it("Closes the screen template panel when X button is clicked", () => {
+//   cy.visit("/");
+//   cy.get("[data-cy=screen-templates]").click();
+//   cy.get("[data-cy=screen-templates-section]").should(
+//     "be.visible"
+//   );
+//   cy.get("[data-cy=close-templates-section]").click();
+//   cy.get("[data-cy=screen-templates-section]").should(
+//     "not.exist"
+//   );
+// });
+
+it("Displays My Templates when My Templates button is clicked", () => {
+  cy.visit("/");
+
+  cy.get("[data-cy=screen-templates]").click();
+  cy.get("[data-cy=screen-templates-section]").should("be.visible");
+  
+  cy.intercept(
+    "GET",
+    "/api/1.0/templates/screen?is_public=0",
+    {
+      statusCode: 200,
+      body: {
+        data: [{
+          asset_type: null,
+          description: "This is a sample screen description for testing.",
+          editing_screen_uuid: null,
+          id: 1,
+          is_default_template: 0,
+          is_owner: true,
+          is_public: 0,
+          is_system: 0,
+          media: [],
+          name: "My Templates Test",
+          screen_custom_css: null,
+          screen_type: "EMAIL",
+          template_media: [],
+          updated_at: "2024-09-10T18:18:27+00:00",
+          user_id: 1,
+          version: "1"
+        }]
+    }
+  }
+  ).as("fetchMyTemplates");
+
+  cy.get("[data-cy=my-templates-tab]").click();
+
+  cy.wait("@fetchMyTemplates");
+
+  cy.get("[data-cy=my-templates-list]")
+    .should("be.visible")
+    .within(() => {
+      cy.contains("My Templates Test").should("exist");
+    });
+});
+
+// it("Displays Shared Templates when Shared Templates button is clicked", () => {
+//   cy.visit("/");
+//   cy.get("[data-cy=screen-templates]").click();
+//   cy.get("[data-cy=screen-templates-section]").should(
+//     "be.visible"
+//   );
+//   cy.get("[data-cy=screen-templates]").click();
+//   cy.get("[data-cy=shared-templates-tab]").click();
+
+//   // CHECK REQUEST DATA FOR is_public = 1
+
+// });
+
+// it("Is hidden when an Inspector Panel should open", () => {
+//   cy.visit("/");
+
+//   cy.get("[data-cy=screen-templates]").click();
+//   cy.get("[data-cy=screen-templates-section]").should(
+//     "be.visible"
+//   );
+  
+//   cy.setPreviewDataInput({ name: "" });
+//   cy.openAcordeon("collapse-1");
+//   cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
+//     position: "bottom"
+//   });
+//   cy.get("[data-cy=screen-element-container]").click();
+
+//   cy.get("[data-cy=screen-templates-section]").should(
+//     "not.exist"
+//   );
+});
\ No newline at end of file

From f07fcf8fd43876e85938fbbfaec1248478717ce0 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Thu, 12 Sep 2024 22:37:09 -0400
Subject: [PATCH 2/9] Remove myTemplatesData as a prop in vue-form-builder

---
 src/components/vue-form-builder.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 35dd95a61..8ad7635f0 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -302,7 +302,6 @@
           <b-card-body class="p-2 h-100 overflow-auto">
             <screen-templates
               ref="screenTemplates"
-              :my-templates-data="myTemplatesData"
               :shared-templates-data="sharedTemplatesData"
               @close-templates-panel="closeTemplatesPanel"
               @show-shared-templates="$emit('show-shared-templates')"
@@ -602,9 +601,6 @@ export default {
       type: Boolean,
       default: false
     },
-    myTemplatesData: {
-      type: Array,
-    },
     sharedTemplatesData: {
       type: Array,
     },

From 2f5dd3715fe343eba67f51a5d53c84537d6fde83 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Thu, 12 Sep 2024 22:38:09 -0400
Subject: [PATCH 3/9] Fetch templates data from screen-builder

Instead of fetching from core
---
 src/components/ScreenTemplates.vue | 43 +++++++++++++++++++++++++-----
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index 2db30a5a9..66c13abf2 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -29,7 +29,7 @@
       </b-button>
     </div>
     <div class="d-flex justify-content-center">
-      <div v-if="myTemplatesSelected" class="d-flex justify-content-center p-0">
+      <div v-if="myTemplatesSelected" class="d-flex justify-content-center p-0" data-cy="my-templates-list">
         <screen-template-card
           v-for="template in myTemplatesData"
           :key="template.id"
@@ -59,9 +59,10 @@
     mounted() {
         console.log('screen-templates component mounted');
     },
-    props: ['myTemplatesData', 'sharedTemplatesData'],
     data() {
       return {
+        myTemplatesData: null,
+        sharedTemplatesData: null,
         myTemplatesSelected: true,
         sharedTemplatesSelected: false,
       };
@@ -80,7 +81,40 @@
       showMyTemplates() {
         this.myTemplatesSelected = true;
         this.sharedTemplatesSelected = false;
-        console.log('myTemplatesData in screen-templates', this.myTemplatesData);
+        this.fetchMyTemplates();
+      },
+      fetchMyTemplates() {
+        ProcessMaker.apiClient
+        .get(
+          "templates/screen?is_public=0",
+        )
+        .then((response) => {
+          console.log('my templates response', response);
+          console.log('my templatesresponse.data.data', response.data.data);
+          this.myTemplatesData = response.data.data;
+          console.log('myTemplatesData in screen-templates.vue', this.myTemplatesData);
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+      },
+      fetchSharedTemplates() {
+      ProcessMaker.apiClient
+        .get(
+          "templates/screen?is_public=1",
+        )
+        .then((response) => {
+          console.log('shared templates response', response);
+          console.log('shared templatesresponse.data.data', response.data.data);
+          this.sharedTemplatesData = response.data.data;
+          console.log('sharedTemplatesData in screen-templates.vue', this.sharedTemplatesData);
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+      },
+      handleSelectedTemplate() {
+        console.log('hit handleSelectedTemplate');
       },
       showSharedTemplates() {
         this.$emit('show-shared-templates');
@@ -88,9 +122,6 @@
     },
     mounted() {
       this.showMyTemplates();
-      this.$on('shared-templates-loaded', () => {
-      console.log('Shared templates data received in screen-templates');
-    });
     }
   };
 </script>

From 9cc94952fd133737b566c1e426719878afd17f53 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Fri, 13 Sep 2024 00:26:54 -0400
Subject: [PATCH 4/9] Update shared templates display test

---
 tests/e2e/specs/ScreenTemplateSection.spec.js | 120 +++++++++++-------
 1 file changed, 76 insertions(+), 44 deletions(-)

diff --git a/tests/e2e/specs/ScreenTemplateSection.spec.js b/tests/e2e/specs/ScreenTemplateSection.spec.js
index 06be37f5d..2fa212c2f 100644
--- a/tests/e2e/specs/ScreenTemplateSection.spec.js
+++ b/tests/e2e/specs/ScreenTemplateSection.spec.js
@@ -1,24 +1,24 @@
 describe('Screen Template Section', () => {
-//   it('Opens the screen template panel when Templates button is clicked', () => {
-//     cy.visit("/");
-//     cy.get("[data-cy=screen-templates]").click();
-//     cy.get("[data-cy=screen-templates-section]").should(
-//       "be.visible"
-//     );
-//   })
-// });
+  it('Opens the screen template panel when Templates button is clicked', () => {
+    cy.visit("/");
+    cy.get("[data-cy=screen-templates]").click();
+    cy.get("[data-cy=screen-templates-section]").should(
+      "be.visible"
+    );
+  })
+});
 
-// it("Closes the screen template panel when X button is clicked", () => {
-//   cy.visit("/");
-//   cy.get("[data-cy=screen-templates]").click();
-//   cy.get("[data-cy=screen-templates-section]").should(
-//     "be.visible"
-//   );
-//   cy.get("[data-cy=close-templates-section]").click();
-//   cy.get("[data-cy=screen-templates-section]").should(
-//     "not.exist"
-//   );
-// });
+it("Closes the screen template panel when X button is clicked", () => {
+  cy.visit("/");
+  cy.get("[data-cy=screen-templates]").click();
+  cy.get("[data-cy=screen-templates-section]").should(
+    "be.visible"
+  );
+  cy.get("[data-cy=close-templates-section]").click();
+  cy.get("[data-cy=screen-templates-section]").should(
+    "not.exist"
+  );
+});
 
 it("Displays My Templates when My Templates button is clicked", () => {
   cy.visit("/");
@@ -65,35 +65,67 @@ it("Displays My Templates when My Templates button is clicked", () => {
     });
 });
 
-// it("Displays Shared Templates when Shared Templates button is clicked", () => {
-//   cy.visit("/");
-//   cy.get("[data-cy=screen-templates]").click();
-//   cy.get("[data-cy=screen-templates-section]").should(
-//     "be.visible"
-//   );
-//   cy.get("[data-cy=screen-templates]").click();
-//   cy.get("[data-cy=shared-templates-tab]").click();
+it("Displays Shared Templates when Shared Templates button is clicked", () => {
+  cy.visit("/");
 
-//   // CHECK REQUEST DATA FOR is_public = 1
+  cy.get("[data-cy=screen-templates]").click();
+  cy.get("[data-cy=screen-templates-section]").should("be.visible");
+  
+  cy.intercept(
+    "GET",
+    "/api/1.0/templates/screen?is_public=1",
+    {
+      statusCode: 200,
+      body: {
+        data: [{
+          asset_type: null,
+          description: "This is a sample screen description for testing.",
+          editing_screen_uuid: null,
+          id: 2,
+          is_default_template: 0,
+          is_owner: true,
+          is_public: 1,
+          is_system: 0,
+          media: [],
+          name: "Shared Templates Test",
+          screen_custom_css: null,
+          screen_type: "FORM",
+          template_media: [],
+          updated_at: "2024-09-10T18:18:27+00:00",
+          user_id: 1,
+          version: "1"
+        }]
+    }
+  }
+  ).as("fetchSharedTemplates");
 
-// });
+  cy.get("[data-cy=shared-templates-tab]").click();
 
-// it("Is hidden when an Inspector Panel should open", () => {
-//   cy.visit("/");
+  cy.wait("@fetchSharedTemplates");
 
-//   cy.get("[data-cy=screen-templates]").click();
-//   cy.get("[data-cy=screen-templates-section]").should(
-//     "be.visible"
-//   );
+  cy.get("[data-cy=shared-templates-list]")
+    .should("be.visible")
+    .within(() => {
+      cy.contains("Shared Templates Test").should("exist");
+    });
+});
+
+it("Is hidden when an Inspector Panel should open", () => {
+  cy.visit("/");
+
+  cy.get("[data-cy=screen-templates]").click();
+  cy.get("[data-cy=screen-templates-section]").should(
+    "be.visible"
+  );
   
-//   cy.setPreviewDataInput({ name: "" });
-//   cy.openAcordeon("collapse-1");
-//   cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
-//     position: "bottom"
-//   });
-//   cy.get("[data-cy=screen-element-container]").click();
+  cy.setPreviewDataInput({ name: "" });
+  cy.openAcordeon("collapse-1");
+  cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
+    position: "bottom"
+  });
+  cy.get("[data-cy=screen-element-container]").click();
 
-//   cy.get("[data-cy=screen-templates-section]").should(
-//     "not.exist"
-//   );
+  cy.get("[data-cy=screen-templates-section]").should(
+    "not.exist"
+  );
 });
\ No newline at end of file

From d22d02e6463b3583ea1460523de60e369caba258 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Fri, 13 Sep 2024 00:29:24 -0400
Subject: [PATCH 5/9] Handle showing of templates panel in vue-form-builder

---
 src/App.vue                         |  9 +--------
 src/components/vue-form-builder.vue | 25 +++++++++----------------
 2 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index cab3d7dc9..eef62ff20 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -112,8 +112,6 @@
           :screen="screen"
           title="Default"
           :render-controls="displayBuilder"
-          :show-templates-panel="showTemplatesPanel"
-          :reshow-templates-panel="reshowTemplatesPanel"
           @change="updateConfig"
         >
           <default-loading-spinner />
@@ -448,8 +446,6 @@ export default {
         }
       },
       showTemplatesPanel: false,
-      reshowTemplatesPanel: false,
-      myTemplatesData: null,
       sharedTemplatesData: null,
     };
   },
@@ -704,10 +700,7 @@ export default {
       this.$refs.watchersPopup.show();
     },
     openTemplatesPanel() {
-      this.showTemplatesPanel = true;
-      this.reshowTemplatesPanel = true;
-      this.$emit('update-templates-panel', this.showTemplatesPanel);
-      window.ProcessMaker.EventBus.$emit("open-templates-panel");
+      this.$refs.builder.openTemplatesPanel();
     },
     openComputedProperties() {
       this.$refs.computedProperties.show();
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 8ad7635f0..f15ad9355 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -297,14 +297,12 @@
         class="p-0 h-100 border-top-0 border-bottom-0 border-right-0 rounded-0"
       >
         <!--ADD NO TEMPLATES TO SHOW OPTION AND LOADING OPTION-->
-        <div v-if="showTemplatesPanel & !hideTemplatesPanel">
-        <!--{{ templatesPanelComp }}-->
+        <div v-if="showTemplatesPanel">
           <b-card-body class="p-2 h-100 overflow-auto">
             <screen-templates
               ref="screenTemplates"
               :shared-templates-data="sharedTemplatesData"
               @close-templates-panel="closeTemplatesPanel"
-              @show-shared-templates="$emit('show-shared-templates')"
             />
           </b-card-body>
         </div>
@@ -597,10 +595,6 @@ export default {
     processId: {
       default: 0
     },
-    showTemplatesPanel: {
-      type: Boolean,
-      default: false
-    },
     sharedTemplatesData: {
       type: Array,
     },
@@ -654,14 +648,10 @@ export default {
       collapse: {},
       groupOrder: {},
       searchProperties: ['name'],
-      hideTemplatesPanel: false,
+      showTemplatesPanel: false,
     };
   },
   computed: {
-  // templatesPanelComp() {
-  //   console.log('SHOWTEMPLATESPANEL =', this.showTemplatesPanel);
-  //   console.log('HIDETEMPLATESPANEL =', this.hideTemplatesPanel);
-  // },
     sortedPages() {
       return [...this.config].sort((a, b) => a.order - b.order);
     },
@@ -1133,6 +1123,13 @@ export default {
         this.$store.getters["undoRedoModule/currentState"].currentPage
       );
     },
+    openTemplatesPanel() {
+      this.showTemplatesPanel = true;
+
+    },
+    closeTemplatesPanel() {
+      this.showTemplatesPanel = false;
+    },
     updateConfig(items) {
       this.config[this.currentPage].items = items;
       this.updateState();
@@ -1427,10 +1424,6 @@ export default {
       this.updateState();
       this.inspect(clone);
     },
-    closeTemplatesPanel() {
-      this.hideTemplatesPanel = true;
-      window.ProcessMaker.EventBus.$emit("close-templates-panel");
-    },
   }
 };
 </script>

From 4a9107bad39d057905a0dc95a757c8e4173f85d8 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Fri, 13 Sep 2024 00:29:56 -0400
Subject: [PATCH 6/9] Update showing of sharedTemplates in ScreenTemplates

---
 src/components/ScreenTemplateCard.vue |  6 +++---
 src/components/ScreenTemplates.vue    | 22 +++++++++++++---------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
index 58d9a5e30..7e7d1bb19 100644
--- a/src/components/ScreenTemplateCard.vue
+++ b/src/components/ScreenTemplateCard.vue
@@ -40,9 +40,9 @@ export default {
   mounted() {
   },
   methods: {
-    selectTemplate() {
-      this.$emit("template-selected", this.template.id);
-    },
+    // selectTemplate() {
+    //   this.$emit("template-selected", this.template.id);
+    // },
   },
 };
 </script>
diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index 66c13abf2..8f275bcbc 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -29,7 +29,11 @@
       </b-button>
     </div>
     <div class="d-flex justify-content-center">
-      <div v-if="myTemplatesSelected" class="d-flex justify-content-center p-0" data-cy="my-templates-list">
+      <div
+        v-if="myTemplatesSelected"
+        class="d-flex justify-content-center p-0"
+        data-cy="my-templates-list"
+      >
         <screen-template-card
           v-for="template in myTemplatesData"
           :key="template.id"
@@ -37,7 +41,11 @@
           @template-selected="handleSelectedTemplate"
         />
       </div>
-      <div v-if="sharedTemplatesSelected" class="d-flex justify-content-center p-0">
+      <div
+        v-if="sharedTemplatesSelected"
+        class="d-flex justify-content-center p-0"
+        data-cy="shared-templates-list"
+      >
         <screen-template-card
           v-for="template in sharedTemplatesData"
           :key="template.id"
@@ -89,10 +97,7 @@
           "templates/screen?is_public=0",
         )
         .then((response) => {
-          console.log('my templates response', response);
-          console.log('my templatesresponse.data.data', response.data.data);
           this.myTemplatesData = response.data.data;
-          console.log('myTemplatesData in screen-templates.vue', this.myTemplatesData);
         })
         .catch((error) => {
           console.error(error);
@@ -104,10 +109,7 @@
           "templates/screen?is_public=1",
         )
         .then((response) => {
-          console.log('shared templates response', response);
-          console.log('shared templatesresponse.data.data', response.data.data);
           this.sharedTemplatesData = response.data.data;
-          console.log('sharedTemplatesData in screen-templates.vue', this.sharedTemplatesData);
         })
         .catch((error) => {
           console.error(error);
@@ -117,7 +119,9 @@
         console.log('hit handleSelectedTemplate');
       },
       showSharedTemplates() {
-        this.$emit('show-shared-templates');
+        this.myTemplatesSelected = false;
+        this.sharedTemplatesSelected = true;
+        this.fetchSharedTemplates();
       },
     },
     mounted() {

From 0f69cf382c5d6d3ee328701c575b64e7359de433 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Fri, 13 Sep 2024 01:42:45 -0400
Subject: [PATCH 7/9] Display 'No Templates Found' when users have no templates

Or if a user is in screen-builder standalone
---
 src/components/ScreenTemplates.vue  | 32 ++++++++++++++++++++---------
 src/components/vue-form-builder.vue |  1 -
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index 8f275bcbc..7cc3763ad 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -34,7 +34,14 @@
         class="d-flex justify-content-center p-0"
         data-cy="my-templates-list"
       >
+        <b-card-body
+          v-if="noMyTemplatesFound"
+          class="p-2 h-100 overflow-auto"
+        >
+          <h5>No templates found.</h5>
+        </b-card-body>
         <screen-template-card
+          v-else
           v-for="template in myTemplatesData"
           :key="template.id"
           :template="template"
@@ -46,7 +53,14 @@
         class="d-flex justify-content-center p-0"
         data-cy="shared-templates-list"
       >
+        <b-card-body
+          v-if="noSharedTemplatesFound"
+          class="p-2 h-100 overflow-auto"
+        >
+          <h5>No templates found.</h5>
+        </b-card-body>
         <screen-template-card
+          v-else
           v-for="template in sharedTemplatesData"
           :key="template.id"
           :template="template"
@@ -73,18 +87,10 @@
         sharedTemplatesData: null,
         myTemplatesSelected: true,
         sharedTemplatesSelected: false,
+        noMyTemplatesFound: false,
+        noSharedTemplatesFound: false,
       };
     },
-    watch: {
-      sharedTemplatesData() {
-        if (this.sharedTemplatesData !== null) {
-          console.log('SHARED TEMPLATES DATA NOT NULL', this.sharedTemplatesData);
-        this.sharedTemplatesSelected = true;
-        this.myTemplatesSelected = false;
-        console.log('sharedTemplatesData in screen-templates', this.sharedTemplatesData);
-        }
-      },
-    },
     methods: {
       showMyTemplates() {
         this.myTemplatesSelected = true;
@@ -98,6 +104,9 @@
         )
         .then((response) => {
           this.myTemplatesData = response.data.data;
+          if (this.myTemplatesData.length === 0 || this.myTemplatesData === undefined) {
+            this.noMyTemplatesFound = true;
+          }
         })
         .catch((error) => {
           console.error(error);
@@ -110,6 +119,9 @@
         )
         .then((response) => {
           this.sharedTemplatesData = response.data.data;
+          if (this.sharedTemplatesData.length === 0 || this.sharedTemplatesData === undefined) {
+            this.noSharedTemplatesFound = true;
+          }
         })
         .catch((error) => {
           console.error(error);
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index f15ad9355..208445cb1 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -1125,7 +1125,6 @@ export default {
     },
     openTemplatesPanel() {
       this.showTemplatesPanel = true;
-
     },
     closeTemplatesPanel() {
       this.showTemplatesPanel = false;

From 1c7ca31b81ee608b77b79fb48d25479e6c70b434 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Mon, 16 Sep 2024 13:05:29 -0400
Subject: [PATCH 8/9] Wrap hard-coded text in translation method

---
 src/components/ScreenTemplates.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index 7cc3763ad..14fdd9cc5 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -1,7 +1,7 @@
 <template>
   <div data-cy="screen-templates-section">
     <div class="d-flex justify-content-between">
-      <h6 class="pt-2">Select a Template</h6>
+      <h6 class="pt-2">{{ $t("Select a Template") }}</h6>
       <button
         class="panel-close-btn"
         @click="$emit('close-templates-panel')"
@@ -17,7 +17,7 @@
         :class="{ 'my-templates-selected': myTemplatesSelected }"
         data-cy="my-templates-tab"
       >
-        My Templates
+        {{ $t("My Templates") }}
       </b-button>
       <b-button
         @click="showSharedTemplates"
@@ -25,7 +25,7 @@
         :class="{ 'shared-templates-selected': sharedTemplatesSelected }"
         data-cy="shared-templates-tab"
       >
-        Shared Templates
+        {{ $t("Shared Templates") }}
       </b-button>
     </div>
     <div class="d-flex justify-content-center">
@@ -38,7 +38,7 @@
           v-if="noMyTemplatesFound"
           class="p-2 h-100 overflow-auto"
         >
-          <h5>No templates found.</h5>
+          <h5>{{ $t("No templates found.") }}</h5>
         </b-card-body>
         <screen-template-card
           v-else
@@ -57,7 +57,7 @@
           v-if="noSharedTemplatesFound"
           class="p-2 h-100 overflow-auto"
         >
-          <h5>No templates found.</h5>
+          <h5>{{ $t("No templates found.") }}</h5>
         </b-card-body>
         <screen-template-card
           v-else

From bb4e8ee4632f8138e94b8cddcfdde1859b643583 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Mon, 16 Sep 2024 13:16:05 -0400
Subject: [PATCH 9/9] Clean up code

---
 src/components/ScreenTemplateCard.vue | 10 +---------
 src/components/ScreenTemplates.vue    |  5 -----
 2 files changed, 1 insertion(+), 14 deletions(-)

diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
index 7e7d1bb19..6e802bca9 100644
--- a/src/components/ScreenTemplateCard.vue
+++ b/src/components/ScreenTemplateCard.vue
@@ -40,21 +40,13 @@ export default {
   mounted() {
   },
   methods: {
-    // selectTemplate() {
-    //   this.$emit("template-selected", this.template.id);
-    // },
+    
   },
 };
 </script>
 
 <style lang="scss" scoped>
 
-.screen-template-card {
-  // border: none;
-}
-
-
-
 .thumbnail-container:hover,
 .thumbnail-container.active {
   border-color: #1572C2;
diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index 14fdd9cc5..ceacf8a55 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -45,7 +45,6 @@
           v-for="template in myTemplatesData"
           :key="template.id"
           :template="template"
-          @template-selected="handleSelectedTemplate"
         />
       </div>
       <div
@@ -64,7 +63,6 @@
           v-for="template in sharedTemplatesData"
           :key="template.id"
           :template="template"
-          @template-selected="handleSelectedTemplate"
         />
       </div>
     </div>
@@ -127,9 +125,6 @@
           console.error(error);
         });
       },
-      handleSelectedTemplate() {
-        console.log('hit handleSelectedTemplate');
-      },
       showSharedTemplates() {
         this.myTemplatesSelected = false;
         this.sharedTemplatesSelected = true;