Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


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);



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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(