diff options
author | kushalpandya <kushal@gitlab.com> | 2017-09-04 18:45:07 +0300 |
---|---|---|
committer | kushalpandya <kushal@gitlab.com> | 2017-09-05 10:41:20 +0300 |
commit | c2c2407e3004acf6ce64ca1142d9378ed505aa7e (patch) | |
tree | ce18f0bdc3fba46f1670752fa935d63c69c5f573 /app/assets/javascripts/projects_dropdown | |
parent | 53d575ac07fc0c5a297aff484d40fe5e91a8da75 (diff) |
Projects Dropdown Project Item Component
Diffstat (limited to 'app/assets/javascripts/projects_dropdown')
-rw-r--r-- | app/assets/javascripts/projects_dropdown/components/projects_list_item.vue | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue new file mode 100644 index 00000000000..fe5179de206 --- /dev/null +++ b/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue @@ -0,0 +1,96 @@ +<script> +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; + }, + }, +}; +</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" + > + {{namespace}} + </div> + </div> + </a> + </li> +</template> |