@vonaffenfels/contentful-slate-editor 1.1.29 → 1.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-slate-editor",
-    "version": "1.1.29",
+    "version": "1.1.30",
     "scripts": {
         "prepublish": "yarn run build",
         "dev": "yarn run start",
@@ -96,7 +96,7 @@
         "@vonaffenfels/slate-editor": "^1.1.29",
         "webpack": "5.88.2"
     },
-    "gitHead": "6f766a57107e33b358372874a69e2199dc14d8f6",
+    "gitHead": "d4bee0dde0eb4aeaaa5881fd11823ccd9258695e",
     "publishConfig": {
         "access": "public"
     }

package/src/components/DialogTranslation.js

@@ -4,21 +4,61 @@ import {
 import {
     Button, Table,
 } from "@contentful/f36-components";
+import getSlug from "speakingurl";
 
 export const DialogTranslation = ({
     sdk,
     activeConfig,
+    translateFromLocale = "de",
 }) => {
     const {entryId} = sdk.parameters.invocation;
     const [entry, setEntry] = useState(null);
     const [loading, setLoading] = useState({});
+    const [usage, setUsage] = useState({});
     const [contentType, setContentType] = useState(null);
+    const localizedFields = contentType?.fields?.filter(field => field.localized);
+
+    const getTranslationUsage = async (content) => {
+        if (!sdk?.parameters?.installation?.translationService) {
+            console.error(`no translation service configured!`);
+            return;
+        }
+
+        try {
+            const response = await fetch(sdk?.parameters?.installation?.translationService + "/usage", {
+                method: "POST",
+                body: JSON.stringify({
+                    editorContent: typeof content === "object" ? content : undefined,
+                    text: typeof content === "string" ? content : undefined,
+                }),
+            });
+
+            const translatedValue = await response.json();
+            return translatedValue?.usage || 0;
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    const updateUsage = async (entry, contentType) => {
+        const localizedFields = contentType?.fields?.filter(field => field.localized);
+        const newUsage = {};
+        for (let i = 0; i < localizedFields.length; i++) {
+            const localizedField = localizedFields[i];
+            newUsage[localizedField.id] = await getTranslationUsage(entry?.fields[localizedField.id]?.[translateFromLocale]);
+        }
+
+        return newUsage;
+    };
 
     useEffect(() => {
         sdk.space.getEntry(entryId).then(entry => {
             sdk.space.getContentType(entry.sys.contentType.sys.id).then(contentType => {
-                setEntry(entry);
-                setContentType(contentType);
+                updateUsage(entry, contentType).then((usage) => {
+                    setUsage(usage);
+                    setEntry(entry);
+                    setContentType(contentType);
+                });
             });
         });
     }, []);
@@ -27,7 +67,7 @@ export const DialogTranslation = ({
         return null;
     }
 
-    const translateValue = async (content, targetLanguage, translateFromLocale = "de") => {
+    const translateValue = async (content, targetLanguage) => {
         if (!sdk?.parameters?.installation?.translationService) {
             console.error(`no translation service configured!`);
             return;
@@ -40,7 +80,7 @@ export const DialogTranslation = ({
                     editorContent: typeof content === "object" ? content : undefined,
                     text: typeof content === "string" ? content : undefined,
                     targetLanguage,
-                    sourceLanguage: translateFromLocale,
+                    translateFromLocale: translateFromLocale,
                 }),
             });
 
@@ -51,38 +91,142 @@ export const DialogTranslation = ({
         }
     };
 
-    const localizedFields = contentType.fields.filter(field => field.localized);
-    const onTranslateClick = async (targetLanguage) => {
-        setLoading({[targetLanguage]: true});
+    const onTranslateClick = async (targetLanguageOrLanguages, refreshAll = false, onlyFields = []) => {
+        if (!Array.isArray(targetLanguageOrLanguages)) {
+            targetLanguageOrLanguages = [targetLanguageOrLanguages];
+        }
+
+        let newEntry = entry;
+        for (let i = 0; i < targetLanguageOrLanguages.length; i++) {
+            if (targetLanguageOrLanguages[i] === translateFromLocale) {
+                continue;
+            }
+
+            newEntry = await translateForLocale(
+                targetLanguageOrLanguages[i], newEntry, refreshAll, onlyFields,
+            );
+        }
+
+        await sdk.space.updateEntry(newEntry);
+        setEntry(await sdk.space.getEntry(entryId));
+    };
+
+    const translateForLocale = async (
+        targetLanguage, entry = {}, refreshAll = false, onlyFields = [],
+    ) => {
+        setLoading({
+            ...loading,
+            [targetLanguage]: true,
+        });
         const newEntry = {...entry};
         for (let i = 0; i < localizedFields.length; i++) {
             const localizedField = localizedFields[i];
-            const newValue = await translateValue(entry?.fields[localizedField.id]?.[sdk.locales.default], targetLanguage);
+            const currentValue = entry?.fields[localizedField.id]?.[targetLanguage];
+            if (
+                (!refreshAll && !isEmptyValue(currentValue) && !onlyFields.length) ||
+                (onlyFields.length && !onlyFields.includes(localizedField.id))
+            ) {
+                continue;
+            }
+
+            setLoading({
+                ...loading,
+                [targetLanguage + localizedField.id]: true,
+            });
+
+            let newValue = await translateValue(entry?.fields[localizedField.id]?.[sdk.locales.default], targetLanguage);
+
+            setLoading({
+                ...loading,
+                [targetLanguage + localizedField.id]: false,
+            });
+
+            if (!newValue) {
+                continue;
+            }
+
+            if (localizedField.id === "slug" && newValue) {
+                newValue = getSlug(newValue);
+            }
 
             newEntry.fields[localizedField.id][targetLanguage] = newValue;
         }
+        setLoading({
+            ...loading,
+            [targetLanguage]: false,
+        });
 
-        await sdk.space.updateEntry(newEntry);
-        setEntry(await sdk.space.getEntry(entryId));
-        setLoading({});
+        return newEntry;
+    };
+
+    const isEmptyValue = (value) => {
+        if (!value) {
+            return true;
+        }
+
+        // editor value
+        if (Array.isArray(value)) {
+            if (value.length === 1 && value[0].type === "paragraph" && value[0].children.length === 1 && value[0].children[0].text === "") {
+                return true;
+            }
+        }
+
+        return false;
     };
 
+    const isComplete = (locale) => {
+        for (let i = 0; i < localizedFields.length; i++) {
+            const localizedField = localizedFields[i];
+            const value = entry?.fields[localizedField.id]?.[locale];
+
+            if (isEmptyValue(value)) {
+                return false;
+            }
+        }
+
+        return true;
+    };
+
+    const fullUsage = Object.keys(usage || {}).reduce((acc, key) => acc + usage[key], 0);
 
     return <div className="flex flex-col gap-2 p-4">
         <Table>
             <Table.Head>
                 <Table.Row>
-                    <Table.Cell />
+                    <Table.Cell style={{width: 250}}>Feld</Table.Cell>
+                    <Table.Cell style={{width: 100}}>Zeichen</Table.Cell>
                     {sdk.locales.available.map(locale => {
+                        const languageComplete = isComplete(locale);
+                        const isTranslateFromLocale = locale === translateFromLocale;
+
+                        if (isTranslateFromLocale) {
+                            return <Table.Cell key={locale}/>;
+                        }
+
+                        if (loading[locale]) {
+                            return <Table.Cell key={locale}><Button size="small" variant="transparent">Wird übersetzt</Button></Table.Cell>;
+                        }
+
+                        const buttonLabel = languageComplete ? "Erneut Übersetzen" : "Vervollständigen";
+
                         return <Table.Cell key={locale}>
-                            {locale !== "de" && <Button size="small" variant="primary" onClick={e => onTranslateClick(locale)}>Übersetzen</Button>}
+                            <Button
+                                size="small"
+                                className="group"
+                                variant={languageComplete ? "secondary" : "primary"}
+                                title={buttonLabel}
+                                onClick={e => onTranslateClick(locale, languageComplete)}>
+                                {!languageComplete && <span className="text-orange-500">Fehlende Übersetzen</span>}
+                                {languageComplete && <span className="text-green-500">Vollständig Übersetzt</span>}
+                            </Button>
                         </Table.Cell>;
                     })}
                 </Table.Row>
             </Table.Head>
             <Table.Body>
                 <Table.Row>
-                    <Table.Cell />
+                    <Table.Cell/>
+                    <Table.Cell>∑ {fullUsage}</Table.Cell>
                     {sdk.locales.available.map(locale => {
                         const name = sdk.locales.names[locale];
 
@@ -94,7 +238,20 @@ export const DialogTranslation = ({
                 {localizedFields.map(field => {
                     return <Table.Row key={field.id}>
                         <Table.Cell>
-                            {field.name}
+                            <Button
+                                className="max-w-full truncate"
+                                style={{maxWidth: 250}}
+                                size="small"
+                                variant={"transparent"}
+                                title={"Alle Übersetzungen Aktualisieren"}
+                                onClick={e => {
+                                    onTranslateClick(sdk.locales.available, false, [field.id]);
+                                }}>
+                                {field.name}
+                            </Button>
+                        </Table.Cell>
+                        <Table.Cell>
+                            {usage?.[field.id]}
                         </Table.Cell>
                         {sdk.locales.available.map(locale => {
                             let preview = entry?.fields[field.id]?.[locale];
@@ -104,11 +261,33 @@ export const DialogTranslation = ({
                             }
 
                             if (typeof preview === "object") {
-                                preview = "Keine Vorschau...";
+                                preview = "Keine Vorschau Verfügbar";
+                            }
+
+                            if (locale === translateFromLocale) {
+                                return <Table.Cell key={locale}>
+                                    <div
+                                        className="max-w-full truncate"
+                                        style={{maxWidth: 250}}>
+                                        {preview}
+                                    </div>
+                                </Table.Cell>;
+                            }
+
+                            if (loading[locale + field.id]) {
+                                return <Table.Cell key={locale}><Button size="small" variant="transparent">Wird übersetzt</Button></Table.Cell>;
                             }
 
                             return <Table.Cell key={locale}>
-                                {preview}
+                                <Button
+                                    className="max-w-full truncate"
+                                    style={{maxWidth: 250}}
+                                    size="small"
+                                    variant={"transparent"}
+                                    title={"Übersetzung Aktualisieren"}
+                                    onClick={e => onTranslateClick(locale, false, [field.id])}>
+                                    {preview}
+                                </Button>
                             </Table.Cell>;
                         })}
                     </Table.Row>;