added & display task creator

src/app/app.config.ts

@@ -34,12 +34,12 @@ export const appConfig: ApplicationConfig = {
     importProvidersFrom(
       provideFirebaseApp(() =>
         initializeApp({
-          projectId: 'join-c681c',
+          apiKey: 'AIzaSyD2b7I0ZeveC_EgNW58-axDI4lk5ZVlCLQ',
-          appId: '1:400675412426:web:cb85b11123b40713ad5733',
+          authDomain: 'join-a5f8f.firebaseapp.com',
-          storageBucket: 'join-c681c.appspot.com',
+          projectId: 'join-a5f8f',
-          apiKey: 'AIzaSyCflbtIlrAaEW9GUrkeEnSBJdqVwtPYquQ',
+          storageBucket: 'join-a5f8f.appspot.com',
-          authDomain: 'join-c681c.firebaseapp.com',
+          messagingSenderId: '3386291568',
-          messagingSenderId: '400675412426',
+          appId: '1:3386291568:web:6e54dc4138824f24648bb5',
         })
       )
     ),

src/app/components/add-task/add-task.component.ts

@@ -16,6 +16,7 @@ import { OverlayService } from '../../services/overlay.service';
 import { empty } from 'rxjs';
 import { FormBtnComponent } from '../../shared/components/buttons/form-btn/form-btn.component';
 import { ActivatedRoute } from '@angular/router';
+import { SharedService } from '../../services/shared.service';
 
 @Component({
   selector: 'app-add-task',
@@ -43,7 +44,8 @@ export class AddTaskComponent implements OnInit {
   constructor(
     public firebaseService: FirebaseService,
     private overlayService: OverlayService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private sharedService: SharedService
   ) {}
 
   taskData: Task = {
@@ -55,6 +57,7 @@ export class AddTaskComponent implements OnInit {
     subtasksTitle: [],
     subtasksDone: [],
     assigned: [],
+    creator: this.sharedService.currentUserId,
     date: this.currentDate,
   };
 

src/app/components/board/board.component.scss

@@ -16,7 +16,7 @@ section {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  max-width: 1185px;
+  max-width: 1178px;
 }
 
 .search {
@@ -103,7 +103,7 @@ d-none {
 /*------------- HEADLINE -------------*/
 
 .content {
-  max-width: 1185px;
+  max-width: 1210px;
 }
 
 .status {

src/app/components/board/task/task.component.html

@@ -42,6 +42,11 @@
       }
       <div class="footer">
         <div class="footer-badge">
+          <span
+            class="footer-badged"
+            [style.background-color]="userBadgedColor(task.creator)"
+            >{{ userBadged(task.creator) }}</span
+          >
           @for (assigned of task.assigned; track assigned) {
           <span
             class="footer-badged"

src/app/interfaces/task.interface.ts

@@ -8,5 +8,6 @@ export interface Task {
   subtasksTitle: string[];
   subtasksDone: boolean[];
   assigned: string[];
+  creator: string;
   date: string;
 }

src/app/shared/components/overlay/task-overlay/task-overlay.component.html

@@ -41,6 +41,51 @@
         class="priority-bg prio-{{ getTaskData(overlayData)[0].priority }}"
       ></div>
     </div>
+    <div class="creator">
+      <p>Creator:</p>
+      <div class="users">
+        <div
+          class="circle"
+          [ngStyle]="{
+            'background-color': firebaseService.getUserDetails(
+              getTaskData(overlayData)[0].creator,
+              'color'
+            )
+          }"
+        >
+          <div class="initials">
+            {{
+              firebaseService.getUserDetails(
+                getTaskData(overlayData)[0].creator,
+                "initials"
+              )
+            }}
+          </div>
+        </div>
+        <div class="details">
+          <div class="name">
+            <p>
+              {{
+                firebaseService.getUserDetails(
+                  getTaskData(overlayData)[0].creator,
+                  "firstName"
+                )
+              }}
+            </p>
+            <span>&nbsp;</span>
+            <p class="last-name">
+              {{
+                firebaseService.getUserDetails(
+                  getTaskData(overlayData)[0].creator,
+                  "lastName"
+                )
+              }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    @if (getTaskData(overlayData)[0].assigned.length > 0) {
     <div class="assigned">
       <p>Assigned to:</p>
       @for (user of getTaskData(overlayData)[0].assigned; track user) {
@@ -60,7 +105,7 @@
             <p>
               {{ firebaseService.getUserDetails(user, "firstName") }}
             </p>
-            <span>,&nbsp;</span>
+            <span>&nbsp;</span>
             <p class="last-name">
               {{ firebaseService.getUserDetails(user, "lastName") }}
             </p>
@@ -69,6 +114,7 @@
       </div>
       }
     </div>
+    } @if (getTaskData(overlayData)[0].subtasksTitle.length > 0) {
     <div class="subtasks">
       <p>Subtasks:</p>
       @for (subtask of getTaskData(overlayData)[0].subtasksTitle; track subtask;
@@ -96,6 +142,7 @@
       </div>
       }
     </div>
+    }
   </div>
   <div class="btns">
     <div class="btn btn-delete" (click)="deleteTask(overlayData)">

src/app/shared/components/overlay/task-overlay/task-overlay.component.scss

@@ -40,7 +40,7 @@
 }
 
 .headline {
-  font-size: 61px;
+  font-size: 46px;
   font-weight: 700;
   width: 100%;
   word-wrap: break-word;
@@ -108,9 +108,10 @@
   background-image: url(./../../../../../assets/img/low.svg);
 }
 
-// ASSIGNED
+// ASSIGNED, CREATOR
 
-.assigned {
+.assigned,
+.creator {
   margin-top: 32px;
   overflow-y: auto;
   p {