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] 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": "Додати Нову Звичку",