Merge pull request #944 from agalwood/feature/improve_detail_20210513

feat: improve task detail
agalwood · May 15, 2021 · 58cfd2b · 58cfd2b
2 parents 85ae4cd + 804f864
commit 58cfd2b
Show file tree

Hide file tree

Showing 54 changed files with 684 additions and 895 deletions.
diff --git a/package.json b/package.json
@@ -204,9 +204,9 @@
     "electron-is": "^3.0.0",
     "electron-log": "^4.3.5",
     "electron-store": "^8.0.0",
-    "electron-updater": "^4.3.8",
+    "electron-updater": "^4.3.9",
     "element-ui": "^2.15.1",
-    "i18next": "^20.2.2",
+    "i18next": "^20.2.4",
     "lodash": "^4.17.21",
     "node-fetch": "^2.6.1",
     "normalize.css": "^8.0.1",
@@ -221,34 +221,34 @@
     "ws": "^7.4.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.0",
+    "@babel/core": "^7.14.2",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-transform-runtime": "^7.13.15",
-    "@babel/preset-env": "^7.14.1",
+    "@babel/plugin-transform-runtime": "^7.14.2",
+    "@babel/preset-env": "^7.14.2",
     "@babel/register": "^7.13.16",
     "@electron/remote": "^1.1.0",
     "@motrix/multispinner": "^0.2.2",
     "@vue/eslint-config-standard": "^6.0.0",
-    "ajv": "^8.2.0",
+    "ajv": "^8.4.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-component": "^1.1.1",
-    "cfonts": "^2.9.1",
+    "cfonts": "^2.9.2",
     "chalk": "^4.1.1",
     "copy-webpack-plugin": "^8.1.1",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.4",
-    "css-minimizer-webpack-plugin": "^2.0.0",
+    "css-minimizer-webpack-plugin": "^3.0.0",
     "del": "^6.0.0",
     "electron": "^11.4.5",
     "electron-builder": "22.10.5",
     "electron-builder-notarize": "^1.2.0",
     "electron-devtools-installer": "^3.2.0",
     "electron-notarize": "^1.0.0",
     "electron-osx-sign": "^0.5.0",
-    "eslint": "^7.25.0",
+    "eslint": "^7.26.0",
     "eslint-friendly-formatter": "^4.0.1",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.23.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-vue": "^7.9.0",
@@ -257,15 +257,15 @@
     "html-webpack-plugin": "^5.3.1",
     "mini-css-extract-plugin": "1.6.0",
     "node-loader": "^2.0.0",
-    "sass": "^1.32.12",
-    "sass-loader": "^11.0.1",
+    "sass": "^1.32.13",
+    "sass-loader": "^11.1.1",
     "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.1.1",
+    "terser-webpack-plugin": "^5.1.2",
     "url-loader": "^4.1.1",
-    "vue-loader": "^15.9.6",
+    "vue-loader": "^15.9.7",
     "vue-style-loader": "^4.1.3",
     "vue-template-compiler": "^2.6.12",
-    "webpack": "^5.36.2",
+    "webpack": "^5.37.0",
     "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.2",
     "webpack-hot-middleware": "^2.25.0",

diff --git a/src/renderer/components/TaskDetail/Index.vue b/src/renderer/components/TaskDetail/Index.vue
@@ -6,6 +6,7 @@
     :title="$t('task.task-detail-title')"
     :with-header="true"
     :show-close="true"
+    :destroy-on-close="true"
     :visible.sync="visible"
     :before-close="handleClose"
     @closed="handleClosed"
@@ -44,7 +45,19 @@
       </el-tab-pane>
     </el-tabs>
     <div class="task-detail-actions">
-      <mo-task-item-actions mode="DETAIL" :task="task" />
+      <div class="action-wrapper action-wrapper-left" v-if="optionsChanged">
+        <el-button @click="resetChanged">
+          {{$t('app.reset')}}
+        </el-button>
+      </div>
+      <div class="action-wrapper action-wrapper-center">
+        <mo-task-item-actions mode="DETAIL" :task="task" />
+      </div>
+      <div class="action-wrapper action-wrapper-right" v-if="optionsChanged">
+        <el-button type="primary" @click="saveChanged">
+          {{$t('app.save')}}
+        </el-button>
+      </div>
     </div>
   </el-drawer>
 </template>
