User profile page based on login.

Hi,

Might be a simple question but how would I use the CRUD components to have EntityAttributeList show the details of the currently Logged in user on a page.

For example, I have a My Profile page in an application where I wish to display the details of the logged in user. I know I can grab the id of the user from the store but not sure how to pass it to the crud view. I would also love to be able to edit the details from this page if possible.

Cheers :smile:

If it is a bot-written model, the fields on the models have @CRUD(…) annotators that specify how the fields should be shown on the List View, Edit View etc …

If its not a bot-written field, you can add a custom one, tag it with @CRUD and then give it the properties it needs for it to be displayed on the CRUD list.

The fields you’re looking for are turning “headerColumn” to true and specifying a display Function.

@CRUD({
	name: 'Authentication Method',
	displayType: 'enum-combobox',
	order: 40,
	headerColumn: true,
	searchable: true,
	searchFunction: 'equal',
	searchTransform: (attr: string) => {
		return AttrUtils.standardiseEnum(attr, Enums.authenticationProviderOptions);
	},
	enumResolveFunction: makeEnumFetchFunction(Enums.authenticationProviderOptions),
	displayFunction: (attribute: Enums.authenticationProvider) => Enums.authenticationProviderOptions[attribute],
})
public authenticationMethod: Enums.authenticationProvider;

To see how it quickly works, Id recommend going to the admin backend on an entity page that already exists that is using the CRUD component and then changing the values within the @CRUD(…) annotation to see how they work.

Note, things like search and sorting wont work out of the box for custom fields as they are not specifide in the schema and so Entity Framework does not know how to sort / order / search on those fields.

1 Like

Hi @Minh_Nguyen ,

Thanks for the response, however that is not entirely what I am after. I have a page with a custom section that I wish to show the currently logged in user in CRUD view mode. I know I can use EntityAttributeList, I just don’t know how to get the object of the currently logged in user.

Here is what I am using with a new blank user

                <div className="body-content">
                    <div className="layout__horizontal">
                        <h2>
                            My Profile
                        </h2>
                    </div>
                    {
                    // % protected region % [Add code for 8ab74203-f187-43bb-bb11-e6951b5227e2 here] off begin
                    }
                    <EntityAttributeList
                        {...this.props}
                        model={new ServiceCommissioningBodyEntity()}
                        sectionClassName="crud_view"
                        title={`Details`}
                        formMode={EntityFormMode.VIEW}
                        modelType={ServiceCommissioningBodyEntity}
                    />
                    {
                    // % protected region % [Add code for 8ab74203-f187-43bb-bb11-e6951b5227e2 here] end
                    }
                </div>

Sam. Take a look at the file EntityEdit.tsx . It fetches an entity using ID and renders an EntityAttributeList.

The part you might be interested in:

	const { loading, error, data } = useQuery(getFetchSingleQuery(modelType), {
		fetchPolicy: 'network-only',
		variables: { "args": [{ "path": "id", "comparison": "equal", "value": match.params.id }] }
	});

modelType is an IModelType where T extends Model.
and then just replace the match.params.id with the user ID you are getting from the store.

Hope that helps.

Thanks @Thomas_Williams !

Yes I have tried this however this function cannot be run in a class. Is there a way around that?

Sam

Hey Sam,

For a class component you wont be able to use that hook, but you should be able to use the apollo client from the global store directly.

Something like this:

	componentDidMount() {
		let id = 'asddfkljdlfsjdlkfj'
		const query = getFetchSingleQuery(RegionEntity);
		store.apolloClient.query({query: query, variables: { "args": [{ "path": "id", "comparison": "equal", "value": id}] }})
			.then((data) => console.log(data))
	}