Complete dashboard translations & small UI improvements (#69)

* fix dropdown action Estimate Dashboard and fix translating full Dasboard page

* Update app.php

* fix locale in app.php config

* Wizard install with translation, customer portal with translation, and fixing hardcoding strings to get translation

* fixes asked to review

* fixes pint

---------

Co-authored-by: Max <contact@agencetwogether.fr>
Co-authored-by: Darko Gjorgjijoski <5760249+gdarko@users.noreply.github.com>

resources/scripts/admin/views/installation/Installation.vue

@@ -9,7 +9,7 @@
     />
 
     <BaseWizard
-      :steps="7"
+      :steps="8"
       :current-step="currentStepNumber"
       @click="onNavClick"
     >
@@ -20,6 +20,7 @@
 
 <script>
 import { ref } from 'vue'
+import Step0SetLanguage from './Step0SetLanguage.vue'
 import Step1RequirementsCheck from './Step1RequirementsCheck.vue'
 import Step2PermissionCheck from './Step2PermissionCheck.vue'
 import Step3DatabaseConfig from './Step3DatabaseConfig.vue'
@@ -34,6 +35,7 @@ import { useRouter } from 'vue-router'
 
 export default {
   components: {
+    step_0: Step0SetLanguage,
     step_1: Step1RequirementsCheck,
     step_2: Step2PermissionCheck,
     step_3: Step3DatabaseConfig,
@@ -45,11 +47,12 @@ export default {
   },
 
   setup() {
-    let stepComponent = ref('step_1')
+    let stepComponent = ref('step_0')
     let currentStepNumber = ref(1)
 
     const router = useRouter()
     const installationStore = useInstallationStore()
+    const { global } = window.i18n
 
     checkCurrentProgress()
 
@@ -61,6 +64,10 @@ export default {
         return
       }
 
+      if(typeof res.data.profile_language === 'string') {
+        global.locale.value = res.data.profile_language
+      }
+
       let dbstep = parseInt(res.data.profile_complete)
 
       if (dbstep) {
@@ -93,7 +100,7 @@ export default {
 
       currentStepNumber.value++
 
-      if (currentStepNumber.value <= 8) {
+      if (currentStepNumber.value <= 9) {
         stepComponent.value = 'step_' + currentStepNumber.value
       }
     }

resources/scripts/admin/views/installation/Step0SetLanguage.vue

@@ -0,0 +1,85 @@
+<template>
+  <BaseWizardStep
+    :title="$t('wizard.install_language.title')"
+    :description="$t('wizard.install_language.description')"
+  >
+    <div class="w-full md:w-2/3">
+      <div class="mb-6">
+        <BaseInputGroup
+          :label="$t('wizard.language')"
+          :content-loading="isFetchingInitialData"
+          required
+        >
+          <BaseMultiselect
+            v-model="currentLanguage"
+            :content-loading="isFetchingInitialData"
+            :options="languages"
+            label="name"
+            value-prop="code"
+            :placeholder="$t('settings.preferences.select_language')"
+            class="w-full"
+            track-by="name"
+            :searchable="true"
+            @change="changeLanguage"
+          />
+        </BaseInputGroup>
+      </div>
+
+      <BaseButton
+        v-show="!isFetchingInitialData"
+        @click="next"
+      >
+        {{ $t('wizard.continue') }}
+        <template #left="slotProps">
+          <BaseIcon name="ArrowRightIcon" :class="slotProps.class" />
+        </template>
+      </BaseButton>
+
+    </div>
+  </BaseWizardStep>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useInstallationStore } from '@/scripts/admin/stores/installation.js'
+
+const { global } = window.i18n
+
+const emit = defineEmits(['next'])
+
+let isFetchingInitialData = ref(false)
+let isSaving = ref(false)
+let languages = ref([])
+let currentLanguage = 'en'
+
+const installationStore = useInstallationStore()
+
+onMounted(() => {
+  getLanguages()
+})
+
+async function getLanguages() {
+  isFetchingInitialData.value = true
+
+  const res = await installationStore.fetchInstallationLanguages()
+
+  languages.value = res.data.languages
+
+  isFetchingInitialData.value = false
+}
+
+
+function next() {
+  isSaving.value = true
+  emit('next')
+  isSaving.value = false
+}
+
+function changeLanguage(event){
+  if(typeof global.locale !== 'string') {
+    global.locale.value = event
+  }
+}
+</script>
+
+

resources/scripts/admin/views/installation/Step3DatabaseConfig.vue

@@ -36,11 +36,13 @@ export default {
     const database_connection = ref('mysql')
     const isSaving = ref(false)
     const { t } = useI18n()
+    const { global } = window.i18n
 
     const notificationStore = useNotificationStore()
     const installationStore = useInstallationStore()
 
     const databaseData = computed(() => {
+      installationStore.currentDataBaseData.app_locale = global.locale.value
       return installationStore.currentDataBaseData
     })
 
@@ -75,6 +77,12 @@ export default {
 
           emit('next', 3)
 
+          let language = {
+            profile_language: global.locale.value,
+          }
+          await installationStore.addInstallationLanguage(language)
+
+
           notificationStore.showNotification({
             type: 'success',
             message: t('wizard.success.' + res.data.success),

resources/scripts/admin/views/installation/Step4VerifyDomain.vue

@@ -18,17 +18,15 @@
       </BaseInputGroup>
     </div>
 
-    <p class="mt-4 mb-0 text-sm text-gray-600">Notes:</p>
+    <p class="mt-4 mb-0 text-sm text-gray-600">{{ $t('wizard.verify_domain.notes.notes') }}</p>
     <ul class="w-full text-gray-600 list-disc list-inside">
       <li class="text-sm leading-8">
-        App domain should not contain
-        <b class="inline-block px-1 bg-gray-100 rounded-sm">https://</b> or
-        <b class="inline-block px-1 bg-gray-100 rounded-sm">http</b> in front of
-        the domain.
+        {{ $t('wizard.verify_domain.notes.not_contain') }}
+        <b class="inline-block px-1 bg-gray-100 rounded-sm">https://</b> {{ $t('wizard.verify_domain.notes.or') }}
+        <b class="inline-block px-1 bg-gray-100 rounded-sm">http</b> {{ $t('wizard.verify_domain.notes.in_front') }}
       </li>
       <li class="text-sm leading-8">
-        If you're accessing the website on a different port, please mention the
-        port. For example:
+        {{ $t('wizard.verify_domain.notes.if_you') }}
         <b class="inline-block px-1 bg-gray-100">localhost:8080</b>
       </li>
     </ul>

resources/scripts/admin/views/installation/Step8CompanyPreferences.vue

@@ -115,7 +115,7 @@
             <BaseMultiselect
               v-model="currentPreferences.fiscal_year"
               :content-loading="isFetchingInitialData"
-              :options="globalStore.fiscalYears"
+              :options="fiscalYearsList"
               label="key"
               value-prop="value"
               :placeholder="$t('settings.preferences.select_financial_year')"
@@ -174,6 +174,14 @@ const router = useRouter()
 
 isFetchingInitialData.value = true
 
+const fiscalYearsList = computed(() => {
+  return globalStore.fiscalYears.map((item) => {
+    return Object.assign({}, item, {
+      key: t(item.key),
+    })
+  })
+})
+
 const options = reactive([
   {
     title: tm('settings.customization.invoices.allow'),