BigW Consortium Gitlab

identicon.vue 961 Bytes
Newer Older
1 2 3
<script>
export default {
  props: {
4 5
    entityId: {
      type: Number,
6 7
      required: true,
    },
8
    entityName: {
9 10 11
      type: String,
      required: true,
    },
12 13 14 15 16
    sizeClass: {
      type: String,
      required: false,
      default: 's40',
    },
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
  },
  computed: {
    /**
     * This method is based on app/helpers/application_helper.rb#project_identicon
     */
    identiconStyles() {
      const allowedColors = [
        '#FFEBEE',
        '#F3E5F5',
        '#E8EAF6',
        '#E3F2FD',
        '#E0F2F1',
        '#FBE9E7',
        '#EEEEEE',
      ];

33
      const backgroundColor = allowedColors[this.entityId % 7];
34 35 36 37

      return `background-color: ${backgroundColor}; color: #555;`;
    },
    identiconTitle() {
38 39 40
      return this.entityName.charAt(0).toUpperCase();
    },
  },
41 42 43 44 45
};
</script>

<template>
  <div
46 47
    class="avatar identicon"
    :class="sizeClass"
48
    :style="identiconStyles">
49
    {{ identiconTitle }}
50 51
  </div>
</template>