add-internal-services.component.ts 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  1. import { HttpClient } from '@angular/common/http';
  2. import { InternalSerService } from './../../../shared/internal-ser.service';
  3. import { AuthServiceService } from './../../../shared/auth-service.service';
  4. import { ActivatedRoute, Params } from '@angular/router';
  5. import { Subscription, empty } from 'rxjs';
  6. import { Location } from '@angular/common';
  7. import { HospitalService } from './../../../shared/hospital.service';
  8. import { FormGroup,FormControl, Validators, FormArray, FormBuilder } from '@angular/forms';
  9. import { Component, OnInit, OnDestroy } from '@angular/core';
  10. import { NgxSpinnerService } from 'ngx-spinner';
  11. import { ToastrService } from 'ngx-toastr';
  12. @Component({
  13. selector: 'app-add-internal-services',
  14. templateUrl: './add-internal-services.component.html',
  15. styleUrls: ['./add-internal-services.component.css']
  16. })
  17. export class AddInternalServicesComponent implements OnInit {
  18. constructor(private formBuilder: FormBuilder,
  19. private internalServices: InternalSerService,
  20. private route: ActivatedRoute,
  21. private spinner: NgxSpinnerService,
  22. private toastr: ToastrService,
  23. private authSer: AuthServiceService,
  24. private http: HttpClient,
  25. private location: Location) { }
  26. addInternalForm: FormGroup; //form group
  27. fields: FormArray; //form array fields inside form group
  28. typeMode: boolean = false; //to check edit or create
  29. //typePageEdit: string = '';
  30. //typeCreatePage: string = '';
  31. typeLink = 'إنشاء جديد'; //type path text create or edit
  32. pageId: number; //pageId for edit
  33. editSubscription: Subscription; //subscription edit
  34. //editObjectPhoto = [];
  35. lastIndex:number; //to get the last index of checkChangeImage on photo case in edit
  36. fieldsData = []; //to in edit mode collect all fields in this array
  37. internalPages = [];
  38. //array of photos data
  39. imageBase64 = [{
  40. photo: '',
  41. photo_type: '',
  42. }];
  43. checkChangeImage = [false]; //check change for any image if change in edit mode or no
  44. urlImg = ['../../assets/image/avatar.png'];
  45. checkSaveClick:boolean = false; //to make button save disabled when submitted form
  46. checkAdd:boolean = false; //to check on edit or create mode to send id in edit mode
  47. photoType: string = ''; //type of photos
  48. checkValidateField: boolean = false; //to send save if all validation of fields is true
  49. showLink: boolean = false;
  50. ngOnInit() {
  51. //show / hide notification search in header
  52. this.authSer.notificationLogin = true;
  53. this.authSer.showSearchHeader = false;
  54. this.authSer.showHeaderLogin = false;
  55. this.authSer.showHeaderDashBoard = true;
  56. //show / hide notification search in header
  57. this.authSer.notificationLogin = true;
  58. this.authSer.showSearchHeader = false;
  59. this.authSer.showHeaderLogin = false;
  60. this.authSer.showHeaderDashBoard = true;
  61. this.authSer.showDashboardHeader = true;
  62. this.authSer.internalHeader = false;
  63. this.internalServices.getInternalPages().subscribe(
  64. (responce) => {
  65. console.log(responce);
  66. this.internalPages = responce['pages'];
  67. },
  68. (error) => {
  69. console.log(error);
  70. }
  71. )
  72. //init form data
  73. this.addInternalForm = new FormGroup({
  74. name: new FormControl(null , Validators.required),
  75. name_en: new FormControl(null , Validators.required),
  76. status: new FormControl('1', Validators.required),
  77. fields: this.formBuilder.array([ this.createItem() ])
  78. });
  79. //edit mode
  80. this.editSubscription = this.route.params.subscribe(
  81. (params: Params) => {
  82. if(params['typeInternalMode'] == 'edit') {
  83. this.typeLink = 'تعديل';
  84. this.imageBase64 = [];
  85. this.checkChangeImage = [];
  86. //redifine form data
  87. this.addInternalForm = new FormGroup({
  88. name: new FormControl(null , Validators.required),
  89. name_en: new FormControl(null , Validators.required),
  90. status: new FormControl(null, Validators.required),
  91. fields: this.formBuilder.array([])
  92. });
  93. this.spinner.show();
  94. this.typeMode = true;
  95. this.pageId = params['editInternalId'];
  96. this.internalServices.getInternalData(this.pageId).subscribe(
  97. (responce) => {
  98. console.log('responcce', responce);
  99. this.addInternalForm.patchValue({
  100. name: responce['internal_service'].name,
  101. name_en: responce['internal_service'].name_en,
  102. status: responce['internal_service'].status,
  103. });
  104. this.fieldsData = responce['internal_service'].fields;
  105. console.log(this.fieldsData);
  106. this.fields = this.addInternalForm.get('fields') as FormArray;
  107. for(let i = 0; i < this.fieldsData.length; i++) {
  108. this.fields.push(
  109. this.formBuilder.group({
  110. name: this.fieldsData[i].name,
  111. name_en: this.fieldsData[i].name_en,
  112. photo: this.fieldsData[i].photo,
  113. status: this.fieldsData[i].status,
  114. link_type: this.fieldsData[i].link_type,
  115. link: this.fieldsData[i].link,
  116. link2: this.fieldsData[i].link2,
  117. })
  118. )
  119. }
  120. //for loop to append url photo to array to show it
  121. for(let i=0; i<this.fieldsData.length; i++) {
  122. this.urlImg[i] = this.fieldsData[i].photo ? this.authSer.pathImg + this.fieldsData[i].photo : '../../assets/image/avatar.png';
  123. this.checkChangeImage[i] = false;
  124. this.imageBase64[i] = {
  125. photo: this.fieldsData[i].photo ? this.fieldsData[i].photo : '',
  126. photo_type: 'edit'
  127. }
  128. }
  129. //this.lastIndex = this.checkChangeImage.length;
  130. console.log('edit image base 64' , this.imageBase64);
  131. console.log('edit check change image', this.checkChangeImage);
  132. console.log('edit mode url image ' , this.urlImg);
  133. this.spinner.hide();
  134. },
  135. (error) => {
  136. console.log(error);
  137. }
  138. );
  139. } else{
  140. this.typeLink = 'إنشاء جديد';
  141. }
  142. }
  143. );
  144. };
  145. //to make at least on element in form array
  146. createItem(): FormGroup {
  147. if(this.typeMode) {
  148. return this.formBuilder.group({
  149. name: '',
  150. name_en: '',
  151. photo: '',
  152. link: '',
  153. status: '1',
  154. link_type: '',
  155. link2: ''
  156. });
  157. } else {
  158. return this.formBuilder.group({
  159. name: '',
  160. name_en: '',
  161. photo: '',
  162. photo_type: '',
  163. link: '',
  164. status: '1',
  165. link_type: '',
  166. link2: '',
  167. });
  168. }
  169. };
  170. //add more title
  171. onAddTitle() {
  172. this.fields = this.addInternalForm.get('fields') as FormArray;
  173. this.fields.push(this.createItem());
  174. this.urlImg.push('../../assets/image/avatar.png');
  175. this.checkChangeImage.push(false);
  176. //create mode
  177. this.imageBase64.push({
  178. photo: '',
  179. photo_type: '',
  180. });
  181. this.checkAdd = true;
  182. console.log('image base 64',this.imageBase64);
  183. console.log('check change image', this.checkChangeImage);
  184. console.log('url images', this.urlImg);
  185. }
  186. //remove from array form
  187. removeTitle(index: number) {
  188. this.fields = this.addInternalForm.get('fields') as FormArray;
  189. this.fields.removeAt(index);
  190. this.imageBase64.splice(index,1);
  191. this.urlImg.splice(index, 1);
  192. this.checkChangeImage.splice(index, 1);
  193. console.log('image base 64',this.imageBase64);
  194. console.log('check change image', this.checkChangeImage);
  195. console.log('url images', this.urlImg);
  196. }
  197. //upload image
  198. onFileChanges(event,i) {
  199. console.log(event);
  200. alert(i);
  201. this.checkChangeImage[i] = true;
  202. var id_field = ''; //to get id of field from fields
  203. if(this.typeMode) {
  204. //edit mode we have two case if change photo or add new item
  205. if(!this.checkAdd) {
  206. id_field = this.fieldsData[i].id;
  207. //the data of photo user changed it
  208. const dataUploadEdit = {
  209. field_id : id_field,
  210. photo: event[0].base64,
  211. photo_type: event[0].type.split('/')[1].toLowerCase(),
  212. };
  213. //to check validate type of photo and send it to backend
  214. if(dataUploadEdit.photo_type != 'png') {
  215. if(dataUploadEdit.photo_type != 'gif') {
  216. this.toastr.warning('الصوره بصيغه png أو gif');
  217. }
  218. } else {
  219. //send photo change request
  220. this.http.post(this.authSer.pathApi + '/upload_internal_service_field' , dataUploadEdit ).subscribe(
  221. (responce) => {
  222. console.log(responce['photo']);
  223. },
  224. (error) => {
  225. console.log(error);
  226. }
  227. )
  228. }
  229. } else {
  230. //to collect all image base64 of photo upload in craete case
  231. this.photoType = event[0].type.split('/');
  232. this.imageBase64[i]={
  233. photo : event[0].base64,
  234. photo_type: this.photoType[1].toLowerCase(),
  235. };
  236. this.checkChangeImage[i] = true;
  237. console.log(' cheeck change iamge' , this.checkChangeImage);
  238. console.log('base 64 images',this.imageBase64);
  239. }
  240. } else {
  241. //to collect all image base64 of photo upload in craete case
  242. this.photoType = event[0].type.split('/');
  243. this.imageBase64[i]={
  244. photo : event[0].base64,
  245. photo_type: this.photoType[1].toLowerCase(),
  246. };
  247. this.checkChangeImage[i] = true;
  248. console.log(' cheeck change iamge' , this.checkChangeImage);
  249. console.log('base 64 images',this.imageBase64);
  250. }
  251. }
  252. //to upload url to view
  253. getUrl(event,i) {
  254. if (event.target.files && event.target.files[0]) {
  255. var reader = new FileReader();
  256. reader.readAsDataURL(event.target.files[0]); // read file as data url
  257. reader.onload = (event) => { // called once readAsDataURL is completed
  258. this.urlImg[i] = event.target['result'];
  259. console.log('url images' , this.urlImg[i]);
  260. }
  261. }
  262. }
  263. //to show link internal or external depend on value of radio button
  264. showCahngeRadio(type,index) {
  265. this.showLink = type;
  266. const fieldsValue = this.addInternalForm.get('fields')
  267. if(type == 'internal') {
  268. console.log(this.addInternalForm.get('fields')['controls'][index]['controls'].link.value = null);
  269. this.addInternalForm.get('fields')['controls'][index]['controls'].link.value = null
  270. } else if (type == 'external') {
  271. console.log(this.addInternalForm.get('fields')['controls'][index]['controls'].link2.value = null);
  272. this.addInternalForm.get('fields')['controls'][index]['controls'].link2.value = null
  273. }
  274. }
  275. //submitted form
  276. onSubmitted() {
  277. this.checkSaveClick = true;
  278. const formInternalData = this.addInternalForm.value;
  279. console.log(formInternalData);
  280. //edit mode
  281. if(this.typeMode) {
  282. //save edit
  283. for(let i = 0; i < this.imageBase64.length; i++) {
  284. if(this.imageBase64[i].photo_type == 'edit') {
  285. formInternalData['fields'][i].photo = this.imageBase64[i].photo;
  286. } else {
  287. formInternalData['fields'][i].photo = this.imageBase64[i].photo;
  288. formInternalData['fields'][i].photo_type = this.imageBase64[i].photo_type;
  289. }
  290. }
  291. console.log(formInternalData);
  292. //validateion in data fields
  293. for(let i = 0; i < formInternalData['fields'].length; i++) {
  294. if(formInternalData['fields'][i].photo == '') {
  295. this.toastr.warning('قم باختيار صوره للعنصر ' + (i+1) );
  296. this.checkValidateField = true;
  297. this.checkSaveClick = false;
  298. } else if(formInternalData['fields'][i].name == '' || formInternalData['fields'][i].name_en == '' || formInternalData['fields'][i].apperance == '' || formInternalData['fields'][i].status == ''){
  299. this.toastr.warning('من فضلك قم بإكمال بيانات العنصر ' + (i + 1) );
  300. this.checkValidateField = true;
  301. this.checkSaveClick = false;this.checkValidateField = true;
  302. this.checkSaveClick = false;
  303. } else {
  304. this.checkValidateField = false;
  305. this.checkSaveClick = true;
  306. }
  307. }
  308. if(this.checkValidateField) {
  309. console.log('valid imagaes');
  310. } else {
  311. this.internalServices.editInternal(this.pageId, formInternalData).subscribe(
  312. (responce) => {
  313. console.log(responce);
  314. this.toastr.success('تم التعديل بنجاح ');
  315. this.checkSaveClick = false;
  316. this.location.back();
  317. }, (error) => {
  318. console.log(error);
  319. this.toastr.error('فشل التعديل !');
  320. this.checkSaveClick = false;
  321. }
  322. );
  323. }
  324. } else {
  325. //save create
  326. //for loop to add photo & photo type in form data
  327. for(let i = 0; i< formInternalData['fields'].length; i++) {
  328. for(let j = 0; j < this.imageBase64.length; j++) {
  329. formInternalData['fields'][i].photo = this.imageBase64[i].photo;
  330. formInternalData['fields'][i].photo_type = this.imageBase64[i].photo_type;
  331. }
  332. }
  333. console.log('form data',formInternalData);
  334. //for loop for validation of fields
  335. for(let i=0; i< formInternalData['fields'].length; i++) {
  336. if(formInternalData['fields'][i].photo == '') {
  337. this.checkValidateField = true;
  338. this.checkSaveClick = false;
  339. this.toastr.warning('من فضلك قم بإدخال صوره العنصر ' + ' ' + (i + 1) );
  340. } else if(formInternalData['fields'][i].photo_type != 'png') {
  341. if(formInternalData['fields'][i].photo_type != 'gif') {
  342. this.toastr.warning(' يجب أن تكون الصوره بصيغه png او gif للعنصر' + ' ' + (i + 1) );
  343. }
  344. this.checkValidateField = true;
  345. this.checkSaveClick = false;
  346. }else if(formInternalData['fields'][i].name == '' || formInternalData['fields'][i].status == '') {
  347. this.toastr.warning('من فضلك قم بإكمال بيانات العنصر ' + (i + 1) );
  348. this.checkValidateField = true;
  349. this.checkSaveClick = false;
  350. }
  351. else {
  352. console.log('rightImage');
  353. this.checkSaveClick = true;
  354. this.checkValidateField = false;
  355. }
  356. }
  357. if(this.checkValidateField) {
  358. console.log('logical images error');
  359. }else {
  360. this.internalServices.addInternal(formInternalData).subscribe(
  361. (responce) => {
  362. console.log(responce);
  363. this.toastr.success('تم الاضافه بنجاح');
  364. this.location.back();
  365. this.checkSaveClick = false;
  366. },
  367. (error) => {
  368. console.log(error);
  369. this.checkSaveClick = false;
  370. }
  371. );
  372. }
  373. }
  374. };
  375. ngOnDestroy() {
  376. this.editSubscription.unsubscribe();
  377. }
  378. }