From 3faeda13ae2e751fa646cd6a87f65eb1f6b8087d Mon Sep 17 00:00:00 2001 From: GODrums Date: Tue, 22 Oct 2024 01:08:22 +0200 Subject: [PATCH] Extract GH-Label component --- .../www1/hephaestus/admin/AdminService.java | 1 + .../www1/hephaestus/codereview/team/Team.java | 2 +- .../codereview/team/TeamService.java | 5 ++ .../www1/hephaestus/codereview/user/User.java | 6 +- .../users/table/users-table.component.html | 9 +- .../users/table/users-table.component.ts | 7 +- .../github-label/github-label.component.scss} | 0 .../ui/github-label/github-label.component.ts | 84 +++++++++++++++++++ .../ui/github-label/github-label.stories.ts | 66 +++++++++++++++ .../user/issue-card/issue-card.component.html | 13 +-- .../user/issue-card/issue-card.component.ts | 55 +----------- 11 files changed, 172 insertions(+), 76 deletions(-) rename webapp/src/app/{user/issue-card/issue-card.component.scss => ui/github-label/github-label.component.scss} (100%) create mode 100644 webapp/src/app/ui/github-label/github-label.component.ts create mode 100644 webapp/src/app/ui/github-label/github-label.stories.ts diff --git a/server/application-server/src/main/java/de/tum/in/www1/hephaestus/admin/AdminService.java b/server/application-server/src/main/java/de/tum/in/www1/hephaestus/admin/AdminService.java index 0c53ba14..5eaa912b 100644 --- a/server/application-server/src/main/java/de/tum/in/www1/hephaestus/admin/AdminService.java +++ b/server/application-server/src/main/java/de/tum/in/www1/hephaestus/admin/AdminService.java @@ -96,6 +96,7 @@ public Optional addTeamToUser(String login, Long teamId) { Team team = optionalTeam.get(); User user = optionalUser.get(); team.addMember(user); + teamService.saveTeam(team); return Optional.of(new UserDTO(user.getId(), user.getLogin(), user.getEmail(), user.getName(), user.getUrl())); } } diff --git a/server/application-server/src/main/java/de/tum/in/www1/hephaestus/codereview/team/Team.java b/server/application-server/src/main/java/de/tum/in/www1/hephaestus/codereview/team/Team.java index 0eaede0f..01b6a6a3 100644 --- a/server/application-server/src/main/java/de/tum/in/www1/hephaestus/codereview/team/Team.java +++ b/server/application-server/src/main/java/de/tum/in/www1/hephaestus/codereview/team/Team.java @@ -46,6 +46,6 @@ public class Team { public void addMember(User user) { members.add(user); - // user.addTeam(this); + user.addTeam(this); } } diff --git a/server/application-server/src/main/java/de/tum/in/www1/hephaestus/codereview/team/TeamService.java b/server/application-server/src/main/java/de/tum/in/www1/hephaestus/codereview/team/TeamService.java index d29f5c1d..27fb5935 100644 --- a/server/application-server/src/main/java/de/tum/in/www1/hephaestus/codereview/team/TeamService.java +++ b/server/application-server/src/main/java/de/tum/in/www1/hephaestus/codereview/team/TeamService.java @@ -33,6 +33,11 @@ public List getAllTeams() { return teams; } + public Team saveTeam(Team team) { + logger.info("Saving team: " + team); + return teamRepository.save(team); + } + public Boolean createDefaultTeams() { logger.info("Creating default teams"); Team iris = teamRepository.save(new Team()); diff --git a/server/application-server/src/main/java/de/tum/in/www1/hephaestus/codereview/user/User.java b/server/application-server/src/main/java/de/tum/in/www1/hephaestus/codereview/user/User.java index fd292164..ee452536 100644 --- a/server/application-server/src/main/java/de/tum/in/www1/hephaestus/codereview/user/User.java +++ b/server/application-server/src/main/java/de/tum/in/www1/hephaestus/codereview/user/User.java @@ -98,7 +98,7 @@ public void addReview(PullRequestReview review) { reviews.add(review); } - // public void addTeam(Team team) { - // teams.add(team); - // } + public void addTeam(Team team) { + teams.add(team); + } } diff --git a/webapp/src/app/admin/users/table/users-table.component.html b/webapp/src/app/admin/users/table/users-table.component.html index 13ee5178..571c4aa1 100644 --- a/webapp/src/app/admin/users/table/users-table.component.html +++ b/webapp/src/app/admin/users/table/users-table.component.html @@ -65,11 +65,10 @@ Teams - - @if (this.isLoading()) { - - } @else { - {{ element.teams }} + + @for (team of element.teams; track team) { + @let label = { name: team.name, color: '69feff' }; + } diff --git a/webapp/src/app/admin/users/table/users-table.component.ts b/webapp/src/app/admin/users/table/users-table.component.ts index 7162ffc9..064f9f56 100644 --- a/webapp/src/app/admin/users/table/users-table.component.ts +++ b/webapp/src/app/admin/users/table/users-table.component.ts @@ -18,6 +18,7 @@ import { HlmSkeletonModule } from '@spartan-ng/ui-skeleton-helm'; import { debounceTime, map } from 'rxjs'; import { AdminService, TeamDTO, UserTeamsDTO } from '@app/core/modules/openapi'; import { RouterLink } from '@angular/router'; +import { GithubLabelComponent } from '@app/ui/github-label/github-label.component'; const LOADING_DATA: UserTeamsDTO[] = [ { @@ -82,7 +83,9 @@ const LOADING_TEAMS: TeamDTO[] = [ BrnSelectModule, HlmSelectModule, - HlmSkeletonModule + HlmSkeletonModule, + + GithubLabelComponent ], providers: [provideIcons({ lucideChevronDown, lucideMoreHorizontal, lucideArrowUpDown })], templateUrl: './users-table.component.html' @@ -190,7 +193,7 @@ export class AdminUsersTableComponent { this.adminService.addTeamToUser(user.login, this._selectedTeam()!.id).subscribe({ next: () => { console.log('Team added to user', user); - this.userData() + this._users() ?.find((u) => u.login === user.login) ?.teams.add(this._selectedTeam()!); }, diff --git a/webapp/src/app/user/issue-card/issue-card.component.scss b/webapp/src/app/ui/github-label/github-label.component.scss similarity index 100% rename from webapp/src/app/user/issue-card/issue-card.component.scss rename to webapp/src/app/ui/github-label/github-label.component.scss diff --git a/webapp/src/app/ui/github-label/github-label.component.ts b/webapp/src/app/ui/github-label/github-label.component.ts new file mode 100644 index 00000000..2cf36870 --- /dev/null +++ b/webapp/src/app/ui/github-label/github-label.component.ts @@ -0,0 +1,84 @@ +import { Component, computed, input } from '@angular/core'; +import type { PullRequestLabel } from '@app/core/modules/openapi'; +import { HlmSkeletonModule } from '@spartan-ng/ui-skeleton-helm'; + +@Component({ + selector: 'app-github-label', + standalone: true, + imports: [HlmSkeletonModule], + styleUrls: ['./github-label.component.scss'], + host: { + '[style.--label-r]': 'colors().r', + '[style.--label-g]': 'colors().g', + '[style.--label-b]': 'colors().b', + '[style.--label-h]': 'colors().h', + '[style.--label-s]': 'colors().s', + '[style.--label-l]': 'colors().l' + }, + template: ` + @if (isLoading()) { + + } @else { + + {{ label().name }} + + } + ` +}) +export class GithubLabelComponent { + isLoading = input(false); + label = input.required(); + + protected colors = computed(() => this.hexToRgb(this.label().color ?? 'FFFFFF')); + + hexToRgb(hex: string) { + const bigint = parseInt(hex, 16); + const r = (bigint >> 16) & 255; + const g = (bigint >> 8) & 255; + const b = bigint & 255; + + const hsl = this.rgbToHsl(r, g, b); + + return { + r: r, + g: g, + b: b, + ...hsl + }; + } + + rgbToHsl(r: number, g: number, b: number) { + r /= 255; + g /= 255; + b /= 255; + + const max = Math.max(r, g, b); + const min = Math.min(r, g, b); + let h = 0, + s = 0, + l = (max + min) / 2; + + if (max !== min) { + const d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; + } + h /= 6; + } + + h = Math.round(h * 360); + s = Math.round(s * 100); + l = Math.round(l * 100); + + return { h, s, l }; + } +} diff --git a/webapp/src/app/ui/github-label/github-label.stories.ts b/webapp/src/app/ui/github-label/github-label.stories.ts new file mode 100644 index 00000000..f3483586 --- /dev/null +++ b/webapp/src/app/ui/github-label/github-label.stories.ts @@ -0,0 +1,66 @@ +import { argsToTemplate, Meta, StoryObj } from '@storybook/angular'; +import { GithubLabelComponent } from './github-label.component'; + +type FlatArgs = { + isLoading: boolean; + name: string; + color: string; +}; + +function flatArgsToProps(args: FlatArgs) { + return { + isLoading: args.isLoading, + label: { + name: args.name, + color: args.color + } + }; +} + +const meta: Meta = { + component: GithubLabelComponent, + tags: ['autodocs'], + args: { + isLoading: false, + name: 'bug', + color: 'f00000' + }, + argTypes: { + isLoading: { + control: { + type: 'boolean' + } + }, + name: { + control: { + type: 'text' + } + }, + color: { + control: { + type: 'text' + } + } + } +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: (args) => ({ + props: flatArgsToProps(args as unknown as FlatArgs), + template: `` + }) +}; + +export const isLoading: Story = { + args: { + isLoading: true + }, + render: (args) => ({ + props: flatArgsToProps(args as unknown as FlatArgs), + template: `` + }) +}; diff --git a/webapp/src/app/user/issue-card/issue-card.component.html b/webapp/src/app/user/issue-card/issue-card.component.html index d5e22c68..2af6ebfa 100644 --- a/webapp/src/app/user/issue-card/issue-card.component.html +++ b/webapp/src/app/user/issue-card/issue-card.component.html @@ -37,18 +37,7 @@ @if (!isLoading()) {
@for (label of pullRequestLabels(); track label.name) { - @let labelColors = hexToRgb(label.color ?? 'FFFFFF'); - - {{ label.name }} - + }
} diff --git a/webapp/src/app/user/issue-card/issue-card.component.ts b/webapp/src/app/user/issue-card/issue-card.component.ts index 80bf1930..49ed96c9 100644 --- a/webapp/src/app/user/issue-card/issue-card.component.ts +++ b/webapp/src/app/user/issue-card/issue-card.component.ts @@ -4,14 +4,14 @@ import { NgIcon } from '@ng-icons/core'; import { octCheck, octComment, octFileDiff, octGitPullRequest, octGitPullRequestClosed, octX } from '@ng-icons/octicons'; import { HlmCardModule } from '@spartan-ng/ui-card-helm'; import { HlmSkeletonComponent } from '@spartan-ng/ui-skeleton-helm'; +import { GithubLabelComponent } from '@app/ui/github-label/github-label.component'; import dayjs from 'dayjs'; import { cn } from '@app/utils'; @Component({ selector: 'app-issue-card', templateUrl: './issue-card.component.html', - imports: [NgIcon, HlmCardModule, HlmSkeletonComponent], - styleUrls: ['./issue-card.component.scss'], + imports: [NgIcon, HlmCardModule, HlmSkeletonComponent, GithubLabelComponent], standalone: true }) export class IssueCardComponent { @@ -37,55 +37,4 @@ export class IssueCardComponent { displayCreated = computed(() => dayjs(this.createdAt())); displayTitle = computed(() => (this.title() ?? '').replace(/`([^`]+)`/g, '$1')); computedClass = computed(() => cn('w-72', !this.isLoading() ? 'hover:bg-accent/50 cursor-pointer' : '', this.class())); - - hexToRgb(hex: string) { - const bigint = parseInt(hex, 16); - const r = (bigint >> 16) & 255; - const g = (bigint >> 8) & 255; - const b = bigint & 255; - - const hsl = this.rgbToHsl(r, g, b); - - return { - r: r, - g: g, - b: b, - ...hsl - }; - } - - rgbToHsl(r: number, g: number, b: number) { - r /= 255; - g /= 255; - b /= 255; - - const max = Math.max(r, g, b); - const min = Math.min(r, g, b); - let h = 0, - s = 0, - l = (max + min) / 2; - - if (max !== min) { - const d = max - min; - s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - switch (max) { - case r: - h = (g - b) / d + (g < b ? 6 : 0); - break; - case g: - h = (b - r) / d + 2; - break; - case b: - h = (r - g) / d + 4; - break; - } - h /= 6; - } - - h = Math.round(h * 360); - s = Math.round(s * 100); - l = Math.round(l * 100); - - return { h, s, l }; - } }