Launchpad mobile bookmarks

ProcessMaker/Http/Controllers/Api/ProcessLaunchpadController.php

@@ -47,7 +47,6 @@ public function getProcesses(Request $request)
         // Get the processes
         $processes = $processes
             ->select('processes.*')
-            ->withRequestCount()
             ->orderBy('processes.name', 'asc')
             ->paginate($perPage);
 
@@ -58,6 +57,10 @@ public function getProcesses(Request $request)
             $process->launchpad = ProcessLaunchpad::getLaunchpad($launchpad, $process->id);
         }
 
+        $process = $processes->map(function ($process) {
+            $process->counts = $this->getCounts($process->id);
+        });
+
         return new ProcessCollection($processes);
     }
 
@@ -104,8 +107,9 @@ public function index(Request $request, Process $process)
             }])
             ->where('id', $process->id)
             ->get()
-            ->map(function ($process) {
+            ->map(function ($process) use ($request) {
                 $process->counts = $this->getCounts($process->id);
+                $process->bookmark_id = Bookmark::getBookmarked(true, $process->id, $request->user()->id);
 
                 return $process;
             });

ProcessMaker/Models/Process.php

@@ -1816,15 +1816,4 @@ public function scopeOrderByRecentRequests($query)
                 ->limit(1)
         );
     }
-
-    public function scopeWithRequestCount($query)
-    {
-        return $query->withCount(['requests' => function ($query) {
-            return $query->where('status', 'ACTIVE')
-                // User has participated
-                ->whereHas('tokens', function ($q) {
-                    $q->where('user_id', Auth::user()->id);
-                });
-        }]);
-    }
 }

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

