diff options
author | kushalpandya <kushal@gitlab.com> | 2017-09-04 18:45:40 +0300 |
---|---|---|
committer | kushalpandya <kushal@gitlab.com> | 2017-09-05 10:41:20 +0300 |
commit | 0bf40fd44906e72b91c83d6fc4809d6a115c18db (patch) | |
tree | 01d17c6ca3184c96ba694e0a7e3e86778f284b7d /app/assets/javascripts/projects_dropdown | |
parent | 33697aa28fb44657d39ddc1500904c0f00e5af31 (diff) |
Projects Dropdown Searched Projects List Component
Diffstat (limited to 'app/assets/javascripts/projects_dropdown')
-rw-r--r-- | app/assets/javascripts/projects_dropdown/components/projects_list_search.vue | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue new file mode 100644 index 00000000000..fa5efef2919 --- /dev/null +++ b/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue @@ -0,0 +1,63 @@ +<script> +import { s__ } from '../../locale'; +import projectsListItem from './projects_list_item.vue'; + +export default { + components: { + projectsListItem, + }, + props: { + matcher: { + type: String, + required: true, + }, + projects: { + type: Array, + required: true, + }, + searchFailed: { + type: Boolean, + required: true, + }, + }, + computed: { + isListEmpty() { + return this.projects.length === 0; + }, + listEmptyMessage() { + return this.searchFailed ? + s__('ProjectsDropdown|Something went wrong on our end.') : + s__('ProjectsDropdown|No projects matched your query'); + }, + }, +}; +</script> + +<template> + <div + class="projects-list-search-container" + > + <ul + class="list-unstyled" + > + <li + v-if="isListEmpty" + :class="{ 'section-failure': searchFailed }" + class="section-empty" + > + {{ listEmptyMessage }} + </li> + <projects-list-item + v-else + v-for="(project, index) in projects" + :key="index" + :project-id="project.id" + :project-name="project.name" + :namespace="project.namespace" + :web-url="project.webUrl" + :avatar-url="project.avatarUrl" + :matcher="matcher" + /> + </ul> + </div> +</template> |