Added member profile #130

kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html

@@ -70,6 +70,18 @@
             </div>
           </th>
 
+          <th class="table-header-small-dropdown">
+            <div class="table-header-label">
+              <div class="table-header-text">{{'common.created_at' | translate}}</div>
+            </div>
+          </th>
+
+          <th class="table-header-small-dropdown">
+            <div class="table-header-label">
+              <div class="table-header-text">{{'common.modified_at' | translate}}</div>
+            </div>
+          </th>
+
           <th class="table-header-actions">
             <div class="table-header-label">
               <div class="table-header-text">{{'admin.auth_users.headers.actions' | translate}}</div>
@@ -177,7 +189,7 @@
           <td>
             <p-cellEditor>
               <ng-template pTemplate="input">
-                {{user.createdAt}}
+                {{user.createdAt | date:'dd.MM.yy HH:mm'}}
               </ng-template>
               <ng-template pTemplate="output">
                 {{user.createdAt | date:'dd.MM.yy HH:mm'}}
@@ -187,7 +199,7 @@
           <td>
             <p-cellEditor>
               <ng-template pTemplate="input">
-                {{user.modifiedAt}}
+                {{user.modifiedAt | date:'dd.MM.yy HH:mm'}}
               </ng-template>
               <ng-template pTemplate="output">
                 {{user.modifiedAt | date:'dd.MM.yy HH:mm'}}

kdb-web/src/app/modules/shared/pipes/bool.pipe.ts

@@ -10,11 +10,15 @@ export class BoolPipe implements PipeTransform {
     private translate: TranslateService
   ) {}
 
