refactor: ui home page is ok

api/config/custom-environment-variables.cjs

@@ -109,7 +109,11 @@ module.exports = {
     cssText: 'THEME_CSS_TEXT'
   },
   i18n: {
-    defaultLocale: 'I18N_DEFAULT_LOCALE'
+    defaultLocale: 'I18N_DEFAULT_LOCALE',
+    locales: {
+      __name: 'I18N_LOCALES',
+      __format: 'json'
+    }
   },
   mails: {
     transport: jsonEnv('MAILS_TRANSPORT'),

api/config/default.cjs

@@ -143,7 +143,8 @@ module.exports = {
     cssText: ''
   },
   i18n: {
-    defaultLocale: 'fr'
+    defaultLocale: 'fr',
+    locales: ['fr', 'en', 'es', 'pt', 'it', 'de']
   },
   mails: {
     from: '[email protected]',

api/config/type/schema.json

@@ -138,12 +138,19 @@
     "i18n": {
       "type": "object",
       "required": [
-        "defaultLocale"
+        "defaultLocale",
+        "locales"
       ],
       "properties": {
         "defaultLocale": {
           "type": "string",
           "default": "fr"
+        },
+        "locales": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
         }
       }
     },

api/i18n/index.ts

@@ -21,21 +21,11 @@ const flatOpts = { delimiter: '_' }
 // cannot be changed at runtime for now, because it impacts the build
 export const defaultLocale = config.i18n.defaultLocale
 
-// this the full list of available langs, the proposed list is overwritten in config.i18n.locales
-export const locales = [
-  { code: 'fr' },
-  { code: 'en' },
-  { code: 'de' },
-  { code: 'it' },
-  { code: 'es' },
-  { code: 'pt' }
-]
-
 // Build a map of messages of this form
 // {fr: {msg1: 'libellé 1'}, en: {msg1: 'label 1'}}
 const _messages: any = {}
-for (const l of locales) {
-  _messages[l.code] = (await import ('./' + l.code + '.js')).default
+for (const l of config.i18n.locales) {
+  _messages[l] = (await import ('./' + l + '.js')).default
 }
 const flatMessages = flatten(_messages, flatOpts) as Record<string, string>
 
@@ -76,10 +66,10 @@ export const __ = (req: Request, key: string, params: Record<string, string> = {
 
 export const __all = (key: string, params: Record<string, string> = {}) => {
   const res: Record<string, string> = {}
-  for (const locale of locales) {
-    const value = flatMessages[locale.code + '_' + key]
+  for (const locale of config.i18n.locales) {
+    const value = flatMessages[locale + '_' + key]
     if (value) {
-      res[locale.code] = microTemplate(value, params)
+      res[locale] = microTemplate(value, params)
     }
   }
   return res

api/src/ui-config.ts

@@ -1,12 +1,13 @@
 import config, { type ApiConfig } from './config.ts'
 import { publicMessages } from '../i18n/index.ts'
 
-export type UiConfig = Pick<ApiConfig, 'publicUrl' | 'theme' | 'manageSites'> & { publicMessages: any }
+export type UiConfig = Pick<ApiConfig, 'publicUrl' | 'theme' | 'manageSites' | 'i18n'> & { publicMessages: any }
 
 export const uiConfig: UiConfig = {
   publicUrl: config.publicUrl,
   theme: config.theme,
   manageSites: config.manageSites,
+  i18n: config.i18n,
   publicMessages
 }
 export default uiConfig

package.json

@@ -66,9 +66,9 @@
     "typescript": "^5.5.4"
   },
   "dependencies": {
-    "@data-fair/lib-types-builder": "^1.3.0"
+    "@data-fair/lib-types-builder": "^1.4.0"
   },
   "relativeDependencies": {
-    "@data-fair/lib-node": "../lib/packages/node"
+    "@data-fair/lib-vuetify": "../lib/packages/vuetify"
   }
 }

ui/.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.tsbuildinfo
 
 # Editor directories and files
 .vscode/*

ui/dts/auto-imports.d.ts

@@ -162,28 +162,14 @@ declare module 'vue' {
     readonly $sitePath: UnwrapRef<typeof import('~/context')['$sitePath']>
     readonly $uiConfig: UnwrapRef<typeof import('~/context')['$uiConfig']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly addDepartmentMenu: UnwrapRef<typeof import('../src/components/add-department-menu.vue')['default']>
-    readonly addMemberMenu: UnwrapRef<typeof import('../src/components/add-member-menu.vue')['default']>
-    readonly addOrganizationMenu: UnwrapRef<typeof import('../src/components/add-organization-menu.vue')['default']>
-    readonly addPartnerMenu: UnwrapRef<typeof import('../src/components/add-partner-menu.vue')['default']>
-    readonly authProvidersLoginLinks: UnwrapRef<typeof import('../src/components/auth-providers-login-links.vue')['default']>
-    readonly cancelDeletion: UnwrapRef<typeof import('../src/components/cancel-deletion.vue')['default']>
-    readonly changeHost: UnwrapRef<typeof import('../src/components/change-host.vue')['default']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
-    readonly confirmMenu: UnwrapRef<typeof import('../src/components/confirm-menu.vue')['default']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
-    readonly deleteDepartmentMenu: UnwrapRef<typeof import('../src/components/delete-department-menu.vue')['default']>
-    readonly deleteMemberMenu: UnwrapRef<typeof import('../src/components/delete-member-menu.vue')['default']>
-    readonly deletePartnerMenu: UnwrapRef<typeof import('../src/components/delete-partner-menu.vue')['default']>
     readonly dfPersonalMenu: UnwrapRef<typeof import('@data-fair/lib-vuetify/personal-menu.vue')['default']>
     readonly dfTutorialAlert: UnwrapRef<typeof import('@data-fair/lib-vuetify/tutorial-alert.vue')['default']>
     readonly dfUserAvatar: UnwrapRef<typeof import('@data-fair/lib-vuetify/user-avatar.vue')['default']>
-    readonly editDepartmentMenu: UnwrapRef<typeof import('../src/components/edit-department-menu.vue')['default']>
-    readonly editDepartmentsMenu: UnwrapRef<typeof import('../src/components/edit-departments-menu.vue')['default']>
-    readonly editMemberMenu: UnwrapRef<typeof import('../src/components/edit-member-menu.vue')['default']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly getActiveHead: UnwrapRef<typeof import('@unhead/vue')['getActiveHead']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
@@ -195,7 +181,6 @@ declare module 'vue' {
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
-    readonly loadAvatar: UnwrapRef<typeof import('../src/components/load-avatar.vue')['default']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
     readonly mdiAlertCircle: UnwrapRef<typeof import('@mdi/js')['mdiAlertCircle']>
     readonly mdiBell: UnwrapRef<typeof import('@mdi/js')['mdiBell']>
@@ -211,7 +196,6 @@ declare module 'vue' {
     readonly mdiSend: UnwrapRef<typeof import('@mdi/js')['mdiSend']>
     readonly mdiWeb: UnwrapRef<typeof import('@mdi/js')['mdiWeb']>
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
-    readonly notifyMenu: UnwrapRef<typeof import('../src/components/notify-menu.vue')['default']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
     readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
     readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
@@ -228,23 +212,14 @@ declare module 'vue' {
     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
-    readonly organizationDepartments: UnwrapRef<typeof import('../src/components/organization-departments.vue')['default']>
-    readonly organizationMembers: UnwrapRef<typeof import('../src/components/organization-members.vue')['default']>
-    readonly organizationPartners: UnwrapRef<typeof import('../src/components/organization-partners.vue')['default']>
-    readonly organizationStorage: UnwrapRef<typeof import('../src/components/organization-storage.vue')['default']>
-    readonly partnerInvitation: UnwrapRef<typeof import('../src/components/partner-invitation.vue')['default']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
     readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
     readonly ref: UnwrapRef<typeof import('vue')['ref']>
-    readonly resendInvitation: UnwrapRef<typeof import('../src/components/resend-invitation.vue')['default']>
-    readonly resendPartnerInvitation: UnwrapRef<typeof import('../src/components/resend-partner-invitation.vue')['default']>
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
-    readonly sitePatch: UnwrapRef<typeof import('../src/components/site-patch.vue')['default']>
-    readonly sitePost: UnwrapRef<typeof import('../src/components/site-post.vue')['default']>
     readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
     readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
@@ -280,7 +255,6 @@ declare module 'vue' {
     readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
     readonly useUiNotif: UnwrapRef<typeof import('@data-fair/lib-vue/ui-notif.js')['useUiNotif']>
     readonly useWS: UnwrapRef<typeof import('@data-fair/lib-vue/ws.js')['useWS']>
-    readonly vJsf: UnwrapRef<typeof import('../src/components/v-jsf.vue')['default']>
     readonly watch: UnwrapRef<typeof import('vue')['watch']>
     readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
     readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>

ui/package.json

@@ -12,8 +12,8 @@
     "lint-fix": "eslint --fix ."
   },
   "dependencies": {
-    "@data-fair/lib-vue": "^1.7.0",
-    "@data-fair/lib-vuetify": "^1.2.0",
+    "@data-fair/lib-vue": "^1.8.0",
+    "@data-fair/lib-vuetify": "^1.3.0",
     "@intlify/unplugin-vue-i18n": "^5.2.0",
     "@koumoul/v-iframe": "^2.4.4",
     "@mdi/js": "^7.4.47",
@@ -24,6 +24,7 @@
     "sass-embedded": "^1.79.4",
     "unplugin-auto-import": "^0.18.3",
     "unplugin-fonts": "^1.1.1",
+    "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-router": "^0.10.8",
     "vite": "^5.4.1",
     "vite-plugin-vuetify": "^2.0.4",

ui/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app
     :class="appClass"
-    :style="localePath('login') === $route.path && $vuetify.theme.light && 'background-color: rgb(245, 245, 245);'"
+    :style="isLoginPage && !$vuetify.theme.current.dark && 'background-color: rgb(245, 245, 245);'"
   >
     <template v-if="isLoginPage">
       <v-app-bar
@@ -10,7 +10,7 @@
         color="transparent"
       >
         <v-spacer />
-        <lang-switcher />
+        <lang-switcher :locales="$uiConfig.i18n.locales" />
       </v-app-bar>
     </template>
     <template v-else>
@@ -23,18 +23,19 @@
       </v-container>
       <ui-notif />
     </v-main>
-    <v-footer
+    <!--<v-footer
       v-if="!embed && !isLoginPage"
       class="pa-3"
     >
       <v-spacer />
       <div>Powered by <a href="https://data-fair.github.io/simple-directory/">Simple Directory</a></div>
-    </v-footer>
+    </v-footer>-->
   </v-app>
 </template>
 
 <script lang="ts" setup>
 import uiNotif from '@data-fair/lib-vuetify/ui-notif.vue'
+import LangSwitcher from '@data-fair/lib-vuetify/lang-switcher.vue'
 
 const { lang } = useSession()
 const route = useRoute()
@@ -45,14 +46,13 @@ useHead({
   // __dangerouslyDisableSanitizers: ['style']
 })
 
-const { mapState, mapGetters, mapActions } = require('vuex')
-const showNav = useBooleanSearchParam('showNav')
 const embed = useBooleanSearchParam('embed')
 const showToolbarParam = useBooleanSearchParam('showToolbar')
 
 const isLoginPage = computed(() => route.name === '/login')
 const showToolbar = computed(() => !embed.value || showToolbarParam.value)
 const appClass = computed(() => {
+  if (!route.name) return ''
   return 'page' + route.name.replace(/\//g, '')
 })