Skip to content
Snippets Groups Projects

Work item rolled up count by type

Merged Deepika Guliani requested to merge 474913-hierarchy-widget-rollups-count-badge-hover into master
1 unresolved thread
Compare and Show latest version
3 files
+ 99
1
Compare changes
  • Side-by-side
  • Inline
Files
3
 
<script>
 
import { GlPopover, GlBadge, GlIcon } from '@gitlab/ui';
 
import { s__ } from '~/locale';
 
 
export default {
 
i18n: {
 
epicsClosed: s__('WorkItems|epics closed'),
 
issuesClosed: s__('WorkItems|issues closed'),
 
tasksClosed: s__('WorkItems|tasks closed'),
 
},
 
components: {
 
GlPopover,
 
GlBadge,
 
GlIcon,
 
},
 
props: {
 
rollUpCountsByType: {
 
type: Array,
 
required: true,
 
},
 
},
 
computed: {
 
totalCountAllByType() {
 
return [...this.rollUpCountsByType].reduce(
 
(total, rollUpCounts) => total + rollUpCounts.countsByState.all,
 
0,
 
);
 
},
 
epicsCountExists() {
 
return this.epicCount;
 
},
 
issuesCountExists() {
 
return this.issueCount;
 
},
 
tasksCountExists() {
 
return this.taskCount;
 
},
 
epicCount() {
 
return this.workItemTypeCount('Epic');
 
},
 
issueCount() {
 
return this.workItemTypeCount('Issue');
 
},
 
taskCount() {
 
return this.workItemTypeCount('Task');
 
},
 
},
 
methods: {
 
workItemTypeCount(workItemTypeName) {
 
return this.rollUpCountsByType.find(
 
(rollUpCount) => rollUpCount.workItemType.name === workItemTypeName,
 
);
 
},
 
},
 
};
 
</script>
 
<template>
 
<div>
 
<gl-badge id="count-id" variant="warning" class="gl-ml-2">{{ totalCountAllByType }}</gl-badge>
 
<gl-popover triggers="hover" target="count-id">
 
<div v-if="epicsCountExists">
 
<gl-icon :name="epicCount.workItemType.iconName" class="gl-mr-2" />{{ epicCount.countsByState.closed }}/{{ epicCount.countsByState.all }}
 
{{ $options.i18n.epicsClosed }}
 
</div>
 
<div v-if="issuesCountExists">
 
<gl-icon :name="issueCount.workItemType.iconName" class="gl-mr-2" />{{ issueCount.countsByState.closed }}/{{ issueCount.countsByState.all }}
 
{{ $options.i18n.issuesClosed }}
 
</div>
 
<div v-if="tasksCountExists">
 
<gl-icon :name="taskCount.workItemType.iconName" class="gl-mr-2" />{{ taskCount.countsByState.closed }}/{{ taskCount.countsByState.all }}
 
{{ $options.i18n.tasksClosed }}
 
</div>
 
</gl-popover>
 
</div>
 
</template>
Loading