Tobias Mesquita for Quasar Framework Brasil

Posted on Apr 19, 2020

QPANC - Parte 13 - Quasar - Regionalização e Stores

#quasar #postgres #aspnetcore #docker

QPANC são as iniciais de Quasar PostgreSQL ASP NET Core.

27 Configuração do i18n

Agora que já configuramos a persistência dos dados relativos ao cliente, podemos configurar os parâmetros de internacionalização.

Para tal, vá até o boot i18n (ele deve ter sido criado durante a criação do projeto, caso não tenha sido, você deverá adiciona-lo agora):

QPANC.App/src/boot/i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from 'src/i18n'
import { Quasar } from 'quasar'

Vue.use(VueI18n)

export default ({ Vue, app, store }) => {
  const fallback = Quasar.lang.isoName
  const locale = store.getters['app/locale'] || fallback
  Quasar.lang.set(locale)
  const i18n = new VueI18n({
    locale: locale,
    fallbackLocale: fallback,
    messages
  })

  app.i18n = i18n
}

28 Troca de Idioma

Para alternar entre um idioma e outro, é bem simples, basta seta o idioma desejado no i18n e no lang do quasar. iremos construir um componente bem simples, que irá permitir que o usuário escolha o idioma desejado.

Como primeiro passo, iremos adicionar à pasta statics alguns ícones, no caso a bandeira do Brasil e a dos Estados Unidos. você pode conseguir estes arquivos no site Flat Icon

Então crie a pasta locale em QPANC.App/src/components e adicione os arquivos index.js, index.vue e index.sass

QPANC.App/src/components/locale/index.js

export default {
  name: 'LocaleComponent',
  data () {
    return {
      fab: false
    }
  },
  computed: {
    locale () {
      return this.$store.getters['app/locale']
    },
    icon () {
      return `img:statics/flags/${this.locale}.svg`
    }
  },
  methods: {
    async set (locale) {
      this.$store.commit('app/localeUser', locale)
      this.$i18n.locale = locale
      const lang = await import('quasar/lang/' + locale)
      this.$q.lang.set(lang)
    }
  }
}

QPANC.App/src/components/locale/index.sass

.component-locale
  .q-btn--fab .q-btn__wrapper
    padding: 0
    .q-fab__icon-holder,
    img
      width: 56px
      height: 56px
  .q-btn--fab-mini .q-btn__wrapper
    padding: 0
    img
      width: 40px
      height: 40px

QPANC.App/src/components/locale/index.vue

<template>
  <q-page-sticky position="bottom-right" class="component-locale" :offset="[18, 18]">
    <q-fab v-model="fab" :label="$t('locale.title')" external-label vertical-actions-align="right" :icon="icon" direction="up" >
      <q-fab-action label-position="left" icon="img:statics/flags/pt-br.svg" @click="set('pt-br')" :label="$t('locale.ptbr')" external-label />
      <q-fab-action label-position="left" icon="img:statics/flags/en-us.svg" @click="set('en-us')" :label="$t('locale.enus')" external-label />
    </q-fab>
  </q-page-sticky>
</template>

<script src="./index.js"></script>
<style src="./index.sass" lang="sass"></style>

A troca de idioma é realizada no seguinte trecho de código:

    async set (locale) {
      this.$store.commit('app/localeUser', locale)
      this.$i18n.locale = locale
      const lang = await import('quasar/lang/' + locale)
      this.$q.lang.set(lang)
    }

Como você deve ter percebido, este componente usa alguns textos localizados, então precisamos atualizar os arquivos JSON utilizados pelo i18n.

Quasar.App/src/i18n/en-us/index.js

export default {
  locale: {
    title: 'Idiom',
    ptbr: 'Portuguese',
    enus: 'English'
  }
}

Quasar.App/src/i18n/pt-br/index.js

export default {
  locale: {
    title: 'Idioma',
    ptbr: 'Português',
    enus: 'Inglês'
  }
}

Agora precisamos registrar este componente, para tal, crie o boot components

quasar new boot components

QPANC.App/quasar.config.js

module.exports = function (ctx) {
  return {
    boots: [
      'components'
    ]
  }
}

QPANC.App/src/boot/components.js

import Vue from 'vue'

Vue.component('locale-switch', () => import('components/locale/index.vue'))

E por fim, adicione este componente aos layouts main e clean

<template>
  <q-layout id="layout-clean" view="lHh Lpr lFf" class="bg-main">
    <!-- ... -->
    <locale-switch></locale-switch>
  </q-layout>
</template>

E então podemos executar a aplicação e realizar alguns testes. Como sugestão, abra a tela de Login, envie um usuário/senha incorretos, troque o idioma e tente novamente. A aplicação deverá alternar entre os dois idiomas, assim como a API deve retornar os erros no mesmo idioma que a aplicação.

29 Injetando o Global bus, i18n e router na store

Em uma aplicação SSR, como devemos manter o isolamento os serviços e recursos, não podemos exportar e consequentemente importar recursos de forma global.

Porém, é comum que precisemos acessar as rotas, os textos localizados, ou até mesmo emitir e escutar eventos.

Neste caso, podemos criar um arquivo de boot, e injetar estes recursos direto na store.:

quasar new boot store

E claro, não esqueça de adicionar ele ao quasar.config.js > boots. Apenas lembre-se que este boot deve ser colocado após o i18n.

QPANC.App/quasar.config.js

module.exports = function (ctx) {
  return {
    boots: [
      'i18n',
      'store'
    ]
  }
}

E agora, a implementação deste boot.:

QPANC.App/src/boot/store.js

export default async ({ app, store, router }) => {
  store.$router = router
  Object.defineProperty(store, '$t', {
    get () {
      return app.i18n.t.bind(app.i18n)
    }
  })
  Object.defineProperty(store, '$route', {
    get () {
      return router.route
    }
  })
  Object.defineProperty(store, '$root', {
    get () {
      return router.app.$root
    }
  })
}

A partir deste ponto, você pode acessar o this.$root, this.$t, this.$router e this.$route de suas actions, mutations e getters.

5 Playwright CLI Flags That Will Transform Your Testing Workflow

0:56 --last-failed
2:34 --only-changed
4:27 --repeat-each
5:15 --forbid-only
5:51 --ui --headed --workers 1

Learn how these powerful command-line options can save you time, strengthen your test suite, and streamline your Playwright testing experience. Click on any timestamp above to jump directly to that section in the tutorial!

Watch Full Video 📹️