Implement user previews

LittleBigRefresh · Aug 29, 2024 · e0a143a · e0a143a
1 parent 07afcc4
commit e0a143a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/src/app/components/items/event.component.ts b/src/app/components/items/event.component.ts
@@ -13,6 +13,7 @@ import {DateComponent} from "../ui/info/date.component";
 import {DecimalPipe} from "@angular/common";
 import {PhotoComponent} from "./photo.component";
 import {Photo} from "../../api/types/photos/photo";
+import {UserPreviewComponent} from "./user-preview.component";
 
 @Component({
   selector: 'app-event',
@@ -24,7 +25,8 @@ import {Photo} from "../../api/types/photos/photo";
     DarkContainerComponent,
     DateComponent,
     DecimalPipe,
-    PhotoComponent
+    PhotoComponent,
+    UserPreviewComponent
   ],
   template: `
     <app-container>
@@ -106,7 +108,7 @@ import {Photo} from "../../api/types/photos/photo";
         <div class="flex gap-x-5">
           @switch (event.storedDataType) {
             @case (EventDataType.user) {
-              <app-user-link [user]="user"></app-user-link>
+              <app-user-preview [user]="user!"></app-user-preview>
             }
             @case (EventDataType.level) {
               <app-level-preview [level]="level!"></app-level-preview>

diff --git a/src/app/components/items/user-preview.component.ts b/src/app/components/items/user-preview.component.ts
@@ -0,0 +1,39 @@
+import {Component, Input} from '@angular/core';
+import {User} from "../../api/types/users/user";
+import {UserRouterLinkComponent} from "../ui/text/links/user-router-link.component";
+import {LevelAvatarComponent} from "../ui/photos/level-avatar.component";
+import {UserAvatarComponent} from "../ui/photos/user-avatar.component";
+import {DefaultPipe} from "../../pipes/default.pipe";
+import {UserStatisticsComponent} from "./user-statistics.component";
+import {UserStatusComponent} from "../ui/info/user-status.component";
+
+@Component({
+  selector: 'app-user-preview',
+  standalone: true,
+  imports: [
+    UserRouterLinkComponent,
+    LevelAvatarComponent,
+    UserAvatarComponent,
+    DefaultPipe,
+    UserStatisticsComponent,
+    UserStatusComponent
+  ],
+  template: `
+    <div class="flex gap-x-2.5 leading-none justify-center">
+      <app-user-router-link [user]="user">
+        <app-user-avatar [user]="user" [size]=72 class="align-middle"></app-user-avatar>
+      </app-user-router-link>
+      <div class="truncate grow">
+        <app-user-router-link [user]="user">
+          <p class="font-medium text-lg truncate" [title]=user.username>{{ user.username }}</p>
+        </app-user-router-link>
+
+        <app-user-statistics [stats]="user.statistics"></app-user-statistics>
+        <app-user-status [activeRoom]="user.activeRoom" [lastSeen]="user.lastLoginDate" class="block mt-2"></app-user-status>
+      </div>
+    </div>
+  `
+})
+export class UserPreviewComponent {
+  @Input({required: true}) user: User = null!;
+}
diff --git a/src/app/pages/user/user.component.html b/src/app/pages/user/user.component.html
@@ -8,7 +8,7 @@
             <br>
         </ng-container>
         <ng-container belowTitle>
-            <app-user-status [activeRoom]="user.activeRoom"></app-user-status>
+            <app-user-status [activeRoom]="user.activeRoom" [lastSeen]="user.lastLoginDate"></app-user-status>
         </ng-container>
         <app-user-statistics [stats]="user.statistics" statistics></app-user-statistics>
     </app-fancy-header>