underpost 2.8.872 → 2.8.874

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

@@ -7,6 +7,7 @@ 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 { getQueryParams, RouterEvents, setQueryParams } from '../../components/core/Router.js';
 import { s } from '../../components/core/VanillaJs.js';
 import { DefaultService } from './default.service.js';
 
@@ -47,19 +48,48 @@ const columnDefFormatter = (obj, columnDefs, customFormat) => {
 
 const DefaultManagement = {
   Tokens: {},
+  loadTable: async function (id, options = { reload: true }) {
+    const { serviceId, columnDefs, customFormat } = this.Tokens[id];
+    const result = await this.Tokens[id].ServiceProvider.get({
+      page: this.Tokens[id].page,
+      limit: this.Tokens[id].limit,
+      id: this.Tokens[id].serviceOptions?.get?.id ?? undefined,
+    });
+    if (result.status === 'success') {
+      const { data, total, page, totalPages } = result.data;
+      this.Tokens[id].total = total;
+      this.Tokens[id].page = page;
+      this.Tokens[id].totalPages = totalPages;
+      const rowDataScope = data.map((row) => columnDefFormatter(row, columnDefs, customFormat));
+      if (options.reload) AgGrid.grids[this.Tokens[id].gridId].setGridOption('rowData', rowDataScope);
+      const paginationComp = s(`#ag-pagination-${this.Tokens[id].gridId}`);
+      paginationComp.setAttribute('current-page', this.Tokens[id].page);
+      paginationComp.setAttribute('total-pages', this.Tokens[id].totalPages);
+      paginationComp.setAttribute('total-items', this.Tokens[id].total);
+    }
+  },
   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 };
+    const queryParams = getQueryParams();
+    const page = parseInt(queryParams.page) || 1;
+    const limit = parseInt(queryParams.limit) || 10;
+    this.Tokens[id] = {
+      ...options,
+      gridId,
+      page,
+      limit,
+      total: 0,
+      totalPages: 1,
+    };
 
+    setQueryParams({ page, limit });
     setTimeout(async () => {
       // https://www.ag-grid.com/javascript-data-grid/data-update-transactions/
 
-      let rowDataScope = [];
-
       class RemoveActionGridRenderer {
         eGui;
         tokens;
@@ -110,6 +140,16 @@ const DefaultManagement = {
                 });
                 if (result.status === 'success') {
                   AgGrid.grids[gridId].applyTransaction({ remove: [params.data] });
+                  const token = DefaultManagement.Tokens[id];
+                  // if we are on the last page and we delete the last item, go to the previous page
+                  const newTotal = token.total - 1;
+                  const newTotalPages = Math.ceil(newTotal / token.limit);
+                  if (token.page > newTotalPages && newTotalPages > 0) {
+                    token.page = newTotalPages;
+                  }
+
+                  // reload the current page
+                  await DefaultManagement.loadTable(id, { reload: false });
                 }
               },
               { context: 'modal' },
@@ -142,13 +182,14 @@ const DefaultManagement = {
             : [],
         ),
       );
-      {
-        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);
-        }
-      }
+      DefaultManagement.loadTable(id);
+      // {
+      //   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();
       };
@@ -168,9 +209,13 @@ const DefaultManagement = {
         // });
         if (result.status === 'success') {
           AgGrid.grids[gridId].applyTransaction({
-            add: [columnDefFormatter(result.data, columnDefs, options.customFormat)],
+            add: [columnDefFormatter(rowObj, columnDefs, options.customFormat)],
             addIndex: 0,
           });
+          // AgGrid.grids[gridId].applyTransaction({
+          //   add: [columnDefFormatter(result.data, columnDefs, options.customFormat)],
+          //   addIndex: 0,
+          // });
           // AgGrid.grids[gridId].applyColumnState({
           //   state: [
           //     // { colId: 'country', sort: 'asc', sortIndex: 1 },
@@ -244,9 +289,34 @@ const DefaultManagement = {
           status: result.status,
         });
         if (result.status === 'success') {
-          AgGrid.grids[gridId].setGridOption('rowData', []);
+          DefaultManagement.loadTable(id);
         }
       });
