import { SyncOutlined } from '@ant-design/icons'; import { Form, createForm } from '@formily/core'; import { Field, useField, useForm } from '@formily/react'; import { FormProvider, Input, PopoverWithStopPropagation, Radio, SchemaComponent, locale, useAPIClient, useActionContext, useRecord, useResourceActionContext, useResourceContext, } from '@nocobase/client'; import { Input as AntdInput, Button, Card, Checkbox, Col, Divider, Row, Tag, Typography, message } from 'antd'; import React, { useMemo, useState } from 'react'; import { useLocalTranslation } from './locale'; import { localizationSchema } from './schemas/localization'; const { Text } = Typography; const useUpdateTranslationAction = () => { const field = useField(); const form = useForm(); const ctx = useActionContext(); const { refresh } = useResourceActionContext(); const { targetKey } = useResourceContext(); const { [targetKey]: textId } = useRecord(); const api = useAPIClient(); const locale = api.auth.getLocale(); return { async run() { await form.submit(); field.data = field.data || {}; field.data.loading = true; try { await api.resource('localizationTranslations').updateOrCreate({ filterKeys: ['textId', 'locale'], values: { textId, locale, translation: form.values.translation, }, }); ctx.setVisible(false); await form.reset(); refresh(); } catch (e) { console.log(e); } finally { field.data.loading = false; } }, }; }; const useDestroyTranslationAction = () => { const { refresh } = useResourceActionContext(); const api = useAPIClient(); const { translationId: filterByTk } = useRecord(); return { async run() { await api.resource('localizationTranslations').destroy({ filterByTk }); refresh(); }, }; }; const useBulkDestroyTranslationAction = () => { const { state, setState, refresh } = useResourceActionContext(); const api = useAPIClient(); const { t } = useLocalTranslation(); return { async run() { if (!state?.selectedRowKeys?.length) { return message.error(t('Please select the records you want to delete')); } await api.resource('localizationTranslations').destroy({ filterByTk: state?.selectedRowKeys }); setState?.({ selectedRowKeys: [] }); refresh(); }, }; }; const usePublishAction = () => { const api = useAPIClient(); return { async run() { await api.resource('localization').publish(); window.location.reload(); }, }; }; const Sync = () => { const { t } = useLocalTranslation(); const { refresh } = useResourceActionContext(); const api = useAPIClient(); const [loading, setLoading] = useState(false); const plainOptions = ['local', 'menu', 'db']; const [checkedList, setCheckedList] = useState(plainOptions); const [indeterminate, setIndeterminate] = useState(false); const [checkAll, setCheckAll] = useState(true); const onChange = (list: any[]) => { setCheckedList(list); setIndeterminate(!!list.length && list.length < plainOptions.length); setCheckAll(list.length === plainOptions.length); }; const onCheckAllChange = (e) => { setCheckedList(e.target.checked ? plainOptions : []); setIndeterminate(false); setCheckAll(e.target.checked); }; return ( {t('All')} {t('System & Plugins')} {t('Collections & Fields')} {t('Menu')} } > ); }; const Filter = () => { const { t } = useLocalTranslation(); const { run, refresh } = useResourceActionContext(); const api = useAPIClient(); const locale = api.auth.getLocale(); const form = useMemo
( () => createForm({ initialValues: { hasTranslation: true, }, }), [], ); const filter = (values?: any) => { run({ ...(values || form.values), }); }; return (
filter({ ...form.values, keyword }), }, ]} /> filter(), }, ]} />
); }; export const Localization = () => { const { t } = useLocalTranslation(); const api = useAPIClient(); const curLocale = api.auth.getLocale(); const localeLabel = locale[curLocale]?.label || curLocale; const CurrentLang = () => ( {t('Current language')} {localeLabel} ); const TranslationField = (props) => (props.value !== undefined ? :
); return ( ); };