update files

index.html

@@ -11,7 +11,7 @@
     <header class="fn-clear">
       <app-configure
         :configure.sync="configure"
-        :unique-projects.sync="uniqueProjects">
+        :unique.sync="unique">
       </app-configure>
       <window-control></window-control>
     </header>
@@ -25,7 +25,7 @@
       <app-main
         :active-index.sync="activeIndex"
         :projects.sync="configure.projects"
-        :unique-projects.sync="uniqueProjects">
+        :unique.sync="unique">
       </app-main>
     </main>
     <no-data :projects="configure.projects"></no-data>

static/css/index.css

@@ -478,16 +478,10 @@ header [class*=" icon-"] {
 .ui-sub-item .ui-item-error {
   margin: 5px 0 -10px;
 }
-.ui-submit-tips:before,
 .ui-item-error span:before {
   content: '* ';
   font-weight: bold;;
 }
-.ui-submit-tips {
-  color: #f00;
-  text-align: center;
-  padding: 0 0 15px;
-}
 .ui-no-data {
   position: absolute;
   top: 32px;

static/js/app/index.js

@@ -25,7 +25,7 @@ window.addEventListener('DOMContentLoaded', function (){
         configure: configure
       },
       computed: {
-        uniqueProjects: function (){
+        unique: function (){
           var cache = {};
 
           this.configure.projects.forEach(function (project){
@@ -56,7 +56,8 @@ window.addEventListener('DOMContentLoaded', function (){
           configure.projects = configure.projects || [];
           app.configure = configure;
 
-          app.$broadcast('configure-refresh');
+          app.$broadcast('reset-input');
+          app.$broadcast('reset-error');
         } else {
           init(configure);
         }

static/js/components/app-configure/app-configure.html

@@ -16,10 +16,9 @@
     <span></span>
   </div>
   <div class="ui-popup-content">
-    <div v-show="submitError" class="ui-submit-tips">{{ submitError }}</div>
+    <form @submit.prevent="add">
-    <form @submit.prevent="add" @focusin="focus">
       <ul>
-        <li v-ref:base is="project-base" :name.sync="name" :path.sync="path"></li>
+        <li v-ref:base is="project-base" :name.sync="name" :path.sync="path" :unique="unique"></li>
         <li class="ui-popup-control">
           <input type="submit" class="ui-button" value="确定"/>
           <input @click.stop="hidePopup" type="button" class="ui-button ui-button-orange" value="取消"/>

static/js/components/app-configure/index.js

@@ -19,7 +19,7 @@ module.exports = Vue.component('app-configure', {
       twoWay: true,
       required: true
     },
-    uniqueProjects: {
+    unique: {
       type: Object,
       required: true
     }
@@ -28,49 +28,39 @@ module.exports = Vue.component('app-configure', {
     return {
       name: '',
       path: '',
-      submitError: '',
       showPopup: false
     }
   },
   methods: {
-    focus: function (event){
-      if (event.target.type === 'text') {
-        this.submitError = '';
-      }
-    },
     appConfigure: function (command, configure){
       ipc.send('app-configure', command, configure);
     },
     hidePopup: function (){
       this.showPopup = false;
-      this.name = '';
+      // clean input
-      this.path = '';
+      var base = this.$refs.base;
-      this.submitError = '';
 
-      // clean error
+      base.$emit('reset-input');
-      this.$broadcast('reset-error');
+      base.$emit('reset-error');
     },
     add: function (){
-      this.$broadcast('submit');
+      var base = this.$refs.base;
 
-      if (this.name && this.path) {
+      if (base.isValid()) {
-        if (this.uniqueProjects[this.name]) {
+        this.showPopup = false;
-          this.submitError = '项目已存在';
-        } else {
-          this.showPopup = false;
-          this.configure.projects.push({ name: this.name, path: this.path, env: [], command: [] });
 
-          this.name = '';
+        this.configure.projects.push({
-          this.path = '';
+          name: this.name,
-          this.submitError = '';
+          path: this.path,
+          env: [],
+          command: []
+        });
 
-          // clean error
+        // clean input
-          this.$broadcast('reset-error');
+        base.$emit('reset-input');
-
+        // send message
-          // send message
+        this.$dispatch('change-active', this.configure.projects.length - 1, true);
-          this.$dispatch('change-active', this.configure.projects.length - 1, true);
+        this.$dispatch('save-configure');
-          this.$dispatch('save-configure');
-        }
       }
     }
   },

static/js/components/app-main/app-main.html

@@ -1,7 +1,7 @@
 <project-configure
   :show.sync="showSetting"
   :project="project"
-  :unique-projects.sync="uniqueProjects">
+  :unique.sync="unique">
 </project-configure>
 <div v-show="project.name && project.path" class="ui-project-stage">
   <div class="ui-control-bar fn-clear">

static/js/components/app-main/index.js

@@ -24,7 +24,7 @@ module.exports = Vue.component('app-main', {
       twoWay: true,
       required: true
     },
-    uniqueProjects: {
+    unique: {
       type: Object,
       required: true
     }

static/js/components/dynamic-item/index.js

@@ -95,7 +95,7 @@ module.exports = Vue.component('dynamic-item', {
       this.nameError = '';
       this.valueError = '';
     },
-    'reset-item-input': function (){
+    'reset-input': function (){
       this.name = '';
       this.value = '';
     }

static/js/components/project-base/index.js

@@ -18,6 +18,10 @@ module.exports = Vue.component('project-base', {
       twoWay: true,
       default: ''
     },
+    unique: {
+      type: Object,
+      required: true
+    },
     path: {
       type: String,
       twoWay: true,
@@ -31,23 +35,19 @@ module.exports = Vue.component('project-base', {
     };
   },
   methods: {
-    focus: function (key, event){
+    focus: function (key){
-      if (event.target.type === 'text') {
+      this[key] = '';
-        this[key] = '';
-      }
-    }
-  },
-  events: {
-    'reset-error': function (){
-      this.nameError = '';
-      this.pathError = '';
     },
-    'submit': function (){
+    isValid: function (){
       this.name = this.name.trim();
       this.path = this.path.trim();
 
       if (this.name) {
-        this.nameError = '';
+        if (this.unique[this.name]) {
+          this.nameError = '项目已存在';
+        } else {
+          this.nameError = '';
+        }
       } else {
         this.nameError = '项目名称不能为空';
       }
@@ -57,6 +57,18 @@ module.exports = Vue.component('project-base', {
       } else {
         this.pathError = '项目路径不能为空';
       }
+
+      return !this.nameError && !this.pathError;
+    }
+  },
+  events: {
+    'reset-error': function (){
+      this.nameError = '';
+      this.pathError = '';
+    },
+    'reset-input': function (){
+      this.name = '';
+      this.path = '';
     }
   }
 });

static/js/components/project-base/project-base.html

@@ -1,12 +1,12 @@
 <li>
   <label>项目名称：</label>
-  <input type="text" v-model="name" placeholder="项目名称" lazy @focus="focus('nameError', $event)"/>
+  <input type="text" v-model="name" placeholder="项目名称" lazy @focus="focus('nameError')"/>
 </li>
 <li v-show="nameError" class="ui-item-error">
   <label class="fn-invisible">&emsp;&emsp;&emsp;&emsp;&emsp;</label>
   <span>{{ nameError }}</span>
 </li>
-<li @focusin="focus('pathError', $event)">
+<li @focusin="focus('pathError')">
   <directory label="项目路径" :path.sync="path"></directory>
 </li>
 <li v-show="pathError" class="ui-item-error">

static/js/components/project-configure/index.js

@@ -24,76 +24,55 @@ module.exports = Vue.component('project-configure', {
       type: Object,
       required: true
     },
-    uniqueProjects: {
+    unique: {
       type: Object,
-      twoWay: true,
       required: true
     }
   },
   data: function (){
     return {
-      nameError: '',
+      clone: null
-      pathError: '',
-      submitError: '',
-      projectClone: null
     }
   },
   watch: {
     project: function (project){
-      this.projectClone = util.clone(project);
+      this.reset();
+      this.clone = util.clone(project);
     }
   },
   methods: {
-    focus: function (event){
+    reset: function (){
-      if (event.target.type === 'text') {
+      // clean item input
-        this.submitError = '';
+      var base = this.$refs.base;
-      }
+      var env = this.$refs.env;
+      var command = this.$refs.command;
+
+      base.$emit('reset-error');
+      env.$emit('reset-error');
+      command.$emit('reset-error');
+      env.$emit('reset-input');
+      command.$emit('reset-input');
     },
     edit: function (){
-      var name = this.projectClone.name;
+      if (this.$refs.base.isValid()) {
-      var originName = this.project.name;
+        this.show = false;
 
-      if (this.projectClone.name && this.projectClone.path) {
+        // send message
-        if (name !== originName && this.uniqueProjects[name]) {
+        this.$dispatch('edit', util.clone(this.clone));
-          this.submitError = '项目已存在';
-        } else {
-          this.show = false;
 
-          // clean error
+        // clean item input
-          this.submitError = '';
+        this.reset();
-
-          // send message
-          this.$dispatch('edit', util.clone(this.projectClone));
-
-          // clean error
-          this.$broadcast('reset-error');
-          // clean input
-          this.$broadcast('reset-item-input');
-        }
       }
     },
     cancel: function (){
       this.show = false;
-      this.submitError = '';
+      this.clone = util.clone(this.project);
-      this.projectClone = util.clone(this.project);
 
-      // clean error
+      // clean item input
-      this.$broadcast('reset-error');
+      this.reset();
-      // clean input
-      this.$broadcast('reset-item-input');
-    }
-  },
-  events: {
-    'configure-refresh': function (){
-      this.submitError = '';
-
-      // clean error
-      this.$broadcast('reset-error');
-      // clean input
-      this.$broadcast('reset-item-input');
     }
   },
   created: function (){
-    this.projectClone = util.clone(this.project);
+    this.clone = util.clone(this.project);
   }
 });

static/js/components/project-configure/project-configure.html

@@ -1,5 +1,5 @@
 <div v-show="show" class="ui-project-setting">
-  <form @submit.prevent="edit" @focusin="focus">
+  <form @submit.prevent="edit">
     <div class="ui-control-bar fn-clear">
       <div class="fn-right">
         <input type="submit" class="ui-button" value="确认"/>
@@ -7,16 +7,31 @@
       </div>
     </div>
     <div class="ui-project-configure">
-      <div v-show="submitError" class="ui-submit-tips">{{ submitError }}</div>
       <ul>
-        <li is="project-base" :name.sync="projectClone.name" :path.sync="projectClone.path"></li>
+        <li
+          v-ref:base
+          is="project-base"
+          :name.sync="clone.name"
+          :path.sync="clone.path"
+          :unique="unique">
+        </li>
         <li class="ui-sub-item">
           <label>环境变量：</label>
-          <dynamic-item name-label="变量名" value-label="变量值" :items.sync="projectClone.env"></dynamic-item>
+          <dynamic-item
+            v-ref:env
+            name-label="变量名"
+            value-label="变量值"
+            :items.sync="clone.env">
+          </dynamic-item>
         </li>
         <li id="add-cmd" class="ui-sub-item">
           <label>项目命令：</label>
-          <dynamic-item name-label="名称" value-label="命令" :items.sync="projectClone.command"></dynamic-item>
+          <dynamic-item
+            v-ref:command
+            name-label="名称"
+            value-label="命令"
+            :items.sync="clone.command">
+          </dynamic-item>
         </li>
       </ul>
     </div>