driver-vault/DriverVault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a language-switch system with per-language files

Browse Source 
Introduce a hand-rolled i18n layer across all three UIs, each reading its
text from per-language JSON files (English base + Polish + Danish). Nothing
in the converted screens hardcodes English any more.

- Web App (Vue): src/i18n/{en,pl,da}.json + index.js exposing t()/tSplit(),
  reactive to the signed-in profile locale. Every view, component, form and
  the status labels in lib/format.js go through t().
- API Server panel (Vue): src/i18n/ with its own localStorage-persisted
  language (the panel has no user profile) and a header language picker.
  Chrome, cards, login and API section titles translated; endpoint reference
  descriptions intentionally kept in English. Rebuilt embedded dist.
- Phone App (Flutter): assets/i18n/ + lib/i18n.dart loaded at startup,
  driven by AppSettings.locale. Nav, login, lock, dashboard, the full
  Settings panel (incl. language picker) and format.dart status labels
  translated; remaining detail screens fall back to English.

Language = the language half of the existing BCP-47 locale; the region half
still drives date/number/currency formatting. Missing keys fall back to
English, and plurals use Intl.PluralRules / Intl.plural so Polish gets the
correct one/few/many forms. Settings flags languages without a translation.

Tests updated to assert the localized (Polish) status wording; all pass.
See TRANSLATIONS.md for the format and how to add a language.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
tajniak81
2026-07-17 20:07:48 +02:00
co-authored by Claude Opus 4.8
parent ee28b522c7
commit b6bb6b1df0
54 changed files with 4191 additions and 979 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web App/web/src/components/DocumentFormModal.vue
+17 -26
View File
@@ -2,6 +2,7 @@
import { ref } from "vue";
import { api } from "../api";
import { applyAttachment } from "../lib/attachment.js";
import { t } from "../i18n";
import AttachmentField from "./AttachmentField.vue";
import Modal from "./Modal.vue";
@@ -15,15 +16,7 @@ const isEdit = !!props.doc;
const saving = ref(false);
const error = ref("");
const TYPES = [
{ value: "insurance", label: "Insurance" },
{ value: "pollution", label: "Pollution certificate" },
{ value: "registration", label: "Registration" },
{ value: "inspection", label: "Inspection" },
{ value: "roadTax", label: "Road tax" },
{ value: "warranty", label: "Warranty" },
{ value: "other", label: "Other" },
];
const TYPE_VALUES = ["insurance", "pollution", "registration", "inspection", "roadTax", "warranty", "other"];
const form = ref({
type: props.doc?.type ?? "insurance",
@@ -78,62 +71,60 @@ function payload() {
</script>
<template>
<Modal :title="isEdit ? 'Edit document' : 'Add document'" @close="emit('close')">
<Modal :title="isEdit ? t('forms.document.editTitle') : t('forms.document.addTitle')" @close="emit('close')">
<p v-if="error" class="mb-3 rounded-control bg-danger-soft px-3 py-2 text-sm font-medium text-danger">{{ error }}</p>
<form class="space-y-3" @submit.prevent="submit">
<div>
<label class="dh-label">Type</label>
<label class="dh-label">{{ t("forms.document.type") }}</label>
<select v-model="form.type" class="dh-input">
<option v-for="t in TYPES" :key="t.value" :value="t.value">{{ t.label }}</option>
<option v-for="v in TYPE_VALUES" :key="v" :value="v">{{ t(`enums.documentType.${v}`) }}</option>
</select>
</div>
<div>
<label class="dh-label">Title *</label>
<input v-model="form.title" required placeholder="Third-party liability 2026" class="dh-input" />
<label class="dh-label">{{ t("forms.document.title") }}</label>
<input v-model="form.title" required :placeholder="t('forms.document.titlePlaceholder')" class="dh-input" />
</div>
<div class="grid grid-cols-2 gap-2">
<div>
<label class="dh-label">Provider</label>
<label class="dh-label">{{ t("forms.document.provider") }}</label>
<input v-model="form.provider" placeholder="PZU" class="dh-input" />
</div>
<div>
<label class="dh-label">Policy / certificate no.</label>
<label class="dh-label">{{ t("forms.document.reference") }}</label>
<input v-model="form.reference" class="dh-input data" />
</div>
</div>
<div class="grid grid-cols-2 gap-2">
<div>
<label class="dh-label">Issued</label>
<label class="dh-label">{{ t("forms.document.issued") }}</label>
<input v-model="form.issueDate" type="date" class="dh-input data" />
</div>
<div>
<label class="dh-label">Renewal date</label>
<label class="dh-label">{{ t("forms.document.renewalDate") }}</label>
<input v-model="form.expiryDate" type="date" class="dh-input data" />
</div>
</div>
<p class="text-xs text-muted">
Leave the renewal date blank for a document that never expires. Setting it adds a reminder automatically.
</p>
<p class="text-xs text-muted">{{ t("forms.document.renewalHint") }}</p>
<div>
<label class="dh-label">Cost</label>
<label class="dh-label">{{ t("forms.document.cost") }}</label>
<input v-model="form.cost" type="number" step="0.01" min="0" class="dh-input data" />
</div>
<AttachmentField v-model:file="file" v-model:remove="removeFile" :record="doc" legend="Scan or photo" />
<AttachmentField v-model:file="file" v-model:remove="removeFile" :record="doc" :legend="t('forms.document.attachmentLegend')" />
<div>
<label class="dh-label">Notes</label>
<label class="dh-label">{{ t("forms.document.notes") }}</label>
<input v-model="form.notes" class="dh-input" />
</div>
<div class="mt-4 flex justify-end gap-2">
<button type="button" class="dh-btn dh-btn-ghost" @click="emit('close')">Cancel</button>
<button type="button" class="dh-btn dh-btn-ghost" @click="emit('close')">{{ t("common.cancel") }}</button>
<button type="submit" :disabled="saving" class="dh-btn dh-btn-primary">
{{ saving ? "Saving…" : isEdit ? "Save changes" : "Add document" }}
{{ saving ? t("common.saving") : isEdit ? t("common.saveChanges") : t("forms.document.submit") }}
</button>
</div>
</form>