feat: implement desktop filter for events list

src/app/app.module.ts

@@ -58,6 +58,8 @@ import { RouterReuseStrategy } from './routing/router-reuse.strategy';
 import { AppRouterOutletDirective } from './routing/app-router-outlet.directive';
 import { EventFilterModalComponent } from './components/events/event-filter-modal/event-filter-modal.component';
 import { DatepickerTranslatorService } from './services/datepicker-translator.service';
+import { EventsListCardsComponent } from './components/events/events-list/events-list-cards/events-list-cards.component';
+import { EventsListTableComponent } from './components/events/events-list/events-list-table/events-list-table.component';
 
 export function jwtOptionsFactory(authService: AuthenticationService) {
     return {
@@ -125,6 +127,8 @@ export function createTranslateLoader(http: HttpClient) {
         ReasonForChangeComponent,
         AppRouterOutletDirective,
         EventFilterModalComponent,
+        EventsListCardsComponent,
+        EventsListTableComponent,
     ],
     imports: [
         BrowserModule,

src/app/components/events/event-filter/event-filter.component.ts

@@ -62,11 +62,11 @@ export class EventFilterComponent implements OnInit, OnDestroy {
     }
 
     dateSelected(date: NgbDate) {
-        this.eventsFilterService.selectedStartDate.next(date);
+        this.eventsFilterService.setStartDate(date);
     }
 
     searchTermUpdated() {
-        this.eventsFilterService.searchTerm.next(this.searchTerm);
+        this.eventsFilterService.setSearchterm(this.searchTerm);
     }
 
     resetFilters() {

src/app/components/events/events-list/events-list-cards/events-list-cards.component.html

@@ -0,0 +1,77 @@
+<div class="filter-menu">
+    <button class="filter-button d-none d-md-block" (click)="openDesktopFilter()">
+        <span class="txt">mussar il filter</span>
+        <span>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="18" viewBox="0 0 17 18" fill="none">
+                      <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M0.612676 2.65286C0.728742 2.4027 0.979445 2.24265 1.25522 2.24265H15.4219C15.6977 2.24265 15.9484 2.4027 16.0644 2.65286C16.1805 2.90302 16.1408 3.1978 15.9627 3.40837L10.4636 9.91117V15.701C10.4636 15.9465 10.3364 16.1745 10.1276 16.3035C9.91878 16.4326 9.65802 16.4443 9.43844 16.3345L6.60511 14.9179C6.36514 14.7979 6.21355 14.5526 6.21355 14.2843V9.91117L0.714356 3.40837C0.536282 3.1978 0.49661 2.90302 0.612676 2.65286ZM2.78189 3.65931L7.46275 9.19442C7.57088 9.3223 7.63022 9.48435 7.63022 9.65181V13.8465L9.04688 14.5549V9.65181C9.04688 9.48435 9.10622 9.3223 9.21436 9.19442L13.8952 3.65931H2.78189Z"
+                            fill="#1C2B33"/>
+                    </svg>
+                </span>
+    </button>
+
+    <div class="style-selection">
+        <div class="style-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <rect x="13" y="3" width="8" height="8" rx="1" fill="#3CBFA4"/>
+                <rect x="2" y="3" width="8" height="8" rx="1" fill="#3CBFA4"/>
+                <rect x="2" y="13" width="8" height="8" rx="1" fill="#3CBFA4"/>
+                <rect x="13" y="13" width="8" height="8" rx="1" fill="#3CBFA4"/>
+            </svg>
+        </div>
+        <div class="style-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <path d="M8 6H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M8 12H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
+                      stroke-linejoin="round"/>
+                <path d="M8 18H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
+                      stroke-linejoin="round"/>
+                <path d="M3 6H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
+                      stroke-linejoin="round"/>
+                <path d="M3 12H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
+                      stroke-linejoin="round"/>
+                <path d="M3 18H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
+                      stroke-linejoin="round"/>
+                <path d="M8 6H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M8 12H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
+                      stroke-linejoin="round"/>
+                <path d="M8 18H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
+                      stroke-linejoin="round"/>
+                <path d="M3 6H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
+                      stroke-linejoin="round"/>
+                <path d="M3 12H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
+                      stroke-linejoin="round"/>
+                <path d="M3 18H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
+                      stroke-linejoin="round"/>
+            </svg>
+        </div>
+    </div>
+
+    <button class="filter-button d-md-none" (click)="openMobileFilter()">
+        <span class="txt">mussar il filter</span>
+        <span>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="18" viewBox="0 0 17 18" fill="none">
+                      <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M0.612676 2.65286C0.728742 2.4027 0.979445 2.24265 1.25522 2.24265H15.4219C15.6977 2.24265 15.9484 2.4027 16.0644 2.65286C16.1805 2.90302 16.1408 3.1978 15.9627 3.40837L10.4636 9.91117V15.701C10.4636 15.9465 10.3364 16.1745 10.1276 16.3035C9.91878 16.4326 9.65802 16.4443 9.43844 16.3345L6.60511 14.9179C6.36514 14.7979 6.21355 14.5526 6.21355 14.2843V9.91117L0.714356 3.40837C0.536282 3.1978 0.49661 2.90302 0.612676 2.65286ZM2.78189 3.65931L7.46275 9.19442C7.57088 9.3223 7.63022 9.48435 7.63022 9.65181V13.8465L9.04688 14.5549V9.65181C9.04688 9.48435 9.10622 9.3223 9.21436 9.19442L13.8952 3.65931H2.78189Z"
+                            fill="#1C2B33"/>
+                    </svg>
+                </span>
+    </button>
+</div>
+
+<ng-container *ngFor="let cat of categorizedEvents; let i = index">
+    <div class="day-title">
+        <h2>{{cat.formattedDate}}</h2>
+    </div>
+    <ul>
+        <li *ngFor="let event of cat.events; let i = index">
+            <app-event-card [event]="event" [isFirst]="i === 0"></app-event-card>
+        </li>
+    </ul>
+</ng-container>
+
+<div class="text-center pb-5">
+    <button class="clndr load-next-page" (click)="eventsFilterService.loadNextPage()"
+            *ngIf="eventsFilterService.hasMorePages">mussar ulteriuras occurrenzas
+    </button>
+</div>

src/app/components/events/events-list/events-list-cards/events-list-cards.component.scss

@@ -0,0 +1,93 @@
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+
+.filter-menu {
+    display: flex;
+    justify-content: space-between;
+    margin: 1rem 0;
+
+    .style-selection {
+        display: flex;
+        margin-left: 1rem;
+
+        > * {
+            margin-right: 0.5rem;
+        }
+    }
+
+    .filter-button {
+        font-family: 'CadizBlack';
+        padding: 8px 16px;
+        margin-right: 1rem;
+        border: 1px solid #A9A9A9;
+        border-radius: 30px;
+        background-color: white;
+
+        .txt {
+            margin-right: 8px;
+        }
+    }
+}
+
+.day-title {
+    border-top: 1px solid #BBBFC2;
+    border-bottom: 1px solid #BBBFC2;
+    position: sticky;
+    top: 0;
+    background-color: white;
+    display: flex;
+    justify-content: space-between;
+
+    &:nth-of-type(1) {
+        border-top: none;
+    }
+
+    h2 {
+        font-size: 1rem;
+        margin: 1rem;
+    }
+
+    @include media-breakpoint-up(md) {
+        h2 {
+            font-size: 1.5rem;
+            margin: 2rem;
+        }
+    }
+}
+
+ul {
+    padding: 0 1rem;
+    list-style: none;
+
+    @include media-breakpoint-up(md) {
+        padding: 2rem;
+        margin: 0;
+        display: grid;
+        //grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 30px;
+    }
+}
+
+li app-event-card {
+    border-top: 1px solid #DADADA;
+}
+
+/*
+
+li {
+    border: 1px solid #DADADA;
+    box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.25);;
+}
+
+*/
+
+.load-next-page {
+    margin: 0;
+    padding: 1rem 3rem;
+    border-radius: 5px;
+    border: 1px solid var(--accent);
+    color: var(--accent);
+}
+

src/app/components/events/events-list/events-list-cards/events-list-cards.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventsListCardsComponent } from './events-list-cards.component';
+
+describe('EventsListCardsComponent', () => {
+  let component: EventsListCardsComponent;
+  let fixture: ComponentFixture<EventsListCardsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [EventsListCardsComponent]
+    });
+    fixture = TestBed.createComponent(EventsListCardsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/events/events-list/events-list-cards/events-list-cards.component.ts

@@ -0,0 +1,52 @@
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import { CategorizedEvents } from '../../../../data/event';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { EventsFilterService } from '../../../../services/events-filter.service';
+import * as dayjs from 'dayjs';
+import { rmLocale } from '../../../../utils/day-js-locale';
+import { EventFilterModalComponent } from '../../event-filter-modal/event-filter-modal.component';
+import { Subscription } from 'rxjs';
+import { DatesUtil } from '../../../../utils/dates.util';
+
+@Component({
+    selector: 'app-events-list-cards',
+    templateUrl: './events-list-cards.component.html',
+    styleUrls: ['./events-list-cards.component.scss']
+})
+export class EventsListCardsComponent implements OnInit, OnDestroy {
+
+    @Output() toggleFilter: EventEmitter<void> = new EventEmitter<void>();
+
+    public categorizedEvents: CategorizedEvents[] = [];
+    private datesSubscription?: Subscription;
+
+    constructor(private modalService: NgbModal, public eventsFilterService: EventsFilterService, private datesUtil: DatesUtil) {
+    }
+
+    ngOnInit() {
+        const customParseFormat = require('dayjs/plugin/customParseFormat');
+        dayjs.extend(customParseFormat);
+        dayjs.locale('rm', rmLocale);
+
+        this.datesSubscription = this.eventsFilterService.getSearchResultsObservable().subscribe(dates => {
+            console.log(dates);
+            this.categorizedEvents = this.datesUtil.groupEvents(dates);
+        });
+    }
+
+    ngOnDestroy(): void {
+        if (this.datesSubscription) {
+            this.datesSubscription.unsubscribe();
+        }
+    }
+
+    openMobileFilter(): void {
+        const modalRef = this.modalService.open(EventFilterModalComponent, {
+            fullscreen: true,
+        });
+    }
+
+    openDesktopFilter(): void {
+        this.toggleFilter.emit();
+    }
+}

src/app/components/events/events-list/events-list-table/events-list-table.component.html

@@ -0,0 +1 @@
+<p>events-list-table works!</p>

src/app/components/events/events-list/events-list-table/events-list-table.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventsListTableComponent } from './events-list-table.component';
+
+describe('EventsListTableComponent', () => {
+  let component: EventsListTableComponent;
+  let fixture: ComponentFixture<EventsListTableComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [EventsListTableComponent]
+    });
+    fixture = TestBed.createComponent(EventsListTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/events/events-list/events-list-table/events-list-table.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-events-list-table',
+  templateUrl: './events-list-table.component.html',
+  styleUrls: ['./events-list-table.component.scss']
+})
+export class EventsListTableComponent {
+
+}

src/app/data/event.ts

@@ -1,4 +1,4 @@
-import {EventLanguage, Genre, Region} from "./static-data";
+import { EventLanguage, Genre, Region } from "./static-data";
 
 export class Event {
     id?: string;
@@ -83,3 +83,9 @@ export class EventFilter {
     startDate?: string;
     searchTerm?: string;
 }
+
+export class CategorizedEvents {
+    date: string = '';
+    formattedDate?: string = '';
+    events: EventLookup[] = [];
+}