From 73f3fc8d58db4cd2e44367b69bc5d403ed641dba Mon Sep 17 00:00:00 2001
From: Kylart <garnier@et.esiea.fr>
Date: Wed, 26 Apr 2017 21:16:31 +0200
Subject: [PATCH] configModal now has its own component

---
 components/settings.vue | 221 ++++++++++++++++++++++++++++++++++++++++
 layouts/default.vue     | 213 ++------------------------------------
 store/index.js          |   4 +-
 3 files changed, 231 insertions(+), 207 deletions(-)
 create mode 100644 components/settings.vue

diff --git a/components/settings.vue b/components/settings.vue
new file mode 100644
index 0000000..8e60733
--- /dev/null
+++ b/components/settings.vue
@@ -0,0 +1,221 @@
+<template>
+	<div class="modals text-xs-center">
+		<v-modal v-model="configModal" :style="configModalStyle" class="config-modal">
+			<v-btn icon slot="activator">
+				<v-icon>settings</v-icon>
+			</v-btn>
+			<v-card class="secondary white--text">
+				<v-card-text class="white--text">
+					<h2 class="title">Settings</h2>
+				</v-card-text>
+				<v-divider/>
+				<v-card-text class="subheading white--text">
+					<div class="section">
+						<h5 class="section-title">Download</h5>
+						<v-row class="section-content">
+							<v-col xs4 class="fansub-selector">
+								<p class="subsection-title">Preferred Fansub</p>
+								<v-select v-bind:items="fansubChoices"
+								          v-model="config.fansub"
+								          dark
+								          single-line
+								          auto/>
+							</v-col>
+							<v-col xs1></v-col>
+							<v-col xs7>
+								<p class="subsection-title">Quality</p>
+								<v-row>
+									<v-col xs4>
+										<v-radio class="radio"
+										         label="480p"
+										         v-model="config.quality"
+										         value="480p" primary dark/>
+									</v-col>
+									<v-col xs4>
+										<v-radio class="radio"
+										         label="720p"
+										         v-model="config.quality"
+										         value="720p" primary dark/>
+									</v-col>
+									<v-col xs4>
+										<v-radio class="radio"
+										         label="1080p"
+										         v-model="config.quality"
+										         value="1080p" primary dark/>
+									</v-col>
+								</v-row>
+							</v-col>
+							<v-col xs1><!-- Dummy cell --></v-col>
+							<v-col xs4>
+								<v-card-text class="switch">
+									<v-switch label="Pref magnets" dark primary v-model="config.magnets"/>
+								</v-card-text>
+							</v-col>
+							<v-col xs5>
+								<p class="subsection-title">Sound on magnet downloads</p>
+								<v-select v-bind:items="soundChoices"
+								          v-model="config.sound"
+								          item-value="config.sound"
+								          dark
+								          single-line
+								          auto/>
+							</v-col>
+							<v-col xs2><!-- Dummy cell --></v-col>
+						</v-row>
+					</div>
+					<div class="section">
+						<h5 class="section-title">Local</h5>
+						<v-row class="section-content">
+							<v-col xs4>
+								<p class="subsection-title">
+									Preferred directory
+								</p>
+								<div class="choose-button">
+									<v-btn dark flat @click.native="changeConfigPath()">Choose</v-btn>
+								</div>
+							</v-col>
+							<v-col
+											xs8><span class="">Current: </span>
+								<!-- TODO Add a "last one" option-->
+								<p class="config-dir">
+									{{ configDir }}
+								</p>
+							</v-col>
+						</v-row>
+					</div>
+					<div class="section">
+						<h5 class="section-title">News</h5>
+						<v-row class="section-content">
+							<v-col xs12>
+								<p class="subsection-title">
+									Display news
+								</p>
+							</v-col>
+							<v-col xs1></v-col>
+							<v-col xs4>
+								<v-radio class="radio"
+								         label="Inside"
+								         v-model="config.inside"
+								         value="true" primary dark/>
+							</v-col>
+							<v-col xs4>
+								<v-radio class="radio"
+								         label="Outside"
+								         v-model="config.inside"
+								         value="false" primary dark/>
+							</v-col>
+						</v-row>
+					</div>
+				</v-card-text>
+				<v-card-row actions>
+					<v-spacer></v-spacer>
+					<v-btn dark primary
+					       v-on:click.native="save()">
+						Save
+					</v-btn>
+					<v-btn dark primary
+					       v-on:click.native="saveAndClose()">
+						Save and close
+					</v-btn>
+				</v-card-row>
+			</v-card>
+		</v-modal>
+	</div>
+</template>
+
+<script>
+  export default{
+    data() {
+      return {
+        configModal: false,
+        configModalStyle: {
+          minHeight: '90%'
+        },
+        fansubChoices: [
+          'HorribleSubs',
+          'PuyaSubs',
+          'BakedFish',
+          'DeadFish',
+          'DefinitelyNotMe'
+        ],
+        soundChoices: [
+          'None',
+          'Nyanpasu'
+        ],
+        config: {
+          fansub: this.$store.state.config.fansub,
+          quality: this.$store.state.config.quality,
+          sound: this.$store.state.config.sound,
+          localPath: this.configDir,
+          inside: this.$store.state.config.inside.toString(),
+          magnets: this.$store.state.config.magnets
+        }
+      }
+    },
+    computed: {
+      configDir: function () {
+        return this.$store.state.configDir
+      }
+    },
+    methods: {
+      changeConfigPath() {
+        this.$store.dispatch('changePathWithConfig')
+      },
+      save() {
+        this.$store.commit('setConfig', this.config)
+        const toSave = {...this.config}
+        toSave.inside = this.config.inside === 'true'
+        toSave.localPath = this.$store.state.configDir
+
+        // Here we save to config
+        this.$store.dispatch('saveConfig', toSave)
+      },
+      saveAndClose() {
+        this.save()
+        this.configModal = false
+      }
+    }
+  }
+</script>
+
+<style scoped>
+	h2
+	{
+		color: rgba(255, 255, 255, 0.8);
+	}
+
+	.section
+	{
+		padding: 2% 2% 2% 2%;
+		margin-bottom: 20px;
+		background-color: rgb(60, 60, 60);
+		text-align: left;
+	}
+
+	.section-title
+	{
+		padding-left: 25px;
+		color: rgba(255, 255, 255, 0.8);
+		text-align: left;
+		min-width: 700px;
+	}
+
+	.subsection-title
+	{
+		font-weight: 700;
+		font-size: 16px;
+		padding-left: 10px;
+	}
+
+	.choose-button
+	{
+		padding-left: 25%;
+	}
+
+	.config-dir
+	{
+		padding-left: 10%;
+		margin-top: 20px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 41e947b..ec6d2fc 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -7,129 +7,7 @@
 			<v-toolbar-logo class="text-xs-right title" v-bind:style="title">
 				<div style="width: 100%;">
 					<div class="title-text">かわニメ</div>
-
-					<div class="modals text-xs-center">
-						<v-modal v-model="configModal" :style="configModalStyle" class="config-modal">
-							<v-btn icon slot="activator">
-								<v-icon>settings</v-icon>
-							</v-btn>
-							<v-card class="secondary white--text">
-								<v-card-text class="white--text">
-									<h2 class="title">Settings</h2>
-								</v-card-text>
-								<v-divider/>
-								<v-card-text class="subheading white--text">
-									<div class="section">
-										<h5 class="section-title">Download</h5>
-										<v-row class="section-content">
-											<v-col xs4 class="fansub-selector">
-												<p class="subsection-title">Preferred Fansub</p>
-												<v-select v-bind:items="fansubChoices"
-												          v-model="config.fansub"
-												          dark
-												          single-line
-												          auto/>
-											</v-col>
-											<v-col xs1></v-col>
-											<v-col xs7>
-												<p class="subsection-title">Quality</p>
-												<v-row>
-													<v-col xs4>
-														<v-radio class="radio"
-														         label="480p"
-														         v-model="config.quality"
-														         value="480p" primary dark/>
-													</v-col>
-													<v-col xs4>
-														<v-radio class="radio"
-														         label="720p"
-														         v-model="config.quality"
-														         value="720p" primary dark/>
-													</v-col>
-													<v-col xs4>
-														<v-radio class="radio"
-														         label="1080p"
-														         v-model="config.quality"
-														         value="1080p" primary dark/>
-													</v-col>
-												</v-row>
-											</v-col>
-											<v-col xs1><!-- Dummy cell --></v-col>
-											<v-col xs4>
-												<v-card-text class="switch">
-													<v-switch label="Pref magnets" dark primary v-model="$store.state.config.magnets"/>
-												</v-card-text>
-											</v-col>
-											<v-col xs5>
-												<p class="subsection-title">Sound on magnet downloads</p>
-												<v-select v-bind:items="soundChoices"
-												          v-model="config.sound"
-												          item-value="config.sound"
-												          dark
-												          single-line
-												          auto/>
-											</v-col>
-											<v-col xs2><!-- Dummy cell --></v-col>
-										</v-row>
-									</div>
-									<div class="section">
-										<h5 class="section-title">Local</h5>
-										<v-row class="section-content">
-											<v-col xs4>
-												<p class="subsection-title">
-													Preferred directory
-												</p>
-												<div class="choose-button">
-													<v-btn dark flat @click.native="changeConfigPath()">Choose</v-btn>
-												</div>
-											</v-col>
-											<v-col
-															xs8><span class="">Current: </span>
-												<!-- TODO Add a "last one" option-->
-												<p class="config-dir">
-													{{ configDir }}
-												</p>
-											</v-col>
-										</v-row>
-									</div>
-									<div class="section">
-										<h5 class="section-title">News</h5>
-										<v-row class="section-content">
-											<v-col xs12>
-												<p class="subsection-title">
-													Display news
-												</p>
-											</v-col>
-											<v-col xs1></v-col>
-											<v-col xs4>
-												<v-radio class="radio"
-												         label="Inside"
-												         v-model="config.inside"
-												         value="true" primary dark/>
-											</v-col>
-											<v-col xs4>
-												<v-radio class="radio"
-												         label="Outside"
-												         v-model="config.inside"
-												         value="false" primary dark/>
-											</v-col>
-										</v-row>
-									</div>
-								</v-card-text>
-								<v-card-row actions>
-									<v-spacer></v-spacer>
-									<v-btn dark primary
-									       v-on:click.native="save()">
-										Save
-									</v-btn>
-									<v-btn dark primary
-									       v-on:click.native="saveAndClose()">
-										Save and close
-									</v-btn>
-								</v-card-row>
-							</v-card>
-						</v-modal>
-					</div>
+					<settings></settings>
 
 					<div class="modals text-xs-center">
 						<v-modal v-model="searchModal">
@@ -230,11 +108,13 @@
 </template>
 
 <script>
+  import Settings from '~components/settings.vue'
+
   export default {
     data () {
       return {
         searchModal: false,
-        configModal: false,
+//        configModal: false,
         sidebar: false,
         itemGroup: [
           {header: 'Core'},
@@ -291,31 +171,12 @@
         ],
         sidebarTitle: {
           color: 'rgba(255, 255, 255, 0.8)'
-        },
-        configModalStyle: {
-          minHeight: '90%'
-        },
-        fansubChoices: [
-          'HorribleSubs',
-          'PuyaSubs',
-          'BakedFish',
-          'DeadFish',
-          'DefinitelyNotMe'
-        ],
-        soundChoices: [
-          'None',
-          'Nyanpasu'
-        ],
-        config: {
-          fansub: this.$store.state.config.fansub,
-          quality: this.$store.state.config.quality,
-          sound: this.$store.state.config.sound,
-          localPath: this.configDir,
-	        inside: this.$store.state.config.inside.toString(),
-	        magnets: this.$store.state.config.magnets
         }
       }
     },
+    components: {
+      Settings
+    },
     computed: {
       title: function () {
         if (this.sidebar)
@@ -323,70 +184,14 @@
             marginLeft: '210px'
           }
       },
-      configDir: function () {
-        return this.$store.state.configDir
-      },
-	    searchInput: function () {
-		    return this.$store.state.searchInput
+      searchInput: function () {
+        return this.$store.state.searchInput
       }
-    },
-    methods: {
-      changeConfigPath() {
-        this.$store.dispatch('changePathWithConfig')
-      },
-	    save() {
-        this.$store.commit('setConfig', this.config)
-        const toSave = {...this.config}
-        toSave.inside = this.config.inside === 'true'
-		    toSave.localPath = this.$store.state.configDir
-
-		    // Here we save to config
-				this.$store.dispatch('saveConfig', toSave)
-	    },
-	    saveAndClose() {
-        this.save()
-		    this.configModal = false
-	    }
     }
   }
 </script>
 
 <style scoped>
-	/* ----------- CONFIG ----------- */
-	.section
-	{
-		padding: 2% 2% 2% 2%;
-		margin-bottom: 20px;
-		background-color: rgb(60, 60, 60);
-		text-align: left;
-	}
-
-	.section-title
-	{
-		padding-left: 25px;
-		color: rgba(255, 255, 255, 0.8);
-		text-align: left;
-		min-width: 700px;
-	}
-
-	.subsection-title
-	{
-		font-weight: 700;
-		font-size: 16px;
-		padding-left: 10px;
-	}
-
-	.choose-button
-	{
-		padding-left: 25%;
-	}
-
-	.config-dir
-	{
-		padding-left: 10%;
-		margin-top: 20px;
-	}
-
 	/*noinspection ALL*/
 	.with.top-toolbar main > .content
 	{
diff --git a/store/index.js b/store/index.js
index 50c61d7..bb78817 100644
--- a/store/index.js
+++ b/store/index.js
@@ -316,15 +316,13 @@ const store = new Vuex.Store({
         console.log(`[${(new Date()).toLocaleTimeString()}]: Opening torrents directly on preferred torrent client.`)
       }
     },
-    async saveConfig({state}, data) {
+    async saveConfig({}, data) {
       const toSave = JSON.stringify({
         config: data
       })
 
       writeFileSync(configPath, toSave)
       console.log(`[${(new Date()).toLocaleTimeString()}]: New config saved!`)
-
-      console.log(state.config)
     },
     async appendHistory({}, data) {
       const {status} = await axios.get(`appendHistory?type=${data.type}&text=${data.text}`)