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

source/actions/coursefields.actions.ts

-import { COURSEFIELDS_RECEIVED, COURSEFIELDS_SELECTED } from '../constants';
+import { COURSEFIELDS_RECEIVED, COURSEFIELDS_SELECTED_SAVE } from '../constants';
 import { Injectable } from '@angular/core';
 import { NgRedux } from 'ng2-redux';
 import { IAppState } from '../store';
@@ -10,7 +10,7 @@ export class CourseFieldsActions {
     private _ngRedux: NgRedux<IAppState>,
     private _hds: HelperDataService) {}
 
-  getCourseFields = ({ }) => {
+  getCourseFields = () => {
     return this._hds.getCourseFields().then(courseFields => {
       return this._ngRedux.dispatch({
         type: COURSEFIELDS_RECEIVED,
@@ -21,4 +21,13 @@ export class CourseFieldsActions {
     });
   };
 
+  saveCourseFieldsSelected = (courseFieldsSelected) => {
+      return this._ngRedux.dispatch({
+        type: COURSEFIELDS_SELECTED_SAVE,
+        payload: {
+          courseFieldsSelected
+        }
+      });
+  };
+
 }

source/components/student-application-form/course-fields-select.ts

-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Http, Response, RequestOptions, Headers } from '@angular/http';
 import { Observable } from 'rxjs/Rx';
-import {Injectable} from "@angular/core";
-import {CourseFieldsActions} from '../../actions/coursefields.actions';
+import { Injectable } from "@angular/core";
+import { CourseFieldsActions } from '../../actions/coursefields.actions';
 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 {
@@ -20,21 +20,24 @@ import {AppSettings} from '../../app.settings';
     template: `
      <form [formGroup]="formGroup">
         <div formArrayName="formArray">
-            <div *ngIf="courseFields$.length === 0" class="loading">Loading&#8230;</div>
             <div *ngFor="let courseField$ of courseFields$ | async; let i=index">
             <div class="row">
-            <div class="col-md-2 pull-right">
+            <div class="col-md-1">
                 <input type="checkbox" formControlName="{{i}}">
             </div>
-            <div class="col-md-10 pull-left">
+            <div class="col-md-11 pull-left">
                 {{courseField$.name}}
             </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>
-    <pre>{{formGroup.value | json}}</pre>
+<!--    <pre>{{formGroup.value | json}}</pre> -->
   `
 })
 @Injectable() export default class CourseFieldsSelect implements OnInit {
@@ -50,14 +53,18 @@ import {AppSettings} from '../../app.settings';
     };
 
     ngOnInit() {
-        this._cfa.getCourseFields({});
+        this._cfa.getCourseFields();
 
         this.courseFields$ = this._ngRedux.select(state => {
-            console.log("in select");
             for (let courseField in state.courseFields) {
                 this.cfs.push(new FormControl('', []));
             }
             return state.courseFields;
-        })
+        });
+
+    }
+
+    saveSelected() {
+        this._cfa.saveCourseFieldsSelected(this.formGroup.value.formArray);
     }
 }

source/constants.ts

 export const COURSEFIELDS_RECEIVED = 'COURSEFIELDS_RECEIVED';
-export const COURSEFIELDS_SELECTED = 'COURSEFIELDS_SELECTED';
+export const COURSEFIELDS_SELECTED_SAVE = 'COURSEFIELDS_SELECTED_SAVE';

source/services/helper-data-service.ts

@@ -17,14 +17,13 @@ export class HelperDataService {
             this.http.get(`${AppSettings.API_ENDPOINT}/coursefields/list`)
             .map(response => <ICourseField[]>response.json())
             .subscribe(data => {
-                console.log(data);
                 resolve(data);
             }, // put the data returned from the server in our variable
             error => {
                 console.log("Error HTTP GET Service"); // in case of failure show this message
                 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); */
         });
     };
 }

source/store/coursefields/coursefields.initial-state.ts

 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>();

