i18n-dashboard 0.1.0

package/composables/useKeys.ts

@@ -0,0 +1,231 @@
+import { keyService } from '../services/key.service'
+import { translationService } from '../services/translation.service'
+import { scanService } from '../services/scan.service'
+import type { KeysQuery, KeysResponse } from '../services/key.service'
+
+export function useKeys(options: {
+  queryParams?: Ref<KeysQuery>
+  id?: Ref<string | string[]>
+} = {}) {
+  const toast = useToast()
+  const router = useRouter()
+  const route = useRoute()
+
+  // ── List mode ─────────────────────────────────────────────────────────────
+
+  const data = ref<KeysResponse | null>(null)
+  const listPending = ref(false)
+
+  async function refresh() {
+    if (!options.queryParams?.value.project_id) return
+    listPending.value = true
+    try {
+      data.value = await keyService.getKeys(options.queryParams.value)
+    }
+    catch {}
+    finally {
+      listPending.value = false
+    }
+  }
+
+  if (options.queryParams) {
+    watch(options.queryParams, refresh, { deep: true, immediate: true })
+  }
+
+  const addingKey = ref(false)
+  async function createKey(projectId: number, key: string, description?: string): Promise<boolean> {
+    addingKey.value = true
+    try {
+      await keyService.createKey({ project_id: projectId, key, description })
+      toast.add({ title: 'Clé créée', color: 'success' })
+      await refresh()
+      refreshNuxtData('project-stats')
+      return true
+    }
+    catch {
+      return false
+    }
+    finally {
+      addingKey.value = false
+    }
+  }
+
+  const scanning = ref(false)
+  async function scan(projectId: number): Promise<void> {
+    scanning.value = true
+    try {
+      const result = await scanService.scan(projectId)
+      const langMsg = result.langsAdded > 0 ? ` · ${result.langsAdded} langue(s) ajoutée(s)` : ''
+      toast.add({
+        title: 'Scan terminé',
+        description: `${result.keysFound} clés trouvées · ${result.keysAdded} nouvelles${langMsg}`,
+        color: 'success',
+      })
+      await refresh()
+    }
+    catch {}
+    finally {
+      scanning.value = false
+    }
+  }
+
+  const syncing = ref(false)
+  async function sync(projectId: number): Promise<void> {
+    syncing.value = true
+    try {
+      const result = await scanService.sync(projectId)
+      toast.add({
+        title: 'Sync terminée',
+        description: `${result.added} ajoutées · ${result.updated} mises à jour`,
+        color: 'success',
+      })
+      await refresh()
+    }
+    catch {}
+    finally {
+      syncing.value = false
+    }
+  }
+
+  const batchTranslating = ref(false)
+  async function batchTranslate(projectId: number, targetLang: string): Promise<void> {
+    batchTranslating.value = true
+    try {
+      const result = await translationService.batchTranslate(projectId, targetLang)
+      toast.add({
+        title: 'Traduction automatique terminée',
+        description: `${result.translated} traduites · ${result.skipped} ignorées · ${result.errors} erreurs`,
+        color: 'success',
+      })
+      await refresh()
+    }
+    catch {}
+    finally {
+      batchTranslating.value = false
+    }
+  }
+
+  // ── Detail mode ───────────────────────────────────────────────────────────
+
+  const keyId = computed(() => {
+    if (!options.id) return null
+    const v = options.id.value
+    return Array.isArray(v) ? v[0] : v
+  })
+
+  const { data: keyData, pending: detailPending, refresh: detailRefresh } = useAsyncData(
+    `key-${keyId.value ?? 'none'}`,
+    () => keyId.value ? keyService.getKey(keyId.value) : Promise.resolve(null),
+    { watch: [keyId] },
+  )
+
+  const savingLang = ref<string | null>(null)
+  async function saveTranslation(langCode: string, value: string): Promise<void> {
+    if (!keyData.value) return
+    savingLang.value = langCode
+    try {
+      await translationService.save({ key_id: keyData.value.id, language_code: langCode, value })
+      await detailRefresh()
+    }
+    catch {}
+    finally {
+      savingLang.value = null
+    }
+  }
+
+  const settingStatus = ref<string | null>(null)
+  async function setStatus(langCode: string, status: string): Promise<void> {
+    if (!keyData.value) return
+    settingStatus.value = `${langCode}:${status}`
+    try {
+      await translationService.setStatus({ key_id: keyData.value.id, language_code: langCode, status })
+      await detailRefresh()
+    }
+    catch {}
+    finally {
+      settingStatus.value = null
+    }
+  }
+
+  async function restoreVersion(langCode: string, value: string): Promise<void> {
+    if (!keyData.value) return
+    try {
+      await translationService.save({ key_id: keyData.value.id, language_code: langCode, value })
+      await detailRefresh()
+      toast.add({ title: 'Version restaurée', color: 'success' })
+    }
+    catch {}
+  }
+
+  async function autoTranslate(langCode: string, text: string, sourceLang: string): Promise<string | null> {
+    try {
+      const result = await translationService.translateText(text, sourceLang, langCode)
+      return result.text
+    }
+    catch {
+      return null
+    }
+  }
+
+  const savingDescription = ref(false)
+  async function updateDescription(description: string | null): Promise<void> {
+    if (!keyData.value) return
+    savingDescription.value = true
+    try {
+      await keyService.updateKey(keyData.value.id, { description })
+      await detailRefresh()
+      toast.add({ title: 'Description mise à jour', color: 'success' })
+    }
+    catch {}
+    finally {
+      savingDescription.value = false
+    }
+  }
+
+  const deleting = ref(false)
+  async function deleteKey(): Promise<void> {
+    if (!keyData.value) return
+    deleting.value = true
+    try {
+      await keyService.deleteKey(keyData.value.id)
+      toast.add({ title: 'Clé supprimée', color: 'success' })
+      const projectId = route.params.id
+      router.push(projectId ? `/projects/${projectId}/translations` : '/projects')
+    }
+    catch {
+      deleting.value = false
+    }
+  }
+
+  // ── Shared ────────────────────────────────────────────────────────────────
+
+  const pending = computed(() => listPending.value || detailPending.value)
+
+  return {
+    // List
+    data,
+    addingKey,
+    createKey,
+    scanning,
+    scan,
+    syncing,
+    sync,
+    batchTranslating,
+    batchTranslate,
+    // Detail
+    keyData,
+    savingLang,
+    saveTranslation,
+    settingStatus,
+    setStatus,
+    restoreVersion,
+    autoTranslate,
+    savingDescription,
+    updateDescription,
+    deleting,
+    deleteKey,
+    // Shared
+    pending,
+    refresh: options.id ? detailRefresh : refresh,
+  }
+}

