softwarebrothers / adminjs Goto Github PK

First of thanks for this well done project,
I got an issue trying to add a Sequelize model as a resource,

The error is:

UnhandledPromiseRejectionWarning: TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Resource.properties (webpack:///./node_modules/admin-bro-sequelizejs/src/resource.js?:42:19)
    at ResourceDecorator.decorateProperties (/Users/kiarashws/dev/qukip/backend/node_modules/admin-bro/src/backend/decorators/resource-decorator.js:105:47)
    at new ResourceDecorator (/dev/node_modules/admin-bro/src/backend/decorators/resource-decorator.js:61:28)
    at Resource.assignDecorator (/dev/node_modules/admin-bro/src/backend/adapters/base-resource.js:234:23)
    at resources.map (/dev/node_modules/admin-bro/src/backend/utils/resources-factory.js:102:16)
    at Array.map (<anonymous>)
    at ResourcesFactory._decorateResources (/dev/node_modules/admin-bro/src/backend/utils/resources-factory.js:100:22)
    at ResourcesFactory.buildResources (/dev/node_modules/admin-bro/src/backend/utils/resources-factory.js:35:17)
    at new AdminBro (/dev/node_modules/admin-bro/src/admin-bro.js:111:39)
    at configAdmin (webpack:///./admin/config.js?:52:20)
    at runServer (webpack:///./server.js?:115:69)
    at process._tickCallback (internal/process/next_tick.js:178:7)

I followed example express app

import AdminBro from 'admin-bro'
import AdminBroExpress from 'admin-bro-expressjs'
import AdminBroSequelize from 'admin-bro-sequelizejs'
import sqModels from '../sq-models'

AdminBro.registerAdapter(AdminBroSequelize)

  const adminBro = new AdminBro({
    resources: [
      {
        resource: sqModels.User, options: {}
      }
    ],
    rootPath: '/admin',
    branding: {
      logo: '/logo.png',
      companyName: 'Admin'
    },
    dashboard: DashboardPage
  })

Any help would be appreciated.

Running with node JS file which contains only:

const AdminBro = require('admin-bro')

results in following exception being thrown:

C:\...\node_modules\admin-bro\src\frontend\login-template.js:1
(function (exports, require, module, __filename, __dirname) { import React from 'react'
                                                                     ^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Module._compile (C:\...\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Object.newLoader [as .js] (C:\...\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)

Looks like AdminBro front-end code is not transpiled by Babel.
I hope there's nothing wrong with my setup.

λ node --version
v10.15.3

Pozdrawiam.

I checked this out on mobile and phone keyboards will auto-capitalize the first letter, which in turn said i had the wrong credentials when i didnt.

Right now there is no information about how developers can start working on it - how to setup environment etc.

In this task we should:

• add information to the documentation about the admin-bro-dev repo
• checkout admin-bro-dev and update its description

I can access /admin and see all my resources but when I edit something and and save it, it gives "There were errors in the record object. Check them out" no matter which record I try to update from different collections (some created only with one field of String for example for testing)

this is my admin.js route

const AdminBro = require("admin-bro");
const AdminBroExpress = require("admin-bro-expressjs");

const AdminBroMongoose = require("admin-bro-mongoose");
const mongoose = require("mongoose");

const User = require("../models/user.js");
const Api = require("../models/api.js");
const Query = require("../models/query.js");
const Company = require("../models/company.js");
const Collection = require("../models/collection.js");
const Comment = require("../models/comment.js");

AdminBro.registerAdapter(AdminBroMongoose);


// Passing resources one by one
const adminBro = new AdminBro({
	resources: [Api, User, Query, Company, Collection, Comment],
	rootPath: "/admin"
});

const router = AdminBroExpress.buildRouter(adminBro);

module.exports = router;

Maybe I'm missing something but is it possible to specify what http method is used when calling custom action or is limited to GET only?

Type datetime doesn't allow to pick time, you can only pick date from datepicker

I've upgraded from 0.6.0 to 0.8.2 and now I'm getting 2 errors that prevent the UI from loading after login (buildAuthenticatedRouter):

Refused to execute script from 'http://localhost:3000/admin/frontend/assets/app.bundle.js' because its MIME type ('application/octet-stream') is not executable, and strict MIME type checking is enabled.

Refused to execute script from 'http://localhost:3000/admin/frontend/assets/components.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

I'm not entirely sure what's causing this, unfortunately.
I'm using admin-bro-expressjs and admin-bro-mongoose as well.

I have a couple of properties in my mongoose model that are Arrays. Right now, I get a lot of warnings: Unhandled type: Array. I'm not sure if I missed something in the configuration or if the way I use arrays are not supported (yet).

Example from the model:
ArrayOfNumbers: [Number]

Enums would be nice to have select instead of normal input

As an idea, I think TypeORM adapter is vital for the project

People are writing different text things in the app. We will have to reset it to one, known, state every hour (or so)

Currently there is only one possibility to add custom validation when overwriting actions. If something is not valid we can only return in action object like this:
{ record: { errors: { <fieldName>: <validationMessage> } } }
Also there is no possibility to show Notification for general issue in form, but notification is there, because it is displaying for other build in informations.

This is the error i get after trying to start the server using "node app.js"
:\Users\Rares\Desktop\UNI\ONE FELL SWOOP new\node_modules\admin-bro\src\frontend\login-template.js:1
(function (exports, require, module, __filename, __dirname) { import React from 'react'
^^^^^

SyntaxError: Unexpected identifier
at new Script (vm.js:84:7)
at createScript (vm.js:264:10)
at Object.runInThisContext (vm.js:312:10)
at Module._compile (internal/modules/cjs/loader.js:684:28)
at Module._compile (C:\Users\Rares\Desktop\UNI\ONE FELL SWOOP new\node_modules\pirates\lib\index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Object.newLoader [as .js] (C:\Users\Rares\Desktop\UNI\ONE FELL SWOOP new\node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Module.require (internal/modules/cjs/loader.js:657:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object. (C:\Users\Rares\Desktop\UNI\ONE FELL SWOOP new\node_modules\admin-bro\src\admin-bro.js:5:23)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Module._compile (C:\Users\Rares\Desktop\UNI\ONE FELL SWOOP new\node_modules\pirates\lib\index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:732:10)

This is the code from my app.js file

`var express = require("express"),
app = express(),
bodyParser = require("body-parser"),
mongoose = require("mongoose"),
passport = require("passport"),
LocalStrategy = require("passport-local"),
methodOverride = require("method-override"),
seedDB = require("./seedDB"),
Testimonial = require("./models/Testimonial");

//Route import
var indexRoutes = require("./routes/index");
var testimonialRoutes = require("./routes/testimonials/testimonials");
var adminRoutes = require("./routes/admin");
// var testimonials = require("./routes/testimonials");

//Database connect
mongoose.connect("mongodb://localhost/One-fell-swoop", {
useNewUrlParser: true
});
seedDB();

app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(express.static(__dirname + "/css"));
app.use(methodOverride("_method"));
app.use(indexRoutes);
app.use("/testimonials", testimonialRoutes);
app.use("/admin", adminRoutes);

//Port setup
var port = process.env.PORT || 3000;
app.listen(port, function () {
console.log("Server is up");
});`

And this is the code from my admin.js file where i connected mongoose to admin-bro

`const AdminBro = require('admin-bro');
const AdminBroExpress = require('admin-bro-expressjs');

const express = require('express');
const app = express();
const mongoose = require('mongoose');

AdminBro.registerAdapter(AdminBroMongoose);

const adminBro = new AdminBro({
databases: [mongoose],
rootPath: '/admin',
})

const router = AdminBroExpress.buildRouter(adminBro)

module.exports = router;`

Could you help me understand what is going on?

right now hen api returnes some kind of error (ie 500) there is no information in the UI. We have to change that

Assuming field

price: {
  value: Number,
  currency: String
}

and trying to use filters on price.value admin response is 500

it should be placed somewhere else because it occupies a npm package or add npmignore.
Also add engines into a package.json

When I use yarn/npm to install the packages I get the following warning:

warning admin-bro > react-router-dom > react-router > create-react-context > fbjs > [email protected]: core-js@<2.6.5 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.

Also I am using Node v12.2.0. When I try to follow the example steps I get an error:

import React from 'react'
^^^^^

SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:703:23)
at Module._compile (D:\Dev\Projects\NodeJS\testAdminBro2\node_modules\pirates\lib\index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:770:10)
at Object.newLoader [as .js] (D:\Dev\Projects\NodeJS\testAdminBro2\node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:628:32)
at Function.Module._load (internal/modules/cjs/loader.js:555:12)
at Module.require (internal/modules/cjs/loader.js:666:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object. (D:\Dev\Projects\NodeJS\testAdminBro2\node_modules\admin-bro\src\admin-bro.js:5:23)
at Module._compile (internal/modules/cjs/loader.js:759:30)

Can this be fixed as admin-bro is not working. I can run everything well without the admin-bro packages.

Usually, when a user uses a particular type for the property he might want to change its behaviour. For instance:

• he might want to change the size of the WYSIWYG or available buttons
• he also might want to change text field to select and add available options

That is why we should allow to pass options along with the type.

1. After creating a custom action and hitting admin endpoint it always shows notification "Record has been successfully removed"
2. Also, it will be good to define HTTP method of custom action when component = false

update styled components to 5.0

Business value

Right now login page is super simple, and since it is usually the first page users will see after visiting AdminBro we have to make it more appealing.

Acceptance criteria

• add AdminBro logo in the background
• add information about what user is doing (Logging in to the admin panel).
• improve other part of the current design (when you fill like it requires that)

I can update records from the admin but the post save hooks on my schema won't execute when updating from admin bros, is there a fix for this?

this is my code so far:

const AdminBroExpress = require("admin-bro-expressjs");

const AdminBroMongoose = require("admin-bro-mongoose");
const mongoose = require("mongoose");

const User = require("../models/user.js");
const Api = require("../models/api.js");
const Query = require("../models/query.js");
const Company = require("../models/company.js");
const Collection = require("../models/collection.js");
const Comment = require("../models/comment.js");

AdminBro.registerAdapter(AdminBroMongoose);

// Passing resources one by one
const adminBro = new AdminBro({
	resources: [
		{
			resource: Api,
			options: {
				listProperties: ["title", "approved", "updatedAt"],
				filterProperties: [
					"title",
					"approved",
					"updatedAt",
					"createdAt",
					"url",
					"totalUpvotes",
					"upvotes",
					"_id"
				]
			}
		},
		Company,
		{
			resource: Collection,
			options: {
				editProperties: ["title", "apis", "description"],
				// listProperties: ["title", "apis", "description"],
				properties: { description: { type: "richtext" } }
			}
		},
		Comment,
		{
			resource: Query,
			options: {
				listProperties: ["query", "createdAt"],
				editProperties: ["query", "approved"]
			}
		}
	],
	rootPath: "/admin",
	loginPath: "/login",
	branding: {
		companyName: "API List"
	}
});

router = AdminBroExpress.buildRouter(adminBro);

module.exports = router;

clicking on page 6 will render the pagination in a wierd way

I don't see dates field when I use sequelize adapter (v5).

There is no possibility to set input field type as password.

After adding relations filters (passed to the adapter and to the view) should not only contain raw data but also populated fields.

Currently, there is no: 'installation instructions' in the documentation. We have to create this page or rename "example application" along with changes in text.

hi can we add role based access control using admin bro? i need to create mulitple roles like super admin ,admin,user...is it gonna help on it?

When something happens in the system (user creates record etc) there should be a notice saying: 'record has been created'

Is there any planned support for custom actions on collections?

Example proposal:

• Add a CollectionDecorator base class or add a prop of this.collectionActions to BaseDecorator.
• Allow developer to define a custom form to show int the action, then the handler function that will be defined in this.collectionActions will get the params from the defined form. also override to Create new should be allowed. f.e:

Form definition for action:

const fields = [
  {
    field: 'Business Name',
    description: 'Business Name.',
    type: 'Enum', // String, Number, Boolean, Enum or CustomHtml
    enums: ['hi', 'bb'],
    isRequired: true,
    customHtmlField: `<input ...>`
  }
...
]

Action Definition:

const addNewBusinessAction = {
      id: 'publish',
      icon: 'fas fa-share',
      label: 'Publish',
      formFields: fields, //from the top example
      action: (request, response, data) => {
        // request.body Will be filled with form data with the fields defined above
        const { method } = request
        if (method === 'GET') {
          return 'Some content or form which you want to place here'
        }
        return 'PUBLISH ACTION WORKS'
      },
    }
this.collectionActions = [addNewBusinessAction]

• UI: a dropdown on top of the collection filled with the custom actions.

Looking through the docs, it looks like we're very limited on customizations when it comes to brand, specifically only being able to override logo and companyName. Since all the branding colors are being pulled from src/frontend/styles/variables.js it stands to reason it should be simple to allow for an override for these default variables.

Business Value
RIght now when user makes a mistake in his custom component (AdminBro.require(...)) all interface goes white. We have to change this behaviour and show errors instead of freazing UI.

Acceptance criteria
Implement ErrorBoundry component

Currently AdminBro requires external plugin to be rendered. This is awesome but not very straightforward. The developer should be able to run the server in the easiest way possible.

const adminBro = new AdminBro(options)
await adminBro.start({ port: process.env.PORT || 8080 })

where other options still are possible.

Acceptance criteria

• we have to choose default framework and use it (bet it would be expressjs)
• we have to update documentation

Currently, we are bundling users components on every page refresh - this can take a while at some point. That is why we will have to somehow cache the results on production.

Business value

Currently, the filter sidebar overlays the content so users, when using a filter, cannot fully see all the data.

In this task, we shall change the design that filter simply shows on the left and causes an entire results table to resize itself.

Acceptance criteria

• change position for filter from absolute to relative
• style results table that it appears as container with overflow-x property, but with sticky first column.

Sub-Documents are not visible in the panel instead an empty column is shown.

Business value

Right now number can be filter, only by giving an actual value. So for example there is no way to filter out (as an example) all products with price above some value.

In this task we should add an option to filter by:

• less than
• less or equal than
• more than
• more or equal than

Right now everything is static - rendered from pug to an html. All dynamic elements are based on jquery. We have to change that to some frontend framework (preferably react)

Acceptance criteria

• rewrite all views.
• implement server-side rendering.
• hydrate on the frontend.
• allow developers to pass their components in options.

Is there no way to upload files like images in the admin panel?

Business value

Currently all information like: 'successfully created record' etc. are shown in the action header. This place is not very good because it occupies too much space (especially when messages are more than 1). The second problem is with navigation, whenever the user changes the route messages are redrawn.

We have to change that they appear in a compressed way above the header.