[Feat] #991 Manage collective habits with friends

src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.spec.ts

@@ -65,11 +65,13 @@ describe('AddEditCustomHabitComponent', () => {
   const habitAssignServiceMock = jasmine.createSpyObj('fakeHabitAssignService', [
     'getHabitByAssignId',
     'getAssignHabitsByPeriod',
-    'getAssignedHabits'
+    'getAssignedHabits',
+    'getFriendsTrakingSameHabitByHabitAssignId'
   ]);
   habitAssignServiceMock.getHabitByAssignId = () => of(initialState);
   habitAssignServiceMock.getAssignHabitsByPeriod = () => of([]);
   habitAssignServiceMock.getAssignedHabits = () => of([]);
+  habitServiceMock.getFriendsTrakingSameHabitByHabitAssignId = () => of([]);
 
   const routerMock: Router = jasmine.createSpyObj('router', ['navigate']);
 

src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.html

@@ -68,7 +68,11 @@ <h3>{{ 'user.habit.info' | translate }}</h3>
           </div>
         </div>
         <div class="invite-friends">
-          <app-habit-invite-friends class="invite-friends-container" [habitId]="habitId"></app-habit-invite-friends>
+          <app-habit-invite-friends
+            class="invite-friends-container"
+            [habitId]="habitId"
+            [habitAssignId]="habitAssignId"
+          ></app-habit-invite-friends>
         </div>
       </div>
     </div>

src/app/main/component/user/components/habit/add-new-habit/habit-invite-friends/habit-invite-friends-pop-up/habit-invite-friends-pop-up.component.html

@@ -24,7 +24,11 @@
 
     <ul>
       <li *ngFor="let friend of inputFriends" [class.disabled]="setFriendDisable(friend.id)">
-        <mat-checkbox [checked]="selectedFriends.includes(friend.id)" (change)="onFriendCheckboxChange(friend.id, $event.checked)">
+        <mat-checkbox
+          [checked]="selectedFriends.includes(friend.id)"
+          (change)="onFriendCheckboxChange(friend.id, $event.checked)"
+          [disabled]="setFriendDisable(friend.id)"
+        >
           <div class="friend">
             <app-user-profile-image
               [imgPath]="friend.profilePicturePath"

src/app/main/component/user/components/habit/add-new-habit/habit-invite-friends/habit-invite-friends-pop-up/habit-invite-friends-pop-up.component.spec.ts

@@ -9,7 +9,7 @@ import { Router } from '@angular/router';
 import { FRIENDS, FIRSTFRIEND, SECONDFRIEND } from '@global-user/mocks/friends-mock';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 describe('HabitInviteFriendsPopUpComponent', () => {
   let component: HabitInviteFriendsPopUpComponent;
@@ -34,7 +34,8 @@ describe('HabitInviteFriendsPopUpComponent', () => {
         { provide: LocalStorageService, useValue: localStorageServiceMock },
         { provide: Router, useValue: routerSpy },
         { provide: MatSnackBarComponent, useValue: MatSnackBarMock },
-        { provide: MAT_DIALOG_DATA, useValue: { habitId: 1 } }
+        { provide: MAT_DIALOG_DATA, useValue: { habitId: 1 } },
+        { provide: MatDialogRef, useValue: jasmine.createSpyObj('MatDialogRef', ['close']) }
       ]
     }).compileComponents();
 

src/app/main/component/user/components/habit/add-new-habit/habit-invite-friends/habit-invite-friends-pop-up/habit-invite-friends-pop-up.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { LocalStorageService } from '@global-service/localstorage/local-storage.service';
 import { FriendArrayModel, FriendModel } from '@global-user/models/friend.model';
 import { UserFriendsService } from '@global-user/services/user-friends.service';
@@ -26,10 +26,11 @@ export class HabitInviteFriendsPopUpComponent implements OnInit, OnDestroy {
   invitationSent = false;
 
   constructor(
-    private userFriendsService: UserFriendsService,
-    private localStorageService: LocalStorageService,
+    private readonly userFriendsService: UserFriendsService,
+    private readonly localStorageService: LocalStorageService,
     @Inject(MAT_DIALOG_DATA) public data: any,
-    private snackBar: MatSnackBarComponent
+    private readonly snackBar: MatSnackBarComponent,
+    private readonly dialogRef: MatDialogRef<HabitInviteFriendsPopUpComponent>
   ) {}
 
   get isAnyFriendSelected(): boolean {
@@ -81,7 +82,13 @@ export class HabitInviteFriendsPopUpComponent implements OnInit, OnDestroy {
       this.userFriendsService.inviteFriendsToHabit(this.habitId, this.selectedFriends).subscribe({
         next: () => {
           this.invitationSent = true;
-          this.setAddedFriends();
+          const updatedFriends = [
+            ...this.data.friends,
+            ...this.selectedFriends.map((id) => this.friends.find((friend) => friend.id === id))
+          ];
+
+          this.data.onFriendsUpdated(updatedFriends);
+          this.dialogRef.close();
         },
         error: (error) => {
           this.snackBar.openSnackBar('snack-bar.error.default');
@@ -91,7 +98,10 @@ export class HabitInviteFriendsPopUpComponent implements OnInit, OnDestroy {
   }
 
   setFriendDisable(friendId: number): boolean {
-    return this.userFriendsService.addedFriends?.some((addedFriend) => addedFriend.id === friendId) || this.invitationSent;
+    const isAlreadyAdded = this.data.friends?.some(({ id }) => id === friendId);
+    const isRecentlyAdded = this.userFriendsService.addedFriends?.some(({ id }) => id === friendId);
+
+    return isAlreadyAdded || this.invitationSent || isRecentlyAdded;
   }
 
   setAllFriendsDisable(): boolean {
@@ -130,15 +140,6 @@ export class HabitInviteFriendsPopUpComponent implements OnInit, OnDestroy {
     this.inputFriends = input ? this.filterFriendsByInput(input) : [...this.friends];
   }
 
-  setAddedFriends() {
-    this.selectedFriends.forEach((friendId) => {
-      const friend = this.friends.find((f) => f.id === friendId);
-      if (friend) {
-        this.userFriendsService.addedFriends.push(friend);
-      }
-    });
-  }
-
   ngOnDestroy() {
     this.destroyed$.next(true);
     this.destroyed$.complete();

src/app/main/component/user/components/habit/add-new-habit/habit-invite-friends/habit-invite-friends.component.html

@@ -3,11 +3,11 @@
     <p>{{ 'user.habit.invite.title' | translate }}</p>
   </div>
   <div class="invite-content">
-    <div *ngIf="!addedFriends.length" class="plus-circle">
+    <div *ngIf="!friends.length" class="plus-circle">
       <div class="icon-plus-grey" (click)="openInviteFriendsDialog()"></div>
     </div>
     <div class="invite-friends-box">
-      <div *ngFor="let friend of addedFriends" class="invite-friends">
+      <div *ngFor="let friend of friends.slice(0, 5); let i = index" class="invite-friends">
         <app-user-profile-image
           [imgPath]="friend.profilePicturePath"
           [firstName]="friend.name"
@@ -16,8 +16,18 @@
         >
         </app-user-profile-image>
       </div>
+      <div
+        *ngIf="friends.length"
+        class="three-dots"
+        [ngStyle]="{ left: calculateDotsPosition(friends.length) }"
+        (click)="openFriendsPopup()"
+      >
+        ...
+      </div>
     </div>
-    <div *ngIf="addedFriends.length" class="plus-circle">
+    <div *ngIf="friends.length > 5" class="more-friends">+{{ friends.length - 5 }}</div>
+
+    <div *ngIf="friends.length" class="plus-circle">
       <div class="icon-plus-green" (click)="openInviteFriendsDialog()"></div>
     </div>
   </div>

src/app/main/component/user/components/habit/add-new-habit/habit-invite-friends/habit-invite-friends.component.scss

@@ -5,6 +5,13 @@
   height: 100%;
   width: 100%;
 
+  ::ng-deep .more-friends {
+    color: var(--secondary-grey);
+    font-family: var(--secondary-font);
+    margin-left: 10px;
+    width: 10px;
+  }
+
   p {
     font-family: var(--secondary-font);
     font-style: normal;
@@ -60,6 +67,28 @@
         z-index: 1;
       }
 
+      .three-dots {
+        margin: 0;
+        font-size: 30px;
+        position: absolute;
+        top: 65%;
+        width: 30px;
+        transform: translateY(-50%);
+        cursor: pointer;
+        left: calc(80% + 60px);
+      }
+
+      .three-dots::after {
+        content: '';
+        height: 1px;
+        width: 80%;
+        background-color: var(--freinacht-black);
+        position: absolute;
+        top: 75%;
+        left: 40%;
+        transform: translateX(-50%);
+      }
+
       .invite-friends {
         display: flex;
         align-items: center;
@@ -104,11 +133,6 @@
     }
   }
 
-  .ng-star-inserted {
-    margin: 5px;
-    width: 80px;
-  }
-
   .invite-detail {
     height: 15px;
     margin: 5px 0;

src/app/main/component/user/components/habit/add-new-habit/habit-invite-friends/habit-invite-friends.component.spec.ts

@@ -0,0 +1,98 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { of } from 'rxjs';
+import { HabitService } from '@global-service/habit/habit.service';
+import { HabitInviteFriendsComponent } from './habit-invite-friends.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+describe('HabitInviteFriendsComponent', () => {
+  let component: HabitInviteFriendsComponent;
+  let fixture: ComponentFixture<HabitInviteFriendsComponent>;
+  let habitServiceMock: any;
+  let matDialogMock: any;
+
+  beforeEach(waitForAsync(() => {
+    habitServiceMock = jasmine.createSpyObj('HabitService', ['getFriendsTrakingSameHabitByHabitAssignId']);
+    matDialogMock = jasmine.createSpyObj('MatDialog', ['open']);
+
+    TestBed.configureTestingModule({
+      declarations: [HabitInviteFriendsComponent],
+      imports: [HttpClientTestingModule, MatDialogModule, TranslateModule.forRoot()],
+      providers: [
+        { provide: HabitService, useValue: habitServiceMock },
+        { provide: MatDialog, useValue: matDialogMock }
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HabitInviteFriendsComponent);
+    component = fixture.componentInstance;
+
+    matDialogMock.open.and.returnValue({
+      backdropClick: () => of({}),
+      componentInstance: {
+        data: {
+          onFriendsUpdated: jasmine.any(Function)
+        }
+      },
+      close: jasmine.createSpy('close')
+    });
+
+    fixture.detectChanges();
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('ngOnInit', () => {
+    it('should call fetchFriendsTrackingHabit', () => {
+      const spy = spyOn(component, 'fetchFriendsTrackingHabit');
+      component.ngOnInit();
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('fetchFriendsTrackingHabit', () => {
+    it('should not call the service if habitAssignId is undefined', () => {
+      component.habitAssignId = undefined;
+      component.fetchFriendsTrackingHabit();
+      expect(habitServiceMock.getFriendsTrakingSameHabitByHabitAssignId).not.toHaveBeenCalled();
+    });
+
+    it('should call the service and update friends array', () => {
+      const mockFriends = [{ id: 1, name: 'Friend 1', profilePicturePath: 'path/to/picture1.jpg' }];
+      habitServiceMock.getFriendsTrakingSameHabitByHabitAssignId.and.returnValue(of(mockFriends));
+
+      component.habitAssignId = 1001;
+      component.fetchFriendsTrackingHabit();
+      expect(habitServiceMock.getFriendsTrakingSameHabitByHabitAssignId).toHaveBeenCalledWith(1001);
+      expect(component.friends).toEqual(mockFriends);
+    });
+  });
+
+  describe('calculateDotsPosition', () => {
+    it('should return correct position based on friend count', () => {
+      expect(component.calculateDotsPosition(1)).toBe('calc(0% + 60px)');
+      expect(component.calculateDotsPosition(3)).toBe('calc(40% + 60px)');
+      expect(component.calculateDotsPosition(5)).toBe('calc(80% + 60px)');
+    });
+
+    it('should cap position at 5 friends', () => {
+      expect(component.calculateDotsPosition(10)).toBe('calc(80% + 60px)');
+    });
+  });
+
+  describe('ngOnDestroy', () => {
+    it('should complete destroyed$ subject', () => {
+      const spyNext = spyOn(component['destroyed$'], 'next');
+      const spyComplete = spyOn(component['destroyed$'], 'complete');
+
+      component.ngOnDestroy();
+      expect(spyNext).toHaveBeenCalledWith();
+      expect(spyComplete).toHaveBeenCalled();
+    });
+  });
+});