ProcessMaker · pmPaulis · Sep 6, 2023 · Sep 5, 2023
diff --git 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
@@ -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
@@ -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
@@ -13,31 +13,34 @@
     >
       <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 {
     };
   },
   methods: {
     showRequestModal() {
       // Perform initial load of requests from backend
-      this.$refs.requestModalMobileAdd.show();
+      this.$refs.requestModal.showModal();
     },
   },
 };