popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tweak translation UI

Browse Source
This commit is contained in:
Dobromir Popov
2024-04-29 01:47:35 +03:00
parent 56283ecd50
commit 96360a9e91
2 changed files with 44 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
content/i18n/ru.json
View File

@ -1,10 +1,10 @@
{ {
"common": { "common": {
"greeting": "Здравей", "greeting": "Здравей",
"farewell": "Довиждане", "farewell": "Довиждане",
"changeTo": "Смени на", "changeTo": "Смени на",
"BG": "[RU] Български", "BG": "[RU] Български",
"EN": "[RU] Английски", "EN": "[RU] Английски",
"RU": "[RU] Руски" "RU": "[RU] Руски"
} }
} }

55
pages/cart/translations/index.tsx
View File

@ -4,6 +4,7 @@ import ProtectedRoute from "../../../components/protectedRoute";
import { UserRole } from "@prisma/client"; import { UserRole } from "@prisma/client";
import Layout from 'components/layout'; import Layout from 'components/layout';
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { ToastContainer, toast } from 'react-toastify';
const locales = ['bg', 'en', 'ru']; const locales = ['bg', 'en', 'ru'];
@ -21,12 +22,15 @@ const AdminTranslations = () => {
}, [locale]); }, [locale]);
const handleSave = () => { const handleSave = () => {
axiosInstance.post(`/api/translations/${locale}/modified`, translations) axiosInstance.post(`/api/translations/${locale}`, translations)
.then(res => { .then(res => {
if (res.data.status === 'Updated') { if (res.data.status === 'Updated') {
alert('Translations updated!'); toast.success('Translations updated!');
} else {
toast.error('Something went wrong!');
} }
}); })
.catch(err => toast.error('Failed to update translations: ' + err.message));
}; };
const handleChange = (key, value) => { const handleChange = (key, value) => {
@ -37,19 +41,30 @@ const AdminTranslations = () => {
<Layout> <Layout>
<ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER]}> <ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER]}>
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-xl font-semibold leading-tight text-gray-800">Edit Translations</h1> <div className="sticky top-0 z-10 bg-white shadow-md py-4 px-4">
<div className="my-4"> <div className="flex justify-between items-center">
<label htmlFor="locale-select" className="block text-sm font-medium text-gray-700">Select Language</label> <h1 className="text-xl font-semibold leading-tight text-gray-800">Edit Translations</h1>
<select <div className="flex items-center space-x-4">
id="locale-select" <button
onChange={e => setLocale(e.target.value)} onClick={handleSave}
value={locale} className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" >
> Save Changes
{locales.map(l => ( </button>
<option key={l} value={l}>{l.toUpperCase()}</option> <div>
))} <select
</select> id="locale-select"
onChange={e => setLocale(e.target.value)}
value={locale}
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
>
{locales.map(l => (
<option key={l} value={l}>{l.toUpperCase()}</option>
))}
</select>
</div>
</div>
</div>
</div> </div>
<div className="overflow-x-auto relative shadow-md sm:rounded-lg"> <div className="overflow-x-auto relative shadow-md sm:rounded-lg">
<table className="w-full text-sm text-left text-gray-500"> <table className="w-full text-sm text-left text-gray-500">
@ -71,20 +86,22 @@ const AdminTranslations = () => {
value={translations[key] || ''} value={translations[key] || ''}
placeholder='Въведи превод...' placeholder='Въведи превод...'
onChange={e => handleChange(key, e.target.value)} onChange={e => handleChange(key, e.target.value)}
className="block w-full text-base px-2 py-1 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 rounded" className="block w-full text-base px-2 py-1 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 rounded placeholder-gray-400"
style={{ transition: 'box-shadow .3s', boxShadow: translations[key] ? '0 0 0px 1px rgba(59, 130, 246, 0.5)' : 'none' }}
/> />
</td> </td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
</div> </div>
<button {/* <button
onClick={handleSave} onClick={handleSave}
className="mt-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" className="mt-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
> >
Save Changes Save Changes
</button> </button> */}
</div> </div>
</ProtectedRoute> </ProtectedRoute>
</Layout> </Layout>