diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3b29f1a..f4da2a0 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/components/events/event-filter/event-filter.component.ts b/src/app/components/events/event-filter/event-filter.component.ts index 6957530..4357ce4 100644 --- a/src/app/components/events/event-filter/event-filter.component.ts +++ b/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() { diff --git a/src/app/components/events/events-list/events-list-cards/events-list-cards.component.html b/src/app/components/events/events-list/events-list-cards/events-list-cards.component.html new file mode 100644 index 0000000..7f9db40 --- /dev/null +++ b/src/app/components/events/events-list/events-list-cards/events-list-cards.component.html @@ -0,0 +1,77 @@ +
+ + +
+
+ + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + +
+ + +
+

{{cat.formattedDate}}

+
+ + + +
+ +
diff --git a/src/app/components/events/events-list/events-list-cards/events-list-cards.component.scss b/src/app/components/events/events-list/events-list-cards/events-list-cards.component.scss new file mode 100644 index 0000000..9483ef3 --- /dev/null +++ b/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); +} + diff --git a/src/app/components/events/events-list/events-list-cards/events-list-cards.component.spec.ts b/src/app/components/events/events-list/events-list-cards/events-list-cards.component.spec.ts new file mode 100644 index 0000000..2db045c --- /dev/null +++ b/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; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [EventsListCardsComponent] + }); + fixture = TestBed.createComponent(EventsListCardsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/events/events-list/events-list-cards/events-list-cards.component.ts b/src/app/components/events/events-list/events-list-cards/events-list-cards.component.ts new file mode 100644 index 0000000..6d65ed2 --- /dev/null +++ b/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 = new EventEmitter(); + + 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(); + } +} diff --git a/src/app/components/events/events-list/events-list-table/events-list-table.component.html b/src/app/components/events/events-list/events-list-table/events-list-table.component.html new file mode 100644 index 0000000..2876144 --- /dev/null +++ b/src/app/components/events/events-list/events-list-table/events-list-table.component.html @@ -0,0 +1 @@ +

events-list-table works!

diff --git a/src/app/components/events/events-list/events-list-table/events-list-table.component.scss b/src/app/components/events/events-list/events-list-table/events-list-table.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/events/events-list/events-list-table/events-list-table.component.spec.ts b/src/app/components/events/events-list/events-list-table/events-list-table.component.spec.ts new file mode 100644 index 0000000..7c1e3af --- /dev/null +++ b/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; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [EventsListTableComponent] + }); + fixture = TestBed.createComponent(EventsListTableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/events/events-list/events-list-table/events-list-table.component.ts b/src/app/components/events/events-list/events-list-table/events-list-table.component.ts new file mode 100644 index 0000000..b9bb980 --- /dev/null +++ b/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 { + +} diff --git a/src/app/data/event.ts b/src/app/data/event.ts index c813447..372c5eb 100644 --- a/src/app/data/event.ts +++ b/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[] = []; +} diff --git a/src/app/pages/events/events-list/events-list.component.html b/src/app/pages/events/events-list/events-list.component.html index e19a8c0..4644975 100644 --- a/src/app/pages/events/events-list/events-list.component.html +++ b/src/app/pages/events/events-list/events-list.component.html @@ -1,67 +1,13 @@ -
-
-
- - - - - - -
-
- - - - - - - - - - - - - - -
+
+
+
- -
- -
-

{{cat.formattedDate}}

-
-
    -
  • - -
    • -
- - -
- +
+ +