Merge pull request #34 from BennieMeng/feature/ace-switch-error-notify

Feature/ace switch error notify

Author: wilhelmguo

src/frontend/src/app/shared/ace-editor/ace-editor-box/ace-editor-box.component.html

@@ -3,10 +3,13 @@
     <button style="margin-left: 10px" type="button"  (click)="format()">
       <clr-icon shape="view-list"></clr-icon>
     </button>
-    <select class="ace-select" [disabled]="!isValid" name="aceMode" (change)="aceModeChange()" [(ngModel)]="aceMode">
-      <option value="ace/mode/json" selected>JSON</option>
-      <option value="ace/mode/yaml">YAML</option>
-    </select>
+    <div class="select-box">
+      <select class="ace-select" [disabled]="!isValid" name="aceMode" (change)="aceModeChange()" [(ngModel)]="aceMode">
+        <option value="ace/mode/json" selected>JSON</option>
+        <option value="ace/mode/yaml">YAML</option>
+      </select>
+      <div class="select-mask" *ngIf="!isValid" (click)="clickEvent()"></div>
+    </div>
   </div>
   <div style="position: relative;height: 500px" #editorElement></div>
 </div>

src/frontend/src/app/shared/ace-editor/ace-editor-box/ace-editor-box.component.scss

@@ -31,3 +31,15 @@ div.aceeditor-menu {
   width: 100%;
   min-height: 535px;
 }
+.select-box{
+  display: inline-block;
+  position: relative;
+  .select-mask{
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+  }
+}

src/frontend/src/app/shared/ace-editor/ace-editor-box/ace-editor-box.component.ts

@@ -6,6 +6,7 @@ import * as ace from 'brace';
 import 'brace/mode/json';
 import 'brace/mode/yaml';
 import * as YAML from 'js-yaml';
+import {MessageHandlerService} from '../../message-handler/message-handler.service';
 
 @Component({
   selector: 'wayne-ace-editor-box',
@@ -22,7 +23,10 @@ export class AceEditorBoxComponent implements OnInit, OnDestroy {
   aceEditorMsgSub: Subscription;
   @Output() modalChange = new EventEmitter<any>();
 
-  constructor(public el: ElementRef, private aceEditorService: AceEditorService) {
+  constructor(
+    public el: ElementRef, 
+    private aceEditorService: AceEditorService,
+    private messageHandle: MessageHandlerService) {
   }
 
   ngOnInit() {
@@ -85,12 +89,14 @@ export class AceEditorBoxComponent implements OnInit, OnDestroy {
 
   aceModeChange() {
     this.editor.getSession().setMode(this.aceMode);
-    if (this.aceMode == 'ace/mode/json') {
-      let obj = YAML.load(this.editor.getValue());
-      this.editor.setValue(JSON.stringify(obj, null, 2));
-    } else {
-      let obj = JSON.parse(this.editor.getValue());
-      this.editor.setValue(YAML.dump(obj));
+    if (this.editor.getValue().trim() !== '') {
+      if (this.aceMode == 'ace/mode/json') {
+        let obj = YAML.load(this.editor.getValue());
+        this.editor.setValue(JSON.stringify(obj, null, 2));
+      } else {
+        let obj = JSON.parse(this.editor.getValue());
+        this.editor.setValue(YAML.dump(obj));
+      }
     }
     localStorage.setItem('aceMode', this.aceMode);
   }
@@ -112,12 +118,17 @@ export class AceEditorBoxComponent implements OnInit, OnDestroy {
     if (this.aceMode == 'ace/mode/json') {
       return this.editor.getValue();
     } else {
-      return JSON.stringify(YAML.load(this.editor.getValue()));
+      return JSON.stringify(YAML.load(this.editor.getValue())) || '';
     }
   }
 
+  clickEvent() {
+    this.messageHandle.showError('请检查文本格式是否正确');
+  }
+
   get isValid(): boolean {
     try {
+      if (this.editor.getValue().trim() === '') return true;
       if (this.aceMode == 'ace/mode/json') {
         JSON.parse(this.editor.getValue())
       } else {

src/frontend/src/app/shared/global-message/message.component.ts

@@ -62,7 +62,9 @@ export class MessageComponent implements OnInit, OnDestroy {
       message => {
         const index = this.infoList.length;
         message.state = 'show';
-        this.posiChange();
+        setTimeout(() => {
+          this.posiChange();
+        }, 0);
         this.infoList.push(message);
         this.timer[index] = setTimeout(() => {
           this.close(index);