item_stats.vue 1.94 KB
Newer Older
1
<script>
2 3
import icon from '~/vue_shared/components/icon.vue';
import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
4
import { ITEM_TYPE, VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE, PROJECT_VISIBILITY_TYPE } from '../constants';
5
import itemStatsValue from './item_stats_value.vue';
6 7

export default {
8 9 10 11
  components: {
    icon,
    timeAgoTooltip,
    itemStatsValue,
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
  },
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  computed: {
    visibilityIcon() {
      return VISIBILITY_TYPE_ICON[this.item.visibility];
    },
    visibilityTooltip() {
      if (this.item.type === ITEM_TYPE.GROUP) {
        return GROUP_VISIBILITY_TYPE[this.item.visibility];
      }
      return PROJECT_VISIBILITY_TYPE[this.item.visibility];
    },
    isProject() {
      return this.item.type === ITEM_TYPE.PROJECT;
    },
    isGroup() {
      return this.item.type === ITEM_TYPE.GROUP;
    },
  },
};
</script>

<template>
  <div class="stats">
41
    <item-stats-value
42
      v-if="isGroup"
43 44
      css-class="number-subgroups"
      icon-name="folder"
45
      :title="s__('Subgroups')"
46 47 48
      :value=item.subgroupCount
    />
    <item-stats-value
49
      v-if="isGroup"
50 51
      css-class="number-projects"
      icon-name="bookmark"
52
      :title="s__('Projects')"
53 54 55
      :value=item.projectCount
    />
    <item-stats-value
56
      v-if="isGroup"
57 58
      css-class="number-users"
      icon-name="users"
59
      :title="s__('Members')"
60 61
      :value=item.memberCount
    />
62
    <item-stats-value
63
      v-if="isProject"
64 65 66 67
      css-class="project-stars"
      icon-name="star"
      :value=item.starCount
    />
68 69 70 71
    <item-stats-value
      css-class="item-visibility"
      tooltip-placement="left"
      :icon-name="visibilityIcon"
72
      :title="visibilityTooltip"
73 74 75 76 77 78 79 80
    />
    <div
      class="last-updated"
      v-if="isProject"
    >
      <time-ago-tooltip
        tooltip-placement="bottom"
        :time="item.updatedAt"
81
      />
82
    </div>
83 84
  </div>
</template>