feathers-mongoose-casl
Version 2.1.2
Version 2.1.2
  • feathers-mongoose-casl
  • Docs
    • Migrating
    • START A NEW PROJECT
      • Generate a new project.
      • install feathers-mongoose-casl
      • feathers-logger
      • Update config
      • Add mongoose
      • Email service
      • App hooks
      • Import required services
      • Verify user and filter user fields
      • Swagger, Logger, BodyParser
      • Email templates
      • public HTML
      • Run the server
      • Create you first user
      • vs code snippet extension
      • Test Login
      • Dashboard
      • Create a new Service with casl&Dashboard
      • Posts Postman snippet
      • Add Admin role
      • Done!
    • Advanced
      • Security - eslint-plugin-security
      • Security - rate limiting
      • Development tools
    • Guides
      • Throw errors
      • Auth Flow
      • Authentication
      • Authouriztion
      • /me
      • Rules Cache
      • Create a new service
      • Custom service validtor client data
      • validators
        • Example of use
        • Types
        • Mongoose schema
      • Default value
      • $Populate
      • Upload service
      • Upload files
        • Create upload service
        • Sign File After Populate
        • Storage support
          • Google-cloud
      • Error
      • feathers Client examples
      • Dashboard
        • Dashboard Config
          • Field configuration
          • doc Layout
          • custom Fields
            • customElements
        • Online dashboard
        • Add to your react app
      • customized feathers-mongoose-casl/services
      • Redis - in progress
      • S3
      • Postman
      • Swagger
      • debug
    • Production
      • ENV
    • Feathers wiki
      • Good links
    • utils
      • send email example
      • Async For Each
      • Create heroku server
      • pick
      • vs code snippet extension
      • Persist user request
    • Ecosystem
    • TODO
    • Versions updates
Powered by GitBook
On this page
  • How to install dashboard in your client
  • 3. Add all available services to your sidebar

Was this helpful?

  1. Docs
  2. Guides
  3. Dashboard

Add to your react app

How to install dashboard in your client

1. Install feathers-mongoose-casl-dashboard

    npm i feathers-mongoose-casl-dashboard --save

2. Create new react screen

import React, { Component } from 'react';
import {DashboardApp} from 'feathers-mongoose-casl-dashboard';
import 'feathers-mongoose-casl-dashboard/lib/style.css'

class PostsAdminScreen extends Component {
  render() {
    return (
      <DashboardApp
        url={'posts'} // This can be value from url params to allow dynamic screen
      />
    );
  }
}

export default PostsAdminScreen;

3. Add all available services to your sidebar

import React, { Component } from 'react';

import {
  DashboardMenu
} from 'src/localnode/feathers-mongoose-casl-dashboard';

import { getDeepObjectValue } from 'validate.js';


class SideBar extends Component {
  render() {
    return (
      <div>
        <DashboardMenu
          renderItem={item => {
            const icon = objDig(
              item,
              'data.dashboardConfig.sideBarIconName'
            );
            const serviceName = item.result.name;
            return (
              <button
                key={serviceName}
                link={`/app/dashboard?screen=${serviceName}`}
              >
                {serviceName}
              </button>
            );
          }}
        />
      </div>
    );
  }
}
PreviousOnline dashboardNextcustomized feathers-mongoose-casl/services

Last updated 5 years ago

Was this helpful?