UseDigimakerUI.mdx

name	route
Use digimaker-ui	/use-digimaker-ui

import { Hint } from '@nejcm/docz-theme-extended';

Use digimaker-ui

Setting up

.env

Before using, you need to set up env variables. Below is an example of .env file

REACT_APP_REMOTE_URL=/api
REACT_APP_ASSET_URL=http://localhost:9200/var
#imagepath will be replaced by the real image path
REACT_APP_THUMB_PATH=images/thumbnail/{imagepath}

DMInit

All digimaker-ui's components should be inside DMInit(doesn't need to direct under). See properties of DMInit for different uses. You don't need DMInit if you only need to use rest api instead of component like List/Browse.

Use components

You can use digimaker-ui compoents separately(eg. list & actions, browse, etc) or build a whole admin from it.

//List article under 3, with actions
<List id={3} contenttype="article" columns={["name", "published"]} 
    row_actions={[{link:"/view/{id}", name:'View'}, (props)=><Add ..props />]} />

//browse all images
<Browse contenttype="image" onConfirm={(selected)=>{}} />

//Show content tree
<TreeNode root={3} contenttype={["folder", "usergroup"]} />

Build editorial/admin ui

Using routing is a good approach because url path gives great flexiablilty.

It's a good idea to create a general component&route showing a content(call it Main, with path eg. /main/3).

See dmdemo admin as example

Route

First we register all Main component like path /main/4

//App.tsx
<div>
<div>{/*Left menu*/}</div>
<Route
    path='/main/:id'
    exact={true}
    render={(route) => (
        <Main
            onLoad={(content)=>{          
                setCurrent(content);
            }}                                          
            id={parseInt(route.match.params.id)}
            getMainConfig={getMainConfig}
            getListConfig={getListConfig}
            redirect={(url: string) =>
                commonAfterAction(route.history, 0, [url])}
        />
    )}
/>
</div>

Main component

In the Main component, it will fetch content based on id, and shows list of children based on configuration. digimaker-ui provides a default Main component, which list all content list from up to down, but you can customized your own(eg. different content types list shown as tabs).

Configuration for Main

The configiguration sets rule of showing lists and each list's column, sorting, actions etc. It's easy to show list based on parent's fields, eg. showing article if parent's children_type is article.

//main settings
const mainConfig = {
    folder: {
      actions: [
        (actionProps:ActionProps)=><SetPriority {...actionProps} />
      ]
    },    
    article: {
      view: true,
      metainfo:true,
      actions: [      
        (actionProps:ActionProps)=><Move {...actionProps} />
      ],
    },
    user: {
      view: true,
      viewComponent: UserRoles,    
    },
  };

const getMainConfig =(content:any)=>{
    return mainConfig[content.content_type]
}


//list settings
const getListConfig = (_parent: any, contenttype: string)=>{
  const commonSettings = {
    show_header: true,
    show_table_header: true,
    pagination: 10,
    sort:[],
    row_actions: [
      {
        link: '/edit/{_contenttype_id}?from=/main/{_from_id}',
        name: 'Edit',
        icon: 'icon-edit',
      },
      (actionProps:ActionProps)=><Delete {...actionProps} />
    ]
  }
  return commonSettings;
}

Actions: edit/create

There are typically 2 ways to achieve edit/create, url or dialog. Below is an example of routing path /create/{parent}/{contenttype} to create.

For dialog-like action, you can implement your own action wraps of our Create/Edit component in dialog, and then register the action in list row, or other places.

import Create from 'digimaker-ui/actions/Create';
import Edit from 'digimaker-ui/actions/Edit';

//...
<Route path="/create/:parent/:contenttype" render={route=>
    <Create key={Date.now()} parent={parseInt(route.match.params.parent)} 
    contenttype={route.match.params.contenttype} 
     afterAction={(status, params)=>redirect(route.history, params)} />} />
<Route path="/edit/:contenttype/:id" exact render={route=>
    <Edit id={parseInt(route.match.params.id)} contenttype={route.match.params.contenttype}
     afterAction={(status, params)=>redirect(route.history, params)} />} />
<Route path="/edit/:id" exact render={route=><Edit id={parseInt(route.match.params.id)} 
        afterAction={(status, params)=>redirect(route.history, params)} />} />