feat: share management delete confirm (#1212)

Author: WeidiDeng

frontend/src/components/prompts/Prompts.vue

@@ -19,6 +19,7 @@ import Replace from './Replace'
 import ReplaceRename from './ReplaceRename'
 import Share from './Share'
 import Upload from './Upload'
+import ShareDelete from './ShareDelete'
 import { mapState } from 'vuex'
 import buttons from '@/utils/buttons'
 
@@ -37,7 +38,8 @@ export default {
     Help,
     Replace,
     ReplaceRename,
-    Upload
+    Upload,
+    ShareDelete
   },
   data: function () {
     return {
@@ -91,7 +93,8 @@ export default {
         'replace',
         'replace-rename',
         'share',
-        'upload'
+        'upload',
+        'share-delete'
       ].indexOf(this.show) >= 0;
 
       return matched && this.show || null;

frontend/src/components/prompts/ShareDelete.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="card floating">
+    <div class="card-content">
+      <p>{{ $t('prompts.deleteMessageShare', {path: hash.path}) }}</p>
+    </div>
+    <div class="card-action">
+      <button @click="$store.commit('closeHovers')"
+        class="button button--flat button--grey"
+        :aria-label="$t('buttons.cancel')"
+        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button @click="submit"
+        class="button button--flat button--red"
+        :aria-label="$t('buttons.delete')"
+        :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapMutations, mapState} from 'vuex'
+import { share as api } from '@/api'
+import buttons from '@/utils/buttons'
+
+export default {
+  name: 'share-delete',
+  computed: {
+    ...mapState(['hash'])
+  },
+  methods: {
+    ...mapMutations(['closeHovers']),
+    submit: async function () {
+      buttons.loading('delete')
+
+      try {
+        await api.remove(this.hash.hash)
+        buttons.success('delete')
+
+        this.$root.$emit('share-deleted', this.hash.hash)
+        this.closeHovers()
+      } catch (e) {
+        buttons.done('delete')
+        this.$showError(e)
+      }
+    }
+  }
+}
+</script>

frontend/src/i18n/en.json

@@ -115,6 +115,7 @@
     "currentlyNavigating": "Currently navigating on:",
     "deleteMessageMultiple": "Are you sure you want to delete {count} file(s)?",
     "deleteMessageSingle": "Are you sure you want to delete this file/folder?",
+    "deleteMessageShare": "Are you sure you want to delete this share({path})?",
     "deleteTitle": "Delete files",
     "displayName": "Display Name:",
     "download": "Download files",

frontend/src/i18n/zh-cn.json

@@ -115,6 +115,7 @@
     "currentlyNavigating": "当前目录：",
     "deleteMessageMultiple": "你确定要删除这 {count} 个文件吗？",
     "deleteMessageSingle": "你确定要删除这个文件/文件夹吗？",
+    "deleteMessageShare": "你确定要删除这个分享({path})吗？",
     "deleteTitle": "删除文件",
     "displayName": "名称：",
     "download": "下载文件",

frontend/src/views/settings/Shares.vue

@@ -73,19 +73,23 @@ export default {
     this.clip.on('success', () => {
       this.$showSuccess(this.$t('success.linkCopied'))
     })
+    this.$root.$on('share-deleted', this.deleted)
   },
   beforeDestroy () {
     this.clip.destroy()
+    this.$root.$off('share-deleted', this.deleted)
   },
   methods: {
     deleteLink: async function (event, link) {
       event.preventDefault()
-      try {
-        await api.remove(link.hash)
-        this.links = this.links.filter(item => item.hash !== link.hash)
-      } catch (e) {
-        this.$showError(e)
-      }
+      this.$store.commit('setHash', {
+        hash: link.hash,
+        path: link.path
+      })
+      this.$store.commit('showHover', 'share-delete')
+    },
+    deleted (hash) {
+      this.links = this.links.filter(item => item.hash !== hash)
     },
     humanTime (time) {
       return moment(time * 1000).fromNow()