So, I just started with adminjs and have been trying to override the default dashboard with my own custom component. I read the documentation and I don't think I am doing anything wrong? yet it still wont load the component. I started with a basic component to see whether it works or not.
It's being initialized but its not overriding the default dashboard.
AdminJS initialized with dashboard: { component: 'Dashboard' }
Code is provided below
Dashboard.jsx:
import React from 'react';
import { Box } from '@adminjs/design-system';
import { useTranslation } from 'adminjs';
const Dashboard = () => {
const { translateMessage } = useTranslation();
console.log('dashboard component loading...')
return (
{translateMessage('helloMessage', 'Hello')}
);
};
export default Dashboard;
admin.js:
import AdminJS from 'adminjs';
import { Database, Resource } from '@adminjs/sequelize';
import Customers from './src/models/Customers.js';
import Product from './src/models/Product.js';
import People from './src/models/People.js';
import Companies from './src/models/Companies.js';
import Leads from './src/models/Leads.js';
import Offers from './src/models/Offers.js';
import { ComponentLoader } from 'adminjs';
const componentLoader = new ComponentLoader();
const Components = {
Dashboard: componentLoader.add('Dashboard', './src/components/Dashboard.jsx')
};
AdminJS.registerAdapter({ Database, Resource });
const adminOptions = {
dashboard: {
component: Components.Dashboard
},
componentLoader,
resources: [{
resource: Customers,
options: {
parent: null,
properties: {
id: {
isVisible: { list: false, edit: false, show: false },
},
type: {
position: 1,
availableValues: [
{ value: 'company', label: 'Company' },
{ value: 'person', label: 'Person' },
],
},
name: {
position: 2,
},
email: {
position: 3,
},
phone: {
position: 4,
},
country: {
position: 5,
},
},
},
},
{
resource: People,
options: {
parent: null,
},
},
{
resource: Companies,
options: {
parent: null,
},
},
{
resource: Leads,
options: {
parent: null,
properties: {
type: {
availableValues: [
{ value: 'company', label: 'Company' },
{ value: 'person', label: 'Person' },
],
},
},
},
},
{
resource: Offers,
options: {
parent: null,
},
},
{
resource: Product,
options: {
parent: null,
},
},
],
rootPath: '/admin',
};
export default adminOptions;
server.js:
import AdminJS from 'adminjs'
import AdminJSExpress from '@adminjs/express'
import express from 'express'
import dotenv from 'dotenv'
import sequelize from './src/config/db.js';
import { Database, Resource } from '@adminjs/sequelize';
import adminOptions from './admin.js';
dotenv.config();
const PORT = 3000;
const start = async () => {
const app = express()
AdminJS.registerAdapter({ Database, Resource });
const admin = new AdminJS(adminOptions);
console.log('AdminJS initialized with dashboard:', admin.options.dashboard);
const adminRouter = AdminJSExpress.buildRouter(admin)
app.use(admin.options.rootPath, adminRouter)
app.listen(PORT, async () => {
console.log(`AdminJS started on
http://localhost:${PORT}${admin.options.rootPath}`)
/>
try {
await sequelize.authenticate();
console.log("database connected successfully")
await sequelize.sync();
console.log("database models synchronized")
}
catch (err) {
console.log("error connecting to database", err)
}
})
}
start()
I tried logging any information regarding it but it seems like it's not loading the component at all?
Any help or suggestions would be appreciated. Thanks!
AdminJS not overriding default dashboard with custom React component
Programing Coderfunda
September 19, 2024
No comments
Related Posts:
Google Translator Code Use On BloggerGoogle Translator Code Copy and Paste this Code<div id="google_translate_element"></div><script>function googleTranslateElementInit(… Read More
How to display data from two tables in laravel $users = DB::table('users') ->join('contacts', 'users.id', '=', 'contacts.u… Read More
jQuery | Traversing In jQuery, traversing means moving through or over the HTML elements to find, filter or select a particular or entire element.Based on the trave… Read More
Google Translator function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element'); } … Read More
Make Your Blog Speak More Languages What Are These?… Read More
0 comments:
Post a Comment
Thanks