Custom properties for the resource

[andrui]

Describe the bug
I have sequelizejs Model "User" with field "externalId".
I have "User" resource where I have "after" hook for "list" action. In this hook additional external resources are loaded by "externalId" and added to the original response records (e.g. "customField1" is added to the each record.params object ).
I want to display "customField1" in the table. By default it is not displayed because "customField1" is not included into list properties. But when I add it into the list properties i receive error "there is no property by the name of 'customField1' in resource Users". Then I have tried to add it into "properties" object of the resource. In this case SQL query is failed because "customField1" is included into "SELECT" properties and I get error "SequelizeDatabaseError: column User.customField1 does not exist"

Installed libraries and their versions

• admin-bro@2.4.3
• admin-bro-expressjs@2.1.0
• admin-bro-sequelizejs@0.5.0

[leibowitz]

So far I have only managed to do it by using a custom component.

For example, given two tables (user and address), to add the email property from the user model to the address list view, one would have to create a custom field. For instance, let's call it user__email, and let's customise the component to display it.

I am using sequelize, and this is my resource config:

{
  resource: db.sequelize.models.address,
  options: {
    actions: {
      list: {
        after: async (response, request, context) => {
          return await augmentListResponseWithData(context, response, 'user_id', 'user')
        },
      },
    },
    listProperties: [
      'id',
      'user__email',
    ],
    properties: {
    	user__email: {
    		components: {
    			list: AdminBro.bundle('./components/property.view.jsx')
    		}
    	}
    }
   }
}

The user_id field in address is what links both tables.

The augmentListResponseWithData function fetches the records from the user table, and augment each address record with the associated user data. There is probably a better way of doing this (via sequelize joins), but this is just to illustrate the custom views

const augmentListResponseWithData = async (context, response, foreignKey, resourceId) => {
  // find all ids to fetch from the resource
  const ids = response.records.map(record => record.params[foreignKey]).filter(v => v);
  const resource = context._admin.findResource(resourceId)
  // Retrieve records
  const results = await resource.findMany(ids);
  const data = results.map(result => result.params)
  const fields = resource.properties().map(property => property.name());
  const schema = await db[resourceId].describe();
  const keys = Object.keys(schema)
  // Which field is the primary key, to join both tables
  const primaryKey = keys.find(field => schema[field].primaryKey);
  return {
    ...response,
    records: response.records.map(record => {
      if (!record.params[foreignKey]) {
        return record
      }
      const dataRow = data.find(row => row[primaryKey] === record.params[foreignKey])
      if (!dataRow) {
        return record
      }
      fields.map(field => {
        // add a new field to the results
        record.params[resourceId + '__' + field] = dataRow[field]
      })
      return record;
    })
  }
};

components/property.view.jsx is just a simple example component:

import React from 'react'
import { Box } from 'admin-bro'

const PropertyComponentShow = (props) => {
  const { record, property } = props;
  return (
    <Box>{record.params[property.name]}</Box>
  )
  )
}

export default PropertyComponentShow

This sort of works.

Ideally a better way to show the related fields would be to re-use the PropertyType – which already handles all the various data types. If anyone knows how to achieve the same in a better way, please comment!

[cloudratha]

You can try this:

const setCustom: After<ActionResponse> = async (
  response,
  request,
  context
) => {
  const records: RecordJSON[] = response.records || [];
  response.records = records.map((record) => ({
    ...record,
    params: {
      ...record.params,
      custom: `${record.params.firstName} ${record.params.lastName}`,
    },
  }));
  return response;
};

new AdminBro({
  resources: [
    {
      resource: User,
      options: {
        actions: {
          list: {
            after: setCustom,
          },
        },
        properties: {
          custom: {
            isVisible: {
              list: true,
              edit: false,
              new: false,
              filter: false,
            },
          },
        },
      },
    }
  ]
})

[andrui]

@leibowitz , @cloudratha thx, but there is a problem with such solutions which I have already mentioned: when I add custom propery into the "list properties", adminbro composes query with custom property in the "SELECT" statement, like "SELECT existing_prop_1, existing_prop_2, custom_prop, ..." which leads to the "column does not exist" SQL error.

[leibowitz]

@andrui I don't get this issue. I'm using a slightly newer version, but I don't think that has anything to do with it.
admin-bro@2.6.0
admin-bro-sequelizejs@0.5.1

The only difference in admin-bro-sequelizejs seems to be this PR SoftwareBrothers/adminjs-sequelizejs#36

And admin-bro differences between 2.4.3 and 2.6.0 doesn't seem to include anything related to this

You could try upgrading to latest, but I doubt it would change anything

Are you sure you have not specified the properties key twice? I definitely did this before

Could you paste your resource config in here?

[andrui]

@leibowitz thx I will check with a new version

[leibowitz]

@cloudratha I just found out sequelize has something called Virtual columns, which can do something similar to your example.

[cloudratha]

@andrui do you mind sharing you list after hook method. Altering the response shouldn’t trigger further selects.

[leibowitz]

@andrui any updates?

[wojtek-krysiak]

@andrui can you add customField1 to record.populated instead of record.params? - it should solve this problem

[wojtek-krysiak]

adding custom properties to the list has been solved, regarding limiting the payload - you can use after hook - but there is a task to simplify this: #430