SoftwareBrothers / adminjs

AdminJS is an admin panel for apps written in node.js
https://adminjs.co
MIT License
8.21k stars 661 forks source link

[Bug]: currency not showed in List #1392

Open wtime opened 1 year ago

wtime commented 1 year ago

Contact Details

No response

What happened?

List what you are trying to do?

Listing with a currency property

20230122211118

20230122211410

20230122211651

app.ts

import AdminJS, { AdminJSOptions } from 'adminjs'
import AdminJSExpress from '@adminjs/express'
import express from 'express'
import mongoose from 'mongoose'
import * as AdminJSMongoose from '@adminjs/mongoose'
import { ProductResource } from './resources/product.resource'

const PORT = process.env.PORT || 8008

AdminJS.registerAdapter({
  Resource: AdminJSMongoose.Resource,
  Database: AdminJSMongoose.Database,
})

const start = async () => {
  const app = express()

  await mongoose.connect(process.env.MONGO_DATABASE_URL!)

  const adminOptions: AdminJSOptions = {
    resources: [ProductResource],
  }

  const admin = new AdminJS(adminOptions)

  const adminRouter = AdminJSExpress.buildRouter(admin)
  app.use(admin.options.rootPath, adminRouter)

  app.listen(PORT, () => {
    console.log(`AdminJS started on http://localhost:${PORT}${admin.options.rootPath}`)
  })
}

start()

product.resource.ts

import { Product } from '../models/product.model';

export const ProductResource = {
  resource: Product,
  options: {
    properties: {
        price: {
          type: 'currency',
          props: {
            intlConfig: { locale: "it-IT", currency: "EUR" },
            allowNegativeValue: false,
            decimalScale: 2
          },
        },
        createdAt: {
          isVisible: { list: true, show: true, edit: false, filter: true },
        },
        updatedAt: {
          isVisible: { list: false, show: true, edit: false, filter: true },
        },
      },
      listProperties: ['name', 'date', 'price'],
      navigation: {
        name: 'Products',
        icon: 'Archive',
      }
  },
};

product.model.ts

import { model, Schema, Types } from 'mongoose'

export interface IProduct {
  name: string;
  date: Date;
  price: number;
}

export const ProductSchema = new Schema<IProduct>(
  {
    name: { type: String, required: true },
    date: { type: Date, required: true },
    price: { type: Number, required: true },
  },
  { timestamps: true },
)

export const Product = model<IProduct>('Product', ProductSchema);

Bug prevalence

always

AdminJS dependencies version

"dependencies": { "@adminjs/express": "^5.1.0", "@adminjs/mongoose": "^3.0.1", "adminjs": "^6.8.1", "connect-mongo": "^4.6.0", "express": "^4.18.2", "express-formidable": "^1.2.0", "express-session": "^1.17.3", "mongoose": "^6.8.4", "tslib": "^2.4.1" }

What browsers do you see the problem on?

Chrome

Relevant log output

Uncaught TypeError: _value.slice is not a function
    at Object.formatValue [as formatCurrencyProperty] (index.esm.js:173:1)
    at formatValue (format-value.ts:25:10)
    at List$6 (list.tsx:9:17)
    at renderWithHooks (global.bundle.js:20510:19)
    at mountIndeterminateComponent (global.bundle.js:24274:14)
    at beginWork (global.bundle.js:25787:17)
    at HTMLUnknownElement.callCallback (global.bundle.js:8372:15)
    at Object.invokeGuardedCallbackDev (global.bundle.js:8421:17)
    at invokeGuardedCallback (global.bundle.js:8485:32)
    at beginWork$1 (global.bundle.js:31636:8)

The above error occurred in the <List$6> component:

    at List$6 (http://localhost:8008/admin/frontend/assets/app.bundle.js:20382:6)
    at WrapperComponent
    at section
    at I (http://localhost:8008/admin/frontend/assets/global.bundle.js:44584:18545)
    at ErrorBoundary$1 (http://localhost:8008/admin/frontend/assets/app.bundle.js:10448:6)
    at BasePropertyComponent (http://localhost:8008/admin/frontend/assets/app.bundle.js:23481:16)
    at td
    at I (http://localhost:8008/admin/frontend/assets/global.bundle.js:44584:18545)
    at tr
    at I (http://localhost:8008/admin/frontend/assets/global.bundle.js:44584:18545)
    at RecordInList (http://localhost:8008/admin/frontend/assets/app.bundle.js:23958:6)
    at WrapperComponent
    at tbody
    at I (http://localhost:8008/admin/frontend/assets/global.bundle.js:44584:18545)
    at table
    at I (http://localhost:8008/admin/frontend/assets/global.bundle.js:44584:18545)
    at RecordsTable (http://localhost:8008/admin/frontend/assets/app.bundle.js:24283:6)
    at WrapperComponent
    at section
    at I (http://localhost:8008/admin/frontend/assets/global.bundle.js:44584:18545)
    at List (http://localhost:8008/admin/frontend/assets/app.bundle.js:24338:4)
    at WrapperComponent
    at ErrorBoundary$1 (http://localhost:8008/admin/frontend/assets/app.bundle.js:10448:6)
    at BaseActionComponent (http://localhost:8008/admin/frontend/assets/app.bundle.js:24618:6)
    at section
    at I (http://localhost:8008/admin/frontend/assets/global.bundle.js:44584:18545)
    at ResourceAction (http://localhost:8008/admin/frontend/assets/app.bundle.js:25389:31)
    at ConnectFunction (http://localhost:8008/admin/frontend/assets/global.bundle.js:36194:88)
    at WrapperComponent
    at RenderedRoute (http://localhost:8008/admin/frontend/assets/global.bundle.js:40645:9)
    at Routes (http://localhost:8008/admin/frontend/assets/global.bundle.js:41077:9)
    at section
    at I (http://localhost:8008/admin/frontend/assets/global.bundle.js:44584:18545)
    at section
    at I (http://localhost:8008/admin/frontend/assets/global.bundle.js:44584:18545)
    at App (http://localhost:8008/admin/frontend/assets/app.bundle.js:25466:52)
    at WrapperComponent
    at Router (http://localhost:8008/admin/frontend/assets/global.bundle.js:41009:19)
    at BrowserRouter (http://localhost:8008/admin/frontend/assets/global.bundle.js:41691:9)
    at styledComponents_browser_cjs.ThemeProvider (http://localhost:8008/admin/frontend/assets/global.bundle.js:44584:23989)
    at Provider$1 (http://localhost:8008/admin/frontend/assets/global.bundle.js:36413:5)

Relevant code that's giving you issues

No response

wtime commented 1 year ago

If I set the type as string instead of number it works! Obviously that shouldn't be the case, react-currency-input-field requires a number as a value.