underpost 2.7.7 → 2.7.8

package/src/client/services/default/default.management.js

@@ -4,6 +4,7 @@ import { getId, timer } from '../../components/core/CommonJs.js';
 import { darkTheme } from '../../components/core/Css.js';
 import { EventsUI } from '../../components/core/EventsUI.js';
 import { loggerFactory } from '../../components/core/Logger.js';
+import { Modal } from '../../components/core/Modal.js';
 import { NotificationManager } from '../../components/core/NotificationManager.js';
 import { Translate } from '../../components/core/Translate.js';
 import { s } from '../../components/core/VanillaJs.js';
@@ -73,35 +74,40 @@ const DefaultManagement = {
           this.tokens[cellRenderId] = {};
 
           this.eGui.innerHTML = html` ${await BtnIcon.Render({
-            label: html`<div class="abs center btn-remove-${id}-${cellRenderId}-label">
-                <i class="fas fa-times"></i>
-              </div>
-              <div class="abs center btn-remove-${id}-${cellRenderId}-loading hide">
-                <div class="lds-dual-ring-mini"></div>
-              </div>`,
+            label: html`<div class="abs center">
+              <i class="fas fa-times"></i>
+            </div> `,
             class: `in fll section-mp management-table-btn-mini management-table-btn-remove-${id}-${cellRenderId}`,
           })}`;
           setTimeout(() => {
-            EventsUI.onClick(
-              `.management-table-btn-remove-${id}-${cellRenderId}`,
-              async () => {
-                s(`.btn-remove-${id}-${cellRenderId}-label`).classList.add('hide');
-                s(`.btn-remove-${id}-${cellRenderId}-loading`).classList.remove('hide');
-
-                let result;
-                if (params.data._id) result = await ServiceProvider.delete({ id: params.data._id });
-                else result = { status: 'success' };
+            EventsUI.onClick(`.management-table-btn-remove-${id}-${cellRenderId}`, async () => {
+              const confirmResult = await Modal.RenderConfirm({
+                html: async () => {
+                  return html`
+                    <div class="in section-mp" style="text-align: center">
+                      ${Translate.Render('confirm-delete-item')}
+                      ${Object.keys(params.data).length > 0
+                        ? html`<br />
+                            "${params.data[Object.keys(params.data)[0]]}"`
+                        : ''}
+                    </div>
+                  `;
+                },
+                id: `delete-${params.data._id}`,
+              });
+              if (confirmResult.status !== 'confirm') return;
+              let result;
+              if (params.data._id) result = await ServiceProvider.delete({ id: params.data._id });
+              else result = { status: 'success' };
 
-                NotificationManager.Push({
-                  html: result.status === 'error' ? result.message : Translate.Render('item-success-delete'),
-                  status: result.status,
-                });
-                if (result.status === 'success') {
-                  AgGrid.grids[gridId].applyTransaction({ remove: [params.data] });
-                }
-              },
-              { disableSpinner: true },
-            );
+              NotificationManager.Push({
+                html: result.status === 'error' ? result.message : Translate.Render('item-success-delete'),
+                status: result.status,
+              });
+              if (result.status === 'success') {
+                AgGrid.grids[gridId].applyTransaction({ remove: [params.data] });
+              }
+            });
           });
         }
 
