Merge branch 'next' into FOUR-8782-2

package.json

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

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);

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>

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>
+

src/components/renderer/form-empty-table.vue

@@ -5,7 +5,7 @@
       {{ $t(title) }}
     </span>
     <b-link v-if="url !== ''" @click="openLink()">
-      {{ linkText }}
+      {{ $t(linkText) }}
     </b-link>
   </div>
 </template>
@@ -21,7 +21,7 @@ export default {
   },
   methods: {
     openLink() {
-      window.open(this.link, "_blank");
+      window.open(this.url, "_blank");
     }
   }
 };

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

@@ -11,7 +11,7 @@
             class="avatar-text"
           ></b-avatar>
           <p class="control-text mb-0" :style="dataControl.colorText">
-            {{ title }}
+            {{ $t(title) }}
           </p>
           <template v-if="dataControl.dropdownShow === 'requests'">
             <b-dropdown variant="outline-secondary" no-caret>
@@ -321,6 +321,7 @@ export default {
 .list-table {
   height: 300px;
   overflow: auto;
+  background-color: #f9f9f9;
 }
 
 .btn-outline-secondary {