feat: admin - download locale strings from graph

client/components/admin/admin-locale.vue

@@ -55,12 +55,14 @@
                     v-list-tile-content
                       v-list-tile-title(v-html='lc.name')
                       v-list-tile-sub-title(v-html='lc.nativeName')
-                    v-list-tile-action(v-if='lc.isInstalled && lc.installDate < lc.updatedAt')
+                    v-list-tile-action(v-if='lc.isInstalled && lc.installDate < lc.updatedAt', @click='download(lc.code)')
                       v-icon.blue--text cached
                     v-list-tile-action(v-else-if='lc.isInstalled')
                       v-icon.green--text check
+                    v-list-tile-action(v-else-if='lc.isDownloading')
+                      v-progress-circular(indeterminate, color='blue', size='20', :width='3')
                     v-list-tile-action(v-else)
-                      v-btn(icon, @click='')
+                      v-btn(icon, @click='download(lc)')
                         v-icon.grey--text cloud_download
 </template>
 
@@ -68,7 +70,8 @@
 import _ from 'lodash'
 
 import localesQuery from 'gql/admin-locale-query-list.gql'
-import localesMutation from 'gql/admin-locale-mutation-save.gql'
+import localesDownloadMutation from 'gql/admin-locale-mutation-download.gql'
+import localesSaveMutation from 'gql/admin-locale-mutation-save.gql'
 
 export default {
   data() {
@@ -85,10 +88,36 @@ export default {
     }
   },
   methods: {
+    async download(lc) {
+      lc.isDownloading = true
+      const respRaw = await this.$apollo.mutate({
+        mutation: localesDownloadMutation,
+        variables: {
+          locale: lc.code
+        }
+      })
+      const resp = _.get(respRaw, 'data.localization.downloadLocale.responseResult', {})
+      if (resp.succeeded) {
+        lc.isDownloading = false
+        lc.isInstalled = true
+        this.$store.commit('showNotification', {
+          message: `Locale ${lc.name} has been installed successfully.`,
+          style: 'success',
+          icon: 'get_app'
+        })
+      } else {
+        this.$store.commit('showNotification', {
+          message: `Error: ${resp.message}`,
+          style: 'error',
+          icon: 'warning'
+        })
+      }
+      this.isDownloading = false
+    },
     async save() {
       this.loading = true
       const respRaw = await this.$apollo.mutate({
-        mutation: localesMutation,
+        mutation: localesSaveMutation,
         variables: {
           locale: this.selectedLocale,
           autoUpdate: this.autoUpdate
@@ -114,7 +143,7 @@ export default {
   apollo: {
     locales: {
       query: localesQuery,
-      update: (data) => data.localization.locales,
+      update: (data) => data.localization.locales.map(lc => ({ ...lc, isDownloading: false })),
       watchLoading (isLoading) {
         this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-locale-refresh')
       }

client/graph/admin-locale-mutation-download.gql

+mutation($locale: String!) {
+  localization {
+    downloadLocale(locale: $locale) {
+      responseResult {
+        succeeded
+        errorCode
+        slug
+        message
+      }
+    }
+  }
+}

server/app/data.yml

@@ -64,6 +64,9 @@ localeNamespaces:
   - auth
   - common
 jobs:
+  fetchGraphLocale:
+    onInit: false
+    cron: false
   purgeUploads:
     onInit: true
     cron: '*/15 * * * *'

server/core/queue.js

@@ -24,10 +24,12 @@ module.exports = {
           removeOnComplete: true
         })
       }
-      this.job[queueName].add({}, {
-        repeat: { cron: queueParams.cron },
-        removeOnComplete: true
-      })
+      if (queueParams.cron) {
+        this.job[queueName].add({}, {
+          repeat: { cron: queueParams.cron },
+          removeOnComplete: true
+        })
+      }
     })
   },
   async clean() {

server/graph/resolvers/localization.js

@@ -37,6 +37,21 @@ module.exports = {
     }
   },
   LocalizationMutation: {
+    async downloadLocale(obj, args, context) {
+      try {
+        const job = await WIKI.queue.job.fetchGraphLocale.add({
+          locale: args.locale
+        }, {
+          timeout: 30000
+        })
+        await job.finished()
+        return {
+          responseResult: graphHelper.generateSuccess('Locale downloaded successfully')
+        }
+      } catch (err) {
+        return graphHelper.generateError(err)
+      }
+    },
     async updateLocale(obj, args, context) {
       try {
         WIKI.config.site.lang = args.locale
@@ -46,7 +61,7 @@ module.exports = {
         await WIKI.lang.setCurrentLocale(args.locale)
 
         return {
-          responseResult: graphHelper.generateSuccess('Login success')
+          responseResult: graphHelper.generateSuccess('Locale config updated')
         }
       } catch (err) {
         return graphHelper.generateError(err)

server/graph/schemas/localization.graphql

@@ -24,6 +24,10 @@ type LocalizationQuery {
 # -----------------------------------------------
 
 type LocalizationMutation {
+  downloadLocale(
+    locale: String!
+  ): DefaultResponse
+
   updateLocale(
     locale: String!
     autoUpdate: Boolean!

server/jobs/fetch-graph-locale.js

+require('../core/worker')
+const _ = require('lodash')
+const { createApolloFetch } = require('apollo-fetch')
+
+/* global WIKI */
+
+WIKI.redis = require('../core/redis').init()
+WIKI.db = require('../core/db').init()
+
+const apollo = createApolloFetch({
+  uri: 'https://graph.requarks.io'
+})
+
+module.exports = async (job) => {
+  WIKI.logger.info(`Fetching locale ${job.data.locale} from Graph endpoint...`)
+
+  try {
+    const respStrings = await apollo({
+      query: `query ($code: String!) {
+        localization {
+          strings(code: $code) {
+            key
+            value
+          }
+        }
+      }`,
+      variables: {
+        code: job.data.locale
+      }
+    })
+    const strings = _.get(respStrings, 'data.localization.strings', [])
+    let lcObj = {}
+    _.forEach(strings, row => {
+      if (_.includes(row.key, '::')) { return }
+      _.set(lcObj, row.key.replace(':', '.'), row.value)
+    })
+
+    const locales = await WIKI.redis.get('locales')
+    if (locales) {
+      const currentLocale = _.find(JSON.parse(locales), ['code', job.data.locale]) || {}
+      await WIKI.db.Locale.upsert({
+        code: job.data.locale,
+        strings: lcObj,
+        isRTL: currentLocale.isRTL,
+        name: currentLocale.name,
+        nativeName: currentLocale.nativeName
+      })
+    } else {
+      throw new Error('Failed to fetch cached locales list! Restart server to resolve this issue.')
+    }
+
+    WIKI.logger.info(`Fetching locale ${job.data.locale} from Graph endpoint: [ COMPLETED ]`)
+  } catch (err) {
+    WIKI.logger.error(`Fetching locale ${job.data.locale} from Graph endpoint: [ FAILED ]`)
+    WIKI.logger.error(err.message)
+  }
+}

server/jobs/sync-graph-locales.js

@@ -41,14 +41,17 @@ module.exports = async (job) => {
 
     if (WIKI.config.site.langAutoUpdate) {
       const respStrings = await apollo({
-        query: `{
+        query: `query ($code: String!) {
           localization {
-            strings(code: "${WIKI.config.site.lang}") {
+            strings(code: $code) {
               key
               value
             }
           }
-        }`
+        }`,
+        variables: {
+          code: WIKI.config.site.lang
+        }
       })
       const strings = _.get(respStrings, 'data.localization.strings', [])
       let lcObj = {}
@@ -57,7 +60,7 @@ module.exports = async (job) => {
         _.set(lcObj, row.key.replace(':', '.'), row.value)
       })
 
-      WIKI.db.Locale.upsert({
+      await WIKI.db.Locale.upsert({
         code: WIKI.config.site.lang,
         strings: lcObj,
         isRTL: currentLocale.isRTL,