Get, Set, Patch Tasks in Redux Store

apps/sales/src/app/app-store.module.ts

@@ -9,6 +9,6 @@ import { rootReducer } from './store/root.reducer';
 export const metaReducers: MetaReducer<RootState>[] = !environment.production ? [storeFreeze] : [];
 
 @NgModule({
-  imports: [StoreModule.forRoot(rootReducer, { metaReducers }), StoreDevtoolsModule.instrument()],
+  imports: [StoreModule.forRoot(rootReducer, { metaReducers }), StoreDevtoolsModule.instrument({ name: 'Ngrx Store' })],
 })
 export class AppStoreModule { }

apps/sales/src/app/store/branch/task-calendar/task-calendar.actions.ts

@@ -1,3 +1,33 @@
-import { createAction } from '@ngrx/store';
+import { createAction, props } from '@ngrx/store';
+import {
+  StrictHttpResponse,
+  DisplayInfoDTO,
+  ResponseArgsOfIEnumerableOfDisplayInfoDTO,
+  DisplayInfoRequest,
+} from '@swagger/eis/lib';
 
-export const dummy = createAction('[Branch] [Task Calendar] Dummy');
+const prefix = '[Branch] [Task Calendar]';
+
+export const getTasks = createAction(`${prefix}  Get Tasks`);
+
+export const getTasksResponse = createAction(
+  `${prefix} Get Tasks Response`,
+  props<{
+    response: StrictHttpResponse<ResponseArgsOfIEnumerableOfDisplayInfoDTO>;
+  }>()
+);
+
+export const setTasks = createAction(
+  `${prefix} Set Tasks`,
+  props<{
+    tasks: DisplayInfoDTO[];
+  }>()
+);
+
+export const setFilter = createAction(`${prefix} Set Filter`, props<{ filter: DisplayInfoRequest; }>());
+
+export const patchFilter = createAction(`${prefix} Patch Filter`, props<{ filter: Partial<DisplayInfoRequest>; }>());
+
+export const openTaskDialog = createAction(`${prefix} Open Task Dialog`, props<{ id: number; }>());
+
+export const patchTask = createAction(`${prefix} Patch Task`, props<{ id: number; changes: Partial<DisplayInfoDTO>; }>());

apps/sales/src/app/store/branch/task-calendar/task-calendar.effects.ts

@@ -1,7 +1,41 @@
 import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { EISPublicService } from '@swagger/eis';
+import * as actions from './task-calendar.actions';
+import { TaskCalendarFacade } from './task-calendar.facade';
+import { withLatestFrom, switchMap, catchError, map, flatMap } from 'rxjs/operators';
 
 @Injectable()
 export class TaskCalendarEffects {
-    constructor() { }
+  constructor(
+    private actions$: Actions,
+    private taskCalendarFacade: TaskCalendarFacade,
+    private eisPublicService: EISPublicService
+  ) { }
+
+  getTasks$ = createEffect(() => this.actions$.pipe(
+    ofType(actions.getTasks),
+    withLatestFrom(this.taskCalendarFacade.filter$),
+    switchMap(([action, data]) => this.eisPublicService.EISPublicGetDisplayInfosResponse({ data }).pipe(
+      catchError(err => [err])
+    )),
+    map(response => actions.getTasksResponse({ response }))
+  ));
+
+  getTasksResponse$ = createEffect(() => this.actions$.pipe(
+    ofType(actions.getTasksResponse),
+    flatMap(({ response }) => {
+      if (response.ok) {
+        return [actions.setTasks({ tasks: response.body.result })];
+      }
+      return [];
+    })
+  ));
+
+  setFilterOrPatchFilter$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(actions.setFilter, actions.patchFilter),
+      map(() => actions.getTasks())
+    ));
 
 }

apps/sales/src/app/store/branch/task-calendar/task-calendar.facade.ts

@@ -1,7 +1,38 @@
 import { Injectable } from '@angular/core';
