webapp/src/app/projects/projectAddModal.component.ts

   1 import { Component, Input, ViewChild, OnInit } from '@angular/core';
   2 import { Observable } from 'rxjs/Observable';
   3 import { ModalDirective } from 'ngx-bootstrap/modal';
   4 import { FormControl, FormGroup, Validators, 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 '../services/alert.service';
  12 import { ProjectService, IProject, ProjectType, ProjectTypes } from '../services/project.service';
  13
  14
  15 @Component({
  16     selector: 'xds-project-add-modal',
  17     templateUrl: 'projectAddModal.component.html',
  18     styleUrls: ['projectAddModal.component.css']
  19 })
  20 export class ProjectAddModalComponent implements OnInit {
  21     @ViewChild('childProjectModal') public childProjectModal: ModalDirective;
  22     @Input() title?: string;
  23     @Input('server-id') 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 fb: FormBuilder
  38     ) {
  39         // Define types (first one is special/placeholder)
  40         this.projectTypes.unshift({ value: ProjectType.UNSET, display: '--Select a type--' });
  41
  42         this.typeCtrl = new FormControl(this.projectTypes[0].value, Validators.pattern('[A-Za-z]+'));
  43         this.pathCliCtrl = new FormControl('', Validators.required);
  44         this.pathSvrCtrl = new FormControl({ value: '', disabled: true }, [Validators.required, Validators.minLength(1)]);
  45
  46         this.addProjectForm = fb.group({
  47             type: this.typeCtrl,
  48             pathCli: this.pathCliCtrl,
  49             pathSvr: this.pathSvrCtrl,
  50             label: ['', Validators.nullValidator],
  51         });
  52     }
  53
  54     ngOnInit() {
  55         // Auto create label name
  56         this.pathCliCtrl.valueChanges
  57             .debounceTime(100)
  58             .filter(n => n)
  59             .map(n => {
  60                 const last = n.split('/');
  61                 let nm = n;
  62                 if (last.length > 0) {
  63                     nm = last.pop();
  64                     if (nm === '' && last.length > 0) {
  65                         nm = last.pop();
  66                     }
  67                 }
  68                 return 'Project_' + nm;
  69             })
  70             .subscribe(value => {
  71                 if (value && !this.userEditedLabel) {
  72                     this.addProjectForm.patchValue({ label: value });
  73                 }
  74             });
  75
  76         // Handle disabling of Server path
  77         this.typeCtrl.valueChanges
  78             .debounceTime(500)
  79             .subscribe(valType => {
  80                 const dis = (valType === String(ProjectType.SYNCTHING));
  81                 this.pathSvrCtrl.reset({ value: '', disabled: dis });
  82             });
  83     }
  84
  85     show() {
  86         this.cancelAction = false;
  87         this.userEditedLabel = false;
  88         this.childProjectModal.show();
  89     }
  90
  91     hide() {
  92         this.childProjectModal.hide();
  93     }
  94
  95     onKeyLabel(event: any) {
  96         this.userEditedLabel = (this.addProjectForm.value.label !== '');
  97     }
  98
  99     /* FIXME: change input to file type
 100      <td><input type='file' id='select-local-path' webkitdirectory
 101      formControlName='pathCli' placeholder='myProject' (change)='onChangeLocalProject($event)'></td>
 102
 103     onChangeLocalProject(e) {
 104         if e.target.files.length < 1 {
 105             console.log('NO files');
 106         }
 107         let dir = e.target.files[0].webkitRelativePath;
 108         console.log('files: ' + dir);
 109         let u = URL.createObjectURL(e.target.files[0]);
 110     }
 111     */
 112     onChangeLocalProject(e) {
 113     }
 114
 115     onSubmit() {
 116         if (this.cancelAction) {
 117             return;
 118         }
 119
 120         const formVal = this.addProjectForm.value;
 121
 122         const type = formVal['type'].value;
 123         this.projectSvr.Add({
 124             serverId: this.serverID,
 125             label: formVal['label'],
 126             pathClient: formVal['pathCli'],
 127             pathServer: formVal['pathSvr'],
 128             type: formVal['type'],
 129             // FIXME: allow to set defaultSdkID from New Project config panel
 130         })
 131             .subscribe(prj => {
 132                 this.alert.info('Project ' + prj.label + ' successfully created.');
 133                 this.hide();
 134
 135                 // Reset Value for the next creation
 136                 this.addProjectForm.reset();
 137                 const selectedType = this.projectTypes[0].value;
 138                 this.addProjectForm.patchValue({ type: selectedType });
 139
 140             },
 141             err => {
 142                 this.alert.error(err, 60);
 143                 this.hide();
 144             });
 145     }
 146
 147 }