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';
6 // Import RxJs required methods
7 import 'rxjs/add/operator/map';
8 import 'rxjs/add/operator/filter';
9 import 'rxjs/add/operator/debounceTime';
11 import { AlertService, IAlert } from "../services/alert.service";
12 import { ProjectService, IProject, ProjectType, ProjectTypes } from "../services/project.service";
16 selector: 'project-add-modal',
17 templateUrl: './app/projects/projectAddModal.component.html',
18 styleUrls: ['./app/projects/projectAddModal.component.css']
20 export class ProjectAddModalComponent {
21 @ViewChild('childProjectModal') public childProjectModal: ModalDirective;
22 @Input() title?: string;
23 @Input('server-id') serverID: string;
25 cancelAction: boolean = false;
26 userEditedLabel: boolean = false;
27 projectTypes = ProjectTypes;
29 addProjectForm: FormGroup;
30 typeCtrl: FormControl;
31 pathCliCtrl: FormControl;
32 pathSvrCtrl: FormControl;
35 private alert: AlertService,
36 private projectSvr: ProjectService,
37 private fb: FormBuilder
39 // Define types (first one is special/placeholder)
40 this.projectTypes.unshift({ value: ProjectType.UNSET, display: "--Select a type--" });
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)]);
46 this.addProjectForm = fb.group({
48 pathCli: this.pathCliCtrl,
49 pathSvr: this.pathSvrCtrl,
50 label: ["", Validators.nullValidator],
55 // Auto create label name
56 this.pathCliCtrl.valueChanges
60 let last = n.split('/');
62 if (last.length > 0) {
64 if (nm === "" && last.length > 0) {
68 return "Project_" + nm;
71 if (value && !this.userEditedLabel) {
72 this.addProjectForm.patchValue({ label: value });
76 // Handle disabling of Server path
77 this.typeCtrl.valueChanges
79 .subscribe(valType => {
80 let dis = (valType === String(ProjectType.SYNCTHING));
81 this.pathSvrCtrl.reset({ value: "", disabled: dis });
86 this.cancelAction = false;
87 this.userEditedLabel = false;
88 this.childProjectModal.show();
92 this.childProjectModal.hide();
95 onKeyLabel(event: any) {
96 this.userEditedLabel = (this.addProjectForm.value.label !== "");
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>
103 onChangeLocalProject(e) {
104 if e.target.files.length < 1 {
105 console.log('NO files');
107 let dir = e.target.files[0].webkitRelativePath;
108 console.log("files: " + dir);
109 let u = URL.createObjectURL(e.target.files[0]);
112 onChangeLocalProject(e) {
116 if (this.cancelAction) {
120 let formVal = this.addProjectForm.value;
122 let 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
132 this.alert.info("Project " + prj.label + " successfully created.");
135 // Reset Value for the next creation
136 this.addProjectForm.reset();
137 let selectedType = this.projectTypes[0].value;
138 this.addProjectForm.patchValue({ type: selectedType });
142 this.alert.error("Configuration ERROR: " + err, 60);