@@ -59,7 +72,12 @@
     getFileName,
     getFileExtension
   } from '@shared/utils'
-  import { EMPTY_STRING, TASK_STATUS } from '@shared/constants'
+  import {
+    EMPTY_STRING,
+    NONE_SELECTED_FILES,
+    SELECTED_ALL_FILES,
+    TASK_STATUS
+  } from '@shared/constants'
   import TaskItemActions from '@/components/Task/TaskItemActions'
   import TaskGeneral from './TaskGeneral'
   import TaskActivity from './TaskActivity'
@@ -112,7 +130,10 @@
         formLabelWidth: calcFormLabelWidth(locale),
         locale,
         activeTab: 'general',
-        graphicWidth: 0
+        graphicWidth: 0,
+        optionsChanged: false,
+        filesSelection: EMPTY_STRING,
+        selectionChangedCount: 0
       }
     },
     computed: {
@@ -141,8 +162,8 @@
             selected: item.selected === 'true',
             path: item.path,
             name,
-            extension,
-            length: item.length,
+            extension: `.${extension}`,
+            length: parseInt(item.length, 10),
             completedLength: item.completedLength
           }
         })
@@ -158,35 +179,37 @@
       }
     },
     mounted () {
-      window.addEventListener('resize', debounce(() => {
-        console.log('resize===>', this.activeTab, this.$refs.taskGraphic)
-        if (this.activeTab === 'activity' && this.$refs.taskGraphic) {
-          this.$refs.taskGraphic.updateGraphicWidth()
-        }
-      }, 300))
+      window.addEventListener('resize', this.handleAppResize)
     },
     destroyed () {
+      window.removeEventListener('resize', this.handleAppResize)
       cached.files = []
-      window.removeEventListener('resize')
     },
     methods: {
       handleClose (done) {
+        window.removeEventListener('resize', this.handleAppResize)
         this.$store.dispatch('task/hideTaskDetail')
       },
       handleClosed (done) {
         this.$store.dispatch('task/updateCurrentTaskGid', EMPTY_STRING)
         this.$store.dispatch('task/updateCurrentTaskItem', null)
+        this.optionsChanged = false
+        this.resetFaskFilesSelection()
       },
       handleTabBeforeLeave (activeName, oldActiveName) {
         this.activeTab = activeName
-        if (oldActiveName !== 'peers') {
-          return
+        this.optionsChanged = false
+        switch (oldActiveName) {
+        case 'peers':
+          this.$store.dispatch('task/toggleEnabledFetchPeers', false)
+          break
+        case 'files':
+          this.resetFaskFilesSelection()
+          break
         }
-        this.$store.dispatch('task/toggleEnabledFetchPeers', false)
       },
       handleTabClick (tab) {
         const { name } = tab
-
         switch (name) {
         case 'peers':
           this.$store.dispatch('task/toggleEnabledFetchPeers', true)
@@ -198,6 +221,33 @@
           break
         }
       },
+      resetChanged () {
+        const { activeTab } = this
+        switch (activeTab) {
+        case 'files':
+          this.resetFaskFilesSelection()
+          this.updateFilesListSelection()
+          break
+        }
+        this.optionsChanged = false
+      },
+      saveChanged () {
+        const { activeTab } = this
+        switch (activeTab) {
+        case 'files':
+          this.saveFaskFilesSelection()
+          break
+        }
+        this.optionsChanged = false
+      },
+      handleAppResize () {
+        debounce(() => {
+          console.log('resize===>', this.activeTab, this.$refs.taskGraphic)
+          if (this.activeTab === 'activity' && this.$refs.taskGraphic) {
+            this.$refs.taskGraphic.updateGraphicWidth()
+          }
+        }, 250)
+      },
       updateFilesListSelection () {
         if (!this.$refs.detailFileList) {
           return
@@ -207,7 +257,27 @@
         this.$refs.detailFileList.toggleSelection(selectedFileList)
       },
       handleSelectionChange (val) {
-        console.log('task detail handleSelectionChange==>', val)
+        this.filesSelection = val
+        this.selectionChangedCount += 1
+        if (this.selectionChangedCount > 1) {
+          this.optionsChanged = true
+        }
+      },
+      resetFaskFilesSelection () {
+        this.filesSelection = EMPTY_STRING
+        this.selectionChangedCount = 0
+      },
+      saveFaskFilesSelection () {
+        const { gid, filesSelection } = this
+        if (filesSelection === NONE_SELECTED_FILES) {
+          this.$msg.warning(this.$t('task.select-at-least-one'))
+          return
+        }
+
+        const options = {
+          selectFile: filesSelection !== SELECTED_ALL_FILES ? filesSelection : EMPTY_STRING
+        }
+        this.$store.dispatch('task/changeTaskOption', { gid, options })
       }
     }
   }
@@ -230,6 +300,10 @@
     width: 100%;
     text-align: center;
     font-size: 0;
+    padding: 0 1.25rem;
+    display: flex;
+    align-content: space-between;
+    justify-content: space-between;
     .task-item-actions {
       display: inline-block;
       &> .task-item-action {
@@ -242,6 +316,21 @@
       vertical-align: middle;
     }
   }
+  .action-wrapper {
+    flex: 1;
+  }
+  .action-wrapper-left {
+    text-align: left;
+  }
+  .action-wrapper-center {
+    padding: 1px 0;
+    &> .task-item-actions {
+      margin: 0 auto;
+    }
+  }
+  .action-wrapper-right {
+    text-align: right;
+  }
 }
 
 .task-detail-tab {
@@ -266,4 +355,13 @@
     bottom: 0;
   }
 }
