game detail view selector setting

src/components/Settings/GameDetailViewSelector.vue

@@ -0,0 +1,65 @@
+<template lang="html">
+  <b-form-group label="Open games in:">
+    <pre>s {{ gameDetailView }}</pre>
+
+    <b-form-select
+      v-model="gameDetailView"
+      style="max-width: 200px"
+      @change="save"
+    >
+      <b-form-select-option
+        v-for="{ name, value } in GAME_DETAIL_VIEWS"
+        :key="value"
+        :value="value"
+      >
+        {{ name }}
+      </b-form-select-option>
+    </b-form-select>
+  </b-form-group>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import { GAME_DETAIL_VIEWS } from '@/constants';
+
+export default {
+  data() {
+    return {
+      saving: false,
+      GAME_DETAIL_VIEWS,
+      gameDetailView: null,
+    };
+  },
+
+  computed: {
+    ...mapState(['settings']),
+  },
+
+  mounted() {
+    const { settings } = this;
+
+    this.gameDetailView = settings && settings.gameDetailView
+      ? settings.gameDetailView
+      : null;
+  },
+
+  methods: {
+    async save() {
+      const { gameDetailView, settings } = this;
+
+      const payload = {
+        ...settings,
+        gameDetailView,
+      };
+
+      await this.$store.dispatch('SAVE_SETTINGS', payload)
+        .catch(() => {
+          this.$bvToast.toast('There was an error saving your settings', { variant: 'danger' });
+          this.saving = false;
+        });
+
+      this.$bvToast.toast('Boom, bitch!');
+    },
+  },
+};
+</script>

src/constants.js

@@ -213,3 +213,9 @@ export const SUPPORTED_LANGUAGES = [
   { name: 'Russian', nativeName: 'Русский', value: 'ru' },
   { name: 'Spanish', nativeName: 'Español', value: 'es' },
 ];
+
+export const GAME_DETAIL_VIEWS = [
+  { name: 'Modal', value: null },
+  { name: 'Side panel', value: 'side' },
+  { name: 'New page', value: 'new' },
+];

src/pages/SettingsPage.vue

@@ -3,17 +3,16 @@
     <h1 class="d-none d-sm-block">Settings</h1>
 
     <div class="d-inline-flex flex-column align-items-start">
-      <languages />
+      <language-selector />
+      <game-detail-view-selector />
 
+      <!-- <provider-card /> -->
       <!-- Open games in:
       <b-form-select class="mb-3">
         <b-form-select-option value="modal">Modal</b-form-select-option>
         <b-form-select-option value="side">Side panel</b-form-select-option>
         <b-form-select-option value="new">New page</b-form-select-option>
       </b-form-select> -->
-
-      <!-- <provider-card /> -->
-
       <b-button
         @click="session_signOut"
         variant="secondary"
@@ -35,7 +34,8 @@
 </template>
 
 <script>
-import Languages from '@/components/Settings/Languages';
+import LanguageSelector from '@/components/Settings/LanguageSelector';
+import GameDetailViewSelector from '@/components/Settings/GameDetailViewSelector';
 // import ProviderCard from '@/components/ProviderCard';
 import DeleteAccountModal from '@/components/Settings/DeleteAccountModal';
 import sessionMixin from '@/mixins/sessionMixin';
@@ -43,7 +43,8 @@ import { mapState } from 'vuex';
 
 export default {
   components: {
-    Languages,
+    LanguageSelector,
+    GameDetailViewSelector,
     // ProviderCard,
     DeleteAccountModal,
   },