[Improvement] Update Broken UI for "Employee/Team" Column in Project List View (#8539)

packages/ui-core/shared/src/lib/table-components/employee-with-links/employee-with-links.component.html

@@ -1,32 +1,27 @@
 <div class="main">
-	<ng-container *ngFor="let groups of employees">
-		<div *ngIf="value" class="avatar-container">
-			<div class="avatar-group">
-				<ng-container *ngFor="let employee of groups; let i = index">
-					<a
-						class="avatar"
-						*ngIf="employee?.user"
-						(click)="
-							selectEmployee(
-								employee,
-								employee.user.firstName,
-								employee.user.lastName,
-								employee.user.imageUrl
-							)
-						"
-					>
-						<img
-							class="img"
-							type="user"
-							[src]="employee.user.imageUrl"
-						/>
-						<span
-							>{{ employee.user.firstName }}
-							{{ employee.user.lastName }}</span
-						>
-					</a>
-				</ng-container>
+	<div *ngIf="value" class="avatar-container">
+		<div class="avatar-group">
+			<ng-container *ngFor="let employee of displayedEmployees">
+				<a
+					class="avatar"
+					*ngIf="employee?.user"
+					(click)="
+						selectEmployee(
+							employee,
+							employee.user.firstName,
+							employee.user.lastName,
+							employee.user.imageUrl
+						)
+					"
+				>
+					<img class="img" type="user" [src]="employee.user.imageUrl" />
+					<span>{{ employee.user.firstName }} {{ employee.user.lastName }}</span>
+				</a>
+			</ng-container>
+
+			<div *ngIf="remainingCount > 0" class="remaining-count">
+				<span>+{{ remainingCount }}</span>
 			</div>
 		</div>
-	</ng-container>
+	</div>
 </div>

packages/ui-core/shared/src/lib/table-components/employee-with-links/employee-with-links.component.scss

@@ -11,10 +11,9 @@ $radius: var(--button-rectangle-border-radius);
   height: 2.5rem;
 
   .avatar-group {
-    position: absolute;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
 
     .avatar {
       background-color: var(--gauzy-primary-background);
@@ -41,8 +40,30 @@ $radius: var(--button-rectangle-border-radius);
       &:hover {
         text-overflow: clip;
         width: fit-content;
+        z-index: 10;
       }
     }
+
+    .remaining-count {
+      background-color: #3366ff;
+      color: white;
+      border-radius: $radius;
+      padding: 5px 7px;
+      font-size: 12px;
+      font-weight: 600;
+      z-index: 2;
+      border: 2px solid #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 2rem;
+      min-width: 2rem;
+      cursor: pointer;
+
+      position: static;
+      margin-left: 0;
+      order: 999;
+    }
   }
 }
 
@@ -57,12 +78,8 @@ $radius: var(--button-rectangle-border-radius);
 }
 
 :host {
-  .avatar-group .avatar+.avatar {
+  .avatar-group .avatar + .avatar {
     @include nb-ltr(margin-left, -4rem);
     @include nb-rtl(margin-right, -4rem);
   }
 }
-
-.main {
-  width: 7rem;
-}

packages/ui-core/shared/src/lib/table-components/employee-with-links/employee-with-links.component.ts

@@ -12,45 +12,33 @@ export class EmployeeWithLinksComponent implements OnInit {
 	@Input() rowData: any;
 	@Input() value: any;
 
-	employees: any[] = [];
+	displayedEmployees: any[] = [];
+	maxDisplay: number = 5;
+	remainingCount: number = 0;
 
 	constructor(private readonly store: Store, private readonly router: Router) {}
 
 	ngOnInit(): void {
-		this.initializeGrouping();
+		this.initializeEmployees();
 	}
 
 	/**
-	 * Initializes the grouping of employees into groups of size 3.
-	 *
-	 * This function takes no parameters and modifies the `employees` property of the class.
-	 * It iterates over the `value` property of the class and groups employees into arrays of size 3.
-	 * The resulting groups are stored in the `employees` property.
+	 * Initializes the employees array with a single group of visible employees (max 3)
+	 * and calculates remaining count.
 	 *
 	 * @return {void} This function does not return anything.
 	 */
-	initializeGrouping(): void {
-		if (!this.value) {
+	initializeEmployees(): void {
+		if (!this.value || !Array.isArray(this.value)) {
 			return;
 		}
 
-		const GROUP = 3;
-		const SIZE = this.value.length;
-		let count = 0;
-		let group: any[] = [];
-
-		for (let employee of this.value) {
-			if ((2 * count - 1) % GROUP === 0) {
-				group.push(employee);
-				this.employees.push(group);
-				group = [];
-			} else {
-				group.push(employee);
-				if (SIZE - count < GROUP - 1 && SIZE - count > 0) {
-					this.employees.push(group);
-				}
-			}
-			count++;
+		if (this.value.length > this.maxDisplay) {
+			this.displayedEmployees = this.value.slice(0, this.maxDisplay);
+			this.remainingCount = this.value.length - this.maxDisplay;
+		} else {
+			this.displayedEmployees = [...this.value];
+			this.remainingCount = 0;
 		}
 	}
 
@@ -69,7 +57,6 @@ export class EmployeeWithLinksComponent implements OnInit {
 		this.store.selectedEmployee.lastName = lastName;
 		this.store.selectedEmployee.imageUrl = imageUrl;
 
-		//
 		this.navigateToEmployeeStatistics(employee.id);
 	}