source/store/coursefields/coursefields.reducer.ts

-import { List, Record, fromJS } from 'immutable';
-import { ICourseField, ICourseFields, CourseFieldRecord } from './coursefields.types';
+import { ICourseFields, ICourseField } from './coursefields.types';
 import { INITIAL_STATE } from './coursefields.initial-state';
+import { Seq } from 'immutable';
 
 import {
   COURSEFIELDS_RECEIVED,
-  COURSEFIELDS_SELECTED
+  COURSEFIELDS_SELECTED_SAVE
 } from '../../constants';
 
 export function courseFieldsReducer(state: ICourseFields = INITIAL_STATE, action): ICourseFields {
   switch (action.type) {
     case COURSEFIELDS_RECEIVED:
-        return action.payload.courseFields;
-    case COURSEFIELDS_SELECTED: return action.payload.courseFields;
+        let newCourseFields = Array<ICourseField>();
+        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;
   }
 };

source/store/coursefields/coursefields.transformers.ts

-import { List, Map } from 'immutable';
-import { ICourseFields, ICourseField, CourseFieldRecord } from './coursefields.types';
+import { ICourseFields, ICourseField } from './coursefields.types';
 
-export function deimmutifyCourseFields(state: ICourseFields): Object[] {
-  return state.toJS();
-}
+export function deimmutifyCourseFields(state: ICourseFields): ICourseField[] {
+    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) : []);
-}
+} */

source/store/coursefields/coursefields.types.ts

-import { List, Record } from 'immutable';
+import { List } from 'immutable';
 
 export interface ICourseField {
     id: number;
     name: string;
+    selected: boolean;
 }
 
 export type ICourseFields = List<ICourseField>;
 
-export const CourseFieldRecord = Record({
-  id: 1,
-  name: '-',
-});
+/* export const CourseFieldRecord = Record({
+  id: 0,
+  name: '---',
+  selected: 0
+}); */

source/store/coursefields/index.ts

 import { ICourseField, ICourseFields } from './coursefields.types';
 import { courseFieldsReducer } from './coursefields.reducer';
-import { deimmutifyCourseFields, reimmutifyCourseFields } from './coursefields.transformers';
+import { deimmutifyCourseFields } from './coursefields.transformers';
 
 export {
   ICourseField,
   ICourseFields,
   courseFieldsReducer,
   deimmutifyCourseFields,
-  reimmutifyCourseFields,
 };

source/store/index.ts

-import * as persistState from 'redux-localstorage';
+// import * as persistState from 'redux-localstorage';
 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';
 
 export {
@@ -8,7 +8,6 @@ export {
   rootReducer,
   ICourseField,
   ICourseFields,
-  reimmutify,
 };
 
 export const middleware = [
@@ -19,12 +18,11 @@ export const middleware = [
   })
 ];
 
-export const enhancers = [
+/* export const enhancers = [
   persistState(
     '', {
       key: 'e-epal',
-//      serialize: s => JSON.stringify(deimmutify(s)),
-      serialize: s => JSON.stringify(s),
+      serialize: s => JSON.stringify(deimmutify(s)),
       deserialize: s => reimmutify(JSON.parse(s)),
   })
-];
+]; */

source/store/store.ts

@@ -15,13 +15,13 @@ export const rootReducer = combineReducers<IAppState>({
 
 export function deimmutify(state: IAppState): Object {
   return {
-//    courseFields: courseFields.deimmutifyCourseFields(state.courseFields),
-    courseFields: state.courseFields,
+    courseFields: courseFields.deimmutifyCourseFields(state.courseFields),
   };
 }
 
-export function reimmutify(plain): IAppState {
+/* export function reimmutify(plain): IAppState {
   return plain ? {
     courseFields: courseFields.reimmutifyCourseFields(plain.courseFields),
+    courseFieldsSelected: courseFieldsSelected.reimmutifyCourseFieldsSelected(plain.courseFieldsSelected),
   } : {};
-}
+} */