From 4c32a0708fb9c664beddaeeef542d8520ae5d7fb Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 8 Jul 2020 02:42:57 +0300
Subject: [PATCH] Add ability to remove multiple urls

---
 src/lang/en.js                       |  3 ++-
 src/store/modules/mediaProxyCache.js |  3 ++-
 src/views/mediaProxyCache/index.vue  | 28 ++++++++++++++++++++++------
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 27d81d91..3256abcd 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -102,7 +102,8 @@ export default {
     remove: 'Remove from Cachex',
     evictObjectsHeader: 'Evict object from the MediaProxy cache',
     listBannedUrlsHeader: 'List of all banned MediaProxy URLs',
-    multipleInput: 'You can enter a single URL or several comma separated links'
+    multipleInput: 'You can enter a single URL or several comma separated links',
+    removeSelected: 'Remove Selected'
   },
   documentation: {
     documentation: 'Documentation',
diff --git a/src/store/modules/mediaProxyCache.js b/src/store/modules/mediaProxyCache.js
index d11fad57..815c14e4 100644
--- a/src/store/modules/mediaProxyCache.js
+++ b/src/store/modules/mediaProxyCache.js
@@ -43,8 +43,9 @@ const mediaProxyCache = {
         dispatch('ListBannedUrls', state.currentPage)
       }
     },
-    async RemoveBannedUrls({ commit, getters }, urls) {
+    async RemoveBannedUrls({ dispatch, getters, state }, urls) {
       await removeBannedUrls(urls, getters.authHost, getters.token)
+      dispatch('ListBannedUrls', state.currentPage)
     }
   }
 }
diff --git a/src/views/mediaProxyCache/index.vue b/src/views/mediaProxyCache/index.vue
index 213e266d..abe3cd19 100644
--- a/src/views/mediaProxyCache/index.vue
+++ b/src/views/mediaProxyCache/index.vue
@@ -28,14 +28,20 @@
         align="center"
         width="55"/>
       <el-table-column
-        :label="$t('mediaProxyCache.url')"
         :min-width="isDesktop ? 320 : 120"
         prop="url"/>
-      <el-table-column
-        :label="$t('mediaProxyCache.actions')">
+      <el-table-column>
+        <template slot="header">
+          <el-button
+            :disabled="removeSelectedDisabled"
+            size="mini"
+            class="remove-url-button"
+            @click="removeSelected()">{{ $t('mediaProxyCache.removeSelected') }}</el-button>
+        </template>
         <template slot-scope="scope">
           <el-button
             size="mini"
+            class="remove-url-button"
             @click="removeUrl(scope.row.url)">{{ $t('mediaProxyCache.remove') }}</el-button>
         </template>
       </el-table-column>
@@ -65,6 +71,9 @@ export default {
     },
     loading() {
       return this.$store.state.mediaProxyCache.loading
+    },
+    removeSelectedDisabled() {
+      return this.selectedUrls.length === 0
     }
   },
   mounted() {
@@ -76,14 +85,18 @@ export default {
     evictURL() {
       const urls = this.urls.split(',').map(url => url.trim()).filter(el => el.length > 0)
       this.$store.dispatch('PurgeUrls', { urls, ban: this.ban })
-      this.url = ''
+      this.urls = ''
     },
     handleSelectionChange(value) {
       this.$data.selectedUrls = value
     },
-    removeUrl(url) {
-      const urls = typeof this.url === 'string' ? [this.url] : this.url
+    removeSelected() {
+      const urls = this.selectedUrls.map(el => el.url)
       this.$store.dispatch('RemoveBannedUrls', urls)
+      this.selectedUrls = []
+    },
+    removeUrl(url) {
+      this.$store.dispatch('RemoveBannedUrls', [this.url])
     }
   }
 }
@@ -120,6 +133,9 @@ h1 {
   justify-content: space-between;
   margin: 10px 15px;
 }
+.remove-url-button {
+  width: 150px;
+}
 .url-input {
   margin-right: 15px;
 }