diff options
Diffstat (limited to 'app/assets/javascripts/work_items_hierarchy/components/hierarchy.vue')
-rw-r--r-- | app/assets/javascripts/work_items_hierarchy/components/hierarchy.vue | 119 |
1 files changed, 119 insertions, 0 deletions
diff --git a/app/assets/javascripts/work_items_hierarchy/components/hierarchy.vue b/app/assets/javascripts/work_items_hierarchy/components/hierarchy.vue new file mode 100644 index 00000000000..9b81218b6e4 --- /dev/null +++ b/app/assets/javascripts/work_items_hierarchy/components/hierarchy.vue @@ -0,0 +1,119 @@ +<script> +import { GlIcon, GlBadge } from '@gitlab/ui'; + +export default { + components: { + GlIcon, + GlBadge, + }, + props: { + workItemTypes: { + type: Array, + required: true, + }, + }, + methods: { + isLastItem(index, workItem) { + const hasMoreThanOneItem = workItem.nestedTypes.length > 1; + const isLastItemInArray = index === workItem.nestedTypes.length - 1; + + return isLastItemInArray && hasMoreThanOneItem; + }, + nestedWorkItemTypeMargin(index, workItem) { + const isLastItemInArray = index === workItem.nestedTypes.length - 1; + const hasMoreThanOneItem = workItem.nestedTypes.length > 1; + + if (isLastItemInArray && hasMoreThanOneItem) { + return 'gl-ml-0'; + } + + return 'gl-ml-6'; + }, + }, +}; +</script> +<template> + <div> + <div + v-for="workItem in workItemTypes" + :key="workItem.id" + class="gl-mb-3" + :class="{ flex: !workItem.available }" + > + <span + class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal" + data-testid="work-item-wrapper" + > + <span + :style="{ + backgroundColor: workItem.backgroundColor, + color: workItem.color, + }" + class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper" + > + <gl-icon :size="workItem.iconSize || 12" :name="workItem.icon" /> + </span> + + {{ workItem.title }} + </span> + + <gl-badge + v-if="!workItem.available" + variant="info" + icon="license" + size="sm" + class="gl-ml-3 gl-align-self-center" + >{{ workItem.license }}</gl-badge + > + + <div v-if="workItem.nestedTypes" :class="{ 'gl-relative': workItem.nestedTypes.length > 1 }"> + <svg + v-if="workItem.nestedTypes.length > 1" + class="hierarchy-rounded-arrow-tail gl-text-gray-400" + data-testid="hierarchy-rounded-arrow-tail" + width="2" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <line + x1="0.75" + y1="1" + x2="0.75" + y2="100%" + stroke="currentColor" + stroke-width="1.5" + stroke-linecap="round" + /> + </svg> + <template v-for="(nestedWorkItem, index) in workItem.nestedTypes"> + <div :key="nestedWorkItem.id" class="gl-display-block gl-mt-2 gl-ml-6"> + <gl-icon name="arrow-down" class="gl-text-gray-400" /> + </div> + <gl-icon + v-if="isLastItem(index, workItem)" + :key="nestedWorkItem.id" + name="level-up" + class="gl-text-gray-400 gl-ml-2 hierarchy-rounded-arrow" + /> + <span + :key="nestedWorkItem.id" + class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-mt-2 gl-line-height-normal" + :class="nestedWorkItemTypeMargin(index, workItem)" + > + <span + :style="{ + backgroundColor: nestedWorkItem.backgroundColor, + color: nestedWorkItem.color, + }" + class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper" + > + <gl-icon :size="nestedWorkItem.iconSize || 12" :name="nestedWorkItem.icon" /> + </span> + + {{ nestedWorkItem.title }} + </span> + </template> + </div> + </div> + </div> +</template> |