From 6bff5791a6b91f030a8af674006dd1d080818fc0 Mon Sep 17 00:00:00 2001
From: break60 <790061044@qq.com>
Date: Thu, 17 Oct 2019 14:24:10 +0800
Subject: [PATCH] Resource authorization add file resource and UDF resource tab
 (#1043)

* Delete third party import license

* Resource authorization add file resource and UDF resource tab
---
 .../security/pages/users/_source/list.vue     |  35 ++-
 .../module/components/transfer/resource.vue   | 255 ++++++++++++++++++
 .../src/js/module/i18n/locale/en_US.js        |   2 +
 .../src/js/module/i18n/locale/zh_CN.js        |   2 +
 4 files changed, 289 insertions(+), 5 deletions(-)
 create mode 100644 dolphinscheduler-ui/src/js/module/components/transfer/resource.vue

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
index f8f3c4241c..e1dd05d29f 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
@@ -123,6 +123,7 @@
   import i18n from '@/module/i18n'
   import { mapActions } from 'vuex'
   import mTransfer from '@/module/components/transfer/transfer'
+  import mResource from '@/module/components/transfer/resource'
 
   export default {
     name: 'user-list',
@@ -218,13 +219,33 @@
           let sourceListPrs = _.map(data[0], v => {
             return {
               id: v.id,
-              name: v.alias
+              name: v.alias,
+              type: v.type
+            }
+          })
+          let fileSourceList = []
+          let udfSourceList = []
+          sourceListPrs.forEach((value,index,array)=>{
+            if(value.type =='FILE'){
+              fileSourceList.push(value)
+            } else{
+              udfSourceList.push(value)
             }
           })
           let targetListPrs = _.map(data[1], v => {
             return {
               id: v.id,
-              name: v.alias
+              name: v.alias,
+              type: v.type
+            }
+          })
+          let fileTargetList = []
+          let udfTargetList = []
+          targetListPrs.forEach((value,index,array)=>{
+            if(value.type =='FILE'){
+              fileTargetList.push(value)
+            } else{
+              udfTargetList.push(value)
             }
           })
           let self = this
@@ -235,7 +256,7 @@
             className: 'v-modal-custom',
             transitionName: 'opacityp',
             render (h) {
-              return h(mTransfer, {
+              return h(mResource, {
                 on: {
                   onUpdate (resourceIds) {
                     self._grantAuthorization('users/grant-file', {
@@ -249,8 +270,12 @@
                   }
                 },
                 props: {
-                  sourceListPrs: sourceListPrs,
-                  targetListPrs: targetListPrs,
+                  // sourceListPrs: sourceListPrs,
+                  // targetListPrs: targetListPrs,
+                  fileSourceList: fileSourceList,
+                  udfSourceList: udfSourceList,
+                  fileTargetList: fileTargetList,
+                  udfTargetList: udfTargetList,
                   type: {
                     name: `${i18n.$t('Resources')}`
                   }
diff --git a/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue b/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue
new file mode 100644
index 0000000000..0ab0d97510
--- /dev/null
+++ b/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue
@@ -0,0 +1,255 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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.
+ */
+<template>
+  <m-popup :ok-text="$t('Submit')" :nameText="type.name + $t('Authorize')" @ok="_ok" ref="popup">
+    <template slot="content">
+      <div class="clearfix transfer-model">
+        <div>
+            <x-button-group v-model="checkedValue" size="small">
+                <x-button type="ghost" value="fileResource" @click="_ckFile">{{$t('File resources')}}</x-button>
+                <x-button type="ghost" value="udfResource" @click="_ckUDf">{{$t('UDF resources')}}</x-button>
+            </x-button-group>
+        </div>
+        <div class="select-list-box">
+          <div class="tf-header">
+            <div class="title">{{type.name}}{{$t('List')}}</div>
+            <div class="count">（{{cacheSourceList.length}}）</div>
+          </div>
+          <!--<div class="tf-search">
+            <x-input v-model="searchSourceVal"
+                     @on-enterkey="_sourceQuery"
+                     @on-click-icon="_sourceQuery"
+                     size="small"
+                     placeholder="Please enter keyword"
+                     type="text"
+                     style="width:202px;">
+              <i slot="suffix" class="ans-icon-search"></i>
+            </x-input>
+          </div>-->
+          <div class="scrollbar tf-content">
+            <ul>
+              <li v-for="(item,$index) in sourceList" :key="item.id" @click="_ckSource(item)">
+                <span>{{item.name}}</span>
+                <a href="javascript:"></a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="select-oper-box">&nbsp;</div>
+        <div class="select-list-box">
+          <div class="tf-header">
+            <div class="title">{{$t('Selected')}}{{type.name}}</div>
+            <div class="count">（{{cacheTargetList.length}}）</div>
+          </div>
+          <!--<div class="tf-search">
+            <x-input v-model="searchTargetVal"
+                     @on-enterkey="_targetQuery"
+                     @on-click-icon="_targetQuery"
+                     size="small"
+                     placeholder="Please enter keyword"
+                     type="text"
+                     style="width:202px;">
+              <i slot="suffix" class="ans-icon-search"></i>
+            </x-input>
+          </div>-->
+          <div class="scrollbar tf-content">
+            <ul>
+              <li v-for="(item,$index) in targetList" :key="item.id" @click="_ckTarget(item)"><span>{{item.name}}</span></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </template>
+  </m-popup>
+</template>
+<script>
+  import _ from 'lodash'
+  import mPopup from '@/module/components/popup/popup'
+  import mListBoxF from '@/module/components/listBoxF/listBoxF'
+
+  export default {
+    name: 'transfer',
+    data () {
+      return {
+        checkedValue: 'fileResource',
+        sourceList: this.fileSourceList,
+        targetList: this.fileTargetList,
+        cacheSourceList: this.fileSourceList,
+        cacheTargetList: this.fileTargetList,
+
+        fileSource: this.fileSourceList,
+        fileTarget: this.fileTargetList,
+        udfSource: this.udfSourceList,
+        udfTarget: this.udfTargetList,
+        searchSourceVal: '',
+        searchTargetVal: ''
+      }
+    },
+    props: {
+      type: Object,
+      fileSourceList: Array,
+      udfSourceList: Array,
+      fileTargetList: Array,
+      udfTargetList: Array,
+    },
+    methods: {
+      _ok () {
+        this.$refs['popup'].spinnerLoading = true
+        setTimeout(() => {
+          this.$refs['popup'].spinnerLoading = false
+          this.$emit('onUpdate', _.map(this.fileTarget.concat(this.udfTarget), v => v.id).join(','))
+        }, 800)
+      },
+      _ckFile() {
+        this.checkedValue = "fileResource"
+        this.sourceList = this.fileSource
+        this.targetList = this.fileTarget
+        this.cacheSourceList = this.fileSource
+        this.cacheTargetList = this.fileTarget
+      },
+      _ckUDf() {
+        this.checkedValue = "udfResource"
+        this.sourceList = this.udfSource
+        this.targetList = this.udfTarget
+        this.cacheSourceList = this.udfSource
+        this.cacheTargetList = this.udfTarget
+      },
+      _sourceQuery () {
+        this.sourceList = this.sourceList.filter(v => v.name.indexOf(this.searchSourceVal) > -1)
+      },
+      _targetQuery () {
+        this.targetList = this.targetList.filter(v => v.name.indexOf(this.searchTargetVal) > -1)
+      },
+      _ckSource (item) {
+        this.targetList = this.cacheTargetList
+        this.targetList.unshift(item)
+        this.searchTargetVal = ''
+        let i1 = _.findIndex(this.sourceList, v => item.id === v.id)
+        this.sourceList.splice(i1, 1)
+        let i2 = _.findIndex(this.cacheSourceList, v => item.id === v.id)
+        if (i2 !== -1) {
+          this.cacheSourceList.splice(i2, 1)
+        }
+        if(this.checkedValue == "fileResource") {
+            this.fileTarget = this.targetList
+            this.fileSource = this.sourceList
+        } else {
+            this.udfTarget = this.targetList
+            this.udfSource = this.sourceList
+        }
+      },
+      _ckTarget (item) {
+        this.sourceList = this.cacheSourceList
+        this.sourceList.unshift(item)
+        this.searchSourceVal = ''
+        let i1 = _.findIndex(this.targetList, v => item.id === v.id)
+        this.targetList.splice(i1, 1)
+        let i2 = _.findIndex(this.cacheTargetList, v => item.id === v.id)
+        if (i2 !== -1) {
+          this.cacheTargetList.splice(i2, 1)
+        }
+        if(this.checkedValue == "fileResource") {
+            this.fileSource = this.sourceList
+            this.fileTarget = this.targetList
+        } else {
+            this.udfSource = this.sourceList
+            this.udfTarget = this.targetList
+        }
+      }
+    },
+    watch: {
+      searchSourceVal (val) {
+        if (!val) {
+          this.sourceList = _.cloneDeep(this.cacheSourceList)
+          return
+        }
+        this._sourceQuery()
+      },
+      searchTargetVal (val) {
+        if (!val) {
+          this.targetList = _.cloneDeep(this.cacheTargetList)
+          return
+        }
+        this._targetQuery()
+      }
+    },
+    components: { mPopup, mListBoxF }
+  }
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+  .transfer-model {
+    padding: 0 20px;
+    .select-list-box {
+      width: 220px;
+      float: left;
+      border: 1px solid #dcdee2;
+      border-radius: 3px;
+      .tf-header {
+        height: 36px;
+        line-height: 36px;
+        background: #f9fafc;
+        position: relative;
+        border-bottom: 1px solid #dcdee2;
+        margin-bottom: 8px;
+        .title {
+          position: absolute;
+          left: 8px;
+          top: 0;
+        }
+        .count {
+          position: absolute;
+          right: 8px;
+          top: 0;
+          font-size: 12px;
+        }
+      }
+      .tf-search {
+        background: #fff;
+        padding: 8px;
+        .fa-search {
+          color: #999;
+        }
+      }
+      .tf-content {
+        height: 280px;
+        ul {
+          li {
+            height: 28px;
+            line-height: 28px;
+            cursor: pointer;
+            span {
+              padding-left: 10px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 210px;
+              display: inline-block;
+            }
+            &:hover {
+              background: #f6faff;
+            }
+          }
+        }
+      }
+    }
+    .select-oper-box {
+      width: 20px;
+      float: left;
+    }
+  }
+</style>
diff --git a/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js b/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
index 3300d5dd12..fbcb744639 100644
--- a/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
+++ b/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
@@ -174,6 +174,8 @@ export default {
   'Please enter the correct mobile phone format': 'Please enter the correct mobile phone format',
   'Project': 'Project',
   'Authorize': 'Authorize',
+  'File resources': 'File resources',
+  'UDF resources': 'UDF resources',
   'Edit alarm group': 'Edit alarm group',
   'Create alarm group': 'Create alarm group',
   'Group Name': 'Group Name',
diff --git a/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js b/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js
index 4cf6222ae9..1b1672ffa9 100644
--- a/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js
+++ b/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js
@@ -174,6 +174,8 @@ export default {
   'Please enter the correct mobile phone format': '请输入正确的手机格式',
   'Project': '项目',
   'Authorize': '授权',
+  'File resources': '文件资源',
+  'UDF resources': 'UDF资源',
   'Edit alarm group': '编辑告警组',
   'Create alarm group': '创建告警组',
   'Group Name': '组名称',