Merge branch 'ee1979-user-avatar-list-component' into 'master'

Create shared user-avatar-list component

See merge request gitlab-org/gitlab-ce!24139

1 files changed, 83 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue
new file mode 100644
index 00000000000..7361867edc5
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue
@@ -0,0 +1,83 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { sprintf, __ } from '~/locale';
+import UserAvatarLink from './user_avatar_link.vue';
+
+export default {
+  components: {
+    UserAvatarLink,
+    GlButton,
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    breakpoint: {
+      type: Number,
+      required: false,
+      default: 10,
+    },
+    imgSize: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+  },
+  data() {
+    return {
+      isExpanded: false,
+    };
+  },
+  computed: {
+    visibleItems() {
+      if (!this.hasHiddenItems) {
+        return this.items;
+      }
+
+      return this.items.slice(0, this.breakpoint);
+    },
+    hasHiddenItems() {
+      return this.hasBreakpoint && !this.isExpanded && this.items.length > this.breakpoint;
+    },
+    hasBreakpoint() {
+      return this.breakpoint > 0 && this.items.length > this.breakpoint;
+    },
+    expandText() {
+      if (!this.hasHiddenItems) {
+        return '';
+      }
+
+      const count = this.items.length - this.breakpoint;
+
+      return sprintf(__('%{count} more'), { count });
+    },
+  },
+  methods: {
+    expand() {
+      this.isExpanded = true;
+    },
+    collapse() {
+      this.isExpanded = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <user-avatar-link
+      v-for="item in visibleItems"
+      :key="item.id"
+      :link-href="item.web_url"
+      :img-src="item.avatar_url"
+      :img-alt="item.name"
+      :tooltip-text="item.name"
+      :img-size="imgSize"
+    />
+    <template v-if="hasBreakpoint">
+      <gl-button v-if="hasHiddenItems" variant="link" @click="expand"> {{ expandText }} </gl-button>
+      <gl-button v-else variant="link" @click="collapse"> {{ __('show less') }} </gl-button>
+    </template>
+  </div>
+</template>