@journeyapps-labs/reactor-mod-data-browser 2.0.1 → 2.1.0

package/src/panels/model/ModelPanelWidget.tsx

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
 import styled from '@emotion/styled';
-import { BorderLayoutWidget, LoadingPanelWidget } from '@journeyapps-labs/reactor-mod';
+import {
+  BorderLayoutWidget,
+  LoadingPanelWidget,
+  PANEL_CONTENT_PADDING,
+  PanelToolbarWidget,
+  ScrollableDivCss
+} from '@journeyapps-labs/reactor-mod';
 
 import { SchemaModelForm } from '../../forms/SchemaModelForm';
 import { ModelPanelModel } from './ModelPanelFactory';
@@ -13,7 +19,9 @@ export interface QueryPanelWidgetProps {
 
 namespace S {
   export const Container = styled.div`
-    padding: 20px;
+    overflow: auto;
+    padding: ${PANEL_CONTENT_PADDING}px;
+    ${ScrollableDivCss};
   `;
 }
 
@@ -32,10 +40,36 @@ export const ModelPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
     );
   }, [props.model.model, props.model.definition]);
 
+  let top = null;
+  if (props.model.model) {
+    top = (
+      <PanelToolbarWidget
+        btns={
+          [
+            // {
+            //   label: 'Delete object',
+            //   action: () => {}
+            // }
+          ]
+        }
+        meta={[
+          {
+            label: 'ID',
+            value: props.model?.id
+          }
+        ]}
+      />
+    );
+  }
+
   return (
     <LoadingPanelWidget loading={!form}>
       {() => {
-        return <S.Container>{form.render()}</S.Container>;
+        return (
+          <BorderLayoutWidget top={top}>
+            <S.Container>{form.render()}</S.Container>
+          </BorderLayoutWidget>
+        );
       }}
     </LoadingPanelWidget>
   );

package/src/panels/query/TableControlsWidget.tsx

@@ -46,6 +46,7 @@ export const TableControlsWidget: React.FC<TableControlsWidgetProps> = observer(
       />
       <PanelButtonWidget
         label="Page"
+        tooltip="Reload page"
         icon="refresh"
         action={() => {
           props.current_page.load();
@@ -53,9 +54,10 @@ export const TableControlsWidget: React.FC<TableControlsWidgetProps> = observer(
       />
       <PanelButtonWidget
         label="Query"
+        tooltip="Reload Query"
         icon="refresh"
-        action={() => {
-          props.query.load();
+        action={async (event, loading) => {
+          await props.query.load();
         }}
       />
     </S.Container>