@@ -133,134 +139,126 @@ const DefaultManagement = {
       {
         const result = await ServiceProvider.get();
         if (result.status === 'success') {
-          rowDataScope = result.data.reverse().map((row) => columnDefFormatter(row, columnDefs, options.customFormat));
+          rowDataScope = result.data.map((row) => columnDefFormatter(row, columnDefs, options.customFormat));
           AgGrid.grids[gridId].setGridOption('rowData', rowDataScope);
         }
       }
       s(`.management-table-btn-save-${id}`).onclick = () => {
         AgGrid.grids[gridId].stopEditing();
       };
-      EventsUI.onClick(
-        `.management-table-btn-add-${id}`,
-        async () => {
-          s(`.btn-add-${id}-label`).classList.add('hide');
-          s(`.btn-add-${id}-loading`).classList.remove('hide');
-          const rowObj = {};
-          for (const def of columnDefs) {
-            rowObj[def.field] = '';
-          }
-          // const result = await ServiceProvider.post({ body: rowObj });
-          const result = {
-            status: 'success',
-            data: rowObj,
-          };
-          // NotificationManager.Push({
-          //   html: result.status === 'error' ? result.message : `${Translate.Render('success-create-item')}`,
-          //   status: result.status,
+      EventsUI.onClick(`.management-table-btn-add-${id}`, async () => {
+        const rowObj = {};
+        for (const def of columnDefs) {
+          rowObj[def.field] = '';
+        }
+        // const result = await ServiceProvider.post({ body: rowObj });
+        const result = {
+          status: 'success',
+          data: rowObj,
+        };
+        // NotificationManager.Push({
+        //   html: result.status === 'error' ? result.message : `${Translate.Render('success-create-item')}`,
+        //   status: result.status,
+        // });
+        if (result.status === 'success') {
+          AgGrid.grids[gridId].applyTransaction({
+            add: [columnDefFormatter(result.data, columnDefs, options.customFormat)],
+            addIndex: 0,
+          });
+          // AgGrid.grids[gridId].applyColumnState({
+          //   state: [
+          //     // { colId: 'country', sort: 'asc', sortIndex: 1 },
+          //     { colId: 'updatedAt', sort: 'desc', sortIndex: 0 },
+          //   ],
+          //   defaultState: { sort: null },
           // });
-          if (result.status === 'success') {
-            AgGrid.grids[gridId].applyTransaction({
-              add: [columnDefFormatter(result.data, columnDefs, options.customFormat)],
-              addIndex: 0,
-            });
-            // AgGrid.grids[gridId].applyColumnState({
-            //   state: [
-            //     // { colId: 'country', sort: 'asc', sortIndex: 1 },
-            //     { colId: 'updatedAt', sort: 'desc', sortIndex: 0 },
-            //   ],
-            //   defaultState: { sort: null },
-            // });
-          } else {
-            // AgGrid.grids[gridId].applyColumnState({
-            //   defaultState: { sort: null },
-            // });
-          }
+        } else {
+          // AgGrid.grids[gridId].applyColumnState({
+          //   defaultState: { sort: null },
+          // });
+        }
 
-          // https://www.ag-grid.com/javascript-data-grid/cell-editing-start-stop/
+        // https://www.ag-grid.com/javascript-data-grid/cell-editing-start-stop/
 
-          const pinned = undefined;
-          const key = undefined;
+        const pinned = undefined;
+        const key = undefined;
 
-          // setFocusedCell = (
-          //   rowIndex: number,
-          //   colKey: string  |  Column,
-          //   rowPinned?: RowPinnedType
-          // ) => void;
+        // setFocusedCell = (
+        //   rowIndex: number,
+        //   colKey: string  |  Column,
+        //   rowPinned?: RowPinnedType
+        // ) => void;
 
-          // type RowPinnedType =
-          //       'top'
-          //     | 'bottom'
-          //     | null
-          //     | undefined
+        // type RowPinnedType =
+        //       'top'
+        //     | 'bottom'
+        //     | null
+        //     | undefined
 
-          AgGrid.grids[gridId].setFocusedCell(0, '0', pinned);
+        AgGrid.grids[gridId].setFocusedCell(0, '0', pinned);
 
-          // interface StartEditingCellParams {
-          //   // The row index of the row to start editing
-          //   rowIndex: number;
-          //   // The column key of the row to start editing
-          //   colKey: string  |  Column;
-          //   // Set to `'top'` or `'bottom'` to start editing a pinned row
-          //   rowPinned?: RowPinnedType;
-          //   // The key to pass to the cell editor
-          //   key?: string;
-          // }
-          s(`.btn-add-${id}-loading`).classList.add('hide');
-          s(`.btn-add-${id}-label`).classList.remove('hide');
+        // interface StartEditingCellParams {
+        //   // The row index of the row to start editing
+        //   rowIndex: number;
+        //   // The column key of the row to start editing
+        //   colKey: string  |  Column;
+        //   // Set to `'top'` or `'bottom'` to start editing a pinned row
+        //   rowPinned?: RowPinnedType;
+        //   // The key to pass to the cell editor
+        //   key?: string;
+        // }
 
-          setTimeout(() => {
-            AgGrid.grids[gridId].startEditingCell({
-              rowIndex: 0,
-              colKey: defaultColKeyFocus,
-              rowPinned: pinned,
-              key: key,
-            });
+        setTimeout(() => {
+          AgGrid.grids[gridId].startEditingCell({
+            rowIndex: 0,
+            colKey: defaultColKeyFocus,
+            rowPinned: pinned,
+            key: key,
           });
-        },
-        { disableSpinner: true },
-      );
-      EventsUI.onClick(
-        `.management-table-btn-clean-${id}`,
-        async () => {
-          s(`.btn-clean-${id}-label`).classList.add('hide');
-          s(`.btn-clean-${id}-loading`).classList.remove('hide');
-          const result = await ServiceProvider.delete();
-          NotificationManager.Push({
-            html: result.status === 'error' ? result.message : Translate.Render('success-delete-all-items'),
-            status: result.status,
-          });
-          if (result.status === 'success') {
-            AgGrid.grids[gridId].setGridOption('rowData', []);
-          }
-          s(`.btn-clean-${id}-loading`).classList.add('hide');
-          s(`.btn-clean-${id}-label`).classList.remove('hide');
-        },
-        { disableSpinner: true },
-      );
+        });
+      });
+      EventsUI.onClick(`.management-table-btn-clean-${id}`, async () => {
+        const confirmResult = await Modal.RenderConfirm({
+          html: async () => {
+            return html`
+              <div class="in section-mp" style="text-align: center;">
+                <strong>${Translate.Render('confirm-delete-all-data')}</strong>
+              </div>
+            `;
+          },
+          id: `clean-table-${id}`,
+        });
+        if (confirmResult.status === 'cancelled') return;
+        const result = await ServiceProvider.delete();
+        NotificationManager.Push({
+          html: result.status === 'error' ? result.message : Translate.Render('success-delete-all-items'),
+          status: result.status,
+        });
+        if (result.status === 'success') {
+          AgGrid.grids[gridId].setGridOption('rowData', []);
+        }
+      });
     }, 1);
     return html`<div class="fl">
         ${await BtnIcon.Render({
           class: `in fll section-mp management-table-btn-mini management-table-btn-add-${id} ${
             permissions.add ? '' : 'hide'
           }`,
-          label: html`<div class="abs center btn-add-${id}-label"><i class="fa-solid fa-circle-plus"></i></div>
-            <div class="abs center btn-add-${id}-loading hide"><div class="lds-dual-ring-mini"></div></div> `,
+          label: html`<div class="abs center btn-add-${id}-label"><i class="fa-solid fa-circle-plus"></i></div> `,
           type: 'button',
         })}
         ${await BtnIcon.Render({
           class: `in fll section-mp management-table-btn-mini management-table-btn-save-${id} ${
             permissions.add ? '' : 'hide'
           }`,
-          label: html`<div class="abs center btn-save-${id}-label"><i class="fas fa-save"></i></div>
-            <div class="abs center btn-save-${id}-loading hide"><div class="lds-dual-ring-mini"></div></div>`,
+          label: html`<div class="abs center btn-save-${id}-label"><i class="fas fa-save"></i></div> `,
           type: 'button',
         })}
         ${await BtnIcon.Render({
           class: `in fll section-mp management-table-btn-mini management-table-btn-clean-${id} ${
             permissions.remove ? '' : 'hide'
           }`,
-          label: html`<div class="abs center btn-clean-${id}-label"><i class="fas fa-broom"></i></div>
-            <div class="abs center btn-clean-${id}-loading hide"><div class="lds-dual-ring-mini"></div></div>`,
+          label: html`<div class="abs center btn-clean-${id}-label"><i class="fas fa-broom"></i></div> `,
           type: 'button',
         })}
       </div>

package/src/client/ssr/Render.js

@@ -1,4 +1,4 @@
-Render = ({ title, ssrPath, buildId, ssrHeadComponents, ssrBodyComponents }) => html`
+Render = ({ title, ssrPath, buildId, ssrHeadComponents, ssrBodyComponents, baseSsrLib }) => html`
   <!DOCTYPE html>
   <html dir="ltr" lang="en">
     <head>
@@ -9,8 +9,229 @@ Render = ({ title, ssrPath, buildId, ssrHeadComponents, ssrBodyComponents }) =>
       ${ssrHeadComponents}
     </head>
     <body>
-      ${ssrBodyComponents}
-      <script async type="module" src="./${buildId}.js"></script>
+      <style>
+        html {
+          scroll-behavior: smooth;
+        }
+
+        body {
+          /* overscroll-behavior: contain; */
+          /* box-sizing: border-box; */
+          padding: 0px;
+          margin: 0px;
+        }
+
+        .fl {
+          position: relative;
+          display: flow-root;
+        }
+
+        .abs,
+        .in {
+          display: block;
+        }
+
+        .fll {
+          float: left;
+        }
+
+        .flr {
+          float: right;
+        }
+
+        .abs {
+          position: absolute;
+        }
+
+        .in,
+        .inl {
+          position: relative;
+        }
+
+        .inl {
+          display: inline-table;
+          display: -webkit-inline-table;
+          display: -moz-inline-table;
+          display: -ms-inline-table;
+          display: -o-inline-table;
+        }
+
+        .fix {
+          position: fixed;
+          display: block;
+        }
+
+        .stq {
+          position: sticky;
+          /* require defined at least top, bottom, left o right */
+        }
+
+        .wfa {
+          width: available;
+          width: -webkit-available;
+          width: -moz-available;
+          width: -ms-available;
+          width: -o-available;
+
+          width: fill-available;
+          width: -webkit-fill-available;
+          width: -moz-fill-available;
+          width: -ms-fill-available;
+          width: -o-fill-available;
+        }
+
+        .wft {
+          width: fit-content;
+          width: -webkit-fit-content;
+          width: -moz-fit-content;
+          width: -ms-fit-content;
+          width: -o-fit-content;
+        }
+
+        .wfm {
+          width: max-content;
+          width: -webkit-max-content;
+          width: -moz-max-content;
+          width: -ms-max-content;
+          width: -o-max-content;
+        }
+
+        .negative-color {
+          filter: invert(1);
+          -webkit-filter: invert(1);
+          -moz-filter: invert(1);
+          -ms-filter: invert(1);
+          -o-filter: invert(1);
+        }
+
+        .no-drag {
+          user-drag: none;
+          -webkit-user-drag: none;
+          -moz-user-drag: none;
+          -ms-user-drag: none;
+          -o-user-drag: none;
+          user-select: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          -o-user-select: none;
+        }
+
+        .center {
+          transform: translate(-50%, -50%);
+          top: 50%;
+          left: 50%;
+          width: 100%;
+          text-align: center;
+        }
+
+        input {
+          outline: none !important;
+          border: none;
+          padding-block: 0;
+          padding-inline: 0;
+        }
+        input::file-selector-button {
+          outline: none !important;
+          border: none;
+        }
+
+        .hide {
+          display: none !important;
+        }
+        /*
+
+placeholder
+
+*/
+
+        ::placeholder {
+          color: black;
+          opacity: 1;
+          /* Firefox */
+          background: none;
+        }
+
+        :-ms-input-placeholder {
+          /* Internet Explorer 10-11 */
+          color: black;
+          background: none;
+        }
+
+        ::-ms-input-placeholder {
+          /* Microsoft Edge */
+          color: black;
+          background: none;
+        }
+
+        /*
+
+selection
+
+*/
+
+        ::-moz-selection {
+          /* Code for Firefox */
+          color: black;
+          background: rgb(208, 208, 208);
+        }
+
+        ::selection {
+          color: black;
+          background: rgb(208, 208, 208);
+        }
+
+        .lowercase {
+          text-transform: lowercase;
+        }
+        .uppercase {
+          text-transform: uppercase;
+        }
+        .capitalize {
+          text-transform: capitalize;
+        }
+
+        .bold {
+          font-weight: bold;
+        }
+
+        .m {
+          font-family: monospace;
+        }
+
+        .gray {
+          filter: grayscale(1);
+        }
+      </style>
+      <div class="session">
+        <style>
+          .session-in-log-out {
+            display: block;
+          }
+          .session-inl-log-out {
+            display: inline-table;
+          }
+          .session-fl-log-out {
+            display: flow-root;
+          }
+          .session-in-log-in {
+            display: none;
+          }
+          .session-inl-log-in {
+            display: none;
+          }
+          .session-fl-log-in {
+            display: none;
+          }
+        </style>
+      </div>
+      <div class="theme"></div>
+      ${baseSsrLib
+        ? html`<script>
+            ${baseSsrLib};
+          </script>`
+        : ''}
+      ${ssrBodyComponents} ${buildId ? html`<script async type="module" src="./${buildId}.js"></script>` : ''}
     </body>
   </html>
 `;

package/src/client/ssr/common/Alert.js

@@ -0,0 +1,75 @@
+const maintenance = async ({ Translate }) => {
+  const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24">
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm9 13H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h10.5m-.5 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V16m0 4v1.5m3.032-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75M7 8v.01M7 16v.01"
+    />
+  </svg>`;
+  return html` <div class="abs center" style="top: 45%">
+    ${icon}
+    <br />
+    <br />${Translate('server-maintenance')}
+  </div>`;
+};
+
+const noInternet = async ({ Translate }) => {
+  const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20">
+    <path
+      fill="currentColor"
+      d="M10 18q.128 0 .254-.004a5.5 5.5 0 0 1-.698-1.083c-.536-.207-1.098-.793-1.578-1.821A9.3 9.3 0 0 1 7.42 13.5h1.672q.096-.52.284-1h-2.17A15 15 0 0 1 7 10c0-.883.073-1.725.206-2.5h5.588c.092.541.156 1.115.186 1.713q.48-.138.992-.188a16 16 0 0 0-.165-1.525h2.733c.251.656.406 1.36.448 2.094q.543.276 1.008.66A8 8 0 1 0 10 18m0-15c.657 0 1.407.59 2.022 1.908c.217.466.406 1.002.559 1.592H7.419c.153-.59.342-1.126.56-1.592C8.592 3.59 9.342 3 10 3M7.072 4.485A10.5 10.5 0 0 0 6.389 6.5H3.936a7.02 7.02 0 0 1 3.778-3.118c-.241.33-.456.704-.642 1.103M6.192 7.5A16 16 0 0 0 6 10c0 .87.067 1.712.193 2.5H3.46A7 7 0 0 1 3 10c0-.88.163-1.724.46-2.5zm.197 6c.176.743.407 1.422.683 2.015c.186.399.401.773.642 1.103A7.02 7.02 0 0 1 3.936 13.5zm5.897-10.118A7.02 7.02 0 0 1 16.064 6.5H13.61a10.5 10.5 0 0 0-.683-2.015a6.6 6.6 0 0 0-.642-1.103M19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0M14.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5m0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25"
+    />
+  </svg>`;
+  return html` <div class="abs center" style="top: 45%">
+    ${icon}
+    <br />
+    <br />${Translate('no-internet-connection')}
+  </div>`;
+};
+
+const e404 = async ({ Translate }) => {
+  const icon = html`
+    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        d="M15.097 5.904A6.5 6.5 0 0 0 4 10.504l.001 1h-2v-1a8.5 8.5 0 1 1 15.176 5.258l5.344 5.345l-1.414 1.414l-5.344-5.345A8.48 8.48 0 0 1 10.5 19h-1v-2h1a6.5 6.5 0 0 0 4.596-11.096M1.672 13.257L4.5 16.086l2.829-2.829l1.414 1.415L5.915 17.5l2.828 2.828l-1.414 1.415L4.5 18.914l-2.828 2.829l-1.414-1.415L3.086 17.5L.258 14.672z"
+      />
+    </svg>
+  `;
+  return html` <div class="abs center" style="top: 45%">
+    ${icon}
+    <br />
+    <br />
+    <span class="bold">404</span>
+    <br />
+    <br />${Translate('page-not-found')} <br />
+    <br />
+    <a href="${location.origin}">${Translate('back')}</a>
+  </div>`;
+};
+
+const e500 = async ({ Translate }) => {
+  const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20">
+    <path
+      fill="currentColor"
+      d="M6 2a2 2 0 0 0-2 2v5.207a5.5 5.5 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.5 5.5 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207zM10 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0M5.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5m0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25"
+    />
+  </svg>`;
+  return html` <div class="abs center" style="top: 45%">
+    ${icon}
+    <br />
+    <br />
+    <span class="bold">500</span>
+    <br />
+    <br />${Translate('page-broken')} <br />
+    <br />
+    <a href="${location.origin}">${Translate('back')}</a>
+  </div>`;
+};
+
+const Alert = { maintenance, noInternet, e404, e500 };
+
+export { Alert, e404 };