Add edit tracker button

src/Api.ts

@@ -136,6 +136,18 @@ class Api {
       params,
     }).then(Api.handleResponse);
   }
+  
+  public editTracker(hash: string, origUrl: string, newUrl: string) {
+    const params = {
+      hash,
+      origUrl,
+      newUrl,
+    };
+
+    return this.axios.get('/torrents/editTracker', {
+      params,
+    }).then(Api.handleResponse);
+  }
 
   private actionTorrents(action: string, hashes: string[], extra?: any) {
     const params: any = {

src/components/Torrents.vue

@@ -20,7 +20,7 @@
           <v-icon>mdi-pause</v-icon>
         </v-btn>
         <v-divider vertical inset />
-        <v-btn icon @click="showInfo()" title="Info" :disabled="selectedRows.length == 0 || selectedRows.length >= 3">
+        <v-btn icon @click="showInfo()" title="Info" :disabled="selectedRows.length == 0 || selectedRows.length > 5">
           <v-icon>mdi-alert-circle</v-icon>
         </v-btn>
         <v-menu offset-y>
@@ -61,9 +61,12 @@
           </v-list>
         </v-menu>
         <v-divider vertical inset />
-        <v-btn icon @click="reannounceTorrents" title="Reannounce" :disabled="selectedRows.length == 0">
+        <v-btn icon @click="reannounceTorrents" title="Reannounce">
           <v-icon>mdi-bullhorn</v-icon>
         </v-btn>
+        <v-btn icon @click="editTracker" title="Edit tracker">
+          <v-icon>mdi-server</v-icon>
+        </v-btn>
         <v-btn icon @click="recheckTorrents" title="Recheck" :disabled="selectedRows.length == 0">
           <v-icon>mdi-backup-restore</v-icon>
         </v-btn>
@@ -135,6 +138,7 @@
     </v-data-table>
 
     <confirm-delete-dialog v-if="toDelete.length" v-model="toDelete" />
+    <edit-tracker-dialog v-if="toEditTracker.length" v-model="toEditTracker" />
     <info-dialog
       v-if="toShowInfo.length"
       v-model="toShowInfo"
@@ -148,6 +152,7 @@ import Vue from 'vue';
 import { mapState, mapGetters, mapMutations } from 'vuex';
 import _ from 'lodash';
 import ConfirmDeleteDialog from './dialogs/ConfirmDeleteDialog.vue';
+import EditTrackerDialog from './dialogs/EditTrackerDialog.vue';
 import InfoDialog from './dialogs/InfoDialog.vue';
 import api from '../Api';
 import { formatSize, formatDuration } from '../filters';
@@ -234,6 +239,7 @@ export default Vue.extend({
 
   components: {
     ConfirmDeleteDialog,
+    EditTrackerDialog,
     InfoDialog,
   },
 
@@ -261,6 +267,7 @@ export default Vue.extend({
       selectedRows: [],
       toDelete: [],
       toShowInfo: [],
+      toEditTracker: [],
       infoTab: null,
       pageOptions: null,
       footerProps,
@@ -360,6 +367,9 @@ export default Vue.extend({
       await api.pauseTorrents(this.selectedHashes);
     },
     async reannounceTorrents() {
+      if (this.selectedRows.length == 0) {
+        this.selectedRows = this.allTorrents;
+      }
       await api.reannounceTorrents(this.selectedHashes);
     },
     async recheckTorrents() {
@@ -368,6 +378,12 @@ export default Vue.extend({
     async setTorrentsCategory(category: string) {
       await api.setTorrentsCategory(this.selectedHashes, category);
     },
+    editTracker() {
+      if (this.selectedRows.length == 0) {
+        this.selectedRows = this.allTorrents;
+      }
+      this.toEditTracker = this.selectedRows;
+    }
   },
 
   watch: {
@@ -380,6 +396,9 @@ export default Vue.extend({
       },
       deep: true,
     },
+    filter() {
+      this.selectedRows = [];
+    },
     // loading() {
     //   debugger;
     // },

src/components/dialogs/EditTrackerDialog.vue

@@ -0,0 +1,198 @@
+<template>
+  <v-dialog :value="true" @input="closeDialog" :fullscreen="phoneLayout" width="40em">
+    <v-card>
+      <v-card-title
+        class="headline grey lighten-4"
+      >
+        <v-icon class="mr-2">mdi-server</v-icon>
+        <span>Edit tracker</span>
+      </v-card-title>
+      <v-card-text class="pa-0">
+        <v-stepper v-model="step">
+          <v-stepper-header>
+            <v-stepper-step :complete="step > 1" step="1">Search</v-stepper-step>
+            <v-divider />
+            <v-stepper-step :complete="step > 2" step="2">Preview</v-stepper-step>
+            <v-divider />
+            <v-stepper-step :complete="step > 3" step="3">Result</v-stepper-step>
+          </v-stepper-header>
+          <v-stepper-items>
+            <v-stepper-content step="1">
+              <v-form v-model="valid">
+                <v-text-field
+                  v-model="search"
+                  label="Search"
+                  :rules="[v => !!v || 'Required']"
+                  placeholder="Regex format"
+                  required
+                />
+                <v-text-field
+                  v-model="replace"
+                  label="Replace"
+                />
+              </v-form>
+            </v-stepper-content>
+            <v-stepper-content step="2">
+              {{ toEdit.length }} torrent(s) to update.
+              <ol class="torrents pt-6">
+                <li v-for="(row, i) in toEdit" :key="i">
+                  {{ row.name }}
+                  <br>
+                  {{ row.origUrl }}
+                  <br>
+                  {{ row.newUrl }}
+                </li>
+              </ol>
+            </v-stepper-content>
+            <v-stepper-content step="3">
+              <v-progress-linear
+                v-if="submitting && currentIndex != toEdit.length"
+                :value="currentIndex / toEdit.length * 100"
+              />
+              <template v-else>
+                {{ currentIndex }} torrent(s) updated.
+              </template>
+            </v-stepper-content>
+          </v-stepper-items>
+        </v-stepper>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          text
+          @click="back"
+          v-if="step < 3"
+          v-text="step == 1 ? 'Cancel' : 'Back'"
+        >Back</v-btn>
+        <v-btn
+          @click="foward"
+          color="warning"
+          :disabled="!canNext"
+          :loading="submitting"
+          v-text="[null, 'Next', 'Confirm', 'Close'][step]"
+        />
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import _ from 'lodash';
+import Vue from 'vue';
+import api from '@/Api';
+import { mapGetters } from 'vuex';
+
+export default Vue.extend({
+  props: {
+    value: Array,
+  },
+  data() {
+    return {
+      step: 1,
+      valid: false,
+      submitting: false,
+      torrents: [],
+      search: '',
+      replace: '',
+      toEdit: [],
+      currentIndex: 0,
+    };
+  },
+  created() {
+    this.torrents = this.value;
+  },
+  computed: {
+    ...mapGetters(['allTorrents']),
+    phoneLayout() {
+      return this.$vuetify.breakpoint.xsOnly;
+    },
+    canNext() {
+      if (this.step == 1 && this.valid) {
+        return true;
+      } else if (this.step == 2 && this.toEdit.length > 0) {
+        return true;
+      } else if (this.step == 3 && !this.submitting) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+  },
+  methods: {
+    closeDialog() {
+      this.$emit('input', []);
+    },
+    calcResults() {
+      const regex = new RegExp(this.search);
+
+      return _.chain(this.torrents)
+        .map(({tracker, hash, name}) => {
+          const newUrl = tracker.replace(regex, this.replace);
+          return newUrl == tracker ? null : {
+            hash,
+            name,
+            origUrl: tracker,
+            newUrl,
+          };
+        }).compact().value();
+    },
+    back() {
+      if (this.step == 1) {
+        this.closeDialog();
+        return;
+      }
+      this.step--;
+    },
+    async foward() {
+      if (this.step == 1) {
+        this.toEdit = this.calcResults();
+        this.step++;
+        return;
+      }
+      if (this.step == 3) {
+        this.closeDialog();
+        return;
+      }
+
+      if (this.submitting) {
+        return;
+      }
+
+      this.submitting = true;
+      this.step++;
+
+      this.currentIndex = 0;
+
+      for (const item of this.toEdit) {
+        await api.editTracker(item.hash, item.origUrl, item.newUrl);
+        this.currentIndex++;
+      }
+
+      this.submitting = false;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.torrents {
+  overflow: auto;
+  white-space: nowrap;
+}
+
+.v-stepper {
+  box-shadow: none;
+}
+
+.v-dialog--fullscreen {
+  .v-card__text {
+    padding-bottom: 52px;
+  }
+
+  .v-card__actions {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+}
+</style>