V2 translate

app/api/i18n/routes.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { createError, validation } from 'api/utils';
 import settings from 'api/settings';
 import entities from 'api/entities';
@@ -11,6 +12,7 @@ import { Application, Request } from 'express';
 import { UITranslationNotAvailable } from 'api/i18n/defaultTranslations';
 import needsAuthorization from '../auth/authMiddleware';
 import translations from './translations';
+import { getTranslationsEntriesV2, upsertTranslationEntries } from './v2_support';
 
 const addLanguage = async (language: LanguageSchema) => {
   const newSettings = await settings.addLanguage(language);
@@ -59,6 +61,7 @@ async function deleteLanguage(key: LanguageISO6391, req: Request) {
 
 type TranslationsRequest = Request & { query: { context: string } };
 
+// eslint-disable-next-line max-statements
 export default (app: Application) => {
   app.get(
     '/api/translations',
@@ -81,6 +84,14 @@ export default (app: Application) => {
     }
   );
 
+  app.get('/api/translationsV2', async (_req: TranslationsRequest, res) => {
+    const translationsV2 = await getTranslationsEntriesV2();
+
+    const translationList = await translationsV2.all();
+
+    res.json(translationList);
+  });
+
   app.get('/api/languages', async (_req, res) => {
     res.json(await translations.availableLanguages());
   });
@@ -158,6 +169,45 @@ export default (app: Application) => {
     }
   );
 
+  app.post(
+    '/api/translationsV2',
+    needsAuthorization(),
+    validation.validateRequest({
+      type: 'object',
+      properties: {
+        body: {
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: {
+              _id: { type: 'string' },
+              language: { type: 'string' },
+              key: { type: 'string' },
+              value: { type: 'string' },
+              context: {
+                type: 'object',
+                properties: {
+                  id: { type: 'string' },
+                  label: { type: 'string' },
+                  type: { type: 'string' },
+                },
+                required: ['id', 'label', 'type'],
+              },
+            },
+            required: ['language', 'key', 'value', 'context'],
+          },
+        },
+      },
+      required: ['body'],
+    }),
+    async (req, res) => {
+      await upsertTranslationEntries(req.body);
+      req.sockets.emitToCurrentTenant('translationKeysChange', req.body);
+      res.status(200);
+      res.json({ success: true });
+    }
+  );
+
   app.post(
     '/api/translations/populate',
     needsAuthorization(),

app/api/i18n/specs/routes.spec.ts

@@ -12,6 +12,7 @@ import { TestEmitSources, iosocket, setUpApp } from 'api/utils/testingRoutes';
 import { availableLanguages } from 'shared/languagesList';
 import { LanguageSchema } from 'shared/types/commonTypes';
 import { UserRole } from 'shared/types/userSchema';
+import { TranslationContext, TranslationType } from 'shared/translationType';
 import { DefaultTranslations } from '../defaultTranslations';
 import { sortByLocale } from './sortByLocale';
 
@@ -229,6 +230,31 @@ describe('i18n translations routes', () => {
       });
     });
 