package/composables/useLanguages.ts

@@ -0,0 +1,221 @@
+import { LANGUAGES } from '../consts/languages.const'
+import { languageService } from '../services/language.service'
+import { translationService } from '../services/translation.service'
+import { jobService } from '../services/job.service'
+import type { Language, LanguageItem, CreateLanguagePayload } from '../interfaces/languages.interface'
+
+// ── Static language lookup ───────────────────────────────────────────────────
+
+export function useLanguages() {
+  const toast = useToast()
+  const { currentProject } = useProject()
+
+  // ── Static lookup ────────────────────────────────────────────────────────
+
+  const searchQuery = ref('')
+
+  const filteredLanguages = computed(() => {
+    const q = searchQuery.value.toLowerCase()
+    if (!q) return LANGUAGES
+    return LANGUAGES.filter(
+      l => l.code.toLowerCase().includes(q)
+        || l.name.toLowerCase().includes(q)
+        || l.nativeName.toLowerCase().includes(q),
+    )
+  })
+
+  function findLanguage(code: string): Language | undefined {
+    // Exact match first, then fall back to base language (fr-CA → fr)
+    return LANGUAGES.find(l => l.code === code)
+      ?? LANGUAGES.find(l => l.code === code.split('-')[0])
+  }
+
+  function getLanguageName(code: string): string {
+    const lang = findLanguage(code)
+    return lang ? `${lang.nativeName} (${lang.name})` : code
+  }
+
+  // ── Project languages (API) ──────────────────────────────────────────────
+
+  const { data, pending, refresh } = useAsyncData<LanguageItem[]>(
+    'project-languages',
+    () => languageService.getLanguages(currentProject.value?.id),
+    { watch: [() => currentProject.value?.id], default: () => [] },
+  )
+
+  const projectLanguages = computed(() => data.value ?? [])
+
+  const adding = ref(false)
+  async function addLanguage(payload: Omit<CreateLanguagePayload, 'project_id'>): Promise<void> {
+    if (!currentProject.value) return
+    adding.value = true
+    try {
+      await languageService.create({ ...payload, project_id: currentProject.value.id })
+      await refresh()
+      refreshNuxtData('project-stats')
+    }
+    finally {
+      adding.value = false
+    }
+  }
+
+  const deleting = ref(false)
+  async function deleteLanguage(code: string): Promise<void> {
+    if (!currentProject.value) return
+    deleting.value = true
+    try {
+      await languageService.remove(code, currentProject.value.id)
+      await refresh()
+      refreshNuxtData('project-stats')
+      toast.add({ title: 'Langue supprimée', color: 'success' })
+    }
+    finally {
+      deleting.value = false
+    }
+  }
+
+  async function setDefault(lang: LanguageItem): Promise<void> {
+    if (!currentProject.value) return
+    try {
+      await languageService.setDefault(lang, currentProject.value.id)
+      await refresh()
+    }
+    catch {}
+  }
+
+  async function setFallback(lang: LanguageItem, fallbackCode: string | null): Promise<void> {
+    await $fetch(`/api/languages/${lang.id}`, {
+      method: 'PUT',
+      body: { fallback_code: fallbackCode },
+    })
+    await refresh()
+  }
+
+  async function startTranslateAll(languageCode: string, languageName: string): Promise<string | null> {
+    if (!currentProject.value) return null
+    try {
+      const job = await translationService.translateAll(currentProject.value.id, languageCode, languageName)
+      return job.jobId
+    }
+    catch {
+      return null
+    }
+  }
+
+  // ── Translation job polling ──────────────────────────────────────────────
+
+  const showProgress = ref(false)
+  const progressJobId = ref<string | null>(null)
+  const progressLangName = ref('')
+  const progressTotal = ref(0)
+  const progressDone = ref(0)
+  const progressPercent = ref(0)
+  const progressStatus = ref<'running' | 'done' | 'error'>('running')
+
+  let _pollInterval: ReturnType<typeof setInterval> | null = null
+
+  async function _pollJob() {
+    if (!progressJobId.value) return
+    try {
+      const job = await jobService.getJob(progressJobId.value)
+      progressTotal.value = job.total
+      progressDone.value = job.done
+      progressPercent.value = job.percent
+      progressStatus.value = job.status
+      if (job.status !== 'running') _stopPolling()
+    }
+    catch {
+      _stopPolling()
+    }
+  }
+
+  function _stopPolling() {
+    if (_pollInterval) { clearInterval(_pollInterval); _pollInterval = null }
+  }
+
+  function startPolling(jobId: string, langName: string) {
+    progressJobId.value = jobId
+    progressLangName.value = langName
+    progressTotal.value = 0
+    progressDone.value = 0
+    progressPercent.value = 0
+    progressStatus.value = 'running'
+    showProgress.value = true
+    _stopPolling()
+    _pollInterval = setInterval(_pollJob, 800)
+  }
+
+  function closeProgress() {
+    showProgress.value = false
+    _stopPolling()
+    progressJobId.value = null
+  }
+
+  function sendToBackground(onDone?: () => void) {
+    showProgress.value = false
+    const langName = progressLangName.value
+
+    const toastRef = toast.add({
+      title: `Traduction ${langName} en cours…`,
+      description: `${progressPercent.value}% — ${progressDone.value} / ${progressTotal.value} clés`,
+      duration: 0,
+      color: 'info',
+    })
+
+    const bgInterval = setInterval(async () => {
+      if (!progressJobId.value) { clearInterval(bgInterval); return }
+      try {
+        const job = await jobService.getJob(progressJobId.value)
+        progressTotal.value = job.total
+        progressDone.value = job.done
+        progressPercent.value = job.percent
+        progressStatus.value = job.status
+
+        if (job.status !== 'running') {
+          clearInterval(bgInterval)
+          _stopPolling()
+          toast.remove(toastRef?.id ?? '')
+          toast.add({
+            title: job.errors ? `Traduction ${langName} terminée avec erreurs` : `Traduction ${langName} terminée`,
+            description: `${job.done} clés traduites${job.errors ? ` · ${job.errors} erreurs` : ''}`,
+            color: job.errors ? 'warning' : 'success',
+          })
+          onDone?.()
+        }
+      }
+      catch { clearInterval(bgInterval) }
+    }, 800)
+  }
+
+  onUnmounted(_stopPolling)
+
+  return {
+    // Static lookup
+    languages: LANGUAGES,
+    filteredLanguages,
+    searchQuery,
+    findLanguage,
+    getLanguageName,
+    // Project languages
+    projectLanguages,
+    pending,
+    refresh,
+    adding,
+    addLanguage,
+    deleting,
+    deleteLanguage,
+    setDefault,
+    setFallback,
+    startTranslateAll,
+    // Translation job
+    showProgress,
+    progressLangName,
+    progressTotal,
+    progressDone,
+    progressPercent,
+    progressStatus,
+    startPolling,
+    closeProgress,
+    sendToBackground,
+  }
+}

