Merge pull request #3448 from ita-social-projects/bugfix/#7742-news-f…

…ilters

[Bugfix]  #7026, #7644, #7645 news search and favorites #7742 news filters in My space

src/app/main/component/eco-news/components/news-list/news-list-list-view/news-list-list-view.component.html

@@ -3,8 +3,14 @@
   <div class="eco-news_list-content">
     <div>
       <div class="filter-tag">
-        <p class="eco-news_list-tag d-inline-block" *ngFor="let tag of tags">
-          {{ tag }}
+        <p class="eco-news_list-tag d-inline-block" *ngFor="let tag of tags; let i = index">
+          <span>{{ tag }}</span>
+          <span
+            class="tag-divider"
+            *ngIf="tags.length > 1 && i !== tags.length - 1"
+            [ngClass]="{ 'divider-small': tags.length === 3 && currentLang === 'ua' }"
+            >|</span
+          >
         </p>
       </div>
       <div class="eco-news_list-content-box">

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 {

src/app/main/component/eco-news/components/news-list/news-list.component.html

@@ -3,6 +3,27 @@
     <div (window:resize)="onResize()">
       <div class="cont">
         <h1 class="main-header">{{ 'homepage.eco-news.title' | translate }}</h1>
+        <div class="create-container">
+          <div class="container-input" *ngIf="isSearchVisible">
+            <input type="text" *ngIf="isSearchVisible" class="place-input" [formControl]="searchNewsControl" placeholder="Search" />
+            <img
+              src="assets/img/smallCross.svg"
+              class="cross-position"
+              (click)="cancelSearch()"
+              (keydown.enter)="cancelSearch()"
+              alt="cancel search"
+            />
+          </div>
+          <div class="container-img" (click)="toggleSearch()" (keydown.enter)="toggleSearch()" *ngIf="!isSearchVisible">
+            <span class="search-img" [ngClass]="{ 'search-img-active': isSearchVisible }"></span>
+          </div>
+          <div class="container-img" (click)="showSelectedNews()" (keydown.enter)="showSelectedNews()">
+            <span class="bookmark-img" [ngClass]="{ 'bookmark-img-active': bookmarkSelected }"></span>
+          </div>
+          <div class="container-img">
+            <img class="my-events-img" src="assets/events-icons/my-event.png" alt="my-event" />
+          </div>
+        </div>
         <a class="create" [routerLink]="['create-news']" *ngIf="isLoggedIn">
           <div id="create-button" class="secondary-global-button m-btn">
             <span id="create-button-text">{{ 'homepage.eco-news.create' | translate }}</span>
@@ -34,9 +55,17 @@ <h1 class="main-header">{{ 'homepage.eco-news.title' | translate }}</h1>
           }"
           *ngFor="let data of elements"
         >
-          <a [routerLink]="['/news', data.id]" tabindex="0">
+          <a [routerLink]="['/news', data.id]" tabindex="0" class="link">
             <app-news-list-gallery-view *ngIf="view" [ecoNewsModel]="data"> </app-news-list-gallery-view>
             <app-news-list-list-view *ngIf="!view" [ecoNewsModel]="data"> </app-news-list-list-view>
+
+            <div
+              class="news-flags favourite-button"
+              (click)="changeFavoriteStatus($event, data)"
+              (keydown.enter)="changeFavoriteStatus($event, data)"
+            >
+              <span [ngClass]="data.favorite ? 'flag-active' : 'flag'"></span>
+            </div>
           </a>
         </li>
       </ul>

src/app/main/component/eco-news/components/news-list/news-list.component.scss

@@ -48,6 +48,140 @@ 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 14px;
+
+    &:active,
+    &:focus,
+    &:hover {
+      border: 1px solid var(--primary-grey);
+      outline: none;
+    }
+  }
+}
+
+.link {
+  position: relative;
+}
+
+.news-flags {
+  width: 40px;
+  height: 40px;
+  background-color: rgba(255 255 255/ 80%);
+  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;
+}
+
 .gallery-view-active {
   display: grid;
   grid-template-columns: repeat(3, 359px);

src/app/main/component/eco-news/components/news-list/news-list.component.spec.ts

@@ -18,17 +18,15 @@ 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;
   let fixture: ComponentFixture<NewsListComponent>;
 
-  const ecoNewsServiceMock: EcoNewsService = jasmine.createSpyObj('EcoNewsService', [
-    'getAllPresentTags',
-    'getNewsListByTags',
-    'getEcoNewsListByPage'
-  ]);
-  ecoNewsServiceMock.getNewsListByTags = () => new Observable();
+  const ecoNewsServiceMock: EcoNewsService = jasmine.createSpyObj('EcoNewsService', ['getAllPresentTags', 'getEcoNewsListByPage']);
+
   ecoNewsServiceMock.getEcoNewsListByPage = () => new Observable();
 
   const localStorageServiceMock: LocalStorageService = jasmine.createSpyObj('LocalStorageService', [
@@ -46,6 +44,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 +93,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 +104,7 @@ describe('NewsListComponent', () => {
     fixture = TestBed.createComponent(NewsListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    storeMock.dispatch.calls.reset();
   });
 
   it('should create', () => {
@@ -89,6 +114,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 +143,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.isSearchVisible = false;
+    component.toggleSearch();
+    expect(component.isSearchVisible).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();
+  });
 });