import { AdminUser } from 'adminforth';
import { admin } from '../index';
{
...
resourceId: 'aparts',
...
options: {
bulkActions: [
{
label: 'Mark as listed',
icon: 'flowbite:eye-solid',
// if optional `confirm` is provided, user will be asked to confirm action
confirm: 'Are you sure you want to mark all selected apartments as listed?',
action: function ({selectedIds, adminUser }: {selectedIds: any[], adminUser: AdminUser }) {
const stmt = admin.resource('aparts').dataConnector.db.prepare(`UPDATE apartments SET listed = 1 WHERE id IN (${selectedIds.map(() => '?').join(',')})`);
stmt.run(...selectedIds);
return { ok: true, error: false, successMessage: `Marked ${selectedIds.length} apartments as listed` };
return { ok: true, error: false, successMessage: await tr('Marked {count} apartments as listed', 'apartments', { count: selectedIds.length }) };
},
}
],
}
}
import { AdminUser } from 'adminforth';
import { admin } from '../index';
{
...
resourceId: 'aparts',
...
options: {
bulkActions: [
{
label: 'Mark as listed',
icon: 'flowbite:eye-solid',
// if optional `confirm` is provided, user will be asked to confirm action
confirm: 'Are you sure you want to mark all selected apartments as listed?',
action: function ({selectedIds, adminUser }: {selectedIds: any[], adminUser: AdminUser }) {
const stmt = admin.resource('aparts').dataConnector.db.prepare(`UPDATE apartments SET listed = 1 WHERE id IN (${selectedIds.map(() => '?').join(',')})`);
stmt.run(...selectedIds);
return { ok: true, error: false, successMessage: `Marked ${selectedIds.length} apartments as listed` };
return { ok: true, error: false, successMessage: await tr('Marked {count} apartments as listed', 'apartments', { count: selectedIds.length }) };
},
}
],
}
}
You can use this module not only to translate Admin area of your application but also to translate other services of your application. +This will allow you to reuse the same functionality and AI completion adapters for all your translations. For example in this app we +will consider that we have a Nuxt.js SEO-centric frontend which we want to translate with vue-i18n.
+To do it you need to use 2 exposed methods from the plugin: feedCategoryTranslations and getCategoryTranslations.
First of all, at some step, e.g. CI pipeline you should get all translation strings from your external app and feed them ao an own rest API like '/feed-nuxt-strings', this API might look like this
app.get(`${ADMIN_BASE_URL}/feed-nuxt-strings`,
async (req, res) => {
// req.body will be an array of objects like:
// [{
// path: 'Login',
// file: 'src/views/Login.vue:35',
// }]
const messagesForFeed = req.body.map((mk: any) => {
return {
en_string: mk.path,
source: mk.file,
};
});
admin.getPluginByClassName<I18nPlugin>('I18nPlugin').feedCategoryTranslations(
messagesForFeed,
'nextApp'
)
res.json({
ok: true
});
}
);
For extracting 18n messages we use vue-i18n-extract package.
+You can add extract command to package.json:
{
"scripts": {
"i18n:extract": "echo '{}' > i18n-empty.json && vue-i18n-extract report --vueFiles './src/**/*.?(js|vue)' --output ./i18n-messages.json --languageFiles 'i18n-empty.json' --add",
"i18n:feed-to-backoffice": "npm run i18n:extract && curl -X POST -H 'Content-Type: application/json' -d @i18n-messages.json http://adminforth:3000/feed-nuxt-strings"
""
}
}
Make sure to replace adminforth:3000 with AdminForth API URL. We are assuming it is docker container name in internal docker network.
So in the pipeline you should run npm run i18n:feed-to-backoffice to extract messages from your Nuxt.js app and feed them to AdminForth.
++👆 The example method is just a stub, please make sure you not expose endpoint to public or add some simple authorization on it, +otherwise someone might flood you with dump translations requests.
+
Then in your Nuxt.js app you should call this API and store the strings in the same.
+Next part. When we will need translations on the nuxt instance, we should use vue-i18n's lazy loading feature:
+import { callAdminForthApi } from '@/utils';
export async function loadLocaleMessages(i18n, locale) {
// load locale messages with dynamic import
const messages = await callAdminForthApi({
path: `/api/translations/?lang=${locale}`,
method: 'GET',
});
// set locale and locale message
i18n.global.setLocaleMessage(locale, messages.default)
return nextTick()
}
See vue-i18n's lazy loading feature to understand where better to call loadLocaleMessages function.
Here is how API for messages will look:
+app.get(`${ADMIN_BASE_URL}/api/translations/`,
async (req, res) => {
const lang = req.query.lang;
const messages = await admin.getPluginByClassName<I18nPlugin>('I18nPlugin').getCategoryTranslations('nextApp', lang);
res.json(messages);
}
);