feature/FOUR-13370: The Avatar is not working correctly as Participant and Designer 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);

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/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";

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',