Add set cateogry feature

src/Api.ts

@@ -79,6 +79,10 @@ class Api {
     return this.actionTorrents('resume', hashes);
   }
 
+  public setTorrentsCategory(hashes: string[], category: string) {
+    return this.actionTorrents('setCategory', hashes, {category});
+  }
+
   private actionTorrents(action: string, hashes: string[], extra?: any) {
     const params: any = {
       hashes: hashes.join('|'),

src/App.vue

@@ -33,7 +33,7 @@
       </v-container>
     </v-content>
 
-    <add-form />
+    <add-form v-if="preferences" />
     <login-form v-if="needAuth" v-model="needAuth" />
     <logs-dialog v-if="drawerOptions.showLogs" v-model="drawerOptions.showLogs" />
 
@@ -89,7 +89,11 @@ export default Vue.extend({
     }
   },
   computed: {
-    ...mapState(['mainData', 'rid']),
+    ...mapState([
+      'mainData',
+      'rid',
+      'preferences',
+    ]),
     ...mapGetters(['config']),
   },
   methods: {

src/components/AddForm.vue

@@ -6,20 +6,19 @@
       color="primary"
       fixed
       right
-      :disabled="!prefs"
       @click="dialog = !dialog"
       class="btn-add"
       :class="{'with-footer': $vuetify.breakpoint.smAndUp}"
     >
       <v-icon>mdi-link-plus</v-icon>
     </v-btn>
-    <v-dialog v-model="dialog" persistent width="50em" v-if="prefs">
+    <v-dialog v-model="dialog" persistent width="50em">
       <v-card>
         <v-card-title
           class="headline grey lighten-4"
         >
           <v-icon class="mr-2">mdi-link-plus</v-icon>
-          <span>Add Torrents from URLs</span>
+          <span>Add Torrents</span>
         </v-card-title>
         <v-card-text>
           <v-form
@@ -30,7 +29,6 @@
                 <v-flex xs12>
                   <v-textarea
                     name="urls"
-                    v-model="params.urls"
                     label="URLs"
                     hint="One link per line"
                     prepend-icon="mdi-link"
@@ -38,6 +36,19 @@
                     :rows="$vuetify.breakpoint.xsOnly ? 1 : 3"
                     required
                     autofocus
+                    :value="params.urls"
+                    @input="setParams('urls', $event)"
+                  />
+                </v-flex>
+                <v-flex>
+                  <v-combobox
+                    label="Category"
+                    prepend-icon="mdi-folder"
+                    clearable
+                    hide-no-data
+                    :items="categories"
+                    :value="params.category"
+                    @input="setParams('category', $event)"
                   />
                 </v-flex>
                 <v-flex>
@@ -49,9 +60,10 @@
                 </v-flex>
                 <v-flex>
                   <v-checkbox
-                    v-model="params.skip_checking"
                     prepend-icon="mdi-progress-check"
                     label="Skip hash check"
+                    :value="params.skip_checking"
+                    @change="setParams('skip_checking', $event)"
                   />
                 </v-flex>
               </v-layout>
@@ -83,53 +95,72 @@
 </template>
 
 <script lang="ts">
+import _ from 'lodash';
 import Vue from 'vue';
 import { mapState } from 'vuex';
 import { api } from '../Api';
 
+const defaultParams = {
+  urls: null,
+  category: null,
+  paused: false,
+  skip_checking: false,
+};
+
 export default Vue.extend({
   data() {
     return {
       dialog: false,
       valid: false,
-      params: {
-        urls: null,
-        paused: null,
-        skip_checking: null,
-      },
+      userParams: {},
       submitting: false,
     };
   },
   computed: {
     ...mapState({
       prefs: 'preferences',
+      categories(state, getters) {
+        return Object.keys(getters.torrentGroupByCategory).filter(_.identity);
+      },
     }),
+    params() {
+      return Object.assign({}, defaultParams, this.userParams);
+    },
     autoStart: {
       get(): boolean {
-        if (this.params.paused === null) {
-          return !this.prefs.start_paused_enabled;
-        }
-
         return !this.params.paused;
       },
       set(value: boolean) {
-        this.params.paused = !value;
+        const paused = !value;
+        const tmp = defaultParams.paused === paused ? null : paused;
+        this.setParams('paused', tmp);
       },
     },
   },
+  created() {
+    defaultParams.paused = this.prefs.start_paused_enabled;
+  },
 
   methods: {
+    setParams(key: string, value: any){
+      debugger;
+      if (_.isNil(value)) {
+        Vue.delete(this.userParams, key);
+      } else {
+        Vue.set(this.userParams, key, value);
+      }
+    },
     async submit() {
       if (this.submitting) {
         return;
       }
 
       this.submitting = true;
-      const resp = await api.addTorrents(this.params);
+      const resp = await api.addTorrents(this.userParams);
 
       this.submitting = false;
       this.dialog = false;
-      this.params.urls = null;
+      this.userParams.urls = null;
     },
   },
 });

src/components/Torrents.vue

@@ -23,6 +23,43 @@
       <v-btn icon @click="pauseTorrents">
         <v-icon>mdi-pause</v-icon>
       </v-btn>
+      <v-divider vertical inset />
+      <v-menu offset-y>
+        <template v-slot:activator="{ on }">
+          <v-btn icon v-on="on">
+            <v-icon>mdi-folder</v-icon>
+          </v-btn>
+        </template>
+        <v-list class="category-actions">
+          <v-list-tile-sub-title
+            class="px-3 py-1"
+            @click.stop=""
+            >
+            Set category
+          </v-list-tile-sub-title>
+          <v-list-tile
+            v-for="(item, i) in categories"
+            :key="i"
+            @click="setTorrentsCategory(item)"
+            >
+            <v-list-tile-action>
+              <v-icon>mdi-folder-open</v-icon>
+            </v-list-tile-action>
+            <v-list-tile-title>
+              {{ item }}
+            </v-list-tile-title>
+          </v-list-tile>
+          <v-divider />
+          <v-list-tile @click="setTorrentsCategory('')">
+            <v-list-tile-action>
+              <v-icon>mdi-folder-remove</v-icon>
+            </v-list-tile-action>
+            <v-list-tile-title>
+              Reset
+            </v-list-tile-title>
+          </v-list-tile>
+        </v-list>
+      </v-menu>
     </v-toolbar>
     <v-divider />
     <v-data-table
@@ -125,6 +162,9 @@ export default Vue.extend({
       filter(state, getters) {
         return getters.config.filter;
       },
+      categories(state, getters) {
+        return Object.keys(getters.torrentGroupByCategory).filter(_.identity);
+      },
     }),
     hasSelected() {
       return this.selectedRows.length;
@@ -174,6 +214,9 @@ export default Vue.extend({
     async pauseTorrents() {
       await api.pauseTorrents(this.selectedHashes);
     },
+    async setTorrentsCategory(category: string) {
+      await api.setTorrentsCategory(this.selectedHashes, category);
+    },
     formatNetworkSpeed(speed: number) {
       if (speed === 0) {
         return null;
@@ -202,6 +245,10 @@ export default Vue.extend({
   padding-left: 8px;
 }
 
+.category-actions .v-list__tile__action {
+  min-width: 40px;
+}
+
 .menu-check {
   padding: 0;
 }