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 => "Project_" + n.split('/')[0])
  66             .subscribe(value => {
  67                 if (value && !this.userEditedLabel) {
  68                     this.addProjectForm.patchValue({ label: value });
  69                 }
  70             });
  71
  72         // Handle disabling of Server path
  73         this.typeCtrl.valueChanges
  74             .debounceTime(500)
  75             .subscribe(valType => {
  76                 let dis = (valType === String(ProjectType.SYNCTHING));
  77                 this.pathSvrCtrl.reset({ value: "", disabled: dis });
  78             });
  79     }
  80
  81     show() {
  82         this.cancelAction = false;
  83         this.childProjectModal.show();
  84     }
  85
  86     hide() {
  87         this.childProjectModal.hide();
  88     }
  89
  90     onKeyLabel(event: any) {
  91         this.userEditedLabel = (this.addProjectForm.value.label !== "");
  92     }
  93
  94     /* FIXME: change input to file type
  95      <td><input type="file" id="select-local-path" webkitdirectory
  96      formControlName="pathCli" placeholder="myProject" (change)="onChangeLocalProject($event)"></td>
  97
  98     onChangeLocalProject(e) {
  99         if e.target.files.length < 1 {
 100             console.log('SEB NO files');
 101         }
 102         let dir = e.target.files[0].webkitRelativePath;
 103         console.log("SEB files: " + dir);
 104         let u = URL.createObjectURL(e.target.files[0]);
 105     }
 106     */
 107     onChangeLocalProject(e) {
 108     }
 109
 110     onSubmit() {
 111         if (this.cancelAction) {
 112             return;
 113         }
 114
 115         let formVal = this.addProjectForm.value;
 116
 117         let type = formVal['type'].value;
 118         let numType = Number(formVal['type']);
 119         this.configSvr.addProject({
 120             label: formVal['label'],
 121             pathClient: formVal['pathCli'],
 122             pathServer: formVal['pathSvr'],
 123             type: numType,
 124             // FIXME: allow to set defaultSdkID from New Project config panel
 125         })
 126             .subscribe(prj => {
 127                 this.alert.info("Project " + prj.label + " successfully created.");
 128                 this.hide();
 129
 130                 // Reset Value for the next creation
 131                 this.addProjectForm.reset();
 132                 let selectedType = this.projectTypes[0].value;
 133                 this.addProjectForm.patchValue({ type: selectedType });
 134
 135             },
 136             err => {
 137                 this.alert.error("Configuration ERROR: " + err, 60);
 138                 this.hide();
 139             });
 140     }
 141
 142 }