create-project.component.ts 4.16 KB
Newer Older
Meina Zhou's avatar
Meina Zhou committed
1 2

import {debounceTime} from 'rxjs/operators';
wy65701436's avatar
wy65701436 committed
3 4 5 6 7 8 9 10 11 12 13 14 15
// Copyright (c) 2017 VMware, Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
Steven Zou's avatar
Steven Zou committed
16 17 18 19 20 21 22
import {
  Component,
  EventEmitter,
  Output,
  ViewChild,
  OnInit,
  OnDestroy
23 24 25
} from "@angular/core";
import { Response } from "@angular/http";
import { NgForm } from "@angular/forms";
kunw's avatar
kunw committed
26

Meina Zhou's avatar
Meina Zhou committed
27
import { Subject } from "rxjs";
Deng, Qian's avatar
Deng, Qian committed
28
import { TranslateService } from "@ngx-translate/core";
kunw's avatar
kunw committed
29

30 31
import { MessageHandlerService } from "../../shared/message-handler/message-handler.service";
import { InlineAlertComponent } from "../../shared/inline-alert/inline-alert.component";
kunw's avatar
kunw committed
32

Deng, Qian's avatar
Deng, Qian committed
33 34
import { Project } from "../project";
import { ProjectService } from "../project.service";
35
import { errorHandler } from '@angular/platform-browser/src/browser';
Deng, Qian's avatar
Deng, Qian committed
36

kunw's avatar
kunw committed
37

Steven Zou's avatar
Steven Zou committed
38

kunw's avatar
kunw committed
39
@Component({
40 41
  selector: "create-project",
  templateUrl: "create-project.component.html",
42
  styleUrls: ["create-project.scss"]
kunw's avatar
kunw committed
43
})
pfh's avatar
pfh committed
44
export class CreateProjectComponent implements OnInit, OnDestroy {
45

kunw's avatar
kunw committed
46 47
  projectForm: NgForm;

48
  @ViewChild("projectForm")
kunw's avatar
kunw committed
49 50
  currentForm: NgForm;

kunw's avatar
kunw committed
51
  project: Project = new Project();
kunw's avatar
kunw committed
52
  initVal: Project = new Project();
kunw's avatar
kunw committed
53

kunw's avatar
kunw committed
54
  createProjectOpened: boolean;
55

kunw's avatar
kunw committed
56
  hasChanged: boolean;
57
  isSubmitOnGoing = false;
kunw's avatar
kunw committed
58

59 60
  staticBackdrop = true;
  closable = false;
kunw's avatar
kunw committed
61

62 63 64
  isNameValid = true;
  nameTooltipText = "PROJECT.NAME_TOOLTIP";
  checkOnGoing = false;
Steven Zou's avatar
Steven Zou committed
65
  proNameChecker: Subject<string> = new Subject<string>();
66

kunw's avatar
kunw committed
67
  @Output() create = new EventEmitter<boolean>();
kunw's avatar
kunw committed
68
  @ViewChild(InlineAlertComponent)
kunw's avatar
kunw committed
69
  inlineAlert: InlineAlertComponent;
kunw's avatar
kunw committed
70

71 72 73
  constructor(private projectService: ProjectService,
    private translateService: TranslateService,
    private messageHandlerService: MessageHandlerService) { }
kunw's avatar
kunw committed
74

Steven Zou's avatar
Steven Zou committed
75
  ngOnInit(): void {
Meina Zhou's avatar
Meina Zhou committed
76 77
    this.proNameChecker.pipe(
      debounceTime(300))
Steven Zou's avatar
Steven Zou committed
78 79
      .subscribe((name: string) => {
        let cont = this.currentForm.controls["create_project_name"];
pfh's avatar
pfh committed
80
        if (cont) {
Steven Zou's avatar
Steven Zou committed
81 82
          this.isNameValid = cont.valid;
          if (this.isNameValid) {
83
            // Check exiting from backend
Steven Zou's avatar
Steven Zou committed
84
            this.projectService
Yogi_Wang's avatar
Yogi_Wang committed
85 86
              .checkProjectExists(cont.value)
              .subscribe(() => {
87
                // Project existing
Steven Zou's avatar
Steven Zou committed
88
                this.isNameValid = false;
89
                this.nameTooltipText = "PROJECT.NAME_ALREADY_EXISTS";
Steven Zou's avatar
Steven Zou committed
90
                this.checkOnGoing = false;
Yogi_Wang's avatar
Yogi_Wang committed
91
              }, error => {
Steven Zou's avatar
Steven Zou committed
92 93 94
                this.checkOnGoing = false;
              });
          } else {
95
            this.nameTooltipText = "PROJECT.NAME_TOOLTIP";
Steven Zou's avatar
Steven Zou committed
96 97 98 99 100 101 102 103 104
          }
        }
      });
  }

  ngOnDestroy(): void {
    this.proNameChecker.unsubscribe();
  }

kunw's avatar
kunw committed
105
  onSubmit() {
106
    if (this.isSubmitOnGoing) {
107 108
      return ;
    }
109

110
    this.isSubmitOnGoing = true;
kunw's avatar
kunw committed
111
    this.projectService
112
      .createProject(this.project.name, this.project.metadata)
113 114
      .subscribe(
      status => {
115
        this.isSubmitOnGoing = false;
116

117
        this.create.emit(true);
118
        this.messageHandlerService.showSuccess("PROJECT.CREATED_SUCCESS");
119 120 121
        this.createProjectOpened = false;
      },
      error => {
122
        this.isSubmitOnGoing = false;
123
        this.inlineAlert.showInlineError(error);
124
      });
kunw's avatar
kunw committed
125 126
  }

kunw's avatar
kunw committed
127 128 129 130 131
  onCancel() {
      this.createProjectOpened = false;
  }


kunw's avatar
kunw committed
132 133
  newProject() {
    this.project = new Project();
kunw's avatar
kunw committed
134
    this.hasChanged = false;
135 136
    this.isNameValid = true;

kunw's avatar
kunw committed
137
    this.createProjectOpened = true;
138
    this.inlineAlert.close();
Steven Zou's avatar
Steven Zou committed
139 140
  }

pengpengshui's avatar
pengpengshui committed
141
  public get isValid(): boolean {
pengpengshui's avatar
pengpengshui committed
142 143
    return this.currentForm &&
    this.currentForm.valid &&
144
    !this.isSubmitOnGoing &&
Steven Zou's avatar
Steven Zou committed
145 146
    this.isNameValid &&
    !this.checkOnGoing;
147 148
  }

149
  // Handle the form validation
Steven Zou's avatar
Steven Zou committed
150 151 152 153
  handleValidation(): void {
    let cont = this.currentForm.controls["create_project_name"];
    if (cont) {
      this.proNameChecker.next(cont.value);
154
    }
155

156
  }
kunw's avatar
kunw committed
157 158
}