+
+.tab-panel-actions {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  bottom: -28px;
+  left: 0;
+  width: 100%;
+}
 </style>
diff --git a/src/renderer/components/TaskDetail/TaskActivity.vue b/src/renderer/components/TaskDetail/TaskActivity.vue
@@ -8,7 +8,7 @@
   >
     <div class="graphic-box" ref="graphicBox">
       <mo-task-graphic
-        :width="graphicWidth"
+        :outerWidth="graphicWidth"
         :bitfield="task.bitfield"
         v-if="graphicWidth > 0"
       />
@@ -190,7 +190,6 @@
         if (!this.$refs.graphicBox) {
           return
         }
-        console.log('updateGraphicWidth===>', this.$refs.graphicBox)
         this.graphicWidth = this.calcInnerWidth(this.$refs.graphicBox)
       },
       calcInnerWidth (ele) {
@@ -199,8 +198,10 @@
         }
 
         const style = getComputedStyle(ele, null)
-        const width = style.getPropertyValue('width')
-        return parseInt(width, 10)
+        const width = parseInt(style.width, 10)
+        const paddingLeft = parseInt(style.paddingLeft, 10)
+        const paddingRight = parseInt(style.paddingRight, 10)
+        return width - paddingLeft - paddingRight
       }
     }
   }

diff --git a/src/renderer/components/TaskDetail/TaskFiles.vue b/src/renderer/components/TaskDetail/TaskFiles.vue
@@ -40,7 +40,7 @@
         </el-table-column>
       </el-table>
     </div>
-    <el-row class="file-filters" :gutter="12" v-if="mode === 'ADD'">
+    <el-row class="file-filters" :gutter="12">
       <el-col class="quick-filters" :span="8">
         <el-button-group>
           <el-button @click="toggleVideoSelection()">
@@ -54,7 +54,7 @@
           </el-button>
         </el-button-group>
       </el-col>
-      <el-col :span="16" style="text-align: right">
+      <el-col :span="16" class="files-summary">
         {{ $t('task.selected-files-sum', { selectedFilesCount, selectedFilesTotalSize }) }}
       </el-col>
     </el-row>
@@ -113,7 +113,7 @@
       },
       selectedFilesTotalSize () {
         const result = this.selectedFiles.reduce((acc, cur) => {
-          return acc + cur.length
+          return acc + parseInt(cur.length, 10)
         }, 0)
         return bytesToSize(result)
       },
@@ -189,5 +189,11 @@
       font-size: 0;
     }
   }
+  .files-summary {
+    text-align: right;
+    font-size: $--font-size-base;
+    color: $--color-text-regular;
+    line-height: 1.75rem;
+  }
 }
 </style>