@mwater/visualization 5.5.0 → 5.6.1

package/lib/dashboards/SettingsModalComponent.js

@@ -26,11 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importStar(require("react"));
-const languages_1 = require("../languages");
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
-const react_select_1 = __importDefault(require("react-select"));
 const DashboardUtils = __importStar(require("./DashboardUtils"));
 const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
 const QuickfiltersDesignComponent_1 = __importDefault(require("../quickfilter/QuickfiltersDesignComponent"));
@@ -38,9 +35,7 @@ const FiltersDesignerComponent_1 = __importDefault(require("../FiltersDesignerCo
 const MWaterContextComponent_1 = require("../MWaterContextComponent");
 const immer_1 = __importDefault(require("immer"));
 const TabbedComponent_1 = __importDefault(require("@mwater/react-library/lib/TabbedComponent"));
-const file_saver_1 = __importDefault(require("file-saver"));
-const localizeUtils = __importStar(require("ez-localize/lib/utils"));
-const autotranslate_1 = require("../autotranslate");
+const TranslationsTabComponent_1 = require("../TranslationsTabComponent");
 /** Popup with settings for dashboard */
 class SettingsModalComponent extends react_1.default.Component {
     constructor(props) {
@@ -127,233 +122,14 @@ function FiltersTab({ design, onDesignChange, schema, dataSource }) {
                     draft.implicitFiltersEnabled = value;
                 })) }, T `Enable Implicit Filtering (leave unchecked for new dashboards)`)))));
 }
