Add table with banned URLs and ability to remove url from cachex

src/lang/en.js

@@ -97,7 +97,9 @@ export default {
     ban: 'Ban',
     url: 'URL',
     evict: 'Evict',
-    evictedMessage: 'This URL was evicted'
+    evictedMessage: 'This URL was evicted',
+    actions: 'Actions',
+    remove: 'Remove from Cachex'
   },
   documentation: {
     documentation: 'Documentation',

src/store/modules/mediaProxyCache.js

@@ -11,7 +11,7 @@ const mediaProxyCache = {
   },
   mutations: {
     SET_BANNED_URLS: (state, urls) => {
-      state.bannedUrls = urls
+      state.bannedUrls = urls.map(el => { return { url: el } })
     },
     SET_BANNED_URLS_COUNT: (state, count) => {
       state.bannedUrlsCount = count

src/views/mediaProxyCache/index.vue

@@ -13,6 +13,28 @@
       <el-checkbox v-model="ban">{{ $t('mediaProxyCache.ban') }}</el-checkbox>
       <el-button class="evict-button" @click="evictURL">{{ $t('mediaProxyCache.evict') }}</el-button>
     </div>
+    <el-table
+      v-loading="loading"
+      :data="bannedUrls"
+      class="banned-urls-table"
+      @selection-change="handleSelectionChange">>
+      <el-table-column
+        type="selection"
+        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')">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            @click="removeUrl(scope.row.url)">{{ $t('mediaProxyCache.remove') }}</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 
@@ -25,7 +47,19 @@ export default {
   data() {
     return {
       url: '',
-      ban: false
+      ban: false,
+      selectedUrls: []
+    }
+  },
+  computed: {
+    bannedUrls() {
+      return this.$store.state.mediaProxyCache.bannedUrls
+    },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
+    loading() {
+      return this.$store.state.mediaProxyCache.loading
     }
   },
   mounted() {
@@ -37,6 +71,13 @@ export default {
     evictURL() {
       const urls = typeof this.url === 'string' ? [this.url] : this.url
       this.$store.dispatch('PurgeUrls', { urls, ban: this.ban })
+    },
+    handleSelectionChange(value) {
+      this.$data.selectedUrls = value
+    },
+    removeUrl(url) {
+      const urls = typeof this.url === 'string' ? [this.url] : this.url
+      this.$store.dispatch('RemoveBannedUrls', urls)
     }
   }
 }
@@ -46,6 +87,9 @@ export default {
 h1 {
   margin: 0;
 }
+.banned-urls-table {
+  margin: 15px;
+}
 .evict-button {
   margin-left: 5px;
 }