@zeesoft/i18n-verify 1.0.0 → 2.0.1

package/dist/utils/reportFactory/html/template/javascript/grid.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = () => `
+//grid view
+(() => {
+        document.addEventListener("DOMContentLoaded", function () {
+          let table;
+          document.querySelectorAll(".sub-menu-item").forEach((menu) => {
+            menu.addEventListener("click", (e) => {
+              render(e.currentTarget.dataset.locale);
+            });
+          });
+
+          const updateTitle = (locale) => {
+            document.querySelector(
+              "#locale .title"
+            ).textContent = \`\${locale} I18n Coverage Details\`;
+          };
+
+          const buildGrid = (_locale) => {
+            const data = DataStore.getDataByLocale(_locale);
+            $.fn.dataTable.ext.errMode = "none";
+            const locale = ["en_US", "fr_FR"];
+            const type = [
+              "I18n Str",
+              "Not I18n Str",
+              "Parially Localized",
+              "Utranslated",
+              "Encoding",
+              "DNT",
+              "I18n Date",
+              "I18n Number",
+              "Not I18n DateTime",
+            ];
+            const testPages = [
+              "Welcome-Page",
+              "Settings-Page",
+              "User-Profile-Page",
+              "Dashboard-Page",
+            ];
+
+            const dataSet = Array(100)
+              .fill()
+              .map((i, v) => [
+                \`sample text \${v}\`,
+                locale[Math.floor(Math.random() * 2)],
+                type[Math.floor(Math.random() * 9)],
+                testPages[Math.floor(Math.random() * 3)],
+                \`link-\${v}.png\`,
+              ]);
+            table = new DataTable("#locale .coverage-info table", {
+              columns: [
+                { title: "String" },
+                { title: "Locale" },
+                { title: "Type" },
+                { title: "Page" },
+                { title: "Screenshot" },
+              ],
+              columnDefs: [
+                {
+                  targets: 4,
+                  orderable: false,
+                  searchable: false,
+                  data: null,
+                  render: function (data) {
+                    return \`<a href="#" class="view-screenshot-btn" onclick="openImageViewer('\${data[4]}')">View Screenshot</a>\`;
+                  },
+                },
+              ],
+              data: dataSet,
+              initComplete: function () {
+                this.api()
+                  .columns()
+                  .every(function () {
+                    const column = this;
+
+                    if (column[0][0] === 4) {
+                      return;
+                    }
+
+                    const select = $(
+                      '<select class="filter dt-input"><option value="">Filter By</option></select>'
+                    )
+                      .appendTo($(column.header()).before())
+                      .on("change", function () {
+                        const val = $.fn.dataTable.util.escapeRegex(
+                          $(this).val()
+                        );
+
+                        column
+                          .search(val ? "^" + val + "$" : "", true, false)
+                          .draw();
+                      })
+                      .on("click", function (e) {
+                        e.stopPropagation();
+                        e.stopImmediatePropagation();
+                      });
+
+                    column
+                      .data()
+                      .unique()
+                      .sort()
+                      .each(function (d, j) {
+                        select.append(
+                          '<option value="' + d + '">' + d + "</option>"
+                        );
+                      });
+                  });
+              },
+              sScrollY:
+                document
+                  .querySelector("#locale .coverage-info")
+                  .getBoundingClientRect().height - 142,
+              pageLength: 25,
+              lengthMenu: [10, 25, 50, 100],
+            });
+
+            // Event handler when position select is changed
+            $(table.columns(1).header())
+              .find("select")
+              .on("change", function () {
+                var nextSelect = $(table.columns(2).header()).find("select");
+                var nextColumn = table.column(2);
+                var nextColumnResults = table.column(2, { search: "applied" });
+                nextColumn.search("").draw();
+                nextSelect.empty();
+                nextSelect.append('<option value="">Filter By</option>');
+                nextColumnResults
+                  .data()
+                  .unique()
+                  .sort()
+                  .each(function (d, j) {
+                    nextSelect.append(
+                      '<option value="' + d + '">' + d + "</option>"
+                    );
+                  });
+              });
+          };
+
+          const render = (locale) => {
+            updateTitle(locale);
+            buildGrid(locale);
+            if (table) {
+              $($(table.columns(1).header()).find("select")).val(locale);
+              table.columns(1).search(locale).draw();
+            }
+          };
+        });
+      })();
+`;
+exports.default = _default;