-  transform(value: boolean): string {
-    if (value === true) {
+  transform(value?: boolean): string {
+    if (value === undefined || value === null) {
+      return '';
+    }
+
+    if (value) {
       return this.translate.instant('common.bool_as_string.true');
     }
-  
+
     return this.translate.instant('common.bool_as_string.false');
   }
 

kdb-web/src/app/modules/view/server/members/members.component.ts

@@ -10,7 +10,7 @@ import { LazyLoadEvent, MenuItem } from "primeng/api";
 import { Table } from "primeng/table";
 import { User, UserFilter } from "../../../../models/data/user.model";
 import { Queries } from "../../../../models/graphql/queries.model";
-import { LevelListQuery, Query, UserListQuery } from "../../../../models/graphql/query.model";
+import { LevelListQuery, UserListQuery } from "../../../../models/graphql/query.model";
 import { DataService } from "../../../../services/data/data.service";
 import { Page } from "../../../../models/graphql/filter/page.model";
 import { Sort, SortDirection } from "../../../../models/graphql/filter/sort.model";
@@ -18,8 +18,7 @@ import { SidebarService } from "../../../../services/sidebar/sidebar.service";
 import { Mutations } from "../../../../models/graphql/mutations.model";
 import { throwError } from "rxjs";
 import { UpdateUserMutationResult } from "../../../../models/graphql/result.model";
-import { Server } from "../../../../models/data/server.model";
-import { ActivatedRoute, Router } from "@angular/router";
+import { ActivatedRoute } from "@angular/router";
 
 @Component({
   selector: "app-members",
@@ -88,30 +87,11 @@ export class MembersComponent {
     private data: DataService,
     private sidebar: SidebarService,
     private route: ActivatedRoute,
-    private router: Router,
   ) {
   }
 
   ngOnInit(): void {
-
-    this.spinner.showSpinner();
-    if (!this.route.snapshot.params["serverId"]) {
-      this.spinner.hideSpinner();
-      this.router.navigate(['/dashboard']);
-      return;
-    }
-
-    this.data.query<Server>(Queries.serversQuery, {
-        filter: { id: this.route.snapshot.params["serverId"] }
-      },
-      function(data: Query) {
-        return data.servers.length > 0 ? data.servers[0] : null;
-      }
-    ).subscribe(server => {
-      this.sidebar.setServer(server);
-      this.spinner.hideSpinner();
-    });
-
+    this.data.getServerFromRoute(this.route);
 
     this.spinner.showSpinner();
     this.data.query<LevelListQuery>(Queries.levelQuery, {

kdb-web/src/app/modules/view/server/profile/profile.component.html

@@ -1 +1,115 @@
-<p>profile works!</p>
+<h1>
+  {{'view.server.profile.header' | translate}}
+</h1>
+<div class="content-wrapper">
+  <div class="content-header">
+    <h2>
+      {{user.name}}
+    </h2>
+  </div>
+
+  <div class="content">
+    <div class="content-row">
+      <div class="content-column">
+        <div class="content-data-name">{{'view.server.profile.id' | translate}}:</div>
+        <div class="content-data-value">{{user.id}}</div>
+      </div>
+      <div class="content-column">
+        <div class="content-data-name">{{'view.server.profile.discord_id' | translate}}:</div>
+        <div class="content-data-value">{{user.discordId}}</div>
+      </div>
+    </div>
+
+    <div class="content-row">
+      <div class="content-column">
+        <div class="content-data-name">{{'view.server.profile.name' | translate}}:</div>
+        <div class="content-data-value">{{user.name}}</div>
+      </div>
+    </div>
+
+    <div class="content-row">
+      <div class="content-column">
+        <div class="content-data-name">{{'view.server.profile.xp' | translate}}:</div>
+        <div class="content-data-value">{{user.xp}}</div>
+      </div>
+    </div>
+
+    <div class="content-row">
+      <div class="content-column">
+        <div class="content-data-name">{{'view.server.profile.ontime' | translate}}:</div>
+        <div class="content-data-value">{{user.ontime}}</div>
+      </div>
+    </div>
+
+    <div class="content-row">
+      <div class="content-column">
+        <div class="content-data-name">{{'view.server.profile.level' | translate}}:</div>
+        <div class="content-data-value">{{user.level?.name}}</div>
+      </div>
+    </div>
+
+    <div class="content-row">
+      <div class="content-column">
+        <div class="content-data-name">{{'view.server.profile.left_server' | translate}}:</div>
+        <div class="content-data-value">{{user.leftServer | bool}}</div>
+      </div>
+    </div>
+
+    <div class="content-row">
+      <div class="content-column">
+        <div class="content-data-name">{{'common.created_at' | translate}}:</div>
+        <div class="content-data-value">{{user.createdAt | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+      </div>
+    </div>
+
+    <div class="content-row">
+      <div class="content-column">
+        <div class="content-data-name">{{'common.modified_at' | translate}}:</div>
+        <div class="content-data-value">{{user.modifiedAt | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+      </div>
+    </div>
+
+    <div class="content-divider"></div>
+    <div class="content-row">
+      <h3>{{'view.server.profile.joined_voice_channel.header' | translate}}</h3>
+    </div>
+
+    <div *ngFor="let join of user.joinedVoiceChannels;">
+      <div class="content-row">
+        <div class="content-column">
+          <div class="content-data-name">{{'view.server.profile.joined_voice_channel.time' | translate}}:</div>
+          <div class="content-data-value">{{join.time}} {{'general.hours' | translate}}</div>
+        </div>
+
+        <div class="content-column">
+          <div class="content-data-name">{{'view.server.profile.joined_voice_channel.joined_at' | translate}}:</div>
+          <div class="content-data-value">{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+        </div>
+
+        <div class="content-column">
+          <div class="content-data-name">{{'view.server.profile.joined_voice_channel.leaved_at' | translate}}:</div>
+          <div class="content-data-value">{{join.leavedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="content-divider"></div>
+    <div class="content-row">
+      <h3>{{'view.server.profile.joined_server.header' | translate}}</h3>
+    </div>
+
+    <div *ngFor="let join of user.joinedServers;">
+      <div class="content-row">
+        <div class="content-column">
+          <div class="content-data-name">{{'view.server.profile.joined_server.joined_at' | translate}}:</div>
+          <div class="content-data-value">{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+        </div>
+
+        <div class="content-column">
+          <div class="content-data-name">{{'view.server.profile.joined_server.leaved_at' | translate}}:</div>
+          <div class="content-data-value">{{join.leavedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

kdb-web/src/app/modules/view/server/profile/profile.component.ts

@@ -1,11 +1,10 @@
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-import { Server } from "../../../../models/data/server.model";
 import { Queries } from "../../../../models/graphql/queries.model";
-import { Query } from "../../../../models/graphql/query.model";
+import { UserListQuery } from "../../../../models/graphql/query.model";
 import { SpinnerService } from "../../../../services/spinner/spinner.service";
 import { DataService } from "../../../../services/data/data.service";
-import { SidebarService } from "../../../../services/sidebar/sidebar.service";
+import { User } from "../../../../models/data/user.model";
 
 @Component({
   selector: "app-profile",
@@ -14,31 +13,38 @@ import { SidebarService } from "../../../../services/sidebar/sidebar.service";
 })
 export class ProfileComponent implements OnInit {
 
+  user!: User;
+
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     private spinner: SpinnerService,
-    private data: DataService,
-    private sidebar: SidebarService
+    private data: DataService
   ) {
   }
 
   ngOnInit() {
+    this.data.getServerFromRoute(this.route);
+
     this.spinner.showSpinner();
-    if (!this.route.snapshot.params["serverId"]) {
+    if (!this.route.snapshot.params["memberId"]) {
       this.spinner.hideSpinner();
-      this.router.navigate(['/dashboard']);
+      this.router.navigate(["/dashboard"]);
       return;
     }
 
-    this.data.query<Server>(Queries.serversQuery, {
-        filter: { id: this.route.snapshot.params["serverId"] }
+    this.data.query<User>(Queries.singleUserQuery, {
+        filter: {
+          id: this.route.snapshot.params["memberId"],
+          leftServer: false
+        }
       },
-      function(data: Query) {
-        return data.servers.length > 0 ? data.servers[0] : null;
+      function(data: UserListQuery) {
+        return data.users.length > 0 ? data.users[0] : null;
       }
-    ).subscribe(server => {
-      this.sidebar.setServer(server);
+    ).subscribe(user => {
+      this.user = user;
+      console.log(this.user);
       this.spinner.hideSpinner();
     });
   }

kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.ts

@@ -3,8 +3,6 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { Server } from "src/app/models/data/server.model";
 import { DataService } from "src/app/services/data/data.service";
 import { SpinnerService } from "src/app/services/spinner/spinner.service";
-import { Queries } from "../../../../models/graphql/queries.model";
-import { Query } from "../../../../models/graphql/query.model";
 import { SidebarService } from "../../../../services/sidebar/sidebar.service";
 
 @Component({
@@ -27,23 +25,13 @@ export class ServerDashboardComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.spinner.showSpinner();
-    if (!this.route.snapshot.params["serverId"]) {
-      this.spinner.hideSpinner();
-      this.router.navigate(['/dashboard']);
-      return;
-    }
+    this.data.getServerFromRoute(this.route);
 
-    this.data.query<Server>(Queries.serversQuery, {
-        filter: { id: this.route.snapshot.params["serverId"] }
-      },
-      function(data: Query) {
-        return data.servers.length > 0 ? data.servers[0] : null;
+    this.sidebar.server$.subscribe(server => {
+      if (!server) {
+        return;
       }
-    ).subscribe(server => {
       this.server = server;
-      this.sidebar.setServer(server);
-      this.spinner.hideSpinner();
     });
   }
 

kdb-web/src/app/modules/view/server/server-routing.module.ts

@@ -6,8 +6,8 @@ import { MembersComponent } from "./members/members.component";
 
 const routes: Routes = [
   { path: '', component: ServerDashboardComponent },
-  { path: 'profile', component: ProfileComponent },
   { path: 'members', component: MembersComponent },
+  { path: 'members/:memberId', component: ProfileComponent },
 ];
 
 @NgModule({