Add one download setting

src/components/dialogs/settingsDialog/DownloadSettings.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-expansion-panel>
+    <v-expansion-panel-header> Downloads </v-expansion-panel-header>
+    <v-expansion-panel-content>
+      <h4>When adding a torrent</h4>
+      <v-divider />
+
+      <v-container
+        class="px-0"
+        fluid
+      >
+        <v-switch
+          :input-value="preferences.create_subfolder_enabled"
+          :label="`Create subfolder for torrents with multiple files`"
+          @change="changeSettings('create_subfolder_enabled', !preferences.create_subfolder_enabled)"
+        />
+      </v-container>
+    </v-expansion-panel-content>
+  </v-expansion-panel>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Preferences } from "@/types";
+import { Component } from "vue-property-decorator";
+import { mapActions, mapGetters } from "vuex";
+
+@Component({
+  components: {},
+  computed: {
+    ...mapGetters({
+      preferences: "allPreferences",
+    }),
+  },
+  methods: {
+    ...mapActions({
+      updatePreferencesRequest: 'updatePreferencesRequest'
+    })
+  },
+})
+export default class DownloadSettings extends Vue {
+  preferences!: Preferences;
+
+  updatePreferencesRequest!: (_: any) => void;
+
+  changeSettings(property: string, value: string | boolean) {
+    this.updatePreferencesRequest({ [property]: value });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles.scss";
+
+@include dialog-title;
+</style>

src/components/dialogs/settingsDialog/SettingsDialog.vue

@@ -1,4 +1,3 @@
-/* eslint-disable vue/max-attributes-per-line */
 <template>
   <div>
     <v-dialog
@@ -19,7 +18,14 @@
             <v-icon>mdi-close</v-icon>
           </v-btn>
         </v-card-title>
-        <v-card-text> Placeholder </v-card-text>
+        <v-card-text>
+          <v-expansion-panels
+            v-model="panelsOpen"
+            multiple
+          >
+            <download-settings />
+          </v-expansion-panels>
+        </v-card-text>
         <v-card-actions />
       </v-card>
     </v-dialog>
@@ -29,14 +35,11 @@
 <script lang="ts">
 import Vue from "vue";
 import { Component, Emit, Prop } from "vue-property-decorator";
-import { mapGetters } from "vuex";
+import DownloadSettings from "./DownloadSettings.vue";
 
 @Component({
-  components: {},
-  computed: {
-    ...mapGetters({
-      preferences: "preferences",
-    }),
+  components: {
+    DownloadSettings
   },
   methods: {},
 })
@@ -44,6 +47,8 @@ export default class SearchDialog extends Vue {
   @Prop(Boolean)
   readonly value!: boolean;
 
+  panelsOpen = [ 0 ];
+
   @Emit("input")
   closeDialog() {
     return false;

src/store/index.ts

@@ -11,6 +11,7 @@ import { AllStateTypes } from '../consts';
 import { torrentIsState } from '../utils';
 import searchEngineStore from './searchEngine';
 import { RootState } from './types';
+import api from '@/Api';
 
 Vue.use(Vuex);
 
@@ -67,6 +68,9 @@ const store = new Vuex.Store<RootState>({
     /* eslint-enable no-param-reassign */
   },
   getters: {
+    allPreferences(state) {
+      return state.preferences;
+    },
     savePath(state) {
       return state.preferences['save_path'];
     },
@@ -123,6 +127,23 @@ const store = new Vuex.Store<RootState>({
 
       return result;
     },
+  },
+  actions: {
+    async updatePreferencesRequest({ dispatch }, preferences) {
+      try {
+        const response = await api.setPreferences(preferences);
+
+        dispatch("updatePreferencesRequestSuccess", response.data);
+      } catch {
+        dispatch("updatePreferencesRequestFailure");
+      }
+    },
+    updatePreferencesRequestSuccess({ commit }, preferences) {
+      commit("updatePreferences", preferences);
+    },
+    updatePreferencesRequestFailure() {
+      alert('Preferences failed to update');
+    },
   }
 });