Update the Community Users Screen Design and Functionality

[palisadoes]

NOTE

1. This issue will require close coordination with persons assigned issues in the reference section.
2. You may find it easier to split responsibilities in a different way than proposed here to be more efficient is creating the goal

Is your feature request related to a problem? Please describe.

The current COMMUNITY Users screen needs to be updated. It does not reflect the soon to be implemented functionality of Admins being assigned per organization.

Describe the solution you'd like

1. Use the Figma file in our Design system document for guidance
   1. https://docs.talawa.io/docs/design/ux/ux-design-system
2. Use the People screen components from the first PR of this issue:
   1. Update the Organization People Screen Design and Functionality #1451
   2. The resulting screen would look like this
      
3. Work with the person assigned the same issue to create an Organizations tab on the User Detail page. A small follow up PR with a skeleton design should be sufficient.
   1. Update the Organization People Screen Design and Functionality #1451
4. Clicking on a User will go to the first profile page
5. Clicking on an Organization tab will go to a page listing the person's Joined and Blocked organizations designed like this with the following modifications:
   1. The Created Organizations functionality is not required at this time
   2. The sort button must be to the right of the search bar like in most of our other screens
   3. You will need to propose the best way to order Joined and Blocked organizations on this screen.
   4. You will need to only show the organizations to which the user belongs or from which they have been blocked.
   5. The Manage button text must be replaced by Edit Role (See Blue Box below)
      
6. Clicking on the newly named Edit Role button will present the existing View Organization dialog that is currently visible on the Community Users screen.
   1. In this dialog, as before:
      1. the user's role can be changed
      2. the user can be removed from the organization
   2. There will be no need to search for organizations as the User will be editing access for a single organization.
      

Describe alternatives you've considered

• N/A

Approach to be followed (optional)

Work with the following contributors for guidance:

1. @aashimawadhwa
2. @EshaanAgg
3. @beingnoble03
4. @rishav-jha-mech

Also:

1. We will need to add your Figma page designs to our official Figma document
2. Please plan for this

Additional context

Related Issues and PRs:

1. Update the Organization People Screen Design and Functionality #1451
2. Update the Community Users Screen Design and Functionality #1452
3. Admin: Fix the usage of userType #1445
4. Update adminApproved to expected functionality in the develop-userTypeFix branch talawa-api#1862

Potential internship candidates

Please read this if you are planning to apply for a Palisadoes Foundation internship

• Student Internship Programs talawa#359

[Sejal1411]

would like to work on this issue. Pls assign!

[ghost]

Hey @palisadoes I like to work on this issue could you please assign this issue to me

[Cioppolo14]

@SanjeevKrSingh If the issue has already been assigned, please don't ask to be assigned. We want everyone to get a chance.

[palisadoes]

@Sejal1411

1. We will need to add your Figma page designs to our official Figma document
2. Please plan for this

[Sejal1411]

@palisadoes do i need to design from scratch or make modifications in the official copy and submit? Also i have some queries...

1. The User's screen will resemble the one in Figma file?
2. No limitation to a person joining the organisation?

[palisadoes]

1. The Figma file in the official documentation should be your guide. Make a copy to create your design.
2. There isn't a join organization screen to be designed. You will need to only show the organizations to which the user belongs.

[Sejal1411]

@palisadoes I have created some designs...Need your feedback on them..How should i proceed?

[palisadoes]

Post the images here so we can all see

[Sejal1411]

Should I proceed with this design?

[palisadoes]

1. In hindsight, only super admins should be able to see all the organizations a person is a member of.
2. Therefore a click through of the screen in the image 1 should show the screen of image 2, with all the organizations the person is a part of. As it is a super admin screen, the left drawer of image 2 should be the same as image 1. Keep the Overview tab. We can fill in the Overview tab later with the design from user profile PR.
3. In image 2, sort alphabetically by default. Instead of "sort by", make the drop down filter "all", "joined", "blocked" and "available" organizations.
4. I'd like you to figure out a way to use the screen of image 2 as a starting point to:
   1. remove people from, or add people to, available organizations.
   2. change the roles of people in the organization selected.
   3. The screen that does this now combines two things in one in a way that is not intuitive. For example:
      1. there is no "save" or "submit" button.
      2. Knowing the creation details of the organization isn't necessary for this pop up
         

This is a good first step. Thanks for the effort.

When this is done, we can open a second PR for this issue where clicking on the people button, on the organization specific page, will give you the profile overview screen with a tab for organizations. However in this case as it is an organization specific screen, you should just show a single organization, namely itself (the Palisadoes organization). As it's only one organization there will be no need for filters and search. Just like you have, the admin should be able to promote or demote someone, but NOT to Super Admin, as this is an Admin only screen.

[Sejal1411]

okay @palisadoes, Noted! Also, I have some queries:-

1. But if a the person is an USER/ADMIN, then he will be able to see "Overview" section only?
2. How do you categorise "Available" organisations? Those orgs which do not have any members, or Admins or contain only users no Admin?

[palisadoes]

1. "Available" would be organizations that the user's profile isn't currently a member of.
2. Talawa Admin doesn't work the way as intended.
   1. Only Super Admins should be able to see user information button in image 1. They will be able to see ALL organizations in the community.
   2. Admins should NOT see the user image button in image 1. Admins are supposed to only see information related to the organizations for which they have responsibility, not ALL.
