express-admin-pannel
Library to help with curd operations
USAGE
Installation
npm i express-admin-pannel
These must be implement to use the library.
const express = require('express')
const cors = require('cors')
const {AdminPannel} = require("express-admin-pannel")
const app = express()
app.use(express.json()) /* will be used to parse josn data */
app.use(express.urlencoded({ extended: true })) /* will be used to parse form data */
app.use(cors()) /* To prevent cors errors NOTE: cors must be installed */
Initializing sequelize (only sequelize is supported as of now)
const {Sequelize,DataTypes} = require('sequelize')
const sequelize = new Sequelize('database', 'username', 'password', {
host: 'localhost',
dialect: /* one of 'mysql' | 'postgres' | 'sqlite' | 'mariadb' | 'mssql' | 'db2' | 'snowflake' | 'oracle' */
});
Creating a dummy models
const ActorProfile = sequelize.define("ActorProfile", {
photo: {type:DataTypes.STRING},
description: DataTypes.TEXT,
},
const Actor = sequelize.define("Actor", {
name: { type: DataTypes.STRING, allowNull: false },
ActorProfileId: {
type: DataTypes.INTEGER,
references: {
model: ActorProfile, // 'ActorProfiles' would also work
key: "id",
},
},
});
ActorProfile.hasOne(Actor)
Actor.belongsTo(ActorProfile)
/* after defining association the field must be specified in the model or else our library will have no way to know existance of that relation */
/* See the ActorProfileId in Actor model that is added by sequelize but for the admin pannel you have to specify it in the model*/
});
Initializing admin pannel
const {AdminPannel} = require("express-admin-pannel")
const adminPannel = new AdminPannel("sequelize", sequelize, app}
adminPannel.initialize("admin");//The argument is the route to adminpannel
/* adminpannel can be seen at http://localhost:port/admin */
new AdminPannel needs at least three arguments with a optional argument to customize admin pannel. 1)First argument is the name of ORM you are using. Currently only sequelize is supported. 2)Second argunemt takes the instance of db. In this case it is sequelize 3)Third argument is the express app 4)Options to customize admin panel
adminPannel.initialize take one argument that is route to admin pannel */
Listening at a port
app.listen(8000, () => console.log("listening at port 8000"));
now visit http://localhost:8000/admin to see the admin pannel.
Customization
Admin Pannel can be customized by passing options while instantiating admin pannel
const adminPannel = new AdminPannel("sequelize", sequelize, app,{
titleFields: /* fields mentioned here will be shown in admin pannel */,
imageFields: /* fields mentioned here should be a link and it will be shown as image in admin pannel */,
noOfItemsPerPage: /* shows this mentioned of items before showing pagination default is 30 */;
}}
Lets look at them individually:
titleFields
const adminPannel = new AdminPannel("sequelize", sequelize, app,{
titleFields: { Actor: ["id", "name","ActorProfileId"], ActorProfile: ["photo","description"] },
/* {model1:["field1","field2"],model2:["field1","field2"]} */
}}
this will show id,name,ActorProfileId in admin pannel.
optionally if you add a __title__
virtual field and return something then it will be shown in the admin pannel automatically if you have not customized title fields
For Example: if we change our Actor model as below and add a virtual field called __title__
const Actor = sequelize.define("Actor", {
name: { type: DataTypes.STRING, allowNull: false },
ActorProfileId: {
type: DataTypes.INTEGER,
references: {
model: ActorProfile, // 'ActorProfiles' would also work
key: "id",
},
__title__: {
type: DataTypes.VIRTUAL,
get() {
return `${this.getDataValue("name")}`;
},
},
},
});
whatever you return from the __title__
virtual field will be automatically shown in admin pannel unless you have customized the titleFields
if you still want to show __title__
then you have to mention in the titleFields.
imageFields
If you have a link to a image and you want to see it as a image then you can also do that.
In our case we have a field called photo
in ActorProfile so we will show it as image in admin pannel
const adminPannel = new AdminPannel("sequelize", sequelize, app,{
titleFields: { ActorProfile: ["photo"] },//First we mention that we want to show photo in admin pannel
imageFields: {ActorProfile:["photo"]} // Then we mention it in the image field
}}
noOfItemsPerPage
If you want to show a specific number of items before showing pagination then specify noOfItemsPerPage
property:
const adminPannel = new AdminPannel("sequelize", sequelize, app,{
noOfItemsPerPage:10,
}}
this will show 10 items before showing pagination.