@zeesoft/i18n-verify 2.0.2 → 2.1.0

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

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderHtml = exports.getBodyData = void 0;
-const renderHtml = ({
+exports.default = renderHtml;
+function renderHtml({
   appName,
   reportTime,
   script,
   style,
-  body
-}) => `<!DOCTYPE html>
+  body,
+  dataFilePaths = []
+}) {
+  return `<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -23,12 +25,16 @@ const renderHtml = ({
       name="description"
       content="I18n verification report"
     />
-    <title>I18n Verification Report | ${reportTime}</title>
+    <title>${appName} - I18n Verification Report | ${reportTime}</title>
         <!-- 3rd party dependecies -->
     <link
       rel="stylesheet"
       href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.min.css"
     />
+    ${dataFilePaths.map(v => `<script
+      src="${v}"
+      type="text/javascript" async>
+    </script>`).join('')}
     <script
       src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
       integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
@@ -43,116 +49,13 @@ const renderHtml = ({
     <style>
       ${style}
     </style>
-    <script type="text/javascript">
-      ${script}
-    </script>
   </head>
   <body>
     ${body}
   </body>
+  <script type="text/javascript" defer>
+    ${script}
+  </script>
 </html>
 `;
-exports.renderHtml = renderHtml;
-const getBodyData = () => `<header><div class="logo">zI18n-Verify</div></header>
-    <main>
-      <div class="sidebar">
-        <ul class="menu" id="menu">
-          <li class="menu-item" data-page="overview">
-            <a href="#">Overview</a>
-          </li>
-          <li class="menu-item has-submenu" data-page="insights">
-            <a href="#" data-page="insights">Insights</a>
-            <ul class="submenu"></ul>
-          </li>
-        </ul>
-        <div class="footer"></div>
-      </div>
-      <div class="content-wrapper">
-        <div id="overview" class="content">
-          <div class="overall-quality card">
-            <span class="title">Overall I18n Coverage</span>
-            <div class="section">
-              <div class="block">
-                <article>
-                  <p class="desc">
-                    zI18n-Verify report provides a comprehensive information
-                    about the I18n and L10n quailty of your application.
-                  </p>
-                  <ul class="items">
-                    <li>
-                      <h4>Reviewed:</h4>
-                      <p class="detail">
-                        Total strings which are captured and processed by
-                        zI18n-Verify.
-                      </p>
-                    </li>
-                    <li>
-                      <h4>Internationlized:</h4>
-                      <p class="detail">
-                        Different types of value like string, number, date-time
-                        which are properly Internationalized.
-                      </p>
-                    </li>
-                    <li>
-                      <h4>Not Internationalized:</h4>
-                      <p class="detail">
-                        Values which are not Internationalized. Also includes
-                        Partially Localized strings and Encoding Issues.
-                      </p>
-                    </li>
-                    <li>
-                      <h4>Skipped:</h4>
-                      <p class="detail">
-                        Values which are skipped from processing because they
-                        are listed in DNT / Ignored lists or contains Auto
-                        Ignored pattern / User input pattern.
-                      </p>
-                    </li>
-                  </ul>
-                </article>
-              </div>
-              <div class="block">
-                <div class="graph"></div>
-              </div>
-            </div>
-          </div>
-          <div class="string-quality card">
-            <span class="title">String Coverage</span>
-            <div class="graph"></div>
-          </div>
-          <div class="skipped-items card">
-            <span class="title">Skipped Items</span>
-            <div class="graph"></div>
-          </div>
-          <div class="number-quality card">
-            <span class="title">Number Coverage</span>
-            <div class="graph"></div>
-          </div>
-          <div class="datetime-quality card">
-            <span class="title">DateTime Coverage</span>
-            <div class="graph"></div>
-          </div>
-        </div>
-        <div id="insights" class="content">
-          <div class="cards">
-            <span class="title">Locale Quality</span>
-            <div class="holder"></div>
-          </div>
-        </div>
-        <div id="locale" class="content">
-          <span class="title">Locale Quality</span>
-          <div class="coverage-info">
-            <table class="row-border hover order-column stripe"></table>
-          </div>
-          <div id="imageViewer" class="image-viewer">
-            <span class="close-button" onclick="closeImageViewer()"
-              >&times;</span
-            >
-            <div class="image-container">
-              <img id="imageView" src="" alt="Image" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>`;
-exports.getBodyData = getBodyData;
+}

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

@@ -4,5 +4,63 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = (locales, stats, statsByLocale) => ``;
+var _default = metaData => `// DataStore
+      (() => {
+        // prepare appData and set DataStore
+        var appData = {
+          appName: '${metaData.appName}',
+          defaultLocale: '${metaData.defaultLocale}',
+          timeStamp: '${metaData.reportTime}',
+          metaData: {
+            stats: {},
+            statsByLocale: {}
+          },
+          stringsData: {},
+          locales: Object.keys(rawData)
+        };
+
+        for (const entry of Object.entries(rawData)) {
+          const locale = entry[0];
+          const stats = entry[1].metaData.stats;
+          const stringsData = entry[1].stringsData;
+
+          if (Object.keys(appData.metaData.stats).length) {
+            for (const prop in stats) {
+              appData.metaData.stats[prop] += stats[prop];
+            }
+          } else {
+            appData.metaData.stats = {...stats};
+          }
+
+          appData.metaData.statsByLocale[locale] = stats;
+          appData.stringsData[locale] = stringsData;
+        }
+
+        function SimpleDataStore() {
+          this._getData = () => appData;
+
+          this.ranSuccessfully = () => this.getLocales().length > 0;
+
+          this.getTimestamp = () => this._getData().timeStamp;
+
+          this.getAppName = () => this._getData().appName;
+
+          this.isDefaultLocale = (locale) =>
+            locale === this._getData().defaultLocale;
+
+          this.getLocalesData = () => this._getData().stringsData || {};
+
+          this.getLocales = () => this._getData().locales || [];
+
+          this.getStatByLocale = (locale) =>
+            this._getData().metaData.statsByLocale[locale] || {};
+
+          this.getOverallStats = () => this._getData().metaData.stats || {};
+
+          this.getDataByLocale = (locale) =>
+            this._getData().stringsData[locale] || {};
+        }
+
+        DataStore = new SimpleDataStore();
+      })();`;
 exports.default = _default;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = () => `var DataStore;
+      // global functions
+      function openImageViewer(imageSrc) {
+        var imageView = document.getElementById('imageView');
+        imageView.src = \`\${new URL(document.baseURI).pathname.replace(/\\/[^\\/]+$/g, '')}/\${imageSrc}\`;
+        document.getElementById('imageViewer').style.display = 'block';
+      }
+
+      function closeImageViewer() {
+        delete document.getElementById('imageView').src;
+        document.getElementById('imageViewer').style.display = 'none';
+      }`;
+exports.default = _default;

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

@@ -4,72 +4,68 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = () => `
-//grid view
-(() => {
-        document.addEventListener("DOMContentLoaded", function () {
+var _default = () => `// locale grid
+      (() => {
+        if (!DataStore.ranSuccessfully()) {
+          return;
+        }
+
+        document.addEventListener('DOMContentLoaded', function () {
           let table;
-          document.querySelectorAll(".sub-menu-item").forEach((menu) => {
-            menu.addEventListener("click", (e) => {
+          document.querySelectorAll('.sub-menu-item').forEach((menu) => {
+            menu.addEventListener('click', (e) => {
               render(e.currentTarget.dataset.locale);
             });
           });
 
           const updateTitle = (locale) => {
             document.querySelector(
-              "#locale .title"
+              '#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", {
+          const buildGrid = (locale) => {
+            const data = DataStore.getDataByLocale(locale) || {};
+            $.fn.dataTable.ext.errMode = 'none';
+            const dataSet = [];
+            Object.entries(data).map((entry) =>
+              entry[1].forEach(
+                (v) =>
+                  v.type !== 'REVIEWED' &&
+                  dataSet.push([entry[0], v.type, v.description, v.imagePath])
+              )
+            );
+            table = new DataTable('#locale .coverage-info table', {
               columns: [
-                { title: "String" },
-                { title: "Locale" },
-                { title: "Type" },
-                { title: "Page" },
-                { title: "Screenshot" },
+                { title: 'String' },
+                { title: 'Type' },
+                { title: 'Page' },
+                { title: 'Screenshot' }
               ],
               columnDefs: [
                 {
-                  targets: 4,
+                  width: '44%',
+                  targets: 0
+                },
+                {
+                  width: '18%',
+                  targets: 1
+                },
+                {
+                  width: '18%',
+                  targets: 2
+                },
+                {
+                  width: '18%',
+                  targets: 3,
                   orderable: false,
                   searchable: false,
                   data: null,
                   render: function (data) {
-                    return \`<a href="#" class="view-screenshot-btn" onclick="openImageViewer('\${data[4]}')">View Screenshot</a>\`;
+                    return \`<a href="#" class="view-screenshot-btn" onclick="openImageViewer('\${data[3]}')"><img title="View screenshot for '\${data[2]}'" class="view-screenshot-image"></img></a>\`;
                   },
-                },
+                  className: 'dt-head-center dt-body-center'
+                }
               ],
               data: dataSet,
               initComplete: function () {
@@ -78,7 +74,7 @@ var _default = () => `
                   .every(function () {
                     const column = this;
 
-                    if (column[0][0] === 4) {
+                    if (column[0][0] === 3) {
                       return;
                     }
 
@@ -86,16 +82,16 @@ var _default = () => `
                       '<select class="filter dt-input"><option value="">Filter By</option></select>'
                     )
                       .appendTo($(column.header()).before())
-                      .on("change", function () {
+                      .on('change', function () {
                         const val = $.fn.dataTable.util.escapeRegex(
                           $(this).val()
                         );
 
                         column
-                          .search(val ? "^" + val + "$" : "", true, false)
+                          .search(val ? '^' + val + '$' : '', true, false)
                           .draw();
                       })
-                      .on("click", function (e) {
+                      .on('click', function (e) {
                         e.stopPropagation();
                         e.stopImmediatePropagation();
                       });
@@ -106,50 +102,28 @@ var _default = () => `
                       .sort()
                       .each(function (d, j) {
                         select.append(
-                          '<option value="' + d + '">' + d + "</option>"
+                          '<option value="' + d + '">' + d + '</option>'
                         );
                       });
                   });
               },
               sScrollY:
                 document
-                  .querySelector("#locale .coverage-info")
+                  .querySelector('#locale .coverage-info')
                   .getBoundingClientRect().height - 142,
               pageLength: 25,
-              lengthMenu: [10, 25, 50, 100],
+              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();
+              table.destroy();
             }
+            updateTitle(locale);
+            buildGrid(locale);
           };
         });
-      })();
+    })();
 `;
 exports.default = _default;

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

@@ -9,12 +9,12 @@ var _overview = _interopRequireDefault(require("./overview.js"));
 var _insight = _interopRequireDefault(require("./insight.js"));
 var _grid = _interopRequireDefault(require("./grid.js"));
 var _data = _interopRequireDefault(require("./data.js"));
+var _global = _interopRequireDefault(require("./global.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)()}
-  `;
+var _default = metaData => `${(0, _global.default)()}
+      ${(0, _data.default)(metaData)}
+      ${(0, _menuBar.default)()}
+      ${(0, _overview.default)()}
+      ${(0, _insight.default)()}
+      ${(0, _grid.default)()}`;
 exports.default = _default;