package/composables/useProfile.ts

@@ -0,0 +1,76 @@
+import { profileService } from '../services/profile.service'
+import { authService } from '../services/auth.service'
+import { userService } from '../services/user.service'
+
+export function useProfile(userId?: MaybeRefOrGetter<number | string>) {
+  const toast = useToast()
+  const { fetchMe } = useAuth()
+
+  // ── Profile data ─────────────────────────────────────────────────────────
+  // Load the target user's profile (or own profile if no userId provided)
+
+  const targetId = computed(() => userId ? toValue(userId) : null)
+
+  const { data: profile, pending, refresh } = useAsyncData(
+    () => targetId.value ? `user-profile-${targetId.value}` : 'user-profile',
+    () => targetId.value
+      ? profileService.getUserProfile(targetId.value)
+      : profileService.getProfile(),
+    { watch: [targetId] },
+  )
+
+  // ── Own account editing (current logged-in user) ─────────────────────────
+
+  const editSaving = ref(false)
+  const editError = ref('')
+
+  async function updateProfile(name: string, email: string): Promise<boolean> {
+    editError.value = ''
+    editSaving.value = true
+    try {
+      await authService.updateMe({ name, email })
+      await Promise.all([refresh(), fetchMe()])
+      toast.add({ title: 'Compte mis à jour', color: 'success' })
+      return true
+    }
+    catch (e: any) {
+      editError.value = e.message
+      return false
+    }
+    finally {
+      editSaving.value = false
+    }
+  }
+
+  // ── Role management (admin managing another user's access) ───────────────
+
+  const rolesSaving = ref(false)
+
+  async function saveRoles(roles: Array<{ project_id: number | null; role: string | null }>): Promise<boolean> {
+    if (!targetId.value) return false
+    rolesSaving.value = true
+    try {
+      await userService.updateRoles(Number(targetId.value), roles)
+      toast.add({ title: 'Accès mis à jour', color: 'success' })
+      await refresh()
+      return true
+    }
+    catch {
+      return false
+    }
+    finally {
+      rolesSaving.value = false
+    }
+  }
+
+  return {
+    profile,
+    pending,
+    refresh,
+    editSaving,
+    editError,
+    updateProfile,
+    rolesSaving,
+    saveRoles,
+  }
+}

