From 2c01414b1d9c999a45e2a991034e53835b04f040 Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Thu, 2 May 2019 20:27:09 +0200 Subject: [PATCH 01/20] feat: Changed Event class to interface --- .../components/events/events.component.ts | 10 +++--- libs/calendar/src/index.ts | 1 - libs/calendar/src/lib/calendar.component.ts | 11 +++--- libs/calendar/src/lib/calendar.interfaces.ts | 9 +++++ libs/calendar/src/lib/lib/event.ts | 34 ------------------- 5 files changed, 19 insertions(+), 46 deletions(-) delete mode 100644 libs/calendar/src/lib/lib/event.ts diff --git a/apps/frontend/src/app/modules/events/components/events/events.component.ts b/apps/frontend/src/app/modules/events/components/events/events.component.ts index e5e49b6b4..53fbf41b3 100644 --- a/apps/frontend/src/app/modules/events/components/events/events.component.ts +++ b/apps/frontend/src/app/modules/events/components/events/events.component.ts @@ -1,9 +1,9 @@ import { Component, OnInit } from '@angular/core' -import { Event, Settings } from '@verseghy/calendar' +import { CalendarEvent, Settings } from '@verseghy/calendar' import { EVENTS_FEATURE_KEY, EventsState } from '../../reducer/events.reducer' import { select, Store } from '@ngrx/store' import { MonthChange } from '../../reducer/events.actions' -import { map, delay } from 'rxjs/operators' +import { map } from 'rxjs/operators' import { Observable } from 'rxjs' @Component({ @@ -32,7 +32,7 @@ export class EventsComponent implements OnInit { today: 'Ma', moreEvent: 'Több esemény', } - calendarEvents: Observable + calendarEvents: Observable constructor(private store: Store) {} @@ -40,9 +40,9 @@ export class EventsComponent implements OnInit { this.calendarEvents = this.store.pipe( select(EVENTS_FEATURE_KEY), map((data: EventsState) => { - let calendarEvents: Event[] = [] + let calendarEvents: CalendarEvent[] = [] for (const item of data.list) { - calendarEvents = [...calendarEvents, new Event(item.id, item.title, item.description, item.date_from, item.date_to, item.color)] + calendarEvents = [...calendarEvents, {id: item.id, title: item.title, description: item.description, startDate: item.date_from, endDate: item.date_to, color: item.color}] } return calendarEvents }) diff --git a/libs/calendar/src/index.ts b/libs/calendar/src/index.ts index 7d7c6c177..364f1fc7d 100644 --- a/libs/calendar/src/index.ts +++ b/libs/calendar/src/index.ts @@ -1,4 +1,3 @@ export * from './lib/calendar.module' export * from './lib/calendar.interfaces' export * from './lib/calendar.component' -export * from './lib/lib/event' diff --git a/libs/calendar/src/lib/calendar.component.ts b/libs/calendar/src/lib/calendar.component.ts index 4688a293d..25fa8f5a5 100644 --- a/libs/calendar/src/lib/calendar.component.ts +++ b/libs/calendar/src/lib/calendar.component.ts @@ -1,6 +1,5 @@ import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core' -import { DisplayedEvent, Settings } from '@verseghy/calendar' -import { Event } from './lib/event' +import { DisplayedEvent, Settings, CalendarEvent } from '@verseghy/calendar' import { Cell } from './lib/cell' import { addMonths, @@ -30,7 +29,7 @@ import { Renderer } from './lib/renderer' export class CalendarComponent implements OnInit, AfterViewInit { private _cells: Cell[] = [] private _date = new Date() - private _events: Event[] = [] + private _events: CalendarEvent[] = [] private _displayedEvents: DisplayedEvent[] = [] private _settings: Settings private _renderer = new Renderer() @@ -151,7 +150,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { this.date = new Date() } - private _isArrayContainsId(array: Event[], id: Number): boolean { + private _isArrayContainsId(array: CalendarEvent[], id: Number): boolean { for (const item of array) { if (item.id === id) { return true @@ -160,7 +159,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { return false } - @Input('events') public set events(events: Event[]) { + @Input('events') public set events(events: CalendarEvent[]) { if (!events) return if (events.length) { let tempEvents = [] @@ -268,7 +267,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { return displayedEvents } - private _getEvent(id: number): Event { + private _getEvent(id: number): CalendarEvent { for (const item of this._events) { if (item.id === id) { return item diff --git a/libs/calendar/src/lib/calendar.interfaces.ts b/libs/calendar/src/lib/calendar.interfaces.ts index e1117424c..7545a12b4 100644 --- a/libs/calendar/src/lib/calendar.interfaces.ts +++ b/libs/calendar/src/lib/calendar.interfaces.ts @@ -13,3 +13,12 @@ export interface Settings { today?: string moreEvent?: string } + +export interface CalendarEvent { + id: number, + title: string, + description: string, + startDate: Date, + endDate: Date, + color: string +} \ No newline at end of file diff --git a/libs/calendar/src/lib/lib/event.ts b/libs/calendar/src/lib/lib/event.ts deleted file mode 100644 index 8526842d5..000000000 --- a/libs/calendar/src/lib/lib/event.ts +++ /dev/null @@ -1,34 +0,0 @@ -export class Event { - constructor( - private _id: number, - private _title: string, - private _description: string = '', - private _startDate: Date, - private _endDate: Date = _startDate, - private _color: string = '#3f51b5' - ) {} - - get id() { - return this._id - } - - get title() { - return this._title - } - - get description() { - return this._description - } - - get startDate() { - return this._startDate - } - - get endDate() { - return this._endDate - } - - get color() { - return this._color - } -} From b16883211132788fb8ab842cd0d5811f4bd8e0db Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Thu, 2 May 2019 21:44:02 +0200 Subject: [PATCH 02/20] feat: add popup module --- libs/calendar/src/index.ts | 1 - libs/calendar/src/lib/calendar.component.ts | 2 ++ libs/calendar/src/lib/calendar.interfaces.ts | 10 ++++++ libs/calendar/src/lib/calendar.module.ts | 3 +- libs/calendar/src/lib/calendar.service.ts | 13 ++++++++ libs/calendar/src/lib/lib/cell.ts | 19 ++++------- libs/calendar/src/lib/lib/popup.ts | 15 +++++++++ .../src/lib/popup/popup.component.css | 32 ------------------- .../src/lib/popup/popup.component.html | 4 --- .../calendar/src/lib/popup/popup.component.ts | 21 ------------ 10 files changed, 48 insertions(+), 72 deletions(-) create mode 100644 libs/calendar/src/lib/lib/popup.ts delete mode 100644 libs/calendar/src/lib/popup/popup.component.css delete mode 100644 libs/calendar/src/lib/popup/popup.component.html delete mode 100644 libs/calendar/src/lib/popup/popup.component.ts diff --git a/libs/calendar/src/index.ts b/libs/calendar/src/index.ts index 364f1fc7d..b866cf0c1 100644 --- a/libs/calendar/src/index.ts +++ b/libs/calendar/src/index.ts @@ -1,3 +1,2 @@ export * from './lib/calendar.module' export * from './lib/calendar.interfaces' -export * from './lib/calendar.component' diff --git a/libs/calendar/src/lib/calendar.component.ts b/libs/calendar/src/lib/calendar.component.ts index 25fa8f5a5..e5eb3bd37 100644 --- a/libs/calendar/src/lib/calendar.component.ts +++ b/libs/calendar/src/lib/calendar.component.ts @@ -1,6 +1,7 @@ import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core' import { DisplayedEvent, Settings, CalendarEvent } from '@verseghy/calendar' import { Cell } from './lib/cell' +import { popUpHandler } from './lib/popup' import { addMonths, differenceInDays, @@ -34,6 +35,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { private _settings: Settings private _renderer = new Renderer() private _ready = false + private _popUpHandler = new popUpHandler() public moreEventsPopupVisible = false public moreEventsPopupTop: number diff --git a/libs/calendar/src/lib/calendar.interfaces.ts b/libs/calendar/src/lib/calendar.interfaces.ts index 7545a12b4..ceeebe7fd 100644 --- a/libs/calendar/src/lib/calendar.interfaces.ts +++ b/libs/calendar/src/lib/calendar.interfaces.ts @@ -21,4 +21,14 @@ export interface CalendarEvent { startDate: Date, endDate: Date, color: string +} + +export interface EventDetailsPopUpSettings { + visible: boolean, + top: number, + left: number, + date: string, + title: string, + description: string, + color: string } \ No newline at end of file diff --git a/libs/calendar/src/lib/calendar.module.ts b/libs/calendar/src/lib/calendar.module.ts index 219f4e5d0..f8982e134 100644 --- a/libs/calendar/src/lib/calendar.module.ts +++ b/libs/calendar/src/lib/calendar.module.ts @@ -1,11 +1,10 @@ import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common' import { CalendarComponent } from './calendar.component' -import { PopupComponent } from './popup/popup.component' @NgModule({ imports: [CommonModule], - declarations: [CalendarComponent, PopupComponent], + declarations: [CalendarComponent], exports: [CalendarComponent], }) export class CalendarModule {} diff --git a/libs/calendar/src/lib/calendar.service.ts b/libs/calendar/src/lib/calendar.service.ts index bb9d11ec8..332e2db4a 100644 --- a/libs/calendar/src/lib/calendar.service.ts +++ b/libs/calendar/src/lib/calendar.service.ts @@ -1,8 +1,21 @@ import { Injectable } from '@angular/core' +import { BehaviorSubject } from 'rxjs'; +import { EventDetailsPopUpSettings } from './calendar.interfaces'; @Injectable({ providedIn: 'root', }) export class NgxCalendarLibService { + eventDetailsPopUpSettings: EventDetailsPopUpSettings = { + visible: false, + top: 0, + left: 0, + date: '', + title: '', + description: '', + color: '' + } + eventDetailsPopUp$: BehaviorSubject = new BehaviorSubject(this.eventDetailsPopUpSettings) + constructor() {} } diff --git a/libs/calendar/src/lib/lib/cell.ts b/libs/calendar/src/lib/lib/cell.ts index 5783fe5fe..8a20ae5fc 100644 --- a/libs/calendar/src/lib/lib/cell.ts +++ b/libs/calendar/src/lib/lib/cell.ts @@ -2,7 +2,6 @@ import { format, getDate, getMonth } from 'date-fns' import { Settings } from '../calendar.interfaces' export class Cell { - private _id: number private _rows: { id: number row: number @@ -12,21 +11,17 @@ export class Cell { color: string placeholder: boolean }[] = [] - private _date: Date - private _today: boolean - private _maxRows: number private _moreEventsTop: string private _moreEventsCount = 0 - private _settings: Settings private _moreEventsVisible: boolean - constructor(id: number, today: boolean, date: Date, maxRows: number, settings: Settings) { - this._id = id - this._today = today - this._date = date - this._maxRows = maxRows - this._settings = settings - } + constructor( + private _id: number, + private _today: boolean, + private _date: Date, + private _maxRows: number, + private _settings: Settings + ) {} public getRow(width: number): number { for (const item of Object.keys(this._rows)) { diff --git a/libs/calendar/src/lib/lib/popup.ts b/libs/calendar/src/lib/lib/popup.ts new file mode 100644 index 000000000..1ea75d33f --- /dev/null +++ b/libs/calendar/src/lib/lib/popup.ts @@ -0,0 +1,15 @@ +import { NgxCalendarLibService } from '../calendar.service'; +import { BehaviorSubject } from 'rxjs'; +import { EventDetailsPopUpSettings } from '../calendar.interfaces'; + +export class popUpHandler { + eventDetailsPopUp$: BehaviorSubject + + constructor(private calendarService: NgxCalendarLibService) { + this.eventDetailsPopUp$ = calendarService.eventDetailsPopUp$ + } + + public closeEventDetailsPopup() { + this.eventDetailsPopUp$.next() + } +} \ No newline at end of file diff --git a/libs/calendar/src/lib/popup/popup.component.css b/libs/calendar/src/lib/popup/popup.component.css deleted file mode 100644 index 280c969b5..000000000 --- a/libs/calendar/src/lib/popup/popup.component.css +++ /dev/null @@ -1,32 +0,0 @@ -:host { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; -} - -:host > div { - position: absolute; - z-index: 14; - top: 0; - left: -12px; - right: -12px; -} - -.moreEvents { - box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2); - background: #fff; - padding: 12px; -} - -.event { - height: 22px; - padding: 0 8px; - line-height: 20px; - color: #fff; - font-size: 12px; - border-radius: 2px; - display: block; - margin: 2px 0; -} diff --git a/libs/calendar/src/lib/popup/popup.component.html b/libs/calendar/src/lib/popup/popup.component.html deleted file mode 100644 index d3fd7a42a..000000000 --- a/libs/calendar/src/lib/popup/popup.component.html +++ /dev/null @@ -1,4 +0,0 @@ -
- {{ item.title }} -
-
diff --git a/libs/calendar/src/lib/popup/popup.component.ts b/libs/calendar/src/lib/popup/popup.component.ts deleted file mode 100644 index 331cfe041..000000000 --- a/libs/calendar/src/lib/popup/popup.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component, HostListener, Input, OnInit } from '@angular/core' - -@Component({ - selector: 'verseghy-popup', - templateUrl: './popup.component.html', - styleUrls: ['./popup.component.css'], -}) -export class PopupComponent implements OnInit { - @Input() event: Event | Event[] - @Input() moreEvents = false - public show = false - - constructor() {} - - ngOnInit() {} - - @HostListener('click') - onClick() { - this.show = !this.show - } -} From 2fa8b3cf670bb7657a0dcb7f3ee2d77297335434 Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Thu, 2 May 2019 21:47:49 +0200 Subject: [PATCH 03/20] feat: add popup reducer --- libs/calendar/src/lib/+state/popup.actions.ts | 30 +++++++++++ .../src/lib/+state/popup.effects.spec.ts | 35 ++++++++++++ libs/calendar/src/lib/+state/popup.effects.ts | 23 ++++++++ .../src/lib/+state/popup.reducer.spec.ts | 36 +++++++++++++ libs/calendar/src/lib/+state/popup.reducer.ts | 44 +++++++++++++++ .../src/lib/+state/popup.selectors.spec.ts | 53 +++++++++++++++++++ .../src/lib/+state/popup.selectors.ts | 41 ++++++++++++++ libs/calendar/src/lib/calendar.module.ts | 10 +++- 8 files changed, 271 insertions(+), 1 deletion(-) create mode 100644 libs/calendar/src/lib/+state/popup.actions.ts create mode 100644 libs/calendar/src/lib/+state/popup.effects.spec.ts create mode 100644 libs/calendar/src/lib/+state/popup.effects.ts create mode 100644 libs/calendar/src/lib/+state/popup.reducer.spec.ts create mode 100644 libs/calendar/src/lib/+state/popup.reducer.ts create mode 100644 libs/calendar/src/lib/+state/popup.selectors.spec.ts create mode 100644 libs/calendar/src/lib/+state/popup.selectors.ts diff --git a/libs/calendar/src/lib/+state/popup.actions.ts b/libs/calendar/src/lib/+state/popup.actions.ts new file mode 100644 index 000000000..ba20b7f17 --- /dev/null +++ b/libs/calendar/src/lib/+state/popup.actions.ts @@ -0,0 +1,30 @@ +import { Action } from '@ngrx/store' +import { Entity } from './popup.reducer' + +export enum PopupActionTypes { + LoadPopup = '[Popup] Load Popup', + PopupLoaded = '[Popup] Popup Loaded', + PopupLoadError = '[Popup] Popup Load Error', +} + +export class LoadPopup implements Action { + readonly type = PopupActionTypes.LoadPopup +} + +export class PopupLoadError implements Action { + readonly type = PopupActionTypes.PopupLoadError + constructor(public payload: any) {} +} + +export class PopupLoaded implements Action { + readonly type = PopupActionTypes.PopupLoaded + constructor(public payload: Entity[]) {} +} + +export type PopupAction = LoadPopup | PopupLoaded | PopupLoadError + +export const fromPopupActions = { + LoadPopup, + PopupLoaded, + PopupLoadError, +} diff --git a/libs/calendar/src/lib/+state/popup.effects.spec.ts b/libs/calendar/src/lib/+state/popup.effects.spec.ts new file mode 100644 index 000000000..6b8f20f96 --- /dev/null +++ b/libs/calendar/src/lib/+state/popup.effects.spec.ts @@ -0,0 +1,35 @@ +import { TestBed, async } from '@angular/core/testing' + +import { Observable } from 'rxjs' + +import { EffectsModule } from '@ngrx/effects' +import { StoreModule } from '@ngrx/store' +import { provideMockActions } from '@ngrx/effects/testing' + +import { NxModule } from '@nrwl/nx' +import { DataPersistence } from '@nrwl/nx' +import { hot } from '@nrwl/nx/testing' + +import { PopupEffects } from './popup.effects' +import { LoadPopup, PopupLoaded } from './popup.actions' + +describe('PopupEffects', () => { + let actions: Observable + let effects: PopupEffects + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [NxModule.forRoot(), StoreModule.forRoot({}), EffectsModule.forRoot([])], + providers: [PopupEffects, DataPersistence, provideMockActions(() => actions)], + }) + + effects = TestBed.get(PopupEffects) + }) + + describe('loadPopup$', () => { + it('should work', () => { + actions = hot('-a-|', { a: new LoadPopup() }) + expect(effects.loadPopup$).toBeObservable(hot('-a-|', { a: new PopupLoaded([]) })) + }) + }) +}) diff --git a/libs/calendar/src/lib/+state/popup.effects.ts b/libs/calendar/src/lib/+state/popup.effects.ts new file mode 100644 index 000000000..64f7ef856 --- /dev/null +++ b/libs/calendar/src/lib/+state/popup.effects.ts @@ -0,0 +1,23 @@ +import { Injectable } from '@angular/core' +import { Effect, Actions } from '@ngrx/effects' +import { DataPersistence } from '@nrwl/nx' + +import { PopupPartialState } from './popup.reducer' +import { LoadPopup, PopupLoaded, PopupLoadError, PopupActionTypes } from './popup.actions' + +@Injectable() +export class PopupEffects { + @Effect() loadPopup$ = this.dataPersistence.fetch(PopupActionTypes.LoadPopup, { + run: (action: LoadPopup, state: PopupPartialState) => { + // Your custom REST 'load' logic goes here. For now just return an empty list... + return new PopupLoaded([]) + }, + + onError: (action: LoadPopup, error) => { + console.error('Error', error) + return new PopupLoadError(error) + }, + }) + + constructor(private actions$: Actions, private dataPersistence: DataPersistence) {} +} diff --git a/libs/calendar/src/lib/+state/popup.reducer.spec.ts b/libs/calendar/src/lib/+state/popup.reducer.spec.ts new file mode 100644 index 000000000..655030499 --- /dev/null +++ b/libs/calendar/src/lib/+state/popup.reducer.spec.ts @@ -0,0 +1,36 @@ +import { PopupLoaded } from './popup.actions' +import { PopupState, Entity, initialState, popupReducer } from './popup.reducer' + +describe('Popup Reducer', () => { + const getPopupId = it => it['id'] + let createPopup + + beforeEach(() => { + createPopup = (id: string, name = ''): Entity => ({ + id, + name: name || `name-${id}`, + }) + }) + + describe('valid Popup actions ', () => { + it('should return set the list of known Popup', () => { + const popups = [createPopup('PRODUCT-AAA'), createPopup('PRODUCT-zzz')] + const action = new PopupLoaded(popups) + const result: PopupState = popupReducer(initialState, action) + const selId: string = getPopupId(result.list[1]) + + expect(result.loaded).toBe(true) + expect(result.list.length).toBe(2) + expect(selId).toBe('PRODUCT-zzz') + }) + }) + + describe('unknown action', () => { + it('should return the initial state', () => { + const action = {} as any + const result = popupReducer(initialState, action) + + expect(result).toBe(initialState) + }) + }) +}) diff --git a/libs/calendar/src/lib/+state/popup.reducer.ts b/libs/calendar/src/lib/+state/popup.reducer.ts new file mode 100644 index 000000000..46f5e4c0c --- /dev/null +++ b/libs/calendar/src/lib/+state/popup.reducer.ts @@ -0,0 +1,44 @@ +import { PopupAction, PopupActionTypes } from './popup.actions' + +export const POPUP_FEATURE_KEY = 'popup' + +/** + * Interface for the 'Popup' data used in + * - PopupState, and + * - popupReducer + * + * Note: replace if already defined in another module + */ + +/* tslint:disable:no-empty-interface */ +export interface Entity {} + +export interface PopupState { + list: Entity[] // list of Popup; analogous to a sql normalized table + selectedId?: string | number // which Popup record has been selected + loaded: boolean // has the Popup list been loaded + error?: any // last none error (if any) +} + +export interface PopupPartialState { + readonly [POPUP_FEATURE_KEY]: PopupState +} + +export const initialState: PopupState = { + list: [], + loaded: false, +} + +export function popupReducer(state: PopupState = initialState, action: PopupAction): PopupState { + switch (action.type) { + case PopupActionTypes.PopupLoaded: { + state = { + ...state, + list: action.payload, + loaded: true, + } + break + } + } + return state +} diff --git a/libs/calendar/src/lib/+state/popup.selectors.spec.ts b/libs/calendar/src/lib/+state/popup.selectors.spec.ts new file mode 100644 index 000000000..42194b8ea --- /dev/null +++ b/libs/calendar/src/lib/+state/popup.selectors.spec.ts @@ -0,0 +1,53 @@ +import { Entity, PopupState } from './popup.reducer' +import { popupQuery } from './popup.selectors' + +describe('Popup Selectors', () => { + const ERROR_MSG = 'No Error Available' + const getPopupId = it => it['id'] + + let storeState + + beforeEach(() => { + const createPopup = (id: string, name = ''): Entity => ({ + id, + name: name || `name-${id}`, + }) + storeState = { + popup: { + list: [createPopup('PRODUCT-AAA'), createPopup('PRODUCT-BBB'), createPopup('PRODUCT-CCC')], + selectedId: 'PRODUCT-BBB', + error: ERROR_MSG, + loaded: true, + }, + } + }) + + describe('Popup Selectors', () => { + it('getAllPopup() should return the list of Popup', () => { + const results = popupQuery.getAllPopup(storeState) + const selId = getPopupId(results[1]) + + expect(results.length).toBe(3) + expect(selId).toBe('PRODUCT-BBB') + }) + + it('getSelectedPopup() should return the selected Entity', () => { + const result = popupQuery.getSelectedPopup(storeState) + const selId = getPopupId(result) + + expect(selId).toBe('PRODUCT-BBB') + }) + + it("getLoaded() should return the current 'loaded' status", () => { + const result = popupQuery.getLoaded(storeState) + + expect(result).toBe(true) + }) + + it("getError() should return the current 'error' storeState", () => { + const result = popupQuery.getError(storeState) + + expect(result).toBe(ERROR_MSG) + }) + }) +}) diff --git a/libs/calendar/src/lib/+state/popup.selectors.ts b/libs/calendar/src/lib/+state/popup.selectors.ts new file mode 100644 index 000000000..64037ad6b --- /dev/null +++ b/libs/calendar/src/lib/+state/popup.selectors.ts @@ -0,0 +1,41 @@ +import { createFeatureSelector, createSelector } from '@ngrx/store' +import { POPUP_FEATURE_KEY, PopupState } from './popup.reducer' + +// Lookup the 'Popup' feature state managed by NgRx +const getPopupState = createFeatureSelector(POPUP_FEATURE_KEY) + +const getLoaded = createSelector( + getPopupState, + (state: PopupState) => state.loaded +) +const getError = createSelector( + getPopupState, + (state: PopupState) => state.error +) + +const getAllPopup = createSelector( + getPopupState, + getLoaded, + (state: PopupState, isLoaded) => { + return isLoaded ? state.list : [] + } +) +const getSelectedId = createSelector( + getPopupState, + (state: PopupState) => state.selectedId +) +const getSelectedPopup = createSelector( + getAllPopup, + getSelectedId, + (popup, id) => { + const result = popup.find(it => it['id'] === id) + return result ? Object.assign({}, result) : undefined + } +) + +export const popupQuery = { + getLoaded, + getError, + getAllPopup, + getSelectedPopup, +} diff --git a/libs/calendar/src/lib/calendar.module.ts b/libs/calendar/src/lib/calendar.module.ts index f8982e134..8f504279d 100644 --- a/libs/calendar/src/lib/calendar.module.ts +++ b/libs/calendar/src/lib/calendar.module.ts @@ -1,9 +1,17 @@ import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common' import { CalendarComponent } from './calendar.component' +import { StoreModule } from '@ngrx/store' +import { EffectsModule } from '@ngrx/effects' +import { POPUP_FEATURE_KEY, initialState as popupInitialState, popupReducer } from './+state/popup.reducer' +import { PopupEffects } from './+state/popup.effects' @NgModule({ - imports: [CommonModule], + imports: [ + CommonModule, + StoreModule.forFeature(POPUP_FEATURE_KEY, popupReducer, { initialState: popupInitialState }), + EffectsModule.forFeature([PopupEffects]), + ], declarations: [CalendarComponent], exports: [CalendarComponent], }) From f78437fc1f8401e30d15e2a0d84592450f321b5d Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Thu, 2 May 2019 23:13:42 +0200 Subject: [PATCH 04/20] feat: popup reducer --- libs/calendar/src/lib/+state/popup.actions.ts | 42 ++++++---- libs/calendar/src/lib/+state/popup.effects.ts | 15 +--- libs/calendar/src/lib/+state/popup.reducer.ts | 79 ++++++++++++++----- libs/calendar/src/lib/calendar.component.html | 14 ++-- libs/calendar/src/lib/calendar.component.ts | 62 ++++++--------- libs/calendar/src/lib/calendar.interfaces.ts | 12 ++- libs/calendar/src/lib/lib/popup.ts | 15 ---- .../services/popup-handler.service.spec.ts | 12 +++ .../src/lib/services/popup-handler.service.ts | 64 +++++++++++++++ 9 files changed, 202 insertions(+), 113 deletions(-) delete mode 100644 libs/calendar/src/lib/lib/popup.ts create mode 100644 libs/calendar/src/lib/services/popup-handler.service.spec.ts create mode 100644 libs/calendar/src/lib/services/popup-handler.service.ts diff --git a/libs/calendar/src/lib/+state/popup.actions.ts b/libs/calendar/src/lib/+state/popup.actions.ts index ba20b7f17..712dfd50f 100644 --- a/libs/calendar/src/lib/+state/popup.actions.ts +++ b/libs/calendar/src/lib/+state/popup.actions.ts @@ -1,30 +1,40 @@ import { Action } from '@ngrx/store' -import { Entity } from './popup.reducer' +import { CalendarEvent, PopupSettings } from '../calendar.interfaces'; export enum PopupActionTypes { - LoadPopup = '[Popup] Load Popup', - PopupLoaded = '[Popup] Popup Loaded', - PopupLoadError = '[Popup] Popup Load Error', + HideEventDetailsPopup = '[Popup] Hide Event Details Popup ', + SetEventDetailsPopup = '[Popup] Set Event Details Popup', + HideMoreEventsPopup = '[Popup] Hide More Events Popup', + SetMoreEventsPopup = '[Popup] Set More Events Popup', } -export class LoadPopup implements Action { - readonly type = PopupActionTypes.LoadPopup +export class HideEventDetailsPopup implements Action { + readonly type = PopupActionTypes.HideEventDetailsPopup } -export class PopupLoadError implements Action { - readonly type = PopupActionTypes.PopupLoadError - constructor(public payload: any) {} +export class SetEventDetailsPopup implements Action { + readonly type = PopupActionTypes.SetEventDetailsPopup + constructor(public payload: PopupSettings) {} } -export class PopupLoaded implements Action { - readonly type = PopupActionTypes.PopupLoaded - constructor(public payload: Entity[]) {} +export class HideMoreEventsPopup implements Action { + readonly type = PopupActionTypes.HideMoreEventsPopup } -export type PopupAction = LoadPopup | PopupLoaded | PopupLoadError +export class SetMoreEventsPopup implements Action { + readonly type = PopupActionTypes.SetMoreEventsPopup + constructor(public payload: PopupSettings) {} +} export const fromPopupActions = { - LoadPopup, - PopupLoaded, - PopupLoadError, + HideEventDetailsPopup, + SetEventDetailsPopup, + HideMoreEventsPopup, + SetMoreEventsPopup } + +export type PopupAction + = HideEventDetailsPopup + | SetEventDetailsPopup + | HideMoreEventsPopup + | SetMoreEventsPopup \ No newline at end of file diff --git a/libs/calendar/src/lib/+state/popup.effects.ts b/libs/calendar/src/lib/+state/popup.effects.ts index 64f7ef856..68a7013c3 100644 --- a/libs/calendar/src/lib/+state/popup.effects.ts +++ b/libs/calendar/src/lib/+state/popup.effects.ts @@ -1,23 +1,10 @@ import { Injectable } from '@angular/core' -import { Effect, Actions } from '@ngrx/effects' +import { Actions } from '@ngrx/effects' import { DataPersistence } from '@nrwl/nx' import { PopupPartialState } from './popup.reducer' -import { LoadPopup, PopupLoaded, PopupLoadError, PopupActionTypes } from './popup.actions' @Injectable() export class PopupEffects { - @Effect() loadPopup$ = this.dataPersistence.fetch(PopupActionTypes.LoadPopup, { - run: (action: LoadPopup, state: PopupPartialState) => { - // Your custom REST 'load' logic goes here. For now just return an empty list... - return new PopupLoaded([]) - }, - - onError: (action: LoadPopup, error) => { - console.error('Error', error) - return new PopupLoadError(error) - }, - }) - constructor(private actions$: Actions, private dataPersistence: DataPersistence) {} } diff --git a/libs/calendar/src/lib/+state/popup.reducer.ts b/libs/calendar/src/lib/+state/popup.reducer.ts index 46f5e4c0c..85fc8c44e 100644 --- a/libs/calendar/src/lib/+state/popup.reducer.ts +++ b/libs/calendar/src/lib/+state/popup.reducer.ts @@ -1,23 +1,11 @@ import { PopupAction, PopupActionTypes } from './popup.actions' +import { PopupSettings } from '../calendar.interfaces'; -export const POPUP_FEATURE_KEY = 'popup' - -/** - * Interface for the 'Popup' data used in - * - PopupState, and - * - popupReducer - * - * Note: replace if already defined in another module - */ - -/* tslint:disable:no-empty-interface */ -export interface Entity {} +export const POPUP_FEATURE_KEY = 'ui-calendar-popup' export interface PopupState { - list: Entity[] // list of Popup; analogous to a sql normalized table - selectedId?: string | number // which Popup record has been selected - loaded: boolean // has the Popup list been loaded - error?: any // last none error (if any) + eventDetailsPopup: PopupSettings, + moreEventsPopup: PopupSettings } export interface PopupPartialState { @@ -25,17 +13,66 @@ export interface PopupPartialState { } export const initialState: PopupState = { - list: [], - loaded: false, + eventDetailsPopup: { + visible: false, + top: 0, + left: 0, + date: '', + title: '', + description: '', + color: '', + }, + moreEventsPopup: { + visible: false, + top: 0, + left: 0, + date: '', + events: [] + } } export function popupReducer(state: PopupState = initialState, action: PopupAction): PopupState { switch (action.type) { - case PopupActionTypes.PopupLoaded: { + case PopupActionTypes.HideEventDetailsPopup: { + state = { + ...state, + eventDetailsPopup: { + ...state.eventDetailsPopup, + visible: false + } + } + break + } + + case PopupActionTypes.SetEventDetailsPopup: { + state = { + ...state, + eventDetailsPopup: { + ...state.eventDetailsPopup, + ...action.payload + } + } + break + } + + case PopupActionTypes.HideMoreEventsPopup: { + state = { + ...state, + moreEventsPopup: { + ...state.moreEventsPopup, + visible: false + } + } + break + } + + case PopupActionTypes.SetMoreEventsPopup: { state = { ...state, - list: action.payload, - loaded: true, + eventDetailsPopup: { + ...state.moreEventsPopup, + ...action.payload + } } break } diff --git a/libs/calendar/src/lib/calendar.component.html b/libs/calendar/src/lib/calendar.component.html index 9d4312428..7fc4393f9 100644 --- a/libs/calendar/src/lib/calendar.component.html +++ b/libs/calendar/src/lib/calendar.component.html @@ -57,18 +57,18 @@

{{ moreEventsPopupDate }}

-
+
-
-

{{ eventDetailsPopupTitle }}

+
+

{{ details.title }}

x
- {{ eventDetailsPopupDate }} -

{{ eventDetailsPopupDescription }}

+ {{ details.date }} +

{{ details.description }}

diff --git a/libs/calendar/src/lib/calendar.component.ts b/libs/calendar/src/lib/calendar.component.ts index e5eb3bd37..16d434694 100644 --- a/libs/calendar/src/lib/calendar.component.ts +++ b/libs/calendar/src/lib/calendar.component.ts @@ -1,7 +1,6 @@ import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core' import { DisplayedEvent, Settings, CalendarEvent } from '@verseghy/calendar' import { Cell } from './lib/cell' -import { popUpHandler } from './lib/popup' import { addMonths, differenceInDays, @@ -21,6 +20,11 @@ import { subMonths, } from 'date-fns' import { Renderer } from './lib/renderer' +import { PopupHandlerService } from './services/popup-handler.service'; +import { map } from 'rxjs/operators' +import { Store, select } from '@ngrx/store'; +import { POPUP_FEATURE_KEY, PopupState } from './+state/popup.reducer'; +import { fromPopupActions } from './+state/popup.actions'; @Component({ selector: 'verseghy-calendar', @@ -35,7 +39,6 @@ export class CalendarComponent implements OnInit, AfterViewInit { private _settings: Settings private _renderer = new Renderer() private _ready = false - private _popUpHandler = new popUpHandler() public moreEventsPopupVisible = false public moreEventsPopupTop: number @@ -45,13 +48,6 @@ export class CalendarComponent implements OnInit, AfterViewInit { public moreEventsPopupEvents @ViewChild('moreEvents') moreEventsPopupElement: ElementRef - public eventDetailsPopupVisible = false - public eventDetailsPopupTop = 0 - public eventDetailsPopupLeft = 0 - public eventDetailsPopupDate: string - public eventDetailsPopupTitle: string - public eventDetailsPopupDescription: string - public eventDetailsPopupColor: string @ViewChild('eventDetails') eventDetailsPopupElement: ElementRef @Output() monthChanged = new EventEmitter<{ @@ -59,7 +55,21 @@ export class CalendarComponent implements OnInit, AfterViewInit { month: number }>() - constructor(private _el: ElementRef) {} + public eventDetailsPopup = this.store.pipe( + select(POPUP_FEATURE_KEY), + map((state: PopupState) => { + return state.eventDetailsPopup + }) + ) + + public moreEventsPopup = this.store.pipe( + select(POPUP_FEATURE_KEY), + map((state: PopupState) => { + return state.moreEventsPopup + }) + ) + + constructor(private _el: ElementRef, private popupHandler: PopupHandlerService, private store: Store) {} ngOnInit() {} @@ -239,6 +249,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { @Input('settings') set settings(settings: Settings) { this._settings = settings + this.popupHandler.settings = settings } private _sortEventsInDay(events: DisplayedEvent[]): DisplayedEvent[] { @@ -339,38 +350,17 @@ export class CalendarComponent implements OnInit, AfterViewInit { } } - public setEventDetailsPopup(id: number, click): void { - setTimeout(() => { - const event = this._getEvent(id) - const boundingRect = click.target.getBoundingClientRect() - const calendarBoundingRect = this._el.nativeElement.getBoundingClientRect() - this.eventDetailsPopupVisible = true - this.eventDetailsPopupTitle = event.title - this.eventDetailsPopupDate = this._formatTwoDays(event.startDate, event.endDate) - this.eventDetailsPopupDescription = event.description - this.eventDetailsPopupColor = event.color - this.eventDetailsPopupTop = boundingRect.y - calendarBoundingRect.y - if (document.body.clientWidth - boundingRect.right < 320) { - if (boundingRect.x < 320) { - this.eventDetailsPopupLeft = calendarBoundingRect.width / 2 - 150 - } else { - this.eventDetailsPopupLeft = boundingRect.x - 310 - calendarBoundingRect.x - } - } else { - this.eventDetailsPopupLeft = boundingRect.right + 10 - calendarBoundingRect.x - } - }) + public setEventDetailsPopup(id: number, click: Event): void { + this.popupHandler.setEventDetailsPopup(this._getEvent(id), click.target as HTMLElement, this._el.nativeElement) } public closeEventDetailsPopup(): void { - setTimeout(() => { - this.eventDetailsPopupVisible = false - }) + this.store.dispatch(new fromPopupActions.HideMoreEventsPopup()) } @HostListener('document:click', ['$event']) clickout(event) { - let eventDetails = false + /*let eventDetails = false let moreEvents = false for (let i = 0; i < event.path.length; i++) { const element = event.path[i] @@ -412,6 +402,6 @@ export class CalendarComponent implements OnInit, AfterViewInit { } if (!moreEvents) { this.moreEventsPopupVisible = false - } + }*/ } } diff --git a/libs/calendar/src/lib/calendar.interfaces.ts b/libs/calendar/src/lib/calendar.interfaces.ts index ceeebe7fd..3d68ed2ff 100644 --- a/libs/calendar/src/lib/calendar.interfaces.ts +++ b/libs/calendar/src/lib/calendar.interfaces.ts @@ -23,12 +23,16 @@ export interface CalendarEvent { color: string } -export interface EventDetailsPopUpSettings { +export interface PopupSettings { visible: boolean, top: number, left: number, date: string, - title: string, - description: string, - color: string + title?: string, + description?: string, + color?: string, + events?: { + title: string, + color: string + }[] } \ No newline at end of file diff --git a/libs/calendar/src/lib/lib/popup.ts b/libs/calendar/src/lib/lib/popup.ts deleted file mode 100644 index 1ea75d33f..000000000 --- a/libs/calendar/src/lib/lib/popup.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { NgxCalendarLibService } from '../calendar.service'; -import { BehaviorSubject } from 'rxjs'; -import { EventDetailsPopUpSettings } from '../calendar.interfaces'; - -export class popUpHandler { - eventDetailsPopUp$: BehaviorSubject - - constructor(private calendarService: NgxCalendarLibService) { - this.eventDetailsPopUp$ = calendarService.eventDetailsPopUp$ - } - - public closeEventDetailsPopup() { - this.eventDetailsPopUp$.next() - } -} \ No newline at end of file diff --git a/libs/calendar/src/lib/services/popup-handler.service.spec.ts b/libs/calendar/src/lib/services/popup-handler.service.spec.ts new file mode 100644 index 000000000..9f7d9c57f --- /dev/null +++ b/libs/calendar/src/lib/services/popup-handler.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { PopupHandlerService } from './popup-handler.service'; + +describe('PopupHandlerService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: PopupHandlerService = TestBed.get(PopupHandlerService); + expect(service).toBeTruthy(); + }); +}); diff --git a/libs/calendar/src/lib/services/popup-handler.service.ts b/libs/calendar/src/lib/services/popup-handler.service.ts new file mode 100644 index 000000000..8b57951ce --- /dev/null +++ b/libs/calendar/src/lib/services/popup-handler.service.ts @@ -0,0 +1,64 @@ +import { Injectable } from '@angular/core'; +import { CalendarEvent, PopupSettings, Settings } from '../calendar.interfaces'; +import { isEqual, getYear, format, getMonth } from 'date-fns'; +import { Store } from '@ngrx/store'; +import { fromPopupActions } from '../+state/popup.actions'; + +@Injectable({ + providedIn: 'root' +}) +export class PopupHandlerService { + + public settings: Settings + + constructor(private store: Store) { } + + setEventDetailsPopup(event: CalendarEvent, clickedElement: HTMLElement, hostElement: HTMLElement) { + const boundingRect = clickedElement.getBoundingClientRect() as DOMRect + const calendarBoundingRect = hostElement.getBoundingClientRect() as DOMRect + + let top = 0 + let left = 0 + + top = boundingRect.y - calendarBoundingRect.y + if (document.body.clientWidth - boundingRect.right < 320) { + if (boundingRect.x < 320) { + left = calendarBoundingRect.width / 2 - 150 + } else { + left = boundingRect.x - 310 - calendarBoundingRect.x + } + } else { + left = boundingRect.right + 10 - calendarBoundingRect.x + } + + const popupSettings: PopupSettings = { + visible: true, + title: event.title, + top, + left, + date: this.formatTwoDays(event.startDate, event.endDate), + description: event.description, + color: event.color, + } + + this.store.dispatch(new fromPopupActions.SetEventDetailsPopup(popupSettings)) + } + + public formatTwoDays(date1: Date, date2: Date): string { + if (!isEqual(date1, date2)) { + let year = '' + let month = '' + if (getYear(date1) !== getYear(date2)) { + year = format(date2, ' YYYY.') + } + if (getMonth(date1) !== getMonth(date2) || year !== '') { + month = ' ' + this.settings.monthNames[getMonth(date2)] + } + return ( + format(date1, 'YYYY. ') + this.settings.monthNames[getMonth(date1)] + format(date1, ' D -') + year + month + format(date2, ' D') + ) + } else { + return format(date1, 'YYYY. ') + this.settings.monthNames[getMonth(date1)] + format(date1, ' D') + } + } +} From 156fc15af7c63a1fae2cf8b99c1e062a5c896117 Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Thu, 2 May 2019 23:21:15 +0200 Subject: [PATCH 05/20] fix: close event details popup --- libs/calendar/src/lib/+state/popup.actions.ts | 2 +- libs/calendar/src/lib/calendar.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/calendar/src/lib/+state/popup.actions.ts b/libs/calendar/src/lib/+state/popup.actions.ts index 712dfd50f..7d0d2e2ea 100644 --- a/libs/calendar/src/lib/+state/popup.actions.ts +++ b/libs/calendar/src/lib/+state/popup.actions.ts @@ -1,5 +1,5 @@ import { Action } from '@ngrx/store' -import { CalendarEvent, PopupSettings } from '../calendar.interfaces'; +import { PopupSettings } from '../calendar.interfaces'; export enum PopupActionTypes { HideEventDetailsPopup = '[Popup] Hide Event Details Popup ', diff --git a/libs/calendar/src/lib/calendar.component.ts b/libs/calendar/src/lib/calendar.component.ts index 16d434694..e6d7e1a41 100644 --- a/libs/calendar/src/lib/calendar.component.ts +++ b/libs/calendar/src/lib/calendar.component.ts @@ -355,7 +355,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { } public closeEventDetailsPopup(): void { - this.store.dispatch(new fromPopupActions.HideMoreEventsPopup()) + this.store.dispatch(new fromPopupActions.HideEventDetailsPopup()) } @HostListener('document:click', ['$event']) From e8a55fd524a19d90fb7a748b8552374242c964c3 Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Sat, 4 May 2019 20:43:47 +0200 Subject: [PATCH 06/20] feat: more events popup --- libs/calendar/src/lib/+state/popup.reducer.ts | 2 +- libs/calendar/src/lib/calendar.component.html | 12 +-- libs/calendar/src/lib/calendar.component.ts | 83 +++---------------- libs/calendar/src/lib/calendar.interfaces.ts | 2 + libs/calendar/src/lib/lib/cell.ts | 6 +- .../src/lib/services/popup-handler.service.ts | 59 +++++++++++-- 6 files changed, 76 insertions(+), 88 deletions(-) diff --git a/libs/calendar/src/lib/+state/popup.reducer.ts b/libs/calendar/src/lib/+state/popup.reducer.ts index 85fc8c44e..dcfbb63e0 100644 --- a/libs/calendar/src/lib/+state/popup.reducer.ts +++ b/libs/calendar/src/lib/+state/popup.reducer.ts @@ -69,7 +69,7 @@ export function popupReducer(state: PopupState = initialState, action: PopupActi case PopupActionTypes.SetMoreEventsPopup: { state = { ...state, - eventDetailsPopup: { + moreEventsPopup: { ...state.moreEventsPopup, ...action.payload } diff --git a/libs/calendar/src/lib/calendar.component.html b/libs/calendar/src/lib/calendar.component.html index 7fc4393f9..b6a07ad65 100644 --- a/libs/calendar/src/lib/calendar.component.html +++ b/libs/calendar/src/lib/calendar.component.html @@ -32,23 +32,23 @@
-
+
- {{ moreEventsPopupDay }} -

{{ moreEventsPopupDate }}

+ {{ details.day }} +

{{ details.date }}

x
diff --git a/libs/calendar/src/lib/calendar.component.ts b/libs/calendar/src/lib/calendar.component.ts index e6d7e1a41..a73596c19 100644 --- a/libs/calendar/src/lib/calendar.component.ts +++ b/libs/calendar/src/lib/calendar.component.ts @@ -1,24 +1,7 @@ import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core' import { DisplayedEvent, Settings, CalendarEvent } from '@verseghy/calendar' import { Cell } from './lib/cell' -import { - addMonths, - differenceInDays, - format, - getDate, - getDay, - getDaysInMonth, - getISOWeek, - getMonth, - getYear, - isAfter, - isBefore, - isEqual, - isSaturday, - isSunday, - startOfMonth, - subMonths, -} from 'date-fns' +import { addMonths, differenceInDays, format, getMonth, isAfter, isBefore, isEqual, subMonths } from 'date-fns' import { Renderer } from './lib/renderer' import { PopupHandlerService } from './services/popup-handler.service'; import { map } from 'rxjs/operators' @@ -40,14 +23,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { private _renderer = new Renderer() private _ready = false - public moreEventsPopupVisible = false - public moreEventsPopupTop: number - public moreEventsPopupLeft: number - public moreEventsPopupDay: string - public moreEventsPopupDate: number - public moreEventsPopupEvents @ViewChild('moreEvents') moreEventsPopupElement: ElementRef - @ViewChild('eventDetails') eventDetailsPopupElement: ElementRef @Output() monthChanged = new EventEmitter<{ @@ -80,6 +56,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { this._changeMonth() this._ready = true this._cells = this._renderer.renderEvents() + this.popupHandler.hostElement = this._el.nativeElement }) } @@ -121,6 +98,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { year: this.date.getFullYear(), month: this.date.getMonth(), }) + this.popupHandler.date = this._date this.closeMoreEventsPopup() this.closeEventDetailsPopup() } @@ -297,61 +275,20 @@ export class CalendarComponent implements OnInit, AfterViewInit { return item.id } - private _getRowsInMonth(): number { - if ( - (isSunday(startOfMonth(this._date)) && getDaysInMonth(this._date) >= 30) || - (isSaturday(startOfMonth(this._date)) && getDaysInMonth(this._date) === 31) - ) { - return 6 + public setMoreEventsPopup(date: Date, events: {id: number, order:number}[]): void { + let eventsArray = [] + for (const item of events) { + eventsArray = [...eventsArray, this._getEvent(item.id)] } - return 5 - } - - private _getWeekOfMonth(date: Date): number { - return getISOWeek(date) - getISOWeek(startOfMonth(this.date)) - } - - public setMoreEventsPopup(date: Date, events: number[]): void { - setTimeout(() => { - const height = (this._el.nativeElement.offsetHeight - 68) / this._getRowsInMonth() - const row = this._getWeekOfMonth(date) - let column = getDay(date) - if (column === 0) { - column = 7 - } - this.moreEventsPopupVisible = true - this.moreEventsPopupTop = row * height - 50 + 69 - this.moreEventsPopupLeft = (column - 1) * (this._el.nativeElement.offsetWidth / 7) - 24 - this.moreEventsPopupDay = this.settings.shortDayNames[column - 1] - this.moreEventsPopupDate = getDate(date) - this.moreEventsPopupEvents = this._getDisplayedEvents(events) - }) + this.popupHandler.setMoreEventsPopup(date, eventsArray) } public closeMoreEventsPopup(): void { - this.moreEventsPopupVisible = false - } - - private _formatTwoDays(date1: Date, date2: Date): string { - if (!isEqual(date1, date2)) { - let year = '' - let month = '' - if (getYear(date1) !== getYear(date2)) { - year = format(date2, ' YYYY.') - } - if (getMonth(date1) !== getMonth(date2) || year !== '') { - month = ' ' + this.settings.monthNames[getMonth(date2)] - } - return ( - format(date1, 'YYYY. ') + this.settings.monthNames[getMonth(date1)] + format(date1, ' D -') + year + month + format(date2, ' D') - ) - } else { - return format(date1, 'YYYY. ') + this.settings.monthNames[getMonth(date1)] + format(date1, ' D') - } + this.store.dispatch(new fromPopupActions.HideMoreEventsPopup()) } public setEventDetailsPopup(id: number, click: Event): void { - this.popupHandler.setEventDetailsPopup(this._getEvent(id), click.target as HTMLElement, this._el.nativeElement) + this.popupHandler.setEventDetailsPopup(this._getEvent(id), click.target as HTMLElement) } public closeEventDetailsPopup(): void { diff --git a/libs/calendar/src/lib/calendar.interfaces.ts b/libs/calendar/src/lib/calendar.interfaces.ts index 3d68ed2ff..77c341fb2 100644 --- a/libs/calendar/src/lib/calendar.interfaces.ts +++ b/libs/calendar/src/lib/calendar.interfaces.ts @@ -31,7 +31,9 @@ export interface PopupSettings { title?: string, description?: string, color?: string, + day?: string, events?: { + id: number title: string, color: string }[] diff --git a/libs/calendar/src/lib/lib/cell.ts b/libs/calendar/src/lib/lib/cell.ts index 8a20ae5fc..68b18acd7 100644 --- a/libs/calendar/src/lib/lib/cell.ts +++ b/libs/calendar/src/lib/lib/cell.ts @@ -56,11 +56,11 @@ export class Cell { return this._date } - get getEvents(): number[] { - const events = [] + get getEvents(): {id: number, order:number}[] { + let events = [] for (const item of this._rows) { if (!item.free) { - events.push({ id: item.id, order: item.row }) + events = [...events, {id: item.id, order: item.row}] } } return events diff --git a/libs/calendar/src/lib/services/popup-handler.service.ts b/libs/calendar/src/lib/services/popup-handler.service.ts index 8b57951ce..00966c3fd 100644 --- a/libs/calendar/src/lib/services/popup-handler.service.ts +++ b/libs/calendar/src/lib/services/popup-handler.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { CalendarEvent, PopupSettings, Settings } from '../calendar.interfaces'; -import { isEqual, getYear, format, getMonth } from 'date-fns'; +import { isEqual, getYear, format, getMonth, getDate, getISOWeek, startOfMonth, getDay, isSunday, isSaturday, getDaysInMonth } from 'date-fns'; import { Store } from '@ngrx/store'; import { fromPopupActions } from '../+state/popup.actions'; @@ -10,12 +10,14 @@ import { fromPopupActions } from '../+state/popup.actions'; export class PopupHandlerService { public settings: Settings + public hostElement: HTMLElement + public date: Date constructor(private store: Store) { } - setEventDetailsPopup(event: CalendarEvent, clickedElement: HTMLElement, hostElement: HTMLElement) { + public setEventDetailsPopup(event: CalendarEvent, clickedElement: HTMLElement) { const boundingRect = clickedElement.getBoundingClientRect() as DOMRect - const calendarBoundingRect = hostElement.getBoundingClientRect() as DOMRect + const calendarBoundingRect = this.hostElement.getBoundingClientRect() as DOMRect let top = 0 let left = 0 @@ -36,7 +38,7 @@ export class PopupHandlerService { title: event.title, top, left, - date: this.formatTwoDays(event.startDate, event.endDate), + date: this._formatTwoDays(event.startDate, event.endDate), description: event.description, color: event.color, } @@ -44,7 +46,40 @@ export class PopupHandlerService { this.store.dispatch(new fromPopupActions.SetEventDetailsPopup(popupSettings)) } - public formatTwoDays(date1: Date, date2: Date): string { + public setMoreEventsPopup(date: Date, events: CalendarEvent[]) { + const height = (this.hostElement.offsetHeight - 68) / this._getRowsInMonth() + const row = this._getWeekOfMonth(date) + let column = getDay(date) + if (column === 0) { + column = 7 + } + + const top = row * height - 50 + 69 + const left = (column - 1) * (this.hostElement.offsetWidth / 7) - 24 + + let eventsArray = [] + + for (const item of events) { + eventsArray = [...eventsArray,{ + id: item.id, + title: item.title, + color: item.color + }] + } + + const popupSettings: PopupSettings = { + visible: true, + top, + left, + date: String(getDate(date)), + day: this.settings.shortDayNames[column - 1], + events: eventsArray + } + + this.store.dispatch(new fromPopupActions.SetMoreEventsPopup(popupSettings)) + } + + private _formatTwoDays(date1: Date, date2: Date): string { if (!isEqual(date1, date2)) { let year = '' let month = '' @@ -61,4 +96,18 @@ export class PopupHandlerService { return format(date1, 'YYYY. ') + this.settings.monthNames[getMonth(date1)] + format(date1, ' D') } } + + private _getWeekOfMonth(date: Date): number { + return getISOWeek(date) - getISOWeek(startOfMonth(this.date)) + } + + private _getRowsInMonth(): number { + if ( + (isSunday(startOfMonth(this.date)) && getDaysInMonth(this.date) >= 30) || + (isSaturday(startOfMonth(this.date)) && getDaysInMonth(this.date) === 31) + ) { + return 6 + } + return 5 + } } From feaea67f51201731be354b619bebdea786b74824 Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Sun, 5 May 2019 12:25:19 +0200 Subject: [PATCH 07/20] feat: detect outside popup click --- libs/calendar/src/lib/calendar.component.html | 4 +- libs/calendar/src/lib/calendar.component.ts | 80 +++++++------------ libs/calendar/src/lib/lib/cell.ts | 4 + .../src/lib/services/popup-handler.service.ts | 2 +- 4 files changed, 35 insertions(+), 55 deletions(-) diff --git a/libs/calendar/src/lib/calendar.component.html b/libs/calendar/src/lib/calendar.component.html index b6a07ad65..1870fecf5 100644 --- a/libs/calendar/src/lib/calendar.component.html +++ b/libs/calendar/src/lib/calendar.component.html @@ -9,12 +9,12 @@
{{ item }}
-
+
{{ cell.day }}
{ + let eventsArray = [] + for (const item of events) { + eventsArray = [...eventsArray, this._getEvent(item.id)] + } + this.popupHandler.setMoreEventsPopup(date, eventsArray) + }) } public closeMoreEventsPopup(): void { @@ -288,7 +286,9 @@ export class CalendarComponent implements OnInit, AfterViewInit { } public setEventDetailsPopup(id: number, click: Event): void { - this.popupHandler.setEventDetailsPopup(this._getEvent(id), click.target as HTMLElement) + setTimeout(() => { + this.popupHandler.setEventDetailsPopup(this._getEvent(id), click.target as HTMLElement) + }); } public closeEventDetailsPopup(): void { @@ -296,49 +296,25 @@ export class CalendarComponent implements OnInit, AfterViewInit { } @HostListener('document:click', ['$event']) - clickout(event) { - /*let eventDetails = false - let moreEvents = false - for (let i = 0; i < event.path.length; i++) { - const element = event.path[i] - if (this.eventDetailsPopupVisible && element === this.eventDetailsPopupElement.nativeElement) { - if (this.moreEventsPopupVisible) { - moreEvents = true - } - eventDetails = true - } - if (this.moreEventsPopupVisible && element === this.moreEventsPopupElement.nativeElement) { - moreEvents = true + clickout(event: Event) { + let outsideEvetDetailsPopup = false + if ( + this.eventDetailsPopupElement + && !this.eventDetailsPopupElement.nativeElement.contains(event.target) + ) { + outsideEvetDetailsPopup = true + this.closeEventDetailsPopup() + } + if ( + this.moreEventsPopupElement + && !this.moreEventsPopupElement.nativeElement.contains(event.target) + ) { + if (outsideEvetDetailsPopup) { + this.closeMoreEventsPopup() } - - if (element.parentElement) { - if ( - element.parentElement.classList.contains('event') && - !element.parentElement.classList.contains('more') && - !element.parentElement.classList.contains('popup-event') - ) { - eventDetails = true - moreEvents = false - } - if (element.parentElement.classList.contains('event') && element.parentElement.classList.contains('more')) { - eventDetails = false - moreEvents = true - } - if ( - element.parentElement.classList.contains('event') && - !element.parentElement.classList.contains('more') && - element.parentElement.classList.contains('popup-event') - ) { - eventDetails = true - moreEvents = true - } + if (!this.eventDetailsPopupElement) { + this.closeMoreEventsPopup() } } - if (!eventDetails) { - this.eventDetailsPopupVisible = false - } - if (!moreEvents) { - this.moreEventsPopupVisible = false - }*/ } } diff --git a/libs/calendar/src/lib/lib/cell.ts b/libs/calendar/src/lib/lib/cell.ts index 68b18acd7..770e17a60 100644 --- a/libs/calendar/src/lib/lib/cell.ts +++ b/libs/calendar/src/lib/lib/cell.ts @@ -32,6 +32,10 @@ export class Cell { return this._rows.length + 1 } + get id() { + return this._id + } + get firstFreeRow(): number { for (const item of this._rows) { if (item.free) { diff --git a/libs/calendar/src/lib/services/popup-handler.service.ts b/libs/calendar/src/lib/services/popup-handler.service.ts index 00966c3fd..f2991b5d3 100644 --- a/libs/calendar/src/lib/services/popup-handler.service.ts +++ b/libs/calendar/src/lib/services/popup-handler.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { Injectable, HostListener } from '@angular/core'; import { CalendarEvent, PopupSettings, Settings } from '../calendar.interfaces'; import { isEqual, getYear, format, getMonth, getDate, getISOWeek, startOfMonth, getDay, isSunday, isSaturday, getDaysInMonth } from 'date-fns'; import { Store } from '@ngrx/store'; From 8292dff4259bf602810a49c3b85ebfd4aac4f501 Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Mon, 6 May 2019 14:42:13 +0200 Subject: [PATCH 08/20] feat: cells selectors --- libs/calendar/src/index.ts | 2 + libs/calendar/src/lib/+state/cells.actions.ts | 27 ++++ .../src/lib/+state/cells.effects.spec.ts | 35 +++++ libs/calendar/src/lib/+state/cells.effects.ts | 10 ++ .../src/lib/+state/cells.reducer.spec.ts | 36 +++++ libs/calendar/src/lib/+state/cells.reducer.ts | 46 ++++++ .../src/lib/+state/cells.selectors.spec.ts | 53 +++++++ .../src/lib/+state/cells.selectors.ts | 141 ++++++++++++++++++ .../src/lib/+state/popup.selectors.ts | 41 ----- libs/calendar/src/lib/calendar.component.html | 2 +- libs/calendar/src/lib/calendar.component.ts | 12 +- libs/calendar/src/lib/calendar.module.ts | 4 + libs/calendar/src/lib/lib/cell.ts | 8 +- libs/calendar/src/lib/lib/renderer.ts | 2 +- package.json | 14 +- 15 files changed, 377 insertions(+), 56 deletions(-) create mode 100644 libs/calendar/src/lib/+state/cells.actions.ts create mode 100644 libs/calendar/src/lib/+state/cells.effects.spec.ts create mode 100644 libs/calendar/src/lib/+state/cells.effects.ts create mode 100644 libs/calendar/src/lib/+state/cells.reducer.spec.ts create mode 100644 libs/calendar/src/lib/+state/cells.reducer.ts create mode 100644 libs/calendar/src/lib/+state/cells.selectors.spec.ts create mode 100644 libs/calendar/src/lib/+state/cells.selectors.ts delete mode 100644 libs/calendar/src/lib/+state/popup.selectors.ts diff --git a/libs/calendar/src/index.ts b/libs/calendar/src/index.ts index b866cf0c1..b0f75d858 100644 --- a/libs/calendar/src/index.ts +++ b/libs/calendar/src/index.ts @@ -1,2 +1,4 @@ +export * from './lib/+state/cells.reducer' +export * from './lib/+state/cells.selectors' export * from './lib/calendar.module' export * from './lib/calendar.interfaces' diff --git a/libs/calendar/src/lib/+state/cells.actions.ts b/libs/calendar/src/lib/+state/cells.actions.ts new file mode 100644 index 000000000..c659d6090 --- /dev/null +++ b/libs/calendar/src/lib/+state/cells.actions.ts @@ -0,0 +1,27 @@ +import { Action } from '@ngrx/store' +import { CalendarEvent } from '../calendar.interfaces'; + +export enum CellsActionTypes { + SetEvents = '[Cells] Set Events', + SetMonth = '[Cells] Set Month', + SetHostHeight = '[Cells] Set Host Height' +} + +export class SetEvents implements Action { + readonly type = CellsActionTypes.SetEvents + constructor(public payload: CalendarEvent[]) {} +} + +export class SetMonth implements Action { + readonly type = CellsActionTypes.SetMonth + constructor(public payload: Date) {} +} + +export class SetHostHeight implements Action { + readonly type = CellsActionTypes.SetHostHeight + constructor(public payload: number) {} +} + +export type CellsAction = SetEvents | SetMonth | SetHostHeight + +export const fromCellsActions = { SetEvents, SetMonth, SetHostHeight } diff --git a/libs/calendar/src/lib/+state/cells.effects.spec.ts b/libs/calendar/src/lib/+state/cells.effects.spec.ts new file mode 100644 index 000000000..80d9d59e5 --- /dev/null +++ b/libs/calendar/src/lib/+state/cells.effects.spec.ts @@ -0,0 +1,35 @@ +import { TestBed, async } from '@angular/core/testing' + +import { Observable } from 'rxjs' + +import { EffectsModule } from '@ngrx/effects' +import { StoreModule } from '@ngrx/store' +import { provideMockActions } from '@ngrx/effects/testing' + +import { NxModule } from '@nrwl/nx' +import { DataPersistence } from '@nrwl/nx' +import { hot } from '@nrwl/nx/testing' + +import { CellsEffects } from './cells.effects' +import { LoadCells, CellsLoaded } from './cells.actions' + +describe('CellsEffects', () => { + let actions: Observable + let effects: CellsEffects + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [NxModule.forRoot(), StoreModule.forRoot({}), EffectsModule.forRoot([])], + providers: [CellsEffects, DataPersistence, provideMockActions(() => actions)], + }) + + effects = TestBed.get(CellsEffects) + }) + + describe('loadCells$', () => { + it('should work', () => { + actions = hot('-a-|', { a: new LoadCells() }) + expect(effects.loadCells$).toBeObservable(hot('-a-|', { a: new CellsLoaded([]) })) + }) + }) +}) diff --git a/libs/calendar/src/lib/+state/cells.effects.ts b/libs/calendar/src/lib/+state/cells.effects.ts new file mode 100644 index 000000000..4faa9c067 --- /dev/null +++ b/libs/calendar/src/lib/+state/cells.effects.ts @@ -0,0 +1,10 @@ +import { Injectable } from '@angular/core' +import { Actions } from '@ngrx/effects' +import { DataPersistence } from '@nrwl/nx' + +import { CellsPartialState } from './cells.reducer' + +@Injectable() +export class CellsEffects { + constructor(private actions$: Actions, private dataPersistence: DataPersistence) {} +} diff --git a/libs/calendar/src/lib/+state/cells.reducer.spec.ts b/libs/calendar/src/lib/+state/cells.reducer.spec.ts new file mode 100644 index 000000000..5a8464543 --- /dev/null +++ b/libs/calendar/src/lib/+state/cells.reducer.spec.ts @@ -0,0 +1,36 @@ +import { CellsLoaded } from './cells.actions' +import { CellsState, Entity, initialState, cellsReducer } from './cells.reducer' + +describe('Cells Reducer', () => { + const getCellsId = it => it['id'] + let createCells + + beforeEach(() => { + createCells = (id: string, name = ''): Entity => ({ + id, + name: name || `name-${id}`, + }) + }) + + describe('valid Cells actions ', () => { + it('should return set the list of known Cells', () => { + const cellss = [createCells('PRODUCT-AAA'), createCells('PRODUCT-zzz')] + const action = new CellsLoaded(cellss) + const result: CellsState = cellsReducer(initialState, action) + const selId: string = getCellsId(result.list[1]) + + expect(result.loaded).toBe(true) + expect(result.list.length).toBe(2) + expect(selId).toBe('PRODUCT-zzz') + }) + }) + + describe('unknown action', () => { + it('should return the initial state', () => { + const action = {} as any + const result = cellsReducer(initialState, action) + + expect(result).toBe(initialState) + }) + }) +}) diff --git a/libs/calendar/src/lib/+state/cells.reducer.ts b/libs/calendar/src/lib/+state/cells.reducer.ts new file mode 100644 index 000000000..a6baca95d --- /dev/null +++ b/libs/calendar/src/lib/+state/cells.reducer.ts @@ -0,0 +1,46 @@ +import { CellsAction, CellsActionTypes } from './cells.actions' +import { CalendarEvent } from '../calendar.interfaces'; + +export const CELLS_FEATURE_KEY = 'ui-calendar-cells' + +export interface CellsState { + events: CalendarEvent[], + month: Date, + height: number +} + +export interface CellsPartialState { + readonly [CELLS_FEATURE_KEY]: CellsState +} + +export const initialState: CellsState = { + events: [], + month: new Date(), + height: 0 +} + +export function cellsReducer(state: CellsState = initialState, action: CellsAction): CellsState { + switch (action.type) { + case CellsActionTypes.SetEvents: + state = { + ...state, + events: action.payload + } + break + + case CellsActionTypes.SetMonth: + state = { + ...state, + month: action.payload + } + break + + case CellsActionTypes.SetHostHeight: + state = { + ...state, + height: action.payload + } + break + } + return state +} diff --git a/libs/calendar/src/lib/+state/cells.selectors.spec.ts b/libs/calendar/src/lib/+state/cells.selectors.spec.ts new file mode 100644 index 000000000..1b57ef897 --- /dev/null +++ b/libs/calendar/src/lib/+state/cells.selectors.spec.ts @@ -0,0 +1,53 @@ +import { Entity, CellsState } from './cells.reducer' +import { cellsQuery } from './cells.selectors' + +describe('Cells Selectors', () => { + const ERROR_MSG = 'No Error Available' + const getCellsId = it => it['id'] + + let storeState + + beforeEach(() => { + const createCells = (id: string, name = ''): Entity => ({ + id, + name: name || `name-${id}`, + }) + storeState = { + cells: { + list: [createCells('PRODUCT-AAA'), createCells('PRODUCT-BBB'), createCells('PRODUCT-CCC')], + selectedId: 'PRODUCT-BBB', + error: ERROR_MSG, + loaded: true, + }, + } + }) + + describe('Cells Selectors', () => { + it('getAllCells() should return the list of Cells', () => { + const results = cellsQuery.getAllCells(storeState) + const selId = getCellsId(results[1]) + + expect(results.length).toBe(3) + expect(selId).toBe('PRODUCT-BBB') + }) + + it('getSelectedCells() should return the selected Entity', () => { + const result = cellsQuery.getSelectedCells(storeState) + const selId = getCellsId(result) + + expect(selId).toBe('PRODUCT-BBB') + }) + + it("getLoaded() should return the current 'loaded' status", () => { + const result = cellsQuery.getLoaded(storeState) + + expect(result).toBe(true) + }) + + it("getError() should return the current 'error' storeState", () => { + const result = cellsQuery.getError(storeState) + + expect(result).toBe(ERROR_MSG) + }) + }) +}) diff --git a/libs/calendar/src/lib/+state/cells.selectors.ts b/libs/calendar/src/lib/+state/cells.selectors.ts new file mode 100644 index 000000000..9f77b5b36 --- /dev/null +++ b/libs/calendar/src/lib/+state/cells.selectors.ts @@ -0,0 +1,141 @@ +import { CellsState } from './cells.reducer'; +import { createSelector } from '@ngrx/store'; +import { CalendarEvent, DisplayedEvent } from '../calendar.interfaces'; +import { Cell } from '../lib/cell'; +import { getMonth, getYear, isSunday, startOfMonth, isSaturday, getDaysInMonth, lastDayOfMonth, subMonths, startOfWeek, addDays, isToday, isEqual, isBefore, differenceInDays, isFirstDayOfMonth } from 'date-fns'; + +const selectEvents = (state: CellsState) => { + return state.events +} + +export const selectMonth = (state: CellsState) => { + return state.month +} + +const selectHeight = (state: CellsState) => { + return state.height +} + +const selectRowsInMonth = createSelector( + selectMonth, + (month: Date): number => { + if ( + (isSunday(startOfMonth(month)) && getDaysInMonth(month) >= 30) || + (isSaturday(startOfMonth(month)) && getDaysInMonth(month) === 31) + ) { + return 6 + } + return 5 + } +) + +const selectFirstCellDate = createSelector( + selectMonth, + (month: Date): Date => { + return startOfWeek(startOfMonth(month), { weekStartsOn: 1 }) + } +) + +const selectCalendarEventsInMonth = createSelector( + selectEvents, + selectMonth, + (events: CalendarEvent[], month: Date): CalendarEvent[] => { + let eventsInMonth: CalendarEvent[] = [] + for (const event of events) { + if ( + (getYear(event.startDate) === getYear(month) + && getMonth(event.startDate) === getMonth(month)) + || (getYear(event.endDate) === getYear(month) + && getMonth(event.endDate) === getMonth(month)) + ) { + eventsInMonth = [...eventsInMonth, event] + } + } + return eventsInMonth + } +) + +const selectGeneratedCells = createSelector( + selectRowsInMonth, + selectFirstCellDate, + selectHeight, + selectMonth, + (rows: number, firstCellDate: Date, hostHeight: number, month: Date): Cell[] => { + let cellsInMonth: Cell[] = [] + for (let i = 0; i < 7 * rows; i++) { + let id = 0 + const date = addDays(firstCellDate, id) + const today = isToday(date) + const cellHeight = (hostHeight - 68) / rows - 32 + const maxRows = Math.floor(cellHeight / 24) + const cell = new Cell( + id++, + today, + date, + maxRows + ) + cellsInMonth = [...cellsInMonth, cell] + } + return cellsInMonth + } +) + +const selectDisplayEvents = createSelector( + selectCalendarEventsInMonth, + (events: CalendarEvent[]): DisplayedEvent[] => { + let displayedEvents: DisplayedEvent[] = [] + for (const event of events) { + let displayedEvent = { + id: event.id, + title: event.title, + startDate: event.startDate, + endDate: event.endDate, + color: event.color, + } + if (isEqual(event.startDate, event.endDate)) { + displayedEvents = [...displayedEvents, displayedEvent] + } + if (isBefore(event.startDate, event.endDate)) { + const eventLength = Math.abs(differenceInDays(event.startDate, event.endDate)) + 1 + let startDate = event.startDate + for (let i = 0; i < eventLength; i++) { + if ( + isSunday(addDays(event.startDate, i)) + && isEqual(addDays(event.startDate, i), event.endDate) + ) { + displayedEvent = {...displayedEvent, + startDate: startDate, + endDate: addDays(event.startDate, i) + } + displayedEvents = [...displayedEvents, displayedEvent] + startDate = addDays(event.startDate, i) + } + } + } + } + return displayedEvents + } +) + +export const selectCells = createSelector( + selectGeneratedCells, + selectDisplayEvents, + selectFirstCellDate, + (cells: Cell[], events: DisplayedEvent[], firstCellDate: Date): Cell[] => { + for (const event of events) { + const row = cells[Math.abs(differenceInDays(event.startDate, firstCellDate))].firstFreeRow + const eventLength = Math.abs(differenceInDays(event.startDate, event.endDate)) + 1 + for (let i = 0; i < eventLength; i++) { + const cell = cells[Math.abs(differenceInDays(addDays(event.startDate, i), firstCellDate))] + const placeholder = i !== 0 + cell.push(event.id, row, event.title, eventLength, event.color, placeholder) + } + } + return cells + } +) + +export const cellsQuery = { + selectMonth, + selectCells +} diff --git a/libs/calendar/src/lib/+state/popup.selectors.ts b/libs/calendar/src/lib/+state/popup.selectors.ts deleted file mode 100644 index 64037ad6b..000000000 --- a/libs/calendar/src/lib/+state/popup.selectors.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { createFeatureSelector, createSelector } from '@ngrx/store' -import { POPUP_FEATURE_KEY, PopupState } from './popup.reducer' - -// Lookup the 'Popup' feature state managed by NgRx -const getPopupState = createFeatureSelector(POPUP_FEATURE_KEY) - -const getLoaded = createSelector( - getPopupState, - (state: PopupState) => state.loaded -) -const getError = createSelector( - getPopupState, - (state: PopupState) => state.error -) - -const getAllPopup = createSelector( - getPopupState, - getLoaded, - (state: PopupState, isLoaded) => { - return isLoaded ? state.list : [] - } -) -const getSelectedId = createSelector( - getPopupState, - (state: PopupState) => state.selectedId -) -const getSelectedPopup = createSelector( - getAllPopup, - getSelectedId, - (popup, id) => { - const result = popup.find(it => it['id'] === id) - return result ? Object.assign({}, result) : undefined - } -) - -export const popupQuery = { - getLoaded, - getError, - getAllPopup, - getSelectedPopup, -} diff --git a/libs/calendar/src/lib/calendar.component.html b/libs/calendar/src/lib/calendar.component.html index 1870fecf5..786b9f5f8 100644 --- a/libs/calendar/src/lib/calendar.component.html +++ b/libs/calendar/src/lib/calendar.component.html @@ -5,7 +5,7 @@
-
+
{{ item }}
diff --git a/libs/calendar/src/lib/calendar.component.ts b/libs/calendar/src/lib/calendar.component.ts index 25c8dc45a..1477e1e72 100644 --- a/libs/calendar/src/lib/calendar.component.ts +++ b/libs/calendar/src/lib/calendar.component.ts @@ -8,6 +8,8 @@ import { map } from 'rxjs/operators' import { Store, select } from '@ngrx/store'; import { POPUP_FEATURE_KEY, PopupState } from './+state/popup.reducer'; import { fromPopupActions } from './+state/popup.actions'; +import { cellsQuery } from './+state/cells.selectors'; +import { fromCellsActions } from './+state/cells.actions'; @Component({ selector: 'verseghy-calendar', @@ -23,6 +25,10 @@ export class CalendarComponent implements OnInit, AfterViewInit { private _renderer = new Renderer() private _ready = false + public asdasd = this.store.pipe( + select(cellsQuery.selectCells) + ) + @ViewChild('moreEvents') moreEventsPopupElement: ElementRef @ViewChild('eventDetails') eventDetailsPopupElement: ElementRef @@ -93,6 +99,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { } private _changeMonth(): void { + this.store.dispatch(new fromCellsActions.SetMonth(this._date)) this._renderer.changeMonth(this._date) this.monthChanged.emit({ year: this.date.getFullYear(), @@ -119,9 +126,9 @@ export class CalendarComponent implements OnInit, AfterViewInit { return this.settings.today } - get cells() { + /*get cells() { return this._cells - } + }*/ set date(date: Date) { this._date = date @@ -228,6 +235,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { set settings(settings: Settings) { this._settings = settings this.popupHandler.settings = settings + Cell.settings = settings } private _sortEventsInDay(events: DisplayedEvent[]): DisplayedEvent[] { diff --git a/libs/calendar/src/lib/calendar.module.ts b/libs/calendar/src/lib/calendar.module.ts index 8f504279d..66ed5325d 100644 --- a/libs/calendar/src/lib/calendar.module.ts +++ b/libs/calendar/src/lib/calendar.module.ts @@ -5,12 +5,16 @@ import { StoreModule } from '@ngrx/store' import { EffectsModule } from '@ngrx/effects' import { POPUP_FEATURE_KEY, initialState as popupInitialState, popupReducer } from './+state/popup.reducer' import { PopupEffects } from './+state/popup.effects' +import { CELLS_FEATURE_KEY, initialState as cellsInitialState, cellsReducer } from './+state/cells.reducer' +import { CellsEffects } from './+state/cells.effects' @NgModule({ imports: [ CommonModule, StoreModule.forFeature(POPUP_FEATURE_KEY, popupReducer, { initialState: popupInitialState }), EffectsModule.forFeature([PopupEffects]), + StoreModule.forFeature(CELLS_FEATURE_KEY, cellsReducer, { initialState: cellsInitialState }), + EffectsModule.forFeature([CellsEffects]), ], declarations: [CalendarComponent], exports: [CalendarComponent], diff --git a/libs/calendar/src/lib/lib/cell.ts b/libs/calendar/src/lib/lib/cell.ts index 770e17a60..dd153f74c 100644 --- a/libs/calendar/src/lib/lib/cell.ts +++ b/libs/calendar/src/lib/lib/cell.ts @@ -2,6 +2,7 @@ import { format, getDate, getMonth } from 'date-fns' import { Settings } from '../calendar.interfaces' export class Cell { + static settings: Settings private _rows: { id: number row: number @@ -19,8 +20,7 @@ export class Cell { private _id: number, private _today: boolean, private _date: Date, - private _maxRows: number, - private _settings: Settings + private _maxRows: number ) {} public getRow(width: number): number { @@ -47,7 +47,7 @@ export class Cell { get day(): string { if (getDate(this._date) === 1) { - return this._settings.shortMonthNames[getMonth(this._date)] + format(this._date, '. D') + return Cell.settings.shortMonthNames[getMonth(this._date)] + format(this._date, '. D') } return format(this._date, 'D') } @@ -79,7 +79,7 @@ export class Cell { } get moreEventsText(): string { - const text = this._settings.moreEvent + const text = Cell.settings.moreEvent return text.replace('{count}', String(this._moreEventsCount)) } diff --git a/libs/calendar/src/lib/lib/renderer.ts b/libs/calendar/src/lib/lib/renderer.ts index 731030961..c17de669f 100644 --- a/libs/calendar/src/lib/lib/renderer.ts +++ b/libs/calendar/src/lib/lib/renderer.ts @@ -91,7 +91,7 @@ export class Renderer { const rows = this._getRowsInMonth() const firstCellDate = this._getFirstCellDate() for (let i = 0; i < 7 * rows; i++) { - const cell = new Cell(i, isToday(addDays(firstCellDate, i)), addDays(firstCellDate, i), this._getMaxVisibleRows(), this._settings) + const cell = new Cell(i, isToday(addDays(firstCellDate, i)), addDays(firstCellDate, i), this._getMaxVisibleRows()) this._cells.push(cell) } } diff --git a/package.json b/package.json index 499642dc0..a0649cf8e 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,11 @@ }, "private": true, "dependencies": { + "@ngrx/store": "7.4.0", + "@ngrx/effects": "7.4.0", + "@ngrx/entity": "7.4.0", + "@ngrx/router-store": "7.4.0", + "@nrwl/nx": "7.8.1", "@angular-mdc/web": "1.0.3", "@angular/animations": "7.2.14", "@angular/common": "7.2.14", @@ -48,14 +53,9 @@ "@fortawesome/fontawesome-svg-core": "1.2.17", "@fortawesome/free-brands-svg-icons": "5.8.1", "@fortawesome/free-solid-svg-icons": "5.8.1", - "@ngrx/effects": "7.4.0", - "@ngrx/entity": "7.4.0", - "@ngrx/router-store": "7.4.0", - "@ngrx/store": "7.4.0", "@ngx-loading-bar/core": "4.2.0", "@ngx-loading-bar/http-client": "4.2.0", "@ngx-loading-bar/router": "4.2.0", - "@nrwl/nx": "7.8.1", "core-js": "2.6.5", "date-fns": "1.30.1", "firebase": "5.10.0", @@ -68,12 +68,13 @@ "zone.js": "0.8.29" }, "devDependencies": { + "@ngrx/store-devtools": "7.4.0", + "ngrx-store-freeze": "0.2.4", "@angular-devkit/build-angular": "0.13.8", "@angular/cli": "7.3.8", "@angular/compiler-cli": "7.2.14", "@angular/language-service": "7.2.14", "@ngrx/schematics": "7.4.0", - "@ngrx/store-devtools": "7.4.0", "@nrwl/builders": "7.8.1", "@nrwl/schematics": "7.8.1", "@types/jest": "24.0.11", @@ -83,7 +84,6 @@ "dotenv": "7.0.0", "jest": "24.7.1", "jest-preset-angular": "7.1.0", - "ngrx-store-freeze": "0.2.4", "prettier": "1.17.0", "ts-node": "8.0.3", "tslint": "5.14.0", From 81efd2148fdbc6ee14509f7e8383afa6d880c879 Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Mon, 6 May 2019 15:21:08 +0200 Subject: [PATCH 09/20] fix: cells selectors --- .../components/events/events.component.ts | 1 + .../src/lib/+state/cells.selectors.ts | 31 ++++++++++++------- libs/calendar/src/lib/calendar.component.ts | 16 ++++++---- libs/calendar/src/lib/calendar.interfaces.ts | 1 + 4 files changed, 31 insertions(+), 18 deletions(-) diff --git a/apps/frontend/src/app/modules/events/components/events/events.component.ts b/apps/frontend/src/app/modules/events/components/events/events.component.ts index 53fbf41b3..58a443553 100644 --- a/apps/frontend/src/app/modules/events/components/events/events.component.ts +++ b/apps/frontend/src/app/modules/events/components/events/events.component.ts @@ -13,6 +13,7 @@ import { Observable } from 'rxjs' }) export class EventsComponent implements OnInit { calendarSettings: Settings = { + locale: 'hu', shortDayNames: ['Hé', 'Ke', 'Sze', 'Csüt', 'Pé', 'Szo', 'Vas'], shortMonthNames: ['Jan', 'Febr', 'Márc', 'Ápr', 'Máj', 'Jún', 'Júl', 'Aug', 'Szept', 'Okt', 'Nov', 'Dec'], monthNames: [ diff --git a/libs/calendar/src/lib/+state/cells.selectors.ts b/libs/calendar/src/lib/+state/cells.selectors.ts index 9f77b5b36..b3d8fb56b 100644 --- a/libs/calendar/src/lib/+state/cells.selectors.ts +++ b/libs/calendar/src/lib/+state/cells.selectors.ts @@ -1,20 +1,28 @@ -import { CellsState } from './cells.reducer'; +import { CellsState, CELLS_FEATURE_KEY } from './cells.reducer'; import { createSelector } from '@ngrx/store'; import { CalendarEvent, DisplayedEvent } from '../calendar.interfaces'; import { Cell } from '../lib/cell'; import { getMonth, getYear, isSunday, startOfMonth, isSaturday, getDaysInMonth, lastDayOfMonth, subMonths, startOfWeek, addDays, isToday, isEqual, isBefore, differenceInDays, isFirstDayOfMonth } from 'date-fns'; -const selectEvents = (state: CellsState) => { - return state.events -} -export const selectMonth = (state: CellsState) => { - return state.month +export const selectFeature = (state: any) => { + return state[CELLS_FEATURE_KEY] } -const selectHeight = (state: CellsState) => { - return state.height -} +const selectEvents = createSelector( + selectFeature, + (state: CellsState) => state.events +) + +export const selectMonth = createSelector( + selectFeature, + (state: CellsState) => state.month +) + +const selectHeight = createSelector( + selectFeature, + (state: CellsState) => state.height +) const selectRowsInMonth = createSelector( selectMonth, @@ -63,13 +71,12 @@ const selectGeneratedCells = createSelector( (rows: number, firstCellDate: Date, hostHeight: number, month: Date): Cell[] => { let cellsInMonth: Cell[] = [] for (let i = 0; i < 7 * rows; i++) { - let id = 0 - const date = addDays(firstCellDate, id) + const date = addDays(firstCellDate, i) const today = isToday(date) const cellHeight = (hostHeight - 68) / rows - 32 const maxRows = Math.floor(cellHeight / 24) const cell = new Cell( - id++, + i, today, date, maxRows diff --git a/libs/calendar/src/lib/calendar.component.ts b/libs/calendar/src/lib/calendar.component.ts index 1477e1e72..1f0a3be69 100644 --- a/libs/calendar/src/lib/calendar.component.ts +++ b/libs/calendar/src/lib/calendar.component.ts @@ -1,7 +1,7 @@ import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core' import { DisplayedEvent, Settings, CalendarEvent } from '@verseghy/calendar' import { Cell } from './lib/cell' -import { addMonths, differenceInDays, format, getMonth, isAfter, isBefore, isEqual, subMonths } from 'date-fns' +import { addMonths, differenceInDays, format, getMonth, isAfter, isBefore, isEqual, subMonths, startOfWeek, addDays } from 'date-fns' import { Renderer } from './lib/renderer' import { PopupHandlerService } from './services/popup-handler.service'; import { map } from 'rxjs/operators' @@ -119,17 +119,20 @@ export class CalendarComponent implements OnInit, AfterViewInit { } get shortDayNames() { - return this.settings.shortDayNames + const locale = require(`date-fns/locale/${this.settings.locale}`) + const firstDate = startOfWeek(new Date, {weekStartsOn: 1}) + let dayNames = [] + for (let i = 0; i < 7; i++) { + const dayName = format(addDays(firstDate, i), 'dd', {locale: locale}) + dayNames = [...dayNames, dayName] + } + return dayNames } get today() { return this.settings.today } - /*get cells() { - return this._cells - }*/ - set date(date: Date) { this._date = date this._changeMonth() @@ -197,6 +200,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { get settings(): Settings { this._settings = this._settings || {} + this._settings.locale = this._settings.locale || 'en' this._settings.shortDayNames = this._settings.shortDayNames || ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] this._settings.shortMonthNames = this._settings.shortMonthNames || [ 'Jan', diff --git a/libs/calendar/src/lib/calendar.interfaces.ts b/libs/calendar/src/lib/calendar.interfaces.ts index 77c341fb2..ed69f3ff0 100644 --- a/libs/calendar/src/lib/calendar.interfaces.ts +++ b/libs/calendar/src/lib/calendar.interfaces.ts @@ -7,6 +7,7 @@ export interface DisplayedEvent { } export interface Settings { + locale?: string shortDayNames?: string[] shortMonthNames?: string[] monthNames?: string[] From 8bf74f75f8ed89653f9631235f20dae00ab175c6 Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Tue, 7 May 2019 17:26:50 +0200 Subject: [PATCH 10/20] feat: removed renderer.ts --- .../components/events/events.component.ts | 3 +- .../src/lib/+state/cells.selectors.ts | 98 ++++++---- libs/calendar/src/lib/calendar.component.css | 4 + libs/calendar/src/lib/calendar.component.html | 4 +- libs/calendar/src/lib/calendar.component.ts | 103 ++--------- libs/calendar/src/lib/calendar.interfaces.ts | 2 +- libs/calendar/src/lib/lib/cell.ts | 15 +- libs/calendar/src/lib/lib/renderer.ts | 169 ------------------ .../src/lib/services/popup-handler.service.ts | 15 +- package.json | 16 +- yarn.lock | 7 +- 11 files changed, 116 insertions(+), 320 deletions(-) delete mode 100644 libs/calendar/src/lib/lib/renderer.ts diff --git a/apps/frontend/src/app/modules/events/components/events/events.component.ts b/apps/frontend/src/app/modules/events/components/events/events.component.ts index 58a443553..a78d9e9ec 100644 --- a/apps/frontend/src/app/modules/events/components/events/events.component.ts +++ b/apps/frontend/src/app/modules/events/components/events/events.component.ts @@ -13,7 +13,6 @@ import { Observable } from 'rxjs' }) export class EventsComponent implements OnInit { calendarSettings: Settings = { - locale: 'hu', shortDayNames: ['Hé', 'Ke', 'Sze', 'Csüt', 'Pé', 'Szo', 'Vas'], shortMonthNames: ['Jan', 'Febr', 'Márc', 'Ápr', 'Máj', 'Jún', 'Júl', 'Aug', 'Szept', 'Okt', 'Nov', 'Dec'], monthNames: [ @@ -43,7 +42,7 @@ export class EventsComponent implements OnInit { map((data: EventsState) => { let calendarEvents: CalendarEvent[] = [] for (const item of data.list) { - calendarEvents = [...calendarEvents, {id: item.id, title: item.title, description: item.description, startDate: item.date_from, endDate: item.date_to, color: item.color}] + calendarEvents = [...calendarEvents, {id: item.id, title: item.title, description: item.description, startDate: new Date(item.date_from), endDate: new Date(item.date_to), color: item.color}] } return calendarEvents }) diff --git a/libs/calendar/src/lib/+state/cells.selectors.ts b/libs/calendar/src/lib/+state/cells.selectors.ts index b3d8fb56b..352fb0979 100644 --- a/libs/calendar/src/lib/+state/cells.selectors.ts +++ b/libs/calendar/src/lib/+state/cells.selectors.ts @@ -2,7 +2,8 @@ import { CellsState, CELLS_FEATURE_KEY } from './cells.reducer'; import { createSelector } from '@ngrx/store'; import { CalendarEvent, DisplayedEvent } from '../calendar.interfaces'; import { Cell } from '../lib/cell'; -import { getMonth, getYear, isSunday, startOfMonth, isSaturday, getDaysInMonth, lastDayOfMonth, subMonths, startOfWeek, addDays, isToday, isEqual, isBefore, differenceInDays, isFirstDayOfMonth } from 'date-fns'; +import { getMonth, getYear, isSunday, startOfMonth, isSaturday, getDaysInMonth, startOfWeek, addDays, differenceInDays, lastDayOfWeek, isSameDay, isSameMonth, isSameYear, getOverlappingDaysInIntervals, parseISO, areIntervalsOverlapping, format } from 'date-fns'; +import { endOfWeek, endOfMonth, eachDayOfInterval } from 'date-fns/esm'; export const selectFeature = (state: any) => { @@ -44,20 +45,26 @@ const selectFirstCellDate = createSelector( } ) +const selectLastCellDate = createSelector( + selectMonth, + (month: Date): Date => { + return endOfWeek(endOfMonth(month), { weekStartsOn: 1 }) + } +) + const selectCalendarEventsInMonth = createSelector( selectEvents, selectMonth, - (events: CalendarEvent[], month: Date): CalendarEvent[] => { + selectFirstCellDate, + selectLastCellDate, + (events: CalendarEvent[], month: Date, firstCellDate: Date, lastCellDate: Date): CalendarEvent[] => { let eventsInMonth: CalendarEvent[] = [] for (const event of events) { - if ( - (getYear(event.startDate) === getYear(month) - && getMonth(event.startDate) === getMonth(month)) - || (getYear(event.endDate) === getYear(month) - && getMonth(event.endDate) === getMonth(month)) - ) { - eventsInMonth = [...eventsInMonth, event] - } + const overlap = areIntervalsOverlapping( + { start: firstCellDate, end: lastCellDate }, + { start: event.startDate, end: event.endDate } + ) + if (overlap) eventsInMonth = [...eventsInMonth, event] } return eventsInMonth } @@ -72,14 +79,16 @@ const selectGeneratedCells = createSelector( let cellsInMonth: Cell[] = [] for (let i = 0; i < 7 * rows; i++) { const date = addDays(firstCellDate, i) - const today = isToday(date) + const today = isSameDay(date, new Date()) const cellHeight = (hostHeight - 68) / rows - 32 const maxRows = Math.floor(cellHeight / 24) + const anotherMonth = !isSameMonth(date, month) const cell = new Cell( i, today, date, - maxRows + maxRows, + anotherMonth ) cellsInMonth = [...cellsInMonth, cell] } @@ -89,34 +98,38 @@ const selectGeneratedCells = createSelector( const selectDisplayEvents = createSelector( selectCalendarEventsInMonth, - (events: CalendarEvent[]): DisplayedEvent[] => { + selectFirstCellDate, + selectLastCellDate, + (events: CalendarEvent[], firstCellDate: Date, lastCellDate: Date): DisplayedEvent[] => { let displayedEvents: DisplayedEvent[] = [] for (const event of events) { - let displayedEvent = { - id: event.id, - title: event.title, - startDate: event.startDate, - endDate: event.endDate, - color: event.color, - } - if (isEqual(event.startDate, event.endDate)) { - displayedEvents = [...displayedEvents, displayedEvent] - } - if (isBefore(event.startDate, event.endDate)) { - const eventLength = Math.abs(differenceInDays(event.startDate, event.endDate)) + 1 - let startDate = event.startDate - for (let i = 0; i < eventLength; i++) { + const daysInEvent = eachDayOfInterval({ start: event.startDate, end: event.endDate }) + let startDate = event.startDate + for (const day of daysInEvent) { + if ( + isSameDay(day, endOfWeek(day, { weekStartsOn: 1 })) + || isSameDay(day, event.endDate) + ) { if ( - isSunday(addDays(event.startDate, i)) - && isEqual(addDays(event.startDate, i), event.endDate) + areIntervalsOverlapping( + { start: firstCellDate, end: lastCellDate }, + { start: startDate, end: day } + ) ) { - displayedEvent = {...displayedEvent, - startDate: startDate, - endDate: addDays(event.startDate, i) - } - displayedEvents = [...displayedEvents, displayedEvent] - startDate = addDays(event.startDate, i) + const trackBy = `${event.id}-${format(startDate, 'yyyy-MM-dd')}-${format(day, 'dd-MM-yyyy')}` + displayedEvents = [ + ...displayedEvents, + { + id: event.id, + title: event.title, + startDate, + endDate: day, + color: event.color, + trackBy, + } + ] } + startDate = addDays(day, 1) } } } @@ -124,14 +137,25 @@ const selectDisplayEvents = createSelector( } ) -export const selectCells = createSelector( +const selectClearedCells = createSelector( selectGeneratedCells, + selectEvents, + (cells: Cell[]): Cell[] => { + for (const cell of cells) { + cell.clearEvents() + } + return cells + } +) + +export const selectCells = createSelector( + selectClearedCells, selectDisplayEvents, selectFirstCellDate, (cells: Cell[], events: DisplayedEvent[], firstCellDate: Date): Cell[] => { for (const event of events) { const row = cells[Math.abs(differenceInDays(event.startDate, firstCellDate))].firstFreeRow - const eventLength = Math.abs(differenceInDays(event.startDate, event.endDate)) + 1 + const eventLength = eachDayOfInterval({ start: event.startDate, end: event.endDate }).length for (let i = 0; i < eventLength; i++) { const cell = cells[Math.abs(differenceInDays(addDays(event.startDate, i), firstCellDate))] const placeholder = i !== 0 diff --git a/libs/calendar/src/lib/calendar.component.css b/libs/calendar/src/lib/calendar.component.css index 5b35f2e03..d9f9a8e57 100644 --- a/libs/calendar/src/lib/calendar.component.css +++ b/libs/calendar/src/lib/calendar.component.css @@ -245,3 +245,7 @@ button:focus { display: block; font-size: 14px; } + +.anotherMonth { + color: #70757a +} diff --git a/libs/calendar/src/lib/calendar.component.html b/libs/calendar/src/lib/calendar.component.html index 786b9f5f8..b1e814ff9 100644 --- a/libs/calendar/src/lib/calendar.component.html +++ b/libs/calendar/src/lib/calendar.component.html @@ -5,11 +5,11 @@
-
+
{{ item }}
-
+
{{ cell.day }}
{ - this._renderer.HostElementRef = this._el - this._renderer.settings = this.settings this._changeMonth() - this._ready = true - this._cells = this._renderer.renderEvents() this.popupHandler.hostElement = this._el.nativeElement + this.store.dispatch(new fromCellsActions.SetHostHeight(this._el.nativeElement.offsetHeight)) }) } - private _generateEvents(): void { - this._clearDisplayedEvents() - for (const item of this._events) { - this._displayedEvents.push({ - id: item.id, - title: item.title, - startDate: item.startDate, - endDate: item.endDate, - color: item.color, - }) - } - this._sortDisplayedEvents() - this._renderer.setEvents(this._displayedEvents) - } - - private _sortDisplayedEvents() { - let lastDay = this._displayedEvents[0].startDate - let eventsInDay = [] - const sortedDisplayedEvents = [] - for (const item of this._displayedEvents) { - if (isAfter(item.startDate, lastDay)) { - lastDay = item.startDate - sortedDisplayedEvents.push(...this._sortEventsInDay(eventsInDay)) - eventsInDay = [item] - } else if (isEqual(item.startDate, lastDay)) { - eventsInDay.push(item) - } - } - sortedDisplayedEvents.push(...this._sortEventsInDay(eventsInDay)) - this._displayedEvents = sortedDisplayedEvents - } - private _changeMonth(): void { this.store.dispatch(new fromCellsActions.SetMonth(this._date)) - this._renderer.changeMonth(this._date) this.monthChanged.emit({ year: this.date.getFullYear(), month: this.date.getMonth(), @@ -115,15 +75,14 @@ export class CalendarComponent implements OnInit, AfterViewInit { } get formatedDate() { - return format(this.date, 'YYYY. ') + this.settings.monthNames[getMonth(this.date)] + return format(this.date, 'yyyy. LLLL', {locale: hu}) } get shortDayNames() { - const locale = require(`date-fns/locale/${this.settings.locale}`) const firstDate = startOfWeek(new Date, {weekStartsOn: 1}) let dayNames = [] for (let i = 0; i < 7; i++) { - const dayName = format(addDays(firstDate, i), 'dd', {locale: locale}) + const dayName = format(addDays(firstDate, i), 'EEEEEE', {locale: hu}) dayNames = [...dayNames, dayName] } return dayNames @@ -172,35 +131,17 @@ export class CalendarComponent implements OnInit, AfterViewInit { tempEvents = [...tempEvents, event] } } + this.store.dispatch(new fromCellsActions.SetEvents(tempEvents)) this._events = tempEvents - this._sortEventsArray() - this._generateEvents() - if (this._ready) this._cells = this._renderer.renderEvents() } } - private _sortEventsArray(): void { - this._events.sort((a, b) => { - if (isAfter(a.startDate, b.startDate)) { - return 1 - } - if (isBefore(a.startDate, b.startDate)) { - return -1 - } - return 0 - }) - } - private _clearDisplayedEvents(): void { - this._displayedEvents = [] - } - private _eventLenght(item: DisplayedEvent): number { return Math.abs(differenceInDays(item.startDate, item.endDate)) } get settings(): Settings { this._settings = this._settings || {} - this._settings.locale = this._settings.locale || 'en' this._settings.shortDayNames = this._settings.shortDayNames || ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] this._settings.shortMonthNames = this._settings.shortMonthNames || [ 'Jan', @@ -242,32 +183,10 @@ export class CalendarComponent implements OnInit, AfterViewInit { Cell.settings = settings } - private _sortEventsInDay(events: DisplayedEvent[]): DisplayedEvent[] { - return events.sort((a, b) => { - return (this._eventLenght(a) - this._eventLenght(b)) * -1 - }) - } - @HostListener('window:resize') public resize(): void { this.closeMoreEventsPopup() this.closeEventDetailsPopup() - this._renderer.resize() - } - - private _getDisplayedEvents(events) { - const displayedEvents = [] - for (const item of this._events) { - for (const event of events) { - if (item.id === event.id) { - displayedEvents.push({ id: item.id, title: item.title, color: item.color, order: event.order }) - } - } - } - displayedEvents.sort((a, b) => { - return a.order - b.order - }) - return displayedEvents } private _getEvent(id: number): CalendarEvent { @@ -280,7 +199,11 @@ export class CalendarComponent implements OnInit, AfterViewInit { } public trackByFn(index, item) { - return item.id + return item.trackBy + } + + public cellsTrackByFn(index, item) { + return item.date } public setMoreEventsPopup(date: Date, events: {id: number, order:number}[]): void { diff --git a/libs/calendar/src/lib/calendar.interfaces.ts b/libs/calendar/src/lib/calendar.interfaces.ts index ed69f3ff0..5c3416c99 100644 --- a/libs/calendar/src/lib/calendar.interfaces.ts +++ b/libs/calendar/src/lib/calendar.interfaces.ts @@ -4,10 +4,10 @@ export interface DisplayedEvent { startDate: Date endDate?: Date color?: string + trackBy: string } export interface Settings { - locale?: string shortDayNames?: string[] shortMonthNames?: string[] monthNames?: string[] diff --git a/libs/calendar/src/lib/lib/cell.ts b/libs/calendar/src/lib/lib/cell.ts index dd153f74c..8708ee57b 100644 --- a/libs/calendar/src/lib/lib/cell.ts +++ b/libs/calendar/src/lib/lib/cell.ts @@ -20,7 +20,8 @@ export class Cell { private _id: number, private _today: boolean, private _date: Date, - private _maxRows: number + private _maxRows: number, + private _anotherMonth: boolean, ) {} public getRow(width: number): number { @@ -36,6 +37,10 @@ export class Cell { return this._id } + get anotherMonth() { + return this._anotherMonth + } + get firstFreeRow(): number { for (const item of this._rows) { if (item.free) { @@ -47,9 +52,9 @@ export class Cell { get day(): string { if (getDate(this._date) === 1) { - return Cell.settings.shortMonthNames[getMonth(this._date)] + format(this._date, '. D') + return Cell.settings.shortMonthNames[getMonth(this._date)] + format(this._date, '. d') } - return format(this._date, 'D') + return format(this._date, 'd') } get today(): boolean { @@ -161,4 +166,8 @@ export class Cell { public getLastRow(): number { return this._rows.length } + + public clearEvents(): void { + this._rows = [] + } } diff --git a/libs/calendar/src/lib/lib/renderer.ts b/libs/calendar/src/lib/lib/renderer.ts deleted file mode 100644 index c17de669f..000000000 --- a/libs/calendar/src/lib/lib/renderer.ts +++ /dev/null @@ -1,169 +0,0 @@ -import { DisplayedEvent, Settings } from '../calendar.interfaces' -import { - addDays, - differenceInDays, - endOfMonth, - endOfWeek, - format, - getDaysInMonth, - isAfter, - isBefore, - isEqual, - isSaturday, - isSunday, - isToday, - lastDayOfMonth, - startOfMonth, - startOfWeek, - subDays, - subMonths, -} from 'date-fns' -import { Cell } from './cell' -import { ElementRef } from '@angular/core' - -export class Renderer { - private _date = new Date() - private _cells: Cell[] = [] - private _events: DisplayedEvent[] = [] - private _settings: Settings - public HostElementRef: ElementRef - - public renderEvents(): Cell[] { - this._generateCells() - const firstCellDate = this._getFirstCellDate() - for (const i of Object.keys(this._events)) { - const item = this._events[i] - const eventsInDay = [] - if (isBefore(item.startDate, item.endDate)) { - let eventStartDate = item.startDate - for (let i2 = 0; i2 < this._eventLenght(item); i2++) { - if ( - isSunday(addDays(item.startDate, i2)) && - format(addDays(item.startDate, i2), 'YYYY-MM-DD') !== format(item.endDate, 'YYYY-MM-DD') - ) { - eventsInDay.push({ - id: item.id, - title: item.title, - startDate: eventStartDate, - endDate: addDays(item.startDate, i2), - color: item.color, - }) - eventStartDate = addDays(item.startDate, i2 + 1) - } - } - eventsInDay.push({ - id: item.id, - title: item.title, - startDate: eventStartDate, - endDate: item.endDate, - color: item.color, - }) - } else if (isEqual(item.startDate, item.endDate)) { - eventsInDay.push({ - id: item.id, - title: item.title, - startDate: item.startDate, - endDate: item.endDate, - color: item.color, - }) - } - for (const item2 of eventsInDay) { - if (this._isEventInMonth(item2)) { - const row = this._cells[Math.abs(differenceInDays(item2.startDate, firstCellDate))].firstFreeRow - this._fillCellPlaceholder(item2, row) - } - } - } - return this._cells - } - - public changeMonth(date: Date): void { - this._date = date - this._generateCells() - } - - public setEvents(events: DisplayedEvent[]): void { - this._events = events - } - - private _generateCells(): void { - this._clearCells() - const rows = this._getRowsInMonth() - const firstCellDate = this._getFirstCellDate() - for (let i = 0; i < 7 * rows; i++) { - const cell = new Cell(i, isToday(addDays(firstCellDate, i)), addDays(firstCellDate, i), this._getMaxVisibleRows()) - this._cells.push(cell) - } - } - - private _getFirstCellDate(): Date { - if (isSunday(lastDayOfMonth(subMonths(this._date, 1)))) { - return startOfMonth(this._date) - } - - return addDays(startOfWeek(lastDayOfMonth(subMonths(this._date, 1))), 1) - } - - private _getLastCellDate(): Date { - if (isSunday(endOfMonth(this._date))) { - return endOfMonth(this._date) - } - - return addDays(endOfWeek(endOfMonth(this._date)), 1) - } - - private _isEventInMonth(item: DisplayedEvent): boolean { - const firstCellDate = this._getFirstCellDate() - const lastCellDate = this._getLastCellDate() - return ( - isAfter(format(item.startDate, 'YYYY-MM-DD'), format(subDays(firstCellDate, 1), 'YYYY-MM-DD')) && - isBefore(format(item.endDate, 'YYYY-MM-DD'), format(addDays(lastCellDate, 1), 'YYYY-MM-DD')) - ) - } - - private _fillCellPlaceholder(item: DisplayedEvent, row: number): void { - const firstCellDate = this._getFirstCellDate() - for (let i = 0; i < this._eventLenght(item); i++) { - const cell = this._cells[Math.abs(differenceInDays(addDays(item.startDate, i), firstCellDate))] - let placeholder = true - if (i === 0) { - placeholder = false - } - cell.push(item.id, row, item.title, this._eventLenght(item), item.color, placeholder) - } - } - - private _eventLenght(item: DisplayedEvent): number { - return Math.abs(differenceInDays(item.startDate, item.endDate)) + 1 - } - - private _clearCells(): void { - this._cells = [] - } - - private _getRowsInMonth(): number { - if ( - (isSunday(startOfMonth(this._date)) && getDaysInMonth(this._date) >= 30) || - (isSaturday(startOfMonth(this._date)) && getDaysInMonth(this._date) === 31) - ) { - return 6 - } - return 5 - } - - private _getMaxVisibleRows(): number { - const height = (this.HostElementRef.nativeElement.offsetHeight - 68) / this._getRowsInMonth() - 32 - const maxRows = Math.floor(height / 24) - return maxRows - } - - public resize(): void { - for (const item of this._cells) { - item.maxRows = this._getMaxVisibleRows() - } - } - - set settings(settings: Settings) { - this._settings = settings - } -} diff --git a/libs/calendar/src/lib/services/popup-handler.service.ts b/libs/calendar/src/lib/services/popup-handler.service.ts index f2991b5d3..0fcb66106 100644 --- a/libs/calendar/src/lib/services/popup-handler.service.ts +++ b/libs/calendar/src/lib/services/popup-handler.service.ts @@ -1,6 +1,7 @@ -import { Injectable, HostListener } from '@angular/core'; +import { Injectable } from '@angular/core'; import { CalendarEvent, PopupSettings, Settings } from '../calendar.interfaces'; -import { isEqual, getYear, format, getMonth, getDate, getISOWeek, startOfMonth, getDay, isSunday, isSaturday, getDaysInMonth } from 'date-fns'; +import { getYear, format, getMonth, getDate, getISOWeek, startOfMonth, getDay, isSunday, isSaturday, getDaysInMonth, isSameDay } from 'date-fns'; +import { hu } from 'date-fns/locale' import { Store } from '@ngrx/store'; import { fromPopupActions } from '../+state/popup.actions'; @@ -80,20 +81,20 @@ export class PopupHandlerService { } private _formatTwoDays(date1: Date, date2: Date): string { - if (!isEqual(date1, date2)) { + if (!isSameDay(date1, date2)) { let year = '' let month = '' if (getYear(date1) !== getYear(date2)) { - year = format(date2, ' YYYY.') + year = format(date2, ' yyyy.') } if (getMonth(date1) !== getMonth(date2) || year !== '') { - month = ' ' + this.settings.monthNames[getMonth(date2)] + month = format(date2, ' MMMM', { locale: hu }) } return ( - format(date1, 'YYYY. ') + this.settings.monthNames[getMonth(date1)] + format(date1, ' D -') + year + month + format(date2, ' D') + format(date1, 'yyyy. MMMM dd -', { locale: hu }) + year + month + format(date2, ' dd') ) } else { - return format(date1, 'YYYY. ') + this.settings.monthNames[getMonth(date1)] + format(date1, ' D') + return format(date1, 'yyyy. MMMM dd', { locale: hu }) } } diff --git a/package.json b/package.json index a0649cf8e..719449c45 100644 --- a/package.json +++ b/package.json @@ -33,11 +33,6 @@ }, "private": true, "dependencies": { - "@ngrx/store": "7.4.0", - "@ngrx/effects": "7.4.0", - "@ngrx/entity": "7.4.0", - "@ngrx/router-store": "7.4.0", - "@nrwl/nx": "7.8.1", "@angular-mdc/web": "1.0.3", "@angular/animations": "7.2.14", "@angular/common": "7.2.14", @@ -53,11 +48,16 @@ "@fortawesome/fontawesome-svg-core": "1.2.17", "@fortawesome/free-brands-svg-icons": "5.8.1", "@fortawesome/free-solid-svg-icons": "5.8.1", + "@ngrx/effects": "7.4.0", + "@ngrx/entity": "7.4.0", + "@ngrx/router-store": "7.4.0", + "@ngrx/store": "7.4.0", "@ngx-loading-bar/core": "4.2.0", "@ngx-loading-bar/http-client": "4.2.0", "@ngx-loading-bar/router": "4.2.0", + "@nrwl/nx": "7.8.1", "core-js": "2.6.5", - "date-fns": "1.30.1", + "date-fns": "^2.0.0-alpha.27", "firebase": "5.10.0", "hammerjs": "2.0.8", "jasmine-core": "3.4.0", @@ -68,13 +68,12 @@ "zone.js": "0.8.29" }, "devDependencies": { - "@ngrx/store-devtools": "7.4.0", - "ngrx-store-freeze": "0.2.4", "@angular-devkit/build-angular": "0.13.8", "@angular/cli": "7.3.8", "@angular/compiler-cli": "7.2.14", "@angular/language-service": "7.2.14", "@ngrx/schematics": "7.4.0", + "@ngrx/store-devtools": "7.4.0", "@nrwl/builders": "7.8.1", "@nrwl/schematics": "7.8.1", "@types/jest": "24.0.11", @@ -84,6 +83,7 @@ "dotenv": "7.0.0", "jest": "24.7.1", "jest-preset-angular": "7.1.0", + "ngrx-store-freeze": "0.2.4", "prettier": "1.17.0", "ts-node": "8.0.3", "tslint": "5.14.0", diff --git a/yarn.lock b/yarn.lock index 8616a43e4..7ac54beb9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3145,11 +3145,16 @@ data-urls@^1.0.0, data-urls@^1.1.0: whatwg-mimetype "^2.2.0" whatwg-url "^7.0.0" -date-fns@1.30.1, date-fns@^1.27.2: +date-fns@^1.27.2: version "1.30.1" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c" integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw== +date-fns@^2.0.0-alpha.27: + version "2.0.0-alpha.27" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.27.tgz#5ecd4204ef0e7064264039570f6e8afbc014481c" + integrity sha512-cqfVLS+346P/Mpj2RpDrBv0P4p2zZhWWvfY5fuWrXNR/K38HaAGEkeOwb47hIpQP9Jr/TIxjZ2/sNMQwdXuGMg== + date-now@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b" From d62c23fce325504857294c623f7f28414376ff43 Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Thu, 9 May 2019 21:22:07 +0200 Subject: [PATCH 11/20] feat: change event details popup to dialog --- apps/frontend/src/styles.scss | 2 + libs/calendar/src/lib/+state/popup.actions.ts | 17 +---- libs/calendar/src/lib/+state/popup.reducer.ts | 32 --------- libs/calendar/src/lib/calendar.component.html | 17 +---- ....component.css => calendar.component.scss} | 71 ++---------------- libs/calendar/src/lib/calendar.component.ts | 72 +++++++++---------- libs/calendar/src/lib/calendar.module.ts | 10 ++- .../more-details-dialog.component.css | 21 ++++++ .../more-details-dialog.component.html | 7 ++ .../more-details-dialog.component.spec.ts | 25 +++++++ .../more-details-dialog.component.ts | 40 +++++++++++ .../src/lib/services/popup-handler.service.ts | 52 +------------- package.json | 4 +- yarn.lock | 26 +++++-- 14 files changed, 170 insertions(+), 226 deletions(-) rename libs/calendar/src/lib/{calendar.component.css => calendar.component.scss} (71%) create mode 100644 libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.css create mode 100644 libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html create mode 100644 libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.spec.ts create mode 100644 libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts diff --git a/apps/frontend/src/styles.scss b/apps/frontend/src/styles.scss index 7fc7ddb35..43624ad6d 100644 --- a/apps/frontend/src/styles.scss +++ b/apps/frontend/src/styles.scss @@ -1,3 +1,5 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + * { margin: 0; padding: 0; diff --git a/libs/calendar/src/lib/+state/popup.actions.ts b/libs/calendar/src/lib/+state/popup.actions.ts index 7d0d2e2ea..4504b260e 100644 --- a/libs/calendar/src/lib/+state/popup.actions.ts +++ b/libs/calendar/src/lib/+state/popup.actions.ts @@ -2,21 +2,10 @@ import { Action } from '@ngrx/store' import { PopupSettings } from '../calendar.interfaces'; export enum PopupActionTypes { - HideEventDetailsPopup = '[Popup] Hide Event Details Popup ', - SetEventDetailsPopup = '[Popup] Set Event Details Popup', HideMoreEventsPopup = '[Popup] Hide More Events Popup', SetMoreEventsPopup = '[Popup] Set More Events Popup', } -export class HideEventDetailsPopup implements Action { - readonly type = PopupActionTypes.HideEventDetailsPopup -} - -export class SetEventDetailsPopup implements Action { - readonly type = PopupActionTypes.SetEventDetailsPopup - constructor(public payload: PopupSettings) {} -} - export class HideMoreEventsPopup implements Action { readonly type = PopupActionTypes.HideMoreEventsPopup } @@ -27,14 +16,10 @@ export class SetMoreEventsPopup implements Action { } export const fromPopupActions = { - HideEventDetailsPopup, - SetEventDetailsPopup, HideMoreEventsPopup, SetMoreEventsPopup } export type PopupAction - = HideEventDetailsPopup - | SetEventDetailsPopup - | HideMoreEventsPopup + = HideMoreEventsPopup | SetMoreEventsPopup \ No newline at end of file diff --git a/libs/calendar/src/lib/+state/popup.reducer.ts b/libs/calendar/src/lib/+state/popup.reducer.ts index dcfbb63e0..a3e830436 100644 --- a/libs/calendar/src/lib/+state/popup.reducer.ts +++ b/libs/calendar/src/lib/+state/popup.reducer.ts @@ -4,7 +4,6 @@ import { PopupSettings } from '../calendar.interfaces'; export const POPUP_FEATURE_KEY = 'ui-calendar-popup' export interface PopupState { - eventDetailsPopup: PopupSettings, moreEventsPopup: PopupSettings } @@ -13,15 +12,6 @@ export interface PopupPartialState { } export const initialState: PopupState = { - eventDetailsPopup: { - visible: false, - top: 0, - left: 0, - date: '', - title: '', - description: '', - color: '', - }, moreEventsPopup: { visible: false, top: 0, @@ -33,28 +23,6 @@ export const initialState: PopupState = { export function popupReducer(state: PopupState = initialState, action: PopupAction): PopupState { switch (action.type) { - case PopupActionTypes.HideEventDetailsPopup: { - state = { - ...state, - eventDetailsPopup: { - ...state.eventDetailsPopup, - visible: false - } - } - break - } - - case PopupActionTypes.SetEventDetailsPopup: { - state = { - ...state, - eventDetailsPopup: { - ...state.eventDetailsPopup, - ...action.payload - } - } - break - } - case PopupActionTypes.HideMoreEventsPopup: { state = { ...state, diff --git a/libs/calendar/src/lib/calendar.component.html b/libs/calendar/src/lib/calendar.component.html index b1e814ff9..83af4949a 100644 --- a/libs/calendar/src/lib/calendar.component.html +++ b/libs/calendar/src/lib/calendar.component.html @@ -56,19 +56,4 @@

{{ details.date }}

-
-
-
-
-

{{ details.title }}

- x -
- {{ details.date }} -

{{ details.description }}

-
-
+
\ No newline at end of file diff --git a/libs/calendar/src/lib/calendar.component.css b/libs/calendar/src/lib/calendar.component.scss similarity index 71% rename from libs/calendar/src/lib/calendar.component.css rename to libs/calendar/src/lib/calendar.component.scss index d9f9a8e57..efe42f884 100644 --- a/libs/calendar/src/lib/calendar.component.css +++ b/libs/calendar/src/lib/calendar.component.scss @@ -67,6 +67,11 @@ line-height: 22px; display: block; padding: 0 8px; + transition: background-color 100ms; + background-color: rgba(0,0,0,0); + &:hover { + background-color: rgba(0,0,0,0.1); + } } .middle { @@ -104,7 +109,7 @@ button:focus { color: #757575; cursor: pointer; font-weight: 500; - width: calc(100% - 1px); + width: calc(100% - 4px); background: transparent; z-index: auto; } @@ -184,68 +189,6 @@ button:focus { background: #ededed; } -.eventDetails { - box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2); - background: #fff; - display: inline-block; - pointer-events: all; - max-width: 300px; - width: 100%; - box-sizing: border-box; - z-index: 11; - position: relative; - transition: margin 0.225s; - border-radius: 3px; -} - -.eventDetails .header { - background: #3f51b5; - height: 36px; - padding: 0 12px; - line-height: 36px; - color: #fff; - transition: background-color 0.225s; -} - -.eventDetails h2 { - margin: 0; - font-weight: 400; - font-size: 16px; - text-overflow: ellipsis; - overflow: hidden; - padding-right: 36px; -} - -.eventDetails .close { - position: absolute; - top: 0; - right: 0; - width: 36px; - height: 36px; - text-align: center; - line-height: 32px; - font-size: 20px; - cursor: pointer; - border-radius: 50%; - color: #fff; -} - -.eventDetails .close:hover { - background: rgba(255, 255, 255, 0.122); -} - -.eventDetails .description { - margin: 0; - padding: 12px; -} - -.eventDetails .date { - padding: 12px; - padding-bottom: 0; - display: block; - font-size: 14px; -} - .anotherMonth { color: #70757a -} +} \ No newline at end of file diff --git a/libs/calendar/src/lib/calendar.component.ts b/libs/calendar/src/lib/calendar.component.ts index 3f24161a4..11686eae3 100644 --- a/libs/calendar/src/lib/calendar.component.ts +++ b/libs/calendar/src/lib/calendar.component.ts @@ -1,45 +1,41 @@ - import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core' +import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core' import { DisplayedEvent, Settings, CalendarEvent } from '@verseghy/calendar' import { Cell } from './lib/cell' import { addMonths, differenceInDays, format, subMonths, startOfWeek, addDays } from 'date-fns' import { hu } from 'date-fns/locale' -import { PopupHandlerService } from './services/popup-handler.service'; +import { PopupHandlerService } from './services/popup-handler.service' import { map } from 'rxjs/operators' -import { Store, select } from '@ngrx/store'; -import { POPUP_FEATURE_KEY, PopupState } from './+state/popup.reducer'; -import { fromPopupActions } from './+state/popup.actions'; -import { cellsQuery } from './+state/cells.selectors'; -import { fromCellsActions } from './+state/cells.actions'; +import { Store, select } from '@ngrx/store' +import { POPUP_FEATURE_KEY, PopupState } from './+state/popup.reducer' +import { fromPopupActions } from './+state/popup.actions' +import { cellsQuery } from './+state/cells.selectors' +import { fromCellsActions } from './+state/cells.actions' +import { MatDialog } from '@angular/material/dialog' +import { MoreDetailsDialogComponent } from './more-details-dialog/more-details-dialog.component'; @Component({ selector: 'verseghy-calendar', templateUrl: './calendar.component.html', - styleUrls: ['./calendar.component.css'], + styleUrls: ['./calendar.component.scss'], }) export class CalendarComponent implements OnInit, AfterViewInit { private _date = new Date() private _events: CalendarEvent[] = [] private _settings: Settings + private _isDialogOpen = false + public panelColor = '' public cells = this.store.pipe( select(cellsQuery.selectCells) ) @ViewChild('moreEvents') moreEventsPopupElement: ElementRef - @ViewChild('eventDetails') eventDetailsPopupElement: ElementRef @Output() monthChanged = new EventEmitter<{ year: number month: number }>() - public eventDetailsPopup = this.store.pipe( - select(POPUP_FEATURE_KEY), - map((state: PopupState) => { - return state.eventDetailsPopup - }) - ) - public moreEventsPopup = this.store.pipe( select(POPUP_FEATURE_KEY), map((state: PopupState) => { @@ -47,7 +43,12 @@ export class CalendarComponent implements OnInit, AfterViewInit { }) ) - constructor(private _el: ElementRef, private popupHandler: PopupHandlerService, private store: Store) {} + constructor( + private _el: ElementRef, + private popupHandler: PopupHandlerService, + private store: Store, + private dialog: MatDialog + ) {} ngOnInit() {} @@ -67,7 +68,6 @@ export class CalendarComponent implements OnInit, AfterViewInit { }) this.popupHandler.date = this._date this.closeMoreEventsPopup() - this.closeEventDetailsPopup() } get date() { @@ -186,7 +186,6 @@ export class CalendarComponent implements OnInit, AfterViewInit { @HostListener('window:resize') public resize(): void { this.closeMoreEventsPopup() - this.closeEventDetailsPopup() } private _getEvent(id: number): CalendarEvent { @@ -221,35 +220,30 @@ export class CalendarComponent implements OnInit, AfterViewInit { } public setEventDetailsPopup(id: number, click: Event): void { - setTimeout(() => { - this.popupHandler.setEventDetailsPopup(this._getEvent(id), click.target as HTMLElement) - }); - } + const event = this._getEvent(id) + const dialog = this.dialog.open(MoreDetailsDialogComponent, { + width: '350px', + data: event, + }) + this.panelColor = event.color - public closeEventDetailsPopup(): void { - this.store.dispatch(new fromPopupActions.HideEventDetailsPopup()) + dialog.afterOpened().subscribe(result => { + this._isDialogOpen = true + }) + + dialog.afterClosed().subscribe(result => { + this._isDialogOpen = false + }) } @HostListener('document:click', ['$event']) clickout(event: Event) { - let outsideEvetDetailsPopup = false - if ( - this.eventDetailsPopupElement - && !this.eventDetailsPopupElement.nativeElement.contains(event.target) - ) { - outsideEvetDetailsPopup = true - this.closeEventDetailsPopup() - } if ( this.moreEventsPopupElement && !this.moreEventsPopupElement.nativeElement.contains(event.target) + && !this._isDialogOpen ) { - if (outsideEvetDetailsPopup) { - this.closeMoreEventsPopup() - } - if (!this.eventDetailsPopupElement) { - this.closeMoreEventsPopup() - } + this.closeMoreEventsPopup() } } } diff --git a/libs/calendar/src/lib/calendar.module.ts b/libs/calendar/src/lib/calendar.module.ts index 66ed5325d..d155295f6 100644 --- a/libs/calendar/src/lib/calendar.module.ts +++ b/libs/calendar/src/lib/calendar.module.ts @@ -6,17 +6,23 @@ import { EffectsModule } from '@ngrx/effects' import { POPUP_FEATURE_KEY, initialState as popupInitialState, popupReducer } from './+state/popup.reducer' import { PopupEffects } from './+state/popup.effects' import { CELLS_FEATURE_KEY, initialState as cellsInitialState, cellsReducer } from './+state/cells.reducer' -import { CellsEffects } from './+state/cells.effects' +import { CellsEffects } from './+state/cells.effects'; +import { MoreDetailsDialogComponent } from './more-details-dialog/more-details-dialog.component' +import { MatDialogModule } from '@angular/material/dialog'; +import { MatButtonModule } from '@angular/material/button' @NgModule({ imports: [ CommonModule, + MatDialogModule, + MatButtonModule, StoreModule.forFeature(POPUP_FEATURE_KEY, popupReducer, { initialState: popupInitialState }), EffectsModule.forFeature([PopupEffects]), StoreModule.forFeature(CELLS_FEATURE_KEY, cellsReducer, { initialState: cellsInitialState }), EffectsModule.forFeature([CellsEffects]), ], - declarations: [CalendarComponent], + entryComponents: [MoreDetailsDialogComponent], + declarations: [CalendarComponent, MoreDetailsDialogComponent], exports: [CalendarComponent], }) export class CalendarModule {} diff --git a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.css b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.css new file mode 100644 index 000000000..54caa0f26 --- /dev/null +++ b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.css @@ -0,0 +1,21 @@ +.dialog-title { + font-size: 20px; + font-weight: 400; + margin-bottom: 20px; +} + +.dialog-time { + font-size: 14px; + margin-bottom: 10px; + display: block; +} + +.dialog-description { + border-top: 1px solid #eeeeee; + padding-top: 10px; +} + +.dialog-actions { + margin-top: 20px; + text-align: right; +} \ No newline at end of file diff --git a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html new file mode 100644 index 000000000..7eaaafbca --- /dev/null +++ b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html @@ -0,0 +1,7 @@ +
+

{{ data.title }}

+{{ formatedTime }} +
{{ data.description }}
+
+ +
diff --git a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.spec.ts b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.spec.ts new file mode 100644 index 000000000..ee62f0145 --- /dev/null +++ b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MoreDetailsDialogComponent } from './more-details-dialog.component'; + +describe('MoreDetailsDialogComponent', () => { + let component: MoreDetailsDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MoreDetailsDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MoreDetailsDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts new file mode 100644 index 000000000..120d139fe --- /dev/null +++ b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts @@ -0,0 +1,40 @@ +import { Component, OnInit, Inject } from '@angular/core' +import { CalendarComponent } from '../calendar.component' +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog' +import { CalendarEvent } from '../calendar.interfaces' +import { format, isSameDay, isSameMonth, isSameYear } from 'date-fns' +import { hu } from 'date-fns/locale' + +@Component({ + selector: 'verseghy-more-details-dialog', + templateUrl: './more-details-dialog.component.html', + styleUrls: ['./more-details-dialog.component.css'] +}) +export class MoreDetailsDialogComponent implements OnInit { + + constructor( + private thisDialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: CalendarEvent + ) { } + + ngOnInit() { + } + + closeDialog() { + this.thisDialogRef.close() + } + + get formatedTime(): string { + let second = "" + let startDate = format(this.data.startDate, 'Y. MMMM dd.', { locale: hu }) + if (!isSameYear(this.data.startDate, this.data.endDate)) { + second = `- ${format(this.data.endDate, 'Y. MMMM dd.', { locale: hu })}` + } else if (!isSameMonth(this.data.startDate, this.data.endDate)) { + second = `- ${format(this.data.endDate, 'MMMM dd.', { locale: hu })}` + } else if (!isSameDay(this.data.startDate, this.data.endDate)) { + second = `- ${format(this.data.endDate, 'dd.', { locale: hu })}` + startDate = startDate.slice(0, -1); + } + return `${startDate} ${second}` + } +} diff --git a/libs/calendar/src/lib/services/popup-handler.service.ts b/libs/calendar/src/lib/services/popup-handler.service.ts index 0fcb66106..e9601dddf 100644 --- a/libs/calendar/src/lib/services/popup-handler.service.ts +++ b/libs/calendar/src/lib/services/popup-handler.service.ts @@ -1,7 +1,6 @@ import { Injectable } from '@angular/core'; import { CalendarEvent, PopupSettings, Settings } from '../calendar.interfaces'; -import { getYear, format, getMonth, getDate, getISOWeek, startOfMonth, getDay, isSunday, isSaturday, getDaysInMonth, isSameDay } from 'date-fns'; -import { hu } from 'date-fns/locale' +import { getDate, getISOWeek, startOfMonth, getDay, isSunday, isSaturday, getDaysInMonth } from 'date-fns'; import { Store } from '@ngrx/store'; import { fromPopupActions } from '../+state/popup.actions'; @@ -16,37 +15,6 @@ export class PopupHandlerService { constructor(private store: Store) { } - public setEventDetailsPopup(event: CalendarEvent, clickedElement: HTMLElement) { - const boundingRect = clickedElement.getBoundingClientRect() as DOMRect - const calendarBoundingRect = this.hostElement.getBoundingClientRect() as DOMRect - - let top = 0 - let left = 0 - - top = boundingRect.y - calendarBoundingRect.y - if (document.body.clientWidth - boundingRect.right < 320) { - if (boundingRect.x < 320) { - left = calendarBoundingRect.width / 2 - 150 - } else { - left = boundingRect.x - 310 - calendarBoundingRect.x - } - } else { - left = boundingRect.right + 10 - calendarBoundingRect.x - } - - const popupSettings: PopupSettings = { - visible: true, - title: event.title, - top, - left, - date: this._formatTwoDays(event.startDate, event.endDate), - description: event.description, - color: event.color, - } - - this.store.dispatch(new fromPopupActions.SetEventDetailsPopup(popupSettings)) - } - public setMoreEventsPopup(date: Date, events: CalendarEvent[]) { const height = (this.hostElement.offsetHeight - 68) / this._getRowsInMonth() const row = this._getWeekOfMonth(date) @@ -80,24 +48,6 @@ export class PopupHandlerService { this.store.dispatch(new fromPopupActions.SetMoreEventsPopup(popupSettings)) } - private _formatTwoDays(date1: Date, date2: Date): string { - if (!isSameDay(date1, date2)) { - let year = '' - let month = '' - if (getYear(date1) !== getYear(date2)) { - year = format(date2, ' yyyy.') - } - if (getMonth(date1) !== getMonth(date2) || year !== '') { - month = format(date2, ' MMMM', { locale: hu }) - } - return ( - format(date1, 'yyyy. MMMM dd -', { locale: hu }) + year + month + format(date2, ' dd') - ) - } else { - return format(date1, 'yyyy. MMMM dd', { locale: hu }) - } - } - private _getWeekOfMonth(date: Date): number { return getISOWeek(date) - getISOWeek(startOfMonth(this.date)) } diff --git a/package.json b/package.json index 719449c45..d83c23c30 100644 --- a/package.json +++ b/package.json @@ -34,12 +34,14 @@ "private": true, "dependencies": { "@angular-mdc/web": "1.0.3", - "@angular/animations": "7.2.14", + "@angular/animations": "^7.2.15", + "@angular/cdk": "^7.3.7", "@angular/common": "7.2.14", "@angular/compiler": "7.2.14", "@angular/core": "7.2.14", "@angular/fire": "5.1.2", "@angular/forms": "7.2.14", + "@angular/material": "^7.3.7", "@angular/platform-browser": "7.2.14", "@angular/platform-browser-dynamic": "7.2.14", "@angular/router": "7.2.14", diff --git a/yarn.lock b/yarn.lock index 7ac54beb9..44b38b889 100644 --- a/yarn.lock +++ b/yarn.lock @@ -140,13 +140,22 @@ "@angular-mdc/theme" "1.0.0" material-components-web "^1.1.1" -"@angular/animations@7.2.14": - version "7.2.14" - resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-7.2.14.tgz#06ec2feac31e58f53429e673bc4c7f780a9d0710" - integrity sha512-K+wdq7TslmvDhrbwy65x7owE8wezI0fDdO+8SO9RU4m/w6R6vo4QS3uSdc5I2pxwm4QSXSc5eKhoWJkq0muTbQ== +"@angular/animations@^7.2.15": + version "7.2.15" + resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-7.2.15.tgz#980c1f523a79d4b7cb44508f57fba06f2e0872fa" + integrity sha512-8oBt3HLgd2+kyJHUgsd7OzKCCss67t2sch15XNoIWlOLfxclqU+EfFE6t/vCzpT8/+lpZS6LU9ZrTnb+UBj5jg== dependencies: tslib "^1.9.0" +"@angular/cdk@^7.3.7": + version "7.3.7" + resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-7.3.7.tgz#ce1ad53ba04beb9c8e950acc5691ea0143753764" + integrity sha512-xbXxhHHKGkVuW6K7pzPmvpJXIwpl0ykBnvA2g+/7Sgy5Pd35wCC+UtHD9RYczDM/mkygNxMQtagyCErwFnDtQA== + dependencies: + tslib "^1.7.1" + optionalDependencies: + parse5 "^5.0.0" + "@angular/cli@7.3.1": version "7.3.1" resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-7.3.1.tgz#a18acdec84deb03a1fae79cae415bbc8f9c87ffa" @@ -271,6 +280,13 @@ resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-7.2.14.tgz#f0c90e030fbb3777293a2946c2cb4b79c152856f" integrity sha512-YTU4ePAKikbIxNae9Qta8qaDArPgek7nhLEW9QfvrUAnpF7BkVboEI+7yLX5+NTfGf9cQ9cUfQ0TEreV+tMs7A== +"@angular/material@^7.3.7": + version "7.3.7" + resolved "https://registry.yarnpkg.com/@angular/material/-/material-7.3.7.tgz#dcd95e6618ba6254c5880efee1aad349cf5b9140" + integrity sha512-Eq+7frkeNGkLOfEtmkmJgR+AgoWajOipXZWWfCSamNfpCcPof82DwvGOpAmgGni9FuN2XFQdqP5MoaffQzIvUA== + dependencies: + tslib "^1.7.1" + "@angular/platform-browser-dynamic@7.2.14": version "7.2.14" resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-7.2.14.tgz#ae055ab0d3246c0f2d27d40a46cd99c012aa199d" @@ -7141,7 +7157,7 @@ parse5@4.0.0: resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608" integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA== -parse5@5.1.0: +parse5@5.1.0, parse5@^5.0.0: version "5.1.0" resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2" integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ== From d975b0d56b6a038c35e06ed54eb5cc404ec68d71 Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Fri, 10 May 2019 11:17:20 +0200 Subject: [PATCH 12/20] fix: canteen --- .../src/app/modules/canteen/reducer/canteen/canteen.reducer.ts | 2 +- libs/calendar/src/lib/calendar.component.scss | 2 +- .../lib/more-details-dialog/more-details-dialog.component.html | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/frontend/src/app/modules/canteen/reducer/canteen/canteen.reducer.ts b/apps/frontend/src/app/modules/canteen/reducer/canteen/canteen.reducer.ts index 85e4c0e48..5e8656e13 100644 --- a/apps/frontend/src/app/modules/canteen/reducer/canteen/canteen.reducer.ts +++ b/apps/frontend/src/app/modules/canteen/reducer/canteen/canteen.reducer.ts @@ -48,7 +48,7 @@ export function canteenReducer(state: CanteenState = initialState, action: Cante const processedCanteens: WeekCanteen[] = [{}, {}] for (const week of [0, 1]) { for (const day of action.payload[week]) { - const dayOfWeek = getISODay(day.date) + const dayOfWeek = getISODay(new Date(day.date)) processedCanteens[week][dayOfWeek] = day } } diff --git a/libs/calendar/src/lib/calendar.component.scss b/libs/calendar/src/lib/calendar.component.scss index efe42f884..b841c7c0f 100644 --- a/libs/calendar/src/lib/calendar.component.scss +++ b/libs/calendar/src/lib/calendar.component.scss @@ -101,7 +101,7 @@ button:focus { .now { position: absolute; - right: 10px; + right: 0; top: 0; } diff --git a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html index 7eaaafbca..13827e935 100644 --- a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html +++ b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html @@ -3,5 +3,5 @@

{{ data.title }}

{{ formatedTime }}
{{ data.description }}
- +
From 1546207930d19b3486b0a49157de10a7ffca0321 Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Fri, 10 May 2019 13:56:12 +0200 Subject: [PATCH 13/20] feat: changeMonth moved to the store --- .../components/events/events.component.ts | 16 -- libs/calendar/src/lib/+state/cells.actions.ts | 50 ++++- libs/calendar/src/lib/+state/cells.reducer.ts | 46 ++++- .../src/lib/+state/cells.selectors.ts | 54 +++++- libs/calendar/src/lib/calendar.component.html | 4 +- libs/calendar/src/lib/calendar.component.scss | 1 + libs/calendar/src/lib/calendar.component.ts | 174 +++++------------- libs/calendar/src/lib/calendar.interfaces.ts | 31 ++-- libs/calendar/src/lib/lib/cell.ts | 5 +- .../more-details-dialog.component.html | 6 +- .../more-details-dialog.component.ts | 49 +++-- .../src/lib/services/popup-handler.service.ts | 26 +-- 12 files changed, 250 insertions(+), 212 deletions(-) diff --git a/apps/frontend/src/app/modules/events/components/events/events.component.ts b/apps/frontend/src/app/modules/events/components/events/events.component.ts index a78d9e9ec..b33083108 100644 --- a/apps/frontend/src/app/modules/events/components/events/events.component.ts +++ b/apps/frontend/src/app/modules/events/components/events/events.component.ts @@ -13,22 +13,6 @@ import { Observable } from 'rxjs' }) export class EventsComponent implements OnInit { calendarSettings: Settings = { - shortDayNames: ['Hé', 'Ke', 'Sze', 'Csüt', 'Pé', 'Szo', 'Vas'], - shortMonthNames: ['Jan', 'Febr', 'Márc', 'Ápr', 'Máj', 'Jún', 'Júl', 'Aug', 'Szept', 'Okt', 'Nov', 'Dec'], - monthNames: [ - 'Január', - 'Február', - 'Március', - 'Április', - 'Május', - 'Június', - 'Július', - 'Augusztus', - 'Szeptember', - 'Október', - 'November', - 'December', - ], today: 'Ma', moreEvent: 'Több esemény', } diff --git a/libs/calendar/src/lib/+state/cells.actions.ts b/libs/calendar/src/lib/+state/cells.actions.ts index c659d6090..38cfe49cb 100644 --- a/libs/calendar/src/lib/+state/cells.actions.ts +++ b/libs/calendar/src/lib/+state/cells.actions.ts @@ -4,7 +4,12 @@ import { CalendarEvent } from '../calendar.interfaces'; export enum CellsActionTypes { SetEvents = '[Cells] Set Events', SetMonth = '[Cells] Set Month', - SetHostHeight = '[Cells] Set Host Height' + SetHostHeight = '[Cells] Set Host Height', + SetSelectedEvent = '[Cells] Set Selected Event', + SetSelectedMoreEvent = '[Cells] Set Selected More Events', + NextMonth = '[Cells] Next Month', + PreviousMonth = '[Cells] Previous Month', + Today = '[Cells] Today', } export class SetEvents implements Action { @@ -22,6 +27,45 @@ export class SetHostHeight implements Action { constructor(public payload: number) {} } -export type CellsAction = SetEvents | SetMonth | SetHostHeight +export class SetSelectedEvent implements Action { + readonly type = CellsActionTypes.SetSelectedEvent + constructor(public payload: number) {} +} + +export class SetSelectedMoreEvent implements Action { + readonly type = CellsActionTypes.SetSelectedMoreEvent + constructor(public payload: Date) {} +} + +export class NextMonth implements Action { + readonly type = CellsActionTypes.NextMonth +} -export const fromCellsActions = { SetEvents, SetMonth, SetHostHeight } +export class PreviousMonth implements Action { + readonly type = CellsActionTypes.PreviousMonth +} + +export class Today implements Action { + readonly type = CellsActionTypes.Today +} + +export type CellsAction + = SetEvents + | SetMonth + | SetHostHeight + | SetSelectedEvent + | SetSelectedMoreEvent + | NextMonth + | PreviousMonth + | Today + +export const fromCellsActions = { + SetEvents, + SetMonth, + SetHostHeight, + SetSelectedEvent, + SetSelectedMoreEvent, + NextMonth, + PreviousMonth, + Today, +} diff --git a/libs/calendar/src/lib/+state/cells.reducer.ts b/libs/calendar/src/lib/+state/cells.reducer.ts index a6baca95d..b5a054b1b 100644 --- a/libs/calendar/src/lib/+state/cells.reducer.ts +++ b/libs/calendar/src/lib/+state/cells.reducer.ts @@ -1,12 +1,15 @@ import { CellsAction, CellsActionTypes } from './cells.actions' import { CalendarEvent } from '../calendar.interfaces'; +import { addMonths, subMonths } from 'date-fns'; export const CELLS_FEATURE_KEY = 'ui-calendar-cells' export interface CellsState { - events: CalendarEvent[], - month: Date, + events: CalendarEvent[] + month: Date height: number + selectedEvent: number + selectedMoreEvents: Date } export interface CellsPartialState { @@ -16,7 +19,9 @@ export interface CellsPartialState { export const initialState: CellsState = { events: [], month: new Date(), - height: 0 + height: 0, + selectedEvent: -1, + selectedMoreEvents: new Date() } export function cellsReducer(state: CellsState = initialState, action: CellsAction): CellsState { @@ -41,6 +46,41 @@ export function cellsReducer(state: CellsState = initialState, action: CellsActi height: action.payload } break + + case CellsActionTypes.SetSelectedEvent: + state = { + ...state, + selectedEvent: action.payload + } + break + + case CellsActionTypes.SetSelectedMoreEvent: + state = { + ...state, + selectedMoreEvents: action.payload + } + break + + case CellsActionTypes.NextMonth: + state = { + ...state, + month: addMonths(state.month, 1) + } + break + + case CellsActionTypes.PreviousMonth: + state = { + ...state, + month: subMonths(state.month, 1) + } + break + + case CellsActionTypes.Today: + state = { + ...state, + month: new Date() + } + break } return state } diff --git a/libs/calendar/src/lib/+state/cells.selectors.ts b/libs/calendar/src/lib/+state/cells.selectors.ts index 352fb0979..fb78c75e3 100644 --- a/libs/calendar/src/lib/+state/cells.selectors.ts +++ b/libs/calendar/src/lib/+state/cells.selectors.ts @@ -3,10 +3,10 @@ import { createSelector } from '@ngrx/store'; import { CalendarEvent, DisplayedEvent } from '../calendar.interfaces'; import { Cell } from '../lib/cell'; import { getMonth, getYear, isSunday, startOfMonth, isSaturday, getDaysInMonth, startOfWeek, addDays, differenceInDays, lastDayOfWeek, isSameDay, isSameMonth, isSameYear, getOverlappingDaysInIntervals, parseISO, areIntervalsOverlapping, format } from 'date-fns'; -import { endOfWeek, endOfMonth, eachDayOfInterval } from 'date-fns/esm'; +import { endOfWeek, endOfMonth, eachDayOfInterval, startOfDay, endOfDay } from 'date-fns/esm'; -export const selectFeature = (state: any) => { +const selectFeature = (state: any) => { return state[CELLS_FEATURE_KEY] } @@ -15,11 +15,21 @@ const selectEvents = createSelector( (state: CellsState) => state.events ) -export const selectMonth = createSelector( +const selectMonth = createSelector( selectFeature, (state: CellsState) => state.month ) +const selectSelectedEvent = createSelector( + selectFeature, + (state: CellsState) => state.selectedEvent +) + +const selectSelectedMoreEvent = createSelector( + selectFeature, + (state: CellsState) => state.selectedMoreEvents +) + const selectHeight = createSelector( selectFeature, (state: CellsState) => state.height @@ -148,7 +158,7 @@ const selectClearedCells = createSelector( } ) -export const selectCells = createSelector( +const selectCells = createSelector( selectClearedCells, selectDisplayEvents, selectFirstCellDate, @@ -166,7 +176,41 @@ export const selectCells = createSelector( } ) +const selectedEvent = createSelector( + selectSelectedEvent, + selectEvents, + (eventId: number, events: CalendarEvent[]): CalendarEvent => { + for (const event of events) { + if (event.id === eventId) { + return event + } + } + return null + } +) + +const selectedMoreEvents = createSelector( + selectSelectedMoreEvent, + selectEvents, + (day: Date, events: CalendarEvent[]): CalendarEvent[] => { + let eventsInDay = [] + for (const event of events) { + if ( + areIntervalsOverlapping( + { start: event.startDate, end: event.endDate }, + { start: startOfDay(day), end: endOfDay(day) } + ) + ){ + eventsInDay = [...eventsInDay, event] + } + } + return eventsInDay + } +) + export const cellsQuery = { + selectCells, + selectedEvent, + selectedMoreEvents, selectMonth, - selectCells } diff --git a/libs/calendar/src/lib/calendar.component.html b/libs/calendar/src/lib/calendar.component.html index 83af4949a..b5066d426 100644 --- a/libs/calendar/src/lib/calendar.component.html +++ b/libs/calendar/src/lib/calendar.component.html @@ -1,6 +1,6 @@
- {{ formatedDate }} + {{ formatedDate | async }}
@@ -48,7 +48,7 @@

{{ details.date }}

diff --git a/libs/calendar/src/lib/calendar.component.scss b/libs/calendar/src/lib/calendar.component.scss index b841c7c0f..4c5321283 100644 --- a/libs/calendar/src/lib/calendar.component.scss +++ b/libs/calendar/src/lib/calendar.component.scss @@ -28,6 +28,7 @@ .cellElement > span { margin: 0 8px; + text-transform: capitalize; } .header { diff --git a/libs/calendar/src/lib/calendar.component.ts b/libs/calendar/src/lib/calendar.component.ts index 11686eae3..70ba5c184 100644 --- a/libs/calendar/src/lib/calendar.component.ts +++ b/libs/calendar/src/lib/calendar.component.ts @@ -1,7 +1,7 @@ import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core' -import { DisplayedEvent, Settings, CalendarEvent } from '@verseghy/calendar' +import { Settings, CalendarEvent } from '@verseghy/calendar' import { Cell } from './lib/cell' -import { addMonths, differenceInDays, format, subMonths, startOfWeek, addDays } from 'date-fns' +import { format, startOfWeek, addDays } from 'date-fns' import { hu } from 'date-fns/locale' import { PopupHandlerService } from './services/popup-handler.service' import { map } from 'rxjs/operators' @@ -19,15 +19,35 @@ import { MoreDetailsDialogComponent } from './more-details-dialog/more-details-d styleUrls: ['./calendar.component.scss'], }) export class CalendarComponent implements OnInit, AfterViewInit { - private _date = new Date() - private _events: CalendarEvent[] = [] private _settings: Settings private _isDialogOpen = false + private _eventsIds = [] - public panelColor = '' + public today = this.settings.today public cells = this.store.pipe( select(cellsQuery.selectCells) ) + public formatedDate = this.store.pipe( + select(cellsQuery.selectMonth), + map((date: Date) => { + this.closeMoreEventsPopup() + this.monthChanged.emit({ + year: date.getFullYear(), + month: date.getMonth(), + }) + return format(date, 'yyyy. LLLL', { locale: hu }) + }) + ) + public moreEventsPopup = this.store.pipe( + select(POPUP_FEATURE_KEY), + map((state: PopupState) => { + return state.moreEventsPopup + }) + ) + public moreEventsPopupEvents = this.store.pipe( + select(cellsQuery.selectedMoreEvents), + map(events => events) + ) @ViewChild('moreEvents') moreEventsPopupElement: ElementRef @@ -36,13 +56,6 @@ export class CalendarComponent implements OnInit, AfterViewInit { month: number }>() - public moreEventsPopup = this.store.pipe( - select(POPUP_FEATURE_KEY), - map((state: PopupState) => { - return state.moreEventsPopup - }) - ) - constructor( private _el: ElementRef, private popupHandler: PopupHandlerService, @@ -54,123 +67,35 @@ export class CalendarComponent implements OnInit, AfterViewInit { ngAfterViewInit() { setTimeout(() => { - this._changeMonth() this.popupHandler.hostElement = this._el.nativeElement this.store.dispatch(new fromCellsActions.SetHostHeight(this._el.nativeElement.offsetHeight)) }) } - private _changeMonth(): void { - this.store.dispatch(new fromCellsActions.SetMonth(this._date)) - this.monthChanged.emit({ - year: this.date.getFullYear(), - month: this.date.getMonth(), - }) - this.popupHandler.date = this._date - this.closeMoreEventsPopup() - } - - get date() { - return this._date - } - - get formatedDate() { - return format(this.date, 'yyyy. LLLL', {locale: hu}) - } - get shortDayNames() { const firstDate = startOfWeek(new Date, {weekStartsOn: 1}) let dayNames = [] for (let i = 0; i < 7; i++) { - const dayName = format(addDays(firstDate, i), 'EEEEEE', {locale: hu}) + const dayName = format(addDays(firstDate, i), 'EEEEEE', { locale: hu }) dayNames = [...dayNames, dayName] } return dayNames } - get today() { - return this.settings.today - } - - set date(date: Date) { - this._date = date - this._changeMonth() - } - public nextMonth(): void { - this.date = addMonths(this.date, 1) + this.store.dispatch(new fromCellsActions.NextMonth()) } public prevMonth(): void { - this.date = subMonths(this.date, 1) + this.store.dispatch(new fromCellsActions.PreviousMonth()) } public now(): void { - this.date = new Date() - } - - private _isArrayContainsId(array: CalendarEvent[], id: Number): boolean { - for (const item of array) { - if (item.id === id) { - return true - } - } - return false - } - - @Input('events') public set events(events: CalendarEvent[]) { - if (!events) return - if (events.length) { - let tempEvents = [] - for (const event of events) { - if (!!tempEvents.length) { - if (!this._isArrayContainsId(tempEvents, event.id)) { - tempEvents = [...tempEvents, event] - } - } else { - tempEvents = [...tempEvents, event] - } - } - this.store.dispatch(new fromCellsActions.SetEvents(tempEvents)) - this._events = tempEvents - } - } - - private _eventLenght(item: DisplayedEvent): number { - return Math.abs(differenceInDays(item.startDate, item.endDate)) + this.store.dispatch(new fromCellsActions.Today()) } get settings(): Settings { this._settings = this._settings || {} - this._settings.shortDayNames = this._settings.shortDayNames || ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] - this._settings.shortMonthNames = this._settings.shortMonthNames || [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', - ] - this._settings.monthNames = this._settings.monthNames || [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'September', - 'October', - 'November', - 'December', - ] this._settings.today = this._settings.today || 'Today' this._settings.moreEvent = this._settings.moreEvent || '{count} more' return this._settings @@ -183,18 +108,16 @@ export class CalendarComponent implements OnInit, AfterViewInit { Cell.settings = settings } - @HostListener('window:resize') - public resize(): void { - this.closeMoreEventsPopup() - } - - private _getEvent(id: number): CalendarEvent { - for (const item of this._events) { - if (item.id === id) { - return item - } + @Input('events') public set events(events: CalendarEvent[]) { + if (!events) return + if (events.length) { + const tempEvents = events.filter(item => { + if (this._eventsIds.includes(item.id)) return false + this._eventsIds = [...this._eventsIds, item.id] + return true + }) + this.store.dispatch(new fromCellsActions.SetEvents(tempEvents)) } - return } public trackByFn(index, item) { @@ -205,13 +128,10 @@ export class CalendarComponent implements OnInit, AfterViewInit { return item.date } - public setMoreEventsPopup(date: Date, events: {id: number, order:number}[]): void { + public setMoreEventsPopup(date: Date): void { + this.store.dispatch(new fromCellsActions.SetSelectedMoreEvent(date)) setTimeout(() => { - let eventsArray = [] - for (const item of events) { - eventsArray = [...eventsArray, this._getEvent(item.id)] - } - this.popupHandler.setMoreEventsPopup(date, eventsArray) + this.popupHandler.setMoreEventsPopup(date) }) } @@ -220,12 +140,10 @@ export class CalendarComponent implements OnInit, AfterViewInit { } public setEventDetailsPopup(id: number, click: Event): void { - const event = this._getEvent(id) + this.store.dispatch(new fromCellsActions.SetSelectedEvent(id)) const dialog = this.dialog.open(MoreDetailsDialogComponent, { - width: '350px', - data: event, + width: '350px' }) - this.panelColor = event.color dialog.afterOpened().subscribe(result => { this._isDialogOpen = true @@ -246,4 +164,10 @@ export class CalendarComponent implements OnInit, AfterViewInit { this.closeMoreEventsPopup() } } + + @HostListener('window:resize') + resize(): void { + this.store.dispatch(new fromCellsActions.SetHostHeight(this._el.nativeElement.offsetHeight)) + this.closeMoreEventsPopup() + } } diff --git a/libs/calendar/src/lib/calendar.interfaces.ts b/libs/calendar/src/lib/calendar.interfaces.ts index 5c3416c99..dff1f0cca 100644 --- a/libs/calendar/src/lib/calendar.interfaces.ts +++ b/libs/calendar/src/lib/calendar.interfaces.ts @@ -8,34 +8,31 @@ export interface DisplayedEvent { } export interface Settings { - shortDayNames?: string[] - shortMonthNames?: string[] - monthNames?: string[] today?: string moreEvent?: string } export interface CalendarEvent { - id: number, - title: string, - description: string, - startDate: Date, - endDate: Date, + id: number + title: string + description: string + startDate: Date + endDate: Date color: string } export interface PopupSettings { - visible: boolean, - top: number, - left: number, - date: string, - title?: string, - description?: string, - color?: string, - day?: string, + visible: boolean + top: number + left: number + date: string + title?: string + description?: string + color?: string + day?: string events?: { id: number - title: string, + title: string color: string }[] } \ No newline at end of file diff --git a/libs/calendar/src/lib/lib/cell.ts b/libs/calendar/src/lib/lib/cell.ts index 8708ee57b..4cb113218 100644 --- a/libs/calendar/src/lib/lib/cell.ts +++ b/libs/calendar/src/lib/lib/cell.ts @@ -1,4 +1,5 @@ -import { format, getDate, getMonth } from 'date-fns' +import { format, getDate } from 'date-fns' +import { hu } from 'date-fns/locale' import { Settings } from '../calendar.interfaces' export class Cell { @@ -52,7 +53,7 @@ export class Cell { get day(): string { if (getDate(this._date) === 1) { - return Cell.settings.shortMonthNames[getMonth(this._date)] + format(this._date, '. d') + return format(this._date, 'LLL d', { locale: hu }) } return format(this._date, 'd') } diff --git a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html index 13827e935..e8aa01718 100644 --- a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html +++ b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html @@ -1,7 +1,7 @@
-

{{ data.title }}

-{{ formatedTime }} -
{{ data.description }}
+

{{ (data | async).title }}

+{{ (formatedTime | async) }} +
{{ (data | async).description }}
diff --git a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts index 120d139fe..7dec3b7fa 100644 --- a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts +++ b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts @@ -1,9 +1,13 @@ -import { Component, OnInit, Inject } from '@angular/core' +import { Component, OnInit } from '@angular/core' import { CalendarComponent } from '../calendar.component' -import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog' -import { CalendarEvent } from '../calendar.interfaces' +import { MatDialogRef } from '@angular/material/dialog' import { format, isSameDay, isSameMonth, isSameYear } from 'date-fns' import { hu } from 'date-fns/locale' +import { CalendarEvent } from '../calendar.interfaces'; +import { Store, select } from '@ngrx/store'; +import { CELLS_FEATURE_KEY } from '../+state/cells.reducer'; +import { map, filter } from 'rxjs/operators'; +import { cellsQuery } from '../+state/cells.selectors'; @Component({ selector: 'verseghy-more-details-dialog', @@ -12,9 +16,32 @@ import { hu } from 'date-fns/locale' }) export class MoreDetailsDialogComponent implements OnInit { + public data = this.store.pipe( + select(cellsQuery.selectedEvent), + filter(event => !!event) + ) + + public formatedTime = this.store.pipe( + select(cellsQuery.selectedEvent), + filter(event => !!event), + map((event: CalendarEvent) => { + let second = "" + let startDate = format(event.startDate, 'Y. MMMM dd.', { locale: hu }) + if (!isSameYear(event.startDate, event.endDate)) { + second = `- ${format(event.endDate, 'Y. MMMM dd.', { locale: hu })}` + } else if (!isSameMonth(event.startDate, event.endDate)) { + second = `- ${format(event.endDate, 'MMMM dd.', { locale: hu })}` + } else if (!isSameDay(event.startDate, event.endDate)) { + second = `- ${format(event.endDate, 'dd.', { locale: hu })}` + startDate = startDate.slice(0, -1); + } + return `${startDate} ${second}` + }) + ) + constructor( private thisDialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: CalendarEvent + private store: Store ) { } ngOnInit() { @@ -23,18 +50,4 @@ export class MoreDetailsDialogComponent implements OnInit { closeDialog() { this.thisDialogRef.close() } - - get formatedTime(): string { - let second = "" - let startDate = format(this.data.startDate, 'Y. MMMM dd.', { locale: hu }) - if (!isSameYear(this.data.startDate, this.data.endDate)) { - second = `- ${format(this.data.endDate, 'Y. MMMM dd.', { locale: hu })}` - } else if (!isSameMonth(this.data.startDate, this.data.endDate)) { - second = `- ${format(this.data.endDate, 'MMMM dd.', { locale: hu })}` - } else if (!isSameDay(this.data.startDate, this.data.endDate)) { - second = `- ${format(this.data.endDate, 'dd.', { locale: hu })}` - startDate = startDate.slice(0, -1); - } - return `${startDate} ${second}` - } } diff --git a/libs/calendar/src/lib/services/popup-handler.service.ts b/libs/calendar/src/lib/services/popup-handler.service.ts index e9601dddf..72ce99139 100644 --- a/libs/calendar/src/lib/services/popup-handler.service.ts +++ b/libs/calendar/src/lib/services/popup-handler.service.ts @@ -1,8 +1,9 @@ -import { Injectable } from '@angular/core'; -import { CalendarEvent, PopupSettings, Settings } from '../calendar.interfaces'; -import { getDate, getISOWeek, startOfMonth, getDay, isSunday, isSaturday, getDaysInMonth } from 'date-fns'; -import { Store } from '@ngrx/store'; -import { fromPopupActions } from '../+state/popup.actions'; +import { Injectable } from '@angular/core' +import { PopupSettings, Settings } from '../calendar.interfaces' +import { getDate, getISOWeek, startOfMonth, getDay, isSunday, isSaturday, getDaysInMonth, format } from 'date-fns' +import { Store } from '@ngrx/store' +import { fromPopupActions } from '../+state/popup.actions' +import { hu } from 'date-fns/locale' @Injectable({ providedIn: 'root' @@ -15,7 +16,7 @@ export class PopupHandlerService { constructor(private store: Store) { } - public setMoreEventsPopup(date: Date, events: CalendarEvent[]) { + public setMoreEventsPopup(date: Date) { const height = (this.hostElement.offsetHeight - 68) / this._getRowsInMonth() const row = this._getWeekOfMonth(date) let column = getDay(date) @@ -26,23 +27,12 @@ export class PopupHandlerService { const top = row * height - 50 + 69 const left = (column - 1) * (this.hostElement.offsetWidth / 7) - 24 - let eventsArray = [] - - for (const item of events) { - eventsArray = [...eventsArray,{ - id: item.id, - title: item.title, - color: item.color - }] - } - const popupSettings: PopupSettings = { visible: true, top, left, date: String(getDate(date)), - day: this.settings.shortDayNames[column - 1], - events: eventsArray + day: format(date, 'EEEEEE', { locale: hu }), } this.store.dispatch(new fromPopupActions.SetMoreEventsPopup(popupSettings)) From b8b3c4cf11cb1a7b0ad6004777d970ea3ed07a7b Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Fri, 10 May 2019 14:03:57 +0200 Subject: [PATCH 14/20] style: format --- .../components/events/events.component.ts | 12 +++- apps/frontend/src/styles.scss | 2 +- libs/calendar/src/lib/+state/cells.actions.ts | 12 +--- libs/calendar/src/lib/+state/cells.reducer.ts | 24 +++---- .../src/lib/+state/cells.selectors.ts | 65 +++++++++---------- libs/calendar/src/lib/+state/popup.actions.ts | 8 +-- libs/calendar/src/lib/+state/popup.reducer.ts | 14 ++-- libs/calendar/src/lib/calendar.component.html | 11 +++- libs/calendar/src/lib/calendar.component.scss | 8 +-- libs/calendar/src/lib/calendar.component.ts | 23 ++----- libs/calendar/src/lib/calendar.interfaces.ts | 2 +- libs/calendar/src/lib/calendar.module.ts | 4 +- libs/calendar/src/lib/calendar.service.ts | 6 +- libs/calendar/src/lib/lib/cell.ts | 6 +- .../more-details-dialog.component.css | 2 +- .../more-details-dialog.component.html | 2 +- .../more-details-dialog.component.spec.ts | 29 ++++----- .../more-details-dialog.component.ts | 25 +++---- .../services/popup-handler.service.spec.ts | 14 ++-- .../src/lib/services/popup-handler.service.ts | 5 +- 20 files changed, 128 insertions(+), 146 deletions(-) diff --git a/apps/frontend/src/app/modules/events/components/events/events.component.ts b/apps/frontend/src/app/modules/events/components/events/events.component.ts index b33083108..5fa42a612 100644 --- a/apps/frontend/src/app/modules/events/components/events/events.component.ts +++ b/apps/frontend/src/app/modules/events/components/events/events.component.ts @@ -26,7 +26,17 @@ export class EventsComponent implements OnInit { map((data: EventsState) => { let calendarEvents: CalendarEvent[] = [] for (const item of data.list) { - calendarEvents = [...calendarEvents, {id: item.id, title: item.title, description: item.description, startDate: new Date(item.date_from), endDate: new Date(item.date_to), color: item.color}] + calendarEvents = [ + ...calendarEvents, + { + id: item.id, + title: item.title, + description: item.description, + startDate: new Date(item.date_from), + endDate: new Date(item.date_to), + color: item.color, + }, + ] } return calendarEvents }) diff --git a/apps/frontend/src/styles.scss b/apps/frontend/src/styles.scss index 43624ad6d..38dd826f1 100644 --- a/apps/frontend/src/styles.scss +++ b/apps/frontend/src/styles.scss @@ -1,4 +1,4 @@ -@import "~@angular/material/prebuilt-themes/indigo-pink.css"; +@import '~@angular/material/prebuilt-themes/indigo-pink.css'; * { margin: 0; diff --git a/libs/calendar/src/lib/+state/cells.actions.ts b/libs/calendar/src/lib/+state/cells.actions.ts index 38cfe49cb..13ea8c645 100644 --- a/libs/calendar/src/lib/+state/cells.actions.ts +++ b/libs/calendar/src/lib/+state/cells.actions.ts @@ -1,5 +1,5 @@ import { Action } from '@ngrx/store' -import { CalendarEvent } from '../calendar.interfaces'; +import { CalendarEvent } from '../calendar.interfaces' export enum CellsActionTypes { SetEvents = '[Cells] Set Events', @@ -49,15 +49,7 @@ export class Today implements Action { readonly type = CellsActionTypes.Today } -export type CellsAction - = SetEvents - | SetMonth - | SetHostHeight - | SetSelectedEvent - | SetSelectedMoreEvent - | NextMonth - | PreviousMonth - | Today +export type CellsAction = SetEvents | SetMonth | SetHostHeight | SetSelectedEvent | SetSelectedMoreEvent | NextMonth | PreviousMonth | Today export const fromCellsActions = { SetEvents, diff --git a/libs/calendar/src/lib/+state/cells.reducer.ts b/libs/calendar/src/lib/+state/cells.reducer.ts index b5a054b1b..8fe0a2b1a 100644 --- a/libs/calendar/src/lib/+state/cells.reducer.ts +++ b/libs/calendar/src/lib/+state/cells.reducer.ts @@ -1,6 +1,6 @@ import { CellsAction, CellsActionTypes } from './cells.actions' -import { CalendarEvent } from '../calendar.interfaces'; -import { addMonths, subMonths } from 'date-fns'; +import { CalendarEvent } from '../calendar.interfaces' +import { addMonths, subMonths } from 'date-fns' export const CELLS_FEATURE_KEY = 'ui-calendar-cells' @@ -21,7 +21,7 @@ export const initialState: CellsState = { month: new Date(), height: 0, selectedEvent: -1, - selectedMoreEvents: new Date() + selectedMoreEvents: new Date(), } export function cellsReducer(state: CellsState = initialState, action: CellsAction): CellsState { @@ -29,56 +29,56 @@ export function cellsReducer(state: CellsState = initialState, action: CellsActi case CellsActionTypes.SetEvents: state = { ...state, - events: action.payload + events: action.payload, } break - + case CellsActionTypes.SetMonth: state = { ...state, - month: action.payload + month: action.payload, } break case CellsActionTypes.SetHostHeight: state = { ...state, - height: action.payload + height: action.payload, } break case CellsActionTypes.SetSelectedEvent: state = { ...state, - selectedEvent: action.payload + selectedEvent: action.payload, } break case CellsActionTypes.SetSelectedMoreEvent: state = { ...state, - selectedMoreEvents: action.payload + selectedMoreEvents: action.payload, } break case CellsActionTypes.NextMonth: state = { ...state, - month: addMonths(state.month, 1) + month: addMonths(state.month, 1), } break case CellsActionTypes.PreviousMonth: state = { ...state, - month: subMonths(state.month, 1) + month: subMonths(state.month, 1), } break case CellsActionTypes.Today: state = { ...state, - month: new Date() + month: new Date(), } break } diff --git a/libs/calendar/src/lib/+state/cells.selectors.ts b/libs/calendar/src/lib/+state/cells.selectors.ts index fb78c75e3..9a5dfc129 100644 --- a/libs/calendar/src/lib/+state/cells.selectors.ts +++ b/libs/calendar/src/lib/+state/cells.selectors.ts @@ -1,10 +1,27 @@ -import { CellsState, CELLS_FEATURE_KEY } from './cells.reducer'; -import { createSelector } from '@ngrx/store'; -import { CalendarEvent, DisplayedEvent } from '../calendar.interfaces'; -import { Cell } from '../lib/cell'; -import { getMonth, getYear, isSunday, startOfMonth, isSaturday, getDaysInMonth, startOfWeek, addDays, differenceInDays, lastDayOfWeek, isSameDay, isSameMonth, isSameYear, getOverlappingDaysInIntervals, parseISO, areIntervalsOverlapping, format } from 'date-fns'; -import { endOfWeek, endOfMonth, eachDayOfInterval, startOfDay, endOfDay } from 'date-fns/esm'; - +import { CellsState, CELLS_FEATURE_KEY } from './cells.reducer' +import { createSelector } from '@ngrx/store' +import { CalendarEvent, DisplayedEvent } from '../calendar.interfaces' +import { Cell } from '../lib/cell' +import { + getMonth, + getYear, + isSunday, + startOfMonth, + isSaturday, + getDaysInMonth, + startOfWeek, + addDays, + differenceInDays, + lastDayOfWeek, + isSameDay, + isSameMonth, + isSameYear, + getOverlappingDaysInIntervals, + parseISO, + areIntervalsOverlapping, + format, +} from 'date-fns' +import { endOfWeek, endOfMonth, eachDayOfInterval, startOfDay, endOfDay } from 'date-fns/esm' const selectFeature = (state: any) => { return state[CELLS_FEATURE_KEY] @@ -70,10 +87,7 @@ const selectCalendarEventsInMonth = createSelector( (events: CalendarEvent[], month: Date, firstCellDate: Date, lastCellDate: Date): CalendarEvent[] => { let eventsInMonth: CalendarEvent[] = [] for (const event of events) { - const overlap = areIntervalsOverlapping( - { start: firstCellDate, end: lastCellDate }, - { start: event.startDate, end: event.endDate } - ) + const overlap = areIntervalsOverlapping({ start: firstCellDate, end: lastCellDate }, { start: event.startDate, end: event.endDate }) if (overlap) eventsInMonth = [...eventsInMonth, event] } return eventsInMonth @@ -93,13 +107,7 @@ const selectGeneratedCells = createSelector( const cellHeight = (hostHeight - 68) / rows - 32 const maxRows = Math.floor(cellHeight / 24) const anotherMonth = !isSameMonth(date, month) - const cell = new Cell( - i, - today, - date, - maxRows, - anotherMonth - ) + const cell = new Cell(i, today, date, maxRows, anotherMonth) cellsInMonth = [...cellsInMonth, cell] } return cellsInMonth @@ -116,16 +124,8 @@ const selectDisplayEvents = createSelector( const daysInEvent = eachDayOfInterval({ start: event.startDate, end: event.endDate }) let startDate = event.startDate for (const day of daysInEvent) { - if ( - isSameDay(day, endOfWeek(day, { weekStartsOn: 1 })) - || isSameDay(day, event.endDate) - ) { - if ( - areIntervalsOverlapping( - { start: firstCellDate, end: lastCellDate }, - { start: startDate, end: day } - ) - ) { + if (isSameDay(day, endOfWeek(day, { weekStartsOn: 1 })) || isSameDay(day, event.endDate)) { + if (areIntervalsOverlapping({ start: firstCellDate, end: lastCellDate }, { start: startDate, end: day })) { const trackBy = `${event.id}-${format(startDate, 'yyyy-MM-dd')}-${format(day, 'dd-MM-yyyy')}` displayedEvents = [ ...displayedEvents, @@ -136,7 +136,7 @@ const selectDisplayEvents = createSelector( endDate: day, color: event.color, trackBy, - } + }, ] } startDate = addDays(day, 1) @@ -195,12 +195,7 @@ const selectedMoreEvents = createSelector( (day: Date, events: CalendarEvent[]): CalendarEvent[] => { let eventsInDay = [] for (const event of events) { - if ( - areIntervalsOverlapping( - { start: event.startDate, end: event.endDate }, - { start: startOfDay(day), end: endOfDay(day) } - ) - ){ + if (areIntervalsOverlapping({ start: event.startDate, end: event.endDate }, { start: startOfDay(day), end: endOfDay(day) })) { eventsInDay = [...eventsInDay, event] } } diff --git a/libs/calendar/src/lib/+state/popup.actions.ts b/libs/calendar/src/lib/+state/popup.actions.ts index 4504b260e..c606d3c32 100644 --- a/libs/calendar/src/lib/+state/popup.actions.ts +++ b/libs/calendar/src/lib/+state/popup.actions.ts @@ -1,5 +1,5 @@ import { Action } from '@ngrx/store' -import { PopupSettings } from '../calendar.interfaces'; +import { PopupSettings } from '../calendar.interfaces' export enum PopupActionTypes { HideMoreEventsPopup = '[Popup] Hide More Events Popup', @@ -17,9 +17,7 @@ export class SetMoreEventsPopup implements Action { export const fromPopupActions = { HideMoreEventsPopup, - SetMoreEventsPopup + SetMoreEventsPopup, } -export type PopupAction - = HideMoreEventsPopup - | SetMoreEventsPopup \ No newline at end of file +export type PopupAction = HideMoreEventsPopup | SetMoreEventsPopup diff --git a/libs/calendar/src/lib/+state/popup.reducer.ts b/libs/calendar/src/lib/+state/popup.reducer.ts index a3e830436..447969f5c 100644 --- a/libs/calendar/src/lib/+state/popup.reducer.ts +++ b/libs/calendar/src/lib/+state/popup.reducer.ts @@ -1,5 +1,5 @@ import { PopupAction, PopupActionTypes } from './popup.actions' -import { PopupSettings } from '../calendar.interfaces'; +import { PopupSettings } from '../calendar.interfaces' export const POPUP_FEATURE_KEY = 'ui-calendar-popup' @@ -17,8 +17,8 @@ export const initialState: PopupState = { top: 0, left: 0, date: '', - events: [] - } + events: [], + }, } export function popupReducer(state: PopupState = initialState, action: PopupAction): PopupState { @@ -28,8 +28,8 @@ export function popupReducer(state: PopupState = initialState, action: PopupActi ...state, moreEventsPopup: { ...state.moreEventsPopup, - visible: false - } + visible: false, + }, } break } @@ -39,8 +39,8 @@ export function popupReducer(state: PopupState = initialState, action: PopupActi ...state, moreEventsPopup: { ...state.moreEventsPopup, - ...action.payload - } + ...action.payload, + }, } break } diff --git a/libs/calendar/src/lib/calendar.component.html b/libs/calendar/src/lib/calendar.component.html index b5066d426..df76d5c7c 100644 --- a/libs/calendar/src/lib/calendar.component.html +++ b/libs/calendar/src/lib/calendar.component.html @@ -5,11 +5,16 @@
-
+
{{ item }}
-
+
{{ cell.day }}
{{ details.date }}
-
\ No newline at end of file +
diff --git a/libs/calendar/src/lib/calendar.component.scss b/libs/calendar/src/lib/calendar.component.scss index 4c5321283..54ae3ca5b 100644 --- a/libs/calendar/src/lib/calendar.component.scss +++ b/libs/calendar/src/lib/calendar.component.scss @@ -69,9 +69,9 @@ display: block; padding: 0 8px; transition: background-color 100ms; - background-color: rgba(0,0,0,0); + background-color: rgba(0, 0, 0, 0); &:hover { - background-color: rgba(0,0,0,0.1); + background-color: rgba(0, 0, 0, 0.1); } } @@ -191,5 +191,5 @@ button:focus { } .anotherMonth { - color: #70757a -} \ No newline at end of file + color: #70757a; +} diff --git a/libs/calendar/src/lib/calendar.component.ts b/libs/calendar/src/lib/calendar.component.ts index 70ba5c184..0906448ef 100644 --- a/libs/calendar/src/lib/calendar.component.ts +++ b/libs/calendar/src/lib/calendar.component.ts @@ -11,7 +11,7 @@ import { fromPopupActions } from './+state/popup.actions' import { cellsQuery } from './+state/cells.selectors' import { fromCellsActions } from './+state/cells.actions' import { MatDialog } from '@angular/material/dialog' -import { MoreDetailsDialogComponent } from './more-details-dialog/more-details-dialog.component'; +import { MoreDetailsDialogComponent } from './more-details-dialog/more-details-dialog.component' @Component({ selector: 'verseghy-calendar', @@ -24,9 +24,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { private _eventsIds = [] public today = this.settings.today - public cells = this.store.pipe( - select(cellsQuery.selectCells) - ) + public cells = this.store.pipe(select(cellsQuery.selectCells)) public formatedDate = this.store.pipe( select(cellsQuery.selectMonth), map((date: Date) => { @@ -56,12 +54,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { month: number }>() - constructor( - private _el: ElementRef, - private popupHandler: PopupHandlerService, - private store: Store, - private dialog: MatDialog - ) {} + constructor(private _el: ElementRef, private popupHandler: PopupHandlerService, private store: Store, private dialog: MatDialog) {} ngOnInit() {} @@ -73,7 +66,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { } get shortDayNames() { - const firstDate = startOfWeek(new Date, {weekStartsOn: 1}) + const firstDate = startOfWeek(new Date(), { weekStartsOn: 1 }) let dayNames = [] for (let i = 0; i < 7; i++) { const dayName = format(addDays(firstDate, i), 'EEEEEE', { locale: hu }) @@ -142,7 +135,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { public setEventDetailsPopup(id: number, click: Event): void { this.store.dispatch(new fromCellsActions.SetSelectedEvent(id)) const dialog = this.dialog.open(MoreDetailsDialogComponent, { - width: '350px' + width: '350px', }) dialog.afterOpened().subscribe(result => { @@ -156,11 +149,7 @@ export class CalendarComponent implements OnInit, AfterViewInit { @HostListener('document:click', ['$event']) clickout(event: Event) { - if ( - this.moreEventsPopupElement - && !this.moreEventsPopupElement.nativeElement.contains(event.target) - && !this._isDialogOpen - ) { + if (this.moreEventsPopupElement && !this.moreEventsPopupElement.nativeElement.contains(event.target) && !this._isDialogOpen) { this.closeMoreEventsPopup() } } diff --git a/libs/calendar/src/lib/calendar.interfaces.ts b/libs/calendar/src/lib/calendar.interfaces.ts index dff1f0cca..4cff63526 100644 --- a/libs/calendar/src/lib/calendar.interfaces.ts +++ b/libs/calendar/src/lib/calendar.interfaces.ts @@ -35,4 +35,4 @@ export interface PopupSettings { title: string color: string }[] -} \ No newline at end of file +} diff --git a/libs/calendar/src/lib/calendar.module.ts b/libs/calendar/src/lib/calendar.module.ts index d155295f6..63bb88ded 100644 --- a/libs/calendar/src/lib/calendar.module.ts +++ b/libs/calendar/src/lib/calendar.module.ts @@ -6,9 +6,9 @@ import { EffectsModule } from '@ngrx/effects' import { POPUP_FEATURE_KEY, initialState as popupInitialState, popupReducer } from './+state/popup.reducer' import { PopupEffects } from './+state/popup.effects' import { CELLS_FEATURE_KEY, initialState as cellsInitialState, cellsReducer } from './+state/cells.reducer' -import { CellsEffects } from './+state/cells.effects'; +import { CellsEffects } from './+state/cells.effects' import { MoreDetailsDialogComponent } from './more-details-dialog/more-details-dialog.component' -import { MatDialogModule } from '@angular/material/dialog'; +import { MatDialogModule } from '@angular/material/dialog' import { MatButtonModule } from '@angular/material/button' @NgModule({ diff --git a/libs/calendar/src/lib/calendar.service.ts b/libs/calendar/src/lib/calendar.service.ts index 332e2db4a..b77480d4d 100644 --- a/libs/calendar/src/lib/calendar.service.ts +++ b/libs/calendar/src/lib/calendar.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core' -import { BehaviorSubject } from 'rxjs'; -import { EventDetailsPopUpSettings } from './calendar.interfaces'; +import { BehaviorSubject } from 'rxjs' +import { EventDetailsPopUpSettings } from './calendar.interfaces' @Injectable({ providedIn: 'root', @@ -13,7 +13,7 @@ export class NgxCalendarLibService { date: '', title: '', description: '', - color: '' + color: '', } eventDetailsPopUp$: BehaviorSubject = new BehaviorSubject(this.eventDetailsPopUpSettings) diff --git a/libs/calendar/src/lib/lib/cell.ts b/libs/calendar/src/lib/lib/cell.ts index 4cb113218..e2e2005f6 100644 --- a/libs/calendar/src/lib/lib/cell.ts +++ b/libs/calendar/src/lib/lib/cell.ts @@ -22,7 +22,7 @@ export class Cell { private _today: boolean, private _date: Date, private _maxRows: number, - private _anotherMonth: boolean, + private _anotherMonth: boolean ) {} public getRow(width: number): number { @@ -66,11 +66,11 @@ export class Cell { return this._date } - get getEvents(): {id: number, order:number}[] { + get getEvents(): { id: number; order: number }[] { let events = [] for (const item of this._rows) { if (!item.free) { - events = [...events, {id: item.id, order: item.row}] + events = [...events, { id: item.id, order: item.row }] } } return events diff --git a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.css b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.css index 54caa0f26..3e1ad958e 100644 --- a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.css +++ b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.css @@ -18,4 +18,4 @@ .dialog-actions { margin-top: 20px; text-align: right; -} \ No newline at end of file +} diff --git a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html index e8aa01718..44e294acb 100644 --- a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html +++ b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.html @@ -1,6 +1,6 @@

{{ (data | async).title }}

-{{ (formatedTime | async) }} +{{ formatedTime | async }}
{{ (data | async).description }}
diff --git a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.spec.ts b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.spec.ts index ee62f0145..cb8629195 100644 --- a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.spec.ts +++ b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.spec.ts @@ -1,25 +1,24 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing' -import { MoreDetailsDialogComponent } from './more-details-dialog.component'; +import { MoreDetailsDialogComponent } from './more-details-dialog.component' describe('MoreDetailsDialogComponent', () => { - let component: MoreDetailsDialogComponent; - let fixture: ComponentFixture; + let component: MoreDetailsDialogComponent + let fixture: ComponentFixture beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ MoreDetailsDialogComponent ] - }) - .compileComponents(); - })); + declarations: [MoreDetailsDialogComponent], + }).compileComponents() + })) beforeEach(() => { - fixture = TestBed.createComponent(MoreDetailsDialogComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + fixture = TestBed.createComponent(MoreDetailsDialogComponent) + component = fixture.componentInstance + fixture.detectChanges() + }) it('should create', () => { - expect(component).toBeTruthy(); - }); -}); + expect(component).toBeTruthy() + }) +}) diff --git a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts index 7dec3b7fa..dc4dea4b9 100644 --- a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts +++ b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts @@ -3,19 +3,18 @@ import { CalendarComponent } from '../calendar.component' import { MatDialogRef } from '@angular/material/dialog' import { format, isSameDay, isSameMonth, isSameYear } from 'date-fns' import { hu } from 'date-fns/locale' -import { CalendarEvent } from '../calendar.interfaces'; -import { Store, select } from '@ngrx/store'; -import { CELLS_FEATURE_KEY } from '../+state/cells.reducer'; -import { map, filter } from 'rxjs/operators'; -import { cellsQuery } from '../+state/cells.selectors'; +import { CalendarEvent } from '../calendar.interfaces' +import { Store, select } from '@ngrx/store' +import { CELLS_FEATURE_KEY } from '../+state/cells.reducer' +import { map, filter } from 'rxjs/operators' +import { cellsQuery } from '../+state/cells.selectors' @Component({ selector: 'verseghy-more-details-dialog', templateUrl: './more-details-dialog.component.html', - styleUrls: ['./more-details-dialog.component.css'] + styleUrls: ['./more-details-dialog.component.css'], }) export class MoreDetailsDialogComponent implements OnInit { - public data = this.store.pipe( select(cellsQuery.selectedEvent), filter(event => !!event) @@ -25,7 +24,7 @@ export class MoreDetailsDialogComponent implements OnInit { select(cellsQuery.selectedEvent), filter(event => !!event), map((event: CalendarEvent) => { - let second = "" + let second = '' let startDate = format(event.startDate, 'Y. MMMM dd.', { locale: hu }) if (!isSameYear(event.startDate, event.endDate)) { second = `- ${format(event.endDate, 'Y. MMMM dd.', { locale: hu })}` @@ -33,19 +32,15 @@ export class MoreDetailsDialogComponent implements OnInit { second = `- ${format(event.endDate, 'MMMM dd.', { locale: hu })}` } else if (!isSameDay(event.startDate, event.endDate)) { second = `- ${format(event.endDate, 'dd.', { locale: hu })}` - startDate = startDate.slice(0, -1); + startDate = startDate.slice(0, -1) } return `${startDate} ${second}` }) ) - constructor( - private thisDialogRef: MatDialogRef, - private store: Store - ) { } + constructor(private thisDialogRef: MatDialogRef, private store: Store) {} - ngOnInit() { - } + ngOnInit() {} closeDialog() { this.thisDialogRef.close() diff --git a/libs/calendar/src/lib/services/popup-handler.service.spec.ts b/libs/calendar/src/lib/services/popup-handler.service.spec.ts index 9f7d9c57f..7a73a3534 100644 --- a/libs/calendar/src/lib/services/popup-handler.service.spec.ts +++ b/libs/calendar/src/lib/services/popup-handler.service.spec.ts @@ -1,12 +1,12 @@ -import { TestBed } from '@angular/core/testing'; +import { TestBed } from '@angular/core/testing' -import { PopupHandlerService } from './popup-handler.service'; +import { PopupHandlerService } from './popup-handler.service' describe('PopupHandlerService', () => { - beforeEach(() => TestBed.configureTestingModule({})); + beforeEach(() => TestBed.configureTestingModule({})) it('should be created', () => { - const service: PopupHandlerService = TestBed.get(PopupHandlerService); - expect(service).toBeTruthy(); - }); -}); + const service: PopupHandlerService = TestBed.get(PopupHandlerService) + expect(service).toBeTruthy() + }) +}) diff --git a/libs/calendar/src/lib/services/popup-handler.service.ts b/libs/calendar/src/lib/services/popup-handler.service.ts index 72ce99139..91762807b 100644 --- a/libs/calendar/src/lib/services/popup-handler.service.ts +++ b/libs/calendar/src/lib/services/popup-handler.service.ts @@ -6,15 +6,14 @@ import { fromPopupActions } from '../+state/popup.actions' import { hu } from 'date-fns/locale' @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class PopupHandlerService { - public settings: Settings public hostElement: HTMLElement public date: Date - constructor(private store: Store) { } + constructor(private store: Store) {} public setMoreEventsPopup(date: Date) { const height = (this.hostElement.offsetHeight - 68) / this._getRowsInMonth() From f580b22362670bfd8cec9063f3130fd3a67cf0ab Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Fri, 10 May 2019 17:32:15 +0200 Subject: [PATCH 15/20] feat: add unsubscribing from observables --- .../src/lib/+state/cells.selectors.ts | 12 +++--- libs/calendar/src/lib/calendar.component.ts | 41 +++++++++++++------ .../more-details-dialog.component.ts | 15 +++++-- 3 files changed, 45 insertions(+), 23 deletions(-) diff --git a/libs/calendar/src/lib/+state/cells.selectors.ts b/libs/calendar/src/lib/+state/cells.selectors.ts index 9a5dfc129..29ad155f8 100644 --- a/libs/calendar/src/lib/+state/cells.selectors.ts +++ b/libs/calendar/src/lib/+state/cells.selectors.ts @@ -3,8 +3,6 @@ import { createSelector } from '@ngrx/store' import { CalendarEvent, DisplayedEvent } from '../calendar.interfaces' import { Cell } from '../lib/cell' import { - getMonth, - getYear, isSunday, startOfMonth, isSaturday, @@ -12,16 +10,16 @@ import { startOfWeek, addDays, differenceInDays, - lastDayOfWeek, isSameDay, isSameMonth, - isSameYear, - getOverlappingDaysInIntervals, - parseISO, areIntervalsOverlapping, format, + endOfWeek, + endOfMonth, + eachDayOfInterval, + startOfDay, + endOfDay } from 'date-fns' -import { endOfWeek, endOfMonth, eachDayOfInterval, startOfDay, endOfDay } from 'date-fns/esm' const selectFeature = (state: any) => { return state[CELLS_FEATURE_KEY] diff --git a/libs/calendar/src/lib/calendar.component.ts b/libs/calendar/src/lib/calendar.component.ts index 0906448ef..e03b8e9fe 100644 --- a/libs/calendar/src/lib/calendar.component.ts +++ b/libs/calendar/src/lib/calendar.component.ts @@ -1,10 +1,10 @@ -import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core' +import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild, OnDestroy } from '@angular/core' import { Settings, CalendarEvent } from '@verseghy/calendar' import { Cell } from './lib/cell' import { format, startOfWeek, addDays } from 'date-fns' import { hu } from 'date-fns/locale' import { PopupHandlerService } from './services/popup-handler.service' -import { map } from 'rxjs/operators' +import { map, takeUntil } from 'rxjs/operators' import { Store, select } from '@ngrx/store' import { POPUP_FEATURE_KEY, PopupState } from './+state/popup.reducer' import { fromPopupActions } from './+state/popup.actions' @@ -12,37 +12,39 @@ import { cellsQuery } from './+state/cells.selectors' import { fromCellsActions } from './+state/cells.actions' import { MatDialog } from '@angular/material/dialog' import { MoreDetailsDialogComponent } from './more-details-dialog/more-details-dialog.component' +import { Subject } from 'rxjs'; @Component({ selector: 'verseghy-calendar', templateUrl: './calendar.component.html', styleUrls: ['./calendar.component.scss'], }) -export class CalendarComponent implements OnInit, AfterViewInit { +export class CalendarComponent implements OnInit, AfterViewInit, OnDestroy { private _settings: Settings private _isDialogOpen = false - private _eventsIds = [] + public destroy: Subject = new Subject() public today = this.settings.today - public cells = this.store.pipe(select(cellsQuery.selectCells)) + public cells = this.store.pipe( + takeUntil(this.destroy), + select(cellsQuery.selectCells) + ) public formatedDate = this.store.pipe( + takeUntil(this.destroy), select(cellsQuery.selectMonth), map((date: Date) => { - this.closeMoreEventsPopup() - this.monthChanged.emit({ - year: date.getFullYear(), - month: date.getMonth(), - }) return format(date, 'yyyy. LLLL', { locale: hu }) }) ) public moreEventsPopup = this.store.pipe( + takeUntil(this.destroy), select(POPUP_FEATURE_KEY), map((state: PopupState) => { return state.moreEventsPopup }) ) public moreEventsPopupEvents = this.store.pipe( + takeUntil(this.destroy), select(cellsQuery.selectedMoreEvents), map(events => events) ) @@ -58,10 +60,24 @@ export class CalendarComponent implements OnInit, AfterViewInit { ngOnInit() {} + ngOnDestroy() { + this.destroy.next(true) + } + ngAfterViewInit() { setTimeout(() => { this.popupHandler.hostElement = this._el.nativeElement this.store.dispatch(new fromCellsActions.SetHostHeight(this._el.nativeElement.offsetHeight)) + this.store.pipe( + takeUntil(this.destroy), + select(cellsQuery.selectMonth) + ).subscribe(date => { + this.closeMoreEventsPopup() + this.monthChanged.emit({ + year: date.getFullYear(), + month: date.getMonth(), + }) + }) }) } @@ -104,9 +120,10 @@ export class CalendarComponent implements OnInit, AfterViewInit { @Input('events') public set events(events: CalendarEvent[]) { if (!events) return if (events.length) { + let eventIds const tempEvents = events.filter(item => { - if (this._eventsIds.includes(item.id)) return false - this._eventsIds = [...this._eventsIds, item.id] + if (eventIds.includes(item.id)) return false + eventIds = [...eventIds, item.id] return true }) this.store.dispatch(new fromCellsActions.SetEvents(tempEvents)) diff --git a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts index dc4dea4b9..e1e789c66 100644 --- a/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts +++ b/libs/calendar/src/lib/more-details-dialog/more-details-dialog.component.ts @@ -1,26 +1,29 @@ -import { Component, OnInit } from '@angular/core' +import { Component, OnInit, OnDestroy } from '@angular/core' import { CalendarComponent } from '../calendar.component' import { MatDialogRef } from '@angular/material/dialog' import { format, isSameDay, isSameMonth, isSameYear } from 'date-fns' import { hu } from 'date-fns/locale' import { CalendarEvent } from '../calendar.interfaces' import { Store, select } from '@ngrx/store' -import { CELLS_FEATURE_KEY } from '../+state/cells.reducer' -import { map, filter } from 'rxjs/operators' +import { map, filter, takeUntil } from 'rxjs/operators' import { cellsQuery } from '../+state/cells.selectors' +import { Subject } from 'rxjs'; @Component({ selector: 'verseghy-more-details-dialog', templateUrl: './more-details-dialog.component.html', styleUrls: ['./more-details-dialog.component.css'], }) -export class MoreDetailsDialogComponent implements OnInit { +export class MoreDetailsDialogComponent implements OnInit, OnDestroy { + public destroy: Subject = new Subject() public data = this.store.pipe( + takeUntil(this.destroy), select(cellsQuery.selectedEvent), filter(event => !!event) ) public formatedTime = this.store.pipe( + takeUntil(this.destroy), select(cellsQuery.selectedEvent), filter(event => !!event), map((event: CalendarEvent) => { @@ -42,6 +45,10 @@ export class MoreDetailsDialogComponent implements OnInit { ngOnInit() {} + ngOnDestroy() { + this.destroy.next(true) + } + closeDialog() { this.thisDialogRef.close() } From 70b459a7ed1009cb7a3cd6565ddc05f5a051dbe7 Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Fri, 10 May 2019 17:59:34 +0200 Subject: [PATCH 16/20] fix: aot --- libs/calendar/src/lib/+state/cells.reducer.ts | 4 ++-- libs/calendar/src/lib/calendar.component.ts | 6 ++++-- .../src/lib/services/popup-handler.service.ts | 14 +++++++------- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/libs/calendar/src/lib/+state/cells.reducer.ts b/libs/calendar/src/lib/+state/cells.reducer.ts index 8fe0a2b1a..b2979c5f2 100644 --- a/libs/calendar/src/lib/+state/cells.reducer.ts +++ b/libs/calendar/src/lib/+state/cells.reducer.ts @@ -18,10 +18,10 @@ export interface CellsPartialState { export const initialState: CellsState = { events: [], - month: new Date(), + month: null, height: 0, selectedEvent: -1, - selectedMoreEvents: new Date(), + selectedMoreEvents: null, } export function cellsReducer(state: CellsState = initialState, action: CellsAction): CellsState { diff --git a/libs/calendar/src/lib/calendar.component.ts b/libs/calendar/src/lib/calendar.component.ts index e03b8e9fe..a006c4a69 100644 --- a/libs/calendar/src/lib/calendar.component.ts +++ b/libs/calendar/src/lib/calendar.component.ts @@ -58,7 +58,9 @@ export class CalendarComponent implements OnInit, AfterViewInit, OnDestroy { constructor(private _el: ElementRef, private popupHandler: PopupHandlerService, private store: Store, private dialog: MatDialog) {} - ngOnInit() {} + ngOnInit() { + this.store.dispatch(new fromCellsActions.SetMonth(new Date())) + } ngOnDestroy() { this.destroy.next(true) @@ -120,7 +122,7 @@ export class CalendarComponent implements OnInit, AfterViewInit, OnDestroy { @Input('events') public set events(events: CalendarEvent[]) { if (!events) return if (events.length) { - let eventIds + let eventIds = [] const tempEvents = events.filter(item => { if (eventIds.includes(item.id)) return false eventIds = [...eventIds, item.id] diff --git a/libs/calendar/src/lib/services/popup-handler.service.ts b/libs/calendar/src/lib/services/popup-handler.service.ts index 91762807b..bb1dc50b1 100644 --- a/libs/calendar/src/lib/services/popup-handler.service.ts +++ b/libs/calendar/src/lib/services/popup-handler.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core' import { PopupSettings, Settings } from '../calendar.interfaces' -import { getDate, getISOWeek, startOfMonth, getDay, isSunday, isSaturday, getDaysInMonth, format } from 'date-fns' +import { getDate, startOfMonth, getDay, isSunday, isSaturday, getDaysInMonth, format, getWeek } from 'date-fns' import { Store } from '@ngrx/store' import { fromPopupActions } from '../+state/popup.actions' import { hu } from 'date-fns/locale' @@ -11,13 +11,13 @@ import { hu } from 'date-fns/locale' export class PopupHandlerService { public settings: Settings public hostElement: HTMLElement - public date: Date constructor(private store: Store) {} public setMoreEventsPopup(date: Date) { - const height = (this.hostElement.offsetHeight - 68) / this._getRowsInMonth() + const height = (this.hostElement.offsetHeight - 68) / this._getRowsInMonth(date) const row = this._getWeekOfMonth(date) + console.log(date) let column = getDay(date) if (column === 0) { column = 7 @@ -38,13 +38,13 @@ export class PopupHandlerService { } private _getWeekOfMonth(date: Date): number { - return getISOWeek(date) - getISOWeek(startOfMonth(this.date)) + return getWeek(date) - getWeek(startOfMonth(date)) } - private _getRowsInMonth(): number { + private _getRowsInMonth(date): number { if ( - (isSunday(startOfMonth(this.date)) && getDaysInMonth(this.date) >= 30) || - (isSaturday(startOfMonth(this.date)) && getDaysInMonth(this.date) === 31) + (isSunday(startOfMonth(date)) && getDaysInMonth(date) >= 30) || + (isSaturday(startOfMonth(date)) && getDaysInMonth(date) === 31) ) { return 6 } From b03be445380419b59a859ba2042ee0c9cd7d5be1 Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Sun, 9 Jun 2019 21:50:39 +0200 Subject: [PATCH 17/20] WIP --- .../src/lib/+state/cells.selectors.ts | 92 ++++++++++++++++--- libs/calendar/src/lib/calendar.component.html | 15 ++- libs/calendar/src/lib/calendar.interfaces.ts | 16 ++++ 3 files changed, 100 insertions(+), 23 deletions(-) diff --git a/libs/calendar/src/lib/+state/cells.selectors.ts b/libs/calendar/src/lib/+state/cells.selectors.ts index 29ad155f8..25ff49d3a 100644 --- a/libs/calendar/src/lib/+state/cells.selectors.ts +++ b/libs/calendar/src/lib/+state/cells.selectors.ts @@ -1,7 +1,6 @@ import { CellsState, CELLS_FEATURE_KEY } from './cells.reducer' import { createSelector } from '@ngrx/store' -import { CalendarEvent, DisplayedEvent } from '../calendar.interfaces' -import { Cell } from '../lib/cell' +import { CalendarEvent, DisplayedEvent, Cell } from '../calendar.interfaces' import { isSunday, startOfMonth, @@ -18,8 +17,10 @@ import { endOfMonth, eachDayOfInterval, startOfDay, - endOfDay + endOfDay, + getDate } from 'date-fns' +import { hu } from 'date-fns/locale' const selectFeature = (state: any) => { return state[CELLS_FEATURE_KEY] @@ -95,24 +96,30 @@ const selectCalendarEventsInMonth = createSelector( const selectGeneratedCells = createSelector( selectRowsInMonth, selectFirstCellDate, - selectHeight, selectMonth, - (rows: number, firstCellDate: Date, hostHeight: number, month: Date): Cell[] => { + (rows: number, firstCellDate: Date, month: Date): Cell[] => { let cellsInMonth: Cell[] = [] for (let i = 0; i < 7 * rows; i++) { const date = addDays(firstCellDate, i) + let formatedDate = format(date, 'd') + if (getDate(date) === 1) formatedDate = format(date, 'LLL d', { locale: hu }) const today = isSameDay(date, new Date()) - const cellHeight = (hostHeight - 68) / rows - 32 - const maxRows = Math.floor(cellHeight / 24) const anotherMonth = !isSameMonth(date, month) - const cell = new Cell(i, today, date, maxRows, anotherMonth) + /*const cellHeight = (hostHeight - 68) / rows - 32 + const maxRows = Math.floor(cellHeight / 24)*/ + const cell: Cell = { + date: formatedDate, + today, + anotherMonth, + rows: new Map() + } cellsInMonth = [...cellsInMonth, cell] } return cellsInMonth } ) -const selectDisplayEvents = createSelector( +const selectDisplayedEvents = createSelector( selectCalendarEventsInMonth, selectFirstCellDate, selectLastCellDate, @@ -145,23 +152,76 @@ const selectDisplayEvents = createSelector( } ) -const selectClearedCells = createSelector( +const selectCellsWithEvents = createSelector( selectGeneratedCells, - selectEvents, + selectDisplayedEvents, + selectFirstCellDate, + (cells: Cell[], events: DisplayedEvent[], firstCellDate: Date): Cell[] => { + for (const event of events) { + const firstCell = cells[Math.abs(differenceInDays(event.startDate, firstCellDate))] + let row = 0 + for (let i = 0; i < Math.max(...Array.from(firstCell.rows.keys())) + 1; i++) { + if (!firstCell.rows.has(i)) { + row = i + break + } + } + let isPlaceholder = false + for (const day of eachDayOfInterval({start: event.startDate, end: event.endDate})) { + const cell = cells[Math.abs(differenceInDays(day, firstCellDate))] + let rowObject = {} + if (!isPlaceholder) { + const eventLength = Math.abs(differenceInDays(event.startDate, event.endDate)) + const formatedEventLength = `calc(${eventLength + 1}00% - 4px + ${eventLength}px` + const top = row * 24 + rowObject = { + placeholder: false, + event: { + title: event.title, + color: event.color, + id: 1, + width: formatedEventLength, + top + } + } + } else { + rowObject = { + placeholder: true + } + } + cell.rows.set(row, rowObject) + isPlaceholder = true + } + } + return cells + } +) + +const selectFilteredCells = createSelector( + selectCellsWithEvents, (cells: Cell[]): Cell[] => { for (const cell of cells) { - cell.clearEvents() + console.log(cells) + cell.rows.forEach((value,index,z) => { + console.log(index, value) + }) } + return cells + /*return cells.map(cell => { + console.log(cell.rows) + //console.log(cell.rows.filter(item => !item.placeholder)) + return cell + })*/ } ) const selectCells = createSelector( - selectClearedCells, - selectDisplayEvents, + selectFilteredCells, + selectDisplayedEvents, selectFirstCellDate, (cells: Cell[], events: DisplayedEvent[], firstCellDate: Date): Cell[] => { - for (const event of events) { + /*for (const event of events) { const row = cells[Math.abs(differenceInDays(event.startDate, firstCellDate))].firstFreeRow const eventLength = eachDayOfInterval({ start: event.startDate, end: event.endDate }).length for (let i = 0; i < eventLength; i++) { @@ -170,6 +230,8 @@ const selectCells = createSelector( cell.push(event.id, row, event.title, eventLength, event.color, placeholder) } } + return cells*/ + //console.log(cells) return cells } ) diff --git a/libs/calendar/src/lib/calendar.component.html b/libs/calendar/src/lib/calendar.component.html index df76d5c7c..1a78a79d1 100644 --- a/libs/calendar/src/lib/calendar.component.html +++ b/libs/calendar/src/lib/calendar.component.html @@ -15,17 +15,16 @@ class="cellElement" [ngClass]="{ today: cell.today, anotherMonth: cell.anotherMonth }" > - {{ cell.day }} + {{ cell.date }}
-
- {{ event.title }} -
+ {{ row.value.event.title }} +
-->
+} \ No newline at end of file From fc565b6e1a85db7b513045352761e966c94edad0 Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Mon, 10 Jun 2019 14:57:55 +0200 Subject: [PATCH 18/20] feat: remove data persistence --- libs/calendar/src/lib/+state/cells.effects.ts | 3 +-- libs/calendar/src/lib/+state/cells.selectors.ts | 3 +-- libs/calendar/src/lib/+state/popup.effects.ts | 3 +-- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/libs/calendar/src/lib/+state/cells.effects.ts b/libs/calendar/src/lib/+state/cells.effects.ts index 4faa9c067..ff76514d1 100644 --- a/libs/calendar/src/lib/+state/cells.effects.ts +++ b/libs/calendar/src/lib/+state/cells.effects.ts @@ -1,10 +1,9 @@ import { Injectable } from '@angular/core' import { Actions } from '@ngrx/effects' -import { DataPersistence } from '@nrwl/nx' import { CellsPartialState } from './cells.reducer' @Injectable() export class CellsEffects { - constructor(private actions$: Actions, private dataPersistence: DataPersistence) {} + constructor(private actions$: Actions) {} } diff --git a/libs/calendar/src/lib/+state/cells.selectors.ts b/libs/calendar/src/lib/+state/cells.selectors.ts index 25ff49d3a..357f06926 100644 --- a/libs/calendar/src/lib/+state/cells.selectors.ts +++ b/libs/calendar/src/lib/+state/cells.selectors.ts @@ -201,7 +201,6 @@ const selectFilteredCells = createSelector( selectCellsWithEvents, (cells: Cell[]): Cell[] => { for (const cell of cells) { - console.log(cells) cell.rows.forEach((value,index,z) => { console.log(index, value) }) @@ -231,7 +230,7 @@ const selectCells = createSelector( } } return cells*/ - //console.log(cells) + console.log(cells) return cells } ) diff --git a/libs/calendar/src/lib/+state/popup.effects.ts b/libs/calendar/src/lib/+state/popup.effects.ts index 68a7013c3..0b5ba4e16 100644 --- a/libs/calendar/src/lib/+state/popup.effects.ts +++ b/libs/calendar/src/lib/+state/popup.effects.ts @@ -1,10 +1,9 @@ import { Injectable } from '@angular/core' import { Actions } from '@ngrx/effects' -import { DataPersistence } from '@nrwl/nx' import { PopupPartialState } from './popup.reducer' @Injectable() export class PopupEffects { - constructor(private actions$: Actions, private dataPersistence: DataPersistence) {} + constructor(private actions$: Actions) {} } From 8fdee3e0b22d0462c76f4d3f18560c67e24387ee Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Mon, 10 Jun 2019 16:15:32 +0200 Subject: [PATCH 19/20] feat: VIP --- .../src/lib/+state/cells.selectors.ts | 41 ++++++++++--------- libs/calendar/src/lib/calendar.component.html | 12 +++--- libs/calendar/src/lib/calendar.interfaces.ts | 23 ++++++----- 3 files changed, 41 insertions(+), 35 deletions(-) diff --git a/libs/calendar/src/lib/+state/cells.selectors.ts b/libs/calendar/src/lib/+state/cells.selectors.ts index 357f06926..6b38dcc46 100644 --- a/libs/calendar/src/lib/+state/cells.selectors.ts +++ b/libs/calendar/src/lib/+state/cells.selectors.ts @@ -1,6 +1,6 @@ import { CellsState, CELLS_FEATURE_KEY } from './cells.reducer' import { createSelector } from '@ngrx/store' -import { CalendarEvent, DisplayedEvent, Cell } from '../calendar.interfaces' +import { CalendarEvent, DisplayedEvent, Cell, CellRow } from '../calendar.interfaces' import { isSunday, startOfMonth, @@ -111,7 +111,7 @@ const selectGeneratedCells = createSelector( date: formatedDate, today, anotherMonth, - rows: new Map() + rows: [] } cellsInMonth = [...cellsInMonth, cell] } @@ -160,8 +160,13 @@ const selectCellsWithEvents = createSelector( for (const event of events) { const firstCell = cells[Math.abs(differenceInDays(event.startDate, firstCellDate))] let row = 0 - for (let i = 0; i < Math.max(...Array.from(firstCell.rows.keys())) + 1; i++) { - if (!firstCell.rows.has(i)) { + let rows = [] + firstCell.rows.sort((a, b) => a.row - b.row) + for (const cellRow of firstCell.rows) { + rows = [...rows, cellRow.row] + } + for (let i = 0; i <= Math.max(...rows) + 1; i++) { + if (!rows.includes(i)) { row = i break } @@ -169,12 +174,13 @@ const selectCellsWithEvents = createSelector( let isPlaceholder = false for (const day of eachDayOfInterval({start: event.startDate, end: event.endDate})) { const cell = cells[Math.abs(differenceInDays(day, firstCellDate))] - let rowObject = {} + let rowObject: CellRow = { row } if (!isPlaceholder) { const eventLength = Math.abs(differenceInDays(event.startDate, event.endDate)) const formatedEventLength = `calc(${eventLength + 1}00% - 4px + ${eventLength}px` const top = row * 24 rowObject = { + ...rowObject, placeholder: false, event: { title: event.title, @@ -186,32 +192,29 @@ const selectCellsWithEvents = createSelector( } } else { rowObject = { + ...rowObject, placeholder: true } } - cell.rows.set(row, rowObject) + cell.rows = [...cell.rows, rowObject] isPlaceholder = true } } + console.log(cells) return cells } ) const selectFilteredCells = createSelector( selectCellsWithEvents, - (cells: Cell[]): Cell[] => { - for (const cell of cells) { - cell.rows.forEach((value,index,z) => { - console.log(index, value) - }) - } - - return cells - /*return cells.map(cell => { - console.log(cell.rows) - //console.log(cell.rows.filter(item => !item.placeholder)) + selectEvents, + (cells: Cell[], events: CalendarEvent[]): Cell[] => { + //console.log('filter', cells) + cells.map(cell => { + cell.rows = cell.rows.filter(row => !row.placeholder) return cell - })*/ + }) + return cells } ) @@ -230,7 +233,7 @@ const selectCells = createSelector( } } return cells*/ - console.log(cells) + //console.log(cells) return cells } ) diff --git a/libs/calendar/src/lib/calendar.component.html b/libs/calendar/src/lib/calendar.component.html index 1a78a79d1..f453ad777 100644 --- a/libs/calendar/src/lib/calendar.component.html +++ b/libs/calendar/src/lib/calendar.component.html @@ -17,14 +17,14 @@ > {{ cell.date }}
- + {{ row.event.title }} +
+ rows: CellRow[] +} + +export interface CellRow { + row: number + placeholder?: boolean + event?: { + id: number + title: string + color: string + width: string + top: number + } } \ No newline at end of file From 29d8035016a230e0596e2c5e8a3931eb422f8312 Mon Sep 17 00:00:00 2001 From: TheEnd023 Date: Fri, 2 Aug 2019 17:50:18 +0200 Subject: [PATCH 20/20] feat: WIP --- libs/calendar/src/lib/+state/cells.selectors.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/libs/calendar/src/lib/+state/cells.selectors.ts b/libs/calendar/src/lib/+state/cells.selectors.ts index 6b38dcc46..84a6c59fc 100644 --- a/libs/calendar/src/lib/+state/cells.selectors.ts +++ b/libs/calendar/src/lib/+state/cells.selectors.ts @@ -64,6 +64,12 @@ const selectRowsInMonth = createSelector( } ) +const selectMaxVisibleRows = createSelector( + selectHeight, + selectRowsInMonth, + (height: number, rows: number) => Math.floor(((height - 68) / rows - 32) / 24) +) + const selectFirstCellDate = createSelector( selectMonth, (month: Date): Date => { @@ -208,10 +214,10 @@ const selectCellsWithEvents = createSelector( const selectFilteredCells = createSelector( selectCellsWithEvents, selectEvents, - (cells: Cell[], events: CalendarEvent[]): Cell[] => { - //console.log('filter', cells) + selectMaxVisibleRows, + (cells: Cell[], events: CalendarEvent[], maxVisibleRows: number): Cell[] => { cells.map(cell => { - cell.rows = cell.rows.filter(row => !row.placeholder) + cell.rows = cell.rows.filter(row => !row.placeholder || row.row > maxVisibleRows - 1) return cell }) return cells