MUI content pages #130

sidravi1 · 2024-03-17T15:51:04Z

Reviewer: @amiraliemami

Estimate: 1 hrs

Ticket

Fixes: 405

Description, Motivation and Context

Goal

This is the first PR for the admin app.
The main content page with card + add, edit, delete now work.

Changes

Basic content grid
Alerts and Snackbars
Fixed warnings and errors in console

How has this been tested?

Start backend as per dev instructions (so that it runs on "localhost:8000")
- There's no auth in the admin app yet, so we need to use a bearer token. To get this, go to the swaggerUI, login, send a call to a content endpoint and copy the Authorization bearer token that's generated.
In admin_app_2:
- Add a file called temp_secrets.json with the following in it: {"ACCESS_TOKEN": "token from SwaggerUI"}. This is read into admin_app_2/src/utils/api.js.
- run npm i
- run npm run dev

To do

Next up:

auth and login page
playground
improve style based on figma
filters

Checklist

Fill with x for completed. Delete any lines that are not relevant

My code follows the style guidelines of this project
I have reviewed my own code to ensure good quality
I have tested the functionality of my code to ensure it works as intended
I have resolved merge conflicts
I have updated the automated tests (if applicable)
I have updated the requirements (if applicable)
I have updated the README file (if applicable)
I have updated affected documentation (if applicable)

… page is broken.

amiraliemami

Thanks for the additions @sidravi1 ! Approved with some comments :) (committed some simple cleanups too)

admin_app_2/src/app/content/edit/page.tsx

admin_app_2/src/components/NavBar.tsx

admin_app_2/src/utils/api.ts

admin_app_2/src/app/content/page.tsx

admin_app_2/src/app/content/edit/page.tsx

admin_app_2/src/components/NavBar.tsx

admin_app_2/src/components/ContentCard.tsx

Basic content grid Alerts and Snackbars Fixed warnings and errors in console Better modals Better validation errors

* MUI content pages (#130) Basic content grid Alerts and Snackbars Fixed warnings and errors in console Better modals Better validation errors * address leftover PR#130 comments * remove unnecessary spacing on cards * Make page buttons circular and smaller * cleanup imports * add max count to title input * Revert text box identifiers to reflect wireframe * Cleanup text boxes in Edit * add date back to cards to reflect wireframe * date to 12hr format * add space to bottom of page * reduce cardgrid density * change all instances of content_id to number (some where string) * improve delete button and modal * use the Content type in main grid * Add skeleton of search bar * Implement search functionality! * remove unnecessary wrapper * Move SearchBar and PageNavigation to components * Move sx parameters out of SearchBar component * Make CardsGrid backdrop persist even without cards on it * Convert Box to FlexBox and revert to 4-columns of cards on large screens * NavBar: add homepage link to AAQ logo * NavBar: enable links (but disable inactive pages) * NavBar: Make logo and user icon smaller * Set max cards back to 12 * Use content_id as key instead of index in Grid component * PR feedback fixes * cleanup imports * Simplify editAccess check boolean (use !editAccess) * Widen gap between date and buttons on cards --------- Co-authored-by: Sid Ravinutala <[email protected]>

Basic content grid Alerts and Snackbars Fixed warnings and errors in console Better modals Better validation errors

* MUI content pages (#130) Basic content grid Alerts and Snackbars Fixed warnings and errors in console Better modals Better validation errors * address leftover PR#130 comments * remove unnecessary spacing on cards * Make page buttons circular and smaller * cleanup imports * add max count to title input * Revert text box identifiers to reflect wireframe * Cleanup text boxes in Edit * add date back to cards to reflect wireframe * date to 12hr format * add space to bottom of page * reduce cardgrid density * change all instances of content_id to number (some where string) * improve delete button and modal * use the Content type in main grid * Add skeleton of search bar * Implement search functionality! * remove unnecessary wrapper * Move SearchBar and PageNavigation to components * Move sx parameters out of SearchBar component * Make CardsGrid backdrop persist even without cards on it * Convert Box to FlexBox and revert to 4-columns of cards on large screens * NavBar: add homepage link to AAQ logo * NavBar: enable links (but disable inactive pages) * NavBar: Make logo and user icon smaller * Set max cards back to 12 * Use content_id as key instead of index in Grid component * PR feedback fixes * cleanup imports * Simplify editAccess check boolean (use !editAccess) * Widen gap between date and buttons on cards --------- Co-authored-by: Sid Ravinutala <[email protected]>

* MUI content pages (#130) Basic content grid Alerts and Snackbars Fixed warnings and errors in console Better modals Better validation errors * Mui admin app auth (#134) * sort results by content_id * Auth and access level * fixes from review * HOTFIX: Layout import missing from "ProtectedComponent.tsx" * MUI improvements + search bar + navbar activation (#131) * MUI content pages (#130) Basic content grid Alerts and Snackbars Fixed warnings and errors in console Better modals Better validation errors * address leftover PR#130 comments * remove unnecessary spacing on cards * Make page buttons circular and smaller * cleanup imports * add max count to title input * Revert text box identifiers to reflect wireframe * Cleanup text boxes in Edit * add date back to cards to reflect wireframe * date to 12hr format * add space to bottom of page * reduce cardgrid density * change all instances of content_id to number (some where string) * improve delete button and modal * use the Content type in main grid * Add skeleton of search bar * Implement search functionality! * remove unnecessary wrapper * Move SearchBar and PageNavigation to components * Move sx parameters out of SearchBar component * Make CardsGrid backdrop persist even without cards on it * Convert Box to FlexBox and revert to 4-columns of cards on large screens * NavBar: add homepage link to AAQ logo * NavBar: enable links (but disable inactive pages) * NavBar: Make logo and user icon smaller * Set max cards back to 12 * Use content_id as key instead of index in Grid component * PR feedback fixes * cleanup imports * Simplify editAccess check boolean (use !editAccess) * Widen gap between date and buttons on cards --------- Co-authored-by: Sid Ravinutala <[email protected]> * Replace old admin app with new MUI admin app (#136) * temp - remove old `src` * temp - replace/remove files * move logo png to inside admin app * Add condition for catching missing content_id * TEMP FIX: Disable missingSuspenseWithCSRBailout error. See Jira ticket 424 for details. --------- Co-authored-by: Sid Ravinutala <[email protected]>