@@ -0,0 +1,87 @@
+<template>
+    <i
+      v-b-tooltip.hover.bottom
+      :title="bookmarkTitle"
+      :class="bookmarkClass"
+      @click="checkBookmark()"
+    />
+</template>
+
+<script>
+export default {
+  props: {
+    process: {
+      type: Object,
+      required: true,
+    }
+  },
+  data() {
+    return {
+      bookmarkId: null,
+    };
+  },
+  mounted() {
+    this.bookmarkId = this.process?.bookmark_id;
+  },
+  methods: {
+    checkBookmark() {
+      if (this.isBookmarked) {
+        ProcessMaker.apiClient
+          .delete(`process_bookmarks/${this.bookmarkId}`)
+          .then(() => {
+            ProcessMaker.alert(this.$t("Process removed from Bookmarked List."), "success");
+            this.$emit('bookmark-updated', false);
+            this.bookmarkId = null;
+          });
+        return;
+      }
+      ProcessMaker.apiClient
+        .post(`process_bookmarks/${this.process.id}`)
+        .then(response => {
+          console.log(response);
+          ProcessMaker.alert(this.$t("Process added to Bookmarked List."), "success");
+          this.$emit('bookmark-updated', true);
+          this.bookmarkId = response.data.newId;
+        });
+    },
+  },
+  computed: {
+    isBookmarked() {
+      return this.bookmarkId && this.bookmarkId !== 0;
+    },
+    bookmarkClass() {
+      return this.isBookmarked ? "fas fa-bookmark marked bookmark" : "fas fa-bookmark unmarked bookmark";
+    },
+    bookmarkTitle() {
+      return this.isBookmarked ? this.$t("Remove from My Bookmarks") : this.$t("Add to My Bookmarks");
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~styles/variables';
+.bookmark {
+  font-size: 1.5em;
+}
+.bookmark:hover {
+  cursor: pointer;
+}
+
+.marked {
+  color: #f5bC00;
+}
+.unmarked {
+  color: #fff;
+  -webkit-text-stroke-color: #bed1e5;
+  -webkit-text-stroke-width: 2px;
+}
+.unmarked:hover {
+  @media (max-width: $lp-breakpoint) {
+    color: #fff;
+  }
+  color: #ffd445;
+  -webkit-text-stroke-width: 0;
+}
+</style>

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

@@ -10,7 +10,7 @@
     >
       <Card
         v-for="(process, index) in processList"
-        :key="index"
+        :key="`${index}_${renderKey}`"
         :process="process"
         @openProcessInfo="openProcessInfo"
         :hideBookmark="categoryId === 'all_templates'"
@@ -66,9 +66,9 @@ export default {
       totalPages: 1,
       pmql: "",
       filter: "",
-      bookmarkIcon: "far fa-bookmark",
       showEmpty: false,
       loading: false,
+      renderKey: 0,
     };
   },
   watch: {
@@ -92,6 +92,7 @@ export default {
           this.processList = response.data.data;
           this.totalRow = response.data.meta.total;
           this.totalPages = response.data.meta.total_pages;
+          this.renderKey = this.renderKey + 1;
         });
     },
     /**

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

@@ -1,15 +1,54 @@
 <template>
-  <div v-if="selectedProcess">
+  <div class="process-info-main" v-if="selectedProcess">
+    <div class="mobile-process-nav bg-primary">
+      <div class="left">
+        <a href="#" @click.prevent="goBackCategory">
+          <i class="fas fa-arrow-left" />
+        </a>
+      </div>
+      <div class="center">
+        <a href="#" @click.prevent="showDetails = !showDetails">
+          <i class="fas fa-info-circle" />
+        </a>
+      </div>
+      <div class="right">
+        <bookmark
+          :process="selectedProcess"
+        />
+      </div>
+    </div>
+    <div class="mobile-process-details" :class="{ 'active' : showDetails }">
+      <h1>{{ $t('Details') }}</h1>
+      <h2>{{ selectedProcess.name }}</h2>
+      <p>{{ selectedProcess.description }}</p>
+      <h3>{{ $t('Version') }} {{ processVersion }}</h3>
+      <h1 class="started-cases-title">{{ $t('Started Cases') }}</h1>
+      <p class="started-cases">{{ startedCases.toLocaleString() }}</p>
+      <div class="charts">
+        <mini-pie-chart
+          :count="selectedProcess.counts?.in_progress"
+          :total="startedCases"
+          :name="$t('In Progress')"
+          color="#4EA075"
+        />
+        <mini-pie-chart
+          :count="selectedProcess.counts?.completed"
+          :total="startedCases"
+          :name="$t('Completed')"
+          color="#478FCC"
+        />
+      </div>
+    </div>
+
+
     <ProcessInfo
       v-if="!verifyScreen"
       :process="selectedProcess"
-      :permission="permission"
       @goBackCategory="goBackCategory"
     />
     <ProcessScreen
       v-if="verifyScreen"
       :process="selectedProcess"
-      :permission="permission"
       @goBackCategory="goBackCategory"
     />
   </div>
@@ -18,15 +57,18 @@
 <script>
 import ProcessInfo from "./ProcessInfo.vue";
 import ProcessScreen from "./ProcessScreen.vue";
+import MiniPieChart from "./MiniPieChart.vue";
+import Bookmark from "./Bookmark.vue";
 
 export default {
-  props: ["process", "processId", "permission", "isDocumenterInstalled"],
+  props: ["process", "processId"],
   components: {
-    ProcessInfo, ProcessScreen
+    ProcessInfo, ProcessScreen, MiniPieChart, Bookmark
   },
   data() {
     return {
       loadedProcess: null,
+      showDetails: false,
     };
   },
   computed: {
@@ -56,6 +98,12 @@ export default {
 
       return screenId !== 0;
     },
+    processVersion() {
+      return moment(this.selectedProcess.updated_at).format();
+    },
+    startedCases() {
+      return this.selectedProcess.counts?.total || 0;
+    },
   },
   methods: {
     goBackCategory() {
@@ -67,9 +115,109 @@ export default {
       ProcessMaker.apiClient
         .get(`process_launchpad/${this.processId}`)
         .then((response) => {
+          console.log("Process.vue got response", response.data[0]);
           this.loadedProcess = response.data[0];
         });
     }
-  }
+
+    if (window.ProcessMaker?.navbarMobile) {
+      window.ProcessMaker.navbarMobile.display = false;
+    }
+  },
+  beforeDestroy() {
+    if (window.ProcessMaker?.navbarMobile) {
+      window.ProcessMaker.navbarMobile.display = true;
+    }
+  },
 };
-</script>
+</script>
+
+<style lang="scss" scoped>
+@import '~styles/variables';
+.process-info-main {
+  overflow-y: auto;
+  position: relative;
+}
+.mobile-process-nav {
+  display: none;
+
+  div {
+    flex: 1;
+    text-align: center;
+  }
+
+  .left {
+    text-align: left;
+  }
+
+  .right {
+    text-align: right;
+  }
+
+  .left i, .center i {
+    display: block;
+    color: #FFFFFF;
+    padding: 1em;
+    font-size: 1.5em;
+  }
+
+  .right i {
+    padding: 1em;
+    -webkit-text-stroke-width: 0;
+  }
+
+  @media (max-width: $lp-breakpoint) {
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+.mobile-process-details {
+  display: none;
+
+  width: 100%;
+  position: absolute;
+  z-index: 5;
+  padding: 1em;
+  background-color: white;
+  box-shadow: 0px 8px 8px #00000021;
+
+  &.active {
+    display: block;
+  }
+
+  h1 {
+    font-size: 1.5em;
+    font-weight: 600;
+    color: $primary;
+  }
+
+  h2 {
+    font-size: 1em;
+    font-weight: 600;
+    color: $primary;
+  }
+
+  p {
+    font-size: 1em;
+  }
+
+  p.started-cases {
+    font-size: 3em;
+  }
+
+  h1.started-cases-title {
+    margin-bottom: 0;
+    padding-top: 0.5em;
+  }
+
+  h3 {
+    font-size: 1em;
+    color: $secondary;
+  }
+}
+
+.charts {
+  display: flex;
+  align-items: center;
+}</style>