@itoa/app-admin-ui v11.1.1

Admin UI app

Ứng dụng Itoa.js cung cấp giao diện quản lý nội dung.

Hướng dẫn

const { Itoa } = require('@itoa/itoa');
const { GraphQLApp } = require('@itoa/app-graphql');
const { AdminUIApp } = require('@itoa/app-admin-ui');

const itoa = new Itoa({...});

const authStrategy = itoa.createAuthStrategy({...});

module.exports = {
  itoa,
  apps: [
    new GraphQLApp(),
    new AdminUIApp({
      adminPath: '/admin',
      authStrategy,
    }),
  ],
};

Cấu hình

hooks

Customization hooks allow you to modify various areas of the Admin UI to better suit your development needs. The index.js file at the given path should export a single config object containing your chosen hooks. All are optional. See Customization for available hooks.

If omitted, Itoa will look under ./admin-ui/ for a hooks config export.

Usage

new AdminUIApp({ hooks: require.resolve('./custom-hooks-path') });

isAccessAllowed

This function takes the same arguments as a shorthand imperative boolean access control. It must return either true or false.

Important: If omitted, all users with accounts will be able to access the Admin UI. The example below would restrict access to users with the isAdmin permission.

Usage

new AdminUIApp({
  /*...config */
  isAccessAllowed: ({ authentication: { item: user, listKey: list } }) => !!user && !!user.isAdmin,
}),

Customization

The following customization hooks are available. Each is a function that takes no arguments.

export default {
  customToast,
  itemHeaderActions,
  listHeaderActions,
  listManageActions,
  logo,
  pages,
};

logo

The logo to display on the signin screen.

This must return a React component.

export default {
  logo: () => <MyAwesomeLogo />,
};

itemHeaderActions

Header components on the Item Details page can be replaced using this hook. Ths replaces the components for item Details page for all Lists.

This must return a React component.

import { ItemId, AddNewItem } from '@itoa/app-admin-ui/components';
export default {
  // re-implement the default AddNewItem and ItemId button + custom text
  itemHeaderActions: () => (
    <div>
      <ItemId />
      <AddNewItem />
      <p>Hello world</p>
    </div>
  ),
};

listHeaderActions

Header components on the List page can be replaced using this hook. This replaces components on list page for all Lists.

This must return a React component.

import { CreateItem } from '@itoa/app-admin-ui/components';
export default {
  // re-implement the default create item button + custom text
  listHeaderActions: () => (
    <div>
      <CreateItem />
      <p>Hello world</p>
    </div>
  ),
};

listManageActions

Custom Actions component for multiple items in the list can be replaced with this hook. This replaces the list management toolbar Items for all lists.

This must return a React component.

import { UpdateItems, DeleteItems } from '@itoa/app-admin-ui/components';
export default {
  // re-implement the default delete many and update many items buttons + custom text
  listManageActions: () => (
    <div>
      <UpdateItems />
      <DeleteItems />
      <p>Hello world</p>
    </div>
  ),
};

pages

Allows grouping list pages in the sidebar or defining completely new pages.

Should return an array of objects, which may contain the following properties:

export default {
  pages: () => [
    // Custom pages
    {
      label: 'A new dashboard',
      path: '',
      component: Dashboard,
    },
    {
      label: 'About this project',
      path: 'about',
      component: About,
    },
    // Ordering existing list pages
    {
      label: 'Blog',
      children: [
        { listKey: 'Post' },
        { listKey: 'PostCategory', label: 'Categories' },
        { listKey: 'Comment' },
      ],
    },
    {
      label: 'People',
      children: ['User'],
    },
  ],
};

customToast

Allows customising the content of toast notification when an item is updated or deleted.

The hook function receives a context variable containing an item key with the original item data, a list key that can be used to limit the scope of the hook, the original message as well as a toastAction that will be either 'update' or 'delete'. The function should return a React component.

export default {
  customToast: ({ item, list, message }) => {
    // custom Toast for MyList
    if (list.key === 'MyList') {
      return (
        <div>
          <strong>My custom toast notification!</strong>
          {item && item._label_ ? <strong>{item._label_}</strong> : null}
        </div>
      );
    }
    // Default toast
    return (
      <div>
        {item && item._label_ ? <strong>{item._label_}</strong> : null}
        <div>{message}</div>
      </div>
    );
  },
};