+/** Wrapper around TranslationsTabComponent for dashboard-specific usage */
 function LanguageTab({ design, onDesignChange, schema }) {
-    const fileInputRef = (0, react_1.useRef)(null);
-    const locale = design.locale || "en";
-    const localeOptions = (0, react_1.useMemo)(() => {
-        return lodash_1.default.sortBy(lodash_1.default.map(languages_1.languages, (language) => ({
-            value: language.code,
-            label: `${language.en} (${language.name})`
-        })), 'label');
-    }, [languages_1.languages]);
-    // Get available languages that aren't already selected
-    const availableLocaleOptions = (0, react_1.useMemo)(() => {
-        const selectedLocales = new Set([design.locale, ...(design.otherLocales || [])]);
-        return localeOptions.filter(opt => !selectedLocales.has(opt.value));
-    }, [localeOptions, design.locale, design.otherLocales]);
     const translatableStrings = (0, react_1.useMemo)(() => DashboardUtils.getTranslatableStringsFromDashboard(design, schema), [design, schema]);
-    // Calculate percentage of strings translated for each locale
-    const translationPercentages = (0, react_1.useMemo)(() => {
-        const percentages = {};
-        const totalStrings = translatableStrings.length;
-        for (const locale of design.otherLocales || []) {
-            const translatedCount = translatableStrings.filter(str => design.translations?.[locale]?.[str] != null).length;
-            // Round down to nearest percent
-            percentages[locale] = Math.floor((translatedCount / totalStrings) * 100);
-        }
-        return percentages;
-    }, [design.translations, design.otherLocales, translatableStrings]);
-    const handleAddLocale = (locale) => {
-        onDesignChange((0, immer_1.default)(design, draft => {
-            draft.otherLocales = [...(draft.otherLocales || []), locale.value];
-            // Initialize empty translations object if needed
-            if (!draft.translations) {
-                draft.translations = {};
-            }
-            if (!draft.translations[locale.value]) {
-                draft.translations[locale.value] = {};
-            }
-        }));
-    };
-    const handleRemoveLocale = (localeToRemove) => {
-        onDesignChange((0, immer_1.default)(design, draft => {
-            draft.otherLocales = (draft.otherLocales || []).filter(locale => locale !== localeToRemove);
-            // Remove translations for this locale
-            if (draft.translations) {
-                delete draft.translations[localeToRemove];
-            }
-        }));
-    };
-    // Convert dashboard translations to LocalizedString format
-    const getLocalizedStrings = () => {
-        // For each string, create a localized string
-        const localizedStrings = [];
-        for (const str of translatableStrings) {
-            const localizedString = { _base: locale };
-            localizedString[locale] = str;
-            // Only add translations for other locales if they exist
-            for (const otherLocale of design.otherLocales || []) {
-                if (design.translations?.[otherLocale]?.[str]) {
-                    localizedString[otherLocale] = design.translations?.[otherLocale]?.[str];
-                }
-            }
-            localizedStrings.push(localizedString);
-        }
-        return localizedStrings;
-    };
-    // Convert LocalizedString format back to dashboard translations
-    const updateFromLocalizedStrings = (localizedStrings) => {
-        const newTranslations = {};
-        // Get all locales except base
-        const locales = design.otherLocales || [];
-        // Initialize translations object
-        for (const locale of locales) {
-            newTranslations[locale] = {};
-        }
-        // Add all translations
-        for (const str of localizedStrings) {
-            for (const locale of locales) {
-                if (str[locale]) {
-                    newTranslations[locale][str[str._base]] = str[locale];
-                }
-            }
-        }
-        return newTranslations;
-    };
-    const handleDownload = () => {
-        // Get strings in LocalizedString format
-        const strings = getLocalizedStrings();
-        // Create xlsx base64 using all locales (primary + other)
-        const locales = [{ code: locale, name: locale }]
-            .concat((design.otherLocales || []).map(code => ({ code, name: code })));
-        const base64 = localizeUtils.exportXlsx(locales, strings);
-        // Download
-        file_saver_1.default.saveAs(b64toBlob(base64, "application/octet-stream"), "Dashboard Translations.xlsx");
-    };
-    const handleUpload = () => {
-        fileInputRef.current?.click();
-    };
-    const handleUploadChange = (evt) => {
-        const reader = new FileReader();
-        reader.onload = (file) => {
-            if (!file.target?.result) {
-                return;
-            }
-            const base64 = file.target.result.split(",")[1];
-            try {
-                // Create locales array for import
-                const locales = [{ code: locale, name: locale }]
-                    .concat((design.otherLocales || []).map(code => ({ code, name: code })));
-                // Import updates
-                const updates = localizeUtils.importXlsx(locales, base64);
-                // If nothing localized
-                if (updates.length === 0) {
-                    alert(T `No translation data found in file`);
-                    return;
-                }
-                // Convert back to dashboard format and update
-                const newTranslations = updateFromLocalizedStrings(updates);
-                onDesignChange((0, immer_1.default)(design, draft => {
-                    draft.translations = newTranslations;
-                }));
-                alert(T `${updates.length} translations applied`);
-            }
-            catch (error) {
-                console.error("Invalid xlsx file:", error);
-                alert(T `Invalid xlsx file`);
-            }
-        };
-        if (evt.target.files?.[0]) {
-            reader.readAsDataURL(evt.target.files[0]);
-        }
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("h4", null, T `Base Language`),
-        react_1.default.createElement("div", { className: "mb-2" }, T `This is the language that the dashboard is written in.`),
-        react_1.default.createElement(react_select_1.default, { value: lodash_1.default.findWhere(localeOptions, { value: design.locale || "en" }) || null, options: localeOptions, onChange: (locale) => onDesignChange((0, immer_1.default)(design, draft => {
-                draft.locale = locale.value;
-            })) }),
-        react_1.default.createElement("h4", { className: "mt-4" }, T `Additional Languages`),
-        react_1.default.createElement("div", { className: "mb-2" }, T `Add languages that this dashboard will be translated into`),
-        react_1.default.createElement("table", null,
-            react_1.default.createElement("tbody", null, (design.otherLocales || []).map(locale => {
-                const localeOption = lodash_1.default.findWhere(localeOptions, { value: locale });
-                if (!localeOption) {
-                    return null;
-                }
-                return (react_1.default.createElement("tr", { key: locale },
-                    react_1.default.createElement("td", { style: { paddingRight: 10 } }, localeOption.label),
-                    react_1.default.createElement("td", { className: translationPercentages[locale] === 100 ? "text-success" : "text-warning", style: { textAlign: "right" } }, T `${translationPercentages[locale]}% translated`),
-                    react_1.default.createElement("td", null, translationPercentages[locale] < 100 && (react_1.default.createElement(AutoTranslateLink, { locale: locale, baseLocale: design.locale || "en", strings: translatableStrings, existingTranslations: design.translations?.[locale] || {}, onTranslationsChange: (newTranslations) => {
-                            onDesignChange((0, immer_1.default)(design, draft => {
-                                if (!draft.translations) {
-                                    draft.translations = {};
-                                }
-                                draft.translations[locale] = newTranslations;
-                            }));
-                        } }))),
-                    react_1.default.createElement("td", null,
-                        react_1.default.createElement("button", { type: "button", className: "btn btn-sm btn-link", onClick: () => handleRemoveLocale(locale) },
-                            react_1.default.createElement("i", { className: "fa fa-times" })))));
-            }))),
-        availableLocaleOptions.length > 0 && (react_1.default.createElement("div", { className: "mt-3" },
-            react_1.default.createElement(react_select_1.default, { value: null, options: availableLocaleOptions, onChange: handleAddLocale, placeholder: T `Add language...` }))),
-        (design.otherLocales || []).length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("h4", { className: "mt-4" }, T `Manage Translations`),
-            react_1.default.createElement("p", null, T `Download and re-upload an Excel spreadsheet of text to translate:`),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("button", { type: "button", className: "btn btn-secondary", onClick: handleDownload },
-                    react_1.default.createElement("i", { className: "fas fa-download me-2" }),
-                    T `Download XLSX`)),
-            react_1.default.createElement("div", { className: "text-muted mt-2" }, T `This creates a spreadsheet that can be sent to a translator. Please do not change the first column or first row of the spreadsheet.`),
-            react_1.default.createElement("br", null),
-            react_1.default.createElement("p", null, T `Once translation is complete, upload the file back using the button below:`),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("button", { type: "button", className: "btn btn-secondary", onClick: handleUpload },
-                    react_1.default.createElement("i", { className: "fas fa-upload me-2" }),
-                    T `Upload Translated XLSX`)),
-            react_1.default.createElement("input", { type: "file", ref: fileInputRef, style: { display: "none" }, onChange: handleUploadChange, accept: ".xlsx" })))));
-}
-/** Helper function for base64 to blob conversion */
-function b64toBlob(b64Data, contentType = "", sliceSize = 512) {
-    const byteCharacters = atob(b64Data);
-    const byteArrays = [];
-    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
-        const slice = byteCharacters.slice(offset, offset + sliceSize);
-        const byteNumbers = new Array(slice.length);
-        for (let i = 0; i < slice.length; i++) {
-            byteNumbers[i] = slice.charCodeAt(i);
-        }
-        const byteArray = new Uint8Array(byteNumbers);
-        byteArrays.push(byteArray);
-    }
-    return new Blob(byteArrays, { type: contentType });
-}
-function AutoTranslateLink(props) {
-    const { locale, baseLocale, strings, existingTranslations, onTranslationsChange } = props;
-    const [isTranslating, setIsTranslating] = (0, react_1.useState)(false);
-    const untranslatedStrings = (0, react_1.useMemo)(() => {
-        return strings.filter(str => !existingTranslations[str]);
-    }, [strings, existingTranslations]);
-    const handleClick = async () => {
-        if (isTranslating) {
-            return;
-        }
-        setIsTranslating(true);
-        try {
-            const translatedStrings = await (0, autotranslate_1.translateStrings)(untranslatedStrings, baseLocale, locale);
-            const newTranslations = { ...existingTranslations };
-            for (let i = 0; i < untranslatedStrings.length; i++) {
-                newTranslations[untranslatedStrings[i]] = translatedStrings[i];
-            }
-            onTranslationsChange(newTranslations);
-        }
-        catch (error) {
-            console.error("Error translating strings:", error);
-            alert(T `Error translating strings`);
-        }
-        finally {
-            setIsTranslating(false);
-        }
-    };
-    if (untranslatedStrings.length === 0) {
-        return null;
-    }
-    if (!(0, autotranslate_1.canAutoTranslate)(locale)) {
-        return null;
-    }
-    return (react_1.default.createElement("button", { type: "button", className: "btn btn-sm btn-link", onClick: handleClick, disabled: isTranslating, style: { marginLeft: 5, padding: "0 5px" } }, isTranslating ? (react_1.default.createElement("span", null,
-        react_1.default.createElement("i", { className: "fa fa-spinner fa-spin" }),
-        " ",
-        T `Translating...`)) : (T `Autotranslate`)));
+    return (react_1.default.createElement(TranslationsTabComponent_1.TranslationsTabComponent, { locale: design.locale || "en", otherLocales: design.otherLocales || [], translations: design.translations || {}, translatableStrings: translatableStrings, onLocaleChange: (locale) => onDesignChange((0, immer_1.default)(design, draft => {
+            draft.locale = locale;
+        })), onOtherLocalesChange: (otherLocales) => onDesignChange((0, immer_1.default)(design, draft => {
+            draft.otherLocales = otherLocales;
+        })), onTranslationsChange: (translations) => onDesignChange((0, immer_1.default)(design, draft => {
+            draft.translations = translations;
+        })), downloadFilename: "Dashboard Translations.xlsx", baseLanguageDescription: T `This is the language that the dashboard is written in.` }));
 }

