feat(i18n): add bilingual support (Català / Castellano)
Run Tests on Branches / Detect Changes (push) Successful in 11s
Run Tests on Branches / Backend Tests (push) Has been skipped
Run Tests on Branches / Frontend Tests (push) Successful in 1m44s
Run Tests on Branches / Frontend Mobile Tests (push) Has been skipped
Run Tests on Branches / Parapharmacy API Tests (push) Has been skipped
Run Tests on Branches / Detect Changes (push) Successful in 11s
Run Tests on Branches / Backend Tests (push) Has been skipped
Run Tests on Branches / Frontend Tests (push) Successful in 1m44s
Run Tests on Branches / Frontend Mobile Tests (push) Has been skipped
Run Tests on Branches / Parapharmacy API Tests (push) Has been skipped
Add lightweight i18n system using React Context + useTranslation hook.
No external dependencies. Language persisted in localStorage('ff-lang').
New files:
- src/i18n/locales/ca.js (~410 translation keys)
- src/i18n/locales/es.js (~410 translation keys)
- src/i18n/LanguageContext.jsx (Provider + t() function)
- src/i18n/useTranslation.js (hook)
- src/i18n/index.js (barrel export)
Modified 22 files:
- main.jsx: wrap App with LanguageProvider
- App.test.jsx: add LanguageProvider wrapper for tests
- 13 user components: BottomNav, HomeView, LoginModal, SearchView,
ProfileView, AlertsView, ScannerView, PharmacyList, MedicineResults,
ProductResults, SavedNotifications, ErrorBoundary, SearchBar
- 6 admin components: AdminView, LoginForm, PharmacyManagement,
MedicineManagement, PharmacyMedicineLink, PharmacyProductLink
ProfileView includes language selector (globe icon + modal CA/ES)
placed next to the Theme selector.
No routes changed. No API calls affected. No navigation changes.
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import React, { useState, useEffect, useMemo, useRef } from 'react';
|
||||
import { useTranslation } from '../../i18n';
|
||||
import './AdminComponents.css';
|
||||
|
||||
const MAX_PHARMACY_RESULTS = 25;
|
||||
@@ -8,6 +9,7 @@ function normalize(s) {
|
||||
}
|
||||
|
||||
function PharmacyMedicineLink() {
|
||||
const { t } = useTranslation();
|
||||
const [pharmacies, setPharmacies] = useState([]);
|
||||
const [medicineSearch, setMedicineSearch] = useState('');
|
||||
const [medicineResults, setMedicineResults] = useState([]);
|
||||
@@ -111,7 +113,7 @@ function PharmacyMedicineLink() {
|
||||
e.preventDefault();
|
||||
|
||||
if (!selectedMedicine) {
|
||||
alert('Por favor, selecciona un medicamento primero');
|
||||
alert(t('admin.linkMedicine.selectMedicineFirst'));
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -131,16 +133,16 @@ function PharmacyMedicineLink() {
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Error al vincular medicamento a farmacia');
|
||||
if (!response.ok) throw new Error(t('admin.linkMedicine.linkError'));
|
||||
|
||||
resetForm();
|
||||
if (selectedPharmacy) {
|
||||
fetchPharmacyMedicines(selectedPharmacy.id);
|
||||
}
|
||||
alert('¡Medicamento vinculado a la farmacia correctamente!');
|
||||
alert(t('admin.linkMedicine.linkSuccess'));
|
||||
} catch (error) {
|
||||
console.error('Error linking medicine:', error);
|
||||
alert('Error al vincular medicamento a farmacia');
|
||||
alert(t('admin.linkMedicine.linkError'));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -153,18 +155,18 @@ function PharmacyMedicineLink() {
|
||||
body: JSON.stringify({ price, stock })
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Error al actualizar');
|
||||
if (!response.ok) throw new Error(t('admin.linkMedicine.updateError'));
|
||||
|
||||
fetchPharmacyMedicines(selectedPharmacy.id);
|
||||
alert('¡Actualizado correctamente!');
|
||||
alert(t('admin.linkMedicine.updateSuccess'));
|
||||
} catch (error) {
|
||||
console.error('Error updating:', error);
|
||||
alert('Error al actualizar');
|
||||
alert(t('admin.linkMedicine.updateError'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
if (!confirm('¿Eliminar este medicamento de la farmacia?')) return;
|
||||
if (!confirm(t('admin.linkMedicine.deleteConfirm'))) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/admin/pharmacy-medicines/${id}`, {
|
||||
@@ -172,13 +174,13 @@ function PharmacyMedicineLink() {
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Error al eliminar');
|
||||
if (!response.ok) throw new Error(t('admin.linkMedicine.deleteError'));
|
||||
|
||||
fetchPharmacyMedicines(selectedPharmacy.id);
|
||||
alert('¡Medicamento eliminado de la farmacia!');
|
||||
alert(t('admin.linkMedicine.deleteSuccess'));
|
||||
} catch (error) {
|
||||
console.error('Error deleting:', error);
|
||||
alert('Error al eliminar medicamento');
|
||||
alert(t('admin.linkMedicine.deleteError'));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -216,11 +218,11 @@ function PharmacyMedicineLink() {
|
||||
|
||||
return (
|
||||
<div className="admin-section">
|
||||
<h2>Vincular Medicamento a Farmacia</h2>
|
||||
<h2>{t('admin.linkMedicine.title')}</h2>
|
||||
|
||||
<form className="admin-form" onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label>Farmacia *</label>
|
||||
<label>{t('admin.linkMedicine.pharmacy')}</label>
|
||||
<input
|
||||
ref={pharmacyInputRef}
|
||||
type="text"
|
||||
@@ -235,7 +237,7 @@ function PharmacyMedicineLink() {
|
||||
}}
|
||||
onFocus={() => setPharmacyDropdownOpen(true)}
|
||||
onBlur={() => setTimeout(() => setPharmacyDropdownOpen(false), 150)}
|
||||
placeholder={pharmacies.length ? `Buscar entre ${pharmacies.length} farmacias por nombre o dirección…` : 'Cargando farmacias…'}
|
||||
placeholder={pharmacies.length ? `${t('admin.linkMedicine.searchPharmacy')} ${pharmacies.length} ${t('admin.linkMedicine.pharmacies')}` : t('admin.linkMedicine.loadingPharmacies')}
|
||||
autoComplete="off"
|
||||
required={!selectedPharmacy}
|
||||
/>
|
||||
@@ -243,7 +245,7 @@ function PharmacyMedicineLink() {
|
||||
<div className="medicine-search-results">
|
||||
{filteredPharmacies.length === 0 ? (
|
||||
<div className="search-result-item search-result-item--empty">
|
||||
<span>No hay farmacias que coincidan con "{pharmacyQuery}"</span>
|
||||
<span>{t('admin.linkMedicine.noPharmacies')} "{pharmacyQuery}"</span>
|
||||
</div>
|
||||
) : (
|
||||
filteredPharmacies.map((pharmacy) => (
|
||||
@@ -264,14 +266,14 @@ function PharmacyMedicineLink() {
|
||||
<p>✅ Selected: <strong>{selectedPharmacy.name}</strong></p>
|
||||
<p className="medicine-details">{selectedPharmacy.address}</p>
|
||||
<button type="button" className="btn-small" onClick={clearPharmacy}>
|
||||
Cambiar farmacia
|
||||
{t('admin.linkMedicine.changePharmacy')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Buscar Medicamento (API CIMA) *</label>
|
||||
<label>{t('admin.linkMedicine.medicine')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={medicineSearch}
|
||||
@@ -279,10 +281,10 @@ function PharmacyMedicineLink() {
|
||||
setMedicineSearch(e.target.value);
|
||||
setSelectedMedicine(null);
|
||||
}}
|
||||
placeholder="Escribe para buscar medicamentos en CIMA..."
|
||||
placeholder={t('admin.linkMedicine.searchMedicine')}
|
||||
required
|
||||
/>
|
||||
{searching && <p className="loading-text">Buscando...</p>}
|
||||
{searching && <p className="loading-text">{t('admin.linkMedicine.searching')}</p>}
|
||||
|
||||
{medicineResults.length > 0 && !selectedMedicine && (
|
||||
<div className="medicine-search-results">
|
||||
@@ -304,9 +306,9 @@ function PharmacyMedicineLink() {
|
||||
<div className="selected-medicine-info">
|
||||
<p>✅ Selected: <strong>{selectedMedicine.name}</strong></p>
|
||||
<p className="medicine-details">
|
||||
{selectedMedicine.active_ingredient && `Principio activo: ${selectedMedicine.active_ingredient} • `}
|
||||
{selectedMedicine.dosage && `Dosis: ${selectedMedicine.dosage} • `}
|
||||
Nº Registro: {selectedMedicine.nregistro}
|
||||
{selectedMedicine.active_ingredient && `${t('admin.linkMedicine.activeIngredient')} ${selectedMedicine.active_ingredient} • `}
|
||||
{selectedMedicine.dosage && `${t('admin.linkMedicine.dosage')} ${selectedMedicine.dosage} • `}
|
||||
{t('admin.linkMedicine.registrationNumber')} {selectedMedicine.nregistro}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
@@ -316,7 +318,7 @@ function PharmacyMedicineLink() {
|
||||
setMedicineSearch('');
|
||||
}}
|
||||
>
|
||||
Cambiar medicamento
|
||||
{t('admin.linkMedicine.changeMedicine')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
@@ -324,7 +326,7 @@ function PharmacyMedicineLink() {
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label>Precio (€)</label>
|
||||
<label>{t('admin.linkMedicine.price')}</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
@@ -335,7 +337,7 @@ function PharmacyMedicineLink() {
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Stock</label>
|
||||
<label>{t('admin.linkMedicine.stock')}</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.stock}
|
||||
@@ -347,21 +349,21 @@ function PharmacyMedicineLink() {
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn-primary">
|
||||
Vincular Medicamento
|
||||
{t('admin.linkMedicine.linkBtn')}
|
||||
</button>
|
||||
<button type="button" className="btn-secondary" onClick={resetForm}>
|
||||
Reiniciar
|
||||
{t('admin.linkMedicine.reset')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{selectedPharmacy && (
|
||||
<div className="pharmacy-medicines-section">
|
||||
<h3>Medicamentos en {selectedPharmacy.name}</h3>
|
||||
<h3>{t('admin.linkMedicine.medicationsIn')} {selectedPharmacy.name}</h3>
|
||||
{loading ? (
|
||||
<div className="loading">Cargando...</div>
|
||||
<div className="loading">{t('admin.linkMedicine.loading')}</div>
|
||||
) : pharmacyMedicines.length === 0 ? (
|
||||
<p className="empty-state">Aún no hay medicamentos vinculados a esta farmacia.</p>
|
||||
<p className="empty-state">{t('admin.linkMedicine.empty')}</p>
|
||||
) : (
|
||||
<div className="admin-list">
|
||||
{pharmacyMedicines.map((pm) => (
|
||||
@@ -369,7 +371,7 @@ function PharmacyMedicineLink() {
|
||||
<div className="item-content">
|
||||
<h4>{pm.medicine_name}</h4>
|
||||
<p>
|
||||
<strong>Precio:</strong> {pm.price ? `€${parseFloat(pm.price).toFixed(2)}` : 'No definido'} •
|
||||
<strong>{t('admin.linkMedicine.priceLabel')}</strong> {pm.price ? `€${parseFloat(pm.price).toFixed(2)}` : t('admin.linkMedicine.undefined')} •
|
||||
<strong> Stock:</strong> {pm.stock || 0}
|
||||
</p>
|
||||
</div>
|
||||
@@ -377,17 +379,17 @@ function PharmacyMedicineLink() {
|
||||
<button
|
||||
className="btn-edit"
|
||||
onClick={() => {
|
||||
const newPrice = prompt('Introduce nuevo precio:', pm.price || '');
|
||||
const newStock = prompt('Introduce nuevo stock:', pm.stock || '0');
|
||||
const newPrice = prompt(t('admin.linkMedicine.newPrice'), pm.price || '');
|
||||
const newStock = prompt(t('admin.linkMedicine.newStock'), pm.stock || '0');
|
||||
if (newPrice !== null && newStock !== null) {
|
||||
handleUpdate(pm.id, newPrice ? parseFloat(newPrice) : null, parseInt(newStock) || 0);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Actualizar
|
||||
{t('admin.linkMedicine.update')}
|
||||
</button>
|
||||
<button className="btn-delete" onClick={() => handleDelete(pm.id)}>
|
||||
Eliminar
|
||||
{t('admin.linkMedicine.delete')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user