FOUR-18315 | Include Tests For Accurate Filtering and Display of Templates

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();

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;

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,32 +17,52 @@
         :class="{ 'my-templates-selected': myTemplatesSelected }"
         data-cy="my-templates-tab"
       >
-        My Templates
+        {{ $t("My Templates") }}
       </b-button>
       <b-button
         @click="showSharedTemplates"
         class="d-inline default-template-btn"
         :class="{ 'shared-templates-selected': sharedTemplatesSelected }"
         data-cy="shared-templates-tab"
       >
-        Shared Templates
+        {{ $t("Shared Templates") }}
       </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"
+      >
+        <b-card-body
+          v-if="noMyTemplatesFound"
+          class="p-2 h-100 overflow-auto"
+        >
+          <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"
         />
       </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"
+      >
+        <b-card-body
+          v-if="noSharedTemplatesFound"
+          class="p-2 h-100 overflow-auto"
+        >
+          <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"
         />
       </div>
     </div>
@@ -59,38 +79,60 @@
     mounted() {
         console.log('screen-templates component mounted');
     },
-    props: ['myTemplatesData', 'sharedTemplatesData'],
     data() {
       return {
+        myTemplatesData: null,
+        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;
         this.sharedTemplatesSelected = false;
-        console.log('myTemplatesData in screen-templates', this.myTemplatesData);
+        this.fetchMyTemplates();
+      },
+      fetchMyTemplates() {
+        ProcessMaker.apiClient
+        .get(
+          "templates/screen?is_public=0",
+        )
+        .then((response) => {
+          this.myTemplatesData = response.data.data;
+          if (this.myTemplatesData.length === 0 || this.myTemplatesData === undefined) {
+            this.noMyTemplatesFound = true;
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+      },
+      fetchSharedTemplates() {
+      ProcessMaker.apiClient
+        .get(
+          "templates/screen?is_public=1",
+        )
+        .then((response) => {
+          this.sharedTemplatesData = response.data.data;
+          if (this.sharedTemplatesData.length === 0 || this.sharedTemplatesData === undefined) {
+            this.noSharedTemplatesFound = true;
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+        });
       },
       showSharedTemplates() {
-        this.$emit('show-shared-templates');
+        this.myTemplatesSelected = false;
+        this.sharedTemplatesSelected = true;
+        this.fetchSharedTemplates();
       },
     },
     mounted() {
       this.showMyTemplates();
-      this.$on('shared-templates-loaded', () => {
-      console.log('Shared templates data received in screen-templates');
-    });
     }
   };
 </script>

src/components/vue-form-builder.vue

@@ -297,15 +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"
-              :my-templates-data="myTemplatesData"
               :shared-templates-data="sharedTemplatesData"
               @close-templates-panel="closeTemplatesPanel"
-              @show-shared-templates="$emit('show-shared-templates')"
             />
           </b-card-body>
         </div>
@@ -598,13 +595,6 @@ export default {
     processId: {
       default: 0
     },
-    showTemplatesPanel: {
-      type: Boolean,
-      default: false
-    },
-    myTemplatesData: {
-      type: Array,
-    },
     sharedTemplatesData: {
       type: Array,
     },
@@ -658,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);
     },
@@ -1137,6 +1123,12 @@ 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();
@@ -1431,10 +1423,6 @@ export default {
       this.updateState();
       this.inspect(clone);
     },
-    closeTemplatesPanel() {
-      this.hideTemplatesPanel = true;
-      window.ProcessMaker.EventBus.$emit("close-templates-panel");
-    },
   }
 };
 </script>