|
@@ -1,3 +1,4 @@
|
|
|
+import { HttpClient } from '@angular/common/http';
|
|
|
import { InternalSerService } from './../../../shared/internal-ser.service';
|
|
|
import { AuthServiceService } from './../../../shared/auth-service.service';
|
|
|
import { ActivatedRoute, Params } from '@angular/router';
|
|
@@ -24,25 +25,31 @@ export class AddInternalServicesComponent implements OnInit {
|
|
|
private spinner: NgxSpinnerService,
|
|
|
private toastr: ToastrService,
|
|
|
private authSer: AuthServiceService,
|
|
|
+ private http: HttpClient,
|
|
|
private location: Location) { }
|
|
|
|
|
|
addInternalForm: FormGroup;
|
|
|
fields: FormArray;
|
|
|
- typeMode: boolean = false;
|
|
|
+ typeMode: boolean = false; //to check edit or create
|
|
|
typePageEdit: string = '';
|
|
|
typeCreatePage: string = '';
|
|
|
typeLink = 'إنشاء جديد';
|
|
|
pageId: number;
|
|
|
editSubscription: Subscription;
|
|
|
typeCreateSubscription: Subscription;
|
|
|
+ editObjectPhoto = [];
|
|
|
fieldsData = [];
|
|
|
- imageBase64 = [];
|
|
|
+ imageBase64 = [{
|
|
|
+ photo: '',
|
|
|
+ photo_type: '',
|
|
|
+ }];
|
|
|
+ checkSaveClick:boolean = false;
|
|
|
+ checkAdd:boolean = false;
|
|
|
photoType: string = '';
|
|
|
- checkChangeImage = [false];
|
|
|
- showOpenFile = [true];
|
|
|
- showCloseFile = [false];
|
|
|
+ checkChangeImage = [false]; //check change for any image if change in edit mode or no
|
|
|
+ checkValidateField: boolean = false; //loop in imageBase64 array and check if one of them not have image or no
|
|
|
+
|
|
|
urlImg = ['../../assets/image/avatar.png'];
|
|
|
- i = 0;
|
|
|
|
|
|
ngOnInit() {
|
|
|
//show / hide notification search in header
|
|
@@ -58,11 +65,12 @@ export class AddInternalServicesComponent implements OnInit {
|
|
|
this.authSer.showDashboardHeader = true;
|
|
|
this.authSer.internalHeader = false;
|
|
|
|
|
|
+
|
|
|
//init form data
|
|
|
this.addInternalForm = new FormGroup({
|
|
|
name: new FormControl(null , Validators.required),
|
|
|
name_en: new FormControl(null , Validators.required),
|
|
|
- status: new FormControl(null, Validators.required),
|
|
|
+ status: new FormControl('1', Validators.required),
|
|
|
fields: this.formBuilder.array([ this.createItem() ])
|
|
|
});
|
|
|
|
|
@@ -71,7 +79,6 @@ export class AddInternalServicesComponent implements OnInit {
|
|
|
this.editSubscription = this.route.params.subscribe(
|
|
|
(params: Params) => {
|
|
|
if(params['typeInternalMode'] == 'edit') {
|
|
|
-
|
|
|
this.typeLink = 'تعديل';
|
|
|
this.imageBase64 = [];
|
|
|
//redifine form data
|
|
@@ -105,6 +112,7 @@ export class AddInternalServicesComponent implements OnInit {
|
|
|
name: this.fieldsData[i].name,
|
|
|
name_en: this.fieldsData[i].name_en,
|
|
|
link: this.fieldsData[i].link,
|
|
|
+ photo: this.fieldsData[i].photo,
|
|
|
apperance: this.fieldsData[i].apperance,
|
|
|
status: this.fieldsData[i].status,
|
|
|
})
|
|
@@ -113,11 +121,12 @@ export class AddInternalServicesComponent implements OnInit {
|
|
|
|
|
|
for(let i=0; i<this.fieldsData.length; i++) {
|
|
|
this.urlImg[i] = this.fieldsData[i].photo ? this.authSer.pathImg + this.fieldsData[i].photo : '../../assets/image/avatar.png';
|
|
|
- this.showCloseFile[i] = true;
|
|
|
- this.showOpenFile[i] = false;
|
|
|
this.checkChangeImage[i] = false;
|
|
|
}
|
|
|
|
|
|
+ console.log('edit image base 64' , this.imageBase64);
|
|
|
+ console.log('edit check change image', this.checkChangeImage);
|
|
|
+ console.log('edit mode url image ' , this.urlImg);
|
|
|
this.spinner.hide();
|
|
|
},
|
|
|
(error) => {
|
|
@@ -133,57 +142,112 @@ export class AddInternalServicesComponent implements OnInit {
|
|
|
|
|
|
//to make at least on element in form array
|
|
|
createItem(): FormGroup {
|
|
|
- return this.formBuilder.group({
|
|
|
- name: '',
|
|
|
- name_en: '',
|
|
|
- photo: '',
|
|
|
- link: '',
|
|
|
- apperance: '',
|
|
|
- status: '',
|
|
|
- });
|
|
|
+ if(this.typeMode) {
|
|
|
+ return this.formBuilder.group({
|
|
|
+ name: '',
|
|
|
+ name_en: '',
|
|
|
+ photo: '',
|
|
|
+ link: '',
|
|
|
+ apperance: '',
|
|
|
+ status: '1',
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return this.formBuilder.group({
|
|
|
+ name: '',
|
|
|
+ name_en: '',
|
|
|
+ photo: '',
|
|
|
+ photo_type: '',
|
|
|
+ link: '',
|
|
|
+ apperance: '',
|
|
|
+ status: '1',
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
};
|
|
|
|
|
|
//add more title
|
|
|
- onAddTitle(i) {
|
|
|
+ onAddTitle() {
|
|
|
this.fields = this.addInternalForm.get('fields') as FormArray;
|
|
|
this.fields.push(this.createItem());
|
|
|
- this.imageBase64[this.i] = [{
|
|
|
- photo : "",
|
|
|
- photo_type: "",
|
|
|
- }];
|
|
|
- this.i++;
|
|
|
console.log(this.imageBase64);
|
|
|
this.urlImg.push('../../assets/image/avatar.png');
|
|
|
- this.showOpenFile.push(true);
|
|
|
- this.showCloseFile.push(false);
|
|
|
+ console.log(this.urlImg);
|
|
|
this.checkChangeImage.push(false);
|
|
|
+ if(!this.typeMode){
|
|
|
+ this.imageBase64.push({
|
|
|
+ photo: '',
|
|
|
+ photo_type: '',
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ this.checkAdd = true;
|
|
|
+ console.log('image base 64',this.imageBase64);
|
|
|
+ console.log('check change image', this.checkChangeImage);
|
|
|
}
|
|
|
|
|
|
//remove from array form
|
|
|
removeTitle(index: number) {
|
|
|
this.fields = this.addInternalForm.get('fields') as FormArray;
|
|
|
this.fields.removeAt(index);
|
|
|
+ this.imageBase64.splice(index,1);
|
|
|
+ console.log(this.imageBase64);
|
|
|
+ this.urlImg.splice(index, 1);
|
|
|
+ console.log(this.urlImg);
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onFileChanges(event,i) {
|
|
|
-
|
|
|
console.log(event);
|
|
|
- this.photoType = event[0].type.split('/');
|
|
|
- console.log(i);
|
|
|
+ var id_field = '';
|
|
|
+
|
|
|
+ if(this.typeMode) {
|
|
|
+
|
|
|
+ if(!this.checkAdd) {
|
|
|
+ id_field = this.fieldsData[i].id;
|
|
|
+ }
|
|
|
|
|
|
- this.imageBase64[i]={
|
|
|
- photo : event[0].base64,
|
|
|
- photo_type: this.photoType[1],
|
|
|
- };
|
|
|
+ this.editObjectPhoto['index'] = i;
|
|
|
|
|
|
- console.log(this.imageBase64);
|
|
|
+ const dataUploadEdit = {
|
|
|
+ field_id : id_field,
|
|
|
+ photo: event[0].base64,
|
|
|
+ photo_type: event[0].type.split('/')[1].toLowerCase(),
|
|
|
+ };
|
|
|
+
|
|
|
+ if(dataUploadEdit.photo_type != 'png') {
|
|
|
+
|
|
|
+ if(dataUploadEdit.photo_type != 'gif') {
|
|
|
+ this.toastr.warning('الصوره بصيغه png أو gif');
|
|
|
+ }
|
|
|
|
|
|
- this.checkChangeImage[i] = true;
|
|
|
- this.showCloseFile[i] = true;
|
|
|
- this.showOpenFile[i] = false;
|
|
|
+ } else {
|
|
|
|
|
|
+ this.http.post(this.authSer.pathApi + '/upload_internal_service_field' , dataUploadEdit ).subscribe(
|
|
|
+ (responce) => {
|
|
|
+ console.log(responce['photo']);
|
|
|
+ this.editObjectPhoto.push({
|
|
|
+ index: i,
|
|
|
+ photo: responce['photo'],
|
|
|
+ });
|
|
|
+ console.log('oooooooooooooooooooooooooooo',this.editObjectPhoto);
|
|
|
+ },
|
|
|
+ (error) => {
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.photoType = event[0].type.split('/');
|
|
|
+ this.imageBase64[i]={
|
|
|
+ photo : event[0].base64,
|
|
|
+ photo_type: this.photoType[1].toLowerCase(),
|
|
|
+ };
|
|
|
+ this.checkChangeImage[i] = true;
|
|
|
+ console.log(' cheeck change iamge' , this.checkChangeImage);
|
|
|
+ console.log('base 64 images',this.imageBase64);
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
//to upload url to view
|
|
@@ -198,61 +262,118 @@ export class AddInternalServicesComponent implements OnInit {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- //to close and upload photo
|
|
|
- closePhoto(i) {
|
|
|
- this.showCloseFile[i] = false;
|
|
|
- this.showOpenFile[i] = true;
|
|
|
- this.urlImg[i] = '../../assets/image/avatar.png';
|
|
|
- this.imageBase64[i] = {
|
|
|
- photo: "",
|
|
|
- photo_type: "",
|
|
|
- }
|
|
|
- console.log(this.imageBase64);
|
|
|
- }
|
|
|
+
|
|
|
+
|
|
|
|
|
|
|
|
|
//submitted form
|
|
|
onSubmitted() {
|
|
|
|
|
|
+ this.checkSaveClick = true;
|
|
|
+
|
|
|
const formInternalData = this.addInternalForm.value;
|
|
|
-
|
|
|
- for(let i = 0; i< formInternalData['fields'].length; i++) {
|
|
|
- for(let j = 0; j < this.imageBase64.length; j++) {
|
|
|
- formInternalData['fields'][i].photo = this.imageBase64[i].photo;
|
|
|
- formInternalData['fields'][i].photo_type = this.imageBase64[i].photo_type;
|
|
|
+ console.log(formInternalData);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ if(this.typeMode) {
|
|
|
+
|
|
|
+ //save edit
|
|
|
+
|
|
|
+ for(let i = 0; i< formInternalData['fields'].length; i++) {
|
|
|
+ for(let j = 0; j < this.editObjectPhoto.length; j++) {
|
|
|
+ if(this.editObjectPhoto[j].index == formInternalData['fields'][i].id) {
|
|
|
+ formInternalData['fields'][i].photo = this.editObjectPhoto[j].photo;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- console.log(formInternalData);
|
|
|
+ console.log(formInternalData);
|
|
|
+
|
|
|
+ for(let i = 0; i < formInternalData['fields'].length; i++) {
|
|
|
+ if(formInternalData['fields'][i].photo == '') {
|
|
|
+ this.toastr.warning('قم باختيار صوره للعنصر ' + (i+1) );
|
|
|
+ this.checkValidateField = true;
|
|
|
+ this.checkSaveClick = false;
|
|
|
+ } else if(formInternalData['fields'][i].name == '' || formInternalData['fields'][i].name_en == '' || formInternalData['fields'][i].apperance == '' || formInternalData['fields'][i].status == ''){
|
|
|
+ this.toastr.warning('من فضلك قم بإكمال بيانات العنصر ' + (i + 1) );
|
|
|
+ this.checkValidateField = true;
|
|
|
+ this.checkSaveClick = false;this.checkValidateField = true;
|
|
|
+ this.checkSaveClick = false;
|
|
|
+ } else {
|
|
|
+ this.checkValidateField = false;
|
|
|
+ this.checkSaveClick = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if(this.checkValidateField) {
|
|
|
+ console.log('valid imagaes');
|
|
|
+ } else {
|
|
|
+ // this.internalServices.editInternal(this.pageId, formInternalData).subscribe(
|
|
|
+ // (responce) => {
|
|
|
+ // console.log(responce);
|
|
|
+ // this.toastr.success('تم التعديل بنجاح ');
|
|
|
+ // this.checkSaveClick = false;
|
|
|
+ // }, (error) => {
|
|
|
+ // console.log(error);
|
|
|
+ // this.toastr.error('فشل التعديل !');
|
|
|
+ // this.checkSaveClick = false;
|
|
|
+ // }
|
|
|
+ // );
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
- if(formInternalData['fields'].length == 0) {
|
|
|
- this.toastr.warning('أدخل عنوان ووصف واحد علي الاقل !');
|
|
|
- } else if(formInternalData['fields'][0].name == '' || formInternalData['fields'][0].apperance == '' || formInternalData['fields'][0].status == '') {
|
|
|
- this.toastr.warning('أدخل عنوان ووصف واحد علي الاقل !');
|
|
|
} else {
|
|
|
+ //save create
|
|
|
+ for(let i = 0; i< formInternalData['fields'].length; i++) {
|
|
|
+ for(let j = 0; j < this.imageBase64.length; j++) {
|
|
|
+ formInternalData['fields'][i].photo = this.imageBase64[i].photo;
|
|
|
+ formInternalData['fields'][i].photo_type = this.imageBase64[i].photo_type;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('image base 64', this.imageBase64);
|
|
|
+ console.log(formInternalData);
|
|
|
+
|
|
|
+ for(let i=0; i< formInternalData['fields'].length; i++) {
|
|
|
+ if(formInternalData['fields'][i].photo == '') {
|
|
|
+ this.checkValidateField = true;
|
|
|
+ this.checkSaveClick = false;
|
|
|
+ this.toastr.warning('من فضلك قم بإدخال صوره العنصر ' + ' ' + (i + 1) );
|
|
|
+ } else if(formInternalData['fields'][i].photo_type != 'png') {
|
|
|
+ if(formInternalData['fields'][i].photo_type != 'gif') {
|
|
|
+ this.toastr.warning(' يجب أن تكون الصوره بصيغه png او gif للعنصر' + ' ' + (i + 1) );
|
|
|
+ }
|
|
|
+ this.checkValidateField = true;
|
|
|
+ this.checkSaveClick = false;
|
|
|
+ }else if(formInternalData['fields'][i].name == '' || formInternalData['fields'][i].apperance == '' || formInternalData['fields'][i].status == '') {
|
|
|
+ this.toastr.warning('من فضلك قم بإكمال بيانات العنصر ' + (i + 1) );
|
|
|
+ this.checkValidateField = true;
|
|
|
+ this.checkSaveClick = false;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ console.log('rightImage');
|
|
|
+ this.checkSaveClick = false;
|
|
|
+ this.checkValidateField = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if(this.checkValidateField) {
|
|
|
+ console.log('logical images error');
|
|
|
+ }else {
|
|
|
this.internalServices.addInternal(formInternalData).subscribe(
|
|
|
(responce) => {
|
|
|
console.log(responce);
|
|
|
this.toastr.success('تم الاضافه بنجاح');
|
|
|
this.location.back();
|
|
|
+ this.checkSaveClick = false;
|
|
|
},
|
|
|
(error) => {
|
|
|
console.log(error);
|
|
|
+ this.checkSaveClick = false;
|
|
|
}
|
|
|
);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- if(this.typeMode) {
|
|
|
- this.internalServices.editInternal(this.pageId, formInternalData).subscribe(
|
|
|
- (responce) => {
|
|
|
- console.log(responce);
|
|
|
- this.toastr.success('تم التعديل بنجاح ');
|
|
|
- }, (error) => {
|
|
|
- console.log(error);
|
|
|
- this.toastr.error('فشل التعديل !');
|
|
|
- }
|
|
|
- );
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
};
|