add-news.component.ts 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. import { DashboardService } from './../../../shared/dashboard.service';
  2. import { HttpClient } from '@angular/common/http';
  3. import { AuthServiceService } from './../../../shared/auth-service.service';
  4. import { NgxSpinnerService } from 'ngx-spinner';
  5. import { ActivatedRoute, Params } from '@angular/router';
  6. import { ToastrService } from 'ngx-toastr';
  7. import { Location } from '@angular/common';
  8. import { NewService } from './../../../shared/new.service';
  9. import { Component, OnInit, ViewChild } from '@angular/core';
  10. import { UserService } from '../../../shared/user.service';
  11. import { NgForm } from '@angular/forms';
  12. import * as Quill from 'quill';
  13. @Component({
  14. selector: 'app-add-news',
  15. templateUrl: './add-news.component.html',
  16. styleUrls: ['./add-news.component.css']
  17. })
  18. export class AddNewsComponent implements OnInit {
  19. @ViewChild('f') newForm: NgForm;
  20. typeMode: boolean = false;
  21. newId: number;
  22. checkValidImg: boolean = true;
  23. imageBase64: string = '';
  24. imageMainBase64:string = '';
  25. photoType: string = '';
  26. typeLink: string = '';
  27. checkSaveClick: boolean = false;
  28. photoEdit:boolean = false;
  29. checkAddMode: boolean = false;
  30. serviceName: string = '';
  31. mainPhotoDefault: string = '../../../../assets/image/Group 408.png';
  32. mainPhotoPath: string = '';
  33. serviceId: number;
  34. new = {
  35. title: '',
  36. title_en: '',
  37. ranking: '',
  38. display_location: '',
  39. type: '',
  40. status: '',
  41. description: '',
  42. description_en: '',
  43. }
  44. images = [{
  45. base64: '',
  46. photoType: '',
  47. urlImg: '../../../../assets/image/Group 408.png',
  48. id: '',
  49. is_main_photo: 0
  50. }];
  51. //add more div photo
  52. plusImage() {
  53. this.checkAddMode = true;
  54. this.images.push({
  55. base64: '',
  56. photoType: '',
  57. urlImg: '../../../../assets/image/Group 408.png',
  58. id: '',
  59. is_main_photo: 0
  60. });
  61. }
  62. constructor(private newService: NewService,
  63. private userService: UserService,
  64. private authSer: AuthServiceService,
  65. private location: Location,
  66. private toastr: ToastrService,
  67. private route: ActivatedRoute,
  68. private http: HttpClient,
  69. private authService: AuthServiceService,
  70. private dashBoardService: DashboardService,
  71. private spineer: NgxSpinnerService) { }
  72. ngOnInit() {
  73. //show / hide notification search in header
  74. this.authSer.notificationLogin = true;
  75. this.authSer.showSearchHeader = false;
  76. this.authSer.showHeaderLogin = false;
  77. this.authSer.showHeaderDashBoard = true;
  78. this.authSer.showDashboardHeader = true;
  79. this.authSer.internalHeader = false;
  80. this.new.status = '1';
  81. this.route.parent.params.subscribe(
  82. (params: Params) => {
  83. this.serviceId = params['serviceID'];
  84. if(this.serviceId == 13) {
  85. this.serviceName = 'خدمه إداره المحتوي';
  86. } else if(this.serviceId == 2) {
  87. this.serviceName = ' خدمه إداره الصفحه الخارجيه';
  88. }
  89. }
  90. )
  91. this.route.params.subscribe(
  92. (params: Params) => {
  93. if(params['typeNewMode'] == 'edit') {
  94. this.typeLink = 'تعديل';
  95. this.images = [];
  96. this.spineer.show();
  97. this.typeMode = true;
  98. this.newId = params['editNewId'];
  99. this.dashBoardService.getItemData(this.newId, 'news').subscribe(
  100. (responce) => {
  101. console.log(responce);
  102. const newData = responce['report'];
  103. console.log(newData);
  104. this.new.title = newData.title;
  105. this.new.title_en = newData.title_en;
  106. this.new.ranking = newData.ranking;
  107. this.new.display_location = newData.display_location;
  108. this.new.type = newData.type;
  109. this.new.status = newData.status;
  110. this.new.description = newData.description;
  111. this.new.description_en = newData.description_en;
  112. if(responce['report'].photos) {
  113. this.checkValidImg = false;
  114. for(let i = 0 ; i < newData.photos.length; i++) {
  115. this.images.push({
  116. base64: '',//this.onFileChanges(newData.photos[i].photo,i),
  117. photoType: '',
  118. urlImg : this.authSer.pathImg + newData.photos[i].photo,
  119. id: newData.photos[i].id,
  120. is_main_photo : newData.photos[i].is_main_photo,
  121. });
  122. console.log('imageeeees' , this.images);
  123. }
  124. }
  125. this.spineer.hide();
  126. },
  127. (error) => {
  128. console.log(error);
  129. }
  130. )
  131. } else {
  132. this.typeLink = 'إنشاء جديد';
  133. }
  134. }
  135. );
  136. }
  137. onFileChanges(event,index) {
  138. console.log(event);
  139. console.log('upload image index' , index);
  140. let dateEditUplad = {};
  141. if(this.typeMode) {
  142. if(this.checkAddMode) {
  143. dateEditUplad = {
  144. 'photo': event[0].base64,
  145. 'photo_type': event[0].type.split('/')[1],
  146. 'report_id': this.newId,
  147. }
  148. } else {
  149. dateEditUplad = {
  150. 'photo': event[0].base64,
  151. 'photo_type': event[0].type.split('/')[1],
  152. 'photo_id': this.images[index].id,
  153. }
  154. }
  155. console.log(dateEditUplad);
  156. this.http.post(this.authSer.pathApi + '/upload_report_photo', dateEditUplad).subscribe(
  157. (responce) => {
  158. console.log(responce);
  159. },
  160. (error) => {
  161. console.log(error);
  162. }
  163. )
  164. } else {
  165. this.imageBase64 = event[0].base64;
  166. this.images[index].base64 = this.imageBase64;
  167. this.photoType = event[0].type.split('/');
  168. this.images[index].photoType = this.photoType[1];
  169. console.log('images array' , this.images);
  170. this.checkValidImg = false;
  171. }
  172. }
  173. getUrl(event,index) {
  174. if (event.target.files && event.target.files[0]) {
  175. var reader = new FileReader();
  176. reader.readAsDataURL(event.target.files[0]); // read file as data url
  177. reader.onload = (event) => { // called once readAsDataURL is completed
  178. //this.urlImg = event.target['result'];
  179. this.images[index].urlImg = event.target['result'];
  180. }
  181. }
  182. }
  183. deleteImg(index, data) {
  184. if(this.typeMode) {
  185. this.images.splice(index , 1);
  186. this.http.get(this.authSer.pathApi + '/delete_report_photo/' + data.id).subscribe(
  187. (responce) => {
  188. console.log(responce);
  189. },
  190. (error) => {
  191. console.log(error);
  192. }
  193. );
  194. } else {
  195. this.images.splice(index,1);
  196. }
  197. }
  198. deleteMainImg() {
  199. this.mainPhotoPath = '';
  200. }
  201. //submitted form
  202. onSubmitted() {
  203. this.checkSaveClick = true;
  204. const formData = this.newForm.value;
  205. if(this.typeMode){
  206. //to remove photo from object not has edit on it
  207. // const images = [];
  208. // for(let i = 0; i < this.images.length; i++) {
  209. // if(this.images[i].base64 == '') {
  210. // this.images.splice(this.images.indexOf(this.images[i]) , 1);
  211. // } else {
  212. // if(i == 0) {
  213. // images.push({
  214. // photo: this.images[i].base64,
  215. // photo_type: this.images[i].photoType,
  216. // });
  217. // } else {
  218. // images.push({
  219. // photo: this.images[i].base64,
  220. // photo_type: this.images[i].photoType,
  221. // });
  222. // }
  223. // }
  224. // }
  225. //formData['images'] = images;
  226. console.log(formData);
  227. if(this.serviceId == 2) {
  228. this.dashBoardService.editItem(this.newId, formData,'externalNew').subscribe(
  229. (responce) => {
  230. console.log(responce);
  231. this.toastr.success('تمت التعديل بنجاح');
  232. this.location.back();
  233. },
  234. (error) => {
  235. console.log(error);
  236. this.toastr.error('خطأ في التعديل !');
  237. this.checkSaveClick = false;
  238. }
  239. );
  240. } else if(this.serviceId == 6){
  241. this.dashBoardService.editItem(this.newId, formData, 'internalNew').subscribe(
  242. (responce) => {
  243. console.log(responce);
  244. this.toastr.success('تمت التعديل بنجاح');
  245. this.location.back();
  246. },
  247. (error) => {
  248. console.log(error);
  249. this.checkSaveClick = false;
  250. this.toastr.error('خطأ في التعديل !');
  251. }
  252. );
  253. }
  254. } else {
  255. if(this.images[0].base64 == ''){
  256. this.toastr.warning('قم باختيار الصوره الرئيسيه !');
  257. this.checkSaveClick = false;
  258. } else {
  259. const images = [];
  260. for(let i = 0; i < this.images.length; i++) {
  261. if(i == 0) {
  262. images.push({
  263. photo: this.images[i].base64,
  264. photo_type: this.images[i].photoType,
  265. is_main_photo: 1,
  266. });
  267. } else {
  268. images.push({
  269. photo: this.images[i].base64,
  270. photo_type: this.images[i].photoType,
  271. is_main_photo: 0,
  272. });
  273. }
  274. }
  275. formData['images'] = images;
  276. console.log(formData);
  277. if(this.serviceId == 6) {
  278. this.dashBoardService.addItem(formData, 'internalNews').subscribe(
  279. (responce) => {
  280. console.log(responce);
  281. this.toastr.success('تمت الاضافه بنجاح');
  282. this.location.back();
  283. this.checkSaveClick = false;
  284. },
  285. (error) => {
  286. console.log(error);
  287. this.toastr.error('خطأ في الحفظ !');
  288. this.checkSaveClick = false;
  289. }
  290. );
  291. } else if(this.serviceId == 2) {
  292. this.dashBoardService.addItem(formData, 'externalNews').subscribe(
  293. (responce) => {
  294. console.log(responce);
  295. this.toastr.success('تمت الاضافه بنجاح');
  296. this.location.back();
  297. },
  298. (error) => {
  299. console.log(error);
  300. this.toastr.error('خطأ في الحفظ !');
  301. this.checkSaveClick = false;
  302. }
  303. );
  304. }
  305. }
  306. }
  307. }
  308. }