search

Swadeshit27 / Admin-panel-frontend

https://admin-panel-frontend-ruby.vercel.app
2 stars 15 forks source link

Design customers page #3

Open Swadeshit27 opened 10 months ago

Swadeshit27 commented 10 months ago

Make a table where you show the list of users who have an account. But as we create just a front-end project you can use fake users details. Use this api to get fake users detial :- https://randomuser.me/api/?inc=name,id,gender,city,picture,email,phone&results=25

Table header contains id, user's name with profile, city& state, email/phone no, actions(edite & delete), status (active/inactive), Signup date. Also In top of the table contains search bar and filter option.

image

Implements following this condions:-

  1. Column titles must stand out from the entries.
  2. There should be a search bar that can filter on any property.
  3. You should be able to edit or delete rows in place.(There is no expectation of persistence. Edit and delete are expected to only happen in memory.)
  4. You need to implement pagination: Each page contains 10 rows. Buttons at the bottom allow you to jump to any page including special buttons for first page, previous page, next page and last page. Pagination must update based on search/filtering. If there are 25 records for example that match a search query, then pagination buttons should only go till 3.
  5. You should be able to select one or more rows. A selected row is highlighted with a grayish background color. Multiple selected rows can be deleted at once using the 'Delete Selected' button at the top right bin icon.
  6. Checkbox on the top left is a shortcut to select or deselect all displayed rows. This should only apply to the ten rows displayed in the current page, and not all 50 rows.
  7. Search box placeholder text should start with Search.
  8. Search icon/button should have class as search-icon OR trigger search on ENTER.
  9. Action element must be a button with a specific class name like edit, delete, save.
  10. Navigation elements must be a div/button, and should have class name as first-page, previous-page, next-page and last-page and page numbers should be mentioned accordingly.
  11. On clicking edit action in a row, it should be editable in the row itself.
  12. feel free to use any libraries.
vermaanurag1532 commented 10 months ago

please assign it to me i can do this for you

SHABIN-K commented 10 months ago

please assign this issue to me under JWOC'24

Hacxmr commented 10 months ago

Hey ! @Swadeshit27 I am interested in working on designing customer page.Kindly assign me this issue under JWOC!

sumit-kumar-jha1709 commented 10 months ago

Hi @Swadeshit27 if this issue is still open then I would like to work on it. Under JWOC

sumit-kumar-jha1709 commented 9 months ago

@Swadeshit27 thanks for assigning. Working on it!

Swadeshit27 commented 9 months ago

@sumit-kumar-jha1709 please wait, I will give updates then you start working

sumit-kumar-jha1709 commented 9 months ago

@sumit-kumar-jha1709 please wait, I will give updates then you start working

Sure

Swadeshit27 commented 9 months ago

@Hacxmr you just create a basic table this table doesn't follow the conditions that I mentioned. I consider it as a easy task.If you want then I can accept your pr.

sumit-kumar-jha1709 commented 9 months ago

@Swadeshit27 if no one is working on it, can you please assign it to me.

Swadeshit27 commented 9 months ago

@sumit-kumar-jha1709 you can work on it

sumit-kumar-jha1709 commented 9 months ago

@sumit-kumar-jha1709 you can work on it Thanks.