package/composables/useProject.ts

@@ -0,0 +1,180 @@
+import { projectService } from '~/services/project.service'
+import { scanService } from '~/services/scan.service'
+import type { ProjectPayload } from '~/interfaces/project.interface'
+
+export interface Project {
+  id: number
+  name: string
+  root_path: string
+  source_url?: string
+  locales_path: string
+  key_separator: string
+  color: string
+  description?: string
+  key_count?: number
+  language_count?: number
+  is_system?: boolean
+}
+
+export function canScanProject(project: Project): boolean {
+  return !!project.root_path && project.root_path !== '__DASHBOARD_UI__'
+}
+
+export function canSyncProject(project: Project): boolean {
+  return (!!project.root_path && project.root_path !== '__DASHBOARD_UI__') || !!project.source_url
+}
+
+/**
+ * Shared reactive project list — NOT route-dependent.
+ * Composables (useStats, useProjectLanguages, etc.) that need the project list
+ * should call useProject(); only pages that need the current project from URL
+ * should read `currentProject`.
+ */
+export function useProject() {
+  const { currentUser } = useAuth()
+
+  const { data: projectsData, pending, refresh: fetchProjects } = useAsyncData<Project[]>(
+    'all-projects',
+    () => projectService.getAll(),
+    { default: () => [] },
+  )
+
+  const projects = computed(() => (projectsData.value ?? []) as Project[])
+
+  // Not route-dependent — safe to watch from anywhere (including layout onMount)
+  const systemProject = computed(() => projects.value.find(p => p.is_system) ?? null)
+
+  // Route-dependent: only returns a value when inside a /projects/[id]/* page
+  const route = useRoute()
+  const currentProject = computed((): Project | null => {
+    const paramId = route.params.id
+    if (!paramId) return null
+    const id = Number(Array.isArray(paramId) ? paramId[0] : paramId)
+    return projects.value.find(p => p.id === id) ?? null
+  })
+
+  const visibleProjects = computed(() => {
+    if (currentUser.value?.is_super_admin) return projects.value
+    const userProjectIds = new Set(
+      (currentUser.value?.roles ?? [])
+        .filter((r: any) => r.project_id !== null)
+        .map((r: any) => r.project_id),
+    )
+    return projects.value.filter((p: any) => userProjectIds.has(p.id))
+  })
+
+  // ── Mutations ───────────────────────────────────────────────────────────────
+
+  const toast = useToast()
+  const router = useRouter()
+
+  const saving = ref(false)
+  async function createProject(payload: ProjectPayload): Promise<any> {
+    saving.value = true
+    try {
+      const project = await projectService.create(payload)
+      toast.add({ title: 'Projet ajouté', color: 'success' })
+      await fetchProjects()
+      return project
+    }
+    catch {
+      return null
+    }
+    finally {
+      saving.value = false
+    }
+  }
+
+  async function updateProject(id: number, payload: Partial<ProjectPayload>): Promise<boolean> {
+    saving.value = true
+    try {
+      await projectService.update(id, payload)
+      toast.add({ title: 'Projet modifié', color: 'success' })
+      await fetchProjects()
+      return true
+    }
+    catch {
+      return false
+    }
+    finally {
+      saving.value = false
+    }
+  }
+
+  const deleting = ref(false)
+  async function deleteProject(id: number): Promise<boolean> {
+    deleting.value = true
+    try {
+      await projectService.remove(id)
+      toast.add({ title: 'Projet supprimé', color: 'success' })
+      await fetchProjects()
+      router.push('/projects')
+      return true
+    }
+    catch {
+      return false
+    }
+    finally {
+      deleting.value = false
+    }
+  }
+
+  // ── Scan / Sync ─────────────────────────────────────────────────────────────
+
+  const scanning = ref<number | null>(null)
+  async function scanProject(project: { id: number; name: string }): Promise<void> {
+    scanning.value = project.id
+    try {
+      const result = await scanService.scan(project.id)
+      const langMsg = result.langsAdded > 0 ? ` · ${result.langsAdded} langue(s) ajoutée(s)` : ''
+      toast.add({
+        title: `Scan — ${project.name}`,
+        description: `${result.keysFound} clés dans ${result.scannedFiles} fichiers · ${result.keysAdded} nouvelles${langMsg}`,
+        color: 'success',
+      })
+      await fetchProjects()
+      refreshNuxtData('project-stats')
+    }
+    catch {}
+    finally {
+      scanning.value = null
+    }
+  }
+
+  const syncing = ref<number | null>(null)
+  async function syncProject(project: { id: number; name: string }): Promise<void> {
+    syncing.value = project.id
+    try {
+      const result = await scanService.sync(project.id)
+      toast.add({
+        title: `Sync — ${project.name}`,
+        description: `${result.added} ajoutées · ${result.updated} mises à jour · ${result.total} total`,
+        color: 'success',
+      })
+      await fetchProjects()
+      refreshNuxtData('project-stats')
+    }
+    catch {}
+    finally {
+      syncing.value = null
+    }
+  }
+
+  return {
+    currentProject,
+    projects,
+    visibleProjects,
+    systemProject,
+    fetchProjects,
+    pending,
+    saving,
+    createProject,
+    updateProject,
+    deleting,
+    deleteProject,
+    scanning,
+    scanProject,
+    syncing,
+    syncProject,
+  }
+}