feat: theming resolvers + config fixes

client/components/admin/admin-rendering.vue

@@ -2,7 +2,7 @@
   v-container(fluid, fill-height)
     v-layout(row wrap)
       v-flex(xs12)
-        .headline.primary--text Content Rendering
+        .headline.primary--text Rendering
         .subheading.grey--text Configure how content is rendered
 </template>
 

client/components/admin/admin-theme.vue

@@ -12,7 +12,14 @@
                   v-toolbar-title
                     .subheading Theme
                 v-card-text
-                  v-select(:items='themes', prepend-icon='palette', v-model='selectedTheme', label='Site Theme', persistent-hint, hint='Themes affect how content pages are displayed. Other site sections (such as the editor or admin area) are not affected.')
+                  v-select(
+                    :items='themes'
+                    prepend-icon='palette'
+                    v-model='selectedTheme'
+                    label='Site Theme'
+                    persistent-hint
+                    hint='Themes affect how content pages are displayed. Other site sections (such as the editor or admin area) are not affected.'
+                    )
                     template(slot='item', slot-scope='data')
                       v-list-tile-avatar
                         v-icon.blue--text(dark) filter_frames
@@ -20,7 +27,13 @@
                         v-list-tile-title(v-html='data.item.text')
                         v-list-tile-sub-title(v-html='data.item.author')
                   v-divider
-                  v-switch(v-model='darkMode', label='Dark Mode', color='primary', persistent-hint, hint='Not recommended for accessibility.')
+                  v-switch(
+                    v-model='darkMode'
+                    label='Dark Mode'
+                    color='primary'
+                    persistent-hint
+                    hint='Not recommended for accessibility. May not be supported by all themes.'
+                    )
                 v-card-chin
                   v-spacer
                   v-btn(color='primary', :loading='loading', @click='save')
@@ -35,20 +48,66 @@
 </template>
 
 <script>
+import _ from 'lodash'
+
+import themeSaveMutation from 'gql/admin-theme-mutation-save.gql'
+
 export default {
   data() {
     return {
+      loading: false,
       themes: [
         { text: 'Default', author: 'requarks.io', value: 'default' }
       ],
       selectedTheme: 'default',
-      darkMode: false
+      darkMode: false,
+      darkModeInitial: false
     }
   },
   watch: {
     darkMode(newValue, oldValue) {
       this.$store.commit('admin/setThemeDarkMode', newValue)
-      console.info(this.$vuetify.dark)
+    }
+  },
+  mounted() {
+    this.darkMode = this.$store.state.admin.theme.dark
+    this.darkModeInitial = this.darkMode
+  },
+  beforeDestroy() {
+    this.$store.commit('admin/setThemeDarkMode', this.darkModeInitial)
+  },
+  methods: {
+    async save () {
+      this.loading = true
+      this.$store.commit(`loadingStart`, 'admin-theme-save')
+      try {
+        const respRaw = await this.$apollo.mutate({
+          mutation: themeSaveMutation,
+          variables: {
+            theme: this.selectedTheme,
+            darkMode: this.darkMode
+          }
+        })
+        const resp = _.get(respRaw, 'data.theming.setConfig.responseResult', {})
+        if (resp.succeeded) {
+          this.darkModeInitial = this.darkMode
+          this.$store.commit('showNotification', {
+            message: 'Theme settings updated successfully.',
+            style: 'success',
+            icon: 'check'
+          })
+        } else {
+          throw new Error(resp.message)
+        }
+      } catch (err) {
+        this.$store.commit('showNotification', {
+          message: `Error: ${err.message}`,
+          style: 'error',
+          icon: 'warning'
+        })
+      }
+      this.$store.commit(`loadingStop`, 'admin-theme-save')
+      this.loading = false
     }
   }
 }