3. The work to eventually implement this logic is being addressed with this issue:
   1. Admin: Fix the usage of userType #1445

Focus on this for your first PR. The screens for the specific organization can come later

[Sejal1411]

Hey @palisadoes, I have created the following designs :-

1. As you mentioned, in Image 1, the SUPERADMIN will be able to view all the organisations a person is a member of.

2. Image 2 combines 2 functionalities:- "changing roles" and "removing people" from "Available organisation".
3. Here, when "Edit" button is clicked, this screen appears. We can have a "Search" functionality at the top or full list of people will be loaded at once.

4. In Image 3 I have added "Add User" functionality to "Available organisation".

Please review these changes and suggest any changes if required!

[palisadoes]

1. As mentioned before you need to focus on the Super Admin focused area where the left drawer looks like this where the Users button is highlighted not People:
   
2. As only one user is previously highlighted, then only that user should be visible. Here you have 3. As it is a list of organizations for which roles need to be updated, it would be better just to have a list, versus the cards with an edit role link where the pop up becomes visible
   

[palisadoes]

Using the same cards is going to cause confusion as it looks too much like the select organization screen for the super admin

[Sejal1411]

Hey @palisadoes I have modified the designs. Please have a look and suggest changes if required!

1.In Image1, when the SUPERADMIN clicks the Users section he is taken to "Joined Orgs" by the User.

2. Next, In Image 2 if he clicks "Available Org" he is redirected to this page where he can see all the Organisations User is not a part of. When he clicks "View" button...The left section appears where Users can be added by filling the details.
   

3. In Image3, Other Users joined to this org can be searched, hence role modification and deletion of these users can be done.

[palisadoes]

1. The following are out of scope of this issue and their design elements must be removed:
   1. Adding users
   2. User ratings
2. We need to simplify this
   1. No matter what the sorting option we need the simple tabular format of image 3
   2. The columns for each row should be Organization Name, User Name, Status (member/non-member), Role, Edit
   3. If the User is a member, when clicking Edit:
      1. The Super Admin must have the option of:
         1. Removing the member
         2. Changing the role of the member to one of the UserType enums
   4. If the person is selected is a non-member, when clicking Edit::
      1. The Super Admin must have the option of:
         1. Adding the user as a member
         2. Changing the role of the member to one of the UserType enums

The nature of the relationship of Users and Organizations was implemented incorrectly. The above is a stop gap measure. We'll need to revisit this when the relationship is fixed

• API: Fix the usage of userType talawa-api#1711

[palisadoes]

@rishav-jha-mech @aashimawadhwa We are going to need your assistance in creating the design screens. It will make the work of @Sejal1411 easier

[Sejal1411]

@aashimawadhwa @EshaanAgg could you please review my design with the above suggested modifications...and how should i implement "Edit" button further?

https://www.figma.com/file/ExFxla0Ew7VOzTxboJb0sA/Talawa-Design-System-(Official)-(Copy)?type=design&node-id=5330-830&mode=design&t=26RhT7fmlKPbMkhv-0

[palisadoes]

Thanks. The text should be edit. Otherwise this is OK.

How will you handle the editing options I mentioned previously in your design?

[Sejal1411]

Yes. Will this be done through popup? Or some other way!

[Cioppolo14]

Unassigning due to no activity or open PR.

[NamitBhutani]

I would like to work on this feature request!

[Cioppolo14]

@NamitBhutani Our policy is to assign no more than two issues to each contributor across all repositories. This way everyone gets a chance to participate in the projects. We sometimes give exceptions for more urgent cases and sometimes we lose track, but the policy stands. You have reached your limit, please wait until your existing issues are closed before requesting more issues. You could unassign yourself from one of the other issues too.

[kanhaiya04]

@Cioppolo14 I want to work on this.

[kanhaiya04]

@rishav-jha-mech Is the design done, so that I can start the implementation.

[palisadoes]

@rishav-jha-mech Is the design done, so that I can start the implementation.

1. Use the design elements of this PR, they are mostly the same.
   1. Organization People Revamp design  #1568
2. The Figma design linked in this issues original comment should also be used.

[kanhaiya04]

The nature of the relationship of Users and Organizations was implemented incorrectly. The above is a stop gap measure. We'll need to revisit this when the relationship is fixed

@palisadoes I don't think the backend is implemented properly, as there is no userType per person per organization which is important for this new users screen design.

[palisadoes]

It is on the develop-fixUserType branch in the API

There is an issue to make Admin compatible which has already had a few PRs.

You can coordinate with the person assigned that issue

[palisadoes]

This is one of the last open issues before we merge back into develop

Are we on track for a PR this weekend?

[AVtheking]

@kanhaiya04 if you have any problem in implementing the api's then contact me ,we need to resolves this bug quickly

[palisadoes]

Only 2 issues to go before we are ready to merge back into develop. This is one of them.

[kanhaiya04]

@palisadoes, I've addressed the issues on the Users screen to align with the fixed API in this PR, except for the role field. Feel free to merge it into the develop branch. Once the redesign is complete, I'll create another PR in develop branch.

[palisadoes]

OK. So we only have one PR left to go.

[palisadoes]

Should this be closed? develop-userTypeFix is now merged into develop