package/dist/utils/reportFactory/html/template/javascript/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _menuBar = _interopRequireDefault(require("./menuBar.js"));
+var _overview = _interopRequireDefault(require("./overview.js"));
+var _insight = _interopRequireDefault(require("./insight.js"));
+var _grid = _interopRequireDefault(require("./grid.js"));
+var _data = _interopRequireDefault(require("./data.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = metaData => `
+  ${(0, _data.default)(metaData.locales, metaData.stats, metaData.statsByLocale, metaData.stringData)}
+  ${(0, _menuBar.default)()}
+  ${(0, _overview.default)()}
+  ${(0, _insight.default)()}
+  ${(0, _grid.default)()}
+  `;
+exports.default = _default;

package/dist/utils/reportFactory/html/template/javascript/insight.js

@@ -0,0 +1,224 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = () => `
+//Cards of locales
+ (() => {
+        document.addEventListener("DOMContentLoaded", function () {
+          renderCards();
+
+          // helper methods to generate cards and its sections
+          function createStatSection(data) {
+            const isDefaultLocale = false; // dynamically pass
+            const holder = document.createElement("div");
+            const table = document.createElement("table");
+            const tbody = document.createElement("tbody");
+            const name = document.createElement("div");
+            const tableData = {
+              Reviewed: 1000,
+              "Internationlized Strings": 600,
+              "Not Internationlized Strings": 100,
+              "Untranslated Strings": 50,
+              "Encoding Issue Strings": 15,
+              "DNT Strings": 15,
+              "Auto Ignored Strings": 20,
+              "Internationlized Numbers": 20,
+              "Not Internationlized Numbers": 20,
+              "Internationlized Currency": 20,
+              "Not Internationlized Currency": 20,
+              "Internationlized Date": 20,
+              "Not Internationlized Date": 20,
+              "Internationlized Time": 20,
+              "Not Internationlized Time": 20,
+              "Internationlized DateTime": 20,
+              "Not Internationlized DateTime": 20,
+            };
+            const addRow = (name, value) => {
+              const row = document.createElement("tr");
+
+              const col1 = document.createElement("td");
+              col1.classList.add("name");
+              col1.textContent = name;
+
+              const col2 = document.createElement("td");
+              col2.classList.add("value");
+              col2.textContent = value;
+
+              row.appendChild(col1);
+              row.appendChild(col2);
+              return row;
+            };
+
+            for (const rowData of Object.entries(tableData)) {
+              if (!isDefaultLocale || rowData[0] !== "Untranslated Strings") {
+                tbody.appendChild(addRow(rowData[0], rowData[1]));
+              }
+            }
+
+            holder.classList.add("stat");
+            name.classList.add("name");
+            name.textContent = "Summary";
+            holder.append(name);
+
+            table.appendChild(tbody);
+            holder.appendChild(table);
+            return holder;
+          }
+
+          function createStatusBarSection(data) {
+            const holder = document.createElement("div");
+            holder.classList.add("status-bar");
+
+            const generateBarEl = (name, total, current) => {
+              current = (current / total) * 100;
+              const holder = document.createElement("div");
+              holder.classList.add("bar-container");
+
+              const nameHolder = document.createElement("div");
+              nameHolder.classList.add("name");
+              nameHolder.textContent = name;
+
+              const barHolder = document.createElement("div");
+              barHolder.classList.add("bar-holder");
+
+              const bar = document.createElement("div");
+              bar.classList.add("bar");
+              bar.style.width = \`\${current}%\`;
+              bar.textContent = \`\${current}%\`;
+
+              barHolder.appendChild(bar);
+              holder.appendChild(nameHolder);
+              holder.appendChild(barHolder);
+
+              return holder;
+            };
+
+            const isDefaultLocale = false; // should be dynamically passed
+            const totalStrings = isDefaultLocale ? 100 : 100; // reviewed - ignore - dnt - autoignore - encoding
+            const totalI18nedStr = isDefaultLocale ? 100 : 70;
+            const totalLocStr = isDefaultLocale ? 100 : 90;
+            const totalI18nedNum = isDefaultLocale ? 100 : 50;
+            const totalI18nedDateTime = isDefaultLocale ? 100 : 80;
+
+            holder.appendChild(
+              generateBarEl("String I18n level", totalStrings, totalI18nedStr)
+            );
+            holder.appendChild(
+              generateBarEl("String L10n level", totalStrings, totalLocStr)
+            );
+            holder.appendChild(
+              generateBarEl("Number I18n level", totalStrings, totalI18nedNum)
+            );
+            holder.appendChild(
+              generateBarEl(
+                "DateTime I18n level",
+                totalStrings,
+                totalI18nedDateTime
+              )
+            );
+            return holder;
+          }
+
+          function generateCardContents(data) {
+            const cardContent = document.createElement("div");
+            cardContent.classList.add("card-content");
+
+            cardContent.appendChild(createStatusBarSection(data));
+            cardContent.appendChild(createStatSection(data));
+            return cardContent;
+          }
+
+          function createCardEl(locale, data) {
+            const card = document.createElement("div");
+            const title = document.createElement("div");
+            card.classList.add("card");
+            card.dataset.locale = locale;
+            title.classList.add("title");
+            title.textContent = \`\${locale} details\`;
+
+            // fire menu selection event on clicking the card
+            card.addEventListener("click", () => {
+              const previousSelectedSubMenu = document.querySelector(
+                '.sub-menu-item.selected'
+              );
+              if (previousSelectedSubMenu) {
+                window.previousSelectedLocale =
+                  previousSelectedSubMenu.dataset.locale;
+              }
+
+              document
+                .querySelector(\`.sub-menu-item[data-locale="\${locale}"]\`)
+                .click();
+            });
+
+            card.appendChild(title);
+            card.appendChild(generateCardContents(data));
+            return card;
+          }
+
+          function renderCards() {
+            // read from global variable appData;
+            const localeInfo = {
+              en_US: {
+                total: 1000,
+                localized: 700,
+                notLocalized: 100,
+                untranslated: 50,
+                encodingIssue: 20,
+                dnt: 15,
+                ignored: 10,
+                autoIgnored: 5,
+                currency: 20,
+                number: 20,
+                percentage: 15,
+                dateTime: 15,
+                date: 15,
+                time: 15,
+                notLocalizedcurrency: 20,
+                notLocalizednumber: 20,
+                notLocalizedpercentage: 15,
+                notLocalizeddateTime: 15,
+                notLocalizeddate: 15,
+                notLocalizedtime: 15,
+              },
+              fr_FR: {
+                total: 1000,
+                localized: 700,
+                notLocalized: 100,
+                untranslated: 50,
+                encodingIssue: 20,
+                dnt: 15,
+                ignored: 10,
+                autoIgnored: 5,
+                currency: 20,
+                number: 20,
+                percentage: 15,
+                dateTime: 15,
+                date: 15,
+                time: 15,
+                notLocalizedCurrency: 20,
+                notLocalizedNumber: 20,
+                notLocalizedPercentage: 15,
+                notLocalizedDateTime: 15,
+                notLocalizedDate: 15,
+                notLocalizedTime: 15,
+              },
+            };
+
+            if (Object.keys(localeInfo).length) {
+              const cardHolder = document.querySelector(
+                "#insights .cards .holder"
+              );
+              for (const locale in localeInfo) {
+                const cardEl = createCardEl(locale, localeInfo[locale]);
+                cardHolder.appendChild(cardEl);
+              }
+            }
+          }
+        });
+      })();
+`;
+exports.default = _default;

package/dist/utils/reportFactory/html/template/javascript/menuBar.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = () => `(() => {
+        // for sidebar menu
+        const loadContent = (section, highlightMenu = false) => {
+          if (highlightMenu) {
+            document
+              .querySelector('li[data-page="overview"]')
+              ?.classList.add("selected");
+          }
+
+          const contents = document.querySelectorAll(".content");
+          contents.forEach((content) => {
+            content.id !== section
+              ? content.classList.remove("active")
+              : content.classList.add("active");
+
+            section === "overview" &&
+              window.persistOverviewCharts &&
+              window.persistOverviewCharts();
+
+            window.currentPage = section;
+          });
+        };
+
+        document.addEventListener("DOMContentLoaded", function () {
+          const createMenuItems = (() => {
+            const ul = document.querySelector(".sidebar .submenu");
+            const createListItems = (locale) => {
+              const li = document.createElement("li");
+              li.classList.add("sub-menu-item");
+              li.dataset.locale = locale;
+
+              const a = document.createElement("a");
+              a.href = "#";
+              a.textContent = locale;
+
+              li.appendChild(a);
+              return li;
+            };
+
+            for (const locale of Object.keys(DataStore.getLocalesData())) {
+              ul.appendChild(createListItems(locale));
+            }
+          })();
+
+          const menuItems = document.querySelectorAll(".menu-item"),
+            submenuItems = document.querySelectorAll(".sub-menu-item");
+
+          menuItems.forEach((item) => {
+            item.addEventListener("click", function (event) {
+              const selectedMenuItem = document.querySelector(
+                  ".menu-item.selected"
+                ),
+                selectedSubmenu = document.querySelector(".submenu.active"),
+                page = item.dataset.page;
+
+              if (selectedMenuItem) {
+                selectedMenuItem.classList.remove("selected");
+              }
+
+              if (selectedSubmenu) {
+                selectedSubmenu.classList.remove("active");
+              }
+
+              if (item.classList.contains("has-submenu")) {
+                event.preventDefault();
+                item.classList.add("selected");
+                const submenu = item.querySelector(".submenu");
+                submenu.classList.add("active");
+              } else {
+                item.classList.add("selected");
+              }
+
+              if (selectedSubmenu) {
+                selectedSubmenu
+                  .querySelectorAll(".sub-menu-item")
+                  .forEach((submenuItem) => {
+                    submenuItem.textContent !== item.textContent &&
+                      submenuItem.classList.remove("selected");
+                  });
+              }
+
+              loadContent(page);
+            });
+
+            loadContent("overview", true);
+          });
+
+          submenuItems.forEach((sItem) => {
+            sItem.addEventListener("click", function (event) {
+              const selectedSubMenuItem = document.querySelector(
+                ".sub-menu-item.selected"
+              );
+              event.preventDefault();
+              event.stopPropagation();
+
+              if (selectedSubMenuItem) {
+                selectedSubMenuItem.classList.remove("selected");
+                window.previousSelectedLocale =
+                  selectedSubMenuItem.dataset.locale;
+              }
+
+              sItem.classList.add("selected");
+              loadContent("locale");
+            });
+          });
+
+          // update footer info
+          const footer = document.querySelector(".sidebar .footer");
+          footer.textContent = \`${new Date().getFullYear()} @ Zeesoft. All rights reserved.\`;
+        });
+      })();`;
+exports.default = _default;