Pure Admin For Meteor

An isolated, customizable admin panel for Meteor

Version 0.5.0 has been completely rewritten to take advantage of new Meteor features and is not backwards compatible.

Requires Meteor 1.8 or newer

Isolated

Pure Admin was designed to not interfere with your app:

• Uses Shadow DOM to prevent your app's or Pure Admin's styles from interfering with each other
• Does not use a router or other third party packages on the client.
• UI components are built with Svelte, which turns the components into vinilla js during build time
• Uses dynamic imports to reduce impact on bundle size.

Customizable

On its own, Pure Admin doesn't do much. It mostly creates the UI and provides some api's for other packages or your app to build on top of. It makes very few assumptions about how your app works. For example, overriding the PureAdmin.isAdmin function removes all dependencies on Mongo.

Use

1. meteor add zodern:pure-admin
2. Add packages for Pure Admin to create a custom admin panel
3. Add PureAdmin.show() in your client code, for example in a route handler for /admin

Addon packages

Pure Admin on it's own doesn't do much. You can add packages to extend the functionality.

Available Packages

• mongo: Manage data in your Mongo Database

Ideas for packages

• Manage data in MongoDB
• Manage and view history of cron jobs
• Manage users
• Useful and easily extendable dashboard page

API

Server

PureAdmin.isAdmin

Returns true if the user is an admin. The function can be overridden before Meteor.startup to use custom logic for deciding who is an admin.

PureAdmin.isAdmin = function(userId) {
  return Meteor.users.findOne({_id: userId}).isAdmin || false
}

If you do not set this, it defaults to:

• creating a collection called _PureAdmin-Admins
• The first userId passed to PureAdmin.isAdmin is made an admin
• Add admins by inserting documents in _PureAdmin-admins with the format {user: "userIdOfAdmin"}.

Client

PureAdmin.addPage({name: 'pageName', render(utils, props, contentEl) => {}, title(props) => 'title'})

Adds a page. When it is shown, render is passed:

• utils which is an object with:
  • renderSvelte(svelteComponent) Renders a svelte component, passing props as data, and listening to the goTo event. A goTo event can be dispatched instead of calling PureAdmin.goTo
• props
• contentEl - the container element any page content should go into

To override the default blank dashboard, add a page named Dashboard.

PureAdmin.addMenuItem({ name: 'string', section: 'section', page: 'pageName' })

PureAdmin.addMenuItem({ name: 'string', section: 'section', page: 'pageName', pageProps: {} })

PureAdmin.addMenuItem({ name: 'string', section: 'section', url: 'https://website.com' })

Adds a menu item to the side bar. If page is provided, it is shown when selected with pageProps. Otherwise, the url in url is opened in a new tab.

Pages are grouped by section. Pages without a section are shown together at the top of the list.

PureAdmin.goTo('pageName');

PureAdmin.goTo({page: 'pageName', props: {}});

Shows the page.

PureAdmin.addCss('css string')

Due to the use of shadow DOM, css outside of the the admin panel is not inherited by it. CSS added with addCss is put inside of a <styled> element in the shadow dom. Another option is to use inline styles.

PureAdmin.onInit(function () {})

These functions are run when the admin panel is opened. They can be used to dynamically import the files that configure Pure Admin.

PureAdmin.show()

Shows the admin panel

PureAdmin.hide()

Not implemented.

TODO

• Add helpers for rending pages with Blaze, React, or Vue
• Allow hiding admin panel
• Add option to store page name and props in url
• Allow setting page title from page component
• Allow page to add buttons or search box to page title
• Add examples for showing admin panel with FlowRouter or with a keyboard shortcut