From b50aa7bbd14387159aabef8e4b8a262de6b0a1aa Mon Sep 17 00:00:00 2001 From: kovalsofiia1 Date: Thu, 17 Oct 2024 11:59:38 +0300 Subject: [PATCH 01/32] fix: add divider --- .../news-list-list-view.component.html | 10 ++++++++-- .../news-list-list-view.component.scss | 13 ++++++++++++- .../news-list-gallery-view.component.html | 10 ++++++++-- .../news-list-gallery-view.component.scss | 13 ++++++++++++- 4 files changed, 40 insertions(+), 6 deletions(-) diff --git a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.html b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.html index 658146ba7b..c966f16a2e 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.html +++ b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.html @@ -3,8 +3,14 @@
-

- {{ tag }} +

+ {{ tag }} + |

diff --git a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.scss b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.scss index 8ac6ca8456..62ec360539 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.scss +++ b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.scss @@ -19,13 +19,24 @@ div { display: none; } +.tag-divider { + color: var(--primary-light-green); + height: 100%; + padding: 0 4px; + margin: 0 4px; +} + +.divider-small { + margin: 0 2px; + padding: 0; +} + .eco-news_list-tag { font-family: var(--primary-font); font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--primary-green); - margin-right: 5px; } .eco-news_list-content { diff --git a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.html b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.html index 6a1049a21f..b7161825a4 100644 --- a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.html +++ b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.html @@ -2,8 +2,14 @@ user added image
-
- {{ tag }} +
+ {{ tag }} + |
diff --git a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.scss b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.scss index 4698ffdf7a..3c092d92b4 100644 --- a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.scss +++ b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.scss @@ -23,6 +23,18 @@ div { border-top-right-radius: 4px; } + .tag-divider { + color: var(--primary-light-green); + height: 100%; + padding: 0 4px; + margin: 0 4px; + } + + .divider-small { + margin: 0 2px; + padding: 0; + } + .list-gallery-content { position: relative; margin: 8px 24px 16px; @@ -40,7 +52,6 @@ div { font-size: 14px; line-height: 20px; color: var(--primary-green); - margin-right: 16px; text-transform: uppercase; } } From 6b2eaf523d875731ffe77c0b6c7e395e74b75c46 Mon Sep 17 00:00:00 2001 From: kovalsofiia1 Date: Mon, 21 Oct 2024 16:02:31 +0300 Subject: [PATCH 02/32] feat: news page --- .../news-list-list-view.component.html | 3 + .../news-list-list-view.component.scss | 36 +++++ .../news-list-list-view.component.ts | 21 ++- .../news-list/news-list.component.html | 19 ++- .../news-list/news-list.component.scss | 95 ++++++++++++ .../news-list/news-list.component.ts | 135 ++++++++++++++++-- .../eco-news/models/eco-news-model.ts | 1 + .../eco-news/services/eco-news.service.ts | 20 ++- .../events-list/events-list.component.scss | 9 +- .../events-list-item.component.scss | 6 +- .../news-list-gallery-view.component.html | 3 + .../news-list-gallery-view.component.scss | 36 +++++ .../news-list-gallery-view.component.ts | 82 ++++++++++- src/assets/img/places/bookmark-default.svg | 2 +- 14 files changed, 441 insertions(+), 27 deletions(-) diff --git a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.html b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.html index c966f16a2e..743d4a5b78 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.html +++ b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.html @@ -1,4 +1,7 @@
+
+ +
Eco news image
diff --git a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.scss b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.scss index 62ec360539..cbb6c28a2a 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.scss +++ b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.scss @@ -13,6 +13,42 @@ div { background: #fff; margin: 0 auto; height: 200px; + position: relative; +} + +.news-flags { + width: 40px; + height: 40px; + background-color: rgba(255, 255, 255, 0.8); + position: absolute; + top: 8px; + right: 8px; + border-radius: 5px; + display: flex; + flex-direction: row; + gap: 10px; + padding: 8px; + justify-content: center; + align-items: center; + box-shadow: 0 0 1px 0 var(--primary-grey); + cursor: pointer; + + span { + display: inline-block; + width: 12px; + height: 16.5px; + transition: all 0.3s; + } + + .flag { + background: url('/assets/img/places/bookmark-default.svg') no-repeat center; + background-size: contain; + } + + .flag-active { + background: url('/assets/img/places/bookmark-set.svg') no-repeat center; + background-size: contain; + } } .eco-news_list-img { diff --git a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.ts b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.ts index 4d0eddd0a0..a6df267d10 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.ts @@ -20,6 +20,9 @@ import { Subject } from 'rxjs'; import { LanguageService } from 'src/app/main/i18n/language.service'; import { Router } from '@angular/router'; import { DatePipe } from '@angular/common'; +import { EcoNewsService } from '@eco-news-service/eco-news.service'; +import { UserOwnAuthService } from '@global-service/auth/user-own-auth.service'; +import { MatSnackBarComponent } from '@global-errors/mat-snack-bar/mat-snack-bar.component'; @Component({ selector: 'app-news-list-list-view', @@ -45,12 +48,17 @@ export class NewsListListViewComponent implements AfterViewChecked, AfterViewIni newDate; datePipe; + @Input() userId: number; + constructor( public router: Router, private renderer: Renderer2, public translate: TranslateService, public localStorageService: LocalStorageService, - private langService: LanguageService + private langService: LanguageService, + private ecoNewsService: EcoNewsService, + private userOwnAuthService: UserOwnAuthService, + private snackBar: MatSnackBarComponent ) {} ngOnInit() { this.localStorageService.languageBehaviourSubject.pipe(takeUntil(this.destroy)).subscribe((lang: string) => { @@ -86,6 +94,17 @@ export class NewsListListViewComponent implements AfterViewChecked, AfterViewIni return this.newsImage; } + changeFavouriteStatus(event?: MouseEvent) { + event.preventDefault(); + event.stopPropagation(); + + if (this.ecoNewsModel.isFavourite) { + console.log('save'); + } else { + console.log('delete'); + } + } + routeToNews(): void { this.router.navigate(['/news', this.ecoNewsModel.id]); } diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.html b/src/app/main/component/eco-news/components/news-list/news-list.component.html index 78c542a296..d84818618c 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.html +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.html @@ -3,6 +3,21 @@

{{ 'homepage.eco-news.title' | translate }}

+
+
+ + cancel search +
+
+ +
+
+ +
+
+ my-event +
+
{{ 'homepage.eco-news.create' | translate }} @@ -35,8 +50,8 @@

{{ 'homepage.eco-news.title' | translate }}

*ngFor="let data of elements" > - - + + diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.scss b/src/app/main/component/eco-news/components/news-list/news-list.component.scss index f593de22f8..11a5f2df36 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.scss +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.scss @@ -48,6 +48,101 @@ div hr { } } +.create-container { + height: 40px; + display: flex; + flex-direction: row; + align-items: center; + gap: 24px; + flex: 1; + justify-content: flex-end; + margin-right: 30px; + + @include responsivePCFirst(sm) { + flex-direction: row; + gap: 18px; + } +} + +.container-img { + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--primary-white); + border-radius: 4px; + box-shadow: 0 0 1px 0 var(--primary-grey); + cursor: pointer; + + span { + transition: all 0.3s; + } + + .search-img { + min-width: 20px; + min-height: 20px; + background: url('/assets/events-icons/search.png'); + display: inline-block; + + &:hover { + background: url('/assets/events-icons/search-hover.png'); + } + } + + .search-img-active { + min-width: 20px; + min-height: 20px; + background: url('/assets/events-icons/search-active.png'); + } + + .bookmark-img { + width: 12px; + height: 17px; + background: url('/assets/events-icons/bookmark-grey.png'); + } + + .bookmark-img-active { + width: 12px; + height: 17px; + background: url('/assets/events-icons/bookmark-active.png'); + } +} + +.container-input { + position: relative; + margin-left: 15px; + flex: 1; + + .cross-position { + position: absolute; + top: 14px; + right: 10px; + cursor: pointer; + } + + .place-input { + border: none; + border-radius: 4px; + width: 100%; + box-shadow: 0 0 1px 0 var(--primary-grey); + height: 40px; + padding: 0 25px; + + &:active, + &:focus, + &:hover { + border: 1px solid var(--primary-grey); + outline: none; + } + } +} + +.my-events-img { + width: 17px; + height: 17px; +} + .gallery-view-active { display: grid; grid-template-columns: repeat(3, 359px); diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.ts b/src/app/main/component/eco-news/components/news-list/news-list.component.ts index 3296a5d065..7cab26da9c 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.ts @@ -1,6 +1,6 @@ import { Breakpoints } from '../../../../config/breakpoints.constants'; import { Component, OnInit, OnDestroy } from '@angular/core'; -import { ReplaySubject } from 'rxjs'; +import { ReplaySubject, Subscription } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { EcoNewsService } from '@eco-news-service/eco-news.service'; import { EcoNewsModel } from '@eco-news-models/eco-news-model'; @@ -14,6 +14,8 @@ import { IEcoNewsState } from 'src/app/store/state/ecoNews.state'; import { GetEcoNewsByTagsAction, GetEcoNewsByPageAction } from 'src/app/store/actions/ecoNews.actions'; import { Router } from '@angular/router'; import { tagsListEcoNewsData } from '@eco-news-models/eco-news-consts'; +import { FormControl, Validators } from '@angular/forms'; +import { Patterns } from '@assets/patterns/patterns'; @Component({ selector: 'app-news-list', @@ -28,16 +30,23 @@ export class NewsListComponent implements OnInit, OnDestroy { remaining = 0; windowSize: number; isLoggedIn: boolean; - private currentPage: number; + userId: number; scroll: boolean; numberOfNews: number; + newsTotal: number; elementsArePresent = true; tagList: FilterModel[] = tagsListEcoNewsData; private destroyed$: ReplaySubject = new ReplaySubject(1); - + bookmarkSelected = false; hasNext = true; - + isLoading = false; + private page = 0; + noNewsMatch = false; + searchToggle = false; + searchNewsControl = new FormControl('', [Validators.maxLength(30), Validators.pattern(Patterns.NameInfoPattern)]); + private searchResultSubscription: Subscription; econews$ = this.store.select((state: IAppState): IEcoNewsState => state.ecoNewsState); + searchQuery: string; constructor( private ecoNewsService: EcoNewsService, @@ -55,11 +64,14 @@ export class NewsListComponent implements OnInit, OnDestroy { this.userOwnAuthService.getDataFromLocalStorage(); this.scroll = false; this.setLocalizedTags(); + this.localStorageService.setCurentPage('previousPage', '/news'); - this.dispatchStore(false); + // if (!this.page || !this.elements?.length) { + // this.dispatchStore(true); + // } this.econews$.subscribe((value: IEcoNewsState) => { - this.currentPage = value.pageNumber; + this.page = value.pageNumber; if (value.ecoNews) { this.elements = [...value.pages]; const data = value.ecoNews; @@ -69,7 +81,61 @@ export class NewsListComponent implements OnInit, OnDestroy { this.elementsArePresent = this.elements.length < data.totalElements; } }); - this.localStorageService.setCurentPage('previousPage', '/news'); + + this.searchNewsControl.valueChanges.subscribe((value) => { + if (this.searchResultSubscription) { + this.searchResultSubscription.unsubscribe(); + } + + this.cleanNewsList(); + if (value.trim()) { + this.searchNewsByTitle(value.trim()); + } else { + console.log('hh'); + this.dispatchStore(true); + } + }); + } + + private getNews() { + if (this.bookmarkSelected) { + this.getUserFavoriteNews(); + } else { + const searchTitle = this.searchNewsControl.value.trim(); + + if (searchTitle) { + this.searchNewsByTitle(searchTitle); + } else { + this.dispatchStore(false); + } + } + } + + private getNewsByPage() { + this.ecoNewsService.getEcoNewsListByPage(this.page, this.numberOfNews).subscribe((res) => { + this.isLoading = false; + if (res.page.length > 0) { + this.newsTotal = res.totalElements; + this.elements.push(...res.page); + this.hasNext = res.hasNext; + } else { + this.noNewsMatch = true; + } + }); + } + + private searchNewsByTitle(title: string) { + this.searchResultSubscription = this.ecoNewsService.getEcoNewsListByTitle(title, this.page, this.numberOfNews).subscribe((res) => { + this.isLoading = false; + if (res.page.length > 0) { + this.newsTotal = res.totalElements; + this.elements.push(...res.page); + this.hasNext = res.hasNext; + this.page++; + } else { + this.noNewsMatch = true; + } + }); } private setLocalizedTags(): void { @@ -92,7 +158,8 @@ export class NewsListComponent implements OnInit, OnDestroy { onScroll(): void { this.scroll = true; - this.dispatchStore(false); + // this.dispatchStore(false); + this.getNews(); } changeView(event: boolean): void { @@ -104,24 +171,66 @@ export class NewsListComponent implements OnInit, OnDestroy { this.tagsList = value; } this.hasNext = true; - this.currentPage = 0; + this.page = 0; this.dispatchStore(true); } + cancelSearch(): void { + this.searchNewsControl.value.trim() === '' ? (this.searchToggle = false) : this.searchNewsControl.setValue(''); + } + + search(): void { + this.searchToggle = !this.searchToggle; + } + + private getUserFavoriteNews(): void { + this.ecoNewsService.getUserFavoriteNews(this.page, this.numberOfNews, this.userId).subscribe((res) => { + this.isLoading = false; + this.elements.push(...res.page); + this.page++; + this.newsTotal = res.totalElements; + this.hasNext = res.hasNext; + }); + } + + showSelectedNews(): void { + this.bookmarkSelected = !this.bookmarkSelected; + if (this.bookmarkSelected) { + this.cleanNewsList(); + this.getUserFavoriteNews(); + } else { + this.cleanNewsList(); + this.getNews(); + } + } + + private cleanNewsList(): void { + this.isLoading = true; + this.hasNext = true; + this.page = 0; + this.elements = []; + this.noNewsMatch = false; + this.newsTotal = 0; + } + dispatchStore(res: boolean): void { - if (!this.hasNext || this.currentPage === undefined) { + if (!this.hasNext || this.page === undefined) { return; } const action = this.tagsList.length - ? GetEcoNewsByTagsAction({ currentPage: this.currentPage, numberOfNews: this.numberOfNews, tagsList: this.tagsList, reset: res }) - : GetEcoNewsByPageAction({ currentPage: this.currentPage, numberOfNews: this.numberOfNews, reset: res }); + ? GetEcoNewsByTagsAction({ currentPage: this.page, numberOfNews: this.numberOfNews, tagsList: this.tagsList, reset: res }) + : GetEcoNewsByPageAction({ currentPage: this.page, numberOfNews: this.numberOfNews, reset: res }); this.store.dispatch(action); + this.page++; } private checkUserSingIn(): void { - this.userOwnAuthService.credentialDataSubject.subscribe((data) => (this.isLoggedIn = data?.userId)); + this.userOwnAuthService.credentialDataSubject.subscribe((data) => { + this.isLoggedIn = data?.userId; + this.userId = data.userId; + }); } private setDefaultNumberOfNews(quantity: number): void { diff --git a/src/app/main/component/eco-news/models/eco-news-model.ts b/src/app/main/component/eco-news/models/eco-news-model.ts index f28ee61ee1..8e76fd8b9d 100644 --- a/src/app/main/component/eco-news/models/eco-news-model.ts +++ b/src/app/main/component/eco-news/models/eco-news-model.ts @@ -16,4 +16,5 @@ export interface EcoNewsModel { tagsUa: Array; title: string; countOfEcoNews?: number; + isFavourite?: boolean; } diff --git a/src/app/main/component/eco-news/services/eco-news.service.ts b/src/app/main/component/eco-news/services/eco-news.service.ts index 6f04e382cd..0262aa2b47 100644 --- a/src/app/main/component/eco-news/services/eco-news.service.ts +++ b/src/app/main/component/eco-news/services/eco-news.service.ts @@ -22,8 +22,12 @@ export class EcoNewsService implements OnDestroy { this.localStorageService.languageBehaviourSubject.pipe(takeUntil(this.destroyed$)).subscribe((language) => (this.language = language)); } - getEcoNewsListByPage(page: number, quantity: number) { - return this.http.get(`${this.backEnd}eco-news?page=${page}&size=${quantity}`); + getEcoNewsListByPage(page: number, quantity: number): Observable { + return this.http.get(`${this.backEnd}eco-news?page=${page}&size=${quantity}`); + } + + getEcoNewsListByTitle(title: string, page: number, quantity: number): Observable { + return this.http.get(`${this.backEnd}eco-news?title=${title}&page=${page}&size=${quantity}`); } getEcoNewsListByAutorId(authorId: number, page: number, quantity: number) { @@ -34,6 +38,10 @@ export class EcoNewsService implements OnDestroy { return this.http.get(`${this.backEnd}eco-news?tags=${tags}&page=${page}&size=${quantity}`); } + getUserFavoriteNews(page: number, quantity: number, userId: number): Observable { + return this.http.get(`${this.backEnd}eco-news?page=${page}&size=${quantity}&statuses=SAVED&user-id=${userId}`); + } + getNewsList(): Observable { const headers = new HttpHeaders(); headers.set('Content-type', 'application/json'); @@ -67,6 +75,14 @@ export class EcoNewsService implements OnDestroy { return this.http.delete(`${this.backEnd}eco-news/${id}`); } + addNewsToFavourites(id: number) { + return this.http.post(`${this.backEnd}eco-news/${id}/favorites`, {}); + } + + removeNewsFromFavourites(id: number) { + return this.http.delete(`${this.backEnd}eco-news/${id}/favorites`, {}); + } + ngOnDestroy(): void { this.destroyed$.next(true); this.destroyed$.complete(); diff --git a/src/app/main/component/events/components/events-list/events-list.component.scss b/src/app/main/component/events/components/events-list/events-list.component.scss index 0395ed28b3..42eeb2922e 100644 --- a/src/app/main/component/events/components/events-list/events-list.component.scss +++ b/src/app/main/component/events/components/events-list/events-list.component.scss @@ -108,7 +108,14 @@ width: 100%; box-shadow: 0 0 1px 0 var(--primary-grey); height: 40px; - padding-right: 25px; + padding: 0 25px; + + &:active, + &:focus, + &:hover { + border: 1px solid var(--primary-grey); + outline: none; + } } } diff --git a/src/app/main/component/shared/components/events-list-item/events-list-item.component.scss b/src/app/main/component/shared/components/events-list-item/events-list-item.component.scss index 06f5849e32..a46c8a80f9 100644 --- a/src/app/main/component/shared/components/events-list-item/events-list-item.component.scss +++ b/src/app/main/component/shared/components/events-list-item/events-list-item.component.scss @@ -146,17 +146,19 @@ span { display: inline-block; - width: 25px; - height: 25px; + width: 12px; + height: 16.5px; transition: all 0.3s; } .flag { background: url('/assets/img/places/bookmark-default.svg') no-repeat center; + background-size: contain; } .flag-active { background: url('/assets/img/places/bookmark-set.svg') no-repeat center; + background-size: contain; } } diff --git a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.html b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.html index b7161825a4..8539317e52 100644 --- a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.html +++ b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.html @@ -1,4 +1,7 @@
+
+ +
user added image
diff --git a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.scss b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.scss index 3c092d92b4..24007a0ed5 100644 --- a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.scss +++ b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.scss @@ -14,6 +14,7 @@ div { border-radius: 4px; display: flex; flex-direction: column; + position: relative; .list-image-content { object-fit: cover; @@ -156,6 +157,41 @@ div { } } } + + .news-flags { + width: 40px; + height: 40px; + background-color: rgba(255, 255, 255, 0.8); + position: absolute; + top: 8px; + right: 8px; + border-radius: 5px; + display: flex; + flex-direction: row; + gap: 10px; + padding: 8px; + justify-content: center; + align-items: center; + box-shadow: 0 0 1px 0 var(--primary-grey); + cursor: pointer; + + span { + display: inline-block; + width: 12px; + height: 16.5px; + transition: all 0.3s; + } + + .flag { + background: url('/assets/img/places/bookmark-default.svg') no-repeat center; + background-size: contain; + } + + .flag-active { + background: url('/assets/img/places/bookmark-set.svg') no-repeat center; + background-size: contain; + } + } } .list-gallery:hover { diff --git a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.ts b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.ts index e47b58dea9..4a9cfd3f0a 100644 --- a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.ts +++ b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.ts @@ -3,10 +3,15 @@ import { Component, Input, ChangeDetectionStrategy, ViewChild, AfterViewInit, On import { EcoNewsModel } from '@eco-news-models/eco-news-model'; import { TranslateService } from '@ngx-translate/core'; import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; -import { takeUntil } from 'rxjs/operators'; -import { Subject } from 'rxjs'; +import { take, takeUntil } from 'rxjs/operators'; +import { ReplaySubject, Subject } from 'rxjs'; import { LanguageService } from 'src/app/main/i18n/language.service'; import { DatePipe } from '@angular/common'; +import { AuthModalComponent } from '@global-auth/auth-modal/auth-modal.component'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; +import { EcoNewsService } from '@eco-news-service/eco-news.service'; +import { UserOwnAuthService } from '@global-service/auth/user-own-auth.service'; +import { MatSnackBarComponent } from '@global-errors/mat-snack-bar/mat-snack-bar.component'; @Component({ selector: 'app-news-list-gallery-view', @@ -17,6 +22,7 @@ import { DatePipe } from '@angular/common'; export class NewsListGalleryViewComponent implements AfterViewInit, OnInit, OnDestroy { @Input() ecoNewsModel: EcoNewsModel; @Input() ecoNewsText; + @Input() userId: number; @ViewChild('ecoNewsText', { static: true }) text; profileIcons = userAssignedCardsIcons; @@ -26,14 +32,20 @@ export class NewsListGalleryViewComponent implements AfterViewInit, OnInit, OnDe tags: Array; currentLang: string; private destroy: Subject = new Subject(); - + isRegistered: boolean; newDate; datePipe; - + private dialogRef: MatDialogRef; + isFavorite: boolean; + // private destroyed$: ReplaySubject = new ReplaySubject(1); constructor( public translate: TranslateService, private localStorageService: LocalStorageService, - private langService: LanguageService + private langService: LanguageService, + private dialog: MatDialog, + private ecoNewsService: EcoNewsService, + private userOwnAuthService: UserOwnAuthService, + private snackBar: MatSnackBarComponent ) {} ngOnInit() { this.localStorageService.languageBehaviourSubject.pipe(takeUntil(this.destroy)).subscribe((lang: string) => { @@ -42,6 +54,66 @@ export class NewsListGalleryViewComponent implements AfterViewInit, OnInit, OnDe this.datePipe = new DatePipe(this.currentLang); this.newDate = this.datePipe.transform(this.ecoNewsModel.creationDate, 'MMM dd, yyyy'); }); + + this.isRegistered = !!this.userId; + this.isFavorite = this.ecoNewsModel.isFavourite; + } + + changeFavouriteStatus(event?: MouseEvent) { + event?.preventDefault(); + event?.stopPropagation(); + + if (!this.isRegistered) { + this.openAuthModalWindow('sign-in'); + this.dialogRef + .afterClosed() + .pipe(take(1)) + .subscribe((result) => { + this.isRegistered = !!result; + if (this.isRegistered) { + this.changeFavouriteStatus(); + } + }); + } else { + this.isFavorite = !this.isFavorite; + if (this.isFavorite) { + this.ecoNewsService + .addNewsToFavourites(this.ecoNewsModel.id) + .pipe(takeUntil(this.destroy)) + .subscribe({ + error: () => { + this.snackBar.openSnackBar('error'); + this.isFavorite = false; + } + }); + } else { + this.ecoNewsService + .removeNewsFromFavourites(this.ecoNewsModel.id) + .pipe(takeUntil(this.destroy)) + .subscribe({ + next: () => { + // if (this.isUserAssignList) { + // this.idOfUnFavouriteEvent.emit(this.ecoNewsModel.id); + // } + }, + error: () => { + this.snackBar.openSnackBar('error'); + this.isFavorite = true; + } + }); + } + } + } + + openAuthModalWindow(page: string): void { + this.dialogRef = this.dialog.open(AuthModalComponent, { + hasBackdrop: true, + closeOnNavigation: true, + panelClass: ['custom-dialog-container'], + data: { + popUpName: page + } + }); } checkNewsImage(): string { diff --git a/src/assets/img/places/bookmark-default.svg b/src/assets/img/places/bookmark-default.svg index e67cd4458c..f0e8e0b0d9 100644 --- a/src/assets/img/places/bookmark-default.svg +++ b/src/assets/img/places/bookmark-default.svg @@ -1,3 +1,3 @@ - + From cc73c61c8c2e2e6421c6cd40b52c548d02ec2df0 Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Tue, 22 Oct 2024 12:01:30 +0300 Subject: [PATCH 03/32] feat: news favourites --- .../news-list-list-view.component.html | 3 - .../news-list-list-view.component.scss | 36 -------- .../news-list-list-view.component.ts | 21 +---- .../news-list/news-list.component.html | 10 ++- .../news-list/news-list.component.scss | 39 +++++++++ .../news-list/news-list.component.ts | 77 ++++++++++++++++- .../news-list-gallery-view.component.html | 3 - .../news-list-gallery-view.component.scss | 35 -------- .../news-list-gallery-view.component.ts | 82 ++----------------- 9 files changed, 125 insertions(+), 181 deletions(-) diff --git a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.html b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.html index 743d4a5b78..c966f16a2e 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.html +++ b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.html @@ -1,7 +1,4 @@
-
- -
Eco news image
diff --git a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.scss b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.scss index cbb6c28a2a..62ec360539 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.scss +++ b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.scss @@ -13,42 +13,6 @@ div { background: #fff; margin: 0 auto; height: 200px; - position: relative; -} - -.news-flags { - width: 40px; - height: 40px; - background-color: rgba(255, 255, 255, 0.8); - position: absolute; - top: 8px; - right: 8px; - border-radius: 5px; - display: flex; - flex-direction: row; - gap: 10px; - padding: 8px; - justify-content: center; - align-items: center; - box-shadow: 0 0 1px 0 var(--primary-grey); - cursor: pointer; - - span { - display: inline-block; - width: 12px; - height: 16.5px; - transition: all 0.3s; - } - - .flag { - background: url('/assets/img/places/bookmark-default.svg') no-repeat center; - background-size: contain; - } - - .flag-active { - background: url('/assets/img/places/bookmark-set.svg') no-repeat center; - background-size: contain; - } } .eco-news_list-img { diff --git a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.ts b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.ts index a6df267d10..4d0eddd0a0 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.ts @@ -20,9 +20,6 @@ import { Subject } from 'rxjs'; import { LanguageService } from 'src/app/main/i18n/language.service'; import { Router } from '@angular/router'; import { DatePipe } from '@angular/common'; -import { EcoNewsService } from '@eco-news-service/eco-news.service'; -import { UserOwnAuthService } from '@global-service/auth/user-own-auth.service'; -import { MatSnackBarComponent } from '@global-errors/mat-snack-bar/mat-snack-bar.component'; @Component({ selector: 'app-news-list-list-view', @@ -48,17 +45,12 @@ export class NewsListListViewComponent implements AfterViewChecked, AfterViewIni newDate; datePipe; - @Input() userId: number; - constructor( public router: Router, private renderer: Renderer2, public translate: TranslateService, public localStorageService: LocalStorageService, - private langService: LanguageService, - private ecoNewsService: EcoNewsService, - private userOwnAuthService: UserOwnAuthService, - private snackBar: MatSnackBarComponent + private langService: LanguageService ) {} ngOnInit() { this.localStorageService.languageBehaviourSubject.pipe(takeUntil(this.destroy)).subscribe((lang: string) => { @@ -94,17 +86,6 @@ export class NewsListListViewComponent implements AfterViewChecked, AfterViewIni return this.newsImage; } - changeFavouriteStatus(event?: MouseEvent) { - event.preventDefault(); - event.stopPropagation(); - - if (this.ecoNewsModel.isFavourite) { - console.log('save'); - } else { - console.log('delete'); - } - } - routeToNews(): void { this.router.navigate(['/news', this.ecoNewsModel.id]); } diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.html b/src/app/main/component/eco-news/components/news-list/news-list.component.html index d84818618c..9a59431cad 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.html +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.html @@ -49,9 +49,13 @@

{{ 'homepage.eco-news.title' | translate }}

}" *ngFor="let data of elements" > - - - + + + + +
+ +
diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.scss b/src/app/main/component/eco-news/components/news-list/news-list.component.scss index 11a5f2df36..198167e6fd 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.scss +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.scss @@ -138,6 +138,45 @@ div hr { } } +.link { + position: relative; +} + +.news-flags { + width: 40px; + height: 40px; + background-color: rgba(255, 255, 255, 0.8); + position: absolute; + top: 8px; + right: 8px; + border-radius: 5px; + display: flex; + flex-direction: row; + gap: 10px; + padding: 8px; + justify-content: center; + align-items: center; + box-shadow: 0 0 1px 0 var(--primary-grey); + cursor: pointer; + + span { + display: inline-block; + width: 12px; + height: 16.5px; + transition: all 0.3s; + } + + .flag { + background: url('/assets/img/places/bookmark-default.svg') no-repeat center; + background-size: contain; + } + + .flag-active { + background: url('/assets/img/places/bookmark-set.svg') no-repeat center; + background-size: contain; + } +} + .my-events-img { width: 17px; height: 17px; diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.ts b/src/app/main/component/eco-news/components/news-list/news-list.component.ts index 7cab26da9c..5f589aa47f 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.ts @@ -1,7 +1,7 @@ import { Breakpoints } from '../../../../config/breakpoints.constants'; import { Component, OnInit, OnDestroy } from '@angular/core'; -import { ReplaySubject, Subscription } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; +import { ReplaySubject, Subject, Subscription } from 'rxjs'; +import { take, takeUntil } from 'rxjs/operators'; import { EcoNewsService } from '@eco-news-service/eco-news.service'; import { EcoNewsModel } from '@eco-news-models/eco-news-model'; import { FilterModel } from '@shared/components/tag-filter/tag-filter.model'; @@ -12,10 +12,11 @@ import { Store } from '@ngrx/store'; import { IAppState } from 'src/app/store/state/app.state'; import { IEcoNewsState } from 'src/app/store/state/ecoNews.state'; import { GetEcoNewsByTagsAction, GetEcoNewsByPageAction } from 'src/app/store/actions/ecoNews.actions'; -import { Router } from '@angular/router'; import { tagsListEcoNewsData } from '@eco-news-models/eco-news-consts'; import { FormControl, Validators } from '@angular/forms'; import { Patterns } from '@assets/patterns/patterns'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; +import { AuthModalComponent } from '@global-auth/auth-modal/auth-modal.component'; @Component({ selector: 'app-news-list', @@ -48,13 +49,16 @@ export class NewsListComponent implements OnInit, OnDestroy { econews$ = this.store.select((state: IAppState): IEcoNewsState => state.ecoNewsState); searchQuery: string; + private destroy: Subject = new Subject(); + private dialogRef: MatDialogRef; + constructor( private ecoNewsService: EcoNewsService, private userOwnAuthService: UserOwnAuthService, private snackBar: MatSnackBarComponent, private localStorageService: LocalStorageService, private store: Store, - private router: Router + private dialog: MatDialog ) {} ngOnInit() { @@ -193,6 +197,71 @@ export class NewsListComponent implements OnInit, OnDestroy { }); } + changeFavouriteStatus(event: MouseEvent, data: EcoNewsModel) { + event.preventDefault(); + event.stopPropagation(); + + let isRegistered = !!this.userId; + let isFavorite = data.isFavourite; + + if (!isRegistered) { + this.openAuthModalWindow('sign-in'); + this.dialogRef + .afterClosed() + .pipe(take(1)) + .subscribe((result) => { + isRegistered = !!result; + if (isRegistered) { + this.changeFavouriteStatus(event, data); + } + }); + } else { + isFavorite = !isFavorite; + if (isFavorite) { + this.ecoNewsService + .addNewsToFavourites(data.id) + .pipe(takeUntil(this.destroy)) + .subscribe({ + error: () => { + this.snackBar.openSnackBar('error'); + isFavorite = false; + } + }); + } else { + this.ecoNewsService + .removeNewsFromFavourites(data.id) + .pipe(takeUntil(this.destroy)) + .subscribe({ + next: () => { + // if (this.isUserAssignList) { + // this.idOfUnFavouriteEvent.emit(this.ecoNewsModel.id); + // } + }, + error: () => { + this.snackBar.openSnackBar('error'); + isFavorite = true; + } + }); + } + } + } + + handleMouseDown(event: MouseEvent): void { + event.preventDefault(); // Prevents the default action (navigation in this case) + event.stopPropagation(); // Stops the event from bubbling up to the routerLink + } + + openAuthModalWindow(page: string): void { + this.dialogRef = this.dialog.open(AuthModalComponent, { + hasBackdrop: true, + closeOnNavigation: true, + panelClass: ['custom-dialog-container'], + data: { + popUpName: page + } + }); + } + showSelectedNews(): void { this.bookmarkSelected = !this.bookmarkSelected; if (this.bookmarkSelected) { diff --git a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.html b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.html index 8539317e52..b7161825a4 100644 --- a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.html +++ b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.html @@ -1,7 +1,4 @@
-
- -
user added image
diff --git a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.scss b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.scss index 24007a0ed5..c4e92c7f69 100644 --- a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.scss +++ b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.scss @@ -157,41 +157,6 @@ div { } } } - - .news-flags { - width: 40px; - height: 40px; - background-color: rgba(255, 255, 255, 0.8); - position: absolute; - top: 8px; - right: 8px; - border-radius: 5px; - display: flex; - flex-direction: row; - gap: 10px; - padding: 8px; - justify-content: center; - align-items: center; - box-shadow: 0 0 1px 0 var(--primary-grey); - cursor: pointer; - - span { - display: inline-block; - width: 12px; - height: 16.5px; - transition: all 0.3s; - } - - .flag { - background: url('/assets/img/places/bookmark-default.svg') no-repeat center; - background-size: contain; - } - - .flag-active { - background: url('/assets/img/places/bookmark-set.svg') no-repeat center; - background-size: contain; - } - } } .list-gallery:hover { diff --git a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.ts b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.ts index 4a9cfd3f0a..e47b58dea9 100644 --- a/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.ts +++ b/src/app/shared/news-list-gallery-view/news-list-gallery-view.component.ts @@ -3,15 +3,10 @@ import { Component, Input, ChangeDetectionStrategy, ViewChild, AfterViewInit, On import { EcoNewsModel } from '@eco-news-models/eco-news-model'; import { TranslateService } from '@ngx-translate/core'; import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; -import { take, takeUntil } from 'rxjs/operators'; -import { ReplaySubject, Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { Subject } from 'rxjs'; import { LanguageService } from 'src/app/main/i18n/language.service'; import { DatePipe } from '@angular/common'; -import { AuthModalComponent } from '@global-auth/auth-modal/auth-modal.component'; -import { MatDialog, MatDialogRef } from '@angular/material/dialog'; -import { EcoNewsService } from '@eco-news-service/eco-news.service'; -import { UserOwnAuthService } from '@global-service/auth/user-own-auth.service'; -import { MatSnackBarComponent } from '@global-errors/mat-snack-bar/mat-snack-bar.component'; @Component({ selector: 'app-news-list-gallery-view', @@ -22,7 +17,6 @@ import { MatSnackBarComponent } from '@global-errors/mat-snack-bar/mat-snack-bar export class NewsListGalleryViewComponent implements AfterViewInit, OnInit, OnDestroy { @Input() ecoNewsModel: EcoNewsModel; @Input() ecoNewsText; - @Input() userId: number; @ViewChild('ecoNewsText', { static: true }) text; profileIcons = userAssignedCardsIcons; @@ -32,20 +26,14 @@ export class NewsListGalleryViewComponent implements AfterViewInit, OnInit, OnDe tags: Array; currentLang: string; private destroy: Subject = new Subject(); - isRegistered: boolean; + newDate; datePipe; - private dialogRef: MatDialogRef; - isFavorite: boolean; - // private destroyed$: ReplaySubject = new ReplaySubject(1); + constructor( public translate: TranslateService, private localStorageService: LocalStorageService, - private langService: LanguageService, - private dialog: MatDialog, - private ecoNewsService: EcoNewsService, - private userOwnAuthService: UserOwnAuthService, - private snackBar: MatSnackBarComponent + private langService: LanguageService ) {} ngOnInit() { this.localStorageService.languageBehaviourSubject.pipe(takeUntil(this.destroy)).subscribe((lang: string) => { @@ -54,66 +42,6 @@ export class NewsListGalleryViewComponent implements AfterViewInit, OnInit, OnDe this.datePipe = new DatePipe(this.currentLang); this.newDate = this.datePipe.transform(this.ecoNewsModel.creationDate, 'MMM dd, yyyy'); }); - - this.isRegistered = !!this.userId; - this.isFavorite = this.ecoNewsModel.isFavourite; - } - - changeFavouriteStatus(event?: MouseEvent) { - event?.preventDefault(); - event?.stopPropagation(); - - if (!this.isRegistered) { - this.openAuthModalWindow('sign-in'); - this.dialogRef - .afterClosed() - .pipe(take(1)) - .subscribe((result) => { - this.isRegistered = !!result; - if (this.isRegistered) { - this.changeFavouriteStatus(); - } - }); - } else { - this.isFavorite = !this.isFavorite; - if (this.isFavorite) { - this.ecoNewsService - .addNewsToFavourites(this.ecoNewsModel.id) - .pipe(takeUntil(this.destroy)) - .subscribe({ - error: () => { - this.snackBar.openSnackBar('error'); - this.isFavorite = false; - } - }); - } else { - this.ecoNewsService - .removeNewsFromFavourites(this.ecoNewsModel.id) - .pipe(takeUntil(this.destroy)) - .subscribe({ - next: () => { - // if (this.isUserAssignList) { - // this.idOfUnFavouriteEvent.emit(this.ecoNewsModel.id); - // } - }, - error: () => { - this.snackBar.openSnackBar('error'); - this.isFavorite = true; - } - }); - } - } - } - - openAuthModalWindow(page: string): void { - this.dialogRef = this.dialog.open(AuthModalComponent, { - hasBackdrop: true, - closeOnNavigation: true, - panelClass: ['custom-dialog-container'], - data: { - popUpName: page - } - }); } checkNewsImage(): string { From 3a99fe885a24ae7f5d684663e72d0994555c1823 Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Fri, 25 Oct 2024 14:32:18 +0300 Subject: [PATCH 04/32] feat: search news --- .../news-list/news-list.component.ts | 119 +++++++----------- .../eco-news/services/eco-news.service.ts | 6 +- src/app/store/actions/ecoNews.actions.ts | 9 ++ src/app/store/effects/ecoNews.effects.ts | 17 ++- src/app/store/reducers/ecoNews.reducer.ts | 5 +- 5 files changed, 77 insertions(+), 79 deletions(-) diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.ts b/src/app/main/component/eco-news/components/news-list/news-list.component.ts index 5f589aa47f..e611fffd6c 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.ts @@ -11,12 +11,13 @@ import { LocalStorageService } from '@global-service/localstorage/local-storage. import { Store } from '@ngrx/store'; import { IAppState } from 'src/app/store/state/app.state'; import { IEcoNewsState } from 'src/app/store/state/ecoNews.state'; -import { GetEcoNewsByTagsAction, GetEcoNewsByPageAction } from 'src/app/store/actions/ecoNews.actions'; +import { GetEcoNewsByTagsAction, GetEcoNewsByPageAction, GetEcoNewsAction } from 'src/app/store/actions/ecoNews.actions'; import { tagsListEcoNewsData } from '@eco-news-models/eco-news-consts'; import { FormControl, Validators } from '@angular/forms'; import { Patterns } from '@assets/patterns/patterns'; import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { AuthModalComponent } from '@global-auth/auth-modal/auth-modal.component'; +import { HttpParams } from '@angular/common/http'; @Component({ selector: 'app-news-list', @@ -70,10 +71,6 @@ export class NewsListComponent implements OnInit, OnDestroy { this.setLocalizedTags(); this.localStorageService.setCurentPage('previousPage', '/news'); - // if (!this.page || !this.elements?.length) { - // this.dispatchStore(true); - // } - this.econews$.subscribe((value: IEcoNewsState) => { this.page = value.pageNumber; if (value.ecoNews) { @@ -87,58 +84,9 @@ export class NewsListComponent implements OnInit, OnDestroy { }); this.searchNewsControl.valueChanges.subscribe((value) => { - if (this.searchResultSubscription) { - this.searchResultSubscription.unsubscribe(); - } - + this.searchQuery = value.trim(); this.cleanNewsList(); - if (value.trim()) { - this.searchNewsByTitle(value.trim()); - } else { - console.log('hh'); - this.dispatchStore(true); - } - }); - } - - private getNews() { - if (this.bookmarkSelected) { - this.getUserFavoriteNews(); - } else { - const searchTitle = this.searchNewsControl.value.trim(); - - if (searchTitle) { - this.searchNewsByTitle(searchTitle); - } else { - this.dispatchStore(false); - } - } - } - - private getNewsByPage() { - this.ecoNewsService.getEcoNewsListByPage(this.page, this.numberOfNews).subscribe((res) => { - this.isLoading = false; - if (res.page.length > 0) { - this.newsTotal = res.totalElements; - this.elements.push(...res.page); - this.hasNext = res.hasNext; - } else { - this.noNewsMatch = true; - } - }); - } - - private searchNewsByTitle(title: string) { - this.searchResultSubscription = this.ecoNewsService.getEcoNewsListByTitle(title, this.page, this.numberOfNews).subscribe((res) => { - this.isLoading = false; - if (res.page.length > 0) { - this.newsTotal = res.totalElements; - this.elements.push(...res.page); - this.hasNext = res.hasNext; - this.page++; - } else { - this.noNewsMatch = true; - } + this.dispatchStore(true); }); } @@ -162,8 +110,7 @@ export class NewsListComponent implements OnInit, OnDestroy { onScroll(): void { this.scroll = true; - // this.dispatchStore(false); - this.getNews(); + this.dispatchStore(false); } changeView(event: boolean): void { @@ -188,13 +135,14 @@ export class NewsListComponent implements OnInit, OnDestroy { } private getUserFavoriteNews(): void { - this.ecoNewsService.getUserFavoriteNews(this.page, this.numberOfNews, this.userId).subscribe((res) => { - this.isLoading = false; - this.elements.push(...res.page); - this.page++; - this.newsTotal = res.totalElements; - this.hasNext = res.hasNext; - }); + // this.ecoNewsService.getUserFavoriteNews(this.page, this.numberOfNews, this.userId).subscribe((res) => { + // this.isLoading = false; + // this.elements.push(...res.page); + // this.page++; + // this.newsTotal = res.totalElements; + // this.hasNext = res.hasNext; + // }); + this.dispatchStore(true); } changeFavouriteStatus(event: MouseEvent, data: EcoNewsModel) { @@ -264,13 +212,8 @@ export class NewsListComponent implements OnInit, OnDestroy { showSelectedNews(): void { this.bookmarkSelected = !this.bookmarkSelected; - if (this.bookmarkSelected) { - this.cleanNewsList(); - this.getUserFavoriteNews(); - } else { - this.cleanNewsList(); - this.getNews(); - } + this.cleanNewsList(); + this.dispatchStore(true); } private cleanNewsList(): void { @@ -287,14 +230,38 @@ export class NewsListComponent implements OnInit, OnDestroy { return; } - const action = this.tagsList.length - ? GetEcoNewsByTagsAction({ currentPage: this.page, numberOfNews: this.numberOfNews, tagsList: this.tagsList, reset: res }) - : GetEcoNewsByPageAction({ currentPage: this.page, numberOfNews: this.numberOfNews, reset: res }); + //TODO: handle favorits + const params = this.getEventsHttpParams(); + + const action = GetEcoNewsAction({ params, reset: res }); this.store.dispatch(action); this.page++; } + private getEventsHttpParams(): HttpParams { + let params = new HttpParams().set('page', this.page.toString()).set('size', this.numberOfNews.toString()); + + const paramsToAdd = [ + this.appendIfNotEmpty('user-id', this.userId?.toString()), + this.appendIfNotEmpty('title', this.searchQuery), + this.appendIfNotEmpty('tags', this.tagsList), + this.appendIfNotEmpty('status', this.bookmarkSelected ? 'SAVED' : '') + ]; + + paramsToAdd + .filter((param) => param !== null) + .forEach((param) => { + params = params.append(param.key, param.value); + }); + return params; + } + + private appendIfNotEmpty(key: string, value: string | string[]): { key: string; value: string } | null { + const formattedValue = (Array.isArray(value) ? value.join(',') : value)?.toUpperCase() || ''; + return formattedValue ? { key, value: formattedValue } : null; + } + private checkUserSingIn(): void { this.userOwnAuthService.credentialDataSubject.subscribe((data) => { this.isLoggedIn = data?.userId; @@ -309,5 +276,7 @@ export class NewsListComponent implements OnInit, OnDestroy { ngOnDestroy(): void { this.destroyed$.next(true); this.destroyed$.complete(); + this.destroy.next(true); + this.destroy.complete(); } } diff --git a/src/app/main/component/eco-news/services/eco-news.service.ts b/src/app/main/component/eco-news/services/eco-news.service.ts index 0262aa2b47..a9fca4a9c0 100644 --- a/src/app/main/component/eco-news/services/eco-news.service.ts +++ b/src/app/main/component/eco-news/services/eco-news.service.ts @@ -1,5 +1,5 @@ import { Injectable, OnDestroy } from '@angular/core'; -import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; import { Observable, Observer, ReplaySubject } from 'rxjs'; import { take, takeUntil } from 'rxjs/operators'; import { EcoNewsModel } from '../models/eco-news-model'; @@ -26,6 +26,10 @@ export class EcoNewsService implements OnDestroy { return this.http.get(`${this.backEnd}eco-news?page=${page}&size=${quantity}`); } + getEcoNewsList(params: HttpParams): Observable { + return this.http.get(`${this.backEnd}eco-news`, { params }); + } + getEcoNewsListByTitle(title: string, page: number, quantity: number): Observable { return this.http.get(`${this.backEnd}eco-news?title=${title}&page=${page}&size=${quantity}`); } diff --git a/src/app/store/actions/ecoNews.actions.ts b/src/app/store/actions/ecoNews.actions.ts index 3e1d615242..c3f7e81877 100644 --- a/src/app/store/actions/ecoNews.actions.ts +++ b/src/app/store/actions/ecoNews.actions.ts @@ -3,12 +3,17 @@ import { createAction, props } from '@ngrx/store'; import { NewsDTO } from '@eco-news-models/create-news-interface'; import { EcoNewsModel } from '@eco-news-models/eco-news-model'; +import { HttpParams } from '@angular/common/http'; export enum NewsActions { GetEcoNewsByTags = '[News] Get news by tags', GetEcoNewsByTagsSuccess = '[News] Get news by tags Success', GetEcoNewsByPage = '[News] Get news by page', GetEcoNewsByPageSuccess = '[News] Get news by page Success', + + GetEcoNews = '[News] Get news', + GetEcoNewsSuccess = '[News] Get news Success', + GetEcoNewsByAuthor = '[News] Get news by author', GetEcoNewsByAuthorSuccess = '[News] Get news by author Success', @@ -44,6 +49,10 @@ export const GetEcoNewsByPageSuccessAction = createAction( props<{ ecoNews: EcoNewsDto; reset: boolean }>() ); +export const GetEcoNewsAction = createAction(NewsActions.GetEcoNews, props<{ params: HttpParams; reset: boolean }>()); + +export const GetEcoNewsSuccessAction = createAction(NewsActions.GetEcoNewsSuccess, props<{ ecoNews: EcoNewsDto; reset: boolean }>()); + export const GetEcoNewsByAuthorAction = createAction( NewsActions.GetEcoNewsByAuthor, props<{ authorId: number; currentPage: number; numberOfNews: number; reset: boolean }>() diff --git a/src/app/store/effects/ecoNews.effects.ts b/src/app/store/effects/ecoNews.effects.ts index d01a79a89e..6747aeb1ef 100644 --- a/src/app/store/effects/ecoNews.effects.ts +++ b/src/app/store/effects/ecoNews.effects.ts @@ -16,13 +16,16 @@ import { CreateEcoNewsSuccessAction, DeleteEcoNewsSuccessAction, DeleteEcoNewsAction, - ReceivedEcoNewsFailureAction + ReceivedEcoNewsFailureAction, + GetEcoNewsAction, + GetEcoNewsSuccessAction } from '../actions/ecoNews.actions'; import { EcoNewsDto } from '@eco-news-models/eco-news-dto'; import { CreateEcoNewsService } from '@eco-news-service/create-eco-news.service'; import { NewsDTO } from '@eco-news-models/create-news-interface'; import { EcoNewsModel } from '@eco-news-models/eco-news-model'; import { Router } from '@angular/router'; +import { HttpParams } from '@angular/common/http'; @Injectable() export class NewsEffects { @@ -57,6 +60,18 @@ export class NewsEffects { ) ); + getEcoNews = createEffect(() => + this.actions.pipe( + ofType(GetEcoNewsAction), + mergeMap((actions: { params: HttpParams; reset: boolean }) => + this.newsService.getEcoNewsList(actions.params).pipe( + map((ecoNews: EcoNewsDto) => GetEcoNewsSuccessAction({ ecoNews, reset: actions.reset })), + catchError((error) => of(ReceivedEcoNewsFailureAction(error))) + ) + ) + ) + ); + getEcoNewsListByAutorId = createEffect(() => this.actions.pipe( ofType(GetEcoNewsByAuthorAction), diff --git a/src/app/store/reducers/ecoNews.reducer.ts b/src/app/store/reducers/ecoNews.reducer.ts index 9953b0eaea..ef333bceab 100644 --- a/src/app/store/reducers/ecoNews.reducer.ts +++ b/src/app/store/reducers/ecoNews.reducer.ts @@ -6,13 +6,14 @@ import { CreateEcoNewsSuccessAction, EditEcoNewsSuccessAction, DeleteEcoNewsSuccessAction, - ReceivedEcoNewsFailureAction + ReceivedEcoNewsFailureAction, + GetEcoNewsSuccessAction } from '../actions/ecoNews.actions'; import { initialNewsState } from '../state/ecoNews.state'; export const EcoNewsReducer = createReducer( initialNewsState, - on(GetEcoNewsByPageSuccessAction, GetEcoNewsByTagsSuccessAction, (state, action) => { + on(GetEcoNewsByPageSuccessAction, GetEcoNewsByTagsSuccessAction, GetEcoNewsSuccessAction, (state, action) => { let prevLocations = state.pages; let prevNumber = state.pageNumber; if (action.reset) { From 2d2c43fa6249df9797fb9fda01ea630abf608a23 Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Fri, 25 Oct 2024 17:58:43 +0300 Subject: [PATCH 05/32] fix: canceled requests --- .../news-list/news-list.component.ts | 30 +++++++++++-------- src/app/store/effects/ecoNews.effects.ts | 18 ++++++----- 2 files changed, 28 insertions(+), 20 deletions(-) diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.ts b/src/app/main/component/eco-news/components/news-list/news-list.component.ts index e611fffd6c..34cc1b7f51 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.ts @@ -45,6 +45,7 @@ export class NewsListComponent implements OnInit, OnDestroy { private page = 0; noNewsMatch = false; searchToggle = false; + private isRequestInFlight = false; searchNewsControl = new FormControl('', [Validators.maxLength(30), Validators.pattern(Patterns.NameInfoPattern)]); private searchResultSubscription: Subscription; econews$ = this.store.select((state: IAppState): IEcoNewsState => state.ecoNewsState); @@ -226,40 +227,43 @@ export class NewsListComponent implements OnInit, OnDestroy { } dispatchStore(res: boolean): void { - if (!this.hasNext || this.page === undefined) { + if (!this.hasNext || this.isRequestInFlight) { return; } - //TODO: handle favorits - const params = this.getEventsHttpParams(); + this.isRequestInFlight = true; + const params = this.getNewsHttpParams(); const action = GetEcoNewsAction({ params, reset: res }); - this.store.dispatch(action); + this.page++; + this.isRequestInFlight = false; } - private getEventsHttpParams(): HttpParams { + private getNewsHttpParams(): HttpParams { let params = new HttpParams().set('page', this.page.toString()).set('size', this.numberOfNews.toString()); - const paramsToAdd = [ + const optionalParams = [ this.appendIfNotEmpty('user-id', this.userId?.toString()), this.appendIfNotEmpty('title', this.searchQuery), this.appendIfNotEmpty('tags', this.tagsList), this.appendIfNotEmpty('status', this.bookmarkSelected ? 'SAVED' : '') ]; - paramsToAdd - .filter((param) => param !== null) - .forEach((param) => { + optionalParams.forEach((param) => { + if (param) { params = params.append(param.key, param.value); - }); - return params; + } + }); + + const serializedParams = params.toString(); + return new HttpParams({ fromString: serializedParams }); } private appendIfNotEmpty(key: string, value: string | string[]): { key: string; value: string } | null { - const formattedValue = (Array.isArray(value) ? value.join(',') : value)?.toUpperCase() || ''; - return formattedValue ? { key, value: formattedValue } : null; + const formattedValue = Array.isArray(value) ? value.join(',') : value; + return formattedValue && formattedValue.trim() ? { key, value: formattedValue.toUpperCase() } : null; } private checkUserSingIn(): void { diff --git a/src/app/store/effects/ecoNews.effects.ts b/src/app/store/effects/ecoNews.effects.ts index 6747aeb1ef..3d43fcc680 100644 --- a/src/app/store/effects/ecoNews.effects.ts +++ b/src/app/store/effects/ecoNews.effects.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { Actions, createEffect, ofType } from '@ngrx/effects'; -import { catchError, map, mergeMap, tap } from 'rxjs/operators'; +import { catchError, map, mergeMap, switchMap, tap } from 'rxjs/operators'; import { of } from 'rxjs'; import { EcoNewsService } from '@eco-news-service/eco-news.service'; import { @@ -63,12 +63,16 @@ export class NewsEffects { getEcoNews = createEffect(() => this.actions.pipe( ofType(GetEcoNewsAction), - mergeMap((actions: { params: HttpParams; reset: boolean }) => - this.newsService.getEcoNewsList(actions.params).pipe( - map((ecoNews: EcoNewsDto) => GetEcoNewsSuccessAction({ ecoNews, reset: actions.reset })), - catchError((error) => of(ReceivedEcoNewsFailureAction(error))) - ) - ) + switchMap((actions: { params: HttpParams; reset: boolean }) => { + return this.newsService.getEcoNewsList(actions.params).pipe( + map((ecoNews: EcoNewsDto) => { + return GetEcoNewsSuccessAction({ ecoNews, reset: actions.reset }); + }), + catchError((error) => { + return of(ReceivedEcoNewsFailureAction({ error })); + }) + ); + }) ) ); From 6bb1cafea1d49e90c2efb5db92e8301f26cc064a Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Sun, 27 Oct 2024 10:56:39 +0200 Subject: [PATCH 06/32] fix: clean elements --- .../components/news-list/news-list.component.ts | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.ts b/src/app/main/component/eco-news/components/news-list/news-list.component.ts index 34cc1b7f51..d7439f14e1 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.ts @@ -135,17 +135,6 @@ export class NewsListComponent implements OnInit, OnDestroy { this.searchToggle = !this.searchToggle; } - private getUserFavoriteNews(): void { - // this.ecoNewsService.getUserFavoriteNews(this.page, this.numberOfNews, this.userId).subscribe((res) => { - // this.isLoading = false; - // this.elements.push(...res.page); - // this.page++; - // this.newsTotal = res.totalElements; - // this.hasNext = res.hasNext; - // }); - this.dispatchStore(true); - } - changeFavouriteStatus(event: MouseEvent, data: EcoNewsModel) { event.preventDefault(); event.stopPropagation(); @@ -230,6 +219,9 @@ export class NewsListComponent implements OnInit, OnDestroy { if (!this.hasNext || this.isRequestInFlight) { return; } + if (res) { + this.cleanNewsList(); + } this.isRequestInFlight = true; const params = this.getNewsHttpParams(); From 84532a3347952fc5133249f9466ff7bdbb18dd6e Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Mon, 28 Oct 2024 12:53:51 +0200 Subject: [PATCH 07/32] fix: cleaning elements state --- .../components/news-list/news-list.component.ts | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.ts b/src/app/main/component/eco-news/components/news-list/news-list.component.ts index d7439f14e1..962c7a5265 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.ts @@ -47,7 +47,6 @@ export class NewsListComponent implements OnInit, OnDestroy { searchToggle = false; private isRequestInFlight = false; searchNewsControl = new FormControl('', [Validators.maxLength(30), Validators.pattern(Patterns.NameInfoPattern)]); - private searchResultSubscription: Subscription; econews$ = this.store.select((state: IAppState): IEcoNewsState => state.ecoNewsState); searchQuery: string; @@ -86,7 +85,6 @@ export class NewsListComponent implements OnInit, OnDestroy { this.searchNewsControl.valueChanges.subscribe((value) => { this.searchQuery = value.trim(); - this.cleanNewsList(); this.dispatchStore(true); }); } @@ -110,6 +108,9 @@ export class NewsListComponent implements OnInit, OnDestroy { } onScroll(): void { + if (!this.elements.length) { + return; + } this.scroll = true; this.dispatchStore(false); } @@ -122,8 +123,6 @@ export class NewsListComponent implements OnInit, OnDestroy { if (this.tagsList !== value) { this.tagsList = value; } - this.hasNext = true; - this.page = 0; this.dispatchStore(true); } @@ -202,7 +201,6 @@ export class NewsListComponent implements OnInit, OnDestroy { showSelectedNews(): void { this.bookmarkSelected = !this.bookmarkSelected; - this.cleanNewsList(); this.dispatchStore(true); } @@ -216,13 +214,14 @@ export class NewsListComponent implements OnInit, OnDestroy { } dispatchStore(res: boolean): void { - if (!this.hasNext || this.isRequestInFlight) { - return; - } if (res) { this.cleanNewsList(); } + if (!this.hasNext || this.isRequestInFlight) { + return; + } + this.isRequestInFlight = true; const params = this.getNewsHttpParams(); From c5386e5b7e32763b8029a6f7a6d985417fa17a2d Mon Sep 17 00:00:00 2001 From: Tadei-Mykola Date: Sat, 2 Nov 2024 20:32:18 +0200 Subject: [PATCH 08/32] rename in habit components --- .../add-comment/add-comment.component.spec.ts | 2 +- .../add-edit-custom-habit.component.html | 6 +- .../add-edit-custom-habit.component.scss | 8 +- .../add-edit-custom-habit.component.spec.ts | 8 +- .../add-edit-custom-habit.component.ts | 22 ++-- .../add-new-habit.component.html | 12 +- .../add-new-habit.component.scss | 8 +- .../add-new-habit.component.spec.ts | 48 ++++---- .../add-new-habit/add-new-habit.component.ts | 72 ++++++------ .../shopping-list.service.spec.ts | 88 -------------- .../shopping-list.service.ts | 46 -------- .../habit-edit-to-do-list.component.html} | 12 +- .../habit-edit-to-do-list.component.scss} | 8 +- .../habit-edit-to-do-list.component.spec.ts} | 60 +++++----- .../habit-edit-to-do-list.component.ts} | 70 +++++------ .../to-do-list.service.spec.ts | 88 ++++++++++++++ .../to-do-list.service.ts | 48 ++++++++ .../all-habits/all-habits.component.spec.ts | 2 +- .../user/components/habit/const/data.const.ts | 4 +- .../habit/mocks/habit-assigned-mock.ts | 10 +- .../user/components/habit/mocks/habit-mock.ts | 4 +- ...opping-list-mock.ts => to-do-list-mock.ts} | 30 ++--- .../interfaces/custom-habit.interface.ts | 6 +- .../interfaces/habit-assign.interface.ts | 4 +- .../models/interfaces/habit.interface.ts | 6 +- .../main/component/user/components/index.ts | 2 +- .../edit-profile/edit-profile-form-builder.ts | 4 +- .../edit-profile/edit-profile.component.html | 4 +- .../edit-profile.component.spec.ts | 6 +- .../edit-profile/edit-profile.component.ts | 6 +- .../profile-service/profile.service.spec.ts | 2 +- .../profile-header.component.spec.ts | 2 +- .../components/profile/profile.component.html | 4 +- .../components/profile/profile.component.scss | 14 +-- .../profile/profile.component.spec.ts | 2 +- .../shopping-list.component.html | 42 ------- .../shopping-list/shopping-list.component.ts | 109 ------------------ .../to-do-list/to-do-list.component.html | 40 +++++++ .../to-do-list.component.scss} | 14 +-- .../to-do-list.component.spec.ts} | 62 +++++----- .../to-do-list/to-do-list.component.ts | 109 ++++++++++++++++++ .../friend-profile-page.component.html | 2 +- .../friend-profile-page.component.scss | 2 +- .../user/models/edit-profile.model.ts | 4 +- .../user/models/shoppinglist.interface.ts | 25 ---- .../user/models/to-do-list.interface.ts | 25 ++++ src/app/main/component/user/user.module.ts | 10 +- .../goal/HabitAssignCustomPropertiesDto.ts | 6 +- .../habit-assign/habit-assign.service.spec.ts | 4 +- .../main/service/habit/habit.service.spec.ts | 14 +-- src/app/main/service/habit/habit.service.ts | 8 +- src/assets/mocks/events/mock-events.ts | 4 +- src/assets/mocks/habit/mock-habit-calendar.ts | 2 +- 53 files changed, 600 insertions(+), 600 deletions(-) delete mode 100644 src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/shopping-list.service.spec.ts delete mode 100644 src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/shopping-list.service.ts rename src/app/main/component/user/components/habit/add-new-habit/{habit-edit-shopping-list/habit-edit-shopping-list.component.html => habit-edit-to-do-list/habit-edit-to-do-list.component.html} (85%) rename src/app/main/component/user/components/habit/add-new-habit/{habit-edit-shopping-list/habit-edit-shopping-list.component.scss => habit-edit-to-do-list/habit-edit-to-do-list.component.scss} (97%) rename src/app/main/component/user/components/habit/add-new-habit/{habit-edit-shopping-list/habit-edit-shopping-list.component.spec.ts => habit-edit-to-do-list/habit-edit-to-do-list.component.spec.ts} (68%) rename src/app/main/component/user/components/habit/add-new-habit/{habit-edit-shopping-list/habit-edit-shopping-list.component.ts => habit-edit-to-do-list/habit-edit-to-do-list.component.ts} (73%) create mode 100644 src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/to-do-list.service.spec.ts create mode 100644 src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/to-do-list.service.ts rename src/app/main/component/user/components/habit/mocks/{shopping-list-mock.ts => to-do-list-mock.ts} (73%) delete mode 100644 src/app/main/component/user/components/profile/shopping-list/shopping-list.component.html delete mode 100644 src/app/main/component/user/components/profile/shopping-list/shopping-list.component.ts create mode 100644 src/app/main/component/user/components/profile/to-do-list/to-do-list.component.html rename src/app/main/component/user/components/profile/{shopping-list/shopping-list.component.scss => to-do-list/to-do-list.component.scss} (93%) rename src/app/main/component/user/components/profile/{shopping-list/shopping-list.component.spec.ts => to-do-list/to-do-list.component.spec.ts} (55%) create mode 100644 src/app/main/component/user/components/profile/to-do-list/to-do-list.component.ts delete mode 100644 src/app/main/component/user/models/shoppinglist.interface.ts create mode 100644 src/app/main/component/user/models/to-do-list.interface.ts diff --git a/src/app/main/component/comments/components/add-comment/add-comment.component.spec.ts b/src/app/main/component/comments/components/add-comment/add-comment.component.spec.ts index c547289f68..7c614bdac8 100644 --- a/src/app/main/component/comments/components/add-comment/add-comment.component.spec.ts +++ b/src/app/main/component/comments/components/add-comment/add-comment.component.spec.ts @@ -45,7 +45,7 @@ describe('AddCommentComponent', () => { rating: null, showEcoPlace: true, showLocation: true, - showShoppingList: true, + showToDoList: true, socialNetworks: [{ id: 1, url: defaultImagePath }] } as EditProfileModel; diff --git a/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.html b/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.html index 8e1ab2caf2..093a567b58 100644 --- a/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.html +++ b/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.html @@ -96,15 +96,15 @@

{{ 'user.habit.add-new-habit.textarea-title' | translate }}

-
+
-
- +
+
diff --git a/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.scss b/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.scss index fc4c8ac58d..005028cd38 100644 --- a/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.scss +++ b/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.scss @@ -80,14 +80,14 @@ } } - .duration-shoping { + .duration-to-do { display: flex; width: 100%; justify-content: space-between; gap: 32px; .duration, - .shopping { + .to-do { width: calc(50% - 16px); background: var(--secondary-light-grey); border-radius: 8px; @@ -352,13 +352,13 @@ input[type='radio'] + img { padding: 0; gap: 24px; - .duration-shoping { + .duration-to-do { flex-direction: column; height: auto; gap: 24px; .duration, - .shopping { + .to-do { width: 100%; } } diff --git a/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.spec.ts b/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.spec.ts index 3ca72e68a5..a087776252 100644 --- a/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.spec.ts +++ b/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.spec.ts @@ -13,11 +13,11 @@ import { HabitAssignService } from '@global-service/habit-assign/habit-assign.se import { HabitService } from '@global-service/habit/habit.service'; import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; import { HabitDurationComponent } from '@global-user/components/habit/add-new-habit/habit-duration/habit-duration.component'; -import { HabitEditShoppingListComponent } from '@global-user/components/habit/add-new-habit/habit-edit-shopping-list/habit-edit-shopping-list.component'; +import { HabitEditToDoListComponent } from '@global-user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component'; import { HabitInviteFriendsComponent } from '@global-user/components/habit/add-new-habit/habit-invite-friends/habit-invite-friends.component'; import { HabitProgressComponent } from '@global-user/components/habit/add-new-habit/habit-progress/habit-progress.component'; import { CalendarWeekComponent } from '@global-user/components/profile/calendar/calendar-week/calendar-week.component'; -import { ShoppingList } from '@global-user/models/shoppinglist.interface'; +import { ToDoList } from '@global-user/models/to-do-list.interface'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { provideMockStore } from '@ngrx/store/testing'; import { TranslateModule } from '@ngx-translate/core'; @@ -82,7 +82,7 @@ describe('AddEditCustomHabitComponent', () => { HabitDurationComponent, CalendarWeekComponent, CalendarComponent, - HabitEditShoppingListComponent, + HabitEditToDoListComponent, HabitInviteFriendsComponent, HabitProgressComponent, SelectImagesComponent, @@ -152,7 +152,7 @@ describe('AddEditCustomHabitComponent', () => { }); it('should call changeCustomHabit() and goToAllHabits() on success', () => { - const habitFormValue = { title: 'Title', description: 'Description', complexity: 1, duration: 7, tagIds: [1], image: '', shopList: [] }; + const habitFormValue = { title: 'Title', description: 'Description', complexity: 1, duration: 7, tagIds: [1], image: '', toDoList: [] }; component.habitForm.setValue(habitFormValue); habitServiceMock.changeCustomHabit = jasmine.createSpy('changeCustomHabit').and.returnValue(of(null)); spyOn(component, 'goToAllHabits'); diff --git a/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.ts b/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.ts index 8f72ede29f..56e005e3e9 100644 --- a/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.ts +++ b/src/app/main/component/user/components/habit/add-edit-custom-habit/add-edit-custom-habit.component.ts @@ -14,7 +14,7 @@ import ImageResize from 'quill-image-resize-module'; import { HabitService } from '@global-service/habit/habit.service'; import { TagInterface } from '@shared/components/tag-filter/tag-filter.model'; import { quillConfig } from '../../../../events/components/event-editor/quillEditorFunc'; -import { ShoppingList } from '@global-user/models/shoppinglist.interface'; +import { ToDoList } from '@global-user/models/to-do-list.interface'; import { FileHandle } from '@eco-news-models/create-news-interface'; import { UserFriendsService } from '@global-user/services/user-friends.service'; import { TodoStatus } from '../models/todo-status.enum'; @@ -35,8 +35,8 @@ export class AddEditCustomHabitComponent extends FormBaseComponent implements On habitImages = HABIT_IMAGES; stars = STAR_IMAGES; initialDuration = HABIT_DEFAULT_DURATION; - shopList: ShoppingList[] = []; - newList: ShoppingList[] = []; + toDoList: ToDoList[] = []; + newList: ToDoList[] = []; tagsList: TagInterface[]; tagMaxLength = HABIT_TAGS_MAXLENGTH; selectedTagsList: number[]; @@ -151,13 +151,13 @@ export class AddEditCustomHabitComponent extends FormBaseComponent implements On return value <= complexity ? this.stars.GREEN : this.stars.WHITE; } - getShopList(list: ShoppingList[]): void { + getToDoList(list: ToDoList[]): void { this.newList = list.map((item) => ({ id: item.id, status: item.status, text: item.text })); - this.habitForm.get('shopList').setValue(this.newList); + this.habitForm.get('toDoList').setValue(this.newList); } getTagsList(list: TagInterface[]): void { @@ -217,7 +217,7 @@ export class AddEditCustomHabitComponent extends FormBaseComponent implements On duration: new FormControl(this.initialDuration, [Validators.required, Validators.min(7), Validators.max(56)]), tagIds: new FormControl([], Validators.required), image: new FormControl(''), - shopList: new FormControl([]) + toDoList: new FormControl([]) }); } @@ -230,13 +230,13 @@ export class AddEditCustomHabitComponent extends FormBaseComponent implements On duration: this.habit.defaultDuration, tagIds: this.habit.tags, image: this.habit.image, - shopList: this.habit.customShoppingListItems + toDoList: this.habit.customToDoListItems }); this.habitId = this.habit.id; - this.shopList = this.habit.customShoppingListItems?.length - ? [...(this.habit.customShoppingListItems || [])] - : [...(this.habit.customShoppingListItems || []), ...this.habit.shoppingListItems]; - this.shopList = this.shopList.map((el) => ({ ...el, selected: el.status === TodoStatus.inprogress })); + this.toDoList = this.habit.customToDoListItems?.length + ? [...(this.habit.customToDoListItems || [])] + : [...(this.habit.customToDoListItems || []), ...this.habit.ToDoListItems]; + this.toDoList = this.toDoList.map((el) => ({ ...el, selected: el.status === TodoStatus.inprogress })); } private subscribeToLangChange(): void { diff --git a/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.html b/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.html index 2bedd7542c..f0437cb8e0 100644 --- a/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.html +++ b/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.html @@ -46,7 +46,7 @@

{{ 'user.habit.info' | translate }}

>
-
+
{{ 'user.habit.info' | translate }}
-
- + + >
diff --git a/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.scss b/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.scss index e21e28345a..5e08e97963 100644 --- a/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.scss +++ b/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.scss @@ -196,14 +196,14 @@ } } - .duration-shoping { + .duration-to-do { display: flex; width: 100%; justify-content: space-between; gap: 32px; .duration, - .shopping { + .to-do { width: calc(50% - 16px); background: var(--secondary-light-grey); border-radius: 8px; @@ -402,13 +402,13 @@ padding: 0; gap: 24px; - .duration-shoping { + .duration-to-do { flex-direction: column; height: auto; gap: 24px; .duration, - .shopping { + .to-do { width: 100%; } } diff --git a/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.spec.ts b/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.spec.ts index 6ba397933e..599717e5ca 100644 --- a/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.spec.ts +++ b/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.spec.ts @@ -6,7 +6,7 @@ import { AddNewHabitComponent } from './add-new-habit.component'; import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { TranslateModule } from '@ngx-translate/core'; import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; -import { ShoppingListService } from './habit-edit-shopping-list/shopping-list.service'; +import { ToDoListService } from './habit-edit-to-do-list/to-do-list.service'; import { HabitService } from '@global-service/habit/habit.service'; import { HabitAssignService } from '@global-service/habit-assign/habit-assign.service'; import { of, Subject } from 'rxjs'; @@ -80,14 +80,14 @@ describe('AddNewHabitComponent', () => { const matSnackBarMock: MatSnackBarComponent = jasmine.createSpyObj('MatSnackBarComponent', ['openSnackBar']); - const fakeShoppingListService: ShoppingListService = jasmine.createSpyObj('fakeShoppingListService', [ - 'getHabitAllShopLists', - 'getHabitShopList', - 'updateHabitShopList' + const fakeToDoListService: ToDoListService = jasmine.createSpyObj('fakeToDoListService', [ + 'getHabitAllToDoLists', + 'getHabitToDoList', + 'updateHabitToDoList' ]); - fakeShoppingListService.getHabitAllShopLists = () => of(); - fakeShoppingListService.getHabitShopList = () => of(); - fakeShoppingListService.updateHabitShopList = () => of(); + fakeToDoListService.getHabitAllToDoLists = () => of(); + fakeToDoListService.getHabitToDoList = () => of(); + fakeToDoListService.updateHabitToDoList = () => of(); matSnackBarMock.openSnackBar = (type: string) => type; @@ -115,7 +115,7 @@ describe('AddNewHabitComponent', () => { { provide: HabitService, useValue: fakeHabitService }, { provide: HabitAssignService, useValue: fakeHabitAssignService }, { provide: EcoNewsService, useValue: ecoNewsServiceMock }, - { provide: ShoppingListService, useValue: fakeShoppingListService }, + { provide: ToDoListService, useValue: fakeToDoListService }, { provide: LocalStorageService, useValue: fakeLocalStorageService }, { provide: ActivatedRoute, useValue: mockActivatedRoute }, { provide: Location, useValue: locationMock }, @@ -144,8 +144,8 @@ describe('AddNewHabitComponent', () => { it('should navigate back on onGoBack without call dialog', () => { component.initialDuration = 1; component.newDuration = 1; - component.standardShopList = null; - component.customShopList = null; + component.standardToDoList = null; + component.customToDoList = null; const spy = spyOn(locationMock, 'back'); component.onGoBack(); expect(spy).toHaveBeenCalled(); @@ -169,22 +169,22 @@ describe('AddNewHabitComponent', () => { expect(component.canAcquire).toBeTruthy(); }); - it('should set standardShopList', () => { - component.getList(DEFAULTFULLINFOHABIT.shoppingListItems); - expect(component.standardShopList).toEqual([{ id: 6, status: TodoStatus.active, text: 'TEST' }]); - expect(component.customShopList).toEqual([]); + it('should set standardToDoList', () => { + component.getList(DEFAULTFULLINFOHABIT.toDoListItems); + expect(component.standardToDoList).toEqual([{ id: 6, status: TodoStatus.active, text: 'TEST' }]); + expect(component.customToDoList).toEqual([]); }); - it('should set and customShopList', () => { - component.getList(CUSTOMFULLINFOHABIT.shoppingListItems); - expect(component.customShopList).toEqual([{ id: 6, status: TodoStatus.active, text: 'TEST', custom: true }]); - expect(component.standardShopList).toEqual([]); + it('should set and customToDoList', () => { + component.getList(CUSTOMFULLINFOHABIT.toDoListItems); + expect(component.customToDoList).toEqual([{ id: 6, status: TodoStatus.active, text: 'TEST', custom: true }]); + expect(component.standardToDoList).toEqual([]); }); - it('should set standardShopList and customShopList', () => { - const shoppingListItems = DEFAULTFULLINFOHABIT.shoppingListItems.concat(CUSTOMFULLINFOHABIT.shoppingListItems); - component.getList(shoppingListItems); - expect(component.customShopList).toEqual(shoppingListItems.filter((item) => item.custom)); - expect(component.standardShopList).toEqual(shoppingListItems.filter((item) => !item.custom)); + it('should set standardToDoList and customToDoList', () => { + const toDoListItems = DEFAULTFULLINFOHABIT.toDoListItems.concat(CUSTOMFULLINFOHABIT.toDoListItems); + component.getList(toDoListItems); + expect(component.customToDoList).toEqual(toDoListItems.filter((item) => item.custom)); + expect(component.standardToDoList).toEqual(toDoListItems.filter((item) => !item.custom)); }); }); diff --git a/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.ts b/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.ts index 73c597b027..9442a5cf1b 100644 --- a/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.ts +++ b/src/app/main/component/user/components/habit/add-new-habit/add-new-habit.component.ts @@ -7,7 +7,7 @@ import { HabitService } from '@global-service/habit/habit.service'; import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; import { TranslateService } from '@ngx-translate/core'; import { Subject } from 'rxjs'; -import { ShoppingListService } from './habit-edit-shopping-list/shopping-list.service'; +import { ToDoListService } from './habit-edit-to-do-list/to-do-list.service'; import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { WarningPopUpComponent } from '@shared/components'; import { Location } from '@angular/common'; @@ -20,7 +20,7 @@ import { HabitAcquireConfirm, HabitCongratulation, HabitGiveUp, HabitLeavePage } import { WarningDialog } from '@global-user/models/warning-dialog.inteface'; import { HabitAssignInterface } from '../models/interfaces/habit-assign.interface'; import { HabitInterface, HabitListInterface } from '../models/interfaces/habit.interface'; -import { AllShoppingLists, HabitUpdateShopList, ShoppingList } from '@user-models/shoppinglist.interface'; +import { AllToDoLists, HabitUpdateToDoList, ToDoList } from '@global-user/models/to-do-list.interface'; import { UserFriendsService } from '@global-user/services/user-friends.service'; import { HabitAssignCustomPropertiesDto, HabitAssignPropertiesDto } from '@global-models/goal/HabitAssignCustomPropertiesDto'; import { singleNewsImages } from 'src/app/main/image-pathes/single-news-images'; @@ -37,9 +37,9 @@ export class AddNewHabitComponent implements OnInit, OnDestroy { habitResponse: HabitInterface; recommendedHabits: HabitInterface[]; recommendedNews: EcoNewsModel[]; - initialShoppingList: ShoppingList[] = []; - standardShopList: ShoppingList[] = []; - customShopList: ShoppingList[] = []; + initialToDoList: ToDoList[] = []; + standardToDoList: ToDoList[] = []; + customToDoList: ToDoList[] = []; friendsIdsList: number[] = []; newDuration = 7; initialDuration: number; @@ -73,7 +73,7 @@ export class AddNewHabitComponent implements OnInit, OnDestroy { private snackBar: MatSnackBarComponent, private habitAssignService: HabitAssignService, private newsService: EcoNewsService, - private shopListService: ShoppingListService, + private toDoListService: ToDoListService, private localStorageService: LocalStorageService, private translate: TranslateService, private location: Location, @@ -124,7 +124,7 @@ export class AddNewHabitComponent implements OnInit, OnDestroy { this.isAcquired = this.assignedHabit.status === HabitStatus.ACQUIRED; this.initialDuration = res.duration || res.habit.defaultDuration; this.initHabitData(res.habit, res.duration || res.habit.defaultDuration); - this.getCustomShopList(); + this.getCustomToDoList(); }); } else { this.getDefaultHabit(); @@ -169,10 +169,10 @@ export class AddNewHabitComponent implements OnInit, OnDestroy { this.initHabitData(data); this.isCustomHabit = data.isCustomHabit; if (data.isCustomHabit) { - data.customShoppingListItems?.forEach((item) => (item.custom = true)); - this.initialShoppingList = data.customShoppingListItems; + data.customToDoListItems?.forEach((item) => (item.custom = true)); + this.initialToDoList = data.customToDoListItems; } else { - this.getStandardShopList(); + this.getStandardToDoList(); } }); } @@ -196,7 +196,7 @@ export class AddNewHabitComponent implements OnInit, OnDestroy { } onGoBack(): void { - const isHabitWasEdited = this.initialDuration !== this.newDuration || this.standardShopList || this.customShopList; + const isHabitWasEdited = this.initialDuration !== this.newDuration || this.standardToDoList || this.customToDoList; if (isHabitWasEdited) { const dialogRef = this.getOpenDialog(HabitLeavePage, false); if (!dialogRef) { @@ -230,28 +230,28 @@ export class AddNewHabitComponent implements OnInit, OnDestroy { } } - getList(list: ShoppingList[]): void { - this.standardShopList = list.filter((item) => !item.custom); - this.customShopList = list.filter((item) => item.custom); + getList(list: ToDoList[]): void { + this.standardToDoList = list.filter((item) => !item.custom); + this.customToDoList = list.filter((item) => item.custom); } - private getStandardShopList(): void { - this.shopListService - .getHabitShopList(this.habitId) + private getStandardToDoList(): void { + this.toDoListService + .getHabitToDoList(this.habitId) .pipe(take(1)) .subscribe((res) => { - this.initialShoppingList = res; + this.initialToDoList = res; }); } - private getCustomShopList(): void { - this.shopListService - .getHabitAllShopLists(this.habitAssignId, this.currentLang) + private getCustomToDoList(): void { + this.toDoListService + .getHabitAllToDoLists(this.habitAssignId, this.currentLang) .pipe(take(1)) - .subscribe((res: AllShoppingLists) => { - res.customShoppingListItemDto?.forEach((item) => (item.custom = true)); - this.initialShoppingList = [...res.customShoppingListItemDto, ...res.userShoppingListItemDto]; - this.getList(this.initialShoppingList); + .subscribe((res: AllToDoLists) => { + res.customToDoListItemDto?.forEach((item) => (item.custom = true)); + this.initialToDoList = [...res.customToDoListItemDto, ...res.userToDoListItemDto]; + this.getList(this.initialToDoList); }); } @@ -289,14 +289,14 @@ export class AddNewHabitComponent implements OnInit, OnDestroy { assignCustomHabit(): void { this.friendsIdsList = this.userFriendsService.addedFriends?.map((friend) => friend.id); const habitAssignPropertiesDto: HabitAssignPropertiesDto = { - defaultShoppingListItems: this.standardShopList.filter((item) => item.selected === true).map((item) => item.id), + defaultToDoListItems: this.standardToDoList.filter((item) => item.selected === true).map((item) => item.id), duration: this.newDuration, isPrivate: this.isPrivate }; const body: HabitAssignCustomPropertiesDto = { friendsIdsList: this.friendsIdsList, habitAssignPropertiesDto, - customShoppingListItemList: this.customShopList.map((item) => ({ text: item.text })) + customToDoListItemList: this.customToDoList.map((item) => ({ text: item.text })) }; this.habitAssignService @@ -312,9 +312,9 @@ export class AddNewHabitComponent implements OnInit, OnDestroy { .updateHabitDuration(this.habitAssignId, this.newDuration) .pipe(take(1)) .subscribe(() => { - if (this.customShopList || this.standardShopList) { - this.convertShopLists(); - this.shopListService.updateHabitShopList(this.setHabitListForUpdate()); + if (this.customToDoList || this.standardToDoList) { + this.convertToDoLists(); + this.toDoListService.updateHabitToDoList(this.setHabitListForUpdate()); } this.afterHabitWasChanged('habitUpdated'); }); @@ -334,12 +334,12 @@ export class AddNewHabitComponent implements OnInit, OnDestroy { }); } - private convertShopLists(): void { - this.customShopList?.forEach((el) => { + private convertToDoLists(): void { + this.customToDoList?.forEach((el) => { delete el.custom; delete el.selected; }); - this.standardShopList?.forEach((el) => { + this.standardToDoList?.forEach((el) => { delete el.custom; delete el.selected; }); @@ -350,11 +350,11 @@ export class AddNewHabitComponent implements OnInit, OnDestroy { this.snackBar.openSnackBar(kindOfChanges); } - private setHabitListForUpdate(): HabitUpdateShopList { + private setHabitListForUpdate(): HabitUpdateToDoList { return { habitAssignId: this.habitAssignId, - customShopList: this.customShopList, - standardShopList: this.standardShopList, + customToDoList: this.customToDoList, + standardToDoList: this.standardToDoList, lang: this.currentLang }; } diff --git a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/shopping-list.service.spec.ts b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/shopping-list.service.spec.ts deleted file mode 100644 index 4f073b5e63..0000000000 --- a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/shopping-list.service.spec.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; - -import { ShoppingListService } from './shopping-list.service'; -import { TranslateModule, TranslateService } from '@ngx-translate/core'; -import { environment } from '@environment/environment'; -import { - ALLUSERSHOPLISTS, - CUSTOMSHOPITEM, - SHOPLIST, - SHOPLISTITEMONE, - SHOPLISTITEMTWO, - UPDATEHABITSHOPLIST -} from '../../mocks/shopping-list-mock'; - -describe('ShoppingListService', () => { - let service: ShoppingListService; - let httpMock: HttpTestingController; - - const mainLink = environment.backendLink; - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [HttpClientTestingModule, TranslateModule.forRoot()], - providers: [ShoppingListService, TranslateService] - }); - - service = TestBed.inject(ShoppingListService); - httpMock = TestBed.inject(HttpTestingController); - }); - - afterEach(() => { - httpMock.verify(); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); - - it('should return allShopList by habitId on getHabitAllShopLists', () => { - service.getHabitAllShopLists(2, 'en').subscribe((data) => { - expect(data).toEqual(ALLUSERSHOPLISTS); - }); - - const req = httpMock.expectOne(`${mainLink}habit/assign/2/allUserAndCustomList?lang=en`); - expect(req.request.responseType).toEqual('json'); - expect(req.request.method).toBe('GET'); - req.flush(ALLUSERSHOPLISTS); - }); - - it('should return all user shopList by lang on getUserShoppingLists', () => { - service.getUserShoppingLists('ua').subscribe((data) => { - expect(data).toEqual([ALLUSERSHOPLISTS]); - }); - - const req = httpMock.expectOne(`${mainLink}habit/assign/allUserAndCustomShoppingListsInprogress?lang=ua`); - expect(req.request.responseType).toEqual('json'); - expect(req.request.method).toBe('GET'); - req.flush([ALLUSERSHOPLISTS]); - }); - - it('should update Standard Shop Item Status', () => { - service.updateStandardShopItemStatus(SHOPLISTITEMTWO, 'ua').subscribe((data) => { - expect(data).toEqual([SHOPLISTITEMTWO]); - }); - const req = httpMock.expectOne(`${mainLink}user/shopping-list-items/2/status/INPROGRESS?lang=ua`); - expect(req.request.method).toBe('PATCH'); - req.flush([SHOPLISTITEMTWO]); - }); - - it('should update Custom Shop Item Status', () => { - service.updateCustomShopItemStatus(1, SHOPLISTITEMTWO).subscribe((data) => { - expect(data).toEqual(SHOPLISTITEMTWO); - }); - const req = httpMock.expectOne(`${mainLink}custom/shopping-list-items/1/custom-shopping-list-items?itemId=2&status=INPROGRESS`); - expect(req.request.method).toBe('PATCH'); - req.flush(SHOPLISTITEMTWO); - }); - - it('should update Habit Shop List', () => { - service.updateHabitShopList(UPDATEHABITSHOPLIST).subscribe((data) => { - expect(data).toEqual(null); - }); - const req = httpMock.expectOne(`${mainLink}habit/assign/2/allUserAndCustomList?lang=ua`); - expect(req.request.method).toBe('PUT'); - req.flush(null); - }); -}); diff --git a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/shopping-list.service.ts b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/shopping-list.service.ts deleted file mode 100644 index a4358e8809..0000000000 --- a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/shopping-list.service.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { Injectable } from '@angular/core'; -import { Observable } from 'rxjs'; -import { HttpClient } from '@angular/common/http'; -import { mainLink } from '../../../../../../links'; -import { AllShoppingLists, HabitUpdateShopList, ShoppingList } from '@user-models/shoppinglist.interface'; - -@Injectable({ - providedIn: 'root' -}) -export class ShoppingListService { - constructor(private http: HttpClient) {} - - getHabitShopList(habitId: number): Observable { - return this.http.get(`${mainLink}habit/${habitId}/shopping-list`); - } - - getHabitAllShopLists(habitAssignId: number, lang: string): Observable { - return this.http.get(`${mainLink}habit/assign/${habitAssignId}/allUserAndCustomList?lang=${lang}`); - } - - getUserShoppingLists(lang: string): Observable { - return this.http.get(`${mainLink}habit/assign/allUserAndCustomShoppingListsInprogress?lang=${lang}`); - } - - updateStandardShopItemStatus(item: ShoppingList, lang: string): Observable { - const body = {}; - return this.http.patch(`${mainLink}user/shopping-list-items/${item.id}/status/${item.status}?lang=${lang}`, body); - } - - updateCustomShopItemStatus(userId: number, item: ShoppingList): Observable { - const body = {}; - return this.http.patch( - `${mainLink}custom/shopping-list-items/${userId}/custom-shopping-list-items?itemId=${item.id}&status=${item.status}`, - body - ); - } - - updateHabitShopList(habitShopList: HabitUpdateShopList) { - const assignId = habitShopList.habitAssignId; - const body = { - customShoppingListItemDto: habitShopList.customShopList, - userShoppingListItemDto: habitShopList.standardShopList - }; - return this.http.put(`${mainLink}habit/assign/${assignId}/allUserAndCustomList?lang=${habitShopList.lang}`, body); - } -} diff --git a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/habit-edit-shopping-list.component.html b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.html similarity index 85% rename from src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/habit-edit-shopping-list.component.html rename to src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.html index cd39734542..62ae3bef0b 100644 --- a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/habit-edit-shopping-list.component.html +++ b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.html @@ -1,10 +1,10 @@ -
+
{{ 'user.habit.to-do.to-do-list' | translate }}
-
-
    -
  • +
    +
      +
    -
    - {{ 'user.habit.to-do.no-shopping-items' | translate }} +
    + {{ 'user.habit.to-do.no-to-do-items' | translate }}
    diff --git a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/habit-edit-shopping-list.component.scss b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.scss similarity index 97% rename from src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/habit-edit-shopping-list.component.scss rename to src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.scss index dcc5be3e71..988d0769e3 100644 --- a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/habit-edit-shopping-list.component.scss +++ b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.scss @@ -1,4 +1,4 @@ -.shop-list-container { +.to-do-list-container { position: relative; display: flex; flex-direction: column; @@ -40,7 +40,7 @@ flex-direction: column; height: 100%; - .shop-list { + .to-do-list { display: flex; flex-direction: column; height: 190px; @@ -83,7 +83,7 @@ } } - .shop-list-edit-mode { + .to-do-list-edit-mode { height: 112px; } @@ -183,7 +183,7 @@ form { } @media (max-width: 560px) { - .shop-list-container .title { + .to-do-list-container .title { font-size: 16px; margin-bottom: 20px; } diff --git a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/habit-edit-shopping-list.component.spec.ts b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.spec.ts similarity index 68% rename from src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/habit-edit-shopping-list.component.spec.ts rename to src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.spec.ts index 5b958838b0..161a9a45b7 100644 --- a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/habit-edit-shopping-list.component.spec.ts +++ b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.spec.ts @@ -2,27 +2,27 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'; import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { ActivatedRoute } from '@angular/router'; import { HabitService } from '@global-service/habit/habit.service'; -import { ShoppingList } from '@global-user/models/shoppinglist.interface'; +import { ToDoList } from '@global-user/models/to-do-list.interface'; import { TranslateModule } from '@ngx-translate/core'; import { of } from 'rxjs'; import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar'; import { TodoStatus } from '../../models/todo-status.enum'; -import { HabitEditShoppingListComponent } from './habit-edit-shopping-list.component'; -import { ShoppingListService } from './shopping-list.service'; +import { HabitEditToDoListComponent } from './habit-edit-to-do-list.component'; +import { ToDoListService } from './to-do-list.service'; import { FormControl, FormGroup } from '@angular/forms'; import { MatDialog } from '@angular/material/dialog'; import { SimpleChange, SimpleChanges } from '@angular/core'; -describe('HabitEditShoppingListComponent', () => { - let component: HabitEditShoppingListComponent; - let fixture: ComponentFixture; +describe('HabitEditToDoListComponent', () => { + let component: HabitEditToDoListComponent; + let fixture: ComponentFixture; let snackBar: MatSnackBar; const mockActivatedRoute = { params: of({ habitId: 2 }) }; - const mockList: ShoppingList[] = [ + const mockList: ToDoList[] = [ { id: 1, status: TodoStatus.active, @@ -36,7 +36,7 @@ describe('HabitEditShoppingListComponent', () => { selected: false } ]; - const mockItem: ShoppingList = { + const mockItem: ToDoList = { id: 234, status: TodoStatus.active, text: 'Item 2', @@ -51,10 +51,10 @@ describe('HabitEditShoppingListComponent', () => { const matDialogRefMock = jasmine.createSpyObj(['open', 'afterClosed']); matDialogRefMock.open.and.returnValue({ afterClosed: () => of(true) }); TestBed.configureTestingModule({ - declarations: [HabitEditShoppingListComponent], + declarations: [HabitEditToDoListComponent], imports: [HttpClientTestingModule, TranslateModule.forRoot(), MatSnackBarModule], providers: [ - ShoppingListService, + ToDoListService, HabitService, MatSnackBar, { provide: ActivatedRoute, useValue: mockActivatedRoute }, @@ -64,18 +64,18 @@ describe('HabitEditShoppingListComponent', () => { })); beforeEach(() => { - fixture = TestBed.createComponent(HabitEditShoppingListComponent); + fixture = TestBed.createComponent(HabitEditToDoListComponent); component = fixture.componentInstance; snackBar = TestBed.inject(MatSnackBar); fixture.detectChanges(); - component.shopList = []; + component.toDoList = []; }); it('should create', () => { expect(component).toBeTruthy(); }); - it('should add item to shop list on additem', () => { + it('should add item to toDo list on additem', () => { const newList = [ { id: null, @@ -85,9 +85,9 @@ describe('HabitEditShoppingListComponent', () => { selected: true } ]; - component.shopList = []; + component.toDoList = []; component.addItem('test'); - expect(component.shopList).toEqual(newList); + expect(component.toDoList).toEqual(newList); }); it('should setValue empty string on add item', () => { @@ -98,49 +98,49 @@ describe('HabitEditShoppingListComponent', () => { it('should return disableCheck if isAcquired is true', () => { component.isAcquired = true; - const result = component.getCheckIcon({} as ShoppingList); + const result = component.getCheckIcon({} as ToDoList); expect(result).toBe(component.img.disableCheck); }); it('should return doneCheck if item status is done', () => { - const item: ShoppingList = { status: TodoStatus.done, text: mockText1, id: null }; + const item: ToDoList = { status: TodoStatus.done, text: mockText1, id: null }; const result = component.getCheckIcon(item); expect(result).toBe(component.img.doneCheck); }); it('should return minusCheck if item is selected', () => { - const item: ShoppingList = { selected: true, status: TodoStatus.inprogress, text: mockText2, id: null }; + const item: ToDoList = { selected: true, status: TodoStatus.inprogress, text: mockText2, id: null }; const result = component.getCheckIcon(item); expect(result).toBe(component.img.minusCheck); }); it('should return plusCheck if item is not selected and status is not done', () => { - const item: ShoppingList = { selected: false, status: TodoStatus.inprogress, text: mockText3, id: null }; + const item: ToDoList = { selected: false, status: TodoStatus.inprogress, text: mockText3, id: null }; const result = component.getCheckIcon(item); expect(result).toBe(component.img.plusCheck); }); it('should select item and change status to in progress if selected', () => { - const item: ShoppingList = mockList[0]; - component.shopList = [item]; + const item: ToDoList = mockList[0]; + component.toDoList = [item]; component.selectItem(item); - expect(component.shopList[0].selected).toBe(true); - expect(component.shopList[0].status).toBe(TodoStatus.inprogress); + expect(component.toDoList[0].selected).toBe(true); + expect(component.toDoList[0].status).toBe(TodoStatus.inprogress); }); it('should deselect item and change status to active if not selected', () => { - const item: ShoppingList = { id: null, status: TodoStatus.inprogress, text: 'item1', selected: true }; - component.shopList = [item]; + const item: ToDoList = { id: null, status: TodoStatus.inprogress, text: 'item1', selected: true }; + component.toDoList = [item]; component.selectItem(item); - expect(component.shopList[0].selected).toBe(false); - expect(component.shopList[0].status).toBe(TodoStatus.active); + expect(component.toDoList[0].selected).toBe(false); + expect(component.toDoList[0].status).toBe(TodoStatus.active); }); it('should move selected item to the top of the list', () => { - component.shopList = [...mockList]; + component.toDoList = [...mockList]; component.selectItem(mockList[1]); - expect(component.shopList[0]).toBe(mockList[1]); - expect(component.shopList[1]).toBe(mockList[0]); + expect(component.toDoList[0]).toBe(mockList[1]); + expect(component.toDoList[1]).toBe(mockList[0]); }); it('should not open snackbar if form is valid', () => { diff --git a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/habit-edit-shopping-list.component.ts b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.ts similarity index 73% rename from src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/habit-edit-shopping-list.component.ts rename to src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.ts index 598816d45e..7e4b973218 100644 --- a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-shopping-list/habit-edit-shopping-list.component.ts +++ b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.ts @@ -3,22 +3,22 @@ import { Subject, Subscription } from 'rxjs'; import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms'; import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; import { TranslateService } from '@ngx-translate/core'; -import { ShoppingList } from '../../../../models/shoppinglist.interface'; +import { ToDoList } from '../../../../models/to-do-list.interface'; import { TodoStatus } from '../../models/todo-status.enum'; import { MatSnackBarComponent } from '@global-errors/mat-snack-bar/mat-snack-bar.component'; -import { FIELD_SYMBOLS_LIMIT, HABIT_SHOPPING_LIST_CHECK, SHOPPING_ITEM_NAME_LIMIT } from '../../const/data.const'; +import { FIELD_SYMBOLS_LIMIT, HABIT_TO_DO_LIST_CHECK, TO_DO_ITEM_NAME_LIMIT } from '../../const/data.const'; import { MatDialog } from '@angular/material/dialog'; import { WarningPopUpComponent } from '@shared/components'; import { take } from 'rxjs/operators'; @Component({ - selector: 'app-habit-edit-shopping-list', - templateUrl: './habit-edit-shopping-list.component.html', - styleUrls: ['./habit-edit-shopping-list.component.scss'], + selector: 'app-habit-edit-to-do-list', + templateUrl: './habit-edit-to-do-list.component.html', + styleUrls: ['./habit-edit-to-do-list.component.scss'], providers: [MatSnackBarComponent] }) -export class HabitEditShoppingListComponent implements OnInit, OnChanges, OnDestroy { - @Input() shopList: ShoppingList[] = []; +export class HabitEditToDoListComponent implements OnInit, OnChanges, OnDestroy { + @Input() toDoList: ToDoList[] = []; @Input() isAcquired = false; private fieldSymbolsLimit = FIELD_SYMBOLS_LIMIT; @@ -29,10 +29,10 @@ export class HabitEditShoppingListComponent implements OnInit, OnChanges, OnDest userId: number; private destroySub: Subject = new Subject(); private langChangeSub: Subscription; - shoppingItemNameLimit = SHOPPING_ITEM_NAME_LIMIT; + toDoItemNameLimit = TO_DO_ITEM_NAME_LIMIT; todoStatus = TodoStatus; isEditMode = false; - private shopListBeforeEditing: ShoppingList[] = []; + private toDoListBeforeEditing: ToDoList[] = []; isListChanged: boolean; private confirmDialogConfig = { hasBackdrop: true, @@ -48,9 +48,9 @@ export class HabitEditShoppingListComponent implements OnInit, OnChanges, OnDest private deleteItemTitle = `user.habit.to-do.item-delete-pop-up-title`; private cancelEditingTitle = `user.habit.to-do.cancel-pop-up-title`; - img = HABIT_SHOPPING_LIST_CHECK; + img = HABIT_TO_DO_LIST_CHECK; - @Output() newList = new EventEmitter(); + @Output() newList = new EventEmitter(); constructor( private snackBar: MatSnackBarComponent, @@ -62,12 +62,12 @@ export class HabitEditShoppingListComponent implements OnInit, OnChanges, OnDest ngOnInit() { this.subscribeToLangChange(); this.userId = this.localStorageService.getUserId(); - this.newList.emit(this.shopList); + this.newList.emit(this.toDoList); } ngOnChanges(changes: SimpleChanges): void { - if (changes.shopList) { - this.shopList.forEach((el) => (el.selected = el.status === TodoStatus.inprogress || el.status === TodoStatus.done)); + if (changes.toDoList) { + this.toDoList.forEach((el) => (el.selected = el.status === TodoStatus.inprogress || el.status === TodoStatus.done)); this.placeItemInOrder(); } } @@ -86,7 +86,7 @@ export class HabitEditShoppingListComponent implements OnInit, OnChanges, OnDest }); } - getCheckIcon(item: ShoppingList): string { + getCheckIcon(item: ToDoList): string { if (this.isAcquired) { return this.img.disableCheck; } @@ -106,16 +106,16 @@ export class HabitEditShoppingListComponent implements OnInit, OnChanges, OnDest selected: true }; if (newItem.text) { - this.shopList = [newItem, ...this.shopList]; + this.toDoList = [newItem, ...this.toDoList]; } this.item.setValue(''); this.placeItemInOrder(); - this.newList.emit(this.shopList); + this.newList.emit(this.toDoList); } - selectItem(item: ShoppingList): void { + selectItem(item: ToDoList): void { this.isListChanged = true; - this.shopList.map((element) => { + this.toDoList.map((element) => { if (element.text === item.text) { element.selected = !item.selected; element.status = item.selected ? TodoStatus.inprogress : TodoStatus.active; @@ -123,17 +123,17 @@ export class HabitEditShoppingListComponent implements OnInit, OnChanges, OnDest return element; }); if (item.selected) { - const index = this.shopList.indexOf(item); - this.shopList.splice(index, 1); - this.shopList = [item, ...this.shopList]; + const index = this.toDoList.indexOf(item); + this.toDoList.splice(index, 1); + this.toDoList = [item, ...this.toDoList]; } this.placeItemInOrder(); - this.newList.emit(this.shopList); + this.newList.emit(this.toDoList); } private placeItemInOrder(): void { const statusOrder = { DONE: 1, INPROGRESS: 2, ACTIVE: 3 }; - this.shopList.sort((a, b) => { + this.toDoList.sort((a, b) => { const statusDifference = statusOrder[a.status] - statusOrder[b.status]; const orderCustom = a.custom && !b.custom ? -1 : 1; return statusDifference || orderCustom; @@ -149,8 +149,8 @@ export class HabitEditShoppingListComponent implements OnInit, OnChanges, OnDest .pipe(take(1)) .subscribe((confirm) => { if (confirm) { - this.shopList = this.shopList.filter((elem) => elem.text !== text); - this.newList.emit(this.shopList); + this.toDoList = this.toDoList.filter((elem) => elem.text !== text); + this.newList.emit(this.toDoList); } }); } @@ -164,18 +164,18 @@ export class HabitEditShoppingListComponent implements OnInit, OnChanges, OnDest changeEditMode(): void { if (!this.isEditMode) { this.isListChanged = false; - this.shopListBeforeEditing = []; - this.shopList.forEach((el) => this.shopListBeforeEditing.push({ ...el })); + this.toDoListBeforeEditing = []; + this.toDoList.forEach((el) => this.toDoListBeforeEditing.push({ ...el })); } this.isEditMode = !this.isEditMode; } private isListItemsChanged(): boolean { - const isItemsChanged = !this.shopList.every((el) => { - const itemBeforeEditing = this.shopListBeforeEditing.find((item) => item.id === el.id); + const isItemsChanged = !this.toDoList.every((el) => { + const itemBeforeEditing = this.toDoListBeforeEditing.find((item) => item.id === el.id); return itemBeforeEditing && Object.keys(el).every((key) => el[key] === itemBeforeEditing[key]); }); - const isLengthChanged = this.shopList.length !== this.shopListBeforeEditing.length; + const isLengthChanged = this.toDoList.length !== this.toDoListBeforeEditing.length; return isItemsChanged || isLengthChanged; } @@ -188,11 +188,11 @@ export class HabitEditShoppingListComponent implements OnInit, OnChanges, OnDest .pipe(take(1)) .subscribe((confirm) => { if (confirm) { - this.shopList = []; - this.shopListBeforeEditing.forEach((el) => { - this.shopList.push(el); + this.toDoList = []; + this.toDoListBeforeEditing.forEach((el) => { + this.toDoList.push(el); }); - this.newList.emit(this.shopList); + this.newList.emit(this.toDoList); this.isEditMode = false; } }); diff --git a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/to-do-list.service.spec.ts b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/to-do-list.service.spec.ts new file mode 100644 index 0000000000..7bccc38b57 --- /dev/null +++ b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/to-do-list.service.spec.ts @@ -0,0 +1,88 @@ +import { TestBed } from '@angular/core/testing'; +import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; + +import { ToDoListService } from './to-do-list.service'; +import { TranslateModule, TranslateService } from '@ngx-translate/core'; +import { environment } from '@environment/environment'; +import { + ALLUSERTODOLISTS, + CUSTOMTODOITEM, + TODOLIST, + TODOLISTITEMONE, + TODOLISTITEMTWO, + UPDATEHABITTODOLIST +} from '../../mocks/to-do-list-mock'; + +describe('ToDoListService', () => { + let service: ToDoListService; + let httpMock: HttpTestingController; + + const mainLink = environment.backendLink; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule, TranslateModule.forRoot()], + providers: [ToDoListService, TranslateService] + }); + + service = TestBed.inject(ToDoListService); + httpMock = TestBed.inject(HttpTestingController); + }); + + afterEach(() => { + httpMock.verify(); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); + + it('should return allToDoList by habitId on getHabitAllToDoLists', () => { + service.getHabitAllToDoLists(2, 'en').subscribe((data) => { + expect(data).toEqual(ALLUSERTODOLISTS); + }); + + const req = httpMock.expectOne(`${mainLink}habit/assign/2/allUserAndCustomList?lang=en`); + expect(req.request.responseType).toEqual('json'); + expect(req.request.method).toBe('GET'); + req.flush(ALLUSERTODOLISTS); + }); + + it('should return all user toDoList by lang on getUserToDoLists', () => { + service.getUserToDoLists('ua').subscribe((data) => { + expect(data).toEqual([ALLUSERTODOLISTS]); + }); + + const req = httpMock.expectOne(`${mainLink}habit/assign/allUserAndCustomToDoListsInprogress?lang=ua`); + expect(req.request.responseType).toEqual('json'); + expect(req.request.method).toBe('GET'); + req.flush([ALLUSERTODOLISTS]); + }); + + it('should update Standard ToDo Item Status', () => { + service.updateStandardToDoItemStatus(TODOLISTITEMTWO, 'ua').subscribe((data) => { + expect(data).toEqual([TODOLISTITEMTWO]); + }); + const req = httpMock.expectOne(`${mainLink}user/to-do-list-items/2/status/INPROGRESS?lang=ua`); + expect(req.request.method).toBe('PATCH'); + req.flush([TODOLISTITEMTWO]); + }); + + xit('should update Custom ToDo Item Status', () => { + service.updateCustomToDoItemStatus(1, TODOLISTITEMTWO).subscribe((data) => { + expect(data).toEqual(TODOLISTITEMTWO); + }); + const req = httpMock.expectOne(`${mainLink}custom/to-do-list-items/1/custom-to-do-list-items?itemId=2&status=INPROGRESS`); + expect(req.request.method).toBe('PATCH'); + req.flush(TODOLISTITEMTWO); + }); + + it('should update Habit ToDo List', () => { + service.updateHabitToDoList(UPDATEHABITTODOLIST).subscribe((data) => { + expect(data).toEqual(null); + }); + const req = httpMock.expectOne(`${mainLink}habit/assign/2/allUserAndCustomList?lang=ua`); + expect(req.request.method).toBe('PUT'); + req.flush(null); + }); +}); diff --git a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/to-do-list.service.ts b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/to-do-list.service.ts new file mode 100644 index 0000000000..5ff0618901 --- /dev/null +++ b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/to-do-list.service.ts @@ -0,0 +1,48 @@ +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { HttpClient } from '@angular/common/http'; +import { mainLink } from '../../../../../../links'; +import { AllToDoLists, HabitUpdateToDoList, ToDoList } from '@global-user/models/to-do-list.interface'; + +@Injectable({ + providedIn: 'root' +}) +export class ToDoListService { + constructor(private http: HttpClient) {} + + getHabitToDoList(habitId: number): Observable { + return this.http.get(`${mainLink}habit/${habitId}/to-do-list`); + } + + getHabitAllToDoLists(habitAssignId: number, lang: string): Observable { + return this.http.get(`${mainLink}habit/assign/${habitAssignId}/allUserAndCustomList?lang=${lang}`); + } + + // + getUserToDoLists(lang: string): Observable { + return this.http.get(`${mainLink}habit/assign/allUserAndCustomToDoListsInprogress?lang=${lang}`); + } + + updateStandardToDoItemStatus(item: ToDoList, lang: string): Observable { + const body = {}; + return this.http.patch(`${mainLink}user/to-do-list-items/${item.id}/status/${item.status}?lang=${lang}`, body); + } + + // + updateCustomToDoItemStatus(userId: number, item: ToDoList): Observable { + const body = {}; + return this.http.patch( + `${mainLink}custom/to-do-list-items/${userId}/custom-to-do-ping-list-items?itemId=${item.id}&status=${item.status}`, + body + ); + } + + updateHabitToDoList(habitToDoList: HabitUpdateToDoList) { + const assignId = habitToDoList.habitAssignId; + const body = { + customToDoListItemDto: habitToDoList.customToDoList, + userToDoListItemDto: habitToDoList.standardToDoList + }; + return this.http.put(`${mainLink}habit/assign/${assignId}/allUserAndCustomList?lang=${habitToDoList.lang}`, body); + } +} diff --git a/src/app/main/component/user/components/habit/all-habits/all-habits.component.spec.ts b/src/app/main/component/user/components/habit/all-habits/all-habits.component.spec.ts index bc68617a40..1906264791 100644 --- a/src/app/main/component/user/components/habit/all-habits/all-habits.component.spec.ts +++ b/src/app/main/component/user/components/habit/all-habits/all-habits.component.spec.ts @@ -84,7 +84,7 @@ describe('AllHabitsComponent', () => { rating: null, showEcoPlace: true, showLocation: true, - showShoppingList: true, + showToDoList: true, socialNetworks: [{ id: 1, url: defaultImagePath }] } as EditProfileModel; diff --git a/src/app/main/component/user/components/habit/const/data.const.ts b/src/app/main/component/user/components/habit/const/data.const.ts index 4829c7890b..0007332634 100644 --- a/src/app/main/component/user/components/habit/const/data.const.ts +++ b/src/app/main/component/user/components/habit/const/data.const.ts @@ -4,7 +4,7 @@ export const HABIT_TAGS_MAXLENGTH = 3; export const FIELD_SYMBOLS_LIMIT = 2048; -export const SHOPPING_ITEM_NAME_LIMIT = 20; +export const TO_DO_ITEM_NAME_LIMIT = 20; export const HABIT_COMPLEXITY_LIST = [ { value: 1, name: 'user.habit.add-new-habit.difficulty.easy', alt: 'Easy difficulty' }, @@ -23,7 +23,7 @@ export const STAR_IMAGES = { GREEN: 'assets/img/icon/star-1.png' }; -export const HABIT_SHOPPING_LIST_CHECK = { +export const HABIT_TO_DO_LIST_CHECK = { doneCheck: 'assets/icons/habits/filled-check-circle.svg', inprogressCheck: 'assets/icons/habits/lined-green-circle.svg', plusCheck: 'assets/icons/habits/doted-plus-green-circle.svg', diff --git a/src/app/main/component/user/components/habit/mocks/habit-assigned-mock.ts b/src/app/main/component/user/components/habit/mocks/habit-assigned-mock.ts index 9262fb9e98..3c7b676910 100644 --- a/src/app/main/component/user/components/habit/mocks/habit-assigned-mock.ts +++ b/src/app/main/component/user/components/habit/mocks/habit-assigned-mock.ts @@ -26,7 +26,7 @@ export const DEFAULTHABIT: HabitInterface = { id: 1, usersIdWhoCreatedCustomHabit: 33, image: 'https://www.testgreencity.ga/assets/img/habits/man.svg', - shoppingListItems: [], + toDoListItems: [], tags: [], isCustomHabit: false, isAssigned: false @@ -49,7 +49,7 @@ export const CUSTOMHABIT: HabitInterface = { id: 2, usersIdWhoCreatedCustomHabit: 50, image: '', - shoppingListItems: [], + toDoListItems: [], tags: [], isCustomHabit: true, isAssigned: false @@ -70,7 +70,7 @@ export const DEFAULTFULLINFOHABIT: HabitAssignInterface = { { enrollDate: '2023-04-14', id: 2 }, { enrollDate: '2023-04-10', id: 3 } ], - shoppingListItems: [ + toDoListItems: [ { id: 6, status: TodoStatus.active, @@ -95,7 +95,7 @@ export const CUSTOMFULLINFOHABIT: HabitAssignInterface = { { enrollDate: 'monday', id: 2 }, { enrollDate: 'wednesday', id: 3 } ], - shoppingListItems: [ + toDoListItems: [ { id: 6, status: TodoStatus.active, @@ -172,7 +172,7 @@ export const DEFAULTFULLINFOHABIT_2: HabitAssignInterface = { { enrollDate: '2023-04-14', id: 2 }, { enrollDate: '2023-04-10', id: 3 } ], - shoppingListItems: [ + toDoListItems: [ { id: 6, status: TodoStatus.active, diff --git a/src/app/main/component/user/components/habit/mocks/habit-mock.ts b/src/app/main/component/user/components/habit/mocks/habit-mock.ts index 3bdbde1b77..5bf49447f4 100644 --- a/src/app/main/component/user/components/habit/mocks/habit-mock.ts +++ b/src/app/main/component/user/components/habit/mocks/habit-mock.ts @@ -82,7 +82,7 @@ export const MOCK_CUSTOM_HABIT: CustomHabit = { duration: 30, tagIds: [1, 2], image: 'testImage', - shopList: [ + toDoList: [ { id: 2, text: 'Collapsible Silicone Water Bottle', @@ -107,7 +107,7 @@ export const MOCK_CUSTOM_HABIT_RESPONSE: CustomHabitDtoRequest = { defaultDuration: MOCK_CUSTOM_HABIT.duration, image: MOCK_CUSTOM_HABIT.image, tagIds: MOCK_CUSTOM_HABIT.tagIds, - customShoppingListItemDto: MOCK_CUSTOM_HABIT.shopList + customToDoListItemDto: MOCK_CUSTOM_HABIT.toDoList }; export const NEW_HABIT_ARRAY_MOCK: NewHabitDto[] = [new NewHabitDto(1), new NewHabitDto(2), new NewHabitDto(3)]; diff --git a/src/app/main/component/user/components/habit/mocks/shopping-list-mock.ts b/src/app/main/component/user/components/habit/mocks/to-do-list-mock.ts similarity index 73% rename from src/app/main/component/user/components/habit/mocks/shopping-list-mock.ts rename to src/app/main/component/user/components/habit/mocks/to-do-list-mock.ts index 490c47b531..b280cef10f 100644 --- a/src/app/main/component/user/components/habit/mocks/shopping-list-mock.ts +++ b/src/app/main/component/user/components/habit/mocks/to-do-list-mock.ts @@ -1,36 +1,36 @@ -import { AllShoppingLists, CustomShoppingItem, HabitUpdateShopList, ShoppingList } from '@user-models/shoppinglist.interface'; +import { AllToDoLists, CustomToDoItem, HabitUpdateToDoList, ToDoList } from '@global-user/models/to-do-list.interface'; import { TodoStatus } from '../models/todo-status.enum'; import { HabitListInterface } from '@global-user/components/habit/models/interfaces/habit.interface'; import { CustomHabit, CustomHabitDtoRequest } from '@global-user/components/habit/models/interfaces/custom-habit.interface'; import { FriendProfilePicturesArrayModel } from '@user-models/friend.model'; -export const SHOPLISTITEMONE: ShoppingList = { +export const TODOLISTITEMONE: ToDoList = { id: 1, text: 'Reusable stainless steel water bottle', status: TodoStatus.active }; -export const SHOPLISTITEMTWO: ShoppingList = { +export const TODOLISTITEMTWO: ToDoList = { id: 2, text: 'Collapsible Silicone Water Bottle', status: TodoStatus.inprogress }; -export const SHOPLIST: ShoppingList[] = [SHOPLISTITEMONE, SHOPLISTITEMTWO]; +export const TODOLIST: ToDoList[] = [TODOLISTITEMONE, TODOLISTITEMTWO]; -export const ALLUSERSHOPLISTS: AllShoppingLists = { - userShoppingListItemDto: [SHOPLISTITEMONE], - customShoppingListItemDto: [SHOPLISTITEMTWO] +export const ALLUSERTODOLISTS: AllToDoLists = { + userToDoListItemDto: [TODOLISTITEMONE], + customToDoListItemDto: [TODOLISTITEMTWO] }; -export const UPDATEHABITSHOPLIST: HabitUpdateShopList = { +export const UPDATEHABITTODOLIST: HabitUpdateToDoList = { habitAssignId: 2, - standardShopList: [SHOPLISTITEMONE], - customShopList: [SHOPLISTITEMTWO], + standardToDoList: [TODOLISTITEMONE], + customToDoList: [TODOLISTITEMTWO], lang: 'ua' }; -export const CUSTOMSHOPITEM: CustomShoppingItem = { +export const CUSTOMTODOITEM: CustomToDoItem = { text: 'New item' }; @@ -57,8 +57,8 @@ export const MOCK_HABITS: HabitListInterface = { habitAssignStatus: 'testStatus', isCustomHabit: true, usersIdWhoCreatedCustomHabit: 1, - customShoppingListItems: [], - shoppingListItems: [], + customToDoListItems: [], + toDoListItems: [], tags: ['tag1', 'tag2'] } ], @@ -73,7 +73,7 @@ export const MOCK_CUSTOM_HABIT: CustomHabit = { duration: 30, tagIds: [1, 2], image: 'testImage', - shopList: ALLUSERSHOPLISTS.customShoppingListItemDto + toDoList: ALLUSERTODOLISTS.customToDoListItemDto }; export const MOCK_CUSTOM_HABIT_RESPONSE: CustomHabitDtoRequest = { @@ -92,7 +92,7 @@ export const MOCK_CUSTOM_HABIT_RESPONSE: CustomHabitDtoRequest = { defaultDuration: MOCK_CUSTOM_HABIT.duration, image: MOCK_CUSTOM_HABIT.image, tagIds: MOCK_CUSTOM_HABIT.tagIds, - customShoppingListItemDto: MOCK_CUSTOM_HABIT.shopList + customToDoListItemDto: MOCK_CUSTOM_HABIT.toDoList }; export const MOCK_FRIEND_PROFILE_PICTURES: FriendProfilePicturesArrayModel[] = [ diff --git a/src/app/main/component/user/components/habit/models/interfaces/custom-habit.interface.ts b/src/app/main/component/user/components/habit/models/interfaces/custom-habit.interface.ts index 45601b36b1..2cb1d0e92e 100644 --- a/src/app/main/component/user/components/habit/models/interfaces/custom-habit.interface.ts +++ b/src/app/main/component/user/components/habit/models/interfaces/custom-habit.interface.ts @@ -1,4 +1,4 @@ -import { ShoppingList } from '@user-models/shoppinglist.interface'; +import { ToDoList } from '@global-user/models/to-do-list.interface'; import { HabitTranslationInterface } from './habit.interface'; export interface CustomHabitDtoRequest { @@ -7,7 +7,7 @@ export interface CustomHabitDtoRequest { defaultDuration: number; image: string; tagIds: number[]; - customShoppingListItemDto: ShoppingList[]; + customToDoListItemDto: ToDoList[]; id?: number; userId?: number; } @@ -19,5 +19,5 @@ export interface CustomHabit { duration: number; tagIds: number[]; image: string; - shopList: ShoppingList[]; + toDoList: ToDoList[]; } diff --git a/src/app/main/component/user/components/habit/models/interfaces/habit-assign.interface.ts b/src/app/main/component/user/components/habit/models/interfaces/habit-assign.interface.ts index 11fadba3f2..e4e3f8037d 100644 --- a/src/app/main/component/user/components/habit/models/interfaces/habit-assign.interface.ts +++ b/src/app/main/component/user/components/habit/models/interfaces/habit-assign.interface.ts @@ -1,5 +1,5 @@ import { HabitStatus } from '@global-models/habit/HabitStatus.enum'; -import { ShoppingList } from '@user-models/shoppinglist.interface'; +import { ToDoList } from '@global-user/models/to-do-list.interface'; import { HabitInterface } from './habit.interface'; export interface HabitAssignInterface { @@ -16,7 +16,7 @@ export interface HabitAssignInterface { habitStreak: number; lastEnrollmentDate: Date; habitStatusCalendarDtoList: Array; - shoppingListItems: Array; + toDoListItems: Array; progressNotificationHasDisplayed?: boolean; } diff --git a/src/app/main/component/user/components/habit/models/interfaces/habit.interface.ts b/src/app/main/component/user/components/habit/models/interfaces/habit.interface.ts index 2ca88d2ffa..464574d58c 100644 --- a/src/app/main/component/user/components/habit/models/interfaces/habit.interface.ts +++ b/src/app/main/component/user/components/habit/models/interfaces/habit.interface.ts @@ -1,4 +1,4 @@ -import { ShoppingList } from '@user-models/shoppinglist.interface'; +import { ToDoList } from '@global-user/models/to-do-list.interface'; export interface HabitInterface { defaultDuration: number; @@ -12,8 +12,8 @@ export interface HabitInterface { habitAssignStatus?: string; isCustomHabit: boolean; usersIdWhoCreatedCustomHabit: number; - customShoppingListItems?: ShoppingList[]; - shoppingListItems?: ShoppingList[]; + customToDoListItems?: ToDoList[]; + toDoListItems?: ToDoList[]; tags: Array; duration?: number; } diff --git a/src/app/main/component/user/components/index.ts b/src/app/main/component/user/components/index.ts index d511b52fa1..ba84fa28a4 100644 --- a/src/app/main/component/user/components/index.ts +++ b/src/app/main/component/user/components/index.ts @@ -23,5 +23,5 @@ export { OneHabitComponent } from './profile/profile-dashboard/one-habit/one-hab export { ProfileWidgetComponent } from './profile/profile-widget/profile-widget.component'; export { ProfileHeaderComponent } from './profile/profile-widget/profile-header/profile-header.component'; export { ProfileProgressComponent } from './profile/profile-widget/profile-progress/profile-progress.component'; -export { ShoppingListComponent } from './profile/shopping-list/shopping-list.component'; +export { ToDoListComponent } from './profile/to-do-list/to-do-list.component'; export { UserSettingComponent } from './user-setting/user-setting.component'; diff --git a/src/app/main/component/user/components/profile/edit-profile/edit-profile-form-builder.ts b/src/app/main/component/user/components/profile/edit-profile/edit-profile-form-builder.ts index e31a5b7c77..3594c51be5 100644 --- a/src/app/main/component/user/components/profile/edit-profile/edit-profile-form-builder.ts +++ b/src/app/main/component/user/components/profile/edit-profile/edit-profile-form-builder.ts @@ -19,7 +19,7 @@ export class EditProfileFormBuilder { credo: ['', Validators.maxLength(170)], showLocation: [false], showEcoPlace: [false], - showShoppingList: [false], + showToDoList: [false], socialNetworks: [''], emailPreferences: this.createEmailPreferencesGroup(null) }); @@ -94,7 +94,7 @@ export class EditProfileFormBuilder { credo: [editForm.userCredo, Validators.maxLength(170)], showLocation: [editForm.showLocation], showEcoPlace: [editForm.showEcoPlace], - showShoppingList: [editForm.showShoppingList], + showToDoList: [editForm.showToDoList], socialNetworks: [editForm.socialNetworks], emailPreferences: this.createEmailPreferencesGroup(editForm.notificationPreferences) }); diff --git a/src/app/main/component/user/components/profile/edit-profile/edit-profile.component.html b/src/app/main/component/user/components/profile/edit-profile/edit-profile.component.html index 6c12b1a315..4697dff660 100644 --- a/src/app/main/component/user/components/profile/edit-profile/edit-profile.component.html +++ b/src/app/main/component/user/components/profile/edit-profile/edit-profile.component.html @@ -67,9 +67,9 @@

    {{ 'user.edit-profile.edit-profile' | translate }}

diff --git a/src/app/main/component/user/components/profile/edit-profile/edit-profile.component.spec.ts b/src/app/main/component/user/components/profile/edit-profile/edit-profile.component.spec.ts index 20960589f4..e86958df65 100644 --- a/src/app/main/component/user/components/profile/edit-profile/edit-profile.component.spec.ts +++ b/src/app/main/component/user/components/profile/edit-profile/edit-profile.component.spec.ts @@ -186,7 +186,7 @@ describe('EditProfileComponent', () => { userCredo: '', showLocation: '', showEcoPlace: '', - showShoppingList: '', + showToDoList: '', socialNetworks: [] }; component.editProfileForm.value.city = ''; @@ -194,7 +194,7 @@ describe('EditProfileComponent', () => { component.editProfileForm.value.credo = ''; component.editProfileForm.value.showLocation = ''; component.editProfileForm.value.showEcoPlace = ''; - component.editProfileForm.value.showShoppingList = ''; + component.editProfileForm.value.showToDoList = ''; component.socialNetworksToServer = []; }); @@ -264,7 +264,7 @@ describe('EditProfileComponent', () => { rating: 658, showEcoPlace: true, showLocation: true, - showShoppingList: true, + showToDoList: true, socialNetworks: [{ id: 220, url: 'http://instagram.com/profile' }] } as EditProfileModel; }); diff --git a/src/app/main/component/user/components/profile/edit-profile/edit-profile.component.ts b/src/app/main/component/user/components/profile/edit-profile/edit-profile.component.ts index 04cdf06730..b1d891c3d5 100644 --- a/src/app/main/component/user/components/profile/edit-profile/edit-profile.component.ts +++ b/src/app/main/component/user/components/profile/edit-profile/edit-profile.component.ts @@ -110,7 +110,7 @@ export class EditProfileComponent extends FormBaseComponent implements OnInit, O userCredo: this.editProfileForm.value.credo === null ? '' : this.editProfileForm.value.credo, showLocation: this.editProfileForm.value.showLocation, showEcoPlace: this.editProfileForm.value.showEcoPlace, - showShoppingList: this.editProfileForm.value.showShoppingList, + showToDoList: this.editProfileForm.value.showToDoList, socialNetworks: this.socialNetworksToServer }; } @@ -133,7 +133,7 @@ export class EditProfileComponent extends FormBaseComponent implements OnInit, O }, showLocation: data.showLocation, showEcoPlace: data.showEcoPlace, - showShoppingList: data.showShoppingList, + showToDoList: data.showToDoList, socialNetworks: data.socialNetworks.map((network) => network.url) }; this.editProfileForm.markAllAsTouched(); @@ -197,7 +197,7 @@ export class EditProfileComponent extends FormBaseComponent implements OnInit, O userCredo: form.value.credo, showLocation: !!form.value.showLocation, showEcoPlace: !!form.value.showEcoPlace, - showShoppingList: !!form.value.showShoppingList, + showToDoList: !!form.value.showToDoList, socialNetworks: this.socialNetworksToServer, emailPreferences: emailPreferences.length > 0 ? emailPreferences : null }; diff --git a/src/app/main/component/user/components/profile/profile-service/profile.service.spec.ts b/src/app/main/component/user/components/profile/profile-service/profile.service.spec.ts index adc04163df..4466570708 100644 --- a/src/app/main/component/user/components/profile/profile-service/profile.service.spec.ts +++ b/src/app/main/component/user/components/profile/profile-service/profile.service.spec.ts @@ -83,7 +83,7 @@ describe('ProfileService', () => { rating: 1999, showEcoPlace: true, showLocation: false, - showShoppingList: true, + showToDoList: true, socialNetworks: [] }; diff --git a/src/app/main/component/user/components/profile/profile-widget/profile-header/profile-header.component.spec.ts b/src/app/main/component/user/components/profile/profile-widget/profile-header/profile-header.component.spec.ts index 28c4438fd0..6089246f83 100644 --- a/src/app/main/component/user/components/profile/profile-widget/profile-header/profile-header.component.spec.ts +++ b/src/app/main/component/user/components/profile/profile-widget/profile-header/profile-header.component.spec.ts @@ -58,7 +58,7 @@ describe('ProfileHeaderComponent', () => { rating: 2, showEcoPlace: false, showLocation: false, - showShoppingList: false, + showToDoList: false, socialNetworks: [{ id: 220, url: 'http://instagram' }] } as EditProfileModel; fixture.detectChanges(); diff --git a/src/app/main/component/user/components/profile/profile.component.html b/src/app/main/component/user/components/profile/profile.component.html index 33b686a781..4ecd2c0692 100644 --- a/src/app/main/component/user/components/profile/profile.component.html +++ b/src/app/main/component/user/components/profile/profile.component.html @@ -6,7 +6,7 @@ - +
@@ -15,7 +15,7 @@ - +
diff --git a/src/app/main/component/user/components/profile/profile.component.scss b/src/app/main/component/user/components/profile/profile.component.scss index 09f9f90604..5e63d4ba32 100644 --- a/src/app/main/component/user/components/profile/profile.component.scss +++ b/src/app/main/component/user/components/profile/profile.component.scss @@ -153,7 +153,7 @@ .profile-wrapper { .right-column { - app-shopping-list { + app-to-do-list { display: none; } } @@ -174,13 +174,13 @@ display: flex; } - .app-shopping-list { + .app-to-do-list { display: none; } } .right-column { - app-shopping-list { + app-to-do-list { margin-top: 50px; margin-bottom: 24px; } @@ -191,13 +191,13 @@ @include responsiveRange(md, xl) { .profile-wrapper { .left-column { - .app-shopping-list { + .app-to-do-list { display: block; } } .right-column { - .app-shopping-list { + .app-to-do-list { display: none; } } @@ -207,13 +207,13 @@ @include responsiveMobileFirst(xl) { .profile-wrapper { .left-column { - .app-shopping-list { + .app-to-do-list { display: none; } } .right-column { - .app-shopping-list { + .app-to-do-list { display: block; margin-top: 16px; } diff --git a/src/app/main/component/user/components/profile/profile.component.spec.ts b/src/app/main/component/user/components/profile/profile.component.spec.ts index da6c7d7bbb..36a74f5e63 100644 --- a/src/app/main/component/user/components/profile/profile.component.spec.ts +++ b/src/app/main/component/user/components/profile/profile.component.spec.ts @@ -14,7 +14,7 @@ describe('ProfileComponent', () => { const fakeItem = { city: 'fakeCity', - showShoppingList: false + showToDoList: false }; const liveAnnouncerMock = jasmine.createSpyObj('announcer', ['announce']); const localStorageServiceMock = jasmine.createSpyObj('localStorageService', ['getCurrentLanguage', 'setCurentPage']); diff --git a/src/app/main/component/user/components/profile/shopping-list/shopping-list.component.html b/src/app/main/component/user/components/profile/shopping-list/shopping-list.component.html deleted file mode 100644 index 91cf2cba9b..0000000000 --- a/src/app/main/component/user/components/profile/shopping-list/shopping-list.component.html +++ /dev/null @@ -1,42 +0,0 @@ -
-
-
-
- {{ 'profile.to-do-list' | translate }} -
-
{{ shoppingList?.length }} {{ 'profile.elements' | correctUnit: shoppingList?.length:currentLang | translate }} -
-
- {{ - (toggle ? 'user.habit.btn.see-less' : 'user.habit.btn.see-all') | translate - }} -
-
- -
-
-
- -
-
-
-

{{ 'profile.empty-list' | translate }}

-
-
-
diff --git a/src/app/main/component/user/components/profile/shopping-list/shopping-list.component.ts b/src/app/main/component/user/components/profile/shopping-list/shopping-list.component.ts deleted file mode 100644 index 43f38758d4..0000000000 --- a/src/app/main/component/user/components/profile/shopping-list/shopping-list.component.ts +++ /dev/null @@ -1,109 +0,0 @@ -import { catchError, takeUntil } from 'rxjs/operators'; -import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; -import { of, Subject } from 'rxjs'; -import { Patterns } from 'src/assets/patterns/patterns'; -import { ShoppingListService } from '@global-user/components/habit/add-new-habit/habit-edit-shopping-list/shopping-list.service'; -import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; -import { Subscription } from 'stompjs'; -import { AllShoppingLists, ShoppingList } from '@global-user/models/shoppinglist.interface'; -import { TodoStatus } from '@global-user/components/habit/models/todo-status.enum'; - -@Component({ - selector: 'app-shopping-list', - templateUrl: './shopping-list.component.html', - styleUrls: ['./shopping-list.component.scss'] -}) -export class ShoppingListComponent implements OnInit { - shoppingList: ShoppingList[] = []; - toggle: boolean; - private userId: number; - currentLang: string; - profileSubscription: Subscription; - private shoppingListCache: AllShoppingLists[] | null = null; - private destroy$: Subject = new Subject(); - - constructor( - private localStorageService: LocalStorageService, - private shopListService: ShoppingListService, - private cdr: ChangeDetectorRef - ) {} - - ngOnInit(): void { - this.userId = this.localStorageService.getUserId(); - this.subscribeToLangChange(); - } - - private subscribeToLangChange(): void { - this.localStorageService.languageBehaviourSubject.subscribe((lang: string) => { - this.currentLang = lang; - if (this.localStorageService.getUserId()) { - this.getAllShopLists(); - } - }); - } - - private getAllShopLists(): void { - if (this.shoppingListCache) { - this.updateShoppingList(this.shoppingListCache); - return; - } - - this.shopListService - .getUserShoppingLists(this.currentLang) - .pipe( - takeUntil(this.destroy$), - catchError(() => of([])) - ) - .subscribe((list) => { - this.shoppingListCache = list; - this.updateShoppingList(list); - }); - } - - private updateShoppingList(list: AllShoppingLists[]): void { - const customShopList = this.convertShopList(list, 'custom'); - const standardShopList = this.convertShopList(list, 'standard'); - customShopList.forEach((el) => (el.custom = true)); - this.shoppingList = [...customShopList, ...standardShopList]; - } - - convertShopList(list: AllShoppingLists[], type: string): ShoppingList[] { - return list.reduce((acc, obj) => acc.concat(type === 'custom' ? obj.customShoppingListItemDto : obj.userShoppingListItemDto), []); - } - - isValidURL(url: string): boolean { - return Patterns.isValidURL.test(url); - } - - openCloseList(): void { - this.toggle = !this.toggle; - } - - toggleDone(item: ShoppingList): void { - item.status = item.status === TodoStatus.inprogress ? TodoStatus.done : TodoStatus.inprogress; - item.custom ? this.updateStatusCustomItem(item) : this.updateStatusItem(item); - } - - private updateStatusItem(item: ShoppingList): void { - this.shopListService - .updateStandardShopItemStatus(item, this.currentLang) - .pipe(takeUntil(this.destroy$)) - .subscribe(() => { - this.updateShopList(item); - }); - } - - private updateStatusCustomItem(item: ShoppingList): void { - this.shopListService - .updateCustomShopItemStatus(this.userId, item) - .pipe(takeUntil(this.destroy$)) - .subscribe(() => { - this.updateShopList(item); - }); - } - - private updateShopList(item: ShoppingList): void { - this.shoppingList = this.shoppingList.map((el) => (el.id === item.id ? { ...el, status: item.status } : el)); - this.cdr.detectChanges(); - } -} diff --git a/src/app/main/component/user/components/profile/to-do-list/to-do-list.component.html b/src/app/main/component/user/components/profile/to-do-list/to-do-list.component.html new file mode 100644 index 0000000000..b4ccfba4f7 --- /dev/null +++ b/src/app/main/component/user/components/profile/to-do-list/to-do-list.component.html @@ -0,0 +1,40 @@ +
+
+
+
+ {{ 'profile.to-do-list' | translate }} +
+
{{ toDoList?.length }} {{ 'profile.elements' | correctUnit: toDoList?.length : currentLang | translate }} +
+
+ {{ + (toggle ? 'user.habit.btn.see-less' : 'user.habit.btn.see-all') | translate + }} +
+
+ +
+
+
+ +
+
+
+

{{ 'profile.empty-list' | translate }}

+
+
+
diff --git a/src/app/main/component/user/components/profile/shopping-list/shopping-list.component.scss b/src/app/main/component/user/components/profile/to-do-list/to-do-list.component.scss similarity index 93% rename from src/app/main/component/user/components/profile/shopping-list/shopping-list.component.scss rename to src/app/main/component/user/components/profile/to-do-list/to-do-list.component.scss index 3166262899..bed0c57202 100644 --- a/src/app/main/component/user/components/profile/shopping-list/shopping-list.component.scss +++ b/src/app/main/component/user/components/profile/to-do-list/to-do-list.component.scss @@ -7,12 +7,12 @@ box-shadow: 1px 4px 8px var(--quintynary-dark-grey); } -.shopping-list-block { +.to-do-list-block { width: 213px; margin: 0 auto; } -.shopping-list-content { +.to-do-list-content { padding-top: 24px; font-family: var(--tertiary-font); font-style: normal; @@ -86,15 +86,15 @@ h2 > span { text-decoration: line-through; } -.shopping-list-min { +.to-do-list-min { height: 90px; } -.shopping-list-max { +.to-do-list-max { height: max-content; } -.shopping-list { +.to-do-list { width: 100%; padding: 5px 0 0; overflow-x: hidden; @@ -138,7 +138,7 @@ h2 > span { } @include responsiveRange(md, 2xl) { - .shopping-list-block { + .to-do-list-block { border-top: 1px solid var(--quaternary-light-grey); width: 184px; } @@ -149,7 +149,7 @@ h2 > span { margin-top: 20px; } - .shopping-list-block { + .to-do-list-block { width: 100%; padding: 0 16px; } diff --git a/src/app/main/component/user/components/profile/shopping-list/shopping-list.component.spec.ts b/src/app/main/component/user/components/profile/to-do-list/to-do-list.component.spec.ts similarity index 55% rename from src/app/main/component/user/components/profile/shopping-list/shopping-list.component.spec.ts rename to src/app/main/component/user/components/profile/to-do-list/to-do-list.component.spec.ts index 3ff2b31661..4cbf3872db 100644 --- a/src/app/main/component/user/components/profile/shopping-list/shopping-list.component.spec.ts +++ b/src/app/main/component/user/components/profile/to-do-list/to-do-list.component.spec.ts @@ -1,24 +1,24 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'; import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; -import { ShoppingListComponent } from '@global-user/components'; +import { ToDoListComponent } from '@global-user/components'; import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { TranslateModule } from '@ngx-translate/core'; import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; import { of, BehaviorSubject } from 'rxjs'; import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { ShoppingListService } from '@global-user/components/habit/add-new-habit/habit-edit-shopping-list/shopping-list.service'; +import { ToDoListService } from '@global-user/components/habit/add-new-habit/habit-edit-to-do-list/to-do-list.service'; import { Language } from 'src/app/main/i18n/Language'; -import { SHOPLISTITEMONE, SHOPLISTITEMTWO } from '@global-user/components/habit/mocks/shopping-list-mock'; -import { SHOPLIST } from '@global-user/components/habit/mocks/shopping-list-mock'; -import { ALLUSERSHOPLISTS } from '@global-user/components/habit/mocks/shopping-list-mock'; +import { TODOLISTITEMONE, TODOLISTITEMTWO } from '@global-user/components/habit/mocks/to-do-list-mock'; +import { TODOLIST } from '@global-user/components/habit/mocks/to-do-list-mock'; +import { ALLUSERTODOLISTS } from '@global-user/components/habit/mocks/to-do-list-mock'; import { CorrectUnitPipe } from 'src/app/shared/correct-unit-pipe/correct-unit.pipe'; import { TodoStatus } from '@global-user/components/habit/models/todo-status.enum'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; -describe('ShoppingListComponent', () => { - let component: ShoppingListComponent; - let fixture: ComponentFixture; +describe('ToDoListComponent', () => { + let component: ToDoListComponent; + let fixture: ComponentFixture; const localStorageServiceMock = jasmine.createSpyObj('localStorageService', [ 'languageBehaviourSubject', @@ -30,18 +30,18 @@ describe('ShoppingListComponent', () => { localStorageServiceMock.languageSubject = of('en'); localStorageServiceMock.getUserId = () => 1; - const shoppingListServiceMock: ShoppingListService = jasmine.createSpyObj('fakeShoppingListService', [ - 'getUserShoppingLists', - 'updateStandardShopItemStatus', - 'updateCustomShopItemStatus' + const toDoListServiceMock: ToDoListService = jasmine.createSpyObj('fakeToDoListService', [ + 'getUserToDoLists', + 'updateStandardToDoItemStatus', + 'updateCustomToDoItemStatus' ]); - shoppingListServiceMock.getUserShoppingLists = () => of([ALLUSERSHOPLISTS]); - shoppingListServiceMock.updateStandardShopItemStatus = () => of(); - shoppingListServiceMock.updateCustomShopItemStatus = () => of(); + toDoListServiceMock.getUserToDoLists = () => of([ALLUSERTODOLISTS]); + toDoListServiceMock.updateStandardToDoItemStatus = () => of(); + toDoListServiceMock.updateCustomToDoItemStatus = () => of(); beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ShoppingListComponent, CorrectUnitPipe], + declarations: [ToDoListComponent, CorrectUnitPipe], imports: [ RouterTestingModule, HttpClientTestingModule, @@ -51,7 +51,7 @@ describe('ShoppingListComponent', () => { NgbModule ], providers: [ - { provide: ShoppingListService, useValue: shoppingListServiceMock }, + { provide: ToDoListService, useValue: toDoListServiceMock }, { provide: LocalStorageService, useValue: localStorageServiceMock } ], schemas: [CUSTOM_ELEMENTS_SCHEMA] @@ -59,7 +59,7 @@ describe('ShoppingListComponent', () => { })); beforeEach(() => { - fixture = TestBed.createComponent(ShoppingListComponent); + fixture = TestBed.createComponent(ToDoListComponent); component = fixture.componentInstance; fixture.detectChanges(); }); @@ -68,20 +68,20 @@ describe('ShoppingListComponent', () => { expect(component).toBeTruthy(); }); - it('should set custom true after getShopLists', () => { + it('should set custom true after getToDoLists', () => { const result = [ - { ...SHOPLISTITEMONE, custom: true }, - { ...SHOPLISTITEMTWO, custom: true } + { ...TODOLISTITEMONE, custom: true }, + { ...TODOLISTITEMTWO, custom: true } ]; - SHOPLIST.forEach((el) => (el.custom = true)); - component.shoppingList = SHOPLIST; - expect(component.shoppingList).toEqual(result); + TODOLIST.forEach((el) => (el.custom = true)); + component.toDoList = TODOLIST; + expect(component.toDoList).toEqual(result); }); - it('should set shopList after getShopList', () => { - component.shoppingList = []; - component.shoppingList = [...component.shoppingList, ...SHOPLIST]; - expect(component.shoppingList).toEqual(SHOPLIST); + it('should set toDoList after getToDoList', () => { + component.toDoList = []; + component.toDoList = [...component.toDoList, ...TODOLIST]; + expect(component.toDoList).toEqual(TODOLIST); }); it('should change toogle from true on openCloseList', () => { @@ -97,8 +97,8 @@ describe('ShoppingListComponent', () => { }); it('should change item status on toggleDone', () => { - SHOPLISTITEMONE.status = TodoStatus.inprogress; - component.toggleDone(SHOPLISTITEMONE); - expect(SHOPLISTITEMONE.status).toBe('DONE'); + TODOLISTITEMONE.status = TodoStatus.inprogress; + component.toggleDone(TODOLISTITEMONE); + expect(TODOLISTITEMONE.status).toBe('DONE'); }); }); diff --git a/src/app/main/component/user/components/profile/to-do-list/to-do-list.component.ts b/src/app/main/component/user/components/profile/to-do-list/to-do-list.component.ts new file mode 100644 index 0000000000..3659bd7848 --- /dev/null +++ b/src/app/main/component/user/components/profile/to-do-list/to-do-list.component.ts @@ -0,0 +1,109 @@ +import { catchError, takeUntil } from 'rxjs/operators'; +import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; +import { of, Subject } from 'rxjs'; +import { Patterns } from 'src/assets/patterns/patterns'; +import { ToDoListService } from '@global-user/components/habit/add-new-habit/habit-edit-to-do-list/to-do-list.service'; +import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; +import { Subscription } from 'stompjs'; +import { AllToDoLists, ToDoList } from '@global-user/models/to-do-list.interface'; +import { TodoStatus } from '@global-user/components/habit/models/todo-status.enum'; + +@Component({ + selector: 'app-to-do-list', + templateUrl: './to-do-list.component.html', + styleUrls: ['./to-do-list.component.scss'] +}) +export class ToDoListComponent implements OnInit { + toDoList: ToDoList[] = []; + toggle: boolean; + private userId: number; + currentLang: string; + profileSubscription: Subscription; + private toDoListCache: AllToDoLists[] | null = null; + private destroy$: Subject = new Subject(); + + constructor( + private localStorageService: LocalStorageService, + private toDoListService: ToDoListService, + private cdr: ChangeDetectorRef + ) {} + + ngOnInit(): void { + this.userId = this.localStorageService.getUserId(); + this.subscribeToLangChange(); + } + + private subscribeToLangChange(): void { + this.localStorageService.languageBehaviourSubject.subscribe((lang: string) => { + this.currentLang = lang; + if (this.localStorageService.getUserId()) { + this.getAllToDoLists(); + } + }); + } + + private getAllToDoLists(): void { + if (this.toDoListCache) { + this.updateAllToDoList(this.toDoListCache); + return; + } + + this.toDoListService + .getUserToDoLists(this.currentLang) + .pipe( + takeUntil(this.destroy$), + catchError(() => of([])) + ) + .subscribe((list) => { + this.toDoListCache = list; + this.updateAllToDoList(list); + }); + } + + private updateAllToDoList(list: AllToDoLists[]): void { + const customToDoList = this.convertToDoList(list, 'custom'); + const standardToDoList = this.convertToDoList(list, 'standard'); + customToDoList.forEach((el) => (el.custom = true)); + this.toDoList = [...customToDoList, ...standardToDoList]; + } + + convertToDoList(list: AllToDoLists[], type: string): ToDoList[] { + return list.reduce((acc, obj) => acc.concat(type === 'custom' ? obj.customToDoListItemDto : obj.userToDoListItemDto), []); + } + + isValidURL(url: string): boolean { + return Patterns.isValidURL.test(url); + } + + openCloseList(): void { + this.toggle = !this.toggle; + } + + toggleDone(item: ToDoList): void { + item.status = item.status === TodoStatus.inprogress ? TodoStatus.done : TodoStatus.inprogress; + item.custom ? this.updateStatusCustomItem(item) : this.updateStatusItem(item); + } + + private updateStatusItem(item: ToDoList): void { + this.toDoListService + .updateStandardToDoItemStatus(item, this.currentLang) + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + this.updateToDoList(item); + }); + } + + private updateStatusCustomItem(item: ToDoList): void { + this.toDoListService + .updateCustomToDoItemStatus(this.userId, item) + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + this.updateToDoList(item); + }); + } + + private updateToDoList(item: ToDoList): void { + this.toDoList = this.toDoList.map((el) => (el.id === item.id ? { ...el, status: item.status } : el)); + this.cdr.detectChanges(); + } +} diff --git a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-profile-page/friend-profile-page.component.html b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-profile-page/friend-profile-page.component.html index 7faa61b377..88c1a4ff0a 100644 --- a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-profile-page/friend-profile-page.component.html +++ b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-profile-page/friend-profile-page.component.html @@ -7,7 +7,7 @@
- +
diff --git a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-profile-page/friend-profile-page.component.scss b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-profile-page/friend-profile-page.component.scss index 6e33e98830..9002de6533 100644 --- a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-profile-page/friend-profile-page.component.scss +++ b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-profile-page/friend-profile-page.component.scss @@ -76,7 +76,7 @@ @include responsiveMobileFirst(xl) { .profile-wrapper { .left-column { - .app-shopping-list { + .app-to-do-list { display: none; } } diff --git a/src/app/main/component/user/models/edit-profile.model.ts b/src/app/main/component/user/models/edit-profile.model.ts index cf8654c222..f84b8bcd3e 100644 --- a/src/app/main/component/user/models/edit-profile.model.ts +++ b/src/app/main/component/user/models/edit-profile.model.ts @@ -6,7 +6,7 @@ export class EditProfileModel { rating: number | null; showEcoPlace: boolean; showLocation: boolean; - showShoppingList: boolean; + showToDoList: boolean; socialNetworks: Array<{ id: number; url: string }>; notificationPreferences: NotificationPreference[]; } @@ -17,7 +17,7 @@ export class EditProfileDto { userCredo: string; showEcoPlace: boolean; showLocation: boolean; - showShoppingList: boolean; + showToDoList: boolean; socialNetworks: Array; emailPreferences: NotificationPreference[]; } diff --git a/src/app/main/component/user/models/shoppinglist.interface.ts b/src/app/main/component/user/models/shoppinglist.interface.ts deleted file mode 100644 index c65e0db816..0000000000 --- a/src/app/main/component/user/models/shoppinglist.interface.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { TodoStatus } from '@global-user/components/habit/models/todo-status.enum'; - -export interface ShoppingList { - id: null | number; - status: TodoStatus; - text: string; - selected?: boolean; - custom?: boolean; -} - -export interface AllShoppingLists { - userShoppingListItemDto: ShoppingList[]; - customShoppingListItemDto: ShoppingList[]; -} - -export interface CustomShoppingItem { - text: string; -} - -export interface HabitUpdateShopList { - habitAssignId: number; - standardShopList: ShoppingList[]; - customShopList: ShoppingList[]; - lang: string; -} diff --git a/src/app/main/component/user/models/to-do-list.interface.ts b/src/app/main/component/user/models/to-do-list.interface.ts new file mode 100644 index 0000000000..a99e67747e --- /dev/null +++ b/src/app/main/component/user/models/to-do-list.interface.ts @@ -0,0 +1,25 @@ +import { TodoStatus } from '@global-user/components/habit/models/todo-status.enum'; + +export interface ToDoList { + id: null | number; + status: TodoStatus; + text: string; + selected?: boolean; + custom?: boolean; +} + +export interface AllToDoLists { + userToDoListItemDto: ToDoList[]; + customToDoListItemDto: ToDoList[]; +} + +export interface CustomToDoItem { + text: string; +} + +export interface HabitUpdateToDoList { + habitAssignId: number; + standardToDoList: ToDoList[]; + customToDoList: ToDoList[]; + lang: string; +} diff --git a/src/app/main/component/user/user.module.ts b/src/app/main/component/user/user.module.ts index b458ae9ac9..af9ff5ecd0 100644 --- a/src/app/main/component/user/user.module.ts +++ b/src/app/main/component/user/user.module.ts @@ -31,11 +31,11 @@ import { ProfileWidgetComponent, ProfileHeaderComponent, ProfileProgressComponent, - ShoppingListComponent, UserSettingComponent, EditProfileComponent, PersonalPhotoComponent, - SocialNetworksComponent + SocialNetworksComponent, + ToDoListComponent } from './components'; import { ShowFirstNLettersPipe } from '@pipe/show-first-n-letters/show-first-n-letters.pipe'; import { ShowFirstNPipe } from '@pipe/show-first-n-pipe/show-first-n.pipe'; @@ -55,7 +55,7 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll'; import { HabitProgressComponent } from './components/habit/add-new-habit/habit-progress/habit-progress.component'; import { HabitInviteFriendsComponent } from './components/habit/add-new-habit/habit-invite-friends/habit-invite-friends.component'; import { HabitDurationComponent } from './components/habit/add-new-habit/habit-duration/habit-duration.component'; -import { HabitEditShoppingListComponent } from './components/habit/add-new-habit/habit-edit-shopping-list/habit-edit-shopping-list.component'; +import { HabitEditToDoListComponent } from './components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component'; import { AddNewHabitComponent } from './components/habit/add-new-habit/add-new-habit.component'; import { GradientDirective } from './components/habit/add-new-habit/habit-duration/gradient.directive'; import { FriendDashboardComponent } from './components/profile/users-friends/friend-dashboard/friend-dashboard.component'; @@ -119,7 +119,7 @@ import { AchievementItemComponent } from './components/profile/users-achievement ProfileProgressComponent, ProfileComponent, EcoPlacesComponent, - ShoppingListComponent, + ToDoListComponent, CalendarComponent, EditProfileComponent, PersonalPhotoComponent, @@ -133,7 +133,7 @@ import { AchievementItemComponent } from './components/profile/users-achievement HabitProgressComponent, HabitInviteFriendsComponent, HabitDurationComponent, - HabitEditShoppingListComponent, + HabitEditToDoListComponent, GradientDirective, FriendDashboardComponent, AllFriendsComponent, diff --git a/src/app/main/model/goal/HabitAssignCustomPropertiesDto.ts b/src/app/main/model/goal/HabitAssignCustomPropertiesDto.ts index 6e7d069730..1f3af908dd 100644 --- a/src/app/main/model/goal/HabitAssignCustomPropertiesDto.ts +++ b/src/app/main/model/goal/HabitAssignCustomPropertiesDto.ts @@ -1,13 +1,13 @@ -import { CustomShoppingItem } from '@global-user/models/shoppinglist.interface'; +import { CustomToDoItem } from '@global-user/models/to-do-list.interface'; export interface HabitAssignCustomPropertiesDto { friendsIdsList: Array; habitAssignPropertiesDto: HabitAssignPropertiesDto; - customShoppingListItemList: Array; + customToDoListItemList: Array; } export interface HabitAssignPropertiesDto { - defaultShoppingListItems: Array; + defaultToDoListItems: Array; duration: number; isPrivate: boolean; } diff --git a/src/app/main/service/habit-assign/habit-assign.service.spec.ts b/src/app/main/service/habit-assign/habit-assign.service.spec.ts index ffb68b18bd..2ad6a7f794 100644 --- a/src/app/main/service/habit-assign/habit-assign.service.spec.ts +++ b/src/app/main/service/habit-assign/habit-assign.service.spec.ts @@ -109,11 +109,11 @@ describe('HabitService', () => { const HABIT_ASSIGN_CUSTOM: HabitAssignCustomPropertiesDto = { friendsIdsList: [2, 3, 4], habitAssignPropertiesDto: { - defaultShoppingListItems: [], + defaultToDoListItems: [], duration: 15, isPrivate: true }, - customShoppingListItemList: [{ text: '1234567890' }] + customToDoListItemList: [{ text: '1234567890' }] }; const spy = spyOn(service, 'assignCustomHabit'); diff --git a/src/app/main/service/habit/habit.service.spec.ts b/src/app/main/service/habit/habit.service.spec.ts index 28e82f35b8..3d3fab39b8 100644 --- a/src/app/main/service/habit/habit.service.spec.ts +++ b/src/app/main/service/habit/habit.service.spec.ts @@ -20,8 +20,8 @@ import { MOCK_CUSTOM_HABIT_RESPONSE, MOCK_FRIEND_PROFILE_PICTURES, MOCK_HABITS, - SHOPLIST -} from '@global-user/components/habit/mocks/shopping-list-mock'; + TODOLIST +} from '@global-user/components/habit/mocks/to-do-list-mock'; import { TAGLIST } from '@global-user/components/habit/mocks/tags-list-mock'; import { HttpParams, HttpResponse } from '@angular/common/http'; @@ -96,16 +96,16 @@ describe('HabitService', () => { req.flush(CUSTOMHABIT); }); - it('should return habit shopping list', () => { - habitService.getHabitShoppingList(2).subscribe((data) => { - expect(data).toBe(SHOPLIST); + it('should return habit toDo list', () => { + habitService.getHabitToDoList(2).subscribe((data) => { + expect(data).toBe(TODOLIST); }); - const req = httpMock.expectOne(`${habitLink}/2/shopping-list?lang=en`); + const req = httpMock.expectOne(`${habitLink}/2/to-do-list?lang=en`); expect(req.cancelled).toBeFalsy(); expect(req.request.responseType).toEqual('json'); expect(req.request.method).toBe('GET'); - req.flush(SHOPLIST); + req.flush(TODOLIST); }); it('should return habit tags', () => { diff --git a/src/app/main/service/habit/habit.service.ts b/src/app/main/service/habit/habit.service.ts index 084c3de7d5..abae933d90 100644 --- a/src/app/main/service/habit/habit.service.ts +++ b/src/app/main/service/habit/habit.service.ts @@ -7,7 +7,7 @@ import { habitLink } from '../../links'; import { TagInterface } from '@shared/components/tag-filter/tag-filter.model'; import { environment } from '@environment/environment'; import { HabitInterface, HabitListInterface } from '@global-user/components/habit/models/interfaces/habit.interface'; -import { ShoppingList } from '@global-user/models/shoppinglist.interface'; +import { ToDoList } from '@global-user/models/to-do-list.interface'; import { CustomHabitDtoRequest, CustomHabit } from '@global-user/components/habit/models/interfaces/custom-habit.interface'; import { FriendProfilePicturesArrayModel } from '@global-user/models/friend.model'; import { FileHandle } from '@eco-news-models/create-news-interface'; @@ -54,8 +54,8 @@ export class HabitService { return this.http.get(`${habitLink}/${id}?lang=${this.language}`); } - getHabitShoppingList(id: number): Observable> { - return this.http.get>(`${habitLink}/${id}/shopping-list?lang=${this.language}`); + getHabitToDoList(id: number): Observable> { + return this.http.get>(`${habitLink}/${id}/to-do-list?lang=${this.language}`); } getAllTags(): Observable> { @@ -97,7 +97,7 @@ export class HabitService { complexity: habit.complexity, defaultDuration: habit.duration, tagIds: habit.tagIds, - customShoppingListItemDto: habit.shopList + customToDoListItemDto: habit.toDoList }; const formData = new FormData(); diff --git a/src/assets/mocks/events/mock-events.ts b/src/assets/mocks/events/mock-events.ts index ec14474d16..1fb4472e9d 100644 --- a/src/assets/mocks/events/mock-events.ts +++ b/src/assets/mocks/events/mock-events.ts @@ -100,7 +100,7 @@ export const mockHabitAssign: HabitAssignInterface[] = [ habitStreak: 10, lastEnrollmentDate: new Date(), habitStatusCalendarDtoList: [], - shoppingListItems: [] + toDoListItems: [] }, { id: 2, @@ -115,7 +115,7 @@ export const mockHabitAssign: HabitAssignInterface[] = [ habitStreak: 10, lastEnrollmentDate: new Date(), habitStatusCalendarDtoList: [], - shoppingListItems: [] + toDoListItems: [] } ]; diff --git a/src/assets/mocks/habit/mock-habit-calendar.ts b/src/assets/mocks/habit/mock-habit-calendar.ts index e9c1825172..f34771b57d 100644 --- a/src/assets/mocks/habit/mock-habit-calendar.ts +++ b/src/assets/mocks/habit/mock-habit-calendar.ts @@ -10,7 +10,7 @@ export const mockHabits = { workingDays: 2, habitStreak: 10, habit: { - shoppingListItems: [{ id: 1, status: 'INPROGRESS', text: 'text', selected: true, custom: true }] + toDoListItems: [{ id: 1, status: 'INPROGRESS', text: 'text', selected: true, custom: true }] } }; From 4c65c4691156dba34e47e644a7ea78f93fc19800 Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Mon, 4 Nov 2024 13:33:53 +0200 Subject: [PATCH 09/32] fix: favorite field --- .../news-list/news-list.component.html | 4 ++-- .../news-list/news-list.component.scss | 2 +- .../news-list/news-list.component.ts | 20 ++++++++----------- .../eco-news/models/eco-news-model.ts | 2 +- .../events-list/events-list.component.scss | 2 +- 5 files changed, 13 insertions(+), 17 deletions(-) diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.html b/src/app/main/component/eco-news/components/news-list/news-list.component.html index 9a59431cad..4e3b272283 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.html +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.html @@ -53,8 +53,8 @@

{{ 'homepage.eco-news.title' | translate }}

-
- +
+
diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.scss b/src/app/main/component/eco-news/components/news-list/news-list.component.scss index 198167e6fd..010d01ed54 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.scss +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.scss @@ -127,7 +127,7 @@ div hr { width: 100%; box-shadow: 0 0 1px 0 var(--primary-grey); height: 40px; - padding: 0 25px; + padding: 0 14px; &:active, &:focus, diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.ts b/src/app/main/component/eco-news/components/news-list/news-list.component.ts index 962c7a5265..5f62e1244d 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.ts @@ -134,12 +134,12 @@ export class NewsListComponent implements OnInit, OnDestroy { this.searchToggle = !this.searchToggle; } - changeFavouriteStatus(event: MouseEvent, data: EcoNewsModel) { + changeFavoriteStatus(event: MouseEvent, data: EcoNewsModel) { event.preventDefault(); event.stopPropagation(); let isRegistered = !!this.userId; - let isFavorite = data.isFavourite; + let isFavorite = data.favorite; if (!isRegistered) { this.openAuthModalWindow('sign-in'); @@ -149,7 +149,7 @@ export class NewsListComponent implements OnInit, OnDestroy { .subscribe((result) => { isRegistered = !!result; if (isRegistered) { - this.changeFavouriteStatus(event, data); + this.changeFavoriteStatus(event, data); } }); } else { @@ -159,6 +159,9 @@ export class NewsListComponent implements OnInit, OnDestroy { .addNewsToFavourites(data.id) .pipe(takeUntil(this.destroy)) .subscribe({ + next: () => { + isFavorite = true; + }, error: () => { this.snackBar.openSnackBar('error'); isFavorite = false; @@ -170,9 +173,7 @@ export class NewsListComponent implements OnInit, OnDestroy { .pipe(takeUntil(this.destroy)) .subscribe({ next: () => { - // if (this.isUserAssignList) { - // this.idOfUnFavouriteEvent.emit(this.ecoNewsModel.id); - // } + isFavorite = false; }, error: () => { this.snackBar.openSnackBar('error'); @@ -183,11 +184,6 @@ export class NewsListComponent implements OnInit, OnDestroy { } } - handleMouseDown(event: MouseEvent): void { - event.preventDefault(); // Prevents the default action (navigation in this case) - event.stopPropagation(); // Stops the event from bubbling up to the routerLink - } - openAuthModalWindow(page: string): void { this.dialogRef = this.dialog.open(AuthModalComponent, { hasBackdrop: true, @@ -239,7 +235,7 @@ export class NewsListComponent implements OnInit, OnDestroy { this.appendIfNotEmpty('user-id', this.userId?.toString()), this.appendIfNotEmpty('title', this.searchQuery), this.appendIfNotEmpty('tags', this.tagsList), - this.appendIfNotEmpty('status', this.bookmarkSelected ? 'SAVED' : '') + this.bookmarkSelected ? { key: 'favorite', value: this.bookmarkSelected ? 'true' : '' } : null ]; optionalParams.forEach((param) => { diff --git a/src/app/main/component/eco-news/models/eco-news-model.ts b/src/app/main/component/eco-news/models/eco-news-model.ts index 8e76fd8b9d..bd31f19518 100644 --- a/src/app/main/component/eco-news/models/eco-news-model.ts +++ b/src/app/main/component/eco-news/models/eco-news-model.ts @@ -16,5 +16,5 @@ export interface EcoNewsModel { tagsUa: Array; title: string; countOfEcoNews?: number; - isFavourite?: boolean; + favorite?: boolean; } diff --git a/src/app/main/component/events/components/events-list/events-list.component.scss b/src/app/main/component/events/components/events-list/events-list.component.scss index 42eeb2922e..8002b582ef 100644 --- a/src/app/main/component/events/components/events-list/events-list.component.scss +++ b/src/app/main/component/events/components/events-list/events-list.component.scss @@ -108,7 +108,7 @@ width: 100%; box-shadow: 0 0 1px 0 var(--primary-grey); height: 40px; - padding: 0 25px; + padding: 0 14px; &:active, &:focus, From 5e21d5ff42f68d17069e0eaa2587c83ccc0b10e4 Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Tue, 5 Nov 2024 00:28:53 +0200 Subject: [PATCH 10/32] feat: adding and deleting from favorite --- .../news-list/news-list.component.ts | 40 +++---------- .../eco-news/services/eco-news.service.ts | 4 +- src/app/store/actions/ecoNews.actions.ts | 35 +++++------- src/app/store/effects/ecoNews.effects.ts | 56 +++++++++---------- src/app/store/reducers/ecoNews.reducer.ts | 31 ++++++++-- 5 files changed, 75 insertions(+), 91 deletions(-) diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.ts b/src/app/main/component/eco-news/components/news-list/news-list.component.ts index 5f62e1244d..9110423c2e 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.ts @@ -1,6 +1,6 @@ import { Breakpoints } from '../../../../config/breakpoints.constants'; -import { Component, OnInit, OnDestroy } from '@angular/core'; -import { ReplaySubject, Subject, Subscription } from 'rxjs'; +import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core'; +import { ReplaySubject, Subject } from 'rxjs'; import { take, takeUntil } from 'rxjs/operators'; import { EcoNewsService } from '@eco-news-service/eco-news.service'; import { EcoNewsModel } from '@eco-news-models/eco-news-model'; @@ -11,7 +11,7 @@ import { LocalStorageService } from '@global-service/localstorage/local-storage. import { Store } from '@ngrx/store'; import { IAppState } from 'src/app/store/state/app.state'; import { IEcoNewsState } from 'src/app/store/state/ecoNews.state'; -import { GetEcoNewsByTagsAction, GetEcoNewsByPageAction, GetEcoNewsAction } from 'src/app/store/actions/ecoNews.actions'; +import { GetEcoNewsAction, ChangeEcoNewsFavoriteStatusAction } from 'src/app/store/actions/ecoNews.actions'; import { tagsListEcoNewsData } from '@eco-news-models/eco-news-consts'; import { FormControl, Validators } from '@angular/forms'; import { Patterns } from '@assets/patterns/patterns'; @@ -59,7 +59,8 @@ export class NewsListComponent implements OnInit, OnDestroy { private snackBar: MatSnackBarComponent, private localStorageService: LocalStorageService, private store: Store, - private dialog: MatDialog + private dialog: MatDialog, + private cdr: ChangeDetectorRef ) {} ngOnInit() { @@ -139,7 +140,6 @@ export class NewsListComponent implements OnInit, OnDestroy { event.stopPropagation(); let isRegistered = !!this.userId; - let isFavorite = data.favorite; if (!isRegistered) { this.openAuthModalWindow('sign-in'); @@ -153,34 +153,8 @@ export class NewsListComponent implements OnInit, OnDestroy { } }); } else { - isFavorite = !isFavorite; - if (isFavorite) { - this.ecoNewsService - .addNewsToFavourites(data.id) - .pipe(takeUntil(this.destroy)) - .subscribe({ - next: () => { - isFavorite = true; - }, - error: () => { - this.snackBar.openSnackBar('error'); - isFavorite = false; - } - }); - } else { - this.ecoNewsService - .removeNewsFromFavourites(data.id) - .pipe(takeUntil(this.destroy)) - .subscribe({ - next: () => { - isFavorite = false; - }, - error: () => { - this.snackBar.openSnackBar('error'); - isFavorite = true; - } - }); - } + const action = ChangeEcoNewsFavoriteStatusAction({ id: data.id, favorite: !data.favorite, isFavoritesPage: this.bookmarkSelected }); + this.store.dispatch(action); } } diff --git a/src/app/main/component/eco-news/services/eco-news.service.ts b/src/app/main/component/eco-news/services/eco-news.service.ts index a9fca4a9c0..f0851cf550 100644 --- a/src/app/main/component/eco-news/services/eco-news.service.ts +++ b/src/app/main/component/eco-news/services/eco-news.service.ts @@ -79,11 +79,11 @@ export class EcoNewsService implements OnDestroy { return this.http.delete(`${this.backEnd}eco-news/${id}`); } - addNewsToFavourites(id: number) { + addNewsToFavorites(id: number) { return this.http.post(`${this.backEnd}eco-news/${id}/favorites`, {}); } - removeNewsFromFavourites(id: number) { + removeNewsFromFavorites(id: number) { return this.http.delete(`${this.backEnd}eco-news/${id}/favorites`, {}); } diff --git a/src/app/store/actions/ecoNews.actions.ts b/src/app/store/actions/ecoNews.actions.ts index c3f7e81877..cc8a8194cb 100644 --- a/src/app/store/actions/ecoNews.actions.ts +++ b/src/app/store/actions/ecoNews.actions.ts @@ -26,28 +26,11 @@ export enum NewsActions { DeleteEcoNews = '[News] Delete news', DeleteEcoNewsSuccess = '[News] Delete news Success', - ReceivedEcoNewsFailure = '[News] Received Failure' -} - -export const GetEcoNewsByTagsAction = createAction( - NewsActions.GetEcoNewsByTags, - props<{ currentPage: number; numberOfNews: number; tagsList: string[]; reset: boolean }>() -); - -export const GetEcoNewsByTagsSuccessAction = createAction( - NewsActions.GetEcoNewsByTagsSuccess, - props<{ ecoNews: EcoNewsDto; reset: boolean }>() -); - -export const GetEcoNewsByPageAction = createAction( - NewsActions.GetEcoNewsByPage, - props<{ currentPage: number; numberOfNews: number; reset: boolean }>() -); + ReceivedEcoNewsFailure = '[News] Received Failure', -export const GetEcoNewsByPageSuccessAction = createAction( - NewsActions.GetEcoNewsByPageSuccess, - props<{ ecoNews: EcoNewsDto; reset: boolean }>() -); + ChangeEcoNewsFavoriteStatus = '[News] Change favorite status', + ChangeEcoNewsFavoriteStatusSuccess = '[News] Change favorite status success' +} export const GetEcoNewsAction = createAction(NewsActions.GetEcoNews, props<{ params: HttpParams; reset: boolean }>()); @@ -73,3 +56,13 @@ export const DeleteEcoNewsAction = createAction(NewsActions.DeleteEcoNews, props export const DeleteEcoNewsSuccessAction = createAction(NewsActions.DeleteEcoNewsSuccess, props<{ id: number }>()); export const ReceivedEcoNewsFailureAction = createAction(NewsActions.ReceivedEcoNewsFailure, props<{ error: string | null }>()); + +export const ChangeEcoNewsFavoriteStatusAction = createAction( + NewsActions.ChangeEcoNewsFavoriteStatus, + props<{ id: number; favorite: boolean; isFavoritesPage: boolean }>() +); + +export const ChangeEcoNewsFavoriteStatusSuccessAction = createAction( + NewsActions.ChangeEcoNewsFavoriteStatusSuccess, + props<{ id: number; favorite: boolean; isFavoritesPage: boolean }>() +); diff --git a/src/app/store/effects/ecoNews.effects.ts b/src/app/store/effects/ecoNews.effects.ts index 3d43fcc680..f40411ff62 100644 --- a/src/app/store/effects/ecoNews.effects.ts +++ b/src/app/store/effects/ecoNews.effects.ts @@ -1,13 +1,9 @@ import { Injectable } from '@angular/core'; -import { Actions, createEffect, ofType } from '@ngrx/effects'; +import { act, Actions, createEffect, ofType } from '@ngrx/effects'; import { catchError, map, mergeMap, switchMap, tap } from 'rxjs/operators'; import { of } from 'rxjs'; import { EcoNewsService } from '@eco-news-service/eco-news.service'; import { - GetEcoNewsByTagsAction, - GetEcoNewsByTagsSuccessAction, - GetEcoNewsByPageAction, - GetEcoNewsByPageSuccessAction, GetEcoNewsByAuthorAction, GetEcoNewsByAuthorSuccessAction, EditEcoNewsAction, @@ -18,7 +14,9 @@ import { DeleteEcoNewsAction, ReceivedEcoNewsFailureAction, GetEcoNewsAction, - GetEcoNewsSuccessAction + GetEcoNewsSuccessAction, + ChangeEcoNewsFavoriteStatusAction, + ChangeEcoNewsFavoriteStatusSuccessAction } from '../actions/ecoNews.actions'; import { EcoNewsDto } from '@eco-news-models/eco-news-dto'; import { CreateEcoNewsService } from '@eco-news-service/create-eco-news.service'; @@ -36,30 +34,6 @@ export class NewsEffects { private router: Router ) {} - getNewsListByTags = createEffect(() => - this.actions.pipe( - ofType(GetEcoNewsByTagsAction), - mergeMap((actions: { currentPage: number; numberOfNews: number; tagsList: string[]; reset: boolean }) => - this.newsService.getNewsListByTags(actions.currentPage, actions.numberOfNews, actions.tagsList).pipe( - map((ecoNews: EcoNewsDto) => GetEcoNewsByTagsSuccessAction({ ecoNews, reset: actions.reset })), - catchError((error) => of(ReceivedEcoNewsFailureAction(error))) - ) - ) - ) - ); - - getEcoNewsListByPage = createEffect(() => - this.actions.pipe( - ofType(GetEcoNewsByPageAction), - mergeMap((actions: { currentPage: number; numberOfNews: number; reset: boolean }) => - this.newsService.getEcoNewsListByPage(actions.currentPage, actions.numberOfNews).pipe( - map((ecoNews: EcoNewsDto) => GetEcoNewsByPageSuccessAction({ ecoNews, reset: actions.reset })), - catchError((error) => of(ReceivedEcoNewsFailureAction(error))) - ) - ) - ) - ); - getEcoNews = createEffect(() => this.actions.pipe( ofType(GetEcoNewsAction), @@ -126,4 +100,26 @@ export class NewsEffects { ) ) ); + + changeNewsFavoriteStatus = createEffect(() => + this.actions.pipe( + ofType(ChangeEcoNewsFavoriteStatusAction), + mergeMap((actions: { id: number; favorite: boolean; isFavoritesPage: boolean }) => { + const observable = actions.favorite + ? this.newsService.addNewsToFavorites(actions.id) + : this.newsService.removeNewsFromFavorites(actions.id); + + return observable.pipe( + map(() => + ChangeEcoNewsFavoriteStatusSuccessAction({ + id: actions.id, + favorite: actions.favorite, + isFavoritesPage: actions.isFavoritesPage + }) + ), + catchError((error) => of(ReceivedEcoNewsFailureAction(error))) + ); + }) + ) + ); } diff --git a/src/app/store/reducers/ecoNews.reducer.ts b/src/app/store/reducers/ecoNews.reducer.ts index ef333bceab..ee86704e37 100644 --- a/src/app/store/reducers/ecoNews.reducer.ts +++ b/src/app/store/reducers/ecoNews.reducer.ts @@ -1,19 +1,18 @@ import { createReducer, on } from '@ngrx/store'; import { - GetEcoNewsByPageSuccessAction, - GetEcoNewsByTagsSuccessAction, GetEcoNewsByAuthorSuccessAction, CreateEcoNewsSuccessAction, EditEcoNewsSuccessAction, DeleteEcoNewsSuccessAction, ReceivedEcoNewsFailureAction, - GetEcoNewsSuccessAction + GetEcoNewsSuccessAction, + ChangeEcoNewsFavoriteStatusSuccessAction } from '../actions/ecoNews.actions'; import { initialNewsState } from '../state/ecoNews.state'; export const EcoNewsReducer = createReducer( initialNewsState, - on(GetEcoNewsByPageSuccessAction, GetEcoNewsByTagsSuccessAction, GetEcoNewsSuccessAction, (state, action) => { + on(GetEcoNewsSuccessAction, (state, action) => { let prevLocations = state.pages; let prevNumber = state.pageNumber; if (action.reset) { @@ -87,5 +86,27 @@ export const EcoNewsReducer = createReducer( on(ReceivedEcoNewsFailureAction, (state, action) => ({ ...state, error: action.error - })) + })), + + on(ChangeEcoNewsFavoriteStatusSuccessAction, (state, action) => { + const updateFavoriteStatus = (newsArray: any[]) => { + if (action.isFavoritesPage) { + return newsArray.filter((news) => news.id !== action.id); + } else { + return newsArray.map((news) => (news.id === action.id ? { ...news, favorite: action.favorite } : news)); + } + }; + const totalElements = state.ecoNews.totalElements; + const newTotal = action.isFavoritesPage ? totalElements - 1 : totalElements; + + return { + ...state, + pages: updateFavoriteStatus(state.pages), + authorNews: updateFavoriteStatus(state.authorNews), + ecoNews: { + ...state.ecoNews, + totalElements: newTotal + } + }; + }) ); From 6d3170d1f9e4ccbabcbdda8ffcbf917f96d261ad Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Tue, 5 Nov 2024 18:33:00 +0200 Subject: [PATCH 11/32] feat: add tests --- .../news-list/news-list.component.spec.ts | 77 +++++++++++++++- .../news-list/news-list.component.ts | 30 ++++--- .../services/eco-news.service.spec.ts | 87 +++++++++++++++---- .../eco-news/services/eco-news.service.ts | 12 --- 4 files changed, 165 insertions(+), 41 deletions(-) diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.spec.ts b/src/app/main/component/eco-news/components/news-list/news-list.component.spec.ts index 9790b9fb74..ab2c16cf0a 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.spec.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.spec.ts @@ -18,6 +18,8 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { Store } from '@ngrx/store'; import { Language } from '../../../../i18n/Language'; +import { MatDialog } from '@angular/material/dialog'; +import { ChangeEcoNewsFavoriteStatusAction } from 'src/app/store/actions/ecoNews.actions'; describe('NewsListComponent', () => { let component: NewsListComponent; @@ -28,7 +30,7 @@ describe('NewsListComponent', () => { 'getNewsListByTags', 'getEcoNewsListByPage' ]); - ecoNewsServiceMock.getNewsListByTags = () => new Observable(); + ecoNewsServiceMock.getEcoNewsListByPage = () => new Observable(); const localStorageServiceMock: LocalStorageService = jasmine.createSpyObj('LocalStorageService', [ @@ -46,6 +48,31 @@ describe('NewsListComponent', () => { userOwnAuthServiceMock.credentialDataSubject = new Subject(); userOwnAuthServiceMock.isLoginUserSubject = new BehaviorSubject(true); + const newsMock = { + countComments: 5, + id: 13578, + imagePath: null, + title: '', + text: '', + content: '', + shortInfo: '', + tags: ['News', 'Events'], + tagsEn: ['News'], + tagsUa: ['Новини'], + creationDate: '2021-11-25T22:32:30.555088+02:00', + likes: 0, + source: '', + author: { id: 312, name: 'taqcTestName' } + }; + + const matDialogRefMock = { + afterClosed: jasmine.createSpy('afterClosed').and.returnValue(of(true)) + }; + + const matDialogMock = { + open: jasmine.createSpy('open').and.returnValue(matDialogRefMock) + }; + const storeMock = jasmine.createSpyObj('store', ['select', 'dispatch']); storeMock.select = () => of({ ecoNews: {}, pages: [], pageNumber: 1, error: 'error' }); @@ -70,7 +97,8 @@ describe('NewsListComponent', () => { { provide: LocalStorageService, useValue: localStorageServiceMock }, { provide: EcoNewsService, useValue: ecoNewsServiceMock }, { provide: UserOwnAuthService, useValue: userOwnAuthServiceMock }, - { provide: Store, useValue: storeMock } + { provide: Store, useValue: storeMock }, + { provide: MatDialog, useValue: matDialogMock } ], schemas: [CUSTOM_ELEMENTS_SCHEMA] }).compileComponents(); @@ -80,6 +108,7 @@ describe('NewsListComponent', () => { fixture = TestBed.createComponent(NewsListComponent); component = fixture.componentInstance; fixture.detectChanges(); + storeMock.dispatch.calls.reset(); }); it('should create', () => { @@ -89,6 +118,15 @@ describe('NewsListComponent', () => { it('should add elements to current list if scroll', () => { spyOn(component, 'dispatchStore'); component.onScroll(); + expect(component.dispatchStore).toHaveBeenCalledTimes(0); + }); + + it('should dispatch store action on scroll when elements are present', () => { + component.elements = [newsMock, { ...newsMock, id: 2 }]; + + spyOn(component, 'dispatchStore'); + component.onScroll(); + expect(component.dispatchStore).toHaveBeenCalledWith(false); expect(component.dispatchStore).toHaveBeenCalledTimes(1); }); @@ -109,4 +147,39 @@ describe('NewsListComponent', () => { component.getFilterData(['News']); expect(component.getFilterData).toHaveBeenCalledWith(['News']); }); + + it('should cancel search correctly', () => { + component.searchNewsControl.setValue('test'); + component.cancelSearch(); + expect(component.searchNewsControl.value).toBe(''); + }); + + it('should toggle search state', () => { + component.searchToggle = false; + component.search(); + expect(component.searchToggle).toBeTrue(); + }); + + it('should change favorite status when user is logged in', () => { + const event = new MouseEvent('click'); + const data = { ...newsMock, favorite: false }; + component.userId = 1; + + component.changeFavoriteStatus(event, data); + + const expectedAction = ChangeEcoNewsFavoriteStatusAction({ + id: data.id, + favorite: true, + isFavoritesPage: component.bookmarkSelected + }); + + expect(storeMock.dispatch).toHaveBeenCalledWith(expectedAction); + }); + + it('should toggle bookmarked news display', () => { + component.userId = 1; + component.bookmarkSelected = false; + component.showSelectedNews(); + expect(component.bookmarkSelected).toBeTrue(); + }); }); diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.ts b/src/app/main/component/eco-news/components/news-list/news-list.component.ts index 9110423c2e..25ba0c99ea 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.ts @@ -1,12 +1,10 @@ import { Breakpoints } from '../../../../config/breakpoints.constants'; -import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { ReplaySubject, Subject } from 'rxjs'; import { take, takeUntil } from 'rxjs/operators'; -import { EcoNewsService } from '@eco-news-service/eco-news.service'; import { EcoNewsModel } from '@eco-news-models/eco-news-model'; import { FilterModel } from '@shared/components/tag-filter/tag-filter.model'; import { UserOwnAuthService } from '@auth-service/user-own-auth.service'; -import { MatSnackBarComponent } from '@global-errors/mat-snack-bar/mat-snack-bar.component'; import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; import { Store } from '@ngrx/store'; import { IAppState } from 'src/app/store/state/app.state'; @@ -54,13 +52,10 @@ export class NewsListComponent implements OnInit, OnDestroy { private dialogRef: MatDialogRef; constructor( - private ecoNewsService: EcoNewsService, private userOwnAuthService: UserOwnAuthService, - private snackBar: MatSnackBarComponent, private localStorageService: LocalStorageService, private store: Store, - private dialog: MatDialog, - private cdr: ChangeDetectorRef + private dialog: MatDialog ) {} ngOnInit() { @@ -148,9 +143,7 @@ export class NewsListComponent implements OnInit, OnDestroy { .pipe(take(1)) .subscribe((result) => { isRegistered = !!result; - if (isRegistered) { - this.changeFavoriteStatus(event, data); - } + return; }); } else { const action = ChangeEcoNewsFavoriteStatusAction({ id: data.id, favorite: !data.favorite, isFavoritesPage: this.bookmarkSelected }); @@ -170,8 +163,21 @@ export class NewsListComponent implements OnInit, OnDestroy { } showSelectedNews(): void { - this.bookmarkSelected = !this.bookmarkSelected; - this.dispatchStore(true); + let isRegistered = !!this.userId; + + if (!isRegistered) { + this.openAuthModalWindow('sign-in'); + this.dialogRef + .afterClosed() + .pipe(take(1)) + .subscribe((result) => { + isRegistered = !!result; + return; + }); + } else { + this.bookmarkSelected = !this.bookmarkSelected; + this.dispatchStore(true); + } } private cleanNewsList(): void { diff --git a/src/app/main/component/eco-news/services/eco-news.service.spec.ts b/src/app/main/component/eco-news/services/eco-news.service.spec.ts index 9c6a885b51..94ef1505a9 100644 --- a/src/app/main/component/eco-news/services/eco-news.service.spec.ts +++ b/src/app/main/component/eco-news/services/eco-news.service.spec.ts @@ -4,6 +4,7 @@ import { LocalStorageService } from '@global-service/localstorage/local-storage. import { BehaviorSubject } from 'rxjs'; import { environment } from '@environment/environment'; import { EcoNewsService } from './eco-news.service'; +import { HttpParams } from '@angular/common/http'; describe('EcoNewsService', () => { let service: EcoNewsService; @@ -14,12 +15,25 @@ describe('EcoNewsService', () => { imagePath: null, title: '', text: '', - author: { id: 312, name: 'taqcTestName' }, + content: '', + shortInfo: '', tags: ['News', 'Events'], + tagsEn: ['News'], + tagsUa: ['Новини'], creationDate: '2021-11-25T22:32:30.555088+02:00', likes: 0, - source: '' + source: '', + author: { id: 312, name: 'taqcTestName' } }; + + const newsDtoMock = { + page: [newsMock], + totalElements: 5, + currentPage: 0, + totalPages: 1, + hasNext: true + }; + const localStorageServiceMock: LocalStorageService = jasmine.createSpyObj('LocalStorageService', ['languageBehaviourSubject']); localStorageServiceMock.languageBehaviourSubject = new BehaviorSubject('en'); @@ -41,23 +55,12 @@ describe('EcoNewsService', () => { it('should return eco news list by current page', () => { service.getEcoNewsListByPage(0, 5).subscribe((data) => { - expect(data).toBe(newsMock); + expect(data).toEqual(newsDtoMock); }); const req = httpTestingController.expectOne(`${environment.backendLink}eco-news?page=0&size=5`); expect(req.request.method).toEqual('GET'); - req.flush(newsMock); - }); - - it('should return eco news list by current tags', () => { - const tagMock = ['News']; - service.getNewsListByTags(0, 5, tagMock).subscribe((data) => { - expect(data).toBe(newsMock); - }); - - const req = httpTestingController.expectOne(`${environment.backendLink}eco-news?tags=${tagMock}&page=0&size=5`); - expect(req.request.method).toEqual('GET'); - req.flush(newsMock); + req.flush(newsDtoMock); }); it('should return news list', () => { @@ -111,4 +114,58 @@ describe('EcoNewsService', () => { expect(req.request.method).toEqual('GET'); req.flush(isLikedByUser); }); + + it('should get eco news list with custom parameters', () => { + const params = new HttpParams().set('page', '0').set('size', '5'); + service.getEcoNewsList(params).subscribe((data) => { + expect(data).toEqual(newsDtoMock); + }); + + const req = httpTestingController.expectOne(`${environment.backendLink}eco-news?page=0&size=5`); + expect(req.request.method).toEqual('GET'); + req.flush(newsDtoMock); + }); + + it('should get eco news list by author ID', () => { + const authorId = 123; + service.getEcoNewsListByAutorId(authorId, 0, 5).subscribe((data) => { + expect(data).toBeDefined(); + }); + + const req = httpTestingController.expectOne(`${environment.backendLink}eco-news?author-id=${authorId}&page=0&size=5`); + expect(req.request.method).toEqual('GET'); + }); + + it('should delete a news item', () => { + const newsId = 13578; + service.deleteNews(newsId).subscribe((data) => { + expect(data).toBeDefined(); + }); + + const req = httpTestingController.expectOne(`${environment.backendLink}eco-news/${newsId}`); + expect(req.request.method).toEqual('DELETE'); + req.flush({}); + }); + + it('should add news to favorites', () => { + const newsId = 13578; + service.addNewsToFavorites(newsId).subscribe((data) => { + expect(data).toBeDefined(); + }); + + const req = httpTestingController.expectOne(`${environment.backendLink}eco-news/${newsId}/favorites`); + expect(req.request.method).toEqual('POST'); + req.flush({}); + }); + + it('should remove news from favorites', () => { + const newsId = 13578; + service.removeNewsFromFavorites(newsId).subscribe((data) => { + expect(data).toBeDefined(); + }); + + const req = httpTestingController.expectOne(`${environment.backendLink}eco-news/${newsId}/favorites`); + expect(req.request.method).toEqual('DELETE'); + req.flush({}); + }); }); diff --git a/src/app/main/component/eco-news/services/eco-news.service.ts b/src/app/main/component/eco-news/services/eco-news.service.ts index f0851cf550..9b1be2b959 100644 --- a/src/app/main/component/eco-news/services/eco-news.service.ts +++ b/src/app/main/component/eco-news/services/eco-news.service.ts @@ -30,22 +30,10 @@ export class EcoNewsService implements OnDestroy { return this.http.get(`${this.backEnd}eco-news`, { params }); } - getEcoNewsListByTitle(title: string, page: number, quantity: number): Observable { - return this.http.get(`${this.backEnd}eco-news?title=${title}&page=${page}&size=${quantity}`); - } - getEcoNewsListByAutorId(authorId: number, page: number, quantity: number) { return this.http.get(`${this.backEnd}eco-news?author-id=${authorId}&page=${page}&size=${quantity}`); } - getNewsListByTags(page: number, quantity: number, tags: Array) { - return this.http.get(`${this.backEnd}eco-news?tags=${tags}&page=${page}&size=${quantity}`); - } - - getUserFavoriteNews(page: number, quantity: number, userId: number): Observable { - return this.http.get(`${this.backEnd}eco-news?page=${page}&size=${quantity}&statuses=SAVED&user-id=${userId}`); - } - getNewsList(): Observable { const headers = new HttpHeaders(); headers.set('Content-type', 'application/json'); From 3c80c7dea829da8d73a7d6854e85f8be709ec277 Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Tue, 5 Nov 2024 18:40:19 +0200 Subject: [PATCH 12/32] fix: lint --- .../eco-news/components/news-list/news-list.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.scss b/src/app/main/component/eco-news/components/news-list/news-list.component.scss index 010d01ed54..da2dde03a0 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.scss +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.scss @@ -145,7 +145,7 @@ div hr { .news-flags { width: 40px; height: 40px; - background-color: rgba(255, 255, 255, 0.8); + background-color: rgba(255 255 255/ 80%); position: absolute; top: 8px; right: 8px; From d8f7ec6d7138a48fc7739eddd122ac96d94592f1 Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Tue, 5 Nov 2024 20:29:12 +0200 Subject: [PATCH 13/32] fix: sonar --- .../news-list/news-list.component.html | 20 +++++++++++++++---- .../news-list/news-list.component.ts | 17 +++++++++------- src/app/store/effects/ecoNews.effects.ts | 2 +- 3 files changed, 27 insertions(+), 12 deletions(-) diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.html b/src/app/main/component/eco-news/components/news-list/news-list.component.html index 4e3b272283..0eb9cd91b4 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.html +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.html @@ -6,12 +6,19 @@

{{ 'homepage.eco-news.title' | translate }}

- cancel search + cancel search
-
+
-
+
@@ -53,7 +60,12 @@

{{ 'homepage.eco-news.title' | translate }}

-
+
diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.ts b/src/app/main/component/eco-news/components/news-list/news-list.component.ts index 25ba0c99ea..5c71960231 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.ts @@ -48,14 +48,14 @@ export class NewsListComponent implements OnInit, OnDestroy { econews$ = this.store.select((state: IAppState): IEcoNewsState => state.ecoNewsState); searchQuery: string; - private destroy: Subject = new Subject(); + private readonly destroy: Subject = new Subject(); private dialogRef: MatDialogRef; constructor( private userOwnAuthService: UserOwnAuthService, private localStorageService: LocalStorageService, private store: Store, - private dialog: MatDialog + private readonly dialog: MatDialog ) {} ngOnInit() { @@ -89,6 +89,7 @@ export class NewsListComponent implements OnInit, OnDestroy { this.localStorageService.languageBehaviourSubject.pipe(takeUntil(this.destroyed$)); } + do() {} onResize(): void { this.getSessionStorageView(); this.windowSize = window.innerWidth; @@ -123,14 +124,18 @@ export class NewsListComponent implements OnInit, OnDestroy { } cancelSearch(): void { - this.searchNewsControl.value.trim() === '' ? (this.searchToggle = false) : this.searchNewsControl.setValue(''); + if (this.searchNewsControl.value.trim() === '') { + this.searchToggle = false; + } else { + this.searchNewsControl.setValue(''); + } } search(): void { this.searchToggle = !this.searchToggle; } - changeFavoriteStatus(event: MouseEvent, data: EcoNewsModel) { + changeFavoriteStatus(event: Event, data: EcoNewsModel) { event.preventDefault(); event.stopPropagation(); @@ -143,7 +148,6 @@ export class NewsListComponent implements OnInit, OnDestroy { .pipe(take(1)) .subscribe((result) => { isRegistered = !!result; - return; }); } else { const action = ChangeEcoNewsFavoriteStatusAction({ id: data.id, favorite: !data.favorite, isFavoritesPage: this.bookmarkSelected }); @@ -172,7 +176,6 @@ export class NewsListComponent implements OnInit, OnDestroy { .pipe(take(1)) .subscribe((result) => { isRegistered = !!result; - return; }); } else { this.bookmarkSelected = !this.bookmarkSelected; @@ -230,7 +233,7 @@ export class NewsListComponent implements OnInit, OnDestroy { private appendIfNotEmpty(key: string, value: string | string[]): { key: string; value: string } | null { const formattedValue = Array.isArray(value) ? value.join(',') : value; - return formattedValue && formattedValue.trim() ? { key, value: formattedValue.toUpperCase() } : null; + return formattedValue?.trim() ? { key, value: formattedValue.toUpperCase() } : null; } private checkUserSingIn(): void { diff --git a/src/app/store/effects/ecoNews.effects.ts b/src/app/store/effects/ecoNews.effects.ts index f40411ff62..3b8a2c625e 100644 --- a/src/app/store/effects/ecoNews.effects.ts +++ b/src/app/store/effects/ecoNews.effects.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { act, Actions, createEffect, ofType } from '@ngrx/effects'; +import { Actions, createEffect, ofType } from '@ngrx/effects'; import { catchError, map, mergeMap, switchMap, tap } from 'rxjs/operators'; import { of } from 'rxjs'; import { EcoNewsService } from '@eco-news-service/eco-news.service'; From fa50901c6858a41b5a0d2c9a58af27a89fe8fa64 Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Tue, 5 Nov 2024 20:39:58 +0200 Subject: [PATCH 14/32] fix: sonar --- .../eco-news/components/news-list/news-list.component.html | 6 ++---- .../eco-news/components/news-list/news-list.component.ts | 1 - 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.html b/src/app/main/component/eco-news/components/news-list/news-list.component.html index 0eb9cd91b4..c4e103f909 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.html +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.html @@ -10,15 +10,14 @@

{{ 'homepage.eco-news.title' | translate }}

src="assets/img/smallCross.svg" class="cross-position" (click)="cancelSearch()" - tabindex="0" (keydown.enter)="cancelSearch()" alt="cancel search" />
-
+
-
+
@@ -63,7 +62,6 @@

{{ 'homepage.eco-news.title' | translate }}

diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.ts b/src/app/main/component/eco-news/components/news-list/news-list.component.ts index 5c71960231..577745499d 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.ts @@ -89,7 +89,6 @@ export class NewsListComponent implements OnInit, OnDestroy { this.localStorageService.languageBehaviourSubject.pipe(takeUntil(this.destroyed$)); } - do() {} onResize(): void { this.getSessionStorageView(); this.windowSize = window.innerWidth; From a0d1aa9ca26c98934113985f196cc5e0f70b81cb Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Wed, 6 Nov 2024 10:23:04 +0200 Subject: [PATCH 15/32] fix: naming --- .../components/news-list/news-list.component.html | 8 ++++---- .../components/news-list/news-list.component.spec.ts | 6 +++--- .../components/news-list/news-list.component.ts | 11 ++++------- .../eco-news/services/eco-news.service.spec.ts | 2 +- .../component/eco-news/services/eco-news.service.ts | 4 ++-- src/app/store/effects/ecoNews.effects.ts | 4 ++-- 6 files changed, 16 insertions(+), 19 deletions(-) diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.html b/src/app/main/component/eco-news/components/news-list/news-list.component.html index c4e103f909..bb1fce2049 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.html +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.html @@ -4,8 +4,8 @@

{{ 'homepage.eco-news.title' | translate }}

-
- +
+ {{ 'homepage.eco-news.title' | translate }} alt="cancel search" />
-
- +
+
diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.spec.ts b/src/app/main/component/eco-news/components/news-list/news-list.component.spec.ts index ab2c16cf0a..1ad3829980 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.spec.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.spec.ts @@ -155,9 +155,9 @@ describe('NewsListComponent', () => { }); it('should toggle search state', () => { - component.searchToggle = false; - component.search(); - expect(component.searchToggle).toBeTrue(); + component.isSearchVisible = false; + component.toggleSearch(); + expect(component.isSearchVisible).toBeTrue(); }); it('should change favorite status when user is logged in', () => { diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.ts b/src/app/main/component/eco-news/components/news-list/news-list.component.ts index 577745499d..bde44d02e5 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.ts @@ -42,13 +42,12 @@ export class NewsListComponent implements OnInit, OnDestroy { isLoading = false; private page = 0; noNewsMatch = false; - searchToggle = false; + isSearchVisible = false; private isRequestInFlight = false; searchNewsControl = new FormControl('', [Validators.maxLength(30), Validators.pattern(Patterns.NameInfoPattern)]); econews$ = this.store.select((state: IAppState): IEcoNewsState => state.ecoNewsState); searchQuery: string; - private readonly destroy: Subject = new Subject(); private dialogRef: MatDialogRef; constructor( @@ -124,14 +123,14 @@ export class NewsListComponent implements OnInit, OnDestroy { cancelSearch(): void { if (this.searchNewsControl.value.trim() === '') { - this.searchToggle = false; + this.isSearchVisible = false; } else { this.searchNewsControl.setValue(''); } } - search(): void { - this.searchToggle = !this.searchToggle; + toggleSearch(): void { + this.isSearchVisible = !this.isSearchVisible; } changeFavoriteStatus(event: Event, data: EcoNewsModel) { @@ -249,7 +248,5 @@ export class NewsListComponent implements OnInit, OnDestroy { ngOnDestroy(): void { this.destroyed$.next(true); this.destroyed$.complete(); - this.destroy.next(true); - this.destroy.complete(); } } diff --git a/src/app/main/component/eco-news/services/eco-news.service.spec.ts b/src/app/main/component/eco-news/services/eco-news.service.spec.ts index 94ef1505a9..cc409fdbb3 100644 --- a/src/app/main/component/eco-news/services/eco-news.service.spec.ts +++ b/src/app/main/component/eco-news/services/eco-news.service.spec.ts @@ -128,7 +128,7 @@ describe('EcoNewsService', () => { it('should get eco news list by author ID', () => { const authorId = 123; - service.getEcoNewsListByAutorId(authorId, 0, 5).subscribe((data) => { + service.getEcoNewsListByAuthorId(authorId, 0, 5).subscribe((data) => { expect(data).toBeDefined(); }); diff --git a/src/app/main/component/eco-news/services/eco-news.service.ts b/src/app/main/component/eco-news/services/eco-news.service.ts index 9b1be2b959..600e838503 100644 --- a/src/app/main/component/eco-news/services/eco-news.service.ts +++ b/src/app/main/component/eco-news/services/eco-news.service.ts @@ -30,8 +30,8 @@ export class EcoNewsService implements OnDestroy { return this.http.get(`${this.backEnd}eco-news`, { params }); } - getEcoNewsListByAutorId(authorId: number, page: number, quantity: number) { - return this.http.get(`${this.backEnd}eco-news?author-id=${authorId}&page=${page}&size=${quantity}`); + getEcoNewsListByAuthorId(authorId: number, page: number, quantity: number): Observable { + return this.http.get(`${this.backEnd}eco-news?author-id=${authorId}&page=${page}&size=${quantity}`); } getNewsList(): Observable { diff --git a/src/app/store/effects/ecoNews.effects.ts b/src/app/store/effects/ecoNews.effects.ts index 3b8a2c625e..1659083193 100644 --- a/src/app/store/effects/ecoNews.effects.ts +++ b/src/app/store/effects/ecoNews.effects.ts @@ -50,11 +50,11 @@ export class NewsEffects { ) ); - getEcoNewsListByAutorId = createEffect(() => + getEcoNewsListByAuthorId = createEffect(() => this.actions.pipe( ofType(GetEcoNewsByAuthorAction), mergeMap((actions: { authorId: number; currentPage: number; numberOfNews: number; reset: boolean }) => - this.newsService.getEcoNewsListByAutorId(actions.authorId, actions.currentPage, actions.numberOfNews).pipe( + this.newsService.getEcoNewsListByAuthorId(actions.authorId, actions.currentPage, actions.numberOfNews).pipe( map((ecoNews: EcoNewsDto) => GetEcoNewsByAuthorSuccessAction({ ecoNews, reset: actions.reset })), catchError((error) => of(ReceivedEcoNewsFailureAction(error))) ) From 78f35d122d10da6c869ea58991adf7117ff2dbc5 Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Wed, 6 Nov 2024 10:44:25 +0200 Subject: [PATCH 16/32] fix: delete unused import --- .../eco-news/components/news-list/news-list.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/main/component/eco-news/components/news-list/news-list.component.ts b/src/app/main/component/eco-news/components/news-list/news-list.component.ts index bde44d02e5..a21f16c2b1 100644 --- a/src/app/main/component/eco-news/components/news-list/news-list.component.ts +++ b/src/app/main/component/eco-news/components/news-list/news-list.component.ts @@ -1,6 +1,6 @@ import { Breakpoints } from '../../../../config/breakpoints.constants'; import { Component, OnInit, OnDestroy } from '@angular/core'; -import { ReplaySubject, Subject } from 'rxjs'; +import { ReplaySubject } from 'rxjs'; import { take, takeUntil } from 'rxjs/operators'; import { EcoNewsModel } from '@eco-news-models/eco-news-model'; import { FilterModel } from '@shared/components/tag-filter/tag-filter.model'; From cd52b0e0d08c4082d038f301dae0555941d321bc Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Wed, 6 Nov 2024 12:05:17 +0200 Subject: [PATCH 17/32] fix: favorite events for not logged in users --- .../events-list/events-list.component.ts | 31 +++++++++++++------ 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/app/main/component/events/components/events-list/events-list.component.ts b/src/app/main/component/events/components/events-list/events-list.component.ts index 9588be79bb..17311a19ce 100644 --- a/src/app/main/component/events/components/events-list/events-list.component.ts +++ b/src/app/main/component/events/components/events-list/events-list.component.ts @@ -1,7 +1,7 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { Addresses, EventListResponse, FilterItem } from '../../models/events.interface'; import { UserOwnAuthService } from '@auth-service/user-own-auth.service'; -import { Observable, ReplaySubject, Subscription } from 'rxjs'; +import { Observable, ReplaySubject, Subscription, take } from 'rxjs'; import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; import { Store } from '@ngrx/store'; import { IAppState } from 'src/app/store/state/app.state'; @@ -9,7 +9,7 @@ import { IEcoEventsState } from 'src/app/store/state/ecoEvents.state'; import { statusFiltersData, timeStatusFiltersData, typeFiltersData } from '../../models/event-consts'; import { Router } from '@angular/router'; import { AuthModalComponent } from '@global-auth/auth-modal/auth-modal.component'; -import { MatDialog } from '@angular/material/dialog'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { FormControl, Validators } from '@angular/forms'; import { MatSelect } from '@angular/material/select'; import { Patterns } from 'src/assets/patterns/patterns'; @@ -35,7 +35,7 @@ export class EventsListComponent implements OnInit, OnDestroy { searchEventControl = new FormControl('', [Validators.maxLength(30), Validators.pattern(Patterns.NameInfoPattern)]); eventsList: EventListResponse[] = []; - isLoggedIn: string; + isLoggedIn: boolean; selectedEventTimeStatusFiltersList: string[] = []; selectedLocationFiltersList: string[] = []; selectedStatusFiltersList: string[] = []; @@ -59,6 +59,7 @@ export class EventsListComponent implements OnInit, OnDestroy { private eventsPerPage = 6; private searchResultSubscription: Subscription; private searchQuery: string; + private dialogRef: MatDialogRef; constructor( private store: Store, @@ -115,13 +116,23 @@ export class EventsListComponent implements OnInit, OnDestroy { } showSelectedEvents(): void { - this.bookmarkSelected = !this.bookmarkSelected; - if (this.bookmarkSelected) { - this.cleanEventList(); - this.getUserFavoriteEvents(); + if (!this.isLoggedIn) { + this.openAuthModalWindow('sign-in'); + this.dialogRef + .afterClosed() + .pipe(take(1)) + .subscribe((result) => { + this.isLoggedIn = !!result; + }); } else { - this.cleanEventList(); - this.getEvents(); + this.bookmarkSelected = !this.bookmarkSelected; + if (this.bookmarkSelected) { + this.cleanEventList(); + this.getUserFavoriteEvents(); + } else { + this.cleanEventList(); + this.getEvents(); + } } } @@ -446,7 +457,7 @@ export class EventsListComponent implements OnInit, OnDestroy { private checkUserSingIn(): void { this.userOwnAuthService.credentialDataSubject.subscribe((data) => { - this.isLoggedIn = data?.userId; + this.isLoggedIn = !!data?.userId; this.userId = data.userId; this.statusFiltersList = this.userId ? statusFiltersData : statusFiltersData.slice(0, 2); }); From a766a655cbbd6bb19adebef15200b428fda50ae9 Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Wed, 6 Nov 2024 12:38:55 +0200 Subject: [PATCH 18/32] fix: sonar --- .../events/components/events-list/events-list.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/main/component/events/components/events-list/events-list.component.ts b/src/app/main/component/events/components/events-list/events-list.component.ts index 17311a19ce..b5f84b209f 100644 --- a/src/app/main/component/events/components/events-list/events-list.component.ts +++ b/src/app/main/component/events/components/events-list/events-list.component.ts @@ -59,7 +59,7 @@ export class EventsListComponent implements OnInit, OnDestroy { private eventsPerPage = 6; private searchResultSubscription: Subscription; private searchQuery: string; - private dialogRef: MatDialogRef; + private readonly dialogRef: MatDialogRef; constructor( private store: Store, From 1ae5e0f9a6c1d38b135505c09ca271e82af2be12 Mon Sep 17 00:00:00 2001 From: Tadei-Mykola Date: Wed, 6 Nov 2024 15:46:09 +0200 Subject: [PATCH 19/32] update en.json and ua.json --- src/assets/i18n/en.json | 3 +-- src/assets/i18n/ua.json | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index cc9e583f95..03b5831b56 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -806,7 +806,6 @@ "privacy": "Profile privacy", "location": "Show my location", "eco-place": "Show my eco places", - "shopping-list": "Show my shopping list", "to-do-list": "Show my To-do list", "picture-tooltip": "Upload PNG or JPG only. File size should be less than 10MB", "change-photo": "Do you want to change your profile picture?", @@ -920,7 +919,7 @@ }, "to-do": { "to-do-list": "To-do list", - "no-shopping-items": "No items to recommend", + "no-to-do-items": "No items to recommend", "too-long-input": "The input field should contain no more than 2048 characters", "add-custom-item": "Add custom item", "save": "Save", diff --git a/src/assets/i18n/ua.json b/src/assets/i18n/ua.json index b84e5b8a61..0d5550e3b3 100644 --- a/src/assets/i18n/ua.json +++ b/src/assets/i18n/ua.json @@ -816,7 +816,6 @@ "privacy": "Конфіденційність профілю", "location": "Показувати моє місцезнаходження", "eco-place": "Показувати мої еко-місця", - "shopping-list": "Показувати мій список покупок", "to-do-list": "Показувати мій список завдань", "picture-tooltip": "Завантажуйте лише PNG або JPEG. Розмір файлу не повинен перевищувати 10Mb", "change-photo": "Ви хочете змінити свою фотографію профілю?", @@ -930,7 +929,7 @@ }, "to-do": { "to-do-list": "Список завдань", - "no-shopping-items": "Не має елементів для рекомендації", + "no-to-do-items": "Не має елементів для рекомендації", "too-long-input": "Поле введення повинно містити не більше 2048 символів", "add-custom-item": "Додати власну річ", "save": "Зберегти", From 09da20cd8772e6ed5f862cdc552f518819a95d6d Mon Sep 17 00:00:00 2001 From: Tadei-Mykola Date: Wed, 6 Nov 2024 16:01:17 +0200 Subject: [PATCH 20/32] fix sonar --- .../habit-edit-to-do-list/habit-edit-to-do-list.component.ts | 3 +-- .../components/profile/to-do-list/to-do-list.component.html | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.ts b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.ts index 7e4b973218..688cc9571d 100644 --- a/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.ts +++ b/src/app/main/component/user/components/habit/add-new-habit/habit-edit-to-do-list/habit-edit-to-do-list.component.ts @@ -115,12 +115,11 @@ export class HabitEditToDoListComponent implements OnInit, OnChanges, OnDestroy selectItem(item: ToDoList): void { this.isListChanged = true; - this.toDoList.map((element) => { + this.toDoList.forEach((element) => { if (element.text === item.text) { element.selected = !item.selected; element.status = item.selected ? TodoStatus.inprogress : TodoStatus.active; } - return element; }); if (item.selected) { const index = this.toDoList.indexOf(item); diff --git a/src/app/main/component/user/components/profile/to-do-list/to-do-list.component.html b/src/app/main/component/user/components/profile/to-do-list/to-do-list.component.html index b4ccfba4f7..61a88fd3fa 100644 --- a/src/app/main/component/user/components/profile/to-do-list/to-do-list.component.html +++ b/src/app/main/component/user/components/profile/to-do-list/to-do-list.component.html @@ -24,6 +24,7 @@ Date: Wed, 6 Nov 2024 16:21:13 +0200 Subject: [PATCH 21/32] fix: loading of favorits --- .../events-list/events-list.component.ts | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/app/main/component/events/components/events-list/events-list.component.ts b/src/app/main/component/events/components/events-list/events-list.component.ts index b5f84b209f..2ddf76d375 100644 --- a/src/app/main/component/events/components/events-list/events-list.component.ts +++ b/src/app/main/component/events/components/events-list/events-list.component.ts @@ -125,17 +125,16 @@ export class EventsListComponent implements OnInit, OnDestroy { this.isLoggedIn = !!result; }); } else { - this.bookmarkSelected = !this.bookmarkSelected; - if (this.bookmarkSelected) { - this.cleanEventList(); - this.getUserFavoriteEvents(); - } else { - this.cleanEventList(); - this.getEvents(); - } + this.toggleEventList(); } } + private toggleEventList(): void { + this.bookmarkSelected = !this.bookmarkSelected; + this.cleanEventList(); + this.getEvents(); + } + getUniqueLocations(addresses: Array): FilterItem[] { const uniqueLocationsName = new Set(); const uniqueLocations: FilterItem[] = [{ type: 'location', nameEn: 'Online', nameUa: 'Онлайн' }]; @@ -362,7 +361,6 @@ export class EventsListComponent implements OnInit, OnDestroy { this.eventService.getEvents(this.getEventsHttpParams()).subscribe((res) => { this.isLoading = false; this.eventsList.push(...res.page); - this.page++; this.countOfEvents = res.totalElements; this.hasNextPage = res.hasNext; }); From 68e4816d6d2b9b40cf3f76bf20f7fded303eb879 Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Thu, 7 Nov 2024 12:41:00 +0200 Subject: [PATCH 22/32] feat: news requests --- .../profile-dashboard.component.html | 15 ++- .../profile-dashboard.component.scss | 24 +++-- .../profile-dashboard.component.ts | 101 ++++++++++++++---- 3 files changed, 110 insertions(+), 30 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..f44c527ba3 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 @@ -71,18 +71,23 @@ {{ 'profile.dashboard.news-list' | translate }}

- -
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..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; @@ -48,6 +49,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; } @@ -57,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 d6ad754d11..5733781116 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 @@ -8,7 +8,7 @@ import { MatTabChangeEvent } from '@angular/material/tabs'; import { Store } from '@ngrx/store'; import { IAppState } from 'src/app/store/state/app.state'; import { IEcoNewsState } from 'src/app/store/state/ecoNews.state'; -import { GetEcoNewsByAuthorAction } from 'src/app/store/actions/ecoNews.actions'; +import { GetEcoNewsAction, GetEcoNewsByAuthorAction } from 'src/app/store/actions/ecoNews.actions'; import { EcoNewsModel } from '@eco-news-models/eco-news-model'; import { EventResponse, EventResponseDto } from 'src/app/main/component/events/models/events.interface'; import { EventsService } from 'src/app/main/component/events/services/events.service'; @@ -48,17 +48,20 @@ export class ProfileDashboardComponent implements OnInit, OnDestroy { favoriteEventsPage = 0; totalEvents = 0; totalNews = 0; + tagsList = []; loadingEvents = false; eventType = ''; isFavoriteBtnClicked = false; + isNewsFavoriteBtnClicked = false; userLatitude = 0; userLongitude = 0; images = singleNewsImages; - authorNews$ = this.store.select((state: IAppState): IEcoNewsState => state.ecoNewsState); + isRequestInFlight = false; + econews$ = this.store.select((state: IAppState): IEcoNewsState => state.ecoNewsState); private destroyed$: ReplaySubject = new ReplaySubject(1); private hasNext = true; private hasNextPageOfEvents = true; - private currentPage: number; + private page: number; private newsCount = 5; constructor( @@ -76,12 +79,12 @@ export class ProfileDashboardComponent implements OnInit, OnDestroy { this.subscribeToLangChange(); this.getUserId(); - this.authorNews$.subscribe((val: IEcoNewsState) => { - this.currentPage = val.authorNewsPage; - if (val.ecoNewsByAuthor) { - this.totalNews = val.ecoNewsByAuthor.totalElements; - this.hasNext = val.ecoNewsByAuthor.hasNext; - this.news = val.authorNews; + this.econews$.subscribe((val: IEcoNewsState) => { + this.page = val.pageNumber; + if (val.ecoNews) { + this.totalNews = val.ecoNews.totalElements; + this.hasNext = val.ecoNews.hasNext; + this.news = [...val.pages]; } }); @@ -197,17 +200,74 @@ export class ProfileDashboardComponent implements OnInit, OnDestroy { } } - dispatchNews(res: boolean) { - if (this.currentPage !== undefined && this.hasNext) { - this.store.dispatch( - GetEcoNewsByAuthorAction({ - authorId: this.userId, - currentPage: this.currentPage, - numberOfNews: this.newsCount, - reset: res - }) - ); + toggleNewsFavorites() { + this.isNewsFavoriteBtnClicked = !this.isNewsFavoriteBtnClicked; + this.dispatchNews(true); + } + + // dispatchNews(res: boolean) { + // if (this.currentPage !== undefined && this.hasNext) { + // this.store.dispatch( + // GetEcoNewsByAuthorAction({ + // authorId: this.userId, + // currentPage: this.currentPage, + // numberOfNews: this.newsCount, + // reset: res + // }) + // ); + // } + // } + + private cleanNewsList(): void { + this.loading = true; + this.hasNext = true; + this.page = 0; + this.news = []; + this.totalNews = 0; + } + + dispatchNews(res: boolean): void { + if (res) { + this.cleanNewsList(); } + + if (!this.hasNext || this.isRequestInFlight) { + return; + } + + this.isRequestInFlight = true; + const params = this.getNewsHttpParams(); + + const action = GetEcoNewsAction({ params, reset: res }); + this.store.dispatch(action); + + this.page++; + this.isRequestInFlight = false; + } + + private getNewsHttpParams(): HttpParams { + let params = new HttpParams().set('page', this.page.toString()).set('size', this.newsCount.toString()); + + const optionalParams = [ + !this.isNewsFavoriteBtnClicked && this.appendIfNotEmpty('author-id', this.userId?.toString()), + this.isNewsFavoriteBtnClicked && this.appendIfNotEmpty('user-id', this.userId?.toString()), + this.appendIfNotEmpty('tags', this.tagsList), + this.isNewsFavoriteBtnClicked ? { key: 'favorite', value: this.isNewsFavoriteBtnClicked ? 'true' : '' } : null + ]; + + optionalParams.forEach((param) => { + if (param) { + params = params.append(param.key, param.value); + } + }); + + const serializedParams = params.toString(); + return new HttpParams({ fromString: serializedParams }); + } + + private appendIfNotEmpty(key: string, value: string | string[]): { key: string; value: string } | null { + const formattedValue = Array.isArray(value) ? value.join(',') : value; + return formattedValue?.trim() ? { key, value: formattedValue.toUpperCase() } : null; } changeStatus(habit: HabitAssignInterface) { @@ -256,6 +316,9 @@ export class ProfileDashboardComponent implements OnInit, OnDestroy { } onScroll(): void { + if (!this.news.length) { + return; + } this.dispatchNews(false); } From a0c1c6305d179b4eed8a95f2ff112bb7e4c0cd53 Mon Sep 17 00:00:00 2001 From: sofiia koval Date: Thu, 7 Nov 2024 13:57:35 +0200 Subject: [PATCH 23/32] feat: add tag filters no news --- .../tag-filter/tag-filter.component.html | 2 +- .../tag-filter/tag-filter.component.scss | 3 +- .../profile-dashboard.component.html | 40 ++++++++++++------- .../profile-dashboard.component.scss | 4 ++ .../profile-dashboard.component.ts | 17 ++++++-- src/assets/i18n/en.json | 3 ++ src/assets/i18n/ua.json | 3 ++ 7 files changed, 52 insertions(+), 20 deletions(-) diff --git a/src/app/main/component/shared/components/tag-filter/tag-filter.component.html b/src/app/main/component/shared/components/tag-filter/tag-filter.component.html index 6e085e522b..5c8bbb774f 100644 --- a/src/app/main/component/shared/components/tag-filter/tag-filter.component.html +++ b/src/app/main/component/shared/components/tag-filter/tag-filter.component.html @@ -1,5 +1,5 @@
- {{ header | translate }} + {{ header | translate }}