underpost 2.6.2

package/src/client/services/core/core.service.js

@@ -0,0 +1,152 @@
+import { Auth } from '../../components/core/Auth.js';
+import { loggerFactory } from '../../components/core/Logger.js';
+import { getProxyPath } from '../../components/core/VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+// https://developer.mozilla.org/en-US/docs/Web/API/AbortController
+const getBaseHost = () => location.host;
+
+const getApiBasePath = () => `${getProxyPath()}api/`;
+
+const getApiBaseUrl = (options = { id: '', endpoint: '' }) =>
+  `${location.protocol}//${getBaseHost()}${getApiBasePath()}${options?.endpoint ? options.endpoint : ''}${
+    options?.id ? `/${options.id}` : ''
+  }`;
+
+const getWsBasePath = () => (getProxyPath() !== '/' ? `${getProxyPath()}socket.io/` : undefined);
+
+const getWsBaseUrl = (options = { id: '', endpoint: '', wsBasePath: '' }) =>
+  `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${getBaseHost()}${
+    options?.wsBasePath !== undefined ? options.wsBasePath : getWsBasePath()
+  }${options?.endpoint ? options.endpoint : ''}${options?.id ? `/${options.id}` : ''}`;
+
+const headersFactory = (headerId = '') => {
+  const headers = { Authorization: Auth.getJWT() };
+  switch (headerId) {
+    case 'file':
+      return headers;
+
+    default:
+      headers['Content-Type'] = 'application/json';
+      return headers;
+  }
+};
+
+const payloadFactory = (body) => {
+  if (body instanceof FormData) return body;
+  return JSON.stringify(body);
+};
+
+logger.info('Load service');
+
+const endpoint = 'core';
+
+const CoreService = {
+  getRaw: (options = { url: '' }) =>
+    new Promise((resolve, reject) =>
+      fetch(options.url, {
+        method: 'GET',
+      })
+        .then(async (res) => {
+          return await res.text();
+        })
+        .then((res) => {
+          // logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  post: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'POST',
+        headers: headersFactory(),
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  put: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'PUT',
+        headers: headersFactory(),
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  get: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'GET',
+        headers: headersFactory(),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  delete: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'DELETE',
+        headers: headersFactory(),
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+};
+
+const ApiBase = getApiBaseUrl;
+
+export {
+  CoreService,
+  headersFactory,
+  payloadFactory,
+  getBaseHost,
+  getApiBasePath,
+  getApiBaseUrl,
+  getWsBasePath,
+  getWsBaseUrl,
+  ApiBase,
+};

package/src/client/services/crypto/crypto.service.js

@@ -0,0 +1,70 @@
+import { Auth } from '../../components/core/Auth.js';
+import { loggerFactory } from '../../components/core/Logger.js';
+import { getApiBaseUrl, headersFactory, payloadFactory } from '../core/core.service.js';
+
+const logger = loggerFactory(import.meta);
+
+logger.info('Load service');
+
+const endpoint = 'crypto';
+
+const CryptoService = {
+  post: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'POST',
+        headers: headersFactory(),
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  get: (options = { id: '' }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'GET',
+        headers: headersFactory(),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  delete: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'DELETE',
+        headers: headersFactory(),
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+};
+
+export { CryptoService };

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

@@ -0,0 +1,345 @@
+import { AgGrid } from '../../components/core/AgGrid.js';
+import { BtnIcon } from '../../components/core/BtnIcon.js';
+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 { NotificationManager } from '../../components/core/NotificationManager.js';
+import { Translate } from '../../components/core/Translate.js';
+import { s } from '../../components/core/VanillaJs.js';
+import { DefaultService } from './default.service.js';
+
+const logger = loggerFactory(import.meta);
+
+const DefaultOptions = {
+  idModal: 'modal-default-management',
+  serviceId: 'default-management',
+  entity: 'default',
+  columnDefs: [
+    { field: '0', headerName: '0' },
+    { field: '1', headerName: '1' },
+    { field: '2', headerName: '2' },
+    { field: 'createdAt', headerName: 'createdAt', cellDataType: 'date', editable: false },
+    { field: 'updatedAt', headerName: 'updatedAt', cellDataType: 'date', editable: false },
+  ],
+  defaultColKeyFocus: '0',
+  ServiceProvider: DefaultService,
+  permissions: {
+    add: true,
+    remove: true,
+  },
+};
+
+const columnDefFormatter = (obj, columnDefs, customFormat) => {
+  for (const colDef of columnDefs)
+    switch (colDef.cellDataType) {
+      case 'date':
+        obj[colDef.field] = obj[colDef.field] ? new Date(obj[colDef.field]) : new Date();
+        break;
+      case 'boolean':
+        if (obj[colDef.field] !== true && obj[colDef.field] !== false) obj[colDef.field] = false;
+      default:
+        break;
+    }
+  return customFormat ? customFormat(obj) : obj;
+};
+
+const DefaultManagement = {
+  Tokens: {},
+  RenderTable: async function (options = DefaultOptions) {
+    if (!options) options = DefaultOptions;
+    const { serviceId, columnDefs, entity, defaultColKeyFocus, ServiceProvider, permissions } = options;
+    logger.info('DefaultManagement RenderTable', options);
+    const id = options?.idModal ? options.idModal : getId(this.Tokens, `${serviceId}-`);
+    const gridId = `${serviceId}-grid-${id}`;
+    this.Tokens[id] = { gridId };
+
+    setTimeout(async () => {
+      // https://www.ag-grid.com/javascript-data-grid/data-update-transactions/
+
+      let rowDataScope = [];
+
+      class RemoveActionGridRenderer {
+        eGui;
+        tokens;
+
+        async init(params) {
+          this.eGui = document.createElement('div');
+          this.tokens = {};
+          const { rowIndex } = params;
+          const { createdAt, updatedAt } = params.data;
+
+          const cellRenderId = getId(this.tokens, `${serviceId}-`);
+          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>`,
+            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' };
+
+                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 },
+            );
+          });
+        }
+
+        getGui() {
+          return this.eGui;
+        }
+
+        refresh(params) {
+          return true;
+        }
+      }
+
+      AgGrid.grids[gridId].setGridOption(
+        'columnDefs',
+        columnDefs.concat(
+          permissions.remove
+            ? [
+                {
+                  field: 'remove-action',
+                  headerName: '',
+                  width: 100,
+                  cellRenderer: RemoveActionGridRenderer,
+                  editable: false,
+                },
+              ]
+            : [],
+        ),
+      );
+      {
+        const result = await ServiceProvider.get();
+        if (result.status === 'success') {
+          rowDataScope = result.data.reverse().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,
+          // });
+          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 },
+            // });
+          }
+
+          // https://www.ag-grid.com/javascript-data-grid/cell-editing-start-stop/
+
+          const pinned = undefined;
+          const key = undefined;
+
+          // setFocusedCell = (
+          //   rowIndex: number,
+          //   colKey: string  |  Column,
+          //   rowPinned?: RowPinnedType
+          // ) => void;
+
+          // type RowPinnedType =
+          //       'top'
+          //     | 'bottom'
+          //     | null
+          //     | undefined
+
+          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');
+
+          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 },
+      );
+    }, 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> `,
+          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>`,
+          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>`,
+          type: 'button',
+        })}
+      </div>
+      <div class="in section-mp">
+        ${await AgGrid.Render({
+          id: gridId,
+          darkTheme,
+          gridOptions: {
+            defaultColDef: {
+              flex: 1,
+              editable: true,
+              cellDataType: false,
+              minWidth: 100,
+              filter: true,
+              autoHeight: true,
+            },
+            editType: 'fullRow',
+            // rowData: [],
+            onCellValueChanged: async (...args) => {
+              console.log('onCellValueChanged', args);
+              // field: event.colDef.field,
+              // body[event.colDef.field] = event.newValue;
+              // NotificationManager.Push({
+              //   html:
+              //     result.status === 'error'
+              //       ? result.message
+              //       : `${Translate.Render('field')} ${event.colDef.headerName} ${Translate.Render('success-updated')}`,
+              //   status: result.status,
+              // });
+            },
+            rowSelection: 'single',
+            onSelectionChanged: async (...args) => {
+              console.log('onSelectionChanged', args);
+              const [event] = args;
+              const selectedRows = AgGrid.grids[gridId].getSelectedRows();
+              logger.info('selectedRows', selectedRows);
+            },
+            onRowValueChanged: async (...args) => {
+              const [event] = args;
+              logger.info('onRowValueChanged', args);
+              let result;
+              if (options.onRowValueChanged) {
+                const { status, data, message } = await options.onRowValueChanged(...args);
+                if (status === 'success' && data) event.data = data;
+                else {
+                  NotificationManager.Push({
+                    html: message,
+                    status,
+                  });
+                  return;
+                }
+              }
+              if (!event.data._id) {
+                result = await ServiceProvider.post({ body: event.data });
+                NotificationManager.Push({
+                  html: result.status === 'error' ? result.message : `${Translate.Render('success-create-item')}`,
+                  status: result.status,
+                });
+                if (result.status === 'success') {
+                  event.data._id = result.data[entity] ? result.data[entity]._id : result.data._id;
+                }
+              } else {
+                const body = event.data ? event.data : {};
+                result = await ServiceProvider.put({ id: event.data._id, body });
+                NotificationManager.Push({
+                  html: result.status === 'error' ? result.message : `${Translate.Render('success-update-item')}`,
+                  status: result.status,
+                });
+              }
+              if (result.status === 'success') {
+                AgGrid.grids[gridId].applyTransaction({
+                  update: [event.data],
+                });
+              }
+            },
+          },
+        })}
+      </div>`;
+  },
+};
+
+export { DefaultManagement };

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

@@ -0,0 +1,89 @@
+import { Auth } from '../../components/core/Auth.js';
+import { loggerFactory } from '../../components/core/Logger.js';
+import { getApiBaseUrl, headersFactory, payloadFactory } from '../core/core.service.js';
+
+const logger = loggerFactory(import.meta);
+
+logger.info('Load service');
+
+const endpoint = 'default';
+
+const DefaultService = {
+  post: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'POST',
+        headers: headersFactory(),
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  put: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'PUT',
+        headers: headersFactory(),
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  get: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'GET',
+        headers: headersFactory(),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  delete: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'DELETE',
+        headers: headersFactory(),
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+};
+
+export { DefaultService };