diff options
Diffstat (limited to 'app/assets/javascripts/work_items/components/work_item_created_updated.vue')
-rw-r--r-- | app/assets/javascripts/work_items/components/work_item_created_updated.vue | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/app/assets/javascripts/work_items/components/work_item_created_updated.vue b/app/assets/javascripts/work_items/components/work_item_created_updated.vue new file mode 100644 index 00000000000..d1a707f2a8a --- /dev/null +++ b/app/assets/javascripts/work_items/components/work_item_created_updated.vue @@ -0,0 +1,115 @@ +<script> +import { GlAvatarLink, GlSprintf } from '@gitlab/ui'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import { getWorkItemQuery } from '../utils'; + +export default { + components: { + GlAvatarLink, + GlSprintf, + TimeAgoTooltip, + }, + props: { + fetchByIid: { + type: Boolean, + required: true, + }, + workItemId: { + type: String, + required: false, + default: null, + }, + workItemIid: { + type: String, + required: false, + default: null, + }, + fullPath: { + type: String, + required: false, + default: null, + }, + }, + computed: { + createdAt() { + return this.workItem?.createdAt || ''; + }, + updatedAt() { + return this.workItem?.updatedAt || ''; + }, + author() { + return this.workItem?.author ?? {}; + }, + authorId() { + return getIdFromGraphQLId(this.author.id); + }, + queryVariables() { + return this.fetchByIid + ? { + fullPath: this.fullPath, + iid: this.workItemIid, + } + : { + id: this.workItemId, + }; + }, + }, + apollo: { + workItem: { + query() { + return getWorkItemQuery(this.fetchByIid); + }, + variables() { + return this.queryVariables; + }, + skip() { + return !this.workItemId && !this.workItemIid; + }, + update(data) { + const workItem = this.fetchByIid ? data.workspace.workItems.nodes[0] : data.workItem; + return workItem ?? {}; + }, + }, + }, +}; +</script> + +<template> + <div class="gl-mb-3"> + <span data-testid="work-item-created"> + <gl-sprintf v-if="author.name" :message="__('Created %{timeAgo} by %{author}')"> + <template #timeAgo> + <time-ago-tooltip :time="createdAt" /> + </template> + <template #author> + <gl-avatar-link + class="js-user-link gl-text-body gl-font-weight-bold" + :title="author.name" + :data-user-id="authorId" + :href="author.webUrl" + > + {{ author.name }} + </gl-avatar-link> + </template> + </gl-sprintf> + <gl-sprintf v-else-if="createdAt" :message="__('Created %{timeAgo}')"> + <template #timeAgo> + <time-ago-tooltip :time="createdAt" /> + </template> + </gl-sprintf> + </span> + + <span + v-if="updatedAt" + class="gl-ml-5 gl-display-none gl-sm-display-inline-block" + data-testid="work-item-updated" + > + <gl-sprintf :message="__('Updated %{timeAgo}')"> + <template #timeAgo> + <time-ago-tooltip :time="updatedAt" /> + </template> + </gl-sprintf> + </span> + </div> +</template> |