webapp/src/app/pages/projects/project-add-modal/project-add-modal.component.ts

   1 import { Component, Input, ViewChild, OnInit } from '@angular/core';
   2 import { Observable } from 'rxjs/Observable';
   3 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
   4 import { FormControl, FormGroup, Validators, ValidationErrors, FormBuilder, ValidatorFn, AbstractControl } from '@angular/forms';
   5
   6 // Import RxJs required methods
   7 import 'rxjs/add/operator/map';
   8 import 'rxjs/add/operator/filter';
   9 import 'rxjs/add/operator/debounceTime';
  10
  11 import { AlertService, IAlert } from '../../../@core-xds/services/alert.service';
  12 import { ProjectService, IProject, ProjectType, ProjectTypes } from '../../../@core-xds/services/project.service';
  13 import { XDSConfigService } from '../../../@core-xds/services/xds-config.service';
  14
  15
  16 @Component({
  17   selector: 'xds-project-add-modal',
  18   templateUrl: 'project-add-modal.component.html',
  19   styleUrls: ['project-add-modal.component.scss']
  20 })
  21 export class ProjectAddModalComponent implements OnInit {
  22   // @Input('server-id') serverID: string;
  23   private serverID: string;
  24
  25   cancelAction = false;
  26   userEditedLabel = false;
  27   projectTypes = ProjectTypes;
  28
  29   addProjectForm: FormGroup;
  30   typeCtrl: FormControl;
  31   pathCliCtrl: FormControl;
  32   pathSvrCtrl: FormControl;
  33
  34   constructor(
  35     private alert: AlertService,
  36     private projectSvr: ProjectService,
  37     private XdsConfigSvr: XDSConfigService,
  38     private fb: FormBuilder,
  39     private activeModal: NgbActiveModal
  40   ) {
  41     // Define types (first one is special/placeholder)
  42     this.projectTypes.unshift({ value: ProjectType.UNSET, display: '--Select a type--' });
  43
  44     this.typeCtrl = new FormControl(this.projectTypes[0].value, this.validatorProjType);
  45     this.pathCliCtrl = new FormControl('', this.validatorProjPath);
  46     this.pathSvrCtrl = new FormControl({ value: '', disabled: true }, this.validatorProjPath);
  47
  48     this.addProjectForm = fb.group({
  49       type: this.typeCtrl,
  50       pathCli: this.pathCliCtrl,
  51       pathSvr: this.pathSvrCtrl,
  52       label: ['', Validators.nullValidator],
  53     });
  54   }
  55
  56
  57   ngOnInit() {
  58     // Update server ID
  59     this.serverID = this.XdsConfigSvr.getCurServer().id;
  60     this.XdsConfigSvr.onCurServer().subscribe(svr => this.serverID = svr.id);
  61
  62     // Auto create label name
  63     this.pathCliCtrl.valueChanges
  64       .debounceTime(100)
  65       .filter(n => n)
  66       .map(n => {
  67         const last = n.split('/');
  68         let nm = n;
  69         if (last.length > 0) {
  70           nm = last.pop();
  71           if (nm === '' && last.length > 0) {
  72             nm = last.pop();
  73           }
  74         }
  75         return 'Project_' + nm;
  76       })
  77       .subscribe(value => {
  78         if (value && !this.userEditedLabel) {
  79           this.addProjectForm.patchValue({ label: value });
  80         }
  81       });
  82
  83     // Handle disabling of Server path
  84     this.typeCtrl.valueChanges
  85       .debounceTime(500)
  86       .subscribe(valType => {
  87         const dis = (valType === String(ProjectType.SYNCTHING));
  88         this.pathSvrCtrl.reset({ value: '', disabled: dis });
  89       });
  90   }
  91
  92   closeModal() {
  93     this.activeModal.close();
  94   }
  95
  96   onKeyLabel(event: any) {
  97     this.userEditedLabel = (this.addProjectForm.value.label !== '');
  98   }
  99
 100   onChangeLocalProject(e) {
 101   }
 102
 103   onSubmit() {
 104     if (this.cancelAction) {
 105       return;
 106     }
 107
 108     const formVal = this.addProjectForm.value;
 109
 110     const type = formVal['type'].value;
 111     this.projectSvr.Add({
 112       serverId: this.serverID,
 113       label: formVal['label'],
 114       pathClient: formVal['pathCli'],
 115       pathServer: formVal['pathSvr'],
 116       type: formVal['type'],
 117       // FIXME: allow to set defaultSdkID from New Project config panel
 118     })
 119       .subscribe(prj => {
 120         this.alert.info('Project ' + prj.label + ' successfully created.');
 121         this.closeModal();
 122
 123         // Reset Value for the next creation
 124         this.addProjectForm.reset();
 125         const selectedType = this.projectTypes[0].value;
 126         this.addProjectForm.patchValue({ type: selectedType });
 127
 128       },
 129       err => {
 130         this.alert.error(err, 60);
 131         this.closeModal();
 132       });
 133   }
 134
 135   private validatorProjType(g: FormGroup): ValidationErrors | null {
 136     return (g.value !== ProjectType.UNSET) ? null : { validatorProjType: { valid: false } };
 137   }
 138
 139   private validatorProjPath(g: FormGroup): ValidationErrors | null {
 140     return (g.disabled || g.value !== '') ? null : { validatorProjPath: { valid: false } };
 141   }
 142
 143 }