webapp/src/app/pages/projects/project-add-modal/project-add-modal.component.ts

   1 /**
   2 * @license
   3 * Copyright (C) 2017 "IoT.bzh"
   4 * Author Sebastien Douheret <sebastien@iot.bzh>
   5 *
   6 * Licensed under the Apache License, Version 2.0 (the "License");
   7 * you may not use this file except in compliance with the License.
   8 * You may obtain a copy of the License at
   9 *
  10 *   http://www.apache.org/licenses/LICENSE-2.0
  11 *
  12 * Unless required by applicable law or agreed to in writing, software
  13 * distributed under the License is distributed on an "AS IS" BASIS,
  14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15 * See the License for the specific language governing permissions and
  16 * limitations under the License.
  17 */
  18
  19 import { Component, Input, ViewChild, OnInit } from '@angular/core';
  20 import { Observable } from 'rxjs/Observable';
  21 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
  22 import { FormControl, FormGroup, Validators, ValidationErrors, FormBuilder, ValidatorFn, AbstractControl } from '@angular/forms';
  23
  24 // Import RxJs required methods
  25 import 'rxjs/add/operator/map';
  26 import 'rxjs/add/operator/filter';
  27 import 'rxjs/add/operator/debounceTime';
  28
  29 import { AlertService, IAlert } from '../../../@core-xds/services/alert.service';
  30 import { ProjectService, IProject, ProjectType, ProjectTypes } from '../../../@core-xds/services/project.service';
  31 import { XDSConfigService } from '../../../@core-xds/services/xds-config.service';
  32
  33
  34 @Component({
  35   selector: 'xds-project-add-modal',
  36   templateUrl: 'project-add-modal.component.html',
  37 })
  38 export class ProjectAddModalComponent implements OnInit {
  39   // @Input('server-id') serverID: string;
  40   private serverID: string;
  41
  42   cancelAction = false;
  43   userEditedLabel = false;
  44   projectTypes = Object.assign([], ProjectTypes);
  45
  46   addProjectForm: FormGroup;
  47   typeCtrl: FormControl;
  48   pathCliCtrl: FormControl;
  49   pathSvrCtrl: FormControl;
  50
  51   constructor(
  52     private alert: AlertService,
  53     private projectSvr: ProjectService,
  54     private XdsConfigSvr: XDSConfigService,
  55     private fb: FormBuilder,
  56     private activeModal: NgbActiveModal,
  57   ) {
  58     // Define types (first one is special/placeholder)
  59     this.projectTypes.unshift({ value: ProjectType.UNSET, display: '--Select a type--' });
  60
  61     this.typeCtrl = new FormControl(this.projectTypes[0].value, this.validatorProjType);
  62     this.pathCliCtrl = new FormControl('', this.validatorProjPath);
  63     this.pathSvrCtrl = new FormControl({ value: '', disabled: true }, this.validatorProjPath);
  64
  65     this.addProjectForm = fb.group({
  66       type: this.typeCtrl,
  67       pathCli: this.pathCliCtrl,
  68       pathSvr: this.pathSvrCtrl,
  69       label: ['', Validators.nullValidator],
  70     });
  71   }
  72
  73
  74   ngOnInit() {
  75     // Update server ID
  76     this.serverID = this.XdsConfigSvr.getCurServer().id;
  77     this.XdsConfigSvr.onCurServer().subscribe(svr => this.serverID = svr.id);
  78
  79     // Auto create label name
  80     this.pathCliCtrl.valueChanges
  81       .debounceTime(100)
  82       .filter(n => n)
  83       .map(n => {
  84         const last = n.split('/');
  85         let nm = n;
  86         if (last.length > 0) {
  87           nm = last.pop();
  88           if (nm === '' && last.length > 0) {
  89             nm = last.pop();
  90           }
  91         }
  92         return 'Project_' + nm;
  93       })
  94       .subscribe(value => {
  95         if (value && !this.userEditedLabel) {
  96           this.addProjectForm.patchValue({ label: value });
  97         }
  98       });
  99
 100     // Handle disabling of Server path
 101     this.typeCtrl.valueChanges
 102       .debounceTime(500)
 103       .subscribe(valType => {
 104         const dis = (valType === String(ProjectType.SYNCTHING));
 105         this.pathSvrCtrl.reset({ value: '', disabled: dis });
 106       });
 107   }
 108
 109   closeModal() {
 110     this.activeModal.close();
 111   }
 112
 113   onKeyLabel(event: any) {
 114     this.userEditedLabel = (this.addProjectForm.value.label !== '');
 115   }
 116
 117   onChangeLocalProject(e) {
 118   }
 119
 120   onSubmit() {
 121     if (this.cancelAction) {
 122       return;
 123     }
 124
 125     const formVal = this.addProjectForm.value;
 126
 127     const type = formVal['type'].value;
 128     this.projectSvr.add({
 129       serverId: this.serverID,
 130       label: formVal['label'],
 131       pathClient: formVal['pathCli'],
 132       pathServer: formVal['pathSvr'],
 133       type: formVal['type'],
 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.closeModal();
 139
 140         // Reset Value for the next creation
 141         this.addProjectForm.reset();
 142         const selectedType = this.projectTypes[0].value;
 143         this.addProjectForm.patchValue({ type: selectedType });
 144
 145       },
 146       err => {
 147         this.alert.error(err, 60);
 148         this.closeModal();
 149       });
 150   }
 151
 152   private validatorProjType(g: FormGroup): ValidationErrors | null {
 153     return (g.value !== ProjectType.UNSET) ? null : { validatorProjType: { valid: false } };
 154   }
 155
 156   private validatorProjPath(g: FormGroup): ValidationErrors | null {
 157     return (g.disabled || g.value !== '') ? null : { validatorProjPath: { valid: false } };
 158   }
 159
 160 }