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   styleUrls: ['project-add-modal.component.scss'],
  38 })
  39 export class ProjectAddModalComponent implements OnInit {
  40   // @Input('server-id') serverID: string;
  41   private serverID: string;
  42
  43   cancelAction = false;
  44   userEditedLabel = false;
  45   projectTypes = Object.assign([], ProjectTypes);
  46
  47   addProjectForm: FormGroup;
  48   typeCtrl: FormControl;
  49   pathCliCtrl: FormControl;
  50   pathSvrCtrl: FormControl;
  51
  52   constructor(
  53     private alert: AlertService,
  54     private projectSvr: ProjectService,
  55     private XdsConfigSvr: XDSConfigService,
  56     private fb: FormBuilder,
  57     private activeModal: NgbActiveModal,
  58   ) {
  59     // Define types (first one is special/placeholder)
  60     this.projectTypes.unshift({ value: ProjectType.UNSET, display: '--Select a type--' });
  61
  62     this.typeCtrl = new FormControl(this.projectTypes[0].value, this.validatorProjType);
  63     this.pathCliCtrl = new FormControl('', this.validatorProjPath);
  64     this.pathSvrCtrl = new FormControl({ value: '', disabled: true }, this.validatorProjPath);
  65
  66     this.addProjectForm = fb.group({
  67       type: this.typeCtrl,
  68       pathCli: this.pathCliCtrl,
  69       pathSvr: this.pathSvrCtrl,
  70       label: ['', Validators.nullValidator],
  71     });
  72   }
  73
  74
  75   ngOnInit() {
  76     // Update server ID
  77     this.serverID = this.XdsConfigSvr.getCurServer().id;
  78     this.XdsConfigSvr.onCurServer().subscribe(svr => this.serverID = svr.id);
  79
  80     // Auto create label name
  81     this.pathCliCtrl.valueChanges
  82       .debounceTime(100)
  83       .filter(n => n)
  84       .map(n => {
  85         const last = n.split('/');
  86         let nm = n;
  87         if (last.length > 0) {
  88           nm = last.pop();
  89           if (nm === '' && last.length > 0) {
  90             nm = last.pop();
  91           }
  92         }
  93         return 'Project_' + nm;
  94       })
  95       .subscribe(value => {
  96         if (value && !this.userEditedLabel) {
  97           this.addProjectForm.patchValue({ label: value });
  98         }
  99       });
 100
 101     // Handle disabling of Server path
 102     this.typeCtrl.valueChanges
 103       .debounceTime(500)
 104       .subscribe(valType => {
 105         const dis = (valType === String(ProjectType.SYNCTHING));
 106         this.pathSvrCtrl.reset({ value: '', disabled: dis });
 107       });
 108   }
 109
 110   closeModal() {
 111     this.activeModal.close();
 112   }
 113
 114   onKeyLabel(event: any) {
 115     this.userEditedLabel = (this.addProjectForm.value.label !== '');
 116   }
 117
 118   onChangeLocalProject(e) {
 119   }
 120
 121   onSubmit() {
 122     if (this.cancelAction) {
 123       return;
 124     }
 125
 126     const formVal = this.addProjectForm.value;
 127
 128     const type = formVal['type'].value;
 129     this.projectSvr.add({
 130       serverId: this.serverID,
 131       label: formVal['label'],
 132       pathClient: formVal['pathCli'],
 133       pathServer: formVal['pathSvr'],
 134       type: formVal['type'],
 135       // FIXME: allow to set defaultSdkID from New Project config panel
 136     })
 137       .subscribe(prj => {
 138         this.alert.info('Project ' + prj.label + ' successfully created.');
 139         this.closeModal();
 140
 141         // Reset Value for the next creation
 142         this.addProjectForm.reset();
 143         const selectedType = this.projectTypes[0].value;
 144         this.addProjectForm.patchValue({ type: selectedType });
 145
 146       },
 147       err => {
 148         this.alert.error(err, 60);
 149         this.closeModal();
 150       });
 151   }
 152
 153   private validatorProjType(g: FormGroup): ValidationErrors | null {
 154     return (g.value !== ProjectType.UNSET) ? null : { validatorProjType: { valid: false } };
 155   }
 156
 157   private validatorProjPath(g: FormGroup): ValidationErrors | null {
 158     return (g.disabled || g.value !== '') ? null : { validatorProjPath: { valid: false } };
 159   }
 160
 161 }