add-internal-services.component.ts 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. import { InternalSerService } from './../../../shared/internal-ser.service';
  2. import { AuthServiceService } from './../../../shared/auth-service.service';
  3. import { ActivatedRoute, Params } from '@angular/router';
  4. import { Subscription, empty } from 'rxjs';
  5. import { Location } from '@angular/common';
  6. import { HospitalService } from './../../../shared/hospital.service';
  7. import { FormGroup,FormControl, Validators, FormArray, FormBuilder } from '@angular/forms';
  8. import { Component, OnInit, OnDestroy } from '@angular/core';
  9. import { NgxSpinnerService } from 'ngx-spinner';
  10. import { ToastrService } from 'ngx-toastr';
  11. @Component({
  12. selector: 'app-add-internal-services',
  13. templateUrl: './add-internal-services.component.html',
  14. styleUrls: ['./add-internal-services.component.css']
  15. })
  16. export class AddInternalServicesComponent implements OnInit {
  17. constructor(private formBuilder: FormBuilder,
  18. private internalServices: InternalSerService,
  19. private route: ActivatedRoute,
  20. private spinner: NgxSpinnerService,
  21. private toastr: ToastrService,
  22. private authSer: AuthServiceService,
  23. private location: Location) { }
  24. addInternalForm: FormGroup;
  25. fields: FormArray;
  26. typeMode: boolean = false;
  27. typePageEdit: string = '';
  28. typeCreatePage: string = '';
  29. typeLink = 'إنشاء جديد';
  30. pageId: number;
  31. editSubscription: Subscription;
  32. typeCreateSubscription: Subscription;
  33. fieldsData = [];
  34. imageBase64 = [];
  35. photoType: string = '';
  36. checkChangeImage = [false];
  37. showOpenFile = [true];
  38. showCloseFile = [false];
  39. urlImg = ['../../assets/image/avatar.png'];
  40. i = 0;
  41. ngOnInit() {
  42. //show / hide notification search in header
  43. this.authSer.notificationLogin = true;
  44. this.authSer.showSearchHeader = false;
  45. this.authSer.showHeaderLogin = false;
  46. this.authSer.showHeaderDashBoard = true;
  47. //show / hide notification search in header
  48. this.authSer.notificationLogin = true;
  49. this.authSer.showSearchHeader = false;
  50. this.authSer.showHeaderLogin = false;
  51. this.authSer.showHeaderDashBoard = true;
  52. this.authSer.showDashboardHeader = true;
  53. this.authSer.internalHeader = false;
  54. //init form data
  55. this.addInternalForm = new FormGroup({
  56. name: new FormControl(null , Validators.required),
  57. name_en: new FormControl(null , Validators.required),
  58. status: new FormControl(null, Validators.required),
  59. fields: this.formBuilder.array([ this.createItem() ])
  60. });
  61. //edit mode
  62. this.editSubscription = this.route.params.subscribe(
  63. (params: Params) => {
  64. if(params['typeInternalMode'] == 'edit') {
  65. this.typeLink = 'تعديل';
  66. this.imageBase64 = [];
  67. //redifine form data
  68. this.addInternalForm = new FormGroup({
  69. name: new FormControl(null , Validators.required),
  70. name_en: new FormControl(null , Validators.required),
  71. status: new FormControl(null, Validators.required),
  72. fields: this.formBuilder.array([])
  73. });
  74. this.spinner.show();
  75. this.typeMode = true;
  76. this.pageId = params['editInternalId'];
  77. this.internalServices.getInternalData(this.pageId).subscribe(
  78. (responce) => {
  79. console.log('responcce', responce);
  80. this.fieldsData = responce['internal_service'].fields;
  81. console.log(this.fieldsData);
  82. this.addInternalForm.patchValue({
  83. name: responce['internal_service'].name,
  84. name_en: responce['internal_service'].name_en,
  85. status: responce['internal_service'].status,
  86. });
  87. this.fields = this.addInternalForm.get('fields') as FormArray;
  88. for(let i = 0; i < this.fieldsData.length; i++) {
  89. this.fields.push(
  90. this.formBuilder.group({
  91. name: this.fieldsData[i].name,
  92. name_en: this.fieldsData[i].name_en,
  93. link: this.fieldsData[i].link,
  94. apperance: this.fieldsData[i].apperance,
  95. status: this.fieldsData[i].status,
  96. })
  97. )
  98. }
  99. for(let i=0; i<this.fieldsData.length; i++) {
  100. this.urlImg[i] = this.fieldsData[i].photo ? this.authSer.pathImg + this.fieldsData[i].photo : '../../assets/image/avatar.png';
  101. this.showCloseFile[i] = true;
  102. this.showOpenFile[i] = false;
  103. this.checkChangeImage[i] = false;
  104. }
  105. this.spinner.hide();
  106. },
  107. (error) => {
  108. console.log(error);
  109. }
  110. );
  111. } else{
  112. this.typeLink = 'إنشاء جديد';
  113. }
  114. }
  115. );
  116. };
  117. //to make at least on element in form array
  118. createItem(): FormGroup {
  119. return this.formBuilder.group({
  120. name: '',
  121. name_en: '',
  122. photo: '',
  123. link: '',
  124. apperance: '',
  125. status: '',
  126. });
  127. };
  128. //add more title
  129. onAddTitle(i) {
  130. this.fields = this.addInternalForm.get('fields') as FormArray;
  131. this.fields.push(this.createItem());
  132. this.imageBase64[this.i] = [{
  133. photo : "",
  134. photo_type: "",
  135. }];
  136. this.i++;
  137. console.log(this.imageBase64);
  138. this.urlImg.push('../../assets/image/avatar.png');
  139. this.showOpenFile.push(true);
  140. this.showCloseFile.push(false);
  141. this.checkChangeImage.push(false);
  142. }
  143. //remove from array form
  144. removeTitle(index: number) {
  145. this.fields = this.addInternalForm.get('fields') as FormArray;
  146. this.fields.removeAt(index);
  147. }
  148. onFileChanges(event,i) {
  149. console.log(event);
  150. this.photoType = event[0].type.split('/');
  151. console.log(i);
  152. this.imageBase64[i]={
  153. photo : event[0].base64,
  154. photo_type: this.photoType[1],
  155. };
  156. console.log(this.imageBase64);
  157. this.checkChangeImage[i] = true;
  158. this.showCloseFile[i] = true;
  159. this.showOpenFile[i] = false;
  160. }
  161. //to upload url to view
  162. getUrl(event,i) {
  163. if (event.target.files && event.target.files[0]) {
  164. var reader = new FileReader();
  165. reader.readAsDataURL(event.target.files[0]); // read file as data url
  166. reader.onload = (event) => { // called once readAsDataURL is completed
  167. this.urlImg[i] = event.target['result'];
  168. console.log(this.urlImg[i]);
  169. }
  170. }
  171. }
  172. //to close and upload photo
  173. closePhoto(i) {
  174. this.showCloseFile[i] = false;
  175. this.showOpenFile[i] = true;
  176. this.urlImg[i] = '../../assets/image/avatar.png';
  177. this.imageBase64[i] = {
  178. photo: "",
  179. photo_type: "",
  180. }
  181. console.log(this.imageBase64);
  182. }
  183. //submitted form
  184. onSubmitted() {
  185. const formInternalData = this.addInternalForm.value;
  186. for(let i = 0; i< formInternalData['fields'].length; i++) {
  187. for(let j = 0; j < this.imageBase64.length; j++) {
  188. formInternalData['fields'][i].photo = this.imageBase64[i].photo;
  189. formInternalData['fields'][i].photo_type = this.imageBase64[i].photo_type;
  190. }
  191. }
  192. console.log(formInternalData);
  193. if(formInternalData['fields'].length == 0) {
  194. this.toastr.warning('أدخل عنوان ووصف واحد علي الاقل !');
  195. } else if(formInternalData['fields'][0].name == '' || formInternalData['fields'][0].apperance == '' || formInternalData['fields'][0].status == '') {
  196. this.toastr.warning('أدخل عنوان ووصف واحد علي الاقل !');
  197. } else {
  198. this.internalServices.addInternal(formInternalData).subscribe(
  199. (responce) => {
  200. console.log(responce);
  201. this.toastr.success('تم الاضافه بنجاح');
  202. this.location.back();
  203. },
  204. (error) => {
  205. console.log(error);
  206. }
  207. );
  208. }
  209. if(this.typeMode) {
  210. this.internalServices.editInternal(this.pageId, formInternalData).subscribe(
  211. (responce) => {
  212. console.log(responce);
  213. this.toastr.success('تم التعديل بنجاح ');
  214. }, (error) => {
  215. console.log(error);
  216. this.toastr.error('فشل التعديل !');
  217. }
  218. );
  219. }
  220. };
  221. ngOnDestroy() {
  222. this.editSubscription.unsubscribe();
  223. }
  224. }