New dashboard look & feel

[src/xds/xds-agent.git] / webapp / src / app / pages / projects / project-add-modal / project-add-modal.component.ts

diff --git a/webapp/src/app/pages/projects/project-add-modal/project-add-modal.component.ts b/webapp/src/app/pages/projects/project-add-modal/project-add-modal.component.ts
new file mode 100644 (file)
index 0000000..640ac5c
--- /dev/null
+++ b/webapp/src/app/pages/projects/project-add-modal/project-add-modal.component.ts
@@ -0,0 +1,143 @@
+import { Component, Input, ViewChild, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { FormControl, FormGroup, Validators, ValidationErrors, FormBuilder, ValidatorFn, AbstractControl } from '@angular/forms';
+
+// Import RxJs required methods
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/filter';
+import 'rxjs/add/operator/debounceTime';
+
+import { AlertService, IAlert } from '../../../@core-xds/services/alert.service';
+import { ProjectService, IProject, ProjectType, ProjectTypes } from '../../../@core-xds/services/project.service';
+import { XDSConfigService } from '../../../@core-xds/services/xds-config.service';
+
+
+@Component({
+  selector: 'xds-project-add-modal',
+  templateUrl: 'project-add-modal.component.html',
+  styleUrls: ['project-add-modal.component.scss']
+})
+export class ProjectAddModalComponent implements OnInit {
+  // @Input('server-id') serverID: string;
+  private serverID: string;
+
+  cancelAction = false;
+  userEditedLabel = false;
+  projectTypes = ProjectTypes;
+
+  addProjectForm: FormGroup;
+  typeCtrl: FormControl;
+  pathCliCtrl: FormControl;
+  pathSvrCtrl: FormControl;
+
+  constructor(
+    private alert: AlertService,
+    private projectSvr: ProjectService,
+    private XdsConfigSvr: XDSConfigService,
+    private fb: FormBuilder,
+    private activeModal: NgbActiveModal
+  ) {
+    // Define types (first one is special/placeholder)
+    this.projectTypes.unshift({ value: ProjectType.UNSET, display: '--Select a type--' });
+
+    this.typeCtrl = new FormControl(this.projectTypes[0].value, this.validatorProjType);
+    this.pathCliCtrl = new FormControl('', this.validatorProjPath);
+    this.pathSvrCtrl = new FormControl({ value: '', disabled: true }, this.validatorProjPath);
+
+    this.addProjectForm = fb.group({
+      type: this.typeCtrl,
+      pathCli: this.pathCliCtrl,
+      pathSvr: this.pathSvrCtrl,
+      label: ['', Validators.nullValidator],
+    });
+  }
+
+
+  ngOnInit() {
+    // Update server ID
+    this.serverID = this.XdsConfigSvr.getCurServer().id;
+    this.XdsConfigSvr.onCurServer().subscribe(svr => this.serverID = svr.id);
+
+    // Auto create label name
+    this.pathCliCtrl.valueChanges
+      .debounceTime(100)
+      .filter(n => n)
+      .map(n => {
+        const last = n.split('/');
+        let nm = n;
+        if (last.length > 0) {
+          nm = last.pop();
+          if (nm === '' && last.length > 0) {
+            nm = last.pop();
+          }
+        }
+        return 'Project_' + nm;
+      })
+      .subscribe(value => {
+        if (value && !this.userEditedLabel) {
+          this.addProjectForm.patchValue({ label: value });
+        }
+      });
+
+    // Handle disabling of Server path
+    this.typeCtrl.valueChanges
+      .debounceTime(500)
+      .subscribe(valType => {
+        const dis = (valType === String(ProjectType.SYNCTHING));
+        this.pathSvrCtrl.reset({ value: '', disabled: dis });
+      });
+  }
+
+  closeModal() {
+    this.activeModal.close();
+  }
+
+  onKeyLabel(event: any) {
+    this.userEditedLabel = (this.addProjectForm.value.label !== '');
+  }
+
+  onChangeLocalProject(e) {
+  }
+
+  onSubmit() {
+    if (this.cancelAction) {
+      return;
+    }
+
+    const formVal = this.addProjectForm.value;
+
+    const type = formVal['type'].value;
+    this.projectSvr.Add({
+      serverId: this.serverID,
+      label: formVal['label'],
+      pathClient: formVal['pathCli'],
+      pathServer: formVal['pathSvr'],
+      type: formVal['type'],
+      // FIXME: allow to set defaultSdkID from New Project config panel
+    })
+      .subscribe(prj => {
+        this.alert.info('Project ' + prj.label + ' successfully created.');
+        this.closeModal();
+
+        // Reset Value for the next creation
+        this.addProjectForm.reset();
+        const selectedType = this.projectTypes[0].value;
+        this.addProjectForm.patchValue({ type: selectedType });
+
+      },
+      err => {
+        this.alert.error(err, 60);
+        this.closeModal();
+      });
+  }
+
+  private validatorProjType(g: FormGroup): ValidationErrors | null {
+    return (g.value !== ProjectType.UNSET) ? null : { validatorProjType: { valid: false } };
+  }
+
+  private validatorProjPath(g: FormGroup): ValidationErrors | null {
+    return (g.disabled || g.value !== '') ? null : { validatorProjPath: { valid: false } };
+  }
+
+}