-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
319 additions
and
245 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <div class="flex gap-8 items-center justify-center mb-8"> | ||
| @if (isLoading()) { | ||
| <hlm-avatar variant="extralarge" class="ring-2 ring-neutral-100 dark:ring-neutral-800"> | ||
| <hlm-skeleton hlmAvatarImage class="h-full w-full rounded-full"></hlm-skeleton> | ||
| <hlm-skeleton hlmAvatarFallback class="h-full w-full rounded-full"></hlm-skeleton> | ||
| </hlm-avatar> | ||
| } @else { | ||
| <hlm-avatar variant="extralarge" class="ring-2 ring-neutral-100 dark:ring-neutral-800"> | ||
| <img [src]="userData()?.avatarUrl" [alt]="userData()?.login + '\'s avatar'" hlmAvatarImage /> | ||
| <span hlmAvatarFallback> | ||
| {{ userData()?.login?.slice(0, 2)?.toUpperCase() }} | ||
| </span> | ||
| </hlm-avatar> | ||
| } | ||
| <div class="flex flex-col gap-2"> | ||
| @if (isLoading()) { | ||
| <hlm-skeleton class="h-8 w-48"></hlm-skeleton> | ||
| <hlm-skeleton class="h-6 w-64"></hlm-skeleton> | ||
| } @else { | ||
| <h1 class="text-2xl md:text-3xl font-bold leading-6">{{ userData()?.login }}</h1> | ||
| <div> | ||
| <a | ||
| class="md:text-lg font-medium text-muted-foreground mb-1 hover:text-github-accent-foreground" | ||
| href="https://github.com/{{ userData()?.login }}" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| github.com/{{ userData()?.login }} | ||
| </a> | ||
| </div> | ||
| @if (displayFirstContribution()) { | ||
| <div class="flex items-center gap-2 text-muted-foreground font-medium text-sm md:text-base"> | ||
| <ng-icon [svg]="octClockFill" size="16" /> | ||
| Contributing since {{ displayFirstContribution() }} | ||
| </div> | ||
| } | ||
| <div class="flex items-center gap-2"> | ||
| @for (repository of userData()?.repositories; track repository) { | ||
| <hlm-tooltip> | ||
| <div hlmBtn hlmTooltipTrigger class="size-10 bg-neutral-100 dark:bg-neutral-900/80 border border-input rounded-sm p-1" [aria-describedby]="repository"> | ||
| <img [src]="getRepositoryImage(repository)" [alt]="repository" /> | ||
| </div> | ||
| <span *brnTooltipContent>{{ repository }}</span> | ||
| </hlm-tooltip> | ||
| } | ||
| </div> | ||
| } | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { Component, computed, input } from '@angular/core'; | ||
| import { NgIconComponent } from '@ng-icons/core'; | ||
| import { octClockFill } from '@ng-icons/octicons'; | ||
| import { HlmAvatarModule } from '@spartan-ng/ui-avatar-helm'; | ||
| import { HlmSkeletonModule } from '@spartan-ng/ui-skeleton-helm'; | ||
| import { HlmIconModule } from 'libs/ui/ui-icon-helm/src/index'; | ||
| import { BrnTooltipContentDirective } from '@spartan-ng/ui-tooltip-brain'; | ||
| import { HlmTooltipComponent, HlmTooltipTriggerDirective } from '@spartan-ng/ui-tooltip-helm'; | ||
| import { HlmButtonModule } from '@spartan-ng/ui-button-helm'; | ||
| import { LucideAngularModule } from 'lucide-angular'; | ||
| import dayjs from 'dayjs'; | ||
| import advancedFormat from 'dayjs/plugin/advancedFormat'; | ||
|
|
||
| dayjs.extend(advancedFormat); | ||
|
|
||
| type UserHeaderProps = { | ||
| avatarUrl: string; | ||
| login: string; | ||
| firstContribution: string; | ||
| repositories: Set<string>; | ||
| }; | ||
|
|
||
| const repoImages: { [key: string]: string } = { | ||
| Hephaestus: 'https://github.com/ls1intum/Hephaestus/raw/refs/heads/develop/docs/images/hammer.svg', | ||
| Artemis: 'https://artemis.in.tum.de/public/images/logo.png', | ||
| Athena: 'https://raw.githubusercontent.com/ls1intum/Athena/develop/playground/public/logo.png' | ||
| }; | ||
|
|
||
| @Component({ | ||
| selector: 'app-user-header', | ||
| standalone: true, | ||
| imports: [ | ||
| LucideAngularModule, | ||
| NgIconComponent, | ||
| HlmAvatarModule, | ||
| HlmSkeletonModule, | ||
| HlmIconModule, | ||
| HlmTooltipComponent, | ||
| HlmTooltipTriggerDirective, | ||
| BrnTooltipContentDirective, | ||
| HlmButtonModule | ||
| ], | ||
| templateUrl: './header.component.html' | ||
| }) | ||
| export class UserHeaderComponent { | ||
| protected octClockFill = octClockFill; | ||
|
|
||
| isLoading = input(false); | ||
| userData = input<UserHeaderProps>(); | ||
|
|
||
| displayFirstContribution = computed(() => { | ||
| if (this.userData()?.firstContribution) { | ||
| return dayjs(this.userData()?.firstContribution).format('Do [of] MMMM YYYY'); | ||
| } | ||
| return null; | ||
| }); | ||
|
|
||
| getRepositoryImage = (name: string) => (name ? repoImages[name.split('/')[1]] : null) || 'https://avatars.githubusercontent.com/u/11064260?v=4'; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import { argsToTemplate, Meta, StoryObj } from '@storybook/angular'; | ||
| import dayjs from 'dayjs'; | ||
| import { UserHeaderComponent } from './header.component'; | ||
|
|
||
| type FlatArgs = { | ||
| isLoading: boolean; | ||
| avatarUrl: string; | ||
| login: string; | ||
| firstContribution: string; | ||
| repositories: string; | ||
| }; | ||
|
|
||
| function flatArgsToProps(args: FlatArgs) { | ||
| return { | ||
| isLoading: args.isLoading, | ||
| userData: { | ||
| avatarUrl: args.avatarUrl, | ||
| login: args.login, | ||
| firstContribution: dayjs(args.firstContribution), | ||
| repositories: new Set(args.repositories.split(',').map((repo) => repo.trim())) | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| const meta: Meta<FlatArgs> = { | ||
| component: UserHeaderComponent, | ||
| tags: ['autodocs'], | ||
| args: { | ||
| isLoading: false, | ||
| avatarUrl: 'https://avatars.githubusercontent.com/u/11064260?v=4', | ||
| login: 'octocat', | ||
| firstContribution: dayjs().subtract(4, 'days').toISOString(), | ||
| repositories: 'ls1intum/Hephaestus, ls1intum/Artemis, ls1intum/Athena' | ||
| }, | ||
| argTypes: { | ||
| isLoading: { | ||
| control: { | ||
| type: 'boolean' | ||
| } | ||
| }, | ||
| firstContribution: { | ||
| control: { | ||
| type: 'date' | ||
| } | ||
| }, | ||
| avatarUrl: { | ||
| control: { | ||
| type: 'text' | ||
| } | ||
| }, | ||
| login: { | ||
| control: { | ||
| type: 'text' | ||
| } | ||
| }, | ||
| repositories: { | ||
| control: { | ||
| type: 'text' | ||
| } | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<UserHeaderComponent>; | ||
|
|
||
| export const Default: Story = { | ||
| render: (args) => ({ | ||
| props: flatArgsToProps(args as unknown as FlatArgs), | ||
| template: `<app-user-header ${argsToTemplate(flatArgsToProps(args as unknown as FlatArgs))} />` | ||
| }) | ||
| }; | ||
|
|
||
| export const IsLoading: Story = { | ||
| args: { | ||
| isLoading: true | ||
| }, | ||
| render: (args) => ({ | ||
| props: flatArgsToProps(args as unknown as FlatArgs), | ||
| template: `<app-user-header ${argsToTemplate(flatArgsToProps(args as unknown as FlatArgs))} />` | ||
| }) | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 3 additions & 3 deletions
6
webapp/src/app/user/review-activity-card/review-activity-card.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.