+    describe('api/translationsV2', () => {
+      it('should update the translations', async () => {
+        const response = await request(app)
+          .post('/api/translationsV2')
+          .send([
+            {
+              language: 'es',
+              key: 'Search',
+              value: 'Búsqueda',
+              context: {
+                id: 'System',
+                label: 'User Interface',
+                type: 'Uwazi UI',
+              },
+            },
+          ]);
+        const systemTranslations = response.body
+          .find((language: TranslationType) => language.locale === 'es')
+          .contexts.find((context: TranslationContext) => context.id === 'System');
+        expect(systemTranslations).toMatchObject({
+          values: { Search: 'Búsqueda' },
+        });
+      });
+    });
+
     describe('api/translations/languages', () => {
       describe('when successful', () => {
         let response: request.Response;

app/api/i18n/v2_support.ts

@@ -110,7 +110,7 @@ export const createTranslationsV2 = async (translation: TranslationType) => {
   ).create(flattenTranslations(translation));
 };
 
-export const upsertTranslationsV2 = async (translations: TranslationType[]) => {
+export const upsertTranslationEntries = async (translations: CreateTranslationsData[]) => {
   const transactionManager = DefaultTransactionManager();
   await new UpsertTranslationsService(
     DefaultTranslationsDataSource(transactionManager),
@@ -120,12 +120,15 @@ export const upsertTranslationsV2 = async (translations: TranslationType[]) => {
       DefaultSettingsDataSource(transactionManager)
     ),
     transactionManager
-  ).upsert(
-    translations.reduce<CreateTranslationsData[]>(
-      (flattened, t) => flattened.concat(flattenTranslations(t)),
-      []
-    )
+  ).upsert(translations);
+};
+
+export const upsertTranslationsV2 = async (translations: TranslationType[]) => {
+  const translationsToUpsert = translations.reduce<CreateTranslationsData[]>(
+    (flattened, t) => flattened.concat(flattenTranslations(t)),
+    []
   );
+  return upsertTranslationEntries(translationsToUpsert);
 };
 
 export const deleteTranslationsByContextIdV2 = async (contextId: string) => {
@@ -159,10 +162,11 @@ export const getTranslationsV2ByLanguage = async (language: LanguageISO6391) =>
     language
   );
 
+export const getTranslationsEntriesV2 = async () =>
+  new GetTranslationsService(DefaultTranslationsDataSource(DefaultTransactionManager())).getAll();
+
 export const getTranslationsV2 = async () =>
-  resultsToV1TranslationType(
-    new GetTranslationsService(DefaultTranslationsDataSource(DefaultTransactionManager())).getAll()
-  );
+  resultsToV1TranslationType(await getTranslationsEntriesV2());
 
 export const updateContextV2 = async (
   context: CreateTranslationsData['context'],

app/react/App/App.js

@@ -11,6 +11,8 @@ import { socket } from 'app/socket';
 import { NotificationsContainer } from 'V2/Components/UI';
 import { Matomo, CleanInsights } from 'app/V2/Components/Analitycs';
 import { settingsAtom } from 'V2/atoms/settingsAtom';
+import { TranslateModal } from 'app/I18N/components/TranslateModal';
+import { inlineEditAtom } from 'V2/atoms';
 import Confirm from './Confirm';
 import { Menu } from './Menu';
 import { AppMainContext } from './AppMainContext';
@@ -26,6 +28,7 @@ import 'flowbite';
 
 const App = ({ customParams }) => {
   const [showMenu, setShowMenu] = useState(false);
+  const [inlineEditState] = useAtom(inlineEditAtom);
   const [confirmOptions, setConfirmOptions] = useState({});
   const [settings, setSettings] = useAtom(settingsAtom);
 
@@ -101,6 +104,7 @@ const App = ({ customParams }) => {
         </main>
       </div>
       <NotificationsContainer />
+      {inlineEditState.inlineEdit && inlineEditState.context && <TranslateModal />}
     </div>
   );
 };

app/react/App/scss/layout/_header.scss

@@ -1,4 +1,4 @@
-@use "sass:color";
+@use 'sass:color';
 
 @import '../config/colors';
 @import '../elements/tooltip';
@@ -254,14 +254,6 @@ header {
         }
       }
 
-      .live-on {
-        color: #88eacd;
-      }
-
-      .live-off {
-        color: #ffe66b;
-      }
-
       button.singleItem {
         padding-left: 1em;
       }

app/react/App/sockets.js

@@ -1,7 +1,8 @@
 import { actions } from 'app/BasicReducer';
-import { t, Translate } from 'app/I18N';
+import { t } from 'app/I18N';
 import { notificationActions } from 'app/Notifications';
 import { documentProcessed } from 'app/Uploads/actions/uploadsActions';
+import { atomStore, translationsAtom } from 'V2/atoms';
 import { store } from '../store';
 import { socket, reconnectSocket } from '../socket';
 
@@ -58,10 +59,27 @@ socket.on('thesauriDelete', thesauri => {
   store.dispatch(actions.remove('thesauris', { _id: thesauri.id }));
 });
 
-socket.on('translationsChange', translations => {
-  store.dispatch(actions.update('translations', translations, 'locale'));
-  t.resetCachedTranslation();
-  Translate.resetCachedTranslation();
+socket.on('translationsChange', languageTranslations => {
+  const translations = atomStore.get(translationsAtom);
+  const modifiedLanguage = translations.find(
+    translation => translation.locale === languageTranslations.locale
+  );
+  modifiedLanguage.contexts = languageTranslations.contexts;
+  atomStore.set(translationsAtom, translations);
+  //t.resetCachedTranslation();
+  // Translate.resetCachedTranslation();
+});
+
+socket.on('translationKeysChange', translationsEntries => {
+  const translations = atomStore.get(translationsAtom);
+  translationsEntries.forEach(item => {
+    const modifiedContext = translations
+      .find(translation => translation.locale === item.language)
+      .contexts.find(c => c.id && c.id === item.context.id);
+    modifiedContext.values[item.key] = item.value;
+  });
+  atomStore.set(translationsAtom, translations);
+  //t.resetCachedTranslation();
 });
 
 socket.on('translationsInstallDone', () => {
@@ -89,8 +107,8 @@ socket.on('translationsInstallError', errorMessage => {
 
 socket.on('translationsDelete', locale => {
   store.dispatch(actions.remove('translations', { locale }, 'locale'));
-  t.resetCachedTranslation();
-  Translate.resetCachedTranslation();
+  //t.resetCachedTranslation();
+  // Translate.resetCachedTranslation();
 });
 
 socket.on('translationsDeleteDone', () => {