From 57a6079d4106bb15b5fe60647b043957ac1d147b Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Tue, 5 Sep 2023 19:45:47 +0000
Subject: [PATCH] FOUR-10040:Main View: New Request

---
 resources/js/app-layout.js                    |  38 +--
 resources/js/bootstrap.js                     |   4 +-
 resources/js/components/requests/modal.vue    | 216 +++------------
 .../js/components/requests/modalMobile.vue    |  27 +-
 .../js/components/requests/requestModal.vue   | 259 ++++++++++++++++++
 5 files changed, 340 insertions(+), 204 deletions(-)
 create mode 100644 resources/js/components/requests/requestModal.vue

diff --git a/resources/js/app-layout.js b/resources/js/app-layout.js
index 3e81be612d..29df8d1787 100644
--- a/resources/js/app-layout.js
+++ b/resources/js/app-layout.js
@@ -3,6 +3,7 @@ import Multiselect from "@processmaker/vue-multiselect/src/Multiselect";
 import moment from "moment";
 import moment_timezone from "moment-timezone";
 import { sanitizeUrl } from "@braintree/sanitize-url";
+import newRequestModal from "./components/requests/requestModal";
 import requestModal from "./components/requests/modal";
 import requestModalMobile from "./components/requests/modalMobile";
 import notifications from "./components/requests/notifications";
