From 25eeee8e6bfc32b2ec8860132e61d2f73d6b2291 Mon Sep 17 00:00:00 2001
From: sofiia koval <kovalsofiia1@gmail.com>
Date: Thu, 7 Nov 2024 10:55:31 +0200
Subject: [PATCH 1/4] bugfix: #7743

---
 .../profile-dashboard.component.html                 | 12 +++---------
 .../profile-dashboard.component.scss                 |  4 ++++
 .../profile-dashboard/profile-dashboard.component.ts |  9 +--------
 3 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.html b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.html
index a8c0365b9f..0a1de6e642 100644
--- a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.html
+++ b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.html
@@ -100,24 +100,18 @@
         <hr />
         <div *ngIf="!loading; else spinner">
           <div class="in-progress">
-            <div class="in-progress header" id="my-events" *ngIf="!isFavoriteBtnClicked">
+            <div class="in-progress header" id="my-events">
               <div class="buttons-wrapper">
                 <a [routerLink]="['/events/create-event']">
                   <div id="create-button-event" class="secondary-global-button s-btn">
                     <span>{{ 'profile.dashboard.add-event' | translate }}</span>
                   </div>
                 </a>
-                <div class="favourites" (click)="goToFavorites()">
-                  <span class="flag-active"></span>
+                <div class="favourites" (click)="toggleFavorites()">
+                  <span [ngClass]="isFavoriteBtnClicked ? 'flag-active' : 'flag'"></span>
                 </div>
               </div>
             </div>
-            <div *ngIf="isFavoriteBtnClicked" class="in-progress header">
-              <div class="button-arrow" (click)="escapeFromFavorites()">
-                <img [src]="images.arrowLeft" aria-hidden="true" alt="arrow" class="button-arrow-img" />
-                <div class="edit-events">{{ 'create-event.back' | translate }}</div>
-              </div>
-            </div>
             <div class="events-filter">
               <div class="events-types">
                 <mat-checkbox [(ngModel)]="isOnlineChecked" (ngModelChange)="onCheckboxChange()" color="primary" class="checkbox">
diff --git a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.scss b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.scss
index 374f883acb..618243fa59 100644
--- a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.scss
+++ b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.scss
@@ -48,6 +48,10 @@ a {
           transition: all 0.3s;
         }
 
+        .flag {
+          background: url('/assets/events-icons/bookmark-set.png') no-repeat center;
+        }
+
         .flag-active {
           background: url('/assets/events-icons/bookmark-active.png') no-repeat center;
         }
diff --git a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.ts b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.ts
index d6ad754d11..ea5ebd6876 100644
--- a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.ts
+++ b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.ts
@@ -134,20 +134,13 @@ export class ProfileDashboardComponent implements OnInit, OnDestroy {
     this.hasNextPageOfEvents = true;
   }
 
