Demo module example page with usages of QueryModel API (#33)

* Add new demo module entryPoint with example usages of DetailPanelWithModel, GridPanel, and withQueryModels

Author: cnathe

demo/package-lock.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@labkey/api": "1.1.1",
+    "@labkey/components": "1.1.1",
     "react": "16.13.1",
     "react-dom": "16.13.1"
   },

demo/package.json

@@ -0,0 +1,29 @@
+import React, { PureComponent } from 'react';
+import { DetailPanelWithModel, QueryConfig, SchemaQuery } from '@labkey/components';
+import { getServerContext } from '@labkey/api';
+
+interface Props {
+    asPanel?: boolean
+}
+
+export class ExampleDetailPanel extends PureComponent<Props> {
+    // This function will return the QueryConfig definition for the LabKey schema/query to use for the API call
+    // to get data from the LabKey server about the given container (i.e. keyValue).
+    getQueryConfig(): QueryConfig {
+        return {
+            schemaQuery: SchemaQuery.create('core', 'Containers'),
+            keyValue: getServerContext().container.id
+        };
+    }
+
+    // The render function of this component just passes along the QueryConfig to the @labkey/component's
+    // DetailPanelWithModel component. That component will make the API call to get the data and render the results.
+    render() {
+        return (
+            <DetailPanelWithModel
+                asPanel={this.props.asPanel}
+                queryConfig={this.getQueryConfig()}
+            />
+        )
+    }
+}

demo/src/client/QueryModelPage/ExampleDetailPanel.tsx

@@ -0,0 +1,58 @@
+import React, { PureComponent } from 'react';
+import { GridPanel, InjectedQueryModels, withQueryModels } from '@labkey/components';
+
+// First define the properties of the component you're going to wrap with withQueryModels.
+interface OwnProps {
+    title: string;
+    asPanel: boolean;
+}
+
+// Here we create a type that includes InjectedQueryModels because
+// we're wrapping the component with withQueryModels which will inject
+// queryModels and actions objects.
+type Props = OwnProps & InjectedQueryModels;
+
+// Here we use the name ExampleGridPanelImpl, users will not use this
+// component directly, only the wrapped version below which we expose
+// to users as ExampleGridPanel.
+class ExampleGridPanelImpl extends PureComponent<Props> {
+    onRefreshGrid = () => {
+        const { queryModels, actions } = this.props;
+        const { containersModel } = queryModels;
+
+        actions.loadModel(containersModel.id);
+    };
+
+    // This is an example of a custom button bar element in your GridPanel that can interact with the QueryModel.
+    renderGridButtons = () => {
+        return (
+            <button className={'labkey-button'} onClick={this.onRefreshGrid}>
+                Refresh Grid
+            </button>
+        )
+    };
+
+    render() {
+        // Note that queryModels and actions come from InjectedQueryModels via withQueryModels
+        const { queryModels, actions, title, asPanel } = this.props;
+        const { containersModel } = queryModels;
+
+        return (
+            <GridPanel
+                model={containersModel}
+                ButtonsComponent={this.renderGridButtons}
+                actions={actions}
+                title={title}
+                asPanel={asPanel}
+                hideEmptyChartMenu={true}
+                hideEmptyViewMenu={true}
+            />
+        );
+    }
+}
+
+// Next wrap your component with withQueryModels, here we set the type
+// to OwnProps so the returned component, ExampleGridPanel, can
+// be used in a type-safe manner. In this case, if the user forgets to
+// pass in a title or the asPanel property, we'll get a compiler error as intended.
+export const ExampleGridPanel = withQueryModels<OwnProps>(ExampleGridPanelImpl);

demo/src/client/QueryModelPage/ExampleGridPanel.tsx

@@ -0,0 +1,47 @@
+import React, { PureComponent } from 'react';
+import { Query } from '@labkey/api';
+import { SchemaQuery } from '@labkey/components';
+
+import { ExampleDetailPanel } from "./ExampleDetailPanel";
+import { ExampleGridPanel } from "./ExampleGridPanel";
+
+import './queryModelExample.scss';
+
+export class App extends PureComponent {
+    render() {
+        const queryConfigs = {
+            containersModel: {
+                schemaQuery: SchemaQuery.create('core', 'Containers'),
+                containerFilter: Query.containerFilter.allFolders,
+                omittedColumns: ['SortOrder','Searchable','Type','Title','ContainerType','Workbook','IdPrefixedName']
+            }
+        };
+
+        return (
+            <>
+                <p>
+                    This page contains two example usages of the <b>QueryModel API</b>. The first panel uses
+                    the <b>DetailPanelWithModel</b> to show a details view of some information about the current
+                    LabKey container. The second panel uses the <b>GridPanel</b> and <b>withQueryModels</b> to show a
+                    grid panel view of LabKey container information for all Labkey containers that the current,
+                    logged-in user has permissions to access. This component has options for sorting, filtering, paging,
+                    and exporting the data shown in the grid.
+                </p>
+                <p>
+                    Further details on these components and examples can be found in the&nbsp;
+                    <a href={'https://github.com/LabKey/labkey-ui-components/blob/master/packages/components/docs/public.md'} target={'_blank'}>Public API Docs</a>&nbsp;
+                    page for the <b>@labkey/components</b> package.
+                </p>
+                <ExampleDetailPanel
+                    asPanel={true}
+                />
+                <ExampleGridPanel
+                    title="LabKey Server Containers"
+                    queryConfigs={queryConfigs}
+                    asPanel={true}
+                    autoLoad
+                />
+            </>
+        )
+    }
+}

demo/src/client/QueryModelPage/QueryModelExample.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { App } from './QueryModelExample';
+
+// Need to wait for container element to be available in labkey wrapper before render
+window.addEventListener('DOMContentLoaded', (event) => {
+    ReactDOM.render(<App/>, document.getElementById('app'));
+});

demo/src/client/QueryModelPage/app.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+
+import { App } from './QueryModelExample';
+
+const render = () => {
+    ReactDOM.render(
+        <AppContainer>
+            <App />
+        </AppContainer>,
+        document.getElementById('app')
+    )
+};
+
+declare const module: any;
+
+if (module.hot) {
+    module.hot.accept();
+}
+
+render();

demo/src/client/QueryModelPage/dev.tsx

@@ -0,0 +1 @@
+@import "~@labkey/components/dist/assets/scss/theme";

demo/src/client/QueryModelPage/queryModelExample.scss

@@ -20,5 +20,10 @@ module.exports = {
         permission: 'read',
         path: './src/client/ToDoListPage/webpart',
         generateLib: true // used by views/demoWebpart.html
+    },{
+        name: 'queryModel',
+        title: 'QueryModel Example Page',
+        permission: 'read',
+        path: './src/client/QueryModelPage'
     }]
 };