package/lib/datagrids/DatagridComponent.js

@@ -85,6 +85,11 @@ exports.default = (0, react_1.forwardRef)(function DatagridComponent(props, ref)
             return;
         }
         let activeFilters = filters || [];
+        // Clean before counting
+        const cleanedDesign = new DatagridUtils_1.default(schema).cleanDesign(design);
+        if (new DatagridUtils_1.default(schema).validateDesign(cleanedDesign)) {
+            return;
+        }
         // Compile quickfilters
         activeFilters = activeFilters.concat(getQuickfilterFilters());
         datagridDataSource.countRows(design, activeFilters, (error, count) => {
@@ -342,8 +347,28 @@ exports.default = (0, react_1.forwardRef)(function DatagridComponent(props, ref)
                     return (react_1.default.createElement(DatagridViewComponent_1.default, { ref: datagridViewRef, width: size.width - 1, height: size.height - 1, pageSize: 100, schema: schema, dataSource: dataSource, datagridDataSource: datagridDataSource, design: cleanedDesign, filters: activeFilters, onDesignChange: onDesignChange, onRowClick: onRowClick, onRowDoubleClick: onRowDoubleClick, selectedRows: dataEditingEnabled && props.onRowsDelete != null ? selectedRows : undefined, onSelectedRowsChange: dataEditingEnabled && props.onRowsDelete != null ? setSelectedRows : undefined, canEditExpr: dataEditingEnabled ? canEditExpr : undefined, updateExprValues: dataEditingEnabled ? updateExprValues : undefined, refreshKey: refreshKey }));
                 }
                 else if (onDesignChange) {
-                    return (react_1.default.createElement("div", { style: { textAlign: "center", marginTop: size.height / 2 } },
-                        react_1.default.createElement("a", { className: "btn btn-link", onClick: handleEdit }, T `Click Here to Configure`)));
+                    return (react_1.default.createElement("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            height: "100%",
+                            padding: "40px"
+                        } },
+                        react_1.default.createElement("div", { style: {
+                                textAlign: "center",
+                                marginBottom: "24px"
+                            } },
+                            react_1.default.createElement("i", { className: "fas fa-table text-muted", style: {
+                                    fontSize: "48px",
+                                    marginBottom: "16px"
+                                } }),
+                            react_1.default.createElement("div", { style: {
+                                    fontSize: "14px"
+                                }, className: "text-muted" }, T `Configure a data source and columns to get started.`)),
+                        react_1.default.createElement("button", { className: "btn btn-primary", onClick: handleEdit },
+                            react_1.default.createElement("i", { className: "fas fa-cog", style: { marginRight: "8px" } }),
+                            T `Configure`)));
                 }
                 else {
                     return null;

package/lib/datagrids/DatagridDesignerComponent.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
-import TabbedComponent from "@mwater/react-library/lib/TabbedComponent";
 import { DatagridDesign } from "..";
 export interface DatagridDesignerComponentProps {
     /** schema to use */
@@ -18,6 +17,6 @@ export default class DatagridDesignerComponent extends React.Component<DatagridD
     handleFilterChange: (filter: any) => void;
     handleGlobalFiltersChange: (globalFilters: any) => void;
     handleOrderBysChange: (orderBys: any) => void;
-    renderTabs(): React.CElement<any, TabbedComponent>;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderTabs(): React.JSX.Element;
+    render(): React.JSX.Element;
 }