@processmaker/screen-builder 2.83.5 → 2.83.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.83.5",
+  "version": "2.83.6",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",

package/src/components/renderer/card.vue

@@ -1,43 +1,49 @@
 <template>
-  <div class="m-3 card-request">
-    <div v-for="event in emptyStartEvents" :key="event.id" class="card">
-      <div class="card-body">
-        <div class="d-flex justify-content-between">
-          <div style="width: 80%">
-            <span v-uni-id="event.id.toString()">{{ transformedName }}</span>
-            <span v-if="process.startEvents.length > 1">
-              : {{ event.name }}
-            </span>
-            <a
-              href="#"
-              :aria-expanded="ariaExpanded"
-              :aria-controls="getComputedId(process)"
-              @click="showRequestDetails"
-            >
-              ...
-            </a>
+  <div>
+    <template v-for="event in emptyStartEvents">
+      <div :key="event.id" class="mb-3 card-request">
+        <div class="card-body">
+          <div class="d-flex justify-content-between">
+            <div>
+              <span v-uni-id="event.id.toString()" class="card-info card-title">
+                {{ transformedName }}
+              </span>
+              <span class="card-info">
+                {{ event.name }}
+              </span>
+            </div>
+            <div class="d-flex align-items-center">
+              <button
+                :aria-expanded="ariaExpanded"
+                :aria-controls="getComputedId(process, event)"
+                class="btn btn-ellipsis btn-sm mr-1"
+                @click="showRequestDetails(process, event)"
+              >
+                <i class="fas fa-ellipsis-v"></i>
+              </button>
+              <button
+                v-uni-aria-describedby="event.id.toString()"
+                :href="getNewRequestLinkHref(process, event)"
+                class="btn btn-custom btn-sm"
+                @click.prevent="newRequestLink(process, event)"
+              >
+                {{ $t("Start") }}
+                <i class="fas fa-play mr-1 card-icon"></i>
+              </button>
+            </div>
           </div>
-          <div class="text-right">
-            <button
-              v-uni-aria-describedby="event.id.toString()"
-              :href="getNewRequestLinkHref(process, event)"
-              class="btn btn-primary btn-sm"
-              @click.prevent="newRequestLink(process, event)"
-            >
-              <i class="fas fa-caret-square-right mr-1"></i> {{ $t("Start") }}
-            </button>
-          </div>
-        </div>
-        <div
-          v-if="showdetail"
-          :id="getComputedId(process)"
-          :aria-hidden="ariaHidden"
-        >
-          <hr />
-          <p class="card-text text-muted">{{ process.description }}</p>
+          <b-collapse
+            :id="getComputedId(process, event)"
+            :aria-hidden="ariaHidden"
+          >
+            <hr />
+            <p class="card-text text-muted card-description">
+              {{ process.description }}
+            </p>
+          </b-collapse>
         </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -116,7 +122,7 @@ export default {
           this.spin = 0;
           const instance = response.data;
           this.$cookies.set("fromTriggerStartEvent", true, "1min");
-          window.location = `/requests/${instance.id}?fromRedirect=true`;
+          window.location = `/requests/${instance.id}?fromTriggerStartEvent=`;
         })
         .catch((err) => {
           this.disabled = false;
@@ -126,29 +132,85 @@ export default {
           }
         });
     },
-    showRequestDetails(id) {
+    showRequestDetails(process, event) {
       if (this.showdetail === false) {
         this.showdetail = true;
       } else {
         this.showdetail = false;
       }
+      this.$root.$emit(
+        "bv::toggle::collapse",
+        this.getComputedId(process, event)
+      );
     },
     getNewRequestLinkHref(process, event) {
       const { id } = process;
       const startEventId = event.id;
       return `/process_events/${id}?event=${startEventId}`;
     },
-    getComputedId(process) {
-      return `process-${process.id}`;
+    getComputedId(process, event) {
+      return `process-${process.id}-${event.id}`;
     }
   }
 };
 </script>
 
 <style scoped>
+.btn-custom {
+  border-radius: 4px;
+  border: 1px solid #eceff3;
+  background: #e8f0f9;
+  display: flex;
+  height: 28px;
+  padding: 4px 9px;
+  justify-content: center;
+  align-items: inherit;
+  gap: 6px;
+  color: #1572c2;
+  font-size: 14px;
+  font-weight: 600;
+}
+.btn-ellipsis {
+  background: #fff;
+  height: 28px;
+  justify-content: center;
+  align-items: center;
+  color: #1572c2;
+  font-size: 14px;
+}
+.btn-ellipsis:hover {
+  border-radius: 4px;
+  background: #e8f0f9;
+}
 .card-request {
-  width: 45%;
-  min-width: 40%;
-  max-width: 50%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid #cdddee;
+  background: #fff;
+}
+.card-info {
+  -webkit-line-clamp: 1;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.card-description {
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.card-title {
+  font-weight: 700;
+}
+.card-icon {
+  display: flex;
+  padding: 2px 1px 0px 0px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  font-size: 7px;
 }
 </style>

package/src/components/renderer/form-list-table.vue

@@ -321,6 +321,7 @@ export default {
 .list-table {
   height: 300px;
   overflow: auto;
+  background-color: #f9f9f9;
 }
 
 .btn-outline-secondary {

package/src/components/renderer/form-new-request.vue

@@ -1,25 +1,15 @@
 <template>
   <div>
     <div v-if="Object.keys(processes).length && !loading" class="process-list">
-      <div
-        v-for="(category, index) in processes"
-        :key="`category-${index}`"
-        class="mt-3"
-      >
-        <b-container fluid>
-          <b-card-group>
-            <template v-for="(process, id) in category">
-              <b-col :key="`process-${id}`" cols="6">
-                <ProcessCard
-                  v-if="hasEmptyStartEvents(process)"
-                  :filter="filter"
-                  :process="process"
-                />
-              </b-col>
-            </template>
-          </b-card-group>
-        </b-container>
-      </div>
+      <b-container fluid>
+        <div v-for="(process, index) in processes" :key="`process-${index}`">
+          <ProcessCard
+            v-if="hasEmptyStartEvents(process)"
+            :filter="filter"
+            :process="process"
+          />
+        </div>
+      </b-container>
     </div>
     <div v-else>
       <formEmpty link="" title="No Request to Start" url="" />
@@ -61,51 +51,18 @@ export default {
           .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" +
+              "&include=events" +
               "&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
-            // Set data in paginate
-            data.meta.from -= 1;
-            this.$refs.listProcess.data = data;
-            this.$refs.listProcess.setPaginationData(data.meta);
-            const dataControls = {
-              count: "0",
-              showControl: true,
-              showAvatar: false,
-              colorTextStart: "color: #57646F",
-              url: ""
-            };
-            const tasksDropdown = [];
-            this.$emit("startControl", { dataControls, tasksDropdown });
+            this.processes = data.data;
           })
           .catch(() => {
             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);
-        }
-      }
-    },
     fetchData(value) {
       this.filter = value;
       this.fetch();