lupine.api 1.1.57 → 1.1.59

package/admin/admin-shell.tsx

@@ -1,89 +1,89 @@
-import { CssProps, getRenderPageProps, NotificationColor, NotificationMessage, RefProps } from 'lupine.components';
-
-export const AdminShellPage = () => {
-  let socket: WebSocket | undefined;
-  const getSocket = () => {
-    if (!socket) {
-      const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
-      socket = new WebSocket(`${protocol}//${location.host}/debug/client`);
-
-      socket.onopen = () => {
-        printMsg('Connection opened', true);
-      };
-      socket.onmessage = (message) => {
-        printMsg(message.data.toString());
-      };
-      socket.onclose = () => {
-        printMsg('Connection closed', true);
-      };
-      socket.onerror = (error) => {
-        printMsg('Connection error: ' + error, true);
-        socket?.close();
-        socket = undefined;
-      };
-    }
-    return socket;
-  };
-  const css: CssProps = {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    '.admin-shell-box': {},
-    '.a-shell-out': {
-      maxHeight: '100%',
-    },
-  };
-  const onSend = async () => {
-    if (socket?.readyState !== WebSocket.OPEN) {
-      printMsg('Connection is not open', true);
-      return;
-    }
-    const cmd = ref.$('.a-shell-input').value;
-    socket.send(JSON.stringify({ message: 'shell', cmd }));
-    ref.$('.a-shell-input').value = '';
-  };
-  const onConnect = async () => {
-    getSocket();
-  };
-  const ref: RefProps = {
-    onUnload: async (el: Element) => {
-      socket?.close();
-    },
-  };
-  const onKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      onSend();
-    }
-  };
-  const printMsg = (msg: string, clear: boolean = false) => {
-    const outDom = ref.$('.a-shell-out');
-    if (clear) {
-      outDom.value = '';
-    }
-    outDom.value += msg + '\n';
-    outDom.scrollTop = outDom.scrollHeight;
-  };
-  return (
-    <div css={css} class='admin-shell-box' ref={ref}>
-      <div class='row-box pb-m'>
-        <div class='row-box flex-1 pr-m'>
-          <input class='input-base a-shell-input w-100p' onKeyDown={onKeyDown} />
-        </div>
-        <button onClick={onSend} class='button-base mr-m'>
-          Send
-        </button>
-      </div>
-      <div class='row-box pb-m'>
-        <button onClick={onConnect} class='button-base button-ss mr-s'>
-          Connect
-        </button>
-        <button onClick={() => printMsg('', true)} class='button-base button-ss'>
-          Clear Log
-        </button>
-      </div>
-      <div class='row-box flex-1'>
-        <textarea class='input-base a-shell-out w-100p h-100p' readOnly={true}></textarea>
-      </div>
-    </div>
-  );
-};
+import { CssProps, getRenderPageProps, NotificationColor, NotificationMessage, RefProps } from 'lupine.components';
+
+export const AdminShellPage = () => {
+  let socket: WebSocket | undefined;
+  const getSocket = () => {
+    if (!socket) {
+      const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      socket = new WebSocket(`${protocol}//${location.host}/debug/client`);
+
+      socket.onopen = () => {
+        printMsg('Connection opened', true);
+      };
+      socket.onmessage = (message) => {
+        printMsg(message.data.toString());
+      };
+      socket.onclose = () => {
+        printMsg('Connection closed', true);
+      };
+      socket.onerror = (error) => {
+        printMsg('Connection error: ' + error, true);
+        socket?.close();
+        socket = undefined;
+      };
+    }
+    return socket;
+  };
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    '.admin-shell-box': {},
+    '.a-shell-out': {
+      maxHeight: '100%',
+    },
+  };
+  const onSend = async () => {
+    if (socket?.readyState !== WebSocket.OPEN) {
+      printMsg('Connection is not open', true);
+      return;
+    }
+    const cmd = ref.$('.a-shell-input').value;
+    socket.send(JSON.stringify({ message: 'shell', cmd }));
+    ref.$('.a-shell-input').value = '';
+  };
+  const onConnect = async () => {
+    getSocket();
+  };
+  const ref: RefProps = {
+    onUnload: async (el: Element) => {
+      socket?.close();
+    },
+  };
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      onSend();
+    }
+  };
+  const printMsg = (msg: string, clear: boolean = false) => {
+    const outDom = ref.$('.a-shell-out');
+    if (clear) {
+      outDom.value = '';
+    }
+    outDom.value += msg + '\n';
+    outDom.scrollTop = outDom.scrollHeight;
+  };
+  return (
+    <div css={css} class='admin-shell-box' ref={ref}>
+      <div class='row-box pb-m'>
+        <div class='row-box flex-1 pr-m'>
+          <input class='input-base a-shell-input w-100p' onKeyDown={onKeyDown} />
+        </div>
+        <button onClick={onSend} class='button-base mr-m'>
+          Send
+        </button>
+      </div>
+      <div class='row-box pb-m'>
+        <button onClick={onConnect} class='button-base button-ss mr-s'>
+          Connect
+        </button>
+        <button onClick={() => printMsg('', true)} class='button-base button-ss'>
+          Clear Log
+        </button>
+      </div>
+      <div class='row-box flex-1'>
+        <textarea class='input-base a-shell-out w-100p h-100p' readOnly={true}></textarea>
+      </div>
+    </div>
+  );
+};

