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

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