feat: dev flags

client/components/admin.vue

@@ -80,13 +80,12 @@
               v-list-tile-avatar: v-icon(color='grey lighten-2') build
               v-list-tile-title {{ $t('admin:utilities.title') }}
             v-list-group(
-              prepend-icon='weekend'
-              value='true'
               to='/dev'
               no-action
               v-if='hasPermission([`manage:system`, `manage:api`])'
               )
               v-list-tile(slot='activator')
+                v-list-tile-avatar: v-icon weekend
                 v-list-tile-title {{ $t('admin:dev.title') }}
 
               v-list-tile(to='/dev-flags')

client/components/admin/admin-contribute.vue

@@ -133,7 +133,7 @@
                   v-icon(color='grey') public
             v-divider
             v-list-tile
-              v-list-tile-avatar
+              v-list-tile-avatar(tile)
                 img(src='/svg/logo-icons8.svg', alt='Icons8')
               v-list-tile-content
                 v-list-tile-title Icons8
@@ -141,6 +141,16 @@
               v-list-tile-action
                 v-btn(icon, href='https://icons8.com', target='_blank')
                   v-icon(color='grey') public
+            v-divider
+            v-list-tile
+              v-list-tile-avatar(tile)
+                img(src='https://static.requarks.io/logo/lokalise.png', alt='Lokalise')
+              v-list-tile-content
+                v-list-tile-title Lokalise
+                v-list-tile-sub-title Lokalise is a translation management system built for agile teams who want to automate their localization process.
+              v-list-tile-action
+                v-btn(icon, href='https://lokalise.co', target='_blank')
+                  v-icon(color='grey') public
 
 </template>
 

client/components/admin/admin-dev-flags.vue

@@ -38,6 +38,9 @@
 <script>
 import _ from 'lodash'
 
+import flagsQuery from 'gql/admin/dev/dev-query-flags.gql'
+import flagsMutation from 'gql/admin/dev/dev-mutation-save-flags.gql'
+
 export default {
   data() {
     return {
@@ -47,8 +50,39 @@ export default {
     }
   },
   methods: {
-    save() {
-
+    async save() {
+      try {
+        await this.$apollo.mutate({
+          mutation: flagsMutation,
+          variables: {
+            flags: _.transform(this.flags, (result, value, key) => {
+              result.push({ key, value })
+            }, [])
+          },
+          watchLoading (isLoading) {
+            this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-dev-flags-update')
+          }
+        })
+        this.$store.commit('showNotification', {
+          style: 'success',
+          message: 'Flags applied successfully.',
+          icon: 'check'
+        })
+      } catch (err) {
+        this.$store.commit('pushGraphError', err)
+      }
+    }
+  },
+  apollo: {
+    flags: {
+      query: flagsQuery,
+      fetchPolicy: 'network-only',
+      update: (data) => _.transform(data.system.flags, (result, row) => {
+        _.set(result, row.key, row.value)
+      }, {}),
+      watchLoading (isLoading) {
+        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-dev-flags-refresh')
+      }
     }
   }
 }