package/admin/admin-table-data.tsx

@@ -1,146 +1,146 @@
-import {
-  CssProps,
-  RefProps,
-  bindGlobalStyle,
-  getRenderPageProps,
-  getDefaultPageLimit,
-  HtmlVar,
-  PagingLink,
-  encodeHtml,
-} from 'lupine.components';
-
-const loadData = async (
-  onLinkClick: (index: number) => Promise<void>,
-  index: number,
-  tableName: string,
-  update?: TableDataUpdateProps
-) => {
-  // this is only executed in the FE
-  const pageIndex = index ?? getRenderPageProps().query['pg_i'];
-  const pageLimit = getRenderPageProps().query['pg_l'] || getDefaultPageLimit();
-  const data = await getRenderPageProps().renderPageFunctions.fetchData(
-    `/api/admin/db/table/data/${tableName}/${pageIndex}/${pageLimit}`
-  );
-  return data && data.json && data.json.result && data.json.result.length > 0 ? (
-    <div class='table-box-outer'>
-      <PagingLink
-        itemsCount={data && data.json && data.json.itemsCount}
-        pageIndex={data && data.json && data.json.pageIndex}
-        baseLink=''
-        onClick={onLinkClick}
-      ></PagingLink>
-      <div class='table-box'>
-        <div class='fields bg-gray'></div>
-        <div class='table'>
-          <div class='fields bg-gray'>
-            {Object.keys(data.json.result[0]).map((field: any, index: number) => {
-              return <div class='p1 item'>{encodeHtml(field)}</div>;
-            })}
-            {update && update.onDelete && update.onEdit && <div class='p1 item'>Action</div>}
-          </div>
-
-          {data.json.result.map((item: any) => {
-            return (
-              <div class='values'>
-                {Object.keys(item).map((field: any, index: number) => {
-                  return <div class='p1 item'>{encodeHtml(item[field])}</div>;
-                })}
-                {update && update.onDelete && update.onEdit && (
-                  <div class='p1 item'>
-                    <button
-                      class='button-base button-s'
-                      onClick={() => {
-                        update.onEdit!(item);
-                      }}
-                    >
-                      Edit
-                    </button>
-                    <button
-                      class='button-base button-s'
-                      onClick={() => {
-                        update.onDelete!(item);
-                      }}
-                    >
-                      Delete
-                    </button>
-                  </div>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-      <PagingLink
-        itemsCount={data && data.json && data.json.itemsCount}
-        pageIndex={data && data.json && data.json.pageIndex}
-        baseLink=''
-        onClick={onLinkClick}
-      ></PagingLink>
-    </div>
-  ) : (
-    <div>No data.</div>
-  );
-};
-
-export type TableDataUpdateProps = {
-  refreshRef?: Function;
-  onDelete?: Function;
-  onEdit?: Function;
-};
-export const AdminTableData = (props: { tableName: string; update?: TableDataUpdateProps }) => {
-  const css: CssProps = {
-    '.table-box': {
-      overflowX: 'auto',
-      overflowY: 'hidden',
-    },
-    '.table': {
-      borderCollapse: 'collapse',
-      display: 'table',
-    },
-    '.table-box .fields, .table-box .values': {
-      display: 'table-row',
-    },
-    '.table-box .fields .item, .table-box .values .item': {
-      display: 'table-cell',
-      border: 'solid 1px gray',
-    },
-  };
-
-  const onPageClick = async (index: number) => {
-    console.log('onPageClick', index);
-    dom.value = await loadData(onPageClick, index, props.tableName, props.update);
-  };
-  const refresh = async () => {
-    dom.value = await loadData(onPageClick, 0, props.tableName, props.update);
-    // mountComponents(ref.current, dom);
-  };
-  const ref: RefProps = {
-    onLoad: async () => {
-      // const self = ref.current;
-      dom.value = await loadData(onPageClick, 0, props.tableName, props.update);
-      // mountComponents(self, dom);
-    },
-  };
-  if (props.update) {
-    props.update.refreshRef = refresh;
-  }
-  bindGlobalStyle('admin-table-data', css);
-  const dom = new HtmlVar('');
-  return (
-    <div className='admin-table-data' ref={ref}>
-      <button class='button-base button-s' onClick={refresh}>
-        Refresh
-      </button>
-      {dom.node}
-    </div>
-  );
-};
-
-export const TableDataPage = (tableName: string) => {
-  return (
-    <div>
-      table: {tableName}
-      <AdminTableData tableName={tableName}></AdminTableData>
-    </div>
-  );
-};
+import {
+  CssProps,
+  RefProps,
+  bindGlobalStyle,
+  getRenderPageProps,
+  getDefaultPageLimit,
+  HtmlVar,
+  PagingLink,
+  encodeHtml,
+} from 'lupine.components';
+
+const loadData = async (
+  onLinkClick: (index: number) => Promise<void>,
+  index: number,
+  tableName: string,
+  update?: TableDataUpdateProps
+) => {
+  // this is only executed in the FE
+  const pageIndex = index ?? getRenderPageProps().query['pg_i'];
+  const pageLimit = getRenderPageProps().query['pg_l'] || getDefaultPageLimit();
+  const data = await getRenderPageProps().renderPageFunctions.fetchData(
+    `/api/admin/db/table/data/${tableName}/${pageIndex}/${pageLimit}`
+  );
+  return data && data.json && data.json.result && data.json.result.length > 0 ? (
+    <div class='table-box-outer'>
+      <PagingLink
+        itemsCount={data && data.json && data.json.itemsCount}
+        pageIndex={data && data.json && data.json.pageIndex}
+        baseLink=''
+        onClick={onLinkClick}
+      ></PagingLink>
+      <div class='table-box'>
+        <div class='fields bg-gray'></div>
+        <div class='table'>
+          <div class='fields bg-gray'>
+            {Object.keys(data.json.result[0]).map((field: any, index: number) => {
+              return <div class='p1 item'>{encodeHtml(field)}</div>;
+            })}
+            {update && update.onDelete && update.onEdit && <div class='p1 item'>Action</div>}
+          </div>
+
+          {data.json.result.map((item: any) => {
+            return (
+              <div class='values'>
+                {Object.keys(item).map((field: any, index: number) => {
+                  return <div class='p1 item'>{encodeHtml(item[field])}</div>;
+                })}
+                {update && update.onDelete && update.onEdit && (
+                  <div class='p1 item'>
+                    <button
+                      class='button-base button-s'
+                      onClick={() => {
+                        update.onEdit!(item);
+                      }}
+                    >
+                      Edit
+                    </button>
+                    <button
+                      class='button-base button-s'
+                      onClick={() => {
+                        update.onDelete!(item);
+                      }}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <PagingLink
+        itemsCount={data && data.json && data.json.itemsCount}
+        pageIndex={data && data.json && data.json.pageIndex}
+        baseLink=''
+        onClick={onLinkClick}
+      ></PagingLink>
+    </div>
+  ) : (
+    <div>No data.</div>
+  );
+};
+
+export type TableDataUpdateProps = {
+  refreshRef?: Function;
+  onDelete?: Function;
+  onEdit?: Function;
+};
+export const AdminTableData = (props: { tableName: string; update?: TableDataUpdateProps }) => {
+  const css: CssProps = {
+    '.table-box': {
+      overflowX: 'auto',
+      overflowY: 'hidden',
+    },
+    '.table': {
+      borderCollapse: 'collapse',
+      display: 'table',
+    },
+    '.table-box .fields, .table-box .values': {
+      display: 'table-row',
+    },
+    '.table-box .fields .item, .table-box .values .item': {
+      display: 'table-cell',
+      border: 'solid 1px gray',
+    },
+  };
+
+  const onPageClick = async (index: number) => {
+    console.log('onPageClick', index);
+    dom.value = await loadData(onPageClick, index, props.tableName, props.update);
+  };
+  const refresh = async () => {
+    dom.value = await loadData(onPageClick, 0, props.tableName, props.update);
+    // mountComponents(ref.current, dom);
+  };
+  const ref: RefProps = {
+    onLoad: async () => {
+      // const self = ref.current;
+      dom.value = await loadData(onPageClick, 0, props.tableName, props.update);
+      // mountComponents(self, dom);
+    },
+  };
+  if (props.update) {
+    props.update.refreshRef = refresh;
+  }
+  bindGlobalStyle('admin-table-data', css);
+  const dom = new HtmlVar('');
+  return (
+    <div className='admin-table-data' ref={ref}>
+      <button class='button-base button-s' onClick={refresh}>
+        Refresh
+      </button>
+      {dom.node}
+    </div>
+  );
+};
+
+export const TableDataPage = (tableName: string) => {
+  return (
+    <div>
+      table: {tableName}
+      <AdminTableData tableName={tableName}></AdminTableData>
+    </div>
+  );
+};