Find same named torrent when set category

src/components/Torrents.vue

@@ -141,6 +141,7 @@
     </v-data-table>
 
     <confirm-delete-dialog v-if="toDelete.length" v-model="toDelete" />
+    <confirm-set-category-dialog v-if="toSetCategory.length" :category="categoryToSet" v-model="toSetCategory" />
     <edit-tracker-dialog v-if="toEditTracker.length" v-model="toEditTracker" />
     <info-dialog
       v-if="toShowInfo.length"
@@ -155,6 +156,7 @@ import Vue from 'vue';
 import { mapState, mapGetters, mapMutations } from 'vuex';
 import _ from 'lodash';
 import ConfirmDeleteDialog from './dialogs/ConfirmDeleteDialog.vue';
+import ConfirmSetCategoryDialog from './dialogs/ConfirmSetCategoryDialog.vue';
 import EditTrackerDialog from './dialogs/EditTrackerDialog.vue';
 import InfoDialog from './dialogs/InfoDialog.vue';
 import api from '../Api';
@@ -242,6 +244,7 @@ export default Vue.extend({
 
   components: {
     ConfirmDeleteDialog,
+    ConfirmSetCategoryDialog,
     EditTrackerDialog,
     InfoDialog,
   },
@@ -269,6 +272,8 @@ export default Vue.extend({
       headers,
       selectedRows: [],
       toDelete: [],
+      toSetCategory: [],
+      categoryToSet: null,
       toShowInfo: [],
       toEditTracker: [],
       infoTab: null,
@@ -378,8 +383,9 @@ export default Vue.extend({
     async recheckTorrents() {
       await api.recheckTorrents(this.selectedHashes);
     },
-    async setTorrentsCategory(category: string) {
-      await api.setTorrentsCategory(this.selectedHashes, category);
+    setTorrentsCategory(category: string) {
+      this.categoryToSet = category;
+      this.toSetCategory = this.selectedRows;
     },
     editTracker() {
       if (this.selectedRows.length == 0) {

src/components/dialogs/ConfirmDeleteDialog.vue

@@ -8,7 +8,7 @@
         <span>Delete torrents</span>
       </v-card-title>
       <v-card-text class="pb-0">
-         Are you sure you want to delete the selected torrents from the transfer list?
+         Are you sure to delete selected torrents from transfer list?
         <ol class="torrents pt-6">
           <li v-for="(row, i) in torrents" :key="i">
             {{ row.name }}
@@ -49,6 +49,7 @@ import _ from 'lodash';
 import Vue from 'vue';
 import api from '@/Api';
 import { mapGetters } from 'vuex';
+import { getSameNamedTorrents } from '@/utils';
 
 export default Vue.extend({
   props: {
@@ -65,7 +66,7 @@ export default Vue.extend({
   },
   created() {
     this.torrents = this.value;
-    this.sameNamedTorrents = this.getSameNamedTorrents();
+    this.sameNamedTorrents = getSameNamedTorrents(this.allTorrents, this.torrents);
   },
   computed: {
     ...mapGetters(['allTorrents']),
@@ -77,26 +78,6 @@ export default Vue.extend({
     closeDialog() {
       this.$emit('input', []);
     },
-    getSameNamedTorrents() {
-      const hashes = _.map(this.torrents, (t) => t.hash);
-      const result = [];
-      for (const t1 of this.torrents) {
-        for (const t2 of this.allTorrents) {
-          if (hashes.includes(t2.hash)) {
-            continue;
-          }
-
-          if (t1.name != t2.name) {
-            continue;
-          }
-
-          result.push(t2);
-          hashes.push(t2);
-        }
-      }
-
-      return result;
-    },
     async submit() {
       if (this.submitting) {
         return;

src/components/dialogs/ConfirmSetCategoryDialog.vue

@@ -0,0 +1,118 @@
+<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-folder</v-icon>
+        <span>Set category</span>
+      </v-card-title>
+      <v-card-text class="pb-0">
+        <template v-if="category">
+         Are you sure to move selected torrents to category {{ category }}?
+        </template>
+        <template v-else>
+         Are you sure to reset category of selected torrents?
+        </template>
+        <ol class="torrents pt-6">
+          <li v-for="(row, i) in torrents" :key="i">
+            {{ row.name }}
+          </li>
+        </ol>
+
+        <v-checkbox
+          v-if="sameNamedTorrents.length > 0"
+          v-model="moveSameNamed"
+          prepend-icon="mdi-file-multiple"
+          class="mt-0"
+          :label="`Also move ${sameNamedTorrents.length} same named torrents`"
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn text @click="closeDialog">Cancel</v-btn>
+        <v-btn
+          @click="submit"
+          color="warning"
+          :disabled="submitting"
+          :loading="submitting"
+        >
+          Submit
+        </v-btn>
+      </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';
+import { getSameNamedTorrents } from '@/utils';
+
+export default Vue.extend({
+  props: {
+    value: Array,
+    category: String,
+  },
+  data() {
+    return {
+      moveSameNamed: false,
+      submitting: false,
+      torrents: [],
+      sameNamedTorrents: [],
+    };
+  },
+  created() {
+    this.torrents = this.value;
+    this.sameNamedTorrents = getSameNamedTorrents(this.allTorrents, this.torrents);
+  },
+  computed: {
+    ...mapGetters(['allTorrents']),
+    phoneLayout() {
+      return this.$vuetify.breakpoint.xsOnly;
+    },
+  },
+  methods: {
+    closeDialog() {
+      this.$emit('input', []);
+    },
+    async submit() {
+      if (this.submitting) {
+        return;
+      }
+
+      this.submitting = true;
+
+      let torrentsToMove;
+      if (this.moveSameNamed) {
+        torrentsToMove = this.torrents.concat(this.sameNamedTorrents);
+      } else {
+        torrentsToMove = this.torrents;
+      }
+      const hashes = torrentsToMove.map((t: any) => t.hash);
+      await api.setTorrentsCategory(hashes, this.category);
+
+      this.closeDialog();
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.torrents {
+  overflow: auto;
+}
+.v-dialog--fullscreen {
+  .v-card__text {
+    padding-bottom: 52px;
+  }
+
+  .v-card__actions {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+}
+</style>

src/utils.ts

@@ -66,3 +66,24 @@ export function codeToFlag(code: string) {
 }
 
 export const isWindows = navigator.userAgent.includes('Windows');
+
+export function getSameNamedTorrents(allTorrents: Array<any>, torrents: Array<any>) {
+  const hashes = _.map(torrents, (t) => t.hash);
+  const result = [];
+  for (const t1 of torrents) {
+    for (const t2 of allTorrents) {
+      if (hashes.includes(t2.hash)) {
+        continue;
+      }
+
+      if (t1.name != t2.name) {
+        continue;
+      }
+
+      result.push(t2);
+      hashes.push(t2);
+    }
+  }
+
+  return result;
+};