q3-admin

4.5.15 • Public • Published

🧰 Q3 Admin

Containers

Admin

Q3 admin ships with a default component that handles most state and routing for you. As such, there's a lot of props available to customize this setup process. Most are optional and used in more advanced cases.

API

Prop Description Type
AppProps.directory The relative path where Q3 renders (i.e. /app/) string
AppProps.pages Collections to render. See AbstractBuilder for data structure. array

Example

import React from 'react';
import Admin from 'q3-admin';
import { Builders } from 'q3-ui-forms';
import Tests from './components/Tests';

export default () => (
  <Admin AppProps={{ pages }}>
    <Tests path="/tests" />
  </Admin>
);

Detail

The container for viewing individual documents in Q3. When using the builders, properties of genDetail and genDetailProps are assembled into this container.

API

Prop Description Type
registerOptions Used to register custom UI elements in the detail side panel. Options can be programmatically setup or inferred (see example below). func/array*
registerPanels Same as above for usage, though this prop is intended for lengthier content and actions. func/array*

Example

// programmatic method
export const registerOptions = (data, dispatchers, t) => {
  const out = [];
  if (data.isOn)
    out.push({
      title: t('titles:hello'),
      component: () => null,
    });

  return out;
};

// inferred method
export const registerPanels = [
  {
    // is localized
    title: 'hello',
    // receives all params from method above
    component: ({ data, dispatchers, t }) => null,
    // runs through comparisons for easy conditional rendering
    conditions: ['foo=1'],
  },
];

Gatekeeper

The container for checking user authentication. Redirects users if necessary.

API

Prop Description Type
redirectCheck Redirects users when the function returns a string. The function can take user profile as an argument. Note: redirectPathOnPublic and redirectPathOnSession are evaluated before this function. func
redirectPathOnSession Redirects a user when logged in and this prop is a string. string
redirectPathOnPublic Redirects a user when not logged in and this prop is a string string
children children will be returned when none of conditions are true node

Example

import { Gatekeeper } from  'q3-admin/lib/containers';
import  IsBrowserReady  from  'gatsby-theme-q3/src/components/IsBrowserReady';

const shouldRedirect = (auth) => auth.role === 'Employer" ? '/employers' : undefined;

const AdminPrivateGateway = ({ children, ...rest }) => {
	return (
		<IsBrowserReady>
			<Gatekeeper
				redirectCheck={shouldRedirect}
				redirectPathOnPublic="/login"
				{...rest}
			>
				{children}
			</Gatekeeper>
		</IsBrowserReady>
	);
};

Components

SidePanelAction

This component standardizes the UI for single-click actions in the Detail SidePanel implementation.

API

Prop Description Type
description A key for the descriptions namespace string*
label A key for the labels namespace string*
onClick A callback for the default button func*

Example

import { SidePanelAction } from 'q3-admin/lib/components';

export default ({ isOn, update }) => (
  <SidePanelAction
    description="enableFeature"
    label={isOn ? 'off' : 'on'}
    onClick={update(!isOn)}
  />
);

Hooks

useIo

Returns exportCollection and importCollection for connecting to Q3 API's process automation. Both methods are curried and intended for use with click handlers. Note that this hook does not actual call React hooks API, so it may be used in non-components.

API

| Parameter | Description | Type | | --------- | ----------------------------------------------------------- | -------- | ------ | | ids | Document IDs to target in the bulk operation | string | array | | params | Location URL parameter methods (i.e. delete, set, toString) | object |

Example

import { useIo } from 'q3-admin/lib/hooks';
import { withLocation } from 'with-location';

export default withLocation(({ params }) => {
  const { exportCollection } = useIo(1, params);
  return (
    <button
      type="button"
      onClick={exportCollection('templateName')}
    >
      Export ID #1
    </button>
  );
});

Readme

Keywords

none

Package Sidebar

Install

npm i q3-admin

Weekly Downloads

12

Version

4.5.15

License

none

Unpacked Size

1.28 MB

Total Files

914

Last publish

Collaborators

  • 3merge