User-management
How to integrate users from my database with user-management table in Metronic. Your structureis a little bit complicated for me to know. So, please, can you explain me what i need to do?
I am using metronic with react
Replies (5)
Hi,
All user-management CRUD components are located in src/app/modules/apps/user-management folder. You can change CRUD API URL in .env file, REACT_APP_THEME_API_URL property. We are using React-Query to handle server state, you can find usage examples in src/app/modules/apps/user-management/users-list/core/QueryResponseProvider.tsx.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
Thank you for response. Honnestly, I do not know a lot about integration with database. I red usage examples in src/app/modules/apps/user-management/users-list/core/QueryResponseProvider.tsx and I want to ask you which files i need to modify t replace your users with mine from database?
Hi,
Please note that if you're using our theme as a standalone React app, direct communication between your backend and the frontend React app should be handled through an API.
If your API endpoints match with ours and return data in the same format, you only need to update the REACT_APP_THEME_API_URL property in the .env file.
Here is a post about React CRUD implementation, you can read it to get more familiar with CRUD implementation flow.
https://codevoweb.com/react-query-axios-crud-restful-api-application/?utm_content=cmp-true
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I'm attempting to do the same, connecting the user-management table to my API endpoint. I've been struggling to get my API to generate the exact format that is in (https://preview.keenthemes.com/theme-api/api/users/query).
If we wanted to make changes to match our API would it be in (/src/_metronic/helpers/crud-helper/models.ts)? Modifying (export type QueryResponseContextProps<T> = {) to match our API response?
I'm using PostgreSQL as a backend with a Node JS server providing the API Endpoint. Struggling to implement pagination and the links response in the exact format its expecting:
"data"
"id: 1...
"payload"
"pagination"
"page"
"first_page_url"
"from"
"last_page"
"links":
"url: 1"
"next_page_url"
"items_per_page"
"prev_page_url"
"to"
"total"
I finally have a working solution. Hopefully this helps others. This template should be included with the documentation.
Using this with a Laravel API endpoint and it matches what Metronic is looking for with pagination.
$users = Users::paginate();
// Extracting the pagination data from the paginator instance
$pagination = [
"page" => $users->currentPage(),
"first_page_url" => $users->url(1),
"from" => $users->firstItem(),
"last_page" => $users->lastPage(),
"links" => array_map(function ($url, $page) use ($users) {
return [
"url" => $url,
"label" => $page,
"active" => $page == $users->currentPage(),
"page" => $page
];
}, $users->getUrlRange(1, $users->lastPage()), range(1, $users->lastPage())),
"next_page_url" => $users->nextPageUrl(),
"items_per_page" => $users->perPage(),
"prev_page_url" => $users->previousPageUrl(),
"to" => $users->lastItem(),
"total" => $users->total(),
];
// Combine the users data and the pagination data into the desired structure
$response = [
"data" => $users->items(), // Users data
"payload" => [
"pagination" => $pagination // Pagination data
]
];
return response()->json($response);
