@processmaker/screen-builder 2.83.5 → 2.83.7

package/package.json

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

package/src/components/index.js

@@ -16,6 +16,7 @@ import ScreenRenderer from "./screen-renderer.vue";
 import AddLoopRow from "./renderer/add-loop-row.vue";
 import FormRecordList from "./renderer/form-record-list.vue";
 import FormImage from "./renderer/form-image.vue";
+import FormAvatar from "./renderer/form-avatar.vue";
 import "@processmaker/vue-form-elements/dist/vue-form-elements.css";
 import FormButton from "./renderer/form-button.vue";
 import FileUpload from "./renderer/file-upload.vue";
@@ -136,6 +137,7 @@ export default {
     // Register the builder and renderer
     Vue.component("AddLoopRow", AddLoopRow);
     Vue.component("FormImage", FormImage);
+    Vue.component("FormAvatar", FormAvatar);
     Vue.component("FormLoop", FormLoop);
     Vue.component("FormMultiColumn", FormMultiColumn);
     Vue.component("FormNestedScreen", FormNestedScreen);

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-avatar.vue

@@ -0,0 +1,79 @@
+<template>
+  <span>
+    <b-button
+      :variant="variant()"
+      class="avatar-button rounded-circle overflow-hidden p-0 m-0 d-inline-flex border-0"
+      :style="styleAvatar()"
+      disabled
+    >
+      <img
+        v-if="user.avatar"
+        :src="user.avatar"
+        :width="width"
+        :height="height"
+        :class="image"
+        :alt="user.fullname"
+      />
+      <span
+        v-else
+        class="border-0 d-inline-flex align-items-center justify-content-center text-white text-uppercase text-nowrap font-weight-normal"
+        :style="styleAvatar()"
+      >
+        <span v-if="getInitials()">{{ getInitials() }}</span>
+        <span v-else>PM</span>
+      </span>
+    </b-button>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    width: {
+      default: 64,
+    },
+    height: {
+      default: 64,
+    },
+  },
+
+  data() {
+    return {
+      user: window.Processmaker.user,
+    };
+  },
+  mounted() {
+    this.getInitials();
+  },
+  methods: {
+    getInitials() {
+      return this.user.firstname && this.user.lastname
+        ? this.user.firstname.match(/./u)[0] + this.user.lastname.match(/./u)[0]
+        : "";
+    },
+    variant() {
+        return this.user.avatar ? 'secondary' : 'info';
+    },
+    styleAvatar() {
+      return "width: " +
+        this.width +
+        "px; height: " +
+        this.height +
+        "px; font-size:" +
+        this.height / 2.5 +
+        "px; padding:0;";
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .avatar-button:disabled {
+    opacity: 1;
+    pointer-events: none;
+  }
+  .empty-image {
+    font-size: 2em;
+  }
+</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();

package/src/components/renderer/index.js

@@ -1,6 +1,7 @@
 export { default as AddLoopRow } from "./add-loop-row.vue";
 export { default as FileDownload } from "./file-download.vue";
 export { default as FileUpload } from "./file-upload.vue";
+export { default as FormAvatar } from "./form-avatar.vue";
 export { default as FormButton } from "./form-button.vue";
 export { default as FormImage } from "./form-image.vue";
 export { default as FormInputMasked } from "./form-masked-input.vue";

package/src/form-builder-controls.js

@@ -1,4 +1,5 @@
 import FormText from './components/renderer/form-text';
+import FormAvatar from './components/renderer/form-avatar';
 import FormButton from './components/renderer/form-button';
 import FormMultiColumn from './components/renderer/form-multi-column';
 import FormLoop from './components/renderer/form-loop';
@@ -580,6 +581,50 @@ export default [
       ],
     },
   },
+  {
+    editorComponent: FormAvatar,
+    editorBinding: 'FormAvatar',
+    rendererComponent: FormAvatar,
+    rendererBinding: 'FormAvatar',
+    control: {
+      popoverContent: "User avatar",
+      order: 3.0,
+      group: 'Dashboards',
+      label: 'User Avatar',
+      component: 'FormAvatar',
+      'editor-component': 'FormAvatar',
+      'editor-control': 'FormAvatar',
+      config: {
+        label: 'User Avatar',
+        icon: 'fas fa-user-circle',
+        variant: 'primary',
+        event: 'submit',
+        name: null,
+        value: null,
+        renderImage: false,
+      },
+      inspector: [
+        {
+          type: 'FormInput',
+          field: 'height',
+          config: {
+            label: 'Height',
+            helper: 'Avatar height',
+            type: 'number',
+          },
+        },
+        {
+          type: 'FormInput',
+          field: 'width',
+          config: {
+            label: 'Width',
+            helper: 'Avatar width',
+            type: 'number',
+          },
+        },
+      ],
+    },
+  },
   {
     editorComponent: FormButton,
     editorBinding: 'FormSubmit',