FOUR-14053 All Templates section (UI change)

resources/js/components/templates/SelectTemplateModal.vue

@@ -19,7 +19,10 @@
       @ok.prevent="onSubmit"
       @close="close"
     >
-      <template-search :type="type" :component="currentComponent" @show-details="updateModal($event)" 
+      <template-search ref="template-search"
+        :type="type" 
+        :component="currentComponent" 
+        @show-details="updateModal($event)" 
         @blank-process-button-clicked="createBlankProcess()"
         @ai-process-button-clicked="createAiProcess()"
         :showTemplateOptionsActionBar="true"
@@ -121,6 +124,11 @@
       },
       show() {
         this.$bvModal.show('selectTemplate');
+      },
+      hideBackButton() {
+        this.headerButtons[0].hidden = false;
+        this.titleButtons[0].hidden = false;
+        this.hasHeaderButtons = false;
       }
     },
     mounted() {

resources/js/processes-catalogue/components/CardProcess.vue

@@ -13,6 +13,7 @@
         :key="index"
         :process="process"
         @openProcessInfo="openProcessInfo"
+        :hideBookmark="categoryId === 'all_templates'"
       />
       <pagination
         :total-row="totalRow"
@@ -43,6 +44,7 @@ import pagination from "./utils/pagination.vue";
 import SearchCards from "./utils/SearchCards.vue";
 import dataLoadingMixin from "../../components/common/mixins/apiDataLoading";
 import Card from "./utils/Card.vue";
+import { EventBus } from '../index.js';
 
 export default {
   components: {
@@ -63,6 +65,7 @@ export default {
       data: null,
       totalPages: 1,
       pmql: "",
+      filter: "",
       bookmarkIcon: "far fa-bookmark",
       showEmpty: false,
       loading: false,
@@ -71,6 +74,7 @@ export default {
   watch: {
     categoryId() {
       this.pmql = "";
+      this.filter = "";
       this.loadCard();
     },
   },
@@ -100,7 +104,7 @@ export default {
      * Build URL for Process Cards
      */
     buildURL() {
-      if (!this.categoryId || this.categoryId === 'all_processes') {
+      if (this.categoryId === 'all_processes') {
         return "process_bookmarks/processes?"
           + `&page=${this.currentPage}`
           + `&per_page=${this.perPage}`
@@ -118,6 +122,14 @@ export default {
           + "&launchpad=true"
           + "&order_by=name&order_direction=asc";
       }
+      if (this.categoryId === 'all_templates') {
+        return `templates/process?page=${this.currentPage}`
+          + `&per_page=${this.perPage}`
+          + `&filter=${encodeURIComponent(this.filter)}`
+          + `&order_by=name`
+          + `&order_direction=asc`
+          + `&include=user,categories,category`;
+      }
       return `process_bookmarks/processes?page=${this.currentPage}`
           + `&per_page=${this.perPage}`
           + `&category=${this.categoryId}`
@@ -130,6 +142,10 @@ export default {
      * Go to process info
      */
     openProcessInfo(process) {
+      if (this.categoryId === 'all_templates') {
+        EventBus.$emit('templates-selected', { template: process, type: "Process" });
+        return;
+      }
       this.$router.push({ name: "show", params: { process: process, processId: process.id } });
       this.$emit("openProcess", process);
     },
@@ -146,6 +162,7 @@ export default {
     onFilter(value, showEmpty = false) {
       this.currentPage = 1;
       this.pmql = `(fulltext LIKE "%${value}%")`;
+      this.filter = value;
       this.showEmpty = showEmpty;
       this.loadCard();
     },

resources/js/processes-catalogue/components/ProcessListing.vue

@@ -25,7 +25,7 @@ export default {
   },
   computed: {
     isTemplateCategory() {
-      return ['all_templates', 'guided_templates'].includes(this.categoryId)
+      return ['guided_templates'].includes(this.categoryId)
     },
   }
 };

resources/js/processes-catalogue/components/menuCatologue.vue

@@ -106,6 +106,7 @@
 <script>
 import SearchCategories from "./utils/SearchCategories.vue";
 import SelectTemplateModal from "../../components/templates/SelectTemplateModal.vue";
+import { EventBus } from '../index.js';
 
 export default {
   components: {
@@ -148,6 +149,11 @@ export default {
       comeFromProcess: false,
     };
   },
+  created() {
+    EventBus.$on('templates-selected', (obj) => {
+      this.openTemplate(obj);
+    });
+  },
   computed: {
     /**
      * Filters options regarding user permissions
@@ -172,12 +178,6 @@ export default {
     }
   },
   watch: {
-    selectedProcessItem: {
-      deep: true,
-      handler: function () {
-        this.$emit('categorySelected', this.selectedProcessItem);
-      },
-    },
     $route(r) {
       this.handleRouteQuery();
     },
@@ -204,6 +204,9 @@ export default {
         this.selectedProcessItem = this.data.find((category) => {
           return String(category.id) === String(query.categoryId);
         });
+        this.selectedTemplateItem = this.filteredTemplateOptions.find((category) => {
+          return String(category.id) === String(query.categoryId);
+        });
       }
     },
     /**
@@ -216,6 +219,7 @@ export default {
       this.comeFromProcess = false;
       this.selectedProcessItem = item;
       this.selectedTemplateItem = null;
+      this.$emit('categorySelected', item);
     },
     /**
      * Enables All Templates option only if user has create-processes permission
@@ -229,13 +233,9 @@ export default {
           return obj.id === "guided_templates";
         });
       }
-      if (item.id === "all_templates") {
-        this.addNewProcess();
-        return;
-      }
       this.selectedTemplateItem = item;
       this.selectedProcessItem = null;
-      this.$emit('categorySelected', this.selectedTemplateItem);
+      this.$emit('categorySelected', item);
     },
     /**
      * This method opens New Process modal window
@@ -245,11 +245,20 @@ export default {
         this.$refs.addProcessModal.show();
       });
     },
+    openTemplate(obj) {
+      this.$nextTick(() => {
+        this.$refs.addProcessModal.show();
+        this.$refs.addProcessModal.$nextTick(() => {
+          this.$refs.addProcessModal.$refs["template-search"].showDetails(obj);
+          this.$refs.addProcessModal.hideBackButton();
+        });
+      });
+    },
     isSelectedProcess(item) {
       return this.selectedProcessItem === item;
     },
-    isSelectedTemplate(index) {
-      return this.selectedTemplateItem === index;
+    isSelectedTemplate(item) {
+      return this.selectedTemplateItem === item;
     },
     onToggleCatalogue() {
       this.showCatalogue = !this.showCatalogue;

resources/js/processes-catalogue/components/utils/Card.vue

@@ -33,6 +33,7 @@
       </div>
       <div class="card-bookmark">
         <i
+          v-if="!hideBookmark"
           :ref="`bookmark-${process.id}`"
           v-b-tooltip.hover.bottom
           :title="$t(labelTooltip)"
@@ -46,7 +47,13 @@
 
 <script>
 export default {
-  props: ["process"],
+  props: {
+    process: null,
+    hideBookmark: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
       labelIcon: "Default Icon",

resources/js/processes-catalogue/index.js

@@ -3,6 +3,7 @@ import Process from "./components/Process";
 import ProcessesCatalogue from "./components/ProcessesCatalogue";
 import ProcessListing from "./components/ProcessListing";
 
+export const EventBus = new Vue();
 Vue.use(VueRouter);
 const router = new VueRouter({
   mode: "history",