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