@underpostnet/underpost 2.7.9

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

@@ -0,0 +1,170 @@
+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() }; // , mode: 'no-cors'
+  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);
+        }),
+    ),
+  getRandomImage: (options = { category: ['city'], mimetype: 'image/jpg' }) => {
+    const src = `https://api.api-ninjas.com/v1/randomimage?category=${options.category[0]}`;
+    return new Promise((resolve) => {
+      fetch(src, {
+        headers: { 'X-Api-Key': 'FyITmcxRXkCaUehbX6K0/g==uxZcFKL0dZUUg48G', Accept: options.mimetype },
+      })
+        .then((res) => res.blob())
+        .then(async (blob) => {
+          return resolve({
+            file: {
+              mimetype: 'image/jpg',
+              name: 'image.jpg',
+            },
+            url: URL.createObjectURL(blob),
+          });
+        });
+    });
+  },
+  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,343 @@
+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 { 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';
+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">
+              <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 () => {
+              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] });
+              }
+            });
+          });
+        }
+
+        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.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 () => {
+        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;
+        // }
+
+        setTimeout(() => {
+          AgGrid.grids[gridId].startEditingCell({
+            rowIndex: 0,
+            colKey: defaultColKeyFocus,
+            rowPinned: pinned,
+            key: key,
+          });
+        });
+      });
+      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> `,
+          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> `,
+          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> `,
+          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 };