refactor skin selection (#894)

* refactor skin Card
* use Message component in QuestyCaptcha

src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue

@@ -81,24 +81,18 @@
         </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
-    <v-snackbar :color="message.status" elevation="24" v-model="message.show">
-      {{ message.text }}
-      <template v-slot:action>
-        <v-btn
-          text
-          variant="text"
-          @click="message.show = false"
-        >
-          Close
-        </v-btn>
-      </template>
-    </v-snackbar>
+    <Message ref="message" />
   </v-card>
 </template>
 
 <script>
+import Message from '../Features/Message.vue'
+
 export default {
   name: 'QuestyCaptcha',
+  components: {
+    Message
+  },
   props: [
     'wikiId'
   ],
@@ -144,9 +138,6 @@ export default {
         answers: []
       })
     },
-    showMessage (status, message) {
-      this.message = { status: status, text: message, show: true }
-    },
     formatQuestionsForApi (questions) {
       return JSON.stringify(questions.reduce((out, entry) => {
         out[entry.question] = entry.answers
@@ -165,10 +156,10 @@ export default {
         }
         await this.$store.dispatch('updateSetting', { wiki: this.wikiId, setting: 'wwUseQuestyCaptcha', value: enabled })
         await this.$store.dispatch('setEnabledQuestyCaptcha', enabled)
-        this.showMessage('success', `QuestyCaptcha has been successfully ${enabled ? 'enabled' : 'disabled'}.`)
+        this.$refs.message.show('success', `QuestyCaptcha has been successfully ${enabled ? 'enabled' : 'disabled'}.`)
       } catch (error) {
-        console.log(error.response)
-        this.showMessage('error', `Something went wrong while ${enabled ? 'enabling' : 'disabling'} QuestyCaptcha. Please try again.`)
+        console.error(error.response)
+        this.$refs.message('error', `Something went wrong while ${enabled ? 'enabling' : 'disabling'} QuestyCaptcha. Please try again.`)
         await this.$nextTick()
         this.isCaptchaActive = !enabled
       } finally {
@@ -203,12 +194,12 @@ export default {
           wiki: this.wikiId, setting: 'wwCaptchaQuestions', value: this.formatQuestionsForApi(this.questionsFromStore)
         })
         await this.$store.dispatch('setQuestyCaptchaQuestions', this.questionsFromStore)
-        this.showMessage('success', 'Your questions have been saved.')
+        this.$refs.message.show('success', 'Your questions have been saved.')
         this.hasNoQuestions = false
         this.panel = false
       } catch (error) {
-        console.log(error.response)
-        this.showMessage('error', 'Something went wrong with saving your questions. Please try again.')
+        console.error(error.response)
+        this.$refs.message.show('error', 'Something went wrong with saving your questions. Please try again.')
       } finally {
         this.waitForQuestionsUpdate = false
       }

src/components/Pages/ManageWiki/Cards/Skin.vue

@@ -3,15 +3,15 @@
     <v-card-title>Set Skin</v-card-title>
     <v-card-text>
       <v-select
-        :items="items"
+        :items="skins"
         label="Skin"
         placeholder="Pick a Skin"
         hint="The default skin is Vector."
         persistent-hint
         prepend-icon="mdi-web"
-        v-model="skin"
         :disabled="inFlight"
         :error-messages="error"
+        v-model="skinId"
       ></v-select>
     </v-card-text>
     <v-card-actions>
@@ -22,45 +22,62 @@
         <span>It may take up to 10 seconds for changes to be reflected on your wiki</span>
       </v-tooltip>
     </v-card-actions>
+    <Message ref="message" />
   </v-card>
 </template>
 
 <script>
+import Message from '../Features/Message.vue'
+
 export default {
   name: 'Skin',
+  components: {
+    Message
+  },
   props: [
     'wikiId'
   ],
   data () {
     return {
-      items: [
-        'Vector',
-        'Modern',
-        'Timeless'
+      skins: [
+        {
+          value: 'vector',
+          text: 'Vector'
+        },
+        {
+          value: 'modern',
+          text: 'Modern'
+        },
+        {
+          value: 'timeless',
+          text: 'Timeless'
+        }
       ],
-      skin: '',
-      inFlight: false,
-      error: ''
+      skinId: '',
+      message: false
     }
   },
   created () {
-    const skin = this.$store.state.wikis.currentWikiSettings.wgDefaultSkin
-    this.skin = skin.charAt(0).toUpperCase() + skin.slice(1)
+    this.skinId = this.$store.state.wikis.currentWikiSettings.wgDefaultSkin
+  },
+  computed: {
+    skin () {
+      return this.skins.find(skin => skin.value === this.skinId)
+    }
   },
   methods: {
     doSetSkin () {
       const wiki = this.wikiId
-      // API needs the skin ID which is lower case..
-      const value = this.skin.toLowerCase()
+      const value = this.skin.value
 
       this.$store
         .dispatch('updateSkin', { wiki, value })
         .then(() => {
-          alert('Update success!')
+          this.$refs.message.show('success', `Your default skin has been updated to ${this.skin.text}.`)
         })
         .catch(err => {
-          console.log(err.response)
-          alert('Something went wrong.')
+          console.error(err.response)
+          this.$refs.message.show('error', 'Something went wrong while updating your default skin. Please try again.')
         })
     }
   }

src/components/Pages/ManageWiki/Features/Message.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-snackbar :color="status" elevation="24" v-model="visible">
+    {{ text }}
+    <template v-slot:action>
+      <v-btn
+        text
+        variant="text"
+        @click="hide"
+      >
+      Close
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      visible: false,
+      text: 'Hello, this is a snackbar message!',
+      status: 'success'
+    }
+  },
+  methods: {
+    show (status, message) {
+      this.status = status
+      this.text = message
+      this.visible = true
+    },
+
+    hide () {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>