+import * as selectors from './task-calendar.selectors';
+import * as actions from './task-calendar.actions';
+import { Store } from '@ngrx/store';
+import { DisplayInfoRequest, DisplayInfoDTO } from '@swagger/eis';
 
 @Injectable({ providedIn: 'root' })
 export class TaskCalendarFacade {
-    constructor() { }
 
-}
+  fetching$ = this.store.select(selectors.selectFetching);
+
+  tasks$ = this.store.select(selectors.selectTasks);
+
+  filter$ = this.store.select(selectors.selectFilters);
+
+  constructor(private store: Store<any>) { }
+
+  getTaskById$(id: number) {
+    return this.store.select(selectors.selectTaskById, id);
+  }
+
+  getTasks() {
+    this.store.dispatch(actions.getTasks());
+  }
+
+  patchTask(id: number, changes: Partial<DisplayInfoDTO>) {
+    this.store.dispatch(actions.patchTask({ id, changes }));
+  }
+
+  setFilter(filter: DisplayInfoRequest) {
+    this.store.dispatch(actions.setFilter({ filter }));
+  }
+
+  patchFilter(filter: Partial<DisplayInfoRequest>) {
+    this.store.dispatch(actions.patchFilter({ filter }));
+  }
+
+}

apps/sales/src/app/store/branch/task-calendar/task-calendar.reducer.ts

@@ -1,7 +1,15 @@
-import { Action, createReducer } from '@ngrx/store';
+import { Action, createReducer, on } from '@ngrx/store';
 import { TaskCalendarState, INITIAL_TASK_CALENDAR_STATE } from './task-calendar.state';
+import * as actions from './task-calendar.actions';
+import { DisplayInfoRequest } from '@swagger/eis';
 
-const _taskCalendarReducer = createReducer<TaskCalendarState>(INITIAL_TASK_CALENDAR_STATE);
+const _taskCalendarReducer = createReducer<TaskCalendarState>(INITIAL_TASK_CALENDAR_STATE,
+  on(actions.getTasks, s => ({ ...s, fetching: true })),
+  on(actions.getTasksResponse, s => ({ ...s, fetching: false })),
+  on(actions.setTasks, (s, a) => ({ ...s, tasks: a.tasks })),
+  on(actions.setFilter, (s, a) => ({ ...s, filter: a.filter })),
+  on(actions.patchFilter, (s, a) => ({ ...s, filter: { ...(s.filter || {} as DisplayInfoRequest), ...a.filter } }))
+);
 
 export function taskCalendarReducer(state: TaskCalendarState, action: Action) {
   return _taskCalendarReducer(state, action);

apps/sales/src/app/store/branch/task-calendar/task-calendar.selectors.ts

@@ -1,4 +1,13 @@
 import { createSelector } from '@ngrx/store';
 import { selectBranchState } from '../branch.selectors';
+import { DisplayInfoDTO } from '@swagger/eis';
 
 export const selectTaskCalendarState = createSelector(selectBranchState, (s) => s.taskCalendar);
+
+export const selectFetching = createSelector(selectTaskCalendarState, s => s.fetching);
+
+export const selectTasks = createSelector(selectTaskCalendarState, s => s.tasks);
+
+export const selectFilters = createSelector(selectTaskCalendarState, s => s.filter);
+
+export const selectTaskById = createSelector(selectTasks, (s: DisplayInfoDTO[], id: number) => s.find(task => task.id === id));

apps/sales/src/app/store/branch/task-calendar/task-calendar.state.ts

@@ -1,3 +1,12 @@
-export interface TaskCalendarState { }
+import { DisplayInfoDTO, DisplayInfoRequest } from '@swagger/eis/lib';
 
-export const INITIAL_TASK_CALENDAR_STATE: TaskCalendarState = {};
+export interface TaskCalendarState {
+  fetching: boolean;
+  tasks: DisplayInfoDTO[],
+  filter?: DisplayInfoRequest;
+}
+
+export const INITIAL_TASK_CALENDAR_STATE: TaskCalendarState = {
+  fetching: false,
+  tasks: [],
+};