fix(processes): wire Process Information panel in launch screen view

Author: eiresendez

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

@@ -3,14 +3,40 @@
     <process-header-start
         :process="process"
         :ellipsis-permission="ellipsisPermission"
+        :show-process-info="showProcessInfo"
         @goBack="goBack()"
+        @toggle-info="toggleInfo"
         @onProcessNavigate="onProcessNavigate"
         v-if="!mobileApp"
       />
     <display-screen
       v-if="showScreen"
       :screen="screen"
     />
+    <slide-process-info
+      :show="showProcessInfo"
+      :title="title"
+      :process="process"
+      :full-carousel="fullCarousel"
+      :is-wizard-template="createdFromWizardTemplate"
+      @getHelperProcess="getHelperProcess"
+      @closeCarousel="closeFullCarousel"
+      @close="closeProcessInfo"
+    >
+      <div class="tw-flex tw-flex-col tw-gap-4 tw-pl-10 tw-pr-10">
+        <carousel-slide
+          :process="process"
+          @full-carousel="showFullCarousel"
+        />
+        <div v-show="!fullCarousel">
+          <process-options
+            class="tw-w-full"
+            :process="process"
+            :collapsed="collapsed"
+          />
+        </div>
+      </div>
+    </slide-process-info>
     <create-template-modal
       id="create-template-modal"
       ref="create-template-modal"
@@ -42,6 +68,13 @@
       :description-settings="process.description"
       :process="process"
     />
+    <wizard-helper-process-modal
+      v-if="createdFromWizardTemplate"
+      id="wizardHelperProcessModal"
+      ref="wizardHelperProcessModal"
+      :process-launchpad-id="process.id"
+      :wizard-template-uuid="wizardTemplateUuid"
+    />
   </div>
 </template>
 
@@ -57,6 +90,10 @@ import ellipsisMenuMixin from "../../components/shared/ellipsisMenuActions";
 import processNavigationMixin from "../../components/shared/processNavigation";
 import ProcessesMixin from "./mixins/ProcessesMixin";
 import ProcessHeaderStart from "./ProcessHeaderStart.vue";
+import SlideProcessInfo from "./slideProcessInfo/SlideProcessInfo.vue";
+import CarouselSlide from "./CarouselSlide.vue";
+import ProcessOptions from "./ProcessOptions.vue";
+import WizardHelperProcessModal from "../../components/templates/WizardHelperProcessModal.vue";
 
 const tceValidScreen = ["tce-student", "tce-college", "tce-grants"];
 
@@ -70,6 +107,10 @@ export default {
     AddToProjectModal,
     LaunchpadSettingsModal,
     ProcessHeaderStart,
+    SlideProcessInfo,
+    CarouselSlide,
+    ProcessOptions,
+    WizardHelperProcessModal,
   },
   mixins: [ellipsisMenuMixin, processNavigationMixin, ProcessesMixin],
   props: ["process", "currentUserId", "ellipsisPermission"],
@@ -79,8 +120,24 @@ export default {
       screen_id: "",
       showScreen: false,
       mobileApp: window.ProcessMaker.mobileApp,
+      showProcessInfo: false,
+      fullCarousel: false,
+      collapsed: true,
     };
   },
+  computed: {
+    title() {
+      return this.fullCarousel
+        ? this.process.name
+        : this.$t("Process Information");
+    },
+    createdFromWizardTemplate() {
+      return !!this.process?.properties?.wizardTemplateUuid;
+    },
+    wizardTemplateUuid() {
+      return this.process?.properties?.wizardTemplateUuid;
+    },
+  },
   mounted() {
     this.getScreen();
     ProcessMaker.EventBus.$on("reloadByNewScreen", (newScreen) => {
@@ -105,6 +162,23 @@ export default {
           }
         });
     },
+    toggleInfo() {
+      this.showProcessInfo = !this.showProcessInfo;
+    },
+    closeProcessInfo() {
+      this.showProcessInfo = false;
+    },
+    showFullCarousel() {
+      this.fullCarousel = true;
+    },
+    closeFullCarousel() {
+      this.fullCarousel = false;
+    },
+    getHelperProcess() {
+      if (this.$refs.wizardHelperProcessModal) {
+        this.$refs.wizardHelperProcessModal.getHelperProcessStartEvent();
+      }
+    },
   },
 };
 </script>