+      s(`#ag-pagination-${gridId}`).addEventListener('page-change', async (event) => {
+        const token = DefaultManagement.Tokens[id];
+        token.page = event.detail.page;
+        await DefaultManagement.loadTable(id);
+      });
+      s(`#ag-pagination-${gridId}`).addEventListener('limit-change', async (event) => {
+        const token = DefaultManagement.Tokens[id];
+        token.limit = event.detail.limit;
+        token.page = 1; // Reset to first page
+        await DefaultManagement.loadTable(id);
+      });
+      RouterEvents[id] = async (...args) => {
+        const queryParams = getQueryParams();
+        const page = parseInt(queryParams.page) || 1;
+        const limit = parseInt(queryParams.limit) || 10;
+        const token = DefaultManagement.Tokens[id];
+
+        // Check if the pagination state in the URL is different from the current state
+        if (token.page !== page || token.limit !== limit) {
+          token.page = page;
+          token.limit = limit;
+          // Reload the table with the new pagination state from the URL
+          await DefaultManagement.loadTable(id);
+        }
+      };
     }, 1);
     return html`<div class="fl">
         ${await BtnIcon.Render({
@@ -274,6 +344,7 @@ const DefaultManagement = {
       <div class="in section-mp">
         ${await AgGrid.Render({
           id: gridId,
+          usePagination: true,
           darkTheme,
           gridOptions: {
             defaultColDef: {
@@ -327,7 +398,32 @@ const DefaultManagement = {
                   status: result.status,
                 });
                 if (result.status === 'success') {
-                  event.data._id = result.data[entity] ? result.data[entity]._id : result.data._id;
+                  this.Tokens[id].page = 1;
+                  await DefaultManagement.loadTable(id);
+                  // const newItemId = result.data?.[entity]?._id || result.data?._id;
+                  // The `event.node.id` is the temporary ID assigned by AG Grid.
+                  // const rowNode = AgGrid.grids[gridId].getRowNode(event.node.id);
+                  setQueryParams({ page: 1, limit: this.Tokens[id].limit });
+
+                  let rowNode;
+                  AgGrid.grids[gridId].forEachLeafNode((_rowNode) => {
+                    if (_rowNode.data._id === result.data._id) {
+                      rowNode = _rowNode;
+                    }
+                  });
+                  if (rowNode) {
+                    const newRow = columnDefFormatter(result.data, columnDefs, options.customFormat);
+                    // Add a temporary flag to the new row data.
+                    newRow._new = true;
+                    // Update the row data with the data from the server, which includes the new permanent `_id`.
+                    rowNode.setData(newRow);
+                    // The `rowClassRules` will automatically apply the 'row-new-highlight' class.
+                    // Now, remove the flag after a delay to remove the highlight.
+                    // setTimeout(() => {
+                    //   delete newRow._new;
+                    //   rowNode.setData(newRow);
+                    // }, 2000);
+                  }
                 }
               } else {
                 const body = event.data ? event.data : {};
@@ -336,11 +432,12 @@ const DefaultManagement = {
                   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],
-                });
+                if (result.status === 'success') {
+                  AgGrid.grids[gridId].applyTransaction({
+                    update: [event.data],
+                  });
+                  DefaultManagement.loadTable(id, { reload: false });
+                }
               }
             },
           },

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

@@ -47,9 +47,13 @@ const DefaultService = {
           return reject(error);
         }),
     ),
-  get: (options = { id: '', body: {} }) =>
-    new Promise((resolve, reject) =>
-      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+  get: (options = { id: '', body: {}, page: 1, limit: 10 }) => {
+    const { id, page, limit } = options;
+    const url = new URL(getApiBaseUrl({ id, endpoint }));
+    url.searchParams.append('page', page);
+    url.searchParams.append('limit', limit);
+    return new Promise((resolve, reject) =>
+      fetch(url.toString(), {
         method: 'GET',
         headers: headersFactory(),
       })
@@ -64,7 +68,8 @@ const DefaultService = {
           logger.error(error);
           return reject(error);
         }),
-    ),
+    );
+  },
   delete: (options = { id: '', body: {} }) =>
     new Promise((resolve, reject) =>
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {

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

@@ -13,6 +13,7 @@ const UserManagement = {
         add: role === 'admin',
         remove: role === 'admin',
       },
+      usePagination: true,
       columnDefs: [
         { field: 'username', headerName: 'username', editable: role === 'admin' },
         { field: 'email', headerName: 'email', editable: role === 'admin' },
@@ -44,6 +45,11 @@ const UserManagement = {
       ],
       defaultColKeyFocus: 'username',
       ServiceProvider: UserService,
+      serviceOptions: {
+        get: {
+          id: 'all',
+        },
+      },
     });
   },
 };

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

@@ -36,9 +36,15 @@ const UserService = {
           return reject(error);
         }),
     ),
-  get: (options = { id: '' }) =>
-    new Promise((resolve, reject) =>
-      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+  get: (options = { id: '', page: 1, limit: 10 }) => {
+    const { id = '', page, limit } = options;
+    const query = new URLSearchParams();
+    if (page) query.set('page', page);
+    if (limit) query.set('limit', limit);
+    const queryString = query.toString();
+    const url = `${getApiBaseUrl({ id, endpoint })}${queryString ? (id.includes('?') ? '&' : '?') + queryString : ''}`;
+    return new Promise((resolve, reject) =>
+      fetch(url, {
         method: 'GET',
         headers: headersFactory(),
       })
@@ -53,7 +59,8 @@ const UserService = {
           logger.error(error);
           return reject(error);
         }),
-    ),
+    );
+  },
   delete: (options = { id: '', body: {} }) =>
     new Promise((resolve, reject) =>
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {

package/src/index.js

@@ -35,7 +35,7 @@ class Underpost {
    * @type {String}
    * @memberof Underpost
    */
-  static version = 'v2.8.872';
+  static version = 'v2.8.874';
   /**
    * Repository cli API
    * @static
@@ -171,6 +171,28 @@ const up = Underpost;
 
 const underpost = Underpost;
 
-export { underpost, up, Underpost };
+export {
+  underpost,
+  up,
+  Underpost,
+  UnderpostBaremetal,
+  UnderpostCloudInit,
+  UnderpostCluster,
+  UnderpostCron,
+  UnderpostDB,
+  UnderpostDeploy,
+  UnderpostRootEnv,
+  UnderpostFileStorage,
+  UnderpostImage,
+  UnderpostLxd,
+  UnderpostMonitor,
+  UnderpostRepository,
+  UnderpostRun,
+  UnderpostScript,
+  UnderpostSecret,
+  UnderpostSSH,
+  UnderpostTest,
+  UnderpostStartUp,
+};
 
 export default Underpost;

package/src/runtime/lampp/Lampp.js

@@ -1,6 +1,5 @@
 import fs from 'fs-extra';
-import { shellCd, shellExec } from '../../server/process.js';
-import { timer } from '../../client/components/core/CommonJs.js';
+import { getRootDirectory, shellCd, shellExec } from '../../server/process.js';
 import { loggerFactory } from '../../server/logger.js';
 
 const logger = loggerFactory(import.meta);
@@ -107,6 +106,94 @@ const Lampp = {
         break;
     }
   },
+  createApp: async ({ port, host, path, directory, rootHostPath, redirect, redirectTarget, resetRouter }) => {
+    if (!Lampp.enabled()) return { disabled: true };
+    if (!Lampp.ports.includes(port)) Lampp.ports.push(port);
+    if (resetRouter) Lampp.removeRouter();
+    Lampp.appendRouter(`
+Listen ${port}
+
+<VirtualHost *:${port}>
+  DocumentRoot "${directory ? directory : `${getRootDirectory()}${rootHostPath}`}"
+  ServerName ${host}:${port}
+
+  <Directory "${directory ? directory : `${getRootDirectory()}${rootHostPath}`}">
+    Options Indexes FollowSymLinks MultiViews
+    AllowOverride All
+    Require all granted
+  </Directory>
+
+  ${
+    redirect
+      ? `
+    RewriteEngine on
+
+    RewriteCond %{REQUEST_URI} !^/.well-known/acme-challenge
+    RewriteRule ^(.*)$ ${redirectTarget}%{REQUEST_URI} [R=302,L]
+  `
+      : ''
+  }
+
+  ErrorDocument 400 ${path === '/' ? '' : path}/400.html
+  ErrorDocument 404 ${path === '/' ? '' : path}/400.html
+  ErrorDocument 500 ${path === '/' ? '' : path}/500.html
+  ErrorDocument 502 ${path === '/' ? '' : path}/500.html
+  ErrorDocument 503 ${path === '/' ? '' : path}/500.html
+  ErrorDocument 504 ${path === '/' ? '' : path}/500.html
+
+</VirtualHost>
+            
+`);
+    // ERR too many redirects:
+    // Check: SELECT * FROM database.wp_options where option_name = 'siteurl' or option_name = 'home';
+    // Check: wp-config.php
+    // if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
+    //   $_SERVER['HTTPS'] = 'on';
+    // }
+    // For plugins:
+    // define( 'FS_METHOD', 'direct' );
+
+    // ErrorDocument 404 /custom_404.html
+    // ErrorDocument 500 /custom_50x.html
+    // ErrorDocument 502 /custom_50x.html
+    // ErrorDocument 503 /custom_50x.html
+    // ErrorDocument 504 /custom_50x.html
+
+    // Respond When Error Pages are Directly Requested
+
+    // <Files "custom_404.html">
+    //     <If "-z %{ENV:REDIRECT_STATUS}">
+    //         RedirectMatch 404 ^/custom_404.html$
+    //     </If>
+    // </Files>
+
+    // <Files "custom_50x.html">
+    //     <If "-z %{ENV:REDIRECT_STATUS}">
+    //         RedirectMatch 404 ^/custom_50x.html$
+    //     </If>
+    // </Files>
+
+    // Add www or https with htaccess rewrite
+
+    // Options +FollowSymLinks
+    // RewriteEngine On
+    // RewriteCond %{HTTP_HOST} ^ejemplo.com [NC]
+    // RewriteRule ^(.*)$ http://ejemplo.com/$1 [R=301,L]
+
+    // Redirect http to https with htaccess rewrite
+
+    // RewriteEngine On
+    // RewriteCond %{SERVER_PORT} 80
+    // RewriteRule ^(.*)$ https://www.ejemplo.com/$1 [R,L]
+
+    // Redirect to HTTPS with www subdomain
+
+    // RewriteEngine On
+    // RewriteCond %{HTTPS} off [OR]
+    // RewriteCond %{HTTP_HOST} ^www\. [NC]
+    // RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
+    // RewriteRule ^ https://%1%{REQUEST_URI} [L,NE,R=301]
+  },
 };
 
 export { Lampp };

package/src/runtime/xampp/Xampp.js

@@ -1,5 +1,5 @@
 import fs from 'fs-extra';
-import { shellExec } from '../../server/process.js';
+import { shellExec, getRootDirectory } from '../../server/process.js';
 
 const Xampp = {
   ports: [],
@@ -31,6 +31,53 @@ const Xampp = {
     this.router = undefined;
     if (fs.existsSync(`./tmp/xampp-router.conf`)) fs.rmSync(`./tmp/xampp-router.conf`);
   },
+  createApp: async ({ port, host, path, directory, rootHostPath, redirect, redirectTarget, resetRouter }) => {
+    if (!Xampp.enabled()) {
+      return { disabled: true };
+    }
+    if (!Xampp.ports.includes(port)) Xampp.ports.push(port);
+    if (resetRouter) Xampp.removeRouter();
+    Xampp.appendRouter(`
+Listen ${port}
+
+<VirtualHost *:${port}>    
+  DocumentRoot "${directory ? directory : `${getRootDirectory()}${rootHostPath}`}"
+  ServerName ${host}:${port}
+
+  <Directory "${directory ? directory : `${getRootDirectory()}${rootHostPath}`}">
+    Options Indexes FollowSymLinks MultiViews
+    AllowOverride All
+    Require all granted
+  </Directory>
+
+  ${
+    redirect
+      ? `
+    RewriteEngine on
+    
+    RewriteCond %{REQUEST_URI} !^/.well-known/acme-challenge
+    RewriteRule ^(.*)$ ${redirectTarget}%{REQUEST_URI} [R=302,L]
+  `
+      : ''
+  }
+
+  ErrorDocument 400 ${path === '/' ? '' : path}/400.html
+  ErrorDocument 404 ${path === '/' ? '' : path}/400.html
+  ErrorDocument 500 ${path === '/' ? '' : path}/500.html
+  ErrorDocument 502 ${path === '/' ? '' : path}/500.html
+  ErrorDocument 503 ${path === '/' ? '' : path}/500.html
+  ErrorDocument 504 ${path === '/' ? '' : path}/500.html
+
+</VirtualHost>
+
+`);
+    // ERR too many redirects:
+    // Check: SELECT * FROM database.wp_options where option_name = 'siteurl' or option_name = 'home';
+    // Check: wp-config.php
+    // if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
+    //   $_SERVER['HTTPS'] = 'on';
+    // }
+  },
 };
 
 export { Xampp };