initialsCount in search length

frontend/package.json

@@ -17,6 +17,7 @@
     "@babel/core": "^7.13.13",
     "@babel/node": "^7.13.13",
     "@babel/preset-env": "^7.13.12",
+    "@ogerlys/vue-avatar": "^2.3.4",
     "@vue/cli-plugin-unit-jest": "^4.5.12",
     "@vue/test-utils": "^1.1.3",
     "apollo-boost": "^0.4.9",
@@ -53,7 +54,6 @@
     "vee-validate": "^3.4.5",
     "vue": "2.6.12",
     "vue-apollo": "^3.0.7",
-    "vue-avatar": "^2.3.3",
     "vue-flatpickr-component": "^8.1.2",
     "vue-focus": "^2.1.0",
     "vue-i18n": "^8.22.4",

frontend/src/components/Avatar/avatar.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="vue-avatar--wrapper" :style="[style, customStyle]" aria-hidden="true">
+    <!-- this img is not displayed; it is used to detect failure-to-load of div background image -->
+    <img v-if="this.isImage" style="display: none" :src="this.src" @error="onImgError" />
+    <span v-show="!this.isImage">{{ userInitial }}</span>
+  </div>
+</template>
+
+<script>
+const getInitials = (username, initialsCount) => {
+  const parts = username.split(/[ -]/)
+  let initials = ''
+  const initialsCount = initialsCount
+
+  for (let i = 0; i < parts.length; i++) {
+    initials += parts[i].charAt(0)
+  }
+
+  if (initials.length > 3 && initials.search(/[A-Z]/) !== -1) {
+    initials = initials.replace(/[a-z]+/g, '')
+  }
+
+  initials = initials.substr(0, initialsCount).toUpperCase()
+
+  return initials
+}
+
+export default {
+  name: 'avatar',
+  props: {
+    username: {
+      type: String,
+    },
+    initials: {
+      type: String,
+    },
+    initialsCount: {
+      type: Number,
+      default: 3,
+    },
+    backgroundColor: {
+      type: String,
+    },
+    color: {
+      type: String,
+    },
+    customStyle: {
+      type: Object,
+    },
+    inline: {
+      type: Boolean,
+    },
+    size: {
+      type: Number,
+      default: 50,
+    },
+    src: {
+      type: String,
+    },
+    rounded: {
+      type: Boolean,
+      default: true,
+    },
+    lighten: {
+      type: Number,
+      default: 80,
+    },
+    parser: {
+      type: Function,
+      default: getInitials,
+      validator: (parser) => typeof parser('John', getInitials) === 'string',
+    },
+  },
+
+  data() {
+    return {
+      backgroundColors: [
+        '#F44336',
+        '#FF4081',
+        '#9C27B0',
+        '#673AB7',
+        '#3F51B5',
+        '#2196F3',
+        '#03A9F4',
+        '#00BCD4',
+        '#009688',
+        '#4CAF50',
+        '#8BC34A',
+        '#CDDC39',
+        /* '#FFEB3B' , */ '#FFC107',
+        '#FF9800',
+        '#FF5722',
+        '#795548',
+        '#9E9E9E',
+        '#607D8B',
+      ],
+      imgError: false,
+    }
+  },
+
+  mounted() {
+    if (!this.isImage) {
+      this.$emit('avatar-initials', this.username, this.userInitial)
+    }
+  },
+
+  computed: {
+    background() {
+      if (!this.isImage) {
+        return (
+          this.backgroundColor ||
+          this.randomBackgroundColor(this.username.length, this.backgroundColors)
+        )
+      }
+    },
+
+    fontColor() {
+      if (!this.isImage) {
+        return this.color || this.lightenColor(this.background, this.lighten)
+      }
+    },
+
+    isImage() {
+      return !this.imgError && Boolean(this.src)
+    },
+
+    style() {
+      const style = {
+        display: this.inline ? 'inline-flex' : 'flex',
+        width: `${this.size}px`,
+        height: `${this.size}px`,
+        borderRadius: this.rounded ? '50%' : 0,
+        lineHeight: `${this.size + Math.floor(this.size / 20)}px`,
+        fontWeight: 'bold',
+        alignItems: 'center',
+        justifyContent: 'center',
+        textAlign: 'center',
+        userSelect: 'none',
+      }
+
+      const imgBackgroundAndFontStyle = {
+        background: `transparent url('${this.src}') no-repeat scroll 0% 0% / ${this.size}px ${this.size}px content-box border-box`,
+      }
+
+      const initialBackgroundAndFontStyle = {
+        backgroundColor: this.background,
+        font: `${Math.floor(this.size / 2.5)}px/${this.size}px Helvetica, Arial, sans-serif`,
+        color: this.fontColor,
+      }
+
+      const backgroundAndFontStyle = this.isImage
+        ? imgBackgroundAndFontStyle
+        : initialBackgroundAndFontStyle
+
+      Object.assign(style, backgroundAndFontStyle)
+
+      return style
+    },
+
+    userInitial() {
+      if (!this.isImage) {
+        const initials = this.initials || this.parser(this.username, getInitials)
+        return initials
+      }
+      return ''
+    },
+  },
+
+  methods: {
+    initial: getInitials,
+
+    onImgError(evt) {
+      this.imgError = true
+    },
+
+    randomBackgroundColor(seed, colors) {
+      return colors[seed % colors.length]
+    },
+
+    lightenColor(hex, amt) {
+      // From https://css-tricks.com/snippets/javascript/lighten-darken-color/
+      let usePound = false
+
+      if (hex[0] === '#') {
+        hex = hex.slice(1)
+        usePound = true
+      }
+
+      const num = parseInt(hex, 16)
+      let r = (num >> 16) + amt
+
+      if (r > 255) r = 255
+      else if (r < 0) r = 0
+
+      let b = ((num >> 8) & 0x00ff) + amt
+
+      if (b > 255) b = 255
+      else if (b < 0) b = 0
+
+      let g = (num & 0x0000ff) + amt
+
+      if (g > 255) g = 255
+      else if (g < 0) g = 0
+
+      return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
+    },
+  },
+}
+</script>

frontend/yarn.lock

@@ -2437,6 +2437,11 @@
     consola "^2.15.0"
     node-fetch "^2.6.1"
 
+"@ogerlys/vue-avatar@^2.3.4":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@ogerlys/vue-avatar/-/vue-avatar-2.3.4.tgz#b627baced39f908a397630c1141d9c931f4f36f4"
+  integrity sha512-Mjx0lTJzXHC57FUAiBPCPhoB2x6NfXVIh4+AxcmKmY0nE3C2pidPHb3mkpfS3DL2NPJO8qry6TC5j4d1TpeGNw==
+
 "@polka/url@^1.0.0-next.20":
   version "1.0.0-next.21"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
@@ -14191,11 +14196,6 @@ vue-apollo@^3.0.7:
     serialize-javascript "^4.0.0"
     throttle-debounce "^2.1.0"
 
-vue-avatar@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/vue-avatar/-/vue-avatar-2.3.3.tgz#e125bf4f4a6f4f9480da0c522020266a8609d2a8"
-  integrity sha512-Z57ILRTkFIAuCH9JiFBxX74C5zua5ub/jRDM/KZ+QKXNfscvmUOgWBs3kA2+wrpZMowIvfLHIT0gvQu1z+zpLg==
-
 vue-cli-plugin-i18n@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-1.0.1.tgz#5a3077de5d62c9b4068e486db1fc97fce9fa0072"