Merge pull request #166 from FlowCI/feature/1600

Feature/1600

Author: gy2006

.run/start.run.xml

@@ -8,7 +8,7 @@
     <node-interpreter value="project" />
     <package-manager value="npm" />
     <envs>
-      <env name="VUE_APP_API_URL" value="http://172.18.29.67:8080" />
+      <env name="VUE_APP_API_URL" value="http://localhost:8080" />
     </envs>
     <method v="2" />
   </configuration>

package-lock.json

@@ -36,6 +36,7 @@
     "vue-clipboard2": "^0.3.1",
     "vue-i18n": "^7.8.0",
     "vue-router": "^3.0.3",
+    "vuedraggable": "^2.24.3",
     "vuetify": "^2.3.4",
     "vuex": "^3.0.1",
     "xterm": "^4.6.0",

package.json

@@ -22,6 +22,12 @@
       <flow-menu></flow-menu>
     </v-navigation-drawer>
 
+    <!-- global dialogs -->
+    <create-flow-dialog></create-flow-dialog>
+
+    <create-flow-group-dialog></create-flow-group-dialog>
+
+    <!-- main app view -->
     <v-app-bar app
                :clipped-left="$vuetify.breakpoint.lgAndUp"
                color="grey lighten-4">
@@ -63,10 +69,14 @@
   import actions from '@/store/actions'
   import { mapState } from 'vuex'
   import { connect, subscribeTopic, unsubscribeTopic } from '@/store/subscribe'
+  import CreateFlowDialog from "@/view/Flow/CreateDialog";
+  import CreateFlowGroupDialog from "@/view/Flow/CreateGroupDialog";
 
   export default {
     name: 'App',
     components: {
+      CreateFlowGroupDialog,
+      CreateFlowDialog,
       FlowMenu,
       AgentMenu,
       ProfileMenu,

src/App.vue

@@ -3,6 +3,7 @@
     <v-dialog
         v-model="show"
         :width="width"
+        @click:outside="onCancel"
     >
       <v-card>
         <v-card-title
@@ -20,22 +21,23 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn
-              v-if="this.cancelBtn"
-              :color="this.cancelBtn.color"
-              flat
-              @click="onCancelBtnClick"
-          >
-            {{ this.cancelBtn.text }}
+
+          <v-btn v-if="this.onCancel"
+                 small
+                 outlined
+                 min-width="70"
+                 color="warning"
+                 @click="onCancel"
+          >{{ $t('cancel') }}
           </v-btn>
 
-          <v-btn
-              v-if="this.confirmBtn"
-              :color="this.confirmBtn.color"
-              flat
-              @click="onConfirmBtnClick"
-          >
-            {{ this.confirmBtn.text }}
+          <v-btn v-if="this.onConfirm"
+                 small
+                 class="ml-6"
+                 min-width="70"
+                 color="primary"
+                 @click="onConfirm"
+          >{{ $t('confirm') }}
           </v-btn>
         </v-card-actions>
       </v-card>
@@ -44,73 +46,55 @@
 </template>
 
 <script>
-  export default {
-    name: 'Dialog',
-    props: {
-      dialog: {
-        type: Boolean,
-        required: true
-      },
-
-      width: {
-        type: Number,
-        required: false,
-        default () {
-          return 500
-        }
-      },
-
-      title: {
-        type: String,
-        required: false
-      },
-
-      content: {
-        type: String,
-        required: true
-      },
-
-      /**
-       * {
-       *   text: 'xxx',
-       *   action: function
-       *   color: 'xxx'
-       * }
-       */
-      confirmBtn: {
-        type: Object,
-        required: false
-      },
+export default {
+  name: 'Dialog',
+  props: {
+    dialog: {
+      type: Boolean,
+      required: true
+    },
 
-      cancelBtn: {
-        type: Object,
-        required: false
+    width: {
+      type: Number,
+      required: false,
+      default() {
+        return 500
       }
     },
-    data () {
-      return {
-        show: this.dialog
-      }
+
+    title: {
+      type: String,
+      required: false
     },
-    watch: {
-      dialog (newVal) {
-        this.show = newVal
-      }
+
+    content: {
+      type: String,
+      required: false
     },
-    methods: {
-      onConfirmBtnClick () {
-        if (this.confirmBtn.action) {
-          this.confirmBtn.action()
-        }
-      },
 
-      onCancelBtnClick () {
-        if (this.cancelBtn.action) {
-          this.cancelBtn.action()
-        }
-      }
+    onConfirm: {
+      type: Function,
+      required: false
+    },
+
+    onCancel: {
+      type: Function,
+      required: false
+    }
+  },
+  data() {
+    return {
+      show: this.dialog
+    }
+  },
+  watch: {
+    dialog(newVal) {
+      this.show = newVal
     }
+  },
+  methods: {
   }
+}
 </script>
 
 <style scoped>

src/components/Common/Dialog.vue

@@ -70,7 +70,7 @@
           return
         }
 
-        this.$store.dispatch(actions.flows.delete, this.flow.name).then(() => {
+        this.$store.dispatch(actions.flows.delete, this.flow).then(() => {
           this.onCloseClick()
           this.$router.push({path: `/flows`})
         })

src/components/Flow/OptionDeleteFlow.vue

@@ -56,14 +56,13 @@
 <script>
 import vars from '@/util/vars'
 import GitTestBtn from '@/components/Flow/GitTestBtn'
-import { FlowWrapper } from '@/util/flows'
 import { gitUrlRules } from '@/util/rules'
 import { mapState } from 'vuex'
 
 export default {
   name: 'OptionGitAccess',
   props: {
-    flow: {
+    wrapper: {
       required: true,
       type: Object
     }
@@ -94,10 +93,6 @@ export default {
       settings: state => state.settings.instance
     }),
 
-    wrapper() {
-      return new FlowWrapper(this.flow)
-    },
-
     webhook() {
       return this.settings.serverUrl + '/webhooks/' + this.wrapper.name
     }

src/components/Flow/OptionGitAccess.vue

@@ -56,6 +56,10 @@
         required: true
       }
     },
+    data() {
+      return {
+      }
+    },
     methods: {
       onTitleClick () {
         this.$router.push({path: `/flows/${this.wrapper.name}/jobs`})

src/components/Flow/SummaryCard.vue

@@ -129,7 +129,7 @@ export default {
 
 <style lang="scss" scoped>
 .job-item {
-  min-height: 68px;
+  min-height: 80px;
 }
 
 .commit-text {

src/components/Jobs/ListItem.vue

@@ -42,7 +42,8 @@ export default {
 
   flow: {
     name: '工作流',
-    create: '创建一个工作流',
+    create: '创建工作流',
+    create_group: '创建 group',
     search: '输入关键词搜索',
     settings: '设置',
     statistic: '统计',

src/i18n/cn.js

@@ -41,8 +41,9 @@ export default {
   },
 
   flow: {
-    name: 'flow',
-    create: 'Create a Flow',
+    name: 'flows',
+    create: 'Create a flow',
+    create_group: 'Create a group',
     search: 'Search by key words',
     settings: 'Settings',
     statistic: 'Statistic',

src/i18n/en.js

@@ -87,6 +87,10 @@ Vue.mixin({
 
     popCreateFlow(boolVal) {
       this.$store.commit(actions.app.popCreateFlow, boolVal)
+    },
+
+    popCreateGroup(boolVal) {
+      this.$store.commit(actions.app.popCreateGroup, boolVal)
     }
   }
 })