Skip to content

Commit

Permalink
Merge pull request #51 from tronghieuvuong/tvuong/metricsUI
Browse files Browse the repository at this point in the history
UI for Team Sprints Page
  • Loading branch information
tronghieuvuong authored Dec 14, 2023
2 parents 8ef3f71 + 97c3640 commit dda058f
Show file tree
Hide file tree
Showing 7 changed files with 115 additions and 23 deletions.
7 changes: 7 additions & 0 deletions apps/application-status/composables/getAllSprints.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,13 @@ export async function getAllSprints (workspaceID: string, startCursor: string, e
updatedAt
issues {
totalCount
nodes {
labels {
nodes {
name
}
}
}
}
}
}
Expand Down
3 changes: 2 additions & 1 deletion apps/application-status/data/TeamsData.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ const sprint: Sprint = {
updatedAt: '',
numberOfRelease: 0,
issues: {
totalCount: 0
totalCount: 0,
totalDefect: 0
},
scopeChange: {
totalCount: 0,
Expand Down
11 changes: 11 additions & 0 deletions apps/application-status/helper/formatDate.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export default function formatDate (inputDate: string) {
const date = new Date(inputDate)

const formattedDate = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
}).format(date)

return formattedDate
}
1 change: 1 addition & 0 deletions apps/application-status/interface/interfaces.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export interface Sprint {
numberOfRelease: number
issues: {
totalCount: number
totalDefect: number
}
scopeChange: {
totalCount: number,
Expand Down
4 changes: 3 additions & 1 deletion apps/application-status/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
<navbar />
<div class="metrics flex flex-col self-center">
<NuxtLink to="./sprints/entity">
Go
<button class="bg-button rounded-lg bg-auto w-36 h-11 text-white">
Sprints by Team
</button>
</NuxtLink>
<ul>
<li v-for="team in teams" :key="team.id">
Expand Down
104 changes: 86 additions & 18 deletions apps/application-status/pages/sprints/[team].vue
Original file line number Diff line number Diff line change
@@ -1,22 +1,81 @@
<template>
<div>
<ul>
<li v-for="team in curTeams" :key="team.id">
<NuxtLink :to="team.path">
{{ team.title }}
</NuxtLink>
</li>
</ul>
<button @click="changeEndCursor">
Next
</button>
<button @click="changeStartCursor">
Prev
</button>
<p> {{ teamName }} </p>
<pre>
{{ display }}
</pre>
<navbar />
<div class="grid justify-items-center">
<div class="flex flex-row gap-4 mt-10">
<button class="bg-button rounded-lg bg-auto w-20 h-10 text-white">
<NuxtLink to="../">
&lt; Back
</NuxtLink>
</button>
<ul class="grid grid-cols-5 gap-4">
<li v-for="team in curTeams" :key="team.id">
<NuxtLink :to="team.path">
<div v-if="team.id===boardId">
<button class="bg-button rounded-lg bg-auto w-64 h-20 text-white">
{{ team.title }}
</button>
</div>
<div v-else>
<button class="bg-secondary rounded-lg bg-auto w-64 h-20">
{{ team.title }}
</button>
</div>
</NuxtLink>
</li>
</ul>
</div>
<br>
<div class="grid grid-cols-2 gap-4">
<div v-if="display.pageInfo.hasPreviousPage">
<button class="bg-button rounded-lg bg-auto w-36 h-11 text-white" @click="changeStartCursor">
Prev
</button>
</div>
<div v-else>
<button class="bg-inactive rounded-lg bg-auto w-36 h-11" @click="changeStartCursor">
Prev
</button>
</div>
<div v-if="display.pageInfo.hasNextPage">
<button class="bg-button rounded-lg bg-auto w-36 h-11 text-white" @click="changeEndCursor">
Next
</button>
</div>
<div v-else>
<button class="bg-inactive rounded-lg bg-auto w-36 h-11" @click="changeEndCursor">
Next
</button>
</div>
</div>
<br>
<div class="grid justify-items-center">
<b class="text-5xl"> {{ teamTitle }} </b>
<b class="text-lg">Total sprints: {{ display.totalCount }}</b>
<br>
<ul>
<li v-for="sprint in display.sprints" :key="sprint.id">
<b>
{{ sprint.name }} - {{ sprint.state }}
</b>
<br>
<b>
{{ formatDate(sprint.startAt) }} - {{ formatDate(sprint.endAt) }}
</b>
<p>
Total points: {{ sprint.totalPoints }}
</p>
<p>
Total closed releases: {{ sprint.numberOfRelease }}
</p>
<p>
Total issues: {{ sprint.issues.totalCount }}
</p>
<br>
</li>
</ul>
</div>
</div>
</div>
</template>

Expand All @@ -26,6 +85,7 @@ import teams from '../../data/TeamsData'
import { PageInfo, TeamSprints } from '../../interface/interfaces'
import { getReleases } from '../../composables/getReleases'
import teamName from '../../enums/teamNames'
import formatDate from '../../helper/formatDate'
export default {
data () {
const route = useRoute()
Expand All @@ -50,14 +110,17 @@ export default {
const curTeams = teams
const boardId = ''
const keyWord = ''
const teamTitle = ''
return {
teamName,
pageInfo,
display,
prev,
curTeams,
boardId,
keyWord
keyWord,
teamTitle,
formatDate
}
},
beforeMount () {
Expand All @@ -70,18 +133,23 @@ export default {
if (this.teamName === teamName.ENTITIES) {
this.boardId = this.curTeams[0].id
this.keyWord = this.curTeams[0].keyWord
this.teamTitle = this.curTeams[0].title
} else if (this.teamName === teamName.NAMESTEAMSPACE) {
this.boardId = this.curTeams[1].id
this.keyWord = this.curTeams[1].keyWord
this.teamTitle = this.curTeams[1].title
} else if (this.teamName === teamName.ASSETS) {
this.boardId = this.curTeams[2].id
this.keyWord = this.curTeams[2].keyWord
this.teamTitle = this.curTeams[2].title
} else if (this.teamName === teamName.RELATIONSHIPS) {
this.boardId = this.curTeams[3].id
this.keyWord = this.curTeams[3].keyWord
this.teamTitle = this.curTeams[3].title
} else if (this.teamName === teamName.BTR) {
this.boardId = this.curTeams[4].id
this.keyWord = this.curTeams[4].keyWord
this.teamTitle = this.curTeams[4].title
}
}
const releases = await getReleases(this.boardId)
Expand Down
8 changes: 5 additions & 3 deletions apps/application-status/tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@ import type { Config } from 'tailwindcss'
export default <Partial<Config>>{
theme: {
extend: {
// colors: {
// primary: defaultTheme.colors.green
// },
colors: {
button: '#1669bb',
secondary: '#E4EDF7',
inactive: '#E2E8EE'
},
transitionProperty: {
flow: 'background-position'
},
Expand Down

0 comments on commit dda058f

Please sign in to comment.