Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create Admin Page frontend #67

Draft
wants to merge 38 commits into
base: main
Choose a base branch
from

Conversation

Majestic9169
Copy link

@Majestic9169 Majestic9169 commented Jun 4, 2024

Tasks

  • create table to list question papers
  • make question paper details editable
  • add efficient aprove/reject mechanism
  • make table sortable by all fields
  • filter capability based on approval status (this is redundant by making the table sortable)
  • show approved by/rejected by
  • modal to view pdf (optional)

Issues

  • data validation between course names and course codes
  • unable to style focused element in solid-select (found the element but still unable to style it the way I want)
  • unable to style disabled element

Fixes #63

harshkhandeparkar and others added 3 commits May 31, 2024 15:52
create dummy data to display
create PDFtable and PDFListElement components
create IAdminResult interface
Copy link

vercel bot commented Jun 4, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
iqps ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 19, 2024 5:35pm

left click to approve, click again to mark pending
right click to reject, click again to mark pending
alt + z toggles edit mode
next task is to add keyboard shortcuts for approve/reject and move autofocus in a convenient way, then i will get started on styling, sorting, and filtering
frontend/src/components/PDFLister.tsx Outdated Show resolved Hide resolved
<td><input type="string" value={questionPaperDetails.course_code} onInput={(e) => setQuestionPaperDetails("course_code", e.target.value)} readonly={!props.isEditMode}/></td>
<td><input type="string" value={questionPaperDetails.course_name} onInput={(e) => setQuestionPaperDetails("course_name", e.target.value)} readonly={!props.isEditMode}/></td>
<td><input type="string" value={questionPaperDetails.exam} onInput={(e) => setQuestionPaperDetails("exam", e.target.value)} readonly={!props.isEditMode}/></td>
<td><input type="string" value={questionPaperDetails.semester} onInput={(e) => setQuestionPaperDetails("semester", e.target.value)} readonly={!props.isEditMode}/></td>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can make these select inputs since they only have a few options.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done, however I haven't been able validate that the course_code and course_name match

one idea I had was to have the course_name display the value from the courses.json file for the corresponding key, this should be doable using the format method in solid-select, however I wasn't able to figure it out. some help with that would be quite nice

frontend/src/components/PDFLister.tsx Outdated Show resolved Hide resolved
setIsEditMode(!isEditMode());
}

createShortcut(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we really need an "edit mode" for the entire page. We can have an edit button per paper that opens a modal that will have a form for editing.

Copy link
Author

@Majestic9169 Majestic9169 Jun 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'll implement this once i make the modal to view the pdf, until then if we're just using the new tab link functionality i feel like being able to see all the question papers together will make the process faster

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see all the question papers together will make the process faster

Hmm, true. In that case, instead of an edit mode, make an edit button that becomes enabled if something is changed. Clicking on it will update the data on the backend.

Copy link
Author

@Majestic9169 Majestic9169 Jun 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isEditMode is removed

i'm still not very happy with my current approve/reject functionality, what other methods would you suggest, keeping in mind speed of approval?
is a button fine?
do we need further confirmation before approval?
how can i make this process faster and error free?
these are some questions I need to answer before I completely fix this, until then I'll make the table sortable

used solid-select library
took me forever to realise that I needed the createOptions thing
looking further is adding dropdown for course_names in such a way to validate input with course_codes
need help with validating input between course_codes and course_names
adding dropdown input to remaining inputs next
fix: remove isEditable mode, will be replaced soon
year dropdown input shows every year since 1951, easy to customise
need to style table more
need to fix the trash approve/reject workflow
need to figure out how to validate the input/output with solid-select
@harshkhandeparkar
Copy link
Member

I think we can skip the modal part. A link to the pdf is more than enough, it'll open in the browser's pdf viewer.

need to style focused element to be more visible, couldn't figure out solid-select styling
removed the coursesSelectMenu component because it was redundant
next would be sorting capability ig because I think I have an idea of how to fix that
@Majestic9169
Copy link
Author

the modal part would probably be the last step, so yeah, we should have something functional before we get to that. I don't think we need to scrap it completely just yet though, we may be able to do something cool to make the approval process really fast with it

…details

leads to fix: questionpaper year is being updated now
logic looks a little complicated rn, will try to simplify
looking into making table elements searchable
still need to make good approve/reject mechanism
@Majestic9169
Copy link
Author

I thought captions were useful if the table didn't load or for accessibility reasons

@harshkhandeparkar
Copy link
Member

I thought captions were useful if the table didn't load or for accessibility reasons

Hmm, it looked weird in that place. Maybe we can add it back in the future when we (probably) add more features to the admin dashboard - stats etc.

@harshkhandeparkar
Copy link
Member

If the dashboard has multiple sections it would make more sense. Right now it is just a way to approve uploaded papers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Set up Admin Dashboard Page
2 participants