Add Screen Templates Section in Screen Builder

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>

src/components/ScreenTemplates.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <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>
+    <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 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');
+    },
+    props: ['myTemplatesData', 'sharedTemplatesData'],
+    data() {
+      return {
+        myTemplatesSelected: true,
+        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;
+        this.sharedTemplatesSelected = false;
+        console.log('myTemplatesData in screen-templates', this.myTemplatesData);
+      },
+      showSharedTemplates() {
+        this.$emit('show-shared-templates');
+      },
+    },
+    mounted() {
+      this.showMyTemplates();
+      this.$on('shared-templates-loaded', () => {
+      console.log('Shared templates data received in screen-templates');
+    });
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .panel-close-btn {
+    background-color: transparent;
+    border: none;
+    color: #596372;
+  }
+
+  .template-tabs {
+    padding: 4px;
+    background-color: #E9ECF1;
+    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: 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>

src/components/vue-form-builder.vue

@@ -296,64 +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">
-          <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(
-                ' ',
-                ''
-              )}`"
-              :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>
 
@@ -488,6 +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 './ScreenTemplates.vue';
 
 // To include another language in the Validator with variable processmaker
 const globalObject = typeof window === "undefined" ? global : window;
@@ -555,6 +570,7 @@ export default {
     ...renderer,
     PagesDropdown,
     Sortable,
+    ScreenTemplates,
   },
   mixins: [HasColorProperty, testing],
   props: {
@@ -580,7 +596,17 @@ export default {
     },
     processId: {
       default: 0
-    }
+    },
+    showTemplatesPanel: {
+      type: Boolean,
+      default: false
+    },
+    myTemplatesData: {
+      type: Array,
+    },
+    sharedTemplatesData: {
+      type: Array,
+    },
   },
   data() {
     const config = this.initialConfig || defaultConfig;
@@ -1265,6 +1291,7 @@ export default {
       });
     },
     inspect(element = {}) {
+      this.$emit('close-templates-panel');
       this.inspection = element;
       this.selected = element;
       const defaultAccordion = this.accordions.find(