fix in adding and editing markers
[u/erikhf/frm.git] / src / components / sidebar / sidebar.ts
CommitLineData
fa052229 1import {Component, NgFor, NgIf, EventEmitter, NgModel, Control, ControlGroup, ControlArray, Validators, FormBuilder, CORE_DIRECTIVES,FORM_DIRECTIVES} from 'angular2/angular2';
9bdb78d0 2import {Http, Headers} from 'angular2/http';
ebe03648 3
f43aafd4 4declare var zone:Zone;
ebe03648
EHF
5
6@Component({
7 selector: 'mou-sidebar',
9bdb78d0 8 directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, NgFor, NgModel, NgIf],
f43aafd4 9 events: ['tempmarker', 'updateorg'],
87bd5039 10 templateUrl: './components/sidebar/sidebar.html'
ebe03648 11})
8c91a910 12
ebe03648 13export class Sidebar {
9bdb78d0 14 http:Http;
f43aafd4 15 newObject:boolean;
9bdb78d0 16 editmode:boolean;
f43aafd4
EHF
17 active:boolean;
18 coordinatePoint:boolean;
19
20 groupSets:Array<any> = [];
21 groupsDoubleArray:any[][] = [];
22
23 id:Control = new Control("");
24 name:Control = new Control("", Validators.required);
25 shortName:Control = new Control("", Validators.required);
26 description:Control = new Control("");
27 code:Control = new Control("");
28 openingDate:Control = new Control("", Validators.required);
29 closedDate:Control = new Control("");
30 url:Control = new Control("");
31 lat:Control = new Control("");
32 lng:Control = new Control("");
33 parent:Control = new Control("");
34 contactPerson:Control = new Control("");
35 address:Control = new Control("");
36 email:Control = new Control("");
37 phoneNumber:Control = new Control("");
38 exitButton:any;
39 featureType:Control = new Control("");
40 coordinates:Control = new Control("");
41 ctrlGroups:Array<Control> = [new Control('')];
42 groupsArray:ControlArray = new ControlArray(this.ctrlGroups);
43
44
45 form:ControlGroup = new ControlGroup({
5539d095
EHF
46 organisationUnitGroups: this.groupsArray,
47 id: this.id,
48 name: this.name,
49 shortName: this.shortName,
50 description: this.description,
51 code: this.code,
52 openingDate: this.openingDate,
53 closedDate: this.closedDate,
54 url: this.url,
55 lat: this.lat,
56 lng: this.lng,
57 parent: this.parent,
58 contactPerson: this.contactPerson,
59 address: this.address,
60 email: this.email,
61 phoneNumber: this.phoneNumber,
62 featureType: this.featureType,
63 coordinates: this.coordinates
64 });
8c91a910 65
f43aafd4 66 constructor(http:Http, fb:FormBuilder) {
ebe03648 67 this.http = http;
9ce2e2a9 68 this.editmode = false;
ebaf2f58 69 this.active = false;
59ab0e7a 70 this.coordinatePoint = false;
fa052229 71 this.tempmarker = new EventEmitter();
1e22a4ed 72 this.updateorg = new EventEmitter();
1b806970 73 this.exitButton = document.getElementById("slideout")
fa052229 74 let instance = this;
b4020e59
EHF
75
76 // listener for value change in coordinate input field
fa052229
EHF
77 this.lat.valueChanges.observer({
78 next: (value) => {
f43aafd4 79 if (instance.lng.value && value) {
fa052229
EHF
80 let pos = {lat: value, lng: instance.lng.value};
81 this.tempmarker.next(pos);
82 }
83 }
84 });
85 this.lng.valueChanges.observer({
86 next: (value) => {
f43aafd4 87 if (instance.lat.value && value) {
fa052229
EHF
88 let pos = {lat: instance.lat.value, lng: value};
89 this.tempmarker.next(pos);
90 }
91 }
92 });
5539d095 93
b4020e59 94 // find all orgUnitSets
5539d095 95 this.findOrgUnitSets();
c1cf798d
EHF
96 }
97
b4020e59 98 // this method is called when the sidebar should update its content with new org unit
9bdb78d0 99 update(orgunitId) {
ebaf2f58 100 this.active = true;
8c91a910 101 this.newObject = false;
c1cf798d
EHF
102 this.http.get(dhisAPI + "/api/organisationUnits/" + orgunitId)
103 .map(res => res.json())
8c91a910 104 .subscribe(res => this.updateValues(res))
ebe03648 105 }
9ce2e2a9 106
b4020e59 107 // update form values with new information from http get result
f43aafd4 108 updateValues(res) {
59ab0e7a 109
b4020e59 110 // update the form controls with data from incoming json object
f43aafd4
EHF
111 for (control in this.form.controls) {
112 if (this.form.controls[control] instanceof ControlArray) {
5539d095
EHF
113 console.log("nothing to do here");
114 }
f43aafd4 115 else if (res[control] !== undefined) {
8c91a910
EHF
116 this.form.controls[control].updateValue(res[control]);
117 }
118 else
119 this.form.controls[control].updateValue("");
5539d095 120
8c91a910 121 }
59ab0e7a 122
531b0170 123 // Date fix:
f43aafd4
EHF
124 if (res["openingDate"]) {
125 this.form.controls["openingDate"].updateValue((new Date(res["openingDate"].substring(0, 10))).toISOString().substring(0, 10));
531b0170 126 }
f43aafd4
EHF
127 if (res["closedDate"]) {
128 this.form.controls["closedDate"].updateValue((new Date(res["closedDate"].substring(0, 10))).toISOString().substring(0, 10));
531b0170
EHF
129 }
130
b4020e59
EHF
131 // we're only interested in coordinates if it's a featureType point. Since we want to use two different input fields for lat and lang (and the api uses a single object for both)
132 // we need to have a separate data structure for coordinates, and update them manually
f43aafd4 133 if (res.featureType === "POINT") {
59ab0e7a
EHF
134 this.coordinatePoint = true;
135 let coord = new Object();
136 coord = JSON.parse(res["coordinates"]);
1e22a4ed
EHF
137 this.form.controls.lat.updateValue(coord[1]);
138 this.form.controls.lng.updateValue(coord[0]);
59ab0e7a 139 }
f43aafd4 140 else {
59ab0e7a
EHF
141 this.coordinatePoint = false;
142 }
5539d095 143
b4020e59 144 // Update organisationUnitGroups with correct values from api
f43aafd4
EHF
145 for (var i = 0; i < this.groupsDoubleArray.length; i++) {
146 for (var j = 0; j < this.groupsDoubleArray[i].length; j++) {
147 for (group in res.organisationUnitGroups) {
148 if (res.organisationUnitGroups[group].id == this.groupsDoubleArray[i][j].id) {
5539d095
EHF
149 this.form.controls.organisationUnitGroups.controls[i].updateValue(this.groupsDoubleArray[i][j].name);
150 }
151 }
152 }
153 }
8c91a910 154 }
59ab0e7a 155
b4020e59 156 // called on form submit
9bdb78d0
EHF
157 onSubmit() {
158 this.editmode = false;
159
160 let headers = new Headers();
161 headers.append('Accept', 'application/json');
59ab0e7a 162
9bdb78d0
EHF
163 headers.append('Content-Type', 'application/json');
164
b4020e59 165
8c91a910
EHF
166 let jsonObject = this.form.value;
167
b4020e59 168 // remove empty fields from the form object, no need to send empty values to the api
f43aafd4
EHF
169 $.each(jsonObject, function (key, value) {
170 if (value === "" || value === null) {
8c91a910
EHF
171 delete jsonObject[key];
172 }
173 });
174
b4020e59 175 // we were unable to find a way to associate a new (or existing) organisation unit with one or more organisationUnitGroups, so we're removing the data before posting to API
f43aafd4 176 $.each(jsonObject.organisationUnitGroups, function (key, value) {
1e22a4ed 177// if( value === "" || value === null){
f43aafd4
EHF
178 delete jsonObject.organisationUnitGroups[key];
179 // } else {
180 // jsonObject.organisationUnitGroups[key].id = value;
181 // }
5539d095
EHF
182 });
183
531b0170
EHF
184 jsonObject.openingDate = (new Date(this.form.value.openingDate)).toISOString();
185
f43aafd4 186 if (this.form.value.closedDate) {
531b0170
EHF
187 jsonObject.closedDate = (new Date(this.form.value.closedDate)).toISOString();
188 }
8c91a910 189
f43aafd4
EHF
190 if (this.coordinatePoint) {
191 jsonObject.featureType = "POINT";
192 jsonObject.coordinates = "[" + this.form.controls.lng.value + "," + this.form.controls.lat.value + "]";
b4020e59 193 }
8c91a910 194
b4020e59 195 // POST if the object is new, PUT if it's an update to an existing orgUnit
8c91a910
EHF
196 if (this.newObject) {
197 jsonObject.parent = {};
198 jsonObject.parent.id = this.form.controls.parent.value;
b4020e59 199
8c91a910
EHF
200 delete jsonObject["lat"];
201 delete jsonObject["lng"];
202 this.http.post(dhisAPI + "/api/organisationUnits/", JSON.stringify(jsonObject), {
9bdb78d0
EHF
203 headers: headers
204 })
205 .map(res => res.json())
1e22a4ed 206 .subscribe(res => this.emitNewUpdatedObject(res));
f43aafd4 207 } else {
59ab0e7a
EHF
208 this.http.put(dhisAPI + "/api/organisationUnits/" + this.form.controls.id.value, JSON.stringify(jsonObject), {
209 headers: headers
210 })
211 .map(res => res.json())
f09cdf19 212 .subscribe(res => this.emitNewUpdatedObject(res));
9bdb78d0 213 }
1e22a4ed
EHF
214 }
215
f43aafd4
EHF
216 // emit an event that the current orgUnit has been updated (useful for map component)
217 emitNewUpdatedObject(obj) {
1e22a4ed 218 this.updateorg.next(obj.response.lastImported);
9ce2e2a9 219 }
57c243b6 220
f43aafd4
EHF
221 // cancel editing orgUnit
222 cancel() {
57c243b6 223 this.editmode = false;
1e22a4ed 224 this.tempmarker.next(null);
57c243b6 225 }
ebaf2f58 226
f43aafd4
EHF
227 // Prepare sidebar for adding new object. Receiving location and parent for the new orgUnit
228 add(data) {
59ab0e7a 229 this.coordinatePoint = true;
f43aafd4 230 this.newObject = true;
59ab0e7a 231 this.active = true;
ebaf2f58 232 this.editmode = true;
8c91a910 233
f43aafd4
EHF
234 for (control in this.form.controls) {
235 if (!(this.form.controls[control] instanceof ControlArray))
5539d095 236 this.form.controls[control].updateValue("");
fa052229
EHF
237 }
238
8c91a910
EHF
239 this.form.controls.lat.updateValue(data.location.lat);
240 this.form.controls.lng.updateValue(data.location.lng);
f09cdf19 241 this.form.controls.featureType.updateValue("POINT");
8c91a910
EHF
242 this.form.controls.parent.updateValue(data.parent);
243
ebaf2f58 244 }
5539d095 245
f43aafd4
EHF
246 // dismiss sidebar
247 exit() {
1b806970
YF
248 this.active = false;
249 }
3012b771 250
f43aafd4
EHF
251 // dynamically find all orgUnitSets for populating input selects
252 findOrgUnitSets() {
5539d095
EHF
253 let instance = this;
254 this.http.get(dhisAPI + "/api/organisationUnitGroupSets?paging=false")
255 .map(res => res.json())
256 .map(res => res.organisationUnitGroupSets)
257 .subscribe(res => this.addOrgUnitSets(instance, res))
258 }
259
f43aafd4
EHF
260 // adding the orgUnitSets from the api
261 addOrgUnitSets(instance, res) {
cad70644 262 //delete instance.ctrlGroups[0];
f43aafd4 263 for (group in res) {
5539d095
EHF
264 instance.groupsArray.push(new Control(''));
265 instance.groupSets.push(res[group]);
266
267 this.http.get(dhisAPI + "/api/organisationUnitGroupSets/" + res[group].id)
268 .map(res => res.json())
269 .map(res => res.organisationUnitGroups)
270 .subscribe(res => this.addOrgUnitGroup(instance, res))
271
5539d095 272 }
5539d095
EHF
273 }
274
f43aafd4
EHF
275 // add orgUnitGroup as option to input selects
276 addOrgUnitGroup(instance, res) {
277 let ar:Array<any> = [];
278 for (group in res) {
5539d095
EHF
279 ar.push(res[group]);
280 }
281 instance.groupsDoubleArray.push(ar);
5539d095 282 }
ebe03648
EHF
283}
284