summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
blob: 759cdd1ded91d807f67fb1ad9ae30136822a4775 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<script>
  /* eslint-disable vue/require-default-prop, vue/require-prop-types */
  import identicon from '../../vue_shared/components/identicon.vue';

  export default {
    components: {
      identicon,
    },
    props: {
      matcher: {
        type: String,
        required: false,
      },
      projectId: {
        type: Number,
        required: true,
      },
      projectName: {
        type: String,
        required: true,
      },
      namespace: {
        type: String,
        required: true,
      },
      webUrl: {
        type: String,
        required: true,
      },
      avatarUrl: {
        required: true,
        validator(value) {
          return value === null || typeof value === 'string';
        },
      },
    },
    computed: {
      hasAvatar() {
        return this.avatarUrl !== null;
      },
      highlightedProjectName() {
        if (this.matcher) {
          const matcherRegEx = new RegExp(this.matcher, 'gi');
          const matches = this.projectName.match(matcherRegEx);

          if (matches && matches.length > 0) {
            return this.projectName.replace(matches[0], `<b>${matches[0]}</b>`);
          }
        }
        return this.projectName;
      },
      /**
       * Smartly truncates project namespace by doing two things;
       * 1. Only include Group names in path by removing project name
       * 2. Only include first and last group names in the path
       *    when namespace has more than 2 groups present
       *
       * First part (removal of project name from namespace) can be
       * done from backend but doing so involves migration of
       * existing project namespaces which is not wise thing to do.
       */
      truncatedNamespace() {
        const namespaceArr = this.namespace.split(' / ');
        namespaceArr.splice(-1, 1);
        let namespace = namespaceArr.join(' / ');

        if (namespaceArr.length > 2) {
          namespace = `${namespaceArr[0]} / ... / ${namespaceArr.pop()}`;
        }

        return namespace;
      },
    },
  };
</script>

<template>
  <li
    class="projects-list-item-container"
  >
    <a
      class="clearfix"
      :href="webUrl"
    >
      <div
        class="project-item-avatar-container"
      >
        <img
          v-if="hasAvatar"
          class="avatar s32"
          :src="avatarUrl"
        />
        <identicon
          v-else
          size-class="s32"
          :entity-id="projectId"
          :entity-name="projectName"
        />
      </div>
      <div
        class="project-item-metadata-container"
      >
        <div
          class="project-title"
          :title="projectName"
          v-html="highlightedProjectName"
        >
        </div>
        <div
          class="project-namespace"
          :title="namespace"
        >{{ truncatedNamespace }}</div>
      </div>
    </a>
  </li>
</template>