@@ -92,6 +93,7 @@ window.ProcessMaker.navbar = new Vue({
     ConfirmationModal,
     MessageModal,
     NavbarProfile,
+    newRequestModal,
   },
   data() {
     return {
@@ -187,25 +189,27 @@ window.ProcessMaker.navbar = new Vue({
 });
 
 // Assign our navbar component to our global ProcessMaker object
-window.ProcessMaker.navbarMobile = new Vue({
-  el: "#navbarMobile",
-  components: {
-    requestModalMobile,
-  },
-  data() {
-    return {
-    };
-  },
-  methods: {
-    switchToDesktop() {
-      document.cookie = "isMobile=false";
-      window.location.reload();
+if (isMobileDevice) {
+  window.ProcessMaker.navbarMobile = new Vue({
+    el: "#navbarMobile",
+    components: {
+      requestModalMobile,
     },
-    onResize() {
-      this.isMobile = window.innerWidth < 992;
+    data() {
+      return {
+      };
     },
-  },
-});
+    methods: {
+      switchToDesktop() {
+        document.cookie = "isMobile=false";
+        window.location.reload();
+      },
+      onResize() {
+        this.isMobile = window.innerWidth < 992;
+      },
+    },
+  });
+}
 
 // Breadcrumbs are now part of the navbar component. Alias it here.
 window.ProcessMaker.breadcrumbs = window.ProcessMaker.navbar;
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index 5fc9fc6c5e..81c33deb53 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -336,7 +336,9 @@ if (userID) {
               enabled: window.ProcessMaker.AccountTimeoutEnabled
             }
           });
-          window.ProcessMaker.closeSessionModal();
+          if (window.ProcessMaker.closeSessionModal) {
+            window.ProcessMaker.closeSessionModal();
+          }
         }
       })
       .listen('.Logout', (e) => {
diff --git a/resources/js/components/requests/modal.vue b/resources/js/components/requests/modal.vue
index b7c147c14c..f11880daec 100644
--- a/resources/js/components/requests/modal.vue
+++ b/resources/js/components/requests/modal.vue
@@ -1,184 +1,52 @@
 <template>
-    <li class="nav-item p-2" v-cloak>
-        <button type="button" id="navbar-request-button" class="btn btn-success btn-sm" @click="showRequestModal" :aria-label="$t('New Request')" aria-haspopup="dialog">
-            <i class="fas fa-plus"></i>
-            {{$t('Request')}}
-        </button>
-        <b-modal size="lg"
-                 id="requests-modal"
-                 class="requests-modal modal-dialog-scrollable"
-                 ref="requestModalAdd"
-                 :title="$t('New Request')"
-                 header-close-content="&times;"
-                 hide-footer>
-            <b-row no-gutters>
-                <b-col cols="8">
-                    <p>{{ $t("We've made it easy for you to start a Request for the following Processes. Select a Process to start your Request.") }}</p>
-                </b-col>
-                <b-col cols="4">
-                    <b-input-group>
-                        <b-form-input v-model="filter" :placeholder="$t('Search') + '...'"></b-form-input>
-                        <b-input-group-append>
-                            <button type="button" class="btn btn-primary" :aria-label="$t('Search')"><i class="fas fa-search"></i></button>
-                        </b-input-group-append>
-                    </b-input-group>
-                </b-col>
-            </b-row>
-
-            <div v-if="Object.keys(processes).length && !loading" class="process-list">
-                <div v-for="(category, index) in processes" class="mt-3">
-                    <h5 class="mb-n2">
-                        {{index}}
-                        <span class="badge badge-pill badge-secondary">{{category.length}}</span>
-                    </h5>
-                    <template v-for="(process,index) in category">
-                      <process-card v-if="hasEmptyStartEvents(process)"
-                                    :filter="filter"
-                                    :key="index"
-                                    :process="process">
-                      </process-card>
-                    </template>
-                </div>
-            </div>
-
-            <div class="no-requests my-3 text-center" v-if="!Object.keys(processes).length && !loading">
-                <h4>{{ $t('You don\'t have any Processes.') }}</h4>
-                <span v-if="permission.includes('create-processes')">
-                    <a :href="url" class="text-primary">{{ $t('Please visit the Processes page') }}</a>
-                    {{ $t('and click on +Process to get started.') }}
-                </span>
-                <span v-else>{{ $t('Please contact your administrator to get started.') }}</span>
-            </div>
-
-            <div v-if="loading" class="loading no-requests my-3 text-center">
-                <div class="icon-container">
-                    <div>
-                        <svg class="lds-gear" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><g transform="translate(50 50)">
-                        <g transform="rotate(248.825)">
-                        <animateTransform attributeName="transform" type="rotate" values="0;360" keyTimes="0;1" dur="4.7s" repeatCount="indefinite"></animateTransform><path d="M37.43995192304605 -6.5 L47.43995192304605 -6.5 L47.43995192304605 6.5 L37.43995192304605 6.5 A38 38 0 0 1 35.67394948182593 13.090810836924174 L35.67394948182593 13.090810836924174 L44.33420351967032 18.090810836924174 L37.83420351967032 29.34914108612188 L29.17394948182593 24.34914108612188 A38 38 0 0 1 24.34914108612188 29.17394948182593 L24.34914108612188 29.17394948182593 L29.34914108612188 37.83420351967032 L18.090810836924184 44.33420351967032 L13.090810836924183 35.67394948182593 A38 38 0 0 1 6.5 37.43995192304605 L6.5 37.43995192304605 L6.500000000000001 47.43995192304605 L-6.499999999999995 47.43995192304606 L-6.499999999999996 37.43995192304606 A38 38 0 0 1 -13.09081083692417 35.67394948182593 L-13.09081083692417 35.67394948182593 L-18.09081083692417 44.33420351967032 L-29.34914108612187 37.834203519670325 L-24.349141086121872 29.173949481825936 A38 38 0 0 1 -29.17394948182592 24.34914108612189 L-29.17394948182592 24.34914108612189 L-37.83420351967031 29.349141086121893 L-44.33420351967031 18.0908108369242 L-35.67394948182592 13.090810836924193 A38 38 0 0 1 -37.43995192304605 6.5000000000000036 L-37.43995192304605 6.5000000000000036 L-47.43995192304605 6.500000000000004 L-47.43995192304606 -6.499999999999993 L-37.43995192304606 -6.499999999999994 A38 38 0 0 1 -35.67394948182593 -13.090810836924167 L-35.67394948182593 -13.090810836924167 L-44.33420351967032 -18.090810836924163 L-37.834203519670325 -29.34914108612187 L-29.173949481825936 -24.34914108612187 A38 38 0 0 1 -24.349141086121893 -29.17394948182592 L-24.349141086121893 -29.17394948182592 L-29.349141086121897 -37.834203519670304 L-18.0908108369242 -44.334203519670304 L-13.090810836924195 -35.67394948182592 A38 38 0 0 1 -6.500000000000005 -37.43995192304605 L-6.500000000000005 -37.43995192304605 L-6.500000000000007 -47.43995192304605 L6.49999999999999 -47.43995192304606 L6.499999999999992 -37.43995192304606 A38 38 0 0 1 13.090810836924149 -35.67394948182594 L13.090810836924149 -35.67394948182594 L18.090810836924142 -44.33420351967033 L29.349141086121847 -37.83420351967034 L24.349141086121854 -29.17394948182595 A38 38 0 0 1 29.17394948182592 -24.349141086121893 L29.17394948182592 -24.349141086121893 L37.834203519670304 -29.349141086121897 L44.334203519670304 -18.0908108369242 L35.67394948182592 -13.090810836924197 A38 38 0 0 1 37.43995192304605 -6.500000000000007 M0 -20A20 20 0 1 0 0 20 A20 20 0 1 0 0 -20"></path></g></g></svg>
-                    </div>
-                </div>
-                <h4>{{ $t('Finding Requests available to you...') }}</h4>
-            </div>
-
-            <pagination :single="$t('Process')"
-                        :plural="$t('Processes')"
-                        :perPageSelectEnabled="true"
-                        @changePerPage="changePerPage"
-                        @vuetable-pagination:change-page="onPageChange"
-                        ref="listProcess">
-            </pagination>
-
-        </b-modal>
-    </li>
+  <div
+    v-cloak
+    class="nav-item p-2"
+  >
+    <button
+      id="navbar-request-button"
+      type="button"
+      class="btn btn-success btn-sm"
+      :aria-label="$t('New Request')"
+      aria-haspopup="dialog"
+      @click="showRequestModal"
+    >
+      <i class="fas fa-plus" />
+      {{ $t('Request') }}
+    </button>
+    <new-request-modal
+      ref="requestModal"
+      size="lg"
+      :permission="permission"
+      :url="url"
+    />
+  </div>
 </template>
 
 <script>
-  import card from "./card";
-  import datatableMixin from "../common/mixins/datatable";
+import newRequestModal from "./requestModal.vue";
 
-  export default {
-    mixins: [datatableMixin],
-    props: {
-      permission: Array,
-      url: ''
-    },
-    components: {
-      "process-card": card
+export default {
+  components: {
+    "new-request-modal": newRequestModal,
+  },
+  props: {
+    permission: Array,
+    url: "",
+  },
+  data() {
+    return {
+    };
+  },
+  methods: {
+    hasEmptyStartEvents(process) {
+      return !!process.events.find((event) => !event.eventDefinitions || event.eventDefinitions.length === 0);
     },
-    data() {
-      return {
-        filter: "",
-        loading: false,
-        error: false,
-        loaded: false,
-        processes: {
-          // Blank
-        }
-      };
+    showRequestModal() {
+      this.$refs.requestModal.showModal();
     },
-    methods: {
-      hasEmptyStartEvents(process) {
-        return !!process.events.find(event => !event.eventDefinitions || event.eventDefinitions.length === 0);
-      },
-      showRequestModal() {
-        this.loaded = true;
-        // Perform initial load of requests from backend
-        this.$refs.requestModalAdd.show();
-        this.fetch();
-      },
-      // Overwrite handler to change the page based on events fired
-      onPageChange: function onPageChange(page) {
-        if (page === "next") {
-          this.page++;
-        } else if (page === "prev") {
-          this.page--;
-        } else {
-          this.page = page;
-        }
-        if (this.page <= 0) {
-          this.page = 1;
-        }
-        if (this.page > this.$refs.listProcess.tablePagination.last_page) {
-          this.page = this.$refs.listProcess.tablePagination.last_page;
-        }
-        this.fetch();
-      },
-      fetch() {
-        if (!this.loaded) {
-          return;
-        }
-        this.loading = true;
-        // Now call our api
-        window.ProcessMaker.apiClient
-          .get(
-            "start_processes?page=" +
-            this.page +
-            "&per_page=" +
-            this.perPage +
-            "&filter=" +
-            this.filter +
-            "&order_by=category.name,name" +
-            "&order_direction=asc,asc" +
-            "&include=events,categories" +
-            "&without_event_definitions=true"
-          )
-          .then(response => {
-            let data = response.data;
-            // Empty processes
-            this.processes = {};
-            // Now populate our processes array with data for rendering
-            this.populate(data.data);
-            // Do initial filter
-            this.loading = false;
-            //Set data in paginate
-            data.meta.from--;
-            this.$refs.listProcess.data = data;
-            this.$refs.listProcess.setPaginationData(data.meta);
-          })
-          .catch(error => {
-            this.loading = false;
-            this.error = true;
-          });
-      },
-      populate(data) {
-        // Each element in data represents an individual process
-        // We need to pull out the category name, and if it's available in our processes, append it there
-        // if not, create the category in our processes array and then append it
-        for (let process of data) {
-          for (let category of process.categories) {
-            // Now determine if we have it defined in our processes list
-            if (typeof this.processes[category.name] == "undefined") {
-              // Create it
-              this.processes[category.name] = [];
-            }
-            // Now append
-            this.processes[category.name].push(process);
-          }
-        }
-      }
-    }
-  };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/resources/js/components/requests/modalMobile.vue b/resources/js/components/requests/modalMobile.vue
index a4c87055c3..3c83ea3b95 100644
--- a/resources/js/components/requests/modalMobile.vue
+++ b/resources/js/components/requests/modalMobile.vue
@@ -13,23 +13,26 @@
     >
       <i class="fas fa-plus" />
     </button>
-    <b-modal
-      id="requests-modal-mobile"
-      ref="requestModalMobileAdd"
-      class="requests-modal-mobile modal-dialog-scrollable"
-      :title="$t('New Request')"
-      header-close-content="&times;"
-      hide-footer
-    >
-      <p> contenido </p>
-    </b-modal>
+    <new-request-modal
+      ref="requestModal"
+      size="md"
+      :permission="permission"
+      :url="url"
+    />
   </div>
 </template>
 
 <script>
+import newRequestModal from "./requestModal.vue";
 
 export default {
-  props: {},
+  components: {
+    "new-request-modal": newRequestModal,
+  },
+  props: {
+    permission: Array,
+    url: "",
+  },
   data() {
     return {
     };
@@ -37,7 +40,7 @@ export default {
   methods: {
     showRequestModal() {
       // Perform initial load of requests from backend
-      this.$refs.requestModalMobileAdd.show();
+      this.$refs.requestModal.showModal();
     },
   },
 };
diff --git a/resources/js/components/requests/requestModal.vue b/resources/js/components/requests/requestModal.vue
new file mode 100644
index 0000000000..07bd9f6155
--- /dev/null
+++ b/resources/js/components/requests/requestModal.vue
@@ -0,0 +1,259 @@
+<template>
+  <b-modal
+    id="requests-modal"
+    ref="requestModalAdd"
+    class="requests-modal modal-dialog-scrollable"
+    header-close-content="&times;"
+    hide-footer
+    :title="$t('New Request')"
+    :size="size"
+  >
+    <b-row no-gutters>
+      <b-col
+        cols="12"
+        md="8"
+      >
+        <p>
+          {{ $t("We've made it easy for you to start a Request for the following Processes. Select a Process to start your Request.") }}
+        </p>
+      </b-col>
+      <b-col
+        cols="12"
+        md="4"
+      >
+        <b-input-group class="search">
+          <b-form-input
+            v-model="filter"
+            :placeholder="$t('Search') + '...'"
+          />
+          <b-input-group-append>
+            <button
+              type="button"
+              class="btn btn-primary"
+              :aria-label="$t('Search')"
+            >
+              <i class="fas fa-search" />
+            </button>
+          </b-input-group-append>
+        </b-input-group>
+      </b-col>
+    </b-row>
+
+    <div
+      v-if="Object.keys(processes).length && !loading"
+      class="process-list"
+    >
+      <div
+        v-for="(category, index) in processes"
+        :key="index"
+        class="mt-3"
+      >
+        <h5 class="mb-n2">
+          {{ index }}
+          <span class="badge badge-pill badge-secondary">
+            {{ category.length }}
+          </span>
+        </h5>
+        <template v-for="(process, id) in category">
+          <process-card
+            v-if="hasEmptyStartEvents(process)"
+            :key="id"
+            :filter="filter"
+            :process="process"
+          />
+        </template>
+      </div>
+    </div>
+
+    <div
+      v-if="!Object.keys(processes).length && !loading"
+      class="no-requests my-3 text-center"
+    >
+      <h4>{{ $t('You don\'t have any Processes.') }}</h4>
+      <span v-if="permission.includes('create-processes')">
+        <a
+          :href="url"
+          class="text-primary"
+        >
+          {{ $t('Please visit the Processes page') }}
+        </a>
+        {{ $t('and click on +Process to get started.') }}
+      </span>
+      <span v-else>
+        {{ $t('Please contact your administrator to get started.') }}
+      </span>
+    </div>
+
+    <div
+      v-if="loading"
+      class="loading no-requests my-3 text-center"
+    >
+      <div class="icon-container">
+        <div>
+          <svg
+            class="lds-gear"
+            width="100%"
+            height="100%"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            viewBox="0 0 100 100"
+            preserveAspectRatio="xMidYMid"
+          >
+            <g transform="translate(50 50)">
+              <g transform="rotate(248.825)">
+                <animateTransform
+                  attributeName="transform"
+                  type="rotate"
+                  values="0;360"
+                  keyTimes="0;1"
+                  dur="4.7s"
+                  repeatCount="indefinite"
+                />
+                <path d="M37.43995192304605 -6.5 L47.43995192304605 -6.5 L47.43995192304605 6.5 L37.43995192304605 6.5 A38 38 0 0 1 35.67394948182593 13.090810836924174 L35.67394948182593 13.090810836924174 L44.33420351967032 18.090810836924174 L37.83420351967032 29.34914108612188 L29.17394948182593 24.34914108612188 A38 38 0 0 1 24.34914108612188 29.17394948182593 L24.34914108612188 29.17394948182593 L29.34914108612188 37.83420351967032 L18.090810836924184 44.33420351967032 L13.090810836924183 35.67394948182593 A38 38 0 0 1 6.5 37.43995192304605 L6.5 37.43995192304605 L6.500000000000001 47.43995192304605 L-6.499999999999995 47.43995192304606 L-6.499999999999996 37.43995192304606 A38 38 0 0 1 -13.09081083692417 35.67394948182593 L-13.09081083692417 35.67394948182593 L-18.09081083692417 44.33420351967032 L-29.34914108612187 37.834203519670325 L-24.349141086121872 29.173949481825936 A38 38 0 0 1 -29.17394948182592 24.34914108612189 L-29.17394948182592 24.34914108612189 L-37.83420351967031 29.349141086121893 L-44.33420351967031 18.0908108369242 L-35.67394948182592 13.090810836924193 A38 38 0 0 1 -37.43995192304605 6.5000000000000036 L-37.43995192304605 6.5000000000000036 L-47.43995192304605 6.500000000000004 L-47.43995192304606 -6.499999999999993 L-37.43995192304606 -6.499999999999994 A38 38 0 0 1 -35.67394948182593 -13.090810836924167 L-35.67394948182593 -13.090810836924167 L-44.33420351967032 -18.090810836924163 L-37.834203519670325 -29.34914108612187 L-29.173949481825936 -24.34914108612187 A38 38 0 0 1 -24.349141086121893 -29.17394948182592 L-24.349141086121893 -29.17394948182592 L-29.349141086121897 -37.834203519670304 L-18.0908108369242 -44.334203519670304 L-13.090810836924195 -35.67394948182592 A38 38 0 0 1 -6.500000000000005 -37.43995192304605 L-6.500000000000005 -37.43995192304605 L-6.500000000000007 -47.43995192304605 L6.49999999999999 -47.43995192304606 L6.499999999999992 -37.43995192304606 A38 38 0 0 1 13.090810836924149 -35.67394948182594 L13.090810836924149 -35.67394948182594 L18.090810836924142 -44.33420351967033 L29.349141086121847 -37.83420351967034 L24.349141086121854 -29.17394948182595 A38 38 0 0 1 29.17394948182592 -24.349141086121893 L29.17394948182592 -24.349141086121893 L37.834203519670304 -29.349141086121897 L44.334203519670304 -18.0908108369242 L35.67394948182592 -13.090810836924197 A38 38 0 0 1 37.43995192304605 -6.500000000000007 M0 -20A20 20 0 1 0 0 20 A20 20 0 1 0 0 -20" />
+              </g>
+            </g>
+          </svg>
+        </div>
+      </div>
+      <h4>{{ $t('Finding Requests available to you...') }}</h4>
+    </div>
+
+    <pagination
+      ref="listProcess"
+      :single="$t('Process')"
+      :plural="$t('Processes')"
+      :per-page-select-enabled="true"
+      @changePerPage="changePerPage"
+      @vuetable-pagination:change-page="onPageChange"
+    />
+  </b-modal>
+</template>
+
+<script>
+import card from "./card";
+import datatableMixin from "../common/mixins/datatable";
+
+export default {
+  components: {
+    "process-card": card,
+  },
+  mixins: [datatableMixin],
+  props: {
+    permission: Array,
+    url: "",
+    size: "",
+  },
+  data() {
+    return {
+      filter: "",
+      loading: false,
+      error: false,
+      loaded: false,
+      processes: {
+        // Blank
+      },
+    };
+  },
+  methods: {
+    hasEmptyStartEvents(process) {
+      return !!process.events.find((event) => !event.eventDefinitions || event.eventDefinitions.length === 0);
+    },
+    showModal() {
+      this.loaded = true;
+      // Perform initial load of requests from backend
+      this.$refs.requestModalAdd.show();
+      this.fetch();
+    },
+    // Overwrite handler to change the page based on events fired
+    onPageChange: function onPageChange(page) {
+      if (page === "next") {
+        this.page += 1;
+      } else if (page === "prev") {
+        this.page -= 1;
+      } else {
+        this.page = page;
+      }
+      if (this.page <= 0) {
+        this.page = 1;
+      }
+      if (this.page > this.$refs.listProcess.tablePagination.last_page) {
+        this.page = this.$refs.listProcess.tablePagination.last_page;
+      }
+      this.fetch();
+    },
+    fetch() {
+      if (!this.loaded) {
+        return;
+      }
+      this.loading = true;
+      // Now call our api
+      window.ProcessMaker.apiClient
+        .get(
+          `start_processes?page=${
+            this.page
+          }&per_page=${
+            this.perPage
+          }&filter=${
+            this.filter
+          }&order_by=category.name,name`
+            + "&order_direction=asc,asc"
+            + "&include=events,categories"
+            + "&without_event_definitions=true",
+        )
+        .then((response) => {
+          const { data } = response;
+          // Empty processes
+          this.processes = {};
+          // Now populate our processes array with data for rendering
+          this.populate(data.data);
+          // Do initial filter
+          this.loading = false;
+          // Set data in paginate
+          data.meta.from -= 1;
+          this.$refs.listProcess.data = data;
+          this.$refs.listProcess.setPaginationData(data.meta);
+        })
+        .catch(() => {
+          this.loading = false;
+          this.error = true;
+        });
+    },
+    populate(data) {
+      // Each element in data represents an individual process
+      // We need to pull out the category name, and if it's available in our processes, append it there
+      // if not, create the category in our processes array and then append it
+      for (const process of data) {
+        for (const category of process.categories) {
+          // Now determine if we have it defined in our processes list
+          if (typeof this.processes[category.name] === "undefined") {
+            // Create it
+            this.processes[category.name] = [];
+          }
+          // Now append
+          this.processes[category.name].push(process);
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.icon-container {
+  display:inline-block;
+  width: 5em;
+  margin-bottom: 1em;
+
+  i {
+    color: #b7bfc5;
+    font-size: 5em;
+  }
+
+  svg {
+    fill: #b7bfc5;
+  }
+}
+.search {
+  width: 100%;
+}
+</style>