Merge pull request #8707 from ProcessMaker/task/FOUR-27903

FOUR-27903: Add Prev/Next navigation to Screen Template preview (Shared & My Templates)

Author: nolanpro

resources/js/components/templates/PreviewTemplate.vue

@@ -122,7 +122,16 @@
         watch: {
             selectedTemplateOptions() {
                 this.$emit('template-options-selected', this.selectedTemplateOptions);
-            }
+            },
+            template: {
+                deep: true,
+                handler() {
+                    this.templateData = this.template?.template ? this.template.template : this.template;
+                    this.type = this.templateData?.type;
+                    this.showCssPreview = false;
+                    this.code = "";
+                },
+            },
         },
         methods: {
             hidePreview() {
@@ -193,4 +202,4 @@
     .css-preview-card .css-preview .editor {
         height: inherit;
     }
-</style>
+</style>

resources/js/processes/screen-templates/components/MyTemplatesListing.vue

@@ -160,6 +160,7 @@
     <template-preview-container
       ref="preview"
       :selected-template="selectedTemplate"
+      @select-template="handleSelectTemplate"
       @mark-selected-row="markSelectedRow"
     />
   </div>
@@ -251,7 +252,17 @@ export default {
       this.loading = false;
     });
   },
+  mounted() {
+    this.bindPreviewTabClose("#nav-myTemplates-tab");
+  },
+  beforeDestroy() {
+    this.unbindPreviewTabClose();
+  },
   methods: {
+    handleSelectTemplate(template) {
+      this.selectedTemplate = template;
+      this.markSelectedRow(template.id);
+    },
     fetch() {
       this.loading = true;
       this.apiDataLoading = true;

resources/js/processes/screen-templates/components/PublicTemplatesListing.vue

@@ -162,6 +162,7 @@
     <template-preview-container
       ref="preview"
       :selected-template="selectedTemplate"
+      @select-template="handleSelectTemplate"
       @mark-selected-row="markSelectedRow"
     />
   </div>
@@ -260,7 +261,17 @@ export default {
       this.apiNoResults = false;
     });
   },
+  mounted() {
+    this.bindPreviewTabClose("#nav-publicTemplates-tab");
+  },
+  beforeDestroy() {
+    this.unbindPreviewTabClose();
+  },
   methods: {
+    handleSelectTemplate(template) {
+      this.selectedTemplate = template;
+      this.markSelectedRow(template.id);
+    },
     fetch() {
       this.loading = true;
       this.apiDataLoading = true;

resources/js/processes/screen-templates/components/TemplatePreviewContainer.vue

@@ -17,6 +17,24 @@
               :close="onClose"
               :templateId="template.id"
             >
+              <b-button-group>
+                <b-button
+                  class="arrow-button"
+                  variant="outline-secondary"
+                  :disabled="!existPrev"
+                  @click="goPrevNext('Prev')"
+                >
+                  <i class="fas fa-chevron-left" />
+                </b-button>
+                <b-button
+                  class="arrow-button"
+                  variant="outline-secondary"
+                  :disabled="!existNext"
+                  @click="goPrevNext('Next')"
+                >
+                  <i class="fas fa-chevron-right" />
+                </b-button>
+              </b-button-group>
               <div class="ml-auto mr-0 text-right">
                 <b-button
                   class="btn-light text-secondary"

resources/js/processes/screen-templates/mixins/templatePreviewMixin.js

@@ -4,6 +4,10 @@ const templatePreviewMixin = {
       showPreview: false,
       showRight: true,
       template: {},
+      prevTemplate: {},
+      nextTemplate: {},
+      existPrev: false,
+      existNext: false,
       data: [],
       templateTitle: "",
       loading: true,
@@ -28,6 +32,9 @@ const templatePreviewMixin = {
       this.template = info;
       this.showPreview = true;
       this.data = data;
+      this.existPrev = false;
+      this.existNext = false;
+      this.defineNextPrevTemplate();
     },
     showButton() {
       this.isMouseOver = true;
@@ -85,6 +92,33 @@ const templatePreviewMixin = {
       this.showTemplatePreview = false;
       this.selectedTemplate = null;
     },
+    closePreviewFrame() {
+      if (this.$refs?.preview?.onClose) {
+        this.$refs.preview.onClose();
+        return;
+      }
+      if (typeof this.onClose === "function") {
+        this.onClose();
+      }
+    },
+    bindPreviewTabClose(tabSelector) {
+      if (!tabSelector || typeof $ === "undefined") {
+        return;
+      }
+      this._previewTabSelector = tabSelector;
+      this._previewTabHandler = () => {
+        this.closePreviewFrame();
+      };
+      $(tabSelector).on("hide.bs.tab.templatePreview", this._previewTabHandler);
+    },
+    unbindPreviewTabClose() {
+      if (!this._previewTabSelector || typeof $ === "undefined") {
+        return;
+      }
+      $(this._previewTabSelector).off("hide.bs.tab.templatePreview", this._previewTabHandler);
+      this._previewTabSelector = null;
+      this._previewTabHandler = null;
+    },
     onClose() {
       this.$emit('mark-selected-row', 0);
       this.showPreview = false;
@@ -99,6 +133,56 @@ const templatePreviewMixin = {
       this.isLoading = "";
       this.stopFrame = false;
       this.size = 50;
+      this.prevTemplate = {};
+      this.nextTemplate = {};
+      this.existPrev = false;
+      this.existNext = false;
+    },
+    defineNextPrevTemplate() {
+      if (!Array.isArray(this.data)) {
+        this.prevTemplate = {};
+        this.nextTemplate = {};
+        this.existPrev = false;
+        this.existNext = false;
+        return;
+      }
+
+      let prevTemplate = {};
+      let nextTemplate = {};
+      let seeNextTemplate = false;
+      for (const templateIndex in this.data) {
+        if (!seeNextTemplate) {
+          if (this.data[templateIndex] === this.template) {
+            seeNextTemplate = true;
+          } else {
+            prevTemplate = this.data[templateIndex];
+            this.existPrev = true;
+          }
+        } else {
+          nextTemplate = this.data[templateIndex];
+          this.existNext = true;
+          break;
+        }
+      }
+      this.prevTemplate = prevTemplate;
+      this.nextTemplate = nextTemplate;
+    },
+    goPrevNext(action) {
+      let targetTemplate = null;
+      if (action === "Next" && this.existNext) {
+        targetTemplate = this.nextTemplate;
+      }
+      if (action === "Prev" && this.existPrev) {
+        targetTemplate = this.prevTemplate;
+      }
+
+      if (!targetTemplate) {
+        return;
+      }
+
+      this.$emit("select-template", targetTemplate);
+      this.$emit("mark-selected-row", targetTemplate.id);
+      this.showSideBar(targetTemplate, this.data);
     },
   },
 };