-  escapeFromFavorites(): void {
+  toggleFavorites(): void {
     this.isFavoriteBtnClicked = !this.isFavoriteBtnClicked;
 
     this.cleanState();
     this.getUserEvents();
   }
 
-  goToFavorites(): void {
-    this.isFavoriteBtnClicked = true;
-
-    this.cleanState();
-    this.getUserEvents();
-  }
-
   initGetUserEvents(): void {
     this.eventService
       .getEvents(this.getHttpParams(0))

From 5a512269c1df0a1aaea357031bc821ce06d7d56d Mon Sep 17 00:00:00 2001
From: sofiia koval <kovalsofiia1@gmail.com>
Date: Thu, 7 Nov 2024 11:40:42 +0200
Subject: [PATCH 2/4] fix: filters placement

---
 .../profile-dashboard.component.html          | 43 +++++++++++--------
 .../profile-dashboard.component.scss          | 20 ++++++---
 .../profile-dashboard.component.ts            |  1 +
 src/assets/i18n/en.json                       |  1 +
 src/assets/i18n/ua.json                       |  1 +
 5 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.html b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.html
index 0a1de6e642..d00ad5dc8b 100644
--- a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.html
+++ b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.html
@@ -99,27 +99,36 @@
       <mat-tab label="{{ 'homepage.events.my-space.tag-title' | translate }}">
         <hr />
         <div *ngIf="!loading; else spinner">
-          <div class="in-progress">
-            <div class="in-progress header" id="my-events">
-              <div class="buttons-wrapper">
-                <a [routerLink]="['/events/create-event']">
-                  <div id="create-button-event" class="secondary-global-button s-btn">
-                    <span>{{ 'profile.dashboard.add-event' | translate }}</span>
+          <div class="header">
+            <div class="in-progress">
+              <p>
+                <app-set-count [remainingCount]="totalEvents" [tabName]="'news'">
+                  {{ (isFavoriteBtnClicked ? 'profile.dashboard.saved-events' : 'profile.dashboard.my-events') | translate }} <br />
+                </app-set-count>
+              </p>
+              <div class="in-progress" id="my-events">
+                <div class="buttons-wrapper">
+                  <a [routerLink]="['/events/create-event']">
+                    <div id="create-button-event" class="secondary-global-button s-btn">
+                      <span>{{ 'profile.dashboard.add-event' | translate }}</span>
+                    </div>
+                  </a>
+                  <div class="favourites" (click)="toggleFavorites()">
+                    <span [ngClass]="isFavoriteBtnClicked ? 'flag-active' : 'flag'"></span>
                   </div>
-                </a>
-                <div class="favourites" (click)="toggleFavorites()">
-                  <span [ngClass]="isFavoriteBtnClicked ? 'flag-active' : 'flag'"></span>
                 </div>
               </div>
             </div>
-            <div class="events-filter">
-              <div class="events-types">
-                <mat-checkbox [(ngModel)]="isOnlineChecked" (ngModelChange)="onCheckboxChange()" color="primary" class="checkbox">
-                  {{ 'homepage.events.my-space.event-type-online' | translate }}
-                </mat-checkbox>
-                <mat-checkbox [(ngModel)]="isOfflineChecked" (ngModelChange)="onCheckboxChange()" color="primary" class="checkbox"
-                  >{{ 'homepage.events.my-space.event-type-offline' | translate }}
-                </mat-checkbox>
+            <div class="in-progress justify-end">
+              <div class="events-filter">
+                <div class="events-types">
+                  <mat-checkbox [(ngModel)]="isOnlineChecked" (ngModelChange)="onCheckboxChange()" color="primary" class="checkbox">
+                    {{ 'homepage.events.my-space.event-type-online' | translate }}
+                  </mat-checkbox>
+                  <mat-checkbox [(ngModel)]="isOfflineChecked" (ngModelChange)="onCheckboxChange()" color="primary" class="checkbox"
+                    >{{ 'homepage.events.my-space.event-type-offline' | translate }}
+                  </mat-checkbox>
+                </div>
               </div>
             </div>
           </div>
diff --git a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.scss b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.scss
index 618243fa59..374dbabc1e 100644
--- a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.scss
+++ b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.scss
@@ -18,6 +18,7 @@ a {
     font-size: 16px;
     line-height: 24px;
     letter-spacing: 0.01em;
+    margin: 24px 0;
 
     p {
       color: var(--primary-dark-grey);
@@ -29,9 +30,9 @@ a {
       align-items: center;
 
       .favourites {
-        margin: 0 10px;
-        width: 40px;
-        height: 40px;
+        margin-left: 10px;
+        width: 36px;
+        height: 36px;
         background-color: var(--primary-white);
         border-radius: 5px;
         display: flex;
@@ -61,10 +62,17 @@ a {
 
   .in-progress {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin: 24px 0;
-    height: 48px;
+    justify-content: space-between;
+  }
+
+  .column {
+    flex-direction: column;
+    margin-bottom: 24px;
+  }
+
+  .justify-end {
+    justify-content: end;
   }
 
   .secondary-global-button {
diff --git a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.ts b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.ts
index ea5ebd6876..1a6a81df41 100644
--- a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.ts
+++ b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.ts
@@ -180,6 +180,7 @@ export class ProfileDashboardComponent implements OnInit, OnDestroy {
           next: (res: EventResponseDto) => {
             this.eventsList.push(...res.page);
             this.eventsPage++;
+            this.totalEvents = res.totalElements;
             this.hasNextPageOfEvents = res.hasNext;
             this.isActiveEventsScroll = res.hasNext;
           },
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index cc9e583f95..655081a6c8 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1132,6 +1132,7 @@
       "my-habits": "My habits",
       "my-news": "My news",
       "my-events": "My events",
+      "saved-events": "Saved events",
       "my-articles": "My articles",
       "habits-inprogress": "In progress",
       "add-new-habit": "Add New Habit",
diff --git a/src/assets/i18n/ua.json b/src/assets/i18n/ua.json
index b84e5b8a61..7ac48741ca 100644
--- a/src/assets/i18n/ua.json
+++ b/src/assets/i18n/ua.json
@@ -1160,6 +1160,7 @@
       "my-habits": "Мої звички",
       "my-news": "Мої новини",
       "my-events": "Мої події",
+      "saved-events": "Збережені події",
       "my-tips-and-tricks": "Мої статті",
       "habits-inprogress": "У процесі",
       "add-new-habit": "Додати Нову Звичку",

From 02ced5695f74922e4340ddceb44aaea707a246e7 Mon Sep 17 00:00:00 2001
From: sofiia koval <kovalsofiia1@gmail.com>
Date: Thu, 7 Nov 2024 16:35:02 +0200
Subject: [PATCH 3/4] fix: tests

---
 .../profile-dashboard/profile-dashboard.component.spec.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.spec.ts b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.spec.ts
index 2de149ae40..6ddd8dab45 100644
--- a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.spec.ts
+++ b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.spec.ts
@@ -228,16 +228,18 @@ describe('ProfileDashboardComponent', () => {
   });
 
   it('should toggle isFavoriteBtnClicked property on escapeFromFavorites method', () => {
+    component.isFavoriteBtnClicked = false;
     expect(component.isFavoriteBtnClicked).toBeFalse();
-    component.escapeFromFavorites();
+    component.toggleFavorites();
     expect(component.isFavoriteBtnClicked).toBeTrue();
-    component.escapeFromFavorites();
+    component.toggleFavorites();
     expect(component.isFavoriteBtnClicked).toBeFalse();
   });
 
   it('should set isFavoriteBtnClicked to true and call getUserEvents when goToFavorites is called', () => {
     spyOn(component, 'getUserEvents');
-    component.goToFavorites();
+    component.isFavoriteBtnClicked = false;
+    component.toggleFavorites();
     expect(component.isFavoriteBtnClicked).toBeTrue();
     expect(component.getUserEvents).toHaveBeenCalled();
   });

From 00a38447308ea40f6c73f1bde561832b81d76856 Mon Sep 17 00:00:00 2001
From: sofiia koval <kovalsofiia1@gmail.com>
Date: Sun, 10 Nov 2024 21:29:10 +0200
Subject: [PATCH 4/4] fix: add keydown

---
 .../profile/profile-dashboard/profile-dashboard.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.html b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.html
index 2e7e24c1b1..2493e80f55 100644
--- a/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.html
+++ b/src/app/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.html
@@ -130,7 +130,7 @@
                       <span>{{ 'profile.dashboard.add-event' | translate }}</span>
                     </div>
                   </a>
-                  <div class="favourites" (click)="toggleFavorites()">
+                  <div class="favourites" (click)="toggleFavorites()" (keydown.enter)="toggleFavorites()">
                     <span [ngClass]="isFavoriteBtnClicked ? 'flag-active' : 'flag'"></span>
                   </div>
                 </div>