From e58b019dc21a262300df5785bf6f5653a742ff6a Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Tue, 27 Aug 2024 18:02:28 -0400
Subject: [PATCH 01/30] Create ScreenTemplates Panel section

---
 src/components/screen-templates.vue | 76 +++++++++++++++++++++++++++++
 src/components/vue-form-builder.vue | 12 ++++-
 2 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 src/components/screen-templates.vue

diff --git a/src/components/screen-templates.vue b/src/components/screen-templates.vue
new file mode 100644
index 000000000..076293a1a
--- /dev/null
+++ b/src/components/screen-templates.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="p-2 d-flex justify-content-between">
+      <h6 class="pt-2">Select a Template</h6>
+      <button class="panel-close-btn" @click="$emit('close-templates-panel')"><i class="fas fa-times"></i></button>
+    </div>
+    <div class="p-4">
+      <b-button-group class="p-2 template-tabs">
+      <b-button @click="showMyTemplates" class="default-template-btn" :class="{ 'my-templates-selected': myTemplatesSelected }">My Templates</b-button>
+      <b-button @click="showSharedTemplates" class="default-template-btn" :class="{ 'shared-templates-selected': sharedTemplatesSelected }">Shared Templates</b-button>
+    </b-button-group>
+    </div>
+  </div>
+</template>
+  
+<script>
+//   import MonacoEditor from 'vue-monaco';
+  export default {
+    mounted() {
+        console.log('screen-templates component mounted');
+    },
+    // props: ['value', 'cssErrors'],
+    // components: { MonacoEditor },
+    data() {
+      return {
+        myTemplatesSelected: true,
+        sharedTemplatesSelected: false,
+        monacoOptions: {
+          language: 'css',
+          automaticLayout: true,
+          minimap: { enabled: false },
+        },
+      };
+    },
+    methods: {
+      showMyTemplates() {
+        this.myTemplatesSelected = true;
+        this.sharedTemplatesSelected = false;
+      },
+      showSharedTemplates() {
+        this.sharedTemplatesSelected = true;
+        this.myTemplatesSelected = false;
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .panel-close-btn {
+    background-color: transparent;
+    border: none;
+    color: #596372;
+  }
+
+  .template-tabs {
+    background-color: #E9ECF1;
+    border-radius: 12px;
+    font-size: 14px;
+    text-transform: lowercase;
+  }
+
+  .default-template-btn {
+    background-color: transparent;
+    border: none;
+    color: #596372;
+  }
+
+  .my-templates-selected {
+    background-color: #ffffff;
+    color: #20242A;
+    border-radius: 12px;
+    border: none;
+  }
+
+</style>
+  
\ No newline at end of file
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 19f127351..632562862 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -297,7 +297,8 @@
         class="p-0 h-100 border-top-0 border-bottom-0 border-right-0 rounded-0"
       >
         <b-card-body class="p-0 h-100 overflow-auto">
-          <template v-for="accordion in accordions">
+        <screen-templates v-if="showTemplatesPanel" ref="screenTemplates" v-model="templates" @close-templates-panel="$emit('close-templates-panel')"/>
+          <template v-else v-for="accordion in accordions">
             <b-button
               v-if="
                 getInspectorFields(accordion) &&
@@ -488,6 +489,7 @@ import MultipleUploadsCheckbox from "./utils/multiple-uploads-checkbox";
 import { formTypes } from "@/global-properties";
 import TabsBar from "./TabsBar.vue";
 import Sortable from './sortable/Sortable.vue';
+import ScreenTemplates from './screen-templates.vue';
 
 // To include another language in the Validator with variable processmaker
 const globalObject = typeof window === "undefined" ? global : window;
@@ -555,6 +557,7 @@ export default {
     ...renderer,
     PagesDropdown,
     Sortable,
+    ScreenTemplates,
   },
   mixins: [HasColorProperty, testing],
   props: {
@@ -580,7 +583,11 @@ export default {
     },
     processId: {
       default: 0
-    }
+    },
+    showTemplatesPanel: {
+      type: Boolean,
+      default: false
+    },
   },
   data() {
     const config = this.initialConfig || defaultConfig;
@@ -1265,6 +1272,7 @@ export default {
       });
     },
     inspect(element = {}) {
+      this.$emit('close-templates-panel');
       this.inspection = element;
       this.selected = element;
       const defaultAccordion = this.accordions.find(

From 41eff42b01961bdb7c857412155c9543b240852a Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Wed, 28 Aug 2024 16:23:42 -0400
Subject: [PATCH 02/30] Update Template buttons styling; add functionality for
 fetching Templates

---
 src/components/screen-templates.vue | 55 +++++++++++++++++++----------
 src/components/vue-form-builder.vue | 16 ++++++++-
 2 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/components/screen-templates.vue b/src/components/screen-templates.vue
index 076293a1a..41e7abda8 100644
--- a/src/components/screen-templates.vue
+++ b/src/components/screen-templates.vue
@@ -4,44 +4,44 @@
       <h6 class="pt-2">Select a Template</h6>
       <button class="panel-close-btn" @click="$emit('close-templates-panel')"><i class="fas fa-times"></i></button>
     </div>
-    <div class="p-4">
-      <b-button-group class="p-2 template-tabs">
-      <b-button @click="showMyTemplates" class="default-template-btn" :class="{ 'my-templates-selected': myTemplatesSelected }">My Templates</b-button>
-      <b-button @click="showSharedTemplates" class="default-template-btn" :class="{ 'shared-templates-selected': sharedTemplatesSelected }">Shared Templates</b-button>
-    </b-button-group>
+    <div class="d-flex m-2 template-tabs justify-content-center">
+      <b-button @click="showMyTemplates" class="d-inline default-template-btn px-1" :class="{ 'my-templates-selected': myTemplatesSelected }">My Templates</b-button>
+      <b-button @click="showSharedTemplates" class="d-inline default-template-btn" :class="{ 'shared-templates-selected': sharedTemplatesSelected }">Shared Templates</b-button>
     </div>
   </div>
 </template>
   
 <script>
-//   import MonacoEditor from 'vue-monaco';
   export default {
     mounted() {
         console.log('screen-templates component mounted');
     },
-    // props: ['value', 'cssErrors'],
-    // components: { MonacoEditor },
+    props: ['myTemplatesData', 'sharedTemplatesData'],
     data() {
       return {
         myTemplatesSelected: true,
         sharedTemplatesSelected: false,
-        monacoOptions: {
-          language: 'css',
-          automaticLayout: true,
-          minimap: { enabled: false },
-        },
       };
     },
     methods: {
       showMyTemplates() {
         this.myTemplatesSelected = true;
         this.sharedTemplatesSelected = false;
+        console.log('myTemplatesData in screen-templates', this.myTemplatesData);
       },
       showSharedTemplates() {
+        this.$emit('show-shared-templates');
         this.sharedTemplatesSelected = true;
         this.myTemplatesSelected = false;
+        console.log('sharedTemplatesData in screen-templates', this.sharedTemplatesData);
       },
     },
+    mounted() {
+      this.showMyTemplates();
+      this.$on('shared-templates-loaded', () => {
+      console.log('Shared templates data received in screen-templates');
+    });
+    }
   };
 </script>
 
@@ -53,24 +53,43 @@
   }
 
   .template-tabs {
+    padding: 4px;
     background-color: #E9ECF1;
-    border-radius: 12px;
-    font-size: 14px;
-    text-transform: lowercase;
+    border-radius: 8px;
   }
 
   .default-template-btn {
+    width: 50%;
     background-color: transparent;
     border: none;
     color: #596372;
+    font-size: 12px;
+    padding-left: 0px;
+    padding-right: 0px;
+    text-transform: none;
+    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: 12px;
+    border-radius: 8px;
+    border: none;
+    font-weight: 600;
+    font-size: 12px;
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .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;
   }
 
 </style>
-  
\ No newline at end of file
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 632562862..932b375e1 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -297,7 +297,15 @@
         class="p-0 h-100 border-top-0 border-bottom-0 border-right-0 rounded-0"
       >
         <b-card-body class="p-0 h-100 overflow-auto">
-        <screen-templates v-if="showTemplatesPanel" ref="screenTemplates" v-model="templates" @close-templates-panel="$emit('close-templates-panel')"/>
+        <screen-templates
+          v-if="myTemplatesData && showTemplatesPanel"
+          ref="screenTemplates"
+          v-model="templates"
+          :my-templates-data="myTemplatesData"
+          :shared-templates-data="sharedTemplatesData"
+          @close-templates-panel="$emit('close-templates-panel')"
+          @show-shared-templates="$emit('show-shared-templates')"
+        />
           <template v-else v-for="accordion in accordions">
             <b-button
               v-if="
@@ -588,6 +596,12 @@ export default {
       type: Boolean,
       default: false
     },
+    myTemplatesData: {
+      type: Array,
+    },
+    sharedTemplatesData: {
+      type: Array,
+    },
   },
   data() {
     const config = this.initialConfig || defaultConfig;

From 37991ef253898b80ca2f8ee3bc66d230d0334752 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Wed, 28 Aug 2024 16:35:45 -0400
Subject: [PATCH 03/30] Add watcher for sharedTemplatesData

---
 src/components/screen-templates.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/screen-templates.vue b/src/components/screen-templates.vue
index 41e7abda8..5ac2f3f09 100644
--- a/src/components/screen-templates.vue
+++ b/src/components/screen-templates.vue
@@ -23,6 +23,16 @@
         sharedTemplatesSelected: 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;
@@ -31,9 +41,6 @@
       },
       showSharedTemplates() {
         this.$emit('show-shared-templates');
-        this.sharedTemplatesSelected = true;
-        this.myTemplatesSelected = false;
-        console.log('sharedTemplatesData in screen-templates', this.sharedTemplatesData);
       },
     },
     mounted() {

From 724f53f6919320397e5fac08894bcdc958a54b9c Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Fri, 30 Aug 2024 17:47:49 -0400
Subject: [PATCH 04/30] Update ScreenTemplates Formatting; Add
 ScreenTemplatesCard

---
 src/components/ScreenTemplateCard.vue         |  92 ++++++++++++
 ...reen-templates.vue => ScreenTemplates.vue} |  25 +++-
 src/components/vue-form-builder.vue           | 135 +++++++++---------
 3 files changed, 186 insertions(+), 66 deletions(-)
 create mode 100644 src/components/ScreenTemplateCard.vue
 rename src/components/{screen-templates.vue => ScreenTemplates.vue} (77%)

diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
new file mode 100644
index 000000000..58d9a5e30
--- /dev/null
+++ b/src/components/ScreenTemplateCard.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <b-card
+      img-top
+      style="max-width: 20rem;"
+      class="mb-2 p-0"
+    >
+      <img class="thumbnail-image" v-if="thumbnail" :src="thumbnail" :alt="`${template.name}`"/>
+      <i v-else class="fas fa-palette thumbnail-icon"></i>
+      <b-card-body>
+        <div class="template-details">
+          <span class="template-name d-block pt-1">{{ template.name }}</span>
+          <span class="template-description d-block">{{ template.description }}</span>
+        </div>
+      </b-card-body>
+    </b-card>
+    
+  </div>
+</template>
+
+<script>
+
+export default {
+  mixins: [],
+  props: ['template'],
+  data() {
+    return {
+    };
+  },
+  computed: {
+    thumbnail() {
+      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 null;
+    },
+  },
+  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;
+  cursor: pointer;
+}
+
+.thumbnail-image {
+  width: 100%;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.thumbnail-icon {
+  color: #CDDDEE;
+  font-size: 59px;
+}
+
+.template-details {
+  color: #556271;
+}
+
+.template-name {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.template-description {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/screen-templates.vue b/src/components/ScreenTemplates.vue
similarity index 77%
rename from src/components/screen-templates.vue
rename to src/components/ScreenTemplates.vue
index 5ac2f3f09..edafafd9b 100644
--- a/src/components/screen-templates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="p-2 d-flex justify-content-between">
+    <div class="d-flex justify-content-between">
       <h6 class="pt-2">Select a Template</h6>
       <button class="panel-close-btn" @click="$emit('close-templates-panel')"><i class="fas fa-times"></i></button>
     </div>
@@ -8,11 +8,34 @@
       <b-button @click="showMyTemplates" class="d-inline default-template-btn px-1" :class="{ 'my-templates-selected': myTemplatesSelected }">My Templates</b-button>
       <b-button @click="showSharedTemplates" class="d-inline default-template-btn" :class="{ 'shared-templates-selected': sharedTemplatesSelected }">Shared Templates</b-button>
     </div>
+    <div class="d-flex justify-content-center">
+      <div v-if="myTemplatesSelected" class="d-flex justify-content-center p-0">
+        <screen-template-card
+          v-for="template in myTemplatesData"
+          :key="template.id"
+          :template="template"
+          @template-selected="handleSelectedTemplate"
+        />
+      </div>
+      <div v-if="sharedTemplatesSelected" class="d-flex justify-content-center p-0">
+        <screen-template-card
+          v-for="template in sharedTemplatesData"
+          :key="template.id"
+          :template="template"
+          @template-selected="handleSelectedTemplate"
+        />
+      </div>
+    </div>
   </div>
 </template>
   
 <script>
+  import ScreenTemplateCard from './ScreenTemplateCard.vue';
+
   export default {
+    components: {
+      ScreenTemplateCard,
+    },
     mounted() {
         console.log('screen-templates component mounted');
     },
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 932b375e1..c7ba97bd0 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -296,73 +296,78 @@
         no-body
         class="p-0 h-100 border-top-0 border-bottom-0 border-right-0 rounded-0"
       >
-        <b-card-body class="p-0 h-100 overflow-auto">
-        <screen-templates
-          v-if="myTemplatesData && showTemplatesPanel"
-          ref="screenTemplates"
-          v-model="templates"
-          :my-templates-data="myTemplatesData"
-          :shared-templates-data="sharedTemplatesData"
-          @close-templates-panel="$emit('close-templates-panel')"
-          @show-shared-templates="$emit('show-shared-templates')"
-        />
-          <template v-else v-for="accordion in accordions">
-            <b-button
-              v-if="
-                getInspectorFields(accordion) &&
-                getInspectorFields(accordion).length > 0
-              "
-              :key="`${accordionName(accordion)}-button`"
-              variant="outline"
-              class="text-left card-header d-flex align-items-center w-100 outline-0 text-capitalize shadow-none"
-              :data-cy="`accordion-${accordionName(accordion).replace(
-                ' ',
-                ''
-              )}`"
-              :accordion-name="`accordion-${accordionName(accordion).replace(
-                ' ',
-                ''
-              )}`"
-              :is-open="accordion.open ? '1' : '0'"
-              @click="toggleAccordion(accordion)"
-            >
-              <i class="fas fa-cog mr-2" />
-              {{ $t(accordionName(accordion)) }}
-              <i
-                class="fas fa-angle-down ml-auto"
-                :class="{ 'fas fa-angle-right': !accordion.open }"
-              />
-            </b-button>
-            <b-collapse
-              :id="accordionName(accordion)"
-              :key="`${accordionName(accordion)}-collapse`"
-              v-model="accordion.open"
-            >
-              <component
-                :is="item.type"
-                v-for="(item, index) in getInspectorFields(accordion)"
-                :key="index"
-                v-model="inspection.config[item.field]"
-                :data-cy="'inspector-' + (item.field || item.config.name)"
-                v-bind="item.config"
-                :field-name="item.field"
-                :field-accordion="`accordion-${accordionName(accordion).replace(
+        <div v-if="myTemplatesData && showTemplatesPanel">
+          <b-card-body class="p-2 h-100 overflow-auto">
+            <screen-templates
+              ref="screenTemplates"
+              v-model="templates"
+              :my-templates-data="myTemplatesData"
+              :shared-templates-data="sharedTemplatesData"
+              @close-templates-panel="$emit('close-templates-panel')"
+              @show-shared-templates="$emit('show-shared-templates')"
+            />
+          </b-card-body>
+        </div>
+        <div v-else>
+          <b-card-body class="p-0 h-100 overflow-auto">
+            <template v-for="accordion in accordions">
+              <b-button
+                v-if="
+                  getInspectorFields(accordion) &&
+                  getInspectorFields(accordion).length > 0
+                "
+                :key="`${accordionName(accordion)}-button`"
+                variant="outline"
+                class="text-left card-header d-flex align-items-center w-100 outline-0 text-capitalize shadow-none"
+                :data-cy="`accordion-${accordionName(accordion).replace(
                   ' ',
                   ''
                 )}`"
-                :builder="builder"
-                :form-config="config"
-                :screen-type="screenType"
-                :current-page="currentPage"
-                :selected-control="selected"
-                class="border-bottom m-0 p-4"
-                @focusout.native="updateState"
-                @update-state="updateState"
-                @setName="inspection.config.name = $event"
-              />
-            </b-collapse>
-          </template>
-        </b-card-body>
+                :accordion-name="`accordion-${accordionName(accordion).replace(
+                  ' ',
+                  ''
+                )}`"
+                :is-open="accordion.open ? '1' : '0'"
+                @click="toggleAccordion(accordion)"
+              >
+                <i class="fas fa-cog mr-2" />
+                {{ $t(accordionName(accordion)) }}
+                <i
+                  class="fas fa-angle-down ml-auto"
+                  :class="{ 'fas fa-angle-right': !accordion.open }"
+                />
+              </b-button>
+              <b-collapse
+                :id="accordionName(accordion)"
+                :key="`${accordionName(accordion)}-collapse`"
+                v-model="accordion.open"
+              >
+                <component
+                  :is="item.type"
+                  v-for="(item, index) in getInspectorFields(accordion)"
+                  :key="index"
+                  v-model="inspection.config[item.field]"
+                  :data-cy="'inspector-' + (item.field || item.config.name)"
+                  v-bind="item.config"
+                  :field-name="item.field"
+                  :field-accordion="`accordion-${accordionName(accordion).replace(
+                    ' ',
+                    ''
+                  )}`"
+                  :builder="builder"
+                  :form-config="config"
+                  :screen-type="screenType"
+                  :current-page="currentPage"
+                  :selected-control="selected"
+                  class="border-bottom m-0 p-4"
+                  @focusout.native="updateState"
+                  @update-state="updateState"
+                  @setName="inspection.config.name = $event"
+                />
+              </b-collapse>
+            </template>  
+          </b-card-body>
+        </div>
       </b-card>
     </b-col>
 
@@ -497,7 +502,7 @@ import MultipleUploadsCheckbox from "./utils/multiple-uploads-checkbox";
 import { formTypes } from "@/global-properties";
 import TabsBar from "./TabsBar.vue";
 import Sortable from './sortable/Sortable.vue';
-import ScreenTemplates from './screen-templates.vue';
+import ScreenTemplates from './ScreenTemplates.vue';
 
 // To include another language in the Validator with variable processmaker
 const globalObject = typeof window === "undefined" ? global : window;

From 4417d8269abd406864153bb18c8a75a433971744 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Thu, 12 Sep 2024 00:51:56 -0400
Subject: [PATCH 05/30] Create cypress test for ScreenTemplateSection

---
 tests/e2e/specs/ScreenTemplateSection.js | 86 ++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 tests/e2e/specs/ScreenTemplateSection.js

diff --git a/tests/e2e/specs/ScreenTemplateSection.js b/tests/e2e/specs/ScreenTemplateSection.js
new file mode 100644
index 000000000..14404586d
--- /dev/null
+++ b/tests/e2e/specs/ScreenTemplateSection.js
@@ -0,0 +1,86 @@
+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.wait(2000);
+  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=accordion-Advanced]").click();
+
+  cy.get("[data-cy=screen-templates-section]").should(
+    "not.exist"
+  );
+});
\ No newline at end of file

From 61537eaa90a19d6848ebf6baf6dfb9cc013c50e7 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Thu, 12 Sep 2024 00:52:45 -0400
Subject: [PATCH 06/30] Remove commented code

---
 tests/e2e/specs/ScreenTemplateSection.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/e2e/specs/ScreenTemplateSection.js b/tests/e2e/specs/ScreenTemplateSection.js
index 14404586d..904705f52 100644
--- a/tests/e2e/specs/ScreenTemplateSection.js
+++ b/tests/e2e/specs/ScreenTemplateSection.js
@@ -78,7 +78,6 @@ it("Is hidden when an Inspector Panel should open", () => {
     position: "bottom"
   });
   cy.get("[data-cy=screen-element-container]").click();
-  // cy.get("[data-cy=accordion-Advanced]").click();
 
   cy.get("[data-cy=screen-templates-section]").should(
     "not.exist"

From 46827c9e79171612a5aa4d802ed0a17091a63404 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Thu, 12 Sep 2024 00:55:02 -0400
Subject: [PATCH 07/30] Add templates button to ScreenToolbar for use when
 package-versions not installed

Also for use in screen-builder standalone
---
 src/components/ScreenToolbar.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/ScreenToolbar.vue b/src/components/ScreenToolbar.vue
index a1815d844..daf8a1eb9 100644
--- a/src/components/ScreenToolbar.vue
+++ b/src/components/ScreenToolbar.vue
@@ -21,6 +21,15 @@
         <i class="fas fa-redo" />
         {{ $t("Redo") }}
       </b-button>
+      <b-button
+        class="screen-toolbar-button"
+        variant="link"
+        data-cy="screen-templates"
+        @click="$emit('open-templates')"
+      >
+        <i class="fas fa-palette" />
+        {{ $t("Templates") }}
+      </b-button>
       <b-button
         type="button"
         class="screen-toolbar-button"

From eb2f7b53e767e03b75dba6b5467ed8cc666dffd6 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Thu, 12 Sep 2024 01:51:13 -0400
Subject: [PATCH 08/30] Handle open and close of templates panel from
 screen-builder

For cypress testing and screen-builder standalone
---
 src/App.vue                         | 15 ++++++++++++++-
 src/components/ScreenTemplates.vue  | 28 ++++++++++++++++++++++++----
 src/components/vue-form-builder.vue | 19 ++++++++++++++-----
 3 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a2ba161e2..cab3d7dc9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -52,6 +52,7 @@
             <screen-toolbar
               @undo="$refs.builder.undo()"
               @redo="$refs.builder.redo()"
+              @open-templates="openTemplatesPanel"
               @open-calc="openComputedProperties"
               @open-customCss="openCustomCSS"
               @open-watchers="openWatchersPopup"
@@ -111,6 +112,8 @@
           :screen="screen"
           title="Default"
           :render-controls="displayBuilder"
+          :show-templates-panel="showTemplatesPanel"
+          :reshow-templates-panel="reshowTemplatesPanel"
           @change="updateConfig"
         >
           <default-loading-spinner />
@@ -443,7 +446,11 @@ export default {
         minimap: {
           enabled: false
         }
-      }
+      },
+      showTemplatesPanel: false,
+      reshowTemplatesPanel: false,
+      myTemplatesData: null,
+      sharedTemplatesData: null,
     };
   },
   computed: {
@@ -696,6 +703,12 @@ export default {
     openWatchersPopup() {
       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");
+    },
     openComputedProperties() {
       this.$refs.computedProperties.show();
     },
diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index edafafd9b..2db30a5a9 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -1,12 +1,32 @@
 <template>
-  <div>
+  <div data-cy="screen-templates-section">
     <div class="d-flex justify-content-between">
       <h6 class="pt-2">Select a Template</h6>
-      <button class="panel-close-btn" @click="$emit('close-templates-panel')"><i class="fas fa-times"></i></button>
+      <button
+        class="panel-close-btn"
+        @click="$emit('close-templates-panel')"
+        data-cy="close-templates-section"
+      >
+        <i class="fas fa-times"></i>
+      </button>
     </div>
     <div class="d-flex m-2 template-tabs justify-content-center">
-      <b-button @click="showMyTemplates" class="d-inline default-template-btn px-1" :class="{ 'my-templates-selected': myTemplatesSelected }">My Templates</b-button>
-      <b-button @click="showSharedTemplates" class="d-inline default-template-btn" :class="{ 'shared-templates-selected': sharedTemplatesSelected }">Shared Templates</b-button>
+      <b-button
+        @click="showMyTemplates"
+        class="d-inline default-template-btn px-1"
+        :class="{ 'my-templates-selected': myTemplatesSelected }"
+        data-cy="my-templates-tab"
+      >
+        My Templates
+      </b-button>
+      <b-button
+        @click="showSharedTemplates"
+        class="d-inline default-template-btn"
+        :class="{ 'shared-templates-selected': sharedTemplatesSelected }"
+        data-cy="shared-templates-tab"
+      >
+        Shared Templates
+      </b-button>
     </div>
     <div class="d-flex justify-content-center">
       <div v-if="myTemplatesSelected" class="d-flex justify-content-center p-0">
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index c7ba97bd0..35dd95a61 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -296,14 +296,15 @@
         no-body
         class="p-0 h-100 border-top-0 border-bottom-0 border-right-0 rounded-0"
       >
-        <div v-if="myTemplatesData && showTemplatesPanel">
+        <!--ADD NO TEMPLATES TO SHOW OPTION AND LOADING OPTION-->
+        <div v-if="showTemplatesPanel & !hideTemplatesPanel">
+        <!--{{ templatesPanelComp }}-->
           <b-card-body class="p-2 h-100 overflow-auto">
             <screen-templates
               ref="screenTemplates"
-              v-model="templates"
               :my-templates-data="myTemplatesData"
               :shared-templates-data="sharedTemplatesData"
-              @close-templates-panel="$emit('close-templates-panel')"
+              @close-templates-panel="closeTemplatesPanel"
               @show-shared-templates="$emit('show-shared-templates')"
             />
           </b-card-body>
@@ -657,9 +658,14 @@ export default {
       collapse: {},
       groupOrder: {},
       searchProperties: ['name'],
+      hideTemplatesPanel: false,
     };
   },
   computed: {
+  // templatesPanelComp() {
+  //   console.log('SHOWTEMPLATESPANEL =', this.showTemplatesPanel);
+  //   console.log('HIDETEMPLATESPANEL =', this.hideTemplatesPanel);
+  // },
     sortedPages() {
       return [...this.config].sort((a, b) => a.order - b.order);
     },
@@ -1291,7 +1297,7 @@ export default {
       });
     },
     inspect(element = {}) {
-      this.$emit('close-templates-panel');
+      this.closeTemplatesPanel();
       this.inspection = element;
       this.selected = element;
       const defaultAccordion = this.accordions.find(
@@ -1425,7 +1431,10 @@ export default {
       this.updateState();
       this.inspect(clone);
     },
-
+    closeTemplatesPanel() {
+      this.hideTemplatesPanel = true;
+      window.ProcessMaker.EventBus.$emit("close-templates-panel");
+    },
   }
 };
 </script>

From ee0babd65c21db88155ef2aaa9ee8c4eaa7452fd Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Thu, 12 Sep 2024 11:05:56 -0400
Subject: [PATCH 09/30] Remove cy.wait from test

---
 tests/e2e/specs/ScreenTemplateSection.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/e2e/specs/ScreenTemplateSection.js b/tests/e2e/specs/ScreenTemplateSection.js
index 904705f52..c40ebb329 100644
--- a/tests/e2e/specs/ScreenTemplateSection.js
+++ b/tests/e2e/specs/ScreenTemplateSection.js
@@ -15,7 +15,6 @@ it("Closes the screen template panel when X button is clicked", () => {
     "be.visible"
   );
   cy.get("[data-cy=close-templates-section]").click();
-  cy.wait(2000);
   cy.get("[data-cy=screen-templates-section]").should(
     "not.exist"
   );

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 10/30] 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 11/30] 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 12/30] 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 13/30] 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 14/30] 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 15/30] 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 16/30] 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 4e88c3715a5be1007e20139ad514084c3a984d1e Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Sat, 14 Sep 2024 23:39:04 -0400
Subject: [PATCH 17/30] CSS Updates for Screen Template Cards

---
 src/components/ScreenTemplateCard.vue | 52 ++++++++++++++----
 src/components/ScreenTemplates.vue    | 77 +++++++++++++++++----------
 src/components/vue-form-builder.vue   |  7 ++-
 3 files changed, 96 insertions(+), 40 deletions(-)

diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
index 7e7d1bb19..91aea0261 100644
--- a/src/components/ScreenTemplateCard.vue
+++ b/src/components/ScreenTemplateCard.vue
@@ -2,11 +2,21 @@
   <div>
     <b-card
       img-top
-      style="max-width: 20rem;"
-      class="mb-2 p-0"
+      class="mb-2 screenbuilder-template-card"
     >
-      <img class="thumbnail-image" v-if="thumbnail" :src="thumbnail" :alt="`${template.name}`"/>
-      <i v-else class="fas fa-palette thumbnail-icon"></i>
+      <div
+        v-if="thumbnail"
+        class="thumbnail-container thumbnail-image-container"
+      >
+        <img class="thumbnail-image" :src="thumbnail" :alt="`${template.name}`"/>
+      </div>
+      <div
+        v-else
+        class="thumbnail-container thumbnail-icon-container d-flex align-items-center justify-content-center"
+      >
+        <i class="p-4 fas fa-palette thumbnail-icon"></i>
+      </div>
+      <hr class="card-divider">
       <b-card-body>
         <div class="template-details">
           <span class="template-name d-block pt-1">{{ template.name }}</span>
@@ -49,11 +59,27 @@ export default {
 
 <style lang="scss" scoped>
 
-.screen-template-card {
-  // border: none;
+.screenbuilder-template-card {
+  width: 225px;
+  margin: 8px;
+  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);;
 }
 
+.card-divider {
+  width: 100%;
+  margin: 0px;
+  background-color: #D7DDE5;
+}
 
+// .thumbnail-container {
+//   width: 247px;
+//   height: 133px;
+//   border: 2px solid #CDDDEE;
+//   border-radius: 7px;
+//   background-color: #fff;
+// }
 
 .thumbnail-container:hover,
 .thumbnail-container.active {
@@ -63,6 +89,12 @@ export default {
 
 .thumbnail-image {
   width: 100%;
+  border-radius: 8px 8px 0px 0px;
+}
+
+.thumbnail-image-container {
+  border-radius: 8px;
+  padding: 0px !important;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
@@ -74,19 +106,21 @@ export default {
 }
 
 .template-details {
-  color: #556271;
+  padding: 10px;
 }
 
 .template-name {
   font-size: 14px;
   font-weight: 600;
-  line-height: 24px;
+  line-height: 20px;
+  color: #2F343B;
 }
 
 .template-description {
-  font-size: 12px;
+  font-size: 12.5px;
   font-weight: 400;
   line-height: 18px;
+  color: #4E5663;
 }
 
 </style>
\ No newline at end of file
diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index 7cc3763ad..b965595fb 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -1,5 +1,8 @@
 <template>
-  <div 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">Select a Template</h6>
       <button
@@ -28,44 +31,48 @@
         Shared Templates
       </b-button>
     </div>
-    <div class="d-flex justify-content-center">
+    <div class="d-flex justify-content-center cards-container">
       <div
         v-if="myTemplatesSelected"
         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"
-          @template-selected="handleSelectedTemplate"
-        />
+        <b-card-group>
+          <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"
+            @template-selected="handleSelectedTemplate"
+          />
+        </b-card-group>
       </div>
       <div
         v-if="sharedTemplatesSelected"
         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"
-          @template-selected="handleSelectedTemplate"
-        />
+        <b-card-group>
+          <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"
+            @template-selected="handleSelectedTemplate"
+          />
+        </b-card-group>
       </div>
     </div>
   </div>
@@ -143,12 +150,23 @@
 </script>
 
 <style lang="scss" scoped>
+.cards-container {
+  //display: block;
+  //flex-direction: column;
+  height: 100%;
+  overflow-x: scroll;
+}
+
   .panel-close-btn {
     background-color: transparent;
     border: none;
     color: #596372;
   }
 
+//.template-cards {
+// display: block;
+//}
+
   .template-tabs {
     padding: 4px;
     background-color: #E9ECF1;
@@ -164,7 +182,6 @@
     padding-left: 0px;
     padding-right: 0px;
     text-transform: none;
-    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 {
@@ -176,6 +193,7 @@
     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 {
@@ -187,6 +205,7 @@
     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>
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 208445cb1..c787ccce8 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -296,9 +296,8 @@
         no-body
         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">
-          <b-card-body class="p-2 h-100 overflow-auto">
+          <b-card-body class="p-2 h-100 overflow-auto screen-templates-column">
             <screen-templates
               ref="screenTemplates"
               :shared-templates-data="sharedTemplatesData"
@@ -1558,6 +1557,10 @@ $side-bar-font-size: 0.875rem;
   font-size: $side-bar-font-size;
 }
 
+.screen-templates-column {
+  overflow-y: auto;
+}
+
 .form-control-ghost {
   margin-bottom: 0;
   border-radius: 0.25rem;

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 18/30] 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 19/30] 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;

From 3e985ffccaf30d6bd74b0ab40fc3340617b8c42c Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Mon, 16 Sep 2024 22:36:43 -0400
Subject: [PATCH 20/30] Add b-collapse and buttons to template cards; update
 styles

---
 src/components/ScreenTemplateCard.vue | 97 +++++++++++++++++++++++++--
 1 file changed, 92 insertions(+), 5 deletions(-)

diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
index 91aea0261..7986646c2 100644
--- a/src/components/ScreenTemplateCard.vue
+++ b/src/components/ScreenTemplateCard.vue
@@ -3,6 +3,7 @@
     <b-card
       img-top
       class="mb-2 screenbuilder-template-card"
+      @click="showDetails"
     >
       <div
         v-if="thumbnail"
@@ -17,11 +18,49 @@
         <i class="p-4 fas fa-palette thumbnail-icon"></i>
       </div>
       <hr class="card-divider">
-      <b-card-body>
+      <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>
         </div>
+        <b-collapse v-model="showApplyOptions">
+            <b-form-checkbox-group
+              class="apply-options-group p-2"
+              v-model="selected"
+              name="apply-options"
+            >
+              <div v-for="option in applyOptions" :key="option.value">
+                <i :class="option.icon"></i>
+                <b-form-checkbox
+                  class="option-checkbox"
+                  :value="option.value"
+                >
+                  {{ option.text }}
+                </b-form-checkbox>
+              </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="onApply"
+              >
+                {{ $t("Apply") }}
+              </button>
+            </div>
+        </b-collapse>
       </b-card-body>
     </b-card>
     
@@ -35,6 +74,13 @@ export default {
   props: ['template'],
   data() {
     return {
+      showApplyOptions: false,
+      selected: [],
+      applyOptions: [
+        { text: 'CSS', value: 'css', icon: 'fp-css-icon' },
+        { text: 'Fields', value: 'fields', icon: 'fp-fields-icon' },
+        { text: 'Layout', value: 'layout', icon: 'fp-layout-icon' },
+      ],
     };
   },
   computed: {
@@ -50,9 +96,16 @@ export default {
   mounted() {
   },
   methods: {
-    // selectTemplate() {
-    //   this.$emit("template-selected", this.template.id);
-    // },
+    showDetails() {
+      this.showApplyOptions = !this.showApplyOptions;
+    },
+    onApply() {
+      // TODO: apply selected options
+    },
+    onCancel() {
+      this.showApplyOptions = false;
+      this.selected = [];
+    }
   },
 };
 </script>
@@ -64,7 +117,8 @@ export default {
   margin: 8px;
   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 {
@@ -123,4 +177,37 @@ export default {
   color: #4E5663;
 }
 
+.apply-options-group {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: 10px;
+}
+
+.apply-options-group i {
+  margin-bottom: 5px;
+  display: block;
+  font-size: 50px;
+}
+
+.option-checkbox {
+  font-size: 12px;
+}
+
+.bottom-card-divider {
+  width: 90%;
+  background-color: #E9ECF1
+}
+
+.apply-btn-container {
+  padding: 0px 10px 10px 0px;
+}
+
+.card-btn {
+  font-size: 14px;
+  text-transform: none;
+  border-radius: 8px;
+  padding: 5px 10px;
+}
+
 </style>
\ No newline at end of file

From a5704285cfd1e3fdb1bad7d8e8036e87c601487b Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Mon, 16 Sep 2024 22:37:31 -0400
Subject: [PATCH 21/30] Add translation methods to hardcoded text

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

diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index b965595fb..9492dc01d 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -4,7 +4,7 @@
     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')"
@@ -20,7 +20,7 @@
         :class="{ 'my-templates-selected': myTemplatesSelected }"
         data-cy="my-templates-tab"
       >
-        My Templates
+      {{ $t("My Templates") }}
       </b-button>
       <b-button
         @click="showSharedTemplates"
@@ -28,7 +28,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 cards-container">
@@ -42,14 +42,13 @@
             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
             v-for="template in myTemplatesData"
             :key="template.id"
             :template="template"
-            @template-selected="handleSelectedTemplate"
           />
         </b-card-group>
       </div>
@@ -63,14 +62,13 @@
             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
             v-for="template in sharedTemplatesData"
             :key="template.id"
             :template="template"
-            @template-selected="handleSelectedTemplate"
           />
         </b-card-group>
       </div>
@@ -86,7 +84,6 @@
       ScreenTemplateCard,
     },
     mounted() {
-        console.log('screen-templates component mounted');
     },
     data() {
       return {
@@ -134,9 +131,6 @@
           console.error(error);
         });
       },
-      handleSelectedTemplate() {
-        console.log('hit handleSelectedTemplate');
-      },
       showSharedTemplates() {
         this.myTemplatesSelected = false;
         this.sharedTemplatesSelected = true;

From 7bddcf5dcd074bb44813527e2e7b5735a102859f Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Tue, 17 Sep 2024 14:53:32 -0400
Subject: [PATCH 22/30] Add CssIcon component

---
 src/components/CssIcon.vue | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 src/components/CssIcon.vue

diff --git a/src/components/CssIcon.vue b/src/components/CssIcon.vue
new file mode 100644
index 000000000..d792b31ac
--- /dev/null
+++ b/src/components/CssIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg width="58" height="58" viewBox="0 0 71 77" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="34.9456" y="16.7" width="31.6" height="59.6" rx="1.8" fill="#EAF2FF" stroke="#E9ECF1" stroke-width="0.4"/>
+    <rect x="38.1" y="21.1" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="38.1" y="28.1" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="38.1" y="35.1" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="0.945605" y="16.7" width="31.6" height="59.6" rx="1.8" fill="#EAF2FF" stroke="#E9ECF1" stroke-width="0.4"/>
+    <rect x="3.84561" y="20.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="3.84561" y="27.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="3.84561" y="34.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="3.84561" y="41.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="3.84561" y="48.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="1.2" y="0.2" width="65.6" height="13.1882" rx="1.8" fill="#81AFFF" stroke="#E9ECF1" stroke-width="0.4"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "CssIcon",
+};
+</script>
\ No newline at end of file

From 559566ad816401f082e611b76f8a2252b239aa3a Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Tue, 17 Sep 2024 14:54:10 -0400
Subject: [PATCH 23/30] CSS Updates to Options Icons

---
 src/components/ScreenTemplateCard.vue | 67 ++++++++++++++++++++-------
 1 file changed, 49 insertions(+), 18 deletions(-)

diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
index 7986646c2..a127e4099 100644
--- a/src/components/ScreenTemplateCard.vue
+++ b/src/components/ScreenTemplateCard.vue
@@ -29,8 +29,20 @@
               v-model="selected"
               name="apply-options"
             >
-              <div v-for="option in applyOptions" :key="option.value">
-                <i :class="option.icon"></i>
+            <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 v-if="option.value === 'Css'">
+                    <css-icon />
+                  </div>
+                  <div v-else>
+                    <i :class="option.icon"></i>
+                  </div>
+                </div>
                 <b-form-checkbox
                   class="option-checkbox"
                   :value="option.value"
@@ -38,8 +50,8 @@
                   {{ 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
@@ -68,8 +80,12 @@
 </template>
 
 <script>
+import CssIcon from './CssIcon.vue';
 
 export default {
+  components: {
+    CssIcon,
+  },
   mixins: [],
   props: ['template'],
   data() {
@@ -77,9 +93,9 @@ export default {
       showApplyOptions: false,
       selected: [],
       applyOptions: [
-        { text: 'CSS', value: 'css', icon: 'fp-css-icon' },
-        { 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' },
       ],
     };
   },
@@ -112,6 +128,10 @@ export default {
 
 <style lang="scss" scoped>
 
+.fp-fields-icon, .fp-layout-icon {
+  color: #EAF2FF;
+}
+
 .screenbuilder-template-card {
   width: 225px;
   margin: 8px;
@@ -127,14 +147,6 @@ export default {
   background-color: #D7DDE5;
 }
 
-// .thumbnail-container {
-//   width: 247px;
-//   height: 133px;
-//   border: 2px solid #CDDDEE;
-//   border-radius: 7px;
-//   background-color: #fff;
-// }
-
 .thumbnail-container:hover,
 .thumbnail-container.active {
   border-color: #1572C2;
@@ -181,13 +193,31 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-left: 10px;
+}
+
+.icons-row {
+  margin-right: -5px !important;
+  margin-left: -5px !important;
+}
+
+.apply-options-container {
+    padding: 5px;
 }
 
 .apply-options-group i {
-  margin-bottom: 5px;
   display: block;
-  font-size: 50px;
+  font-size: 58px;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 66px;
+  height: 76px;
+  border: 0.7px solid #D7DDE5;
+  border-radius: 8px;
+  margin-bottom: 10px;
 }
 
 .option-checkbox {
@@ -196,7 +226,8 @@ export default {
 
 .bottom-card-divider {
   width: 90%;
-  background-color: #E9ECF1
+  background-color: #E9ECF1;
+  margin-top: 0px;
 }
 
 .apply-btn-container {

From df2441d7def8c11ecdec6228e216b94e6560de7d Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Tue, 17 Sep 2024 17:40:51 -0400
Subject: [PATCH 24/30] Remove commented code

---
 src/components/ScreenTemplates.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index b97eebaa8..25733b0ad 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -145,10 +145,7 @@
 
 <style lang="scss" scoped>
 .cards-container {
-  //display: block;
-  //flex-direction: column;
   height: 100%;
-  overflow-x: scroll;
 }
 
   .panel-close-btn {
@@ -157,10 +154,6 @@
     color: #596372;
   }
 
-//.template-cards {
-// display: block;
-//}
-
   .template-tabs {
     padding: 4px;
     background-color: #E9ECF1;

From fbb1c9efecef4dcff988f7ed0518de8b66b8e60b Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Tue, 17 Sep 2024 17:44:23 -0400
Subject: [PATCH 25/30] Update styling to scroll inside of column

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

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index c787ccce8..3e98a75e9 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -290,11 +290,11 @@
     <!-- Inspector -->
     <b-col
       v-if="renderControls"
-      class="overflow-hidden h-100 p-0 inspector-column"
+      class="overflow-auto mh-100 p-0 d-flex flex-column position-relative inspector-column"
     >
       <b-card
         no-body
-        class="p-0 h-100 border-top-0 border-bottom-0 border-right-0 rounded-0"
+        class="p-0 h-100 border-top-0 border-bottom-0 border-right-0 rounded-0 inspector-column"
       >
         <div v-if="showTemplatesPanel">
           <b-card-body class="p-2 h-100 overflow-auto screen-templates-column">
@@ -1555,6 +1555,8 @@ $side-bar-font-size: 0.875rem;
 .inspector-column {
   max-width: 265px;
   font-size: $side-bar-font-size;
+  border-left: 1px solid rgba(0, 0, 0, 0.125);
+  height: 100%;
 }
 
 .screen-templates-column {

From 6f47434bdbec3407119185c23821a3bbea03c104 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Wed, 18 Sep 2024 13:31:07 -0400
Subject: [PATCH 26/30] Add applyTemplate method

---
 src/components/ScreenTemplateCard.vue | 24 ++++++++++++++++++------
 src/components/ScreenTemplates.vue    |  2 ++
 src/components/vue-form-builder.vue   |  1 +
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
index a127e4099..a5b639902 100644
--- a/src/components/ScreenTemplateCard.vue
+++ b/src/components/ScreenTemplateCard.vue
@@ -36,7 +36,7 @@
                 class="col apply-options-container d-flex align-items-baseline flex-column"
               >
                 <div class="icon-container">
-                  <div v-if="option.value === 'Css'">
+                  <div v-if="option.value === 'CSS'">
                     <css-icon />
                   </div>
                   <div v-else>
@@ -67,7 +67,7 @@
                 type="button"
                 size="sm"
                 class="btn btn-primary ml-2 card-btn"
-                @click="onApply"
+                @click="applyTemplate"
               >
                 {{ $t("Apply") }}
               </button>
@@ -87,13 +87,13 @@ export default {
     CssIcon,
   },
   mixins: [],
-  props: ['template'],
+  props: ['template', 'screenId'],
   data() {
     return {
       showApplyOptions: false,
       selected: [],
       applyOptions: [
-        { text: 'CSS', value: 'Css' },
+        { text: 'CSS', value: 'CSS' },
         { text: 'Fields', value: 'Fields', icon: 'fp-fields-icon' },
         { text: 'Layout', value: 'Layout', icon: 'fp-layout-icon' },
       ],
@@ -115,8 +115,20 @@ export default {
     showDetails() {
       this.showApplyOptions = !this.showApplyOptions;
     },
-    onApply() {
-      // TODO: apply selected options
+    applyTemplate() {
+      ProcessMaker.apiClient
+        .post(`/template/screen/${this.template.id}/apply`, {
+          screenId: this.screenId,
+          templateOptions: this.selected,
+        })
+        .then((response) => {
+          ProcessMaker.alert(this.$t("The template options have been applied."), "success");
+          window.location.reload();
+        })
+        .catch((error) => {
+          const errorMessage = error.response?.data?.message || error.message;
+          ProcessMaker.alert(errorMessage, "danger");
+        });
     },
     onCancel() {
       this.showApplyOptions = false;
diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index 25733b0ad..b2665c847 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -49,6 +49,7 @@
             v-for="template in myTemplatesData"
             :key="template.id"
             :template="template"
+            :screen-id="screenId"
           />
         </b-card-group>
       </div>
@@ -83,6 +84,7 @@
     components: {
       ScreenTemplateCard,
     },
+    props: ['screenId'],
     mounted() {
     },
     data() {
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 3e98a75e9..651f39658 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -302,6 +302,7 @@
               ref="screenTemplates"
               :shared-templates-data="sharedTemplatesData"
               @close-templates-panel="closeTemplatesPanel"
+              :screen-id="screen.id"
             />
           </b-card-body>
         </div>

From e85e612115029e717f1ca33d2e4a01ac02ce21dc Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Thu, 19 Sep 2024 10:57:15 -0400
Subject: [PATCH 27/30] Pass currentScreenPage to ScreenTemplateCard.vue

---
 src/components/ScreenTemplateCard.vue | 3 ++-
 src/components/ScreenTemplates.vue    | 4 +++-
 src/components/vue-form-builder.vue   | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
index a5b639902..1cd9f7969 100644
--- a/src/components/ScreenTemplateCard.vue
+++ b/src/components/ScreenTemplateCard.vue
@@ -87,7 +87,7 @@ export default {
     CssIcon,
   },
   mixins: [],
-  props: ['template', 'screenId'],
+  props: ['template', 'screenId', 'currentScreenPage'],
   data() {
     return {
       showApplyOptions: false,
@@ -120,6 +120,7 @@ export default {
         .post(`/template/screen/${this.template.id}/apply`, {
           screenId: this.screenId,
           templateOptions: this.selected,
+          currentScreenPage: this.currentScreenPage,
         })
         .then((response) => {
           ProcessMaker.alert(this.$t("The template options have been applied."), "success");
diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index b2665c847..3d47d0b6a 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -50,6 +50,7 @@
             :key="template.id"
             :template="template"
             :screen-id="screenId"
+            :currentScreenPage="currentScreenPage"
           />
         </b-card-group>
       </div>
@@ -70,6 +71,7 @@
             v-for="template in sharedTemplatesData"
             :key="template.id"
             :template="template"
+            :currentScreenPage="currentScreenPage"
           />
         </b-card-group>
       </div>
@@ -84,7 +86,7 @@
     components: {
       ScreenTemplateCard,
     },
-    props: ['screenId'],
+    props: ['screenId', 'currentScreenPage'],
     mounted() {
     },
     data() {
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 651f39658..c16b2a141 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -303,6 +303,7 @@
               :shared-templates-data="sharedTemplatesData"
               @close-templates-panel="closeTemplatesPanel"
               :screen-id="screen.id"
+              :currentScreenPage="currentPage"
             />
           </b-card-body>
         </div>

From 630e68588c30675da7a61cfed16bcab25ee57cfa Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Thu, 19 Sep 2024 15:48:20 -0400
Subject: [PATCH 28/30] Pass screen-id to sharedTemplates Card

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

diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index 3d47d0b6a..dbacfd588 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -71,6 +71,7 @@
             v-for="template in sharedTemplatesData"
             :key="template.id"
             :template="template"
+            :screen-id="screenId"
             :currentScreenPage="currentScreenPage"
           />
         </b-card-group>

From afc9ca0c0f05972d1d8526b9d21e3a2bca9f06de Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Tue, 24 Sep 2024 11:59:51 -0400
Subject: [PATCH 29/30] Styling update in ScreenTemplatesPanel

---
 src/components/ScreenTemplates.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index dbacfd588..606f932dd 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -13,7 +13,7 @@
         <i class="fas fa-times"></i>
       </button>
     </div>
-    <div class="d-flex m-2 template-tabs justify-content-center">
+    <div class="d-flex template-tabs justify-content-center">
       <b-button
         @click="showMyTemplates"
         class="d-inline default-template-btn px-1"
@@ -163,6 +163,8 @@
     padding: 4px;
     background-color: #E9ECF1;
     border-radius: 8px;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
   }
 
   .default-template-btn {

From 0a9f616aa558873a530193808a5f946d7152080e Mon Sep 17 00:00:00 2001
From: Sanja <sanja.cornelius@processmaker.com>
Date: Tue, 8 Oct 2024 13:27:59 -0700
Subject: [PATCH 30/30] Improve error handling

---
 src/components/ScreenTemplateCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
index 1cd9f7969..323173bf5 100644
--- a/src/components/ScreenTemplateCard.vue
+++ b/src/components/ScreenTemplateCard.vue
@@ -127,7 +127,7 @@ export default {
           window.location.reload();
         })
         .catch((error) => {
-          const errorMessage = error.response?.data?.message || error.message;
+          const errorMessage = error.response?.data?.message  || error.response?.data?.error || error.message;
           ProcessMaker.alert(errorMessage, "danger");
         });
     },