feathers-mongoose-casl-dashboard

Admin screen with full CRUD functionality inside your react apps to your feathers-mongoose-casl

Demo: https://feathersjs-mongoose-casl-admin.herokuapp.com/

• the demo is depend on your local feathers-mongoose-casl server then keep the server running to see the screens

How to install?

1 - Install redxu-admin 2- Menu inside your app menu add this:

import  React, { Component } from  'react';
import {DashboardMenu, UserAbilityMenu} from  'feathers-mongoose-casl-dashboard';
 
export  default  class  Sidebar  extends  Component {
    render() {
    const  isAuthUser  =  this.props.user  &&  this.props.user._id
        return(
            <div>
            {isAuthUser && <DashboardMenu  renderItem={item  =>  <a  href={`/app/dashboard?screen=${item.result.name}`}>{item.result.name}</a>}  />}
            {isAuthUser && <UserAbilityMenu  renderItem={() =>  <a  href={'/app/user-abilities'}>User-abilities</a>}  />}
            </div>
        )
    }
};
 

DashboardMenu - will render list of services that user is able to read UserAbilityMenu - will render the UserAbilityLink only if user able to post to UserAbility service

3- Create dashbaord screen that render DashboardApp with the relevant props Example of nextjs screen

import  React  from  'react';
import {DashboardApp} from  'feathers-mongoose-casl-dashboard';
import  'feathers-mongoose-casl-dashboard/lib/style.css'
import  Router  from  'next/router';
 
// Optional -
// Change the local of the app
// default local is enUS
// you can import heIL or create you on local file
// to create your own local file, copy this [file](https://github.com/doronnahum/feathers-mongoose-casl-dashboard/tree/master/src/local/en-US.js) and update
import { DashboardApp, setLocal, locals } from  'feathers-mongoose-casl-dashboard';
 
setLocal(locals.heIL)
 
const  getUrl  =  function(props) {
    return  props.router.query  &&  props.router.query.screen
}
 
class  dashboard  extends  React.Component {
    constructor(props) {
        super(props);
        this.state  = {
            screenName:  getUrl(this.props),
            showErr:  false
            };
    };
 
  
componentDidMount() {
    const  screenName  =  getUrl(this.props)
    if(!screenName) {
        this.setState({showErr:  true})
    }else{
        this.setState({screenName})
    }
    Router.router.events.on('beforeHistoryChange', this.handleRouteChange)
}
 
    componentWillUnmount() {
        Router.router.events.off('beforeHistoryChange', this.handleRouteChange)
    }
 
     
    handleRouteChange  = (res) => {
        const  urlParams  =  new  URLSearchParams(window.location.search);
        const  screenName  =  urlParams.get('screen');
        if(screenName  !==  this.state.screenName) {
            this.setState({screenName})
        }
    }
 
    render() {
        return (
            <DashboardApp
                url={this.state.screenName}
            />
        )
    }
}
 
export  default  Page(dashboard);

4- Create user-abilities screen

import  React  from  'react';
import  'feathers-mongoose-casl-dashboard/lib/style.css'
import {UserAbilities} from  'feathers-mongoose-casl-dashboard';
 
export  default  class  userAbilities  extends  React.Component {
    render() {
        return (
            <div>
            <UserAbilities  />
            </div>
        )
    }
}