feat: calendar optimization

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
         }
       }

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({
@@ -13,36 +13,30 @@ 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',
   }
-  calendarEvents: Observable<Event[]>
+  calendarEvents: Observable<CalendarEvent[]>
 
   constructor(private store: Store<EventsState>) {}
 
   ngOnInit() {
     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: new Date(item.date_from),
+              endDate: new Date(item.date_to),
+              color: item.color,
+            },
+          ]
         }
         return calendarEvents
       })

apps/frontend/src/styles.scss

@@ -1,3 +1,5 @@
+@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+
 * {
   margin: 0;
   padding: 0;

libs/calendar/src/index.ts

@@ -1,4 +1,4 @@
+export * from './lib/+state/cells.reducer'
+export * from './lib/+state/cells.selectors'
 export * from './lib/calendar.module'
 export * from './lib/calendar.interfaces'
-export * from './lib/calendar.component'
-export * from './lib/lib/event'

libs/calendar/src/lib/+state/cells.actions.ts

@@ -0,0 +1,63 @@
+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',
+  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 {
+  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 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 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,
+}

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<any>
+  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([]) }))
+    })
+  })
+})

libs/calendar/src/lib/+state/cells.effects.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core'
+import { Actions } from '@ngrx/effects'
+
+import { CellsPartialState } from './cells.reducer'
+
+@Injectable()
+export class CellsEffects {
+  constructor(private actions$: Actions) {}
+}

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)
+    })
+  })
+})

libs/calendar/src/lib/+state/cells.reducer.ts

@@ -0,0 +1,86 @@
+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
+  height: number
+  selectedEvent: number
+  selectedMoreEvents: Date
+}
+
+export interface CellsPartialState {
+  readonly [CELLS_FEATURE_KEY]: CellsState
+}
+
+export const initialState: CellsState = {
+  events: [],
+  month: null,
+  height: 0,
+  selectedEvent: -1,
+  selectedMoreEvents: null,
+}
+
+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
+
+    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
+}

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)
+    })
+  })
+})