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 { 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
}
});
};
}
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);
}
}
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 {
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); */
});
};
}
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 { 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;
}
};
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) : []);
}
} */
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
}); */
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,
};
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)),
})
];
]; */
......@@ -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),
} : {};
}
} */
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