添加文件管理功能

frontend/src/components/File/FileList.vue

@@ -7,15 +7,42 @@
           <font-awesome-icon :icon="['fa', 'arrow-left']"/>
           {{$t('Back')}}
         </el-button>
-        <el-button v-if="showFile" type="primary" size="small" style="margin-right: 10px;" @click="onFileSave">
+        <el-popover v-model="isShowDelete">
+          <el-button size="small" type="default" @click="() => this.isShowDelete = false">
+            {{$t('Cancel')}}
+          </el-button>
+          <el-button size="small" type="danger" @click="onFileDelete">
+            {{$t('Confirm')}}
+          </el-button>
+          <template slot="reference">
+            <el-button v-if="currentPath !== ''" type="danger" size="small" style="margin-right: 10px;"
+                       @click="() => this.isShowDelete = true">
+              <font-awesome-icon :icon="['fa', 'trash']"/>
+              {{$t('Remove')}}
+            </el-button>
+          </template>
+        </el-popover>
+        <el-button v-if="showFile" type="success" size="small" style="margin-right: 10px;" @click="onFileSave">
           <font-awesome-icon :icon="['fa', 'save']"/>
           {{$t('Save')}}
         </el-button>
-        <!--TODO: new files/directories-->
-        <el-button v-if="false" type="primary" size="small" style="margin-right: 10px;">
-          <font-awesome-icon :icon="['fa', 'file-alt']"/>
-          {{$t('New File')}}
-        </el-button>
+        <el-popover v-if="!showFile" v-model="isShowAdd" @hide="onHideAdd">
+          <el-input v-model="name" :placeholder="$t('Name')"/>
+          <div class="add-type-list">
+            <el-button size="small" type="success" icon="el-icon-document-add" @click="onAddFile">
+              {{$t('File')}}
+            </el-button>
+            <el-button size="small" type="primary" icon="el-icon-folder-add" @click="onAddDir">
+              {{$t('Directory')}}
+            </el-button>
+          </div>
+          <template slot="reference">
+            <el-button type="primary" size="small" style="margin-right: 10px;">
+              <font-awesome-icon :icon="['fa', 'plus']"/>
+              {{$t('Create')}}
+            </el-button>
+          </template>
+        </el-popover>
       </div>
       <!--./back-->
 
@@ -70,7 +97,10 @@ export default {
     return {
       code: 'var hello = \'world\'',
       isEdit: false,
-      showFile: false
+      showFile: false,
+      name: '',
+      isShowAdd: false,
+      isShowDelete: false
     }
   },
   computed: {
@@ -110,15 +140,46 @@ export default {
       this.$store.commit('file/SET_CURRENT_PATH', path)
       this.$store.dispatch('file/getFileList', { path: this.currentPath })
     },
-    onFileSave () {
-      this.$store.dispatch('file/saveFileContent', { path: this.currentPath })
-        .then(() => {
-          this.$message.success(this.$t('Saved file successfully'))
-        })
+    async onFileSave () {
+      await this.$store.dispatch('file/saveFileContent', { path: this.currentPath })
+      this.$message.success(this.$t('Saved file successfully'))
     },
     onBackFile () {
       this.showFile = false
       this.onBack()
+    },
+    onHideAdd () {
+      this.name = ''
+    },
+    async onAddFile () {
+      if (!this.name) {
+        this.$message.error(this.$t('Name cannot be empty'))
+        return
+      }
+      const path = this.currentPath + '/' + this.name
+      await this.$store.dispatch('file/addFile', { path })
+      await this.$store.dispatch('file/getFileList', { path: this.currentPath })
+      this.isShowAdd = false
+
+      this.showFile = true
+      this.$store.commit('file/SET_FILE_CONTENT', '')
+      this.$store.commit('file/SET_CURRENT_PATH', path)
+      await this.$store.dispatch('file/getFileContent', { path })
+    },
+    async onAddDir () {
+      if (!this.name) {
+        this.$message.error(this.$t('Name cannot be empty'))
+        return
+      }
+      await this.$store.dispatch('file/addDir', { path: this.currentPath + '/' + this.name })
+      await this.$store.dispatch('file/getFileList', { path: this.currentPath })
+      this.isShowAdd = false
+    },
+    async onFileDelete () {
+      await this.$store.dispatch('file/deleteFile', { path: this.currentPath })
+      this.$message.success(this.$t('Deleted successfully'))
+      this.isShowDelete = false
+      this.onBackFile()
     }
   },
   created () {
@@ -236,4 +297,14 @@ export default {
     font-size: 14px;
     color: rgba(3, 47, 98, 1);
   }
+
+  .add-type-list {
+    text-align: right;
+    margin-top: 10px;
+  }
+
+  .add-type {
+    cursor: pointer;
+    font-weight: bolder;
+  }
 </style>