thingaha / thingaha-web Goto Github PK
View Code? Open in Web Editor NEWWeb Application for Thingaha Donation Management
Web Application for Thingaha Donation Management
change, address, attendance, school, transfer, user get by id query result to singular form .
If the designated format already singular, neglect it.
We need to do a few small improvements to User List page and User Form.
User list page currently have functionality to add new user but editing a user is not implemented yet.
Also we would want to add a User detail page too so that we can link a user to its detail page from other pages.
Please re-use New user form.
Coming soon
Currently, whenever we refresh the page, we are redirected to login page even though we already logged in.
Please persist in the login state and support logout functionality.
In address management page, we want to show which record a given address is belonged to. For example, if an address is a school address, we want to show a link to school.
So, we need that data in the API response. The expected format for each address is as follow:
{
"id": 1,
"addressable": {
"id": 1,
"name": "Maung Maung",
"type": "Student"
},
"division": "ayeyarwaddy",
"district": "Maubin",
"township": "Nyaungdon",
"street_address": "RZarni Road"
}
Please refer to backend api docs here.
For draft server json, please refer here.
Mockups
To know who is current user, we need more information than just access token from login endpoint.
Please update login endpoint to return the following information:
{
access_token: '...',
user: {
id: 1,
email: '[email protected]',
username: 'moemoe'
}
}
Also, please update the error response format to this format:
{
errors: [
{
error_code: "E0001",
reason: "Validation Failed",
description: "Invalid email or password."
}
]
}
Create login page for the app and implement storing JWT in local storage.
current action in local server is created and read ->
http://localhost:5000/api/v1/user
POST body
{
"name": "khinezar4",
"email": "[email protected]",
"password" : "123",
"role": "admin",
"country": "mm"
"division": "ayeyarwady",
"district": "maubin",
"township": "nyaungdon",
"street_address": "Rzarni Road"
}
desired format:
https://github.com/thingaha/thingaha-web/blob/master/draft_server/sample_data/users.json
Please referenc this for backend setup
adding API authentication for api call
use json web token (jwt)
Address management page is to manage various types of addresses that we create through the app in one place. There are three types of records that will be associated with an address.
We will provide the associated record as addresseable
in the Address record json. The example response format is added in the draft server here.
We will be supporting search but it is not necessary to implement search in this ticket. We're planning to have separate issues search in various pages later.
Setup Create React App setup with basic packages
api/v1/users/search?query=XXX
api/v1/users?role=XXXX
api/v1/users?country=XXXX
Backend Data Sample Format
https://github.com/thingaha/thingaha-web/blob/master/draft_server/sample_data/extrafunds.json
Create UI design for Attendance Page
The draft attendance data is here
After the project ENV setup function of db_migrate, db_seed, insert the record via API can't insert correctly.
For example,
User data seed is 1 row for Users
table.
Then, User creates from API fails for the first request and throw an error.
db_seed.sh
already insert id:1
for user. When creating the user via API, throw an error for ID:1
ERROR reason, Primary KEY ERROR
Since school api is ready now, we should implement actual backend api calls with School page while implementing pagination structure altogether.
Desired Format
https://github.com/thingaha/thingaha-web/blob/master/draft_server/sample_data/extrafunds.json
Sample output for user get API
desired format:
https://github.com/thingaha/thingaha-web/blob/master/draft_server/sample_data/addresses.json
We need a page to manage students.
Implement student list page using student draft api. (https://github.com/thingaha/thingaha-web/blob/master/draft_server/sample_data/students.json)
deactivated_at
set need to be grayed out. (or use some other visual cue)Currently, we don't have paginations and limits for APIs.
adding paginations and limit, default limit for all APIs
We need to be able to add new users and edit users.
The idea is to have an add user
button above users table and when clicked, show a popup form with the following fields:
Potentially use material UI modal and forms. For now, just handle user creation with a dynamic in-memory array in reducer. We'll have a separate ticket for backend integration.
Consider using a form library for react. eg. https://formik.org/
Data Excel files
2020-2021 Data
https://docs.google.com/spreadsheets/d/1KV6HliHit2_u5L1kd2zVNSRc70mtsDMm5oIc02Cs2Y4/edit?usp=sharing
2019-2020 Data
https://docs.google.com/spreadsheets/d/1U4kvQ1KBSfY_aXU5QAqnjG5V6dhOWDkTKibXfM345MQ/edit?usp=sharing
2018-2019 Data
https://docs.google.com/spreadsheets/d/1Lavtz1pqH_rd3Fs6LSwfRPJ_qxfbXrOEHJYH2uv7dnQ/edit?usp=sharing
2017-2018 Data => need to change Unicode
https://docs.google.com/spreadsheets/d/1ESlGja8kIgyt-HcajSvV3BWF5CnhWNC1ir1ydZPNYL0/edit?usp=sharing
2016-2017 Data => need to change Unicode
https://docs.google.com/spreadsheets/d/1SUPxTxuRBqzzm1OGsDAvDLPs9tpr_yvtP3vtQmOnVeg/edit?usp=sharing
please reference
https://github.com/thingaha/thingaha-web/blob/master/backend/src/db_seed.py
We have three user types in User role.
admin
sub-admin
donator
Define APIs for only admin can do
Define APIs for only sub-admin can do
Define APIs for only donator can do
Define admin Functions
Define sub-admin functions
Define donator admins
Create Entity Chart for User Role management
Admin needs to manage schools so that we can map which student attends which school.
We just need a normal CRUD page for schools.
School record will have:
For UI mockup, we're thinking of a simple card style list view just like in users page.
For new school and edit school form, we prefer popup form if possible.
Added pagination for future reference. It hasn't been implemented by backend yet. We can update it later.
This form layout should be shared between new record form and edit record form.
We're going to store separate parts for address. For now, we can just embed address fields as part of school form component. But we would like to extract one single address fields component in the future because we have a couple place to share address form.
Draw Database Relationship Diagram
Sidebar menu is currently not responsive.
Please convert it into drawer menu from Material UI.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.