Course Fields Selections saved in the same store structure. Immutify De-Immutify issues fixed

parent 9b32b840
import { COURSEFIELDS_RECEIVED, COURSEFIELDS_SELECTED } from '../constants'; import { COURSEFIELDS_RECEIVED, COURSEFIELDS_SELECTED_SAVE } from '../constants';
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { NgRedux } from 'ng2-redux'; import { NgRedux } from 'ng2-redux';
import { IAppState } from '../store'; import { IAppState } from '../store';
...@@ -10,7 +10,7 @@ export class CourseFieldsActions { ...@@ -10,7 +10,7 @@ export class CourseFieldsActions {
private _ngRedux: NgRedux<IAppState>, private _ngRedux: NgRedux<IAppState>,
private _hds: HelperDataService) {} private _hds: HelperDataService) {}
getCourseFields = ({ }) => { getCourseFields = () => {
return this._hds.getCourseFields().then(courseFields => { return this._hds.getCourseFields().then(courseFields => {
return this._ngRedux.dispatch({ return this._ngRedux.dispatch({
type: COURSEFIELDS_RECEIVED, type: COURSEFIELDS_RECEIVED,
...@@ -21,4 +21,13 @@ export class CourseFieldsActions { ...@@ -21,4 +21,13 @@ export class CourseFieldsActions {
}); });
}; };
saveCourseFieldsSelected = (courseFieldsSelected) => {
return this._ngRedux.dispatch({
type: COURSEFIELDS_SELECTED_SAVE,
payload: {
courseFieldsSelected
}
});
};
} }
import {Component, OnInit} from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http'; import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx'; import { Observable } from 'rxjs/Rx';
import {Injectable} from "@angular/core"; import { Injectable } from "@angular/core";
import {CourseFieldsActions} from '../../actions/coursefields.actions'; import { CourseFieldsActions } from '../../actions/coursefields.actions';
import { DevToolsExtension, NgRedux, select } from 'ng2-redux'; import { DevToolsExtension, NgRedux, select } from 'ng2-redux';
import { ICourseField, ICourseFields } from '../../store/coursefields/coursefields.types'; import { ICourseFields } from '../../store/coursefields/coursefields.types';
import { IAppState } from '../../store/store'; import { IAppState } from '../../store/store';
import { import {
...@@ -20,21 +20,24 @@ import {AppSettings} from '../../app.settings'; ...@@ -20,21 +20,24 @@ import {AppSettings} from '../../app.settings';
template: ` template: `
<form [formGroup]="formGroup"> <form [formGroup]="formGroup">
<div formArrayName="formArray"> <div formArrayName="formArray">
<div *ngIf="courseFields$.length === 0" class="loading">Loading&#8230;</div>
<div *ngFor="let courseField$ of courseFields$ | async; let i=index"> <div *ngFor="let courseField$ of courseFields$ | async; let i=index">
<div class="row"> <div class="row">
<div class="col-md-2 pull-right"> <div class="col-md-1">
<input type="checkbox" formControlName="{{i}}"> <input type="checkbox" formControlName="{{i}}">
</div> </div>
<div class="col-md-10 pull-left"> <div class="col-md-11 pull-left">
{{courseField$.name}} {{courseField$.name}}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- <button (click)="addInput()">Add Input</button> --> <div class="row">
<div class="col-md-2 col-md-offset-5">
<button class="btn-primary btn-lg pull-center" (click)="saveSelected()">Συνέχεια</button>
</div>
</div>
</form> </form>
<pre>{{formGroup.value | json}}</pre> <!-- <pre>{{formGroup.value | json}}</pre> -->
` `
}) })
@Injectable() export default class CourseFieldsSelect implements OnInit { @Injectable() export default class CourseFieldsSelect implements OnInit {
...@@ -50,14 +53,18 @@ import {AppSettings} from '../../app.settings'; ...@@ -50,14 +53,18 @@ import {AppSettings} from '../../app.settings';
}; };
ngOnInit() { ngOnInit() {
this._cfa.getCourseFields({}); this._cfa.getCourseFields();
this.courseFields$ = this._ngRedux.select(state => { this.courseFields$ = this._ngRedux.select(state => {
console.log("in select");
for (let courseField in state.courseFields) { for (let courseField in state.courseFields) {
this.cfs.push(new FormControl('', [])); this.cfs.push(new FormControl('', []));
} }
return state.courseFields; return state.courseFields;
}) });
}
saveSelected() {
this._cfa.saveCourseFieldsSelected(this.formGroup.value.formArray);
} }
} }
export const COURSEFIELDS_RECEIVED = 'COURSEFIELDS_RECEIVED'; export const COURSEFIELDS_RECEIVED = 'COURSEFIELDS_RECEIVED';
export const COURSEFIELDS_SELECTED = 'COURSEFIELDS_SELECTED'; export const COURSEFIELDS_SELECTED_SAVE = 'COURSEFIELDS_SELECTED_SAVE';
...@@ -17,14 +17,13 @@ export class HelperDataService { ...@@ -17,14 +17,13 @@ export class HelperDataService {
this.http.get(`${AppSettings.API_ENDPOINT}/coursefields/list`) this.http.get(`${AppSettings.API_ENDPOINT}/coursefields/list`)
.map(response => <ICourseField[]>response.json()) .map(response => <ICourseField[]>response.json())
.subscribe(data => { .subscribe(data => {
console.log(data);
resolve(data); resolve(data);
}, // put the data returned from the server in our variable }, // put the data returned from the server in our variable
error => { error => {
console.log("Error HTTP GET Service"); // in case of failure show this message console.log("Error HTTP GET Service"); // in case of failure show this message
reject("Error HTTP GET Service"); reject("Error HTTP GET Service");
}, },
() => console.log("this.courseFields"));//run this code in all cases); */ () => console.log("Course Fields Received"));//run this code in all cases); */
}); });
}; };
} }
import { List } from 'immutable'; import { List } from 'immutable';
import { ICourseField, CourseFieldRecord } from './coursefields.types'; import { ICourseField } from './coursefields.types';
export const INITIAL_STATE = List<ICourseField>([{id: 1, name: '-'}]); // export const INITIAL_STATE = List<ICourseField>([new CourseFieldRecord({})]);
export const INITIAL_STATE = List<ICourseField>();
import { List, Record, fromJS } from 'immutable'; import { ICourseFields, ICourseField } from './coursefields.types';
import { ICourseField, ICourseFields, CourseFieldRecord } from './coursefields.types';
import { INITIAL_STATE } from './coursefields.initial-state'; import { INITIAL_STATE } from './coursefields.initial-state';
import { Seq } from 'immutable';
import { import {
COURSEFIELDS_RECEIVED, COURSEFIELDS_RECEIVED,
COURSEFIELDS_SELECTED COURSEFIELDS_SELECTED_SAVE
} from '../../constants'; } from '../../constants';
export function courseFieldsReducer(state: ICourseFields = INITIAL_STATE, action): ICourseFields { export function courseFieldsReducer(state: ICourseFields = INITIAL_STATE, action): ICourseFields {
switch (action.type) { switch (action.type) {
case COURSEFIELDS_RECEIVED: case COURSEFIELDS_RECEIVED:
return action.payload.courseFields; let newCourseFields = Array<ICourseField>();
case COURSEFIELDS_SELECTED: return action.payload.courseFields; let i=0;
action.payload.courseFields.forEach(courseField => {
newCourseFields.push(<ICourseField>{id: courseField.id, name: courseField.name, selected: 0});
i++;
});
return Seq(newCourseFields).map(n => n).toList();
case COURSEFIELDS_SELECTED_SAVE:
let selectedCourseFields = Array<ICourseField>();
let ind=0;
state.forEach(courseField => {
selectedCourseFields.push(<ICourseField>{id: courseField.id, name: courseField.name, selected: action.payload.courseFieldsSelected[ind]});
ind++;
});
return Seq(selectedCourseFields).map(n => n).toList();
default: return state; default: return state;
} }
}; };
import { List, Map } from 'immutable'; import { ICourseFields, ICourseField } from './coursefields.types';
import { ICourseFields, ICourseField, CourseFieldRecord } from './coursefields.types';
export function deimmutifyCourseFields(state: ICourseFields): Object[] { export function deimmutifyCourseFields(state: ICourseFields): ICourseField[] {
return state.toJS(); let fetchedCourseFields = new Array();
} state.forEach(courseField => {
fetchedCourseFields.push(<ICourseField>{id: courseField.id, name: courseField.name, selected: courseField.selected});
});
return fetchedCourseFields;
};
export function reimmutifyCourseFields(plain): ICourseFields { /* export function reimmutifyCourseFields(plain): ICourseFields {
return List<ICourseField>(plain ? plain.map(CourseFieldRecord) : []); return List<ICourseField>(plain ? plain.map(CourseFieldRecord) : []);
} } */
import { List, Record } from 'immutable'; import { List } from 'immutable';
export interface ICourseField { export interface ICourseField {
id: number; id: number;
name: string; name: string;
selected: boolean;
} }
export type ICourseFields = List<ICourseField>; export type ICourseFields = List<ICourseField>;
export const CourseFieldRecord = Record({ /* export const CourseFieldRecord = Record({
id: 1, id: 0,
name: '-', name: '---',
}); selected: 0
}); */
import { ICourseField, ICourseFields } from './coursefields.types'; import { ICourseField, ICourseFields } from './coursefields.types';
import { courseFieldsReducer } from './coursefields.reducer'; import { courseFieldsReducer } from './coursefields.reducer';
import { deimmutifyCourseFields, reimmutifyCourseFields } from './coursefields.transformers'; import { deimmutifyCourseFields } from './coursefields.transformers';
export { export {
ICourseField, ICourseField,
ICourseFields, ICourseFields,
courseFieldsReducer, courseFieldsReducer,
deimmutifyCourseFields, deimmutifyCourseFields,
reimmutifyCourseFields,
}; };
import * as persistState from 'redux-localstorage'; // import * as persistState from 'redux-localstorage';
import * as createLogger from 'redux-logger'; import * as createLogger from 'redux-logger';
import { IAppState, rootReducer, deimmutify, reimmutify } from './store'; import { IAppState, rootReducer, deimmutify } from './store';
import { ICourseField, ICourseFields } from './coursefields/coursefields.types'; import { ICourseField, ICourseFields } from './coursefields/coursefields.types';
export { export {
...@@ -8,7 +8,6 @@ export { ...@@ -8,7 +8,6 @@ export {
rootReducer, rootReducer,
ICourseField, ICourseField,
ICourseFields, ICourseFields,
reimmutify,
}; };
export const middleware = [ export const middleware = [
...@@ -19,12 +18,11 @@ export const middleware = [ ...@@ -19,12 +18,11 @@ export const middleware = [
}) })
]; ];
export const enhancers = [ /* export const enhancers = [
persistState( persistState(
'', { '', {
key: 'e-epal', key: 'e-epal',
// serialize: s => JSON.stringify(deimmutify(s)), serialize: s => JSON.stringify(deimmutify(s)),
serialize: s => JSON.stringify(s),
deserialize: s => reimmutify(JSON.parse(s)), deserialize: s => reimmutify(JSON.parse(s)),
}) })
]; ]; */
...@@ -15,13 +15,13 @@ export const rootReducer = combineReducers<IAppState>({ ...@@ -15,13 +15,13 @@ export const rootReducer = combineReducers<IAppState>({
export function deimmutify(state: IAppState): Object { export function deimmutify(state: IAppState): Object {
return { return {
// courseFields: courseFields.deimmutifyCourseFields(state.courseFields), courseFields: courseFields.deimmutifyCourseFields(state.courseFields),
courseFields: state.courseFields,
}; };
} }
export function reimmutify(plain): IAppState { /* export function reimmutify(plain): IAppState {
return plain ? { return plain ? {
courseFields: courseFields.reimmutifyCourseFields(plain.courseFields), courseFields: courseFields.reimmutifyCourseFields(plain.courseFields),
courseFieldsSelected: courseFieldsSelected.reimmutifyCourseFieldsSelected(plain.courseFieldsSelected),
} : {}; } : {};
} } */
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment