From 4dcbb875e4d33b0917c81d83a62f6d142a2170bb Mon Sep 17 00:00:00 2001
From: Luciana Nunez <luciana.nunez@processmaker.com>
Date: Tue, 6 Feb 2024 11:03:28 -0400
Subject: [PATCH 1/5] feature/FOUR-13370

---
 src/components/index.js                 |  2 ++
 src/components/renderer/form-avatar.vue | 21 ++++++++++++
 src/components/renderer/index.js        |  1 +
 src/form-builder-controls.js            | 45 +++++++++++++++++++++++++
 4 files changed, 69 insertions(+)
 create mode 100644 src/components/renderer/form-avatar.vue

diff --git a/src/components/index.js b/src/components/index.js
index df80d81a5..ccad9534f 100644
--- a/src/components/index.js
+++ b/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);
diff --git a/src/components/renderer/form-avatar.vue b/src/components/renderer/form-avatar.vue
new file mode 100644
index 000000000..c9dea8864
--- /dev/null
+++ b/src/components/renderer/form-avatar.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="form-group form-image" style="overflow-x: hidden" >
+    avatar
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['id', 'image', 'width', 'height', 'name', 'renderImage', 'variableName', 'validationData', 'imageName'],
+  data() {
+    return {
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .form-image {
+    overflow-x: hidden;
+  }
+</style>
diff --git a/src/components/renderer/index.js b/src/components/renderer/index.js
index 3b4d3d7b9..576cd6594 100755
--- a/src/components/renderer/index.js
+++ b/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";
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 8618e2792..0a936b8df 100755
--- a/src/form-builder-controls.js
+++ b/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: 'Content Fields',
+      label: 'Image',
+      component: 'FormAvatar',
+      'editor-component': 'FormAvatar',
+      'editor-control': 'FormAvatar',
+      config: {
+        label: 'Image',
+        icon: 'fas fa-user-circle',
+        variant: 'primary',
+        event: 'submit',
+        name: null,
+        value: null,
+        renderImage: false,
+      },
+      inspector: [
+        {
+          type: 'FormInput',
+          field: 'height',
+          config: {
+            label: 'Height',
+            helper: 'Image height',
+            type: 'number',
+          },
+        },
+        {
+          type: 'FormInput',
+          field: 'width',
+          config: {
+            label: 'Width',
+            helper: 'image width',
+            type: 'number',
+          },
+        },
+      ],
+    },
+  },
   {
     editorComponent: FormButton,
     editorBinding: 'FormSubmit',

From 3913e4956a5fd664c13f63ab194d79893a27404d Mon Sep 17 00:00:00 2001
From: Luciana Nunez <luciana.nunez@processmaker.com>
Date: Wed, 7 Feb 2024 15:10:26 -0400
Subject: [PATCH 2/5] feature/FOUR-13370

---
 src/components/renderer/form-avatar.vue | 60 ++++++++++++++++++++++---
 1 file changed, 54 insertions(+), 6 deletions(-)

diff --git a/src/components/renderer/form-avatar.vue b/src/components/renderer/form-avatar.vue
index c9dea8864..e7727adf1 100644
--- a/src/components/renderer/form-avatar.vue
+++ b/src/components/renderer/form-avatar.vue
@@ -1,21 +1,69 @@
 <template>
-  <div class="form-group form-image" style="overflow-x: hidden" >
-    avatar
-  </div>
+  <span>
+    <b-button
+      variant="primary"
+      class="avatar-button rounded-circle overflow-hidden p-0 m-0 d-inline-flex border-0"
+      disabled
+    >
+      <img v-if="user.avatar" :src="user.avatar" :width="width" :height="height">
+      
+      <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: ['id', 'image', 'width', 'height', 'name', 'renderImage', 'variableName', 'validationData', 'imageName'],
+  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]
+        : "";
+    },
+    styleAvatar() {
+      return "width: " +
+        this.width +
+        "px; height: " +
+        this.height +
+        "px; font-size:" +
+        this.height / 2.5 +
+        "px; padding:0;";
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-  .form-image {
-    overflow-x: hidden;
+  .avatar-button:disabled {
+    opacity: 1;
+    pointer-events: none;
+  }
+  .empty-image {
+    font-size: 2em;
   }
 </style>
+

From 4213c55fc5666a1083c121b9c8cc855c1c4e1491 Mon Sep 17 00:00:00 2001
From: Luciana Nunez <luciana.nunez@processmaker.com>
Date: Thu, 8 Feb 2024 10:34:50 -0400
Subject: [PATCH 3/5] feature/FOUR-13370

---
 src/components/renderer/form-avatar.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/renderer/form-avatar.vue b/src/components/renderer/form-avatar.vue
index e7727adf1..f5044026b 100644
--- a/src/components/renderer/form-avatar.vue
+++ b/src/components/renderer/form-avatar.vue
@@ -1,11 +1,17 @@
 <template>
   <span>
     <b-button
-      variant="primary"
+      :variant="variant()"
       class="avatar-button rounded-circle overflow-hidden p-0 m-0 d-inline-flex border-0"
       disabled
     >
-      <img v-if="user.avatar" :src="user.avatar" :width="width" :height="height">
+      <img v-if="user.avatar"
+        :src="user.avatar"
+        :width="width"
+        :height="height"
+        :class="image"
+        :alt="user.fullname"
+      >
       
       <span
         v-else
@@ -44,6 +50,13 @@ export default {
         ? this.user.firstname.match(/./u)[0] + this.user.lastname.match(/./u)[0]
         : "";
     },
+    variant() {
+      if (this.user.avatar) {
+        return 'secondary';
+      } else {
+        return 'info';
+      }
+    },
     styleAvatar() {
       return "width: " +
         this.width +

From af3740907dc335158ec9f24eb8fc18665215b859 Mon Sep 17 00:00:00 2001
From: Luciana Nunez <luciana.nunez@processmaker.com>
Date: Thu, 8 Feb 2024 12:57:07 -0400
Subject: [PATCH 4/5] feature/FOUR-13370

---
 src/components/renderer/form-avatar.vue |  1 +
 src/form-builder-controls.js            | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/renderer/form-avatar.vue b/src/components/renderer/form-avatar.vue
index f5044026b..96fe546fa 100644
--- a/src/components/renderer/form-avatar.vue
+++ b/src/components/renderer/form-avatar.vue
@@ -3,6 +3,7 @@
     <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"
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 0a936b8df..7cf9f4936 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -589,13 +589,13 @@ export default [
     control: {
       popoverContent: "User avatar",
       order: 3.0,
-      group: 'Content Fields',
-      label: 'Image',
+      group: 'Dashboards',
+      label: 'User Avatar',
       component: 'FormAvatar',
       'editor-component': 'FormAvatar',
       'editor-control': 'FormAvatar',
       config: {
-        label: 'Image',
+        label: 'User Avatar',
         icon: 'fas fa-user-circle',
         variant: 'primary',
         event: 'submit',
@@ -609,7 +609,7 @@ export default [
           field: 'height',
           config: {
             label: 'Height',
-            helper: 'Image height',
+            helper: 'Avatar height',
             type: 'number',
           },
         },
@@ -618,7 +618,7 @@ export default [
           field: 'width',
           config: {
             label: 'Width',
-            helper: 'image width',
+            helper: 'Avatar width',
             type: 'number',
           },
         },

From 2d099ad56ea65e682f3871df12a4334bf4a95a73 Mon Sep 17 00:00:00 2001
From: Luciana Nunez <luciana.nunez@processmaker.com>
Date: Thu, 8 Feb 2024 14:24:03 -0400
Subject: [PATCH 5/5] feature/FOUR-13370

---
 src/components/renderer/form-avatar.vue | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/renderer/form-avatar.vue b/src/components/renderer/form-avatar.vue
index 96fe546fa..a256d834a 100644
--- a/src/components/renderer/form-avatar.vue
+++ b/src/components/renderer/form-avatar.vue
@@ -6,14 +6,14 @@
       :style="styleAvatar()"
       disabled
     >
-      <img v-if="user.avatar"
+      <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"
@@ -52,11 +52,7 @@ export default {
         : "";
     },
     variant() {
-      if (this.user.avatar) {
-        return 'secondary';
-      } else {
-        return 'info';
-      }
+        return this.user.avatar ? 'secondary' : 'info';
     },
     styleAvatar() {
       return "width: " +