expertiza / expertiza/reimplementation-front-end

Create a UI for Assignment's "Add Participants" page

Open
#14 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
2
Forks
115
Avg merge
17d 5h
Merged PRs (30d)
2

Description

Path: Go to `Manage` -> `Assignment` -> `Edit` (pencil icon) -> `Etc` -> `Add Participant`

Create a page which displays the Participant details as you can see in the below screenshot.

**Old UI:**

![Image](https://github.com/expertiza/reimplementation-front-end/assets/48826459/3cd46dfb-0050-42d7-b0b1-a6b22d4c4b2a)

**New Manage Users UI:**

![Image](https://github.com/expertiza/reimplementation-front-end/assets/48826459/4e4016ef-8980-422c-b1c6-85e3935d341e)

The UI page can be reconstructed in a similar manner as the Manager Users new UI page. The following changes can be done while designing this page:

- The table can be created similar to the Users table by using the `table` component. Make sure to add the remaining column fields as well.
- Replace the `Participant Role` column with an edit icon under the `Actions` field which opens the edit modal (similar to the Update user modal). In this modal, just add the role dropdown along with a cancel and submit button.

**Update User modal:**
![Image](https://github.com/expertiza/reimplementation-front-end/assets/48826459/200ffd17-f04f-4b15-82cc-b9110cdcb8c3)

- Replace the `Remove button` and add a delete icon under the `Actions` field which opens the delete modal (similar to the Delete user modal).

**Delete User modal:**

![Image](https://github.com/expertiza/reimplementation-front-end/assets/48826459/a25f7625-2aa7-446d-9b8b-2850dd5423be)

- Remove the `Enter a user login` field and the `Participant role` radio buttons and add a create icon on the top right corner which opens a modal similar to the Create Users modal. In this modal, add a `Enter User login` field, a `Participant role` dropdown, Submit and Cancel buttons.
-
**Create User modal:**

![Image](https://github.com/expertiza/reimplementation-front-end/assets/48826459/78028aec-335a-4e08-9492-14c453c1401b)

Contributor guide

No contributing guide indexed for this repository

Research direction

Follow Manage → Assignment → Edit → Etc → Add Participant, then inspect the existing Manage Users UI, table component, and Update, Delete, and Create User modals. Done means the page displays participant details, supports role editing and deletion through Actions icons, and creates participants through the new modal with the specified fields and controls.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.