Admin: Redesign Organization CRUD screens

[palisadoes]

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

This is a two part issue:

PART 1

We need to update the Organization CRUD screens to match our reference Figma design that can be found on our documentation site:

• https://docs.talawa.io/docs/design/ux/ux-design-system

PART 2

We need to add support for Organization Addresses that replaces the previous Organization Location field in the API

1. Support for the Address functionality in the Organization was created in this PR which had to be reverted because an equivalent Admin issue like this one hadn't been created at the time.
   1. Updated Organization param from location to Address Type. talawa-api#1666
2. When tackling this issue you can test your changes against this PR in a branch of your local API repository and coordinate with the person assigned this API PR to merge your PR and a renewed API PR

Describe the solution you'd like

There are a few affected screens:

Organization Settings

1. Update the Organization Settings screen replacing the API location field with the proposed API Address fields

   1. http://localhost:3000/orgsetting/id=6537904485008f171cf29924 Using the sample demo data
   2. Updated Organization param from location to Address Type. talawa-api#1666

   

Create Organization

1. Update the Create Organization screen to match the UI/UX of the Organization Settings screen

   1. http://localhost:3000/orglist

   

2. To look more in keeping with the new design theme.

   1. Making the appropriate changes to the location field.
   2. Maintaining all other functionality including Create Sample Organization

   

Dashboard View

1. Update the dashboard view to reflect summary Address information versus Location

   1. http://localhost:3000/orglist

   

Edit Organization User Screen

1. Update the screen to reflect summary Address information versus Location

   1. http://localhost:3000/users

   

Organization Screen

1. Update the screen to reflect summary Address information versus Location

   1. http://localhost:3000/orgdash/id=6537904485008f171cf29924 (Using sample data)

   

Describe alternatives you've considered

• N/A

Approach to be followed (optional)

• N/A

Additional context

1. All other functionality must be maintained
2. The level of code coverage for the edited files must not fall
3. All tests must be valid tests of the functionality of our code base
4. We will need to add your Figma page designs to our official Figma document
5. Please plan for this

Potential internship candidates

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

• Student Internship Programs talawa#359

[Anubhav-2003]

@palisadoes Respected sir, I would like to work on this issue.

[AVtheking]

Hey @Anubhav-2003 if you want help in this ,I am ready to help

[shawakash]

@palisadoes what to do with "You are not authorized"?

i have setup the backend using docker and apollo serve is running

[AVtheking]

In your local database go to the user model and update the field adminApproved to true

[Anubhav-2003]

@AVtheking Absolutely sir, actually I am updating the files at the moment with the required mutations, and queries. I will definitely seek your help if I feel overwhelmed, or have any doubts.

Thank you a lot for asking.

[palisadoes]

@Anubhav-2003

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

[Anubhav-2003]

@palisadoes Respected sir,

While working on the issue I have made most of the changes related to queries, and mutations. But, recently I am encountering the error, user:not found while creating organizations, is it a known issue, or got something to do with the latest changes made in the tokens, or local storage to fix infinite reload glitch. Because due to these bugs a lot of my work is currently getting hampered.

Thank You.

[AVtheking]

fetch the latest upstream of the talawa api and if you are using docker to run the server then rebuild the images and restart the server

[Anubhav-2003]

@AVtheking Ok sir, Thank you a lot.

[AVtheking]

And also If you are using sample data then import the latest sample data

[Anubhav-2003]

@AVtheking Respected Sir, I just wanted one help. Can you please tell me where are the translations stored. I mean the keys and their values. For instance, the placeholders and labels in updateOrg, and createOrg, are using the useTranslation git hook to specify keys for fetching the translated string. But in the locales folder of talawa-api, I only found keys for erro codes.

Your help will be appreciated. Thank You.

[palisadoes]

@Anubhav-2003

• Look in talawa-admin/public/locales

[Anubhav-2003]

@palisadoes ok sir, thank you for your help.

[Anubhav-2003]

@palisadoes Respected sir, I have made all the changes required for a successful implementation of the address field, and its use in the ADMIN portal. I am attaching the images of the UI form fields, as I saw it fit. I had a few questions. What approach should we use to store the address, and which fields should we make mandatory.

I have a few options:
First, one is we can call an API for the list of countries, and their respective states / provinces, and then give user the freedom to write their own city name, postal code, and other street level specificity. ( To me, this sounds the most practical.)

Second, call an API to fetch exact street level details (Most professional, and production grade) but maybe expensive, and many remote places might not be accurately present in the data.

Also, in the user table there is not enough space to show the complete address, so at the moment I am just displaying the city name. Please let me know if you propose otherwise.

I am trying to make the colors and design of "createOrganization Modal" to look like the settings page "Update Org", but it is a bit more complicated than expected. So, at the moment I am focusing more on the actual tangible implementations than aesthetics. I will come back to it, once all other things are sorted.

Thank You.

[palisadoes]

1. Use the API PR that is replacing the location type in the organization schema with an address type. Use your best judgement
2. We want the look and feel in the issue description.
3. Open a PR when ready.

Please use your initiative to find an acceptable solution for the PR reviewers

[Anubhav-2003]

@palisadoes ok sir, thank you.