Skip to content

#377 Competencies page should display previous reflections table#408

Open
MahoMori wants to merge 21 commits into
mainfrom
377-competencies-page-should-display-previous-reflections-table
Open

#377 Competencies page should display previous reflections table#408
MahoMori wants to merge 21 commits into
mainfrom
377-competencies-page-should-display-previous-reflections-table

Conversation

@MahoMori

@MahoMori MahoMori commented Jul 1, 2022

Copy link
Copy Markdown
Collaborator

Proposed changes

Closes #376, #377 and #383

This shows a page which includes:

  • a drop down table
    • each category name and summary with different background color
    • each competency name and definition
    • date when assessment is taken and circle raitings with hover over effect showing each raiting label (this will be shown only when there's past assessment data)
  • a button to Competency Reflections /questionnaires/categories path

##Screenshot
The last two screenshots are taken by merging 377 branch to Shea's prototype to check the function.
Screenshot 2022-06-30 085349
Screenshot 2022-06-30 085758
Screenshot 2022-06-29 200653
Screenshot (6)

Checklist

  • Are the issues being addressed linked to this PR?
  • Do all commit messages start with the issue number?
  • Are all code changes sufficiently tested?
  • Are there screenshots for UI changes?

MahoMori added 18 commits June 22, 2022 19:34
…e route to CompetenciesView page according to the discussion today
…ompare labels with competencies to show the right rating
…ns-table' of github.com:OpenTree-Education/rhizone-lms into 377-competencies-page-should-display-previous-reflections-table

@ghost ghost left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The table looks great! Really like the colour scheme for the 5 categories.
Great work Maho :)

@achichikalova achichikalova left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Excellent work, Maho!
I love the table; it looks neat and clean.

I have some questions about empty lines; it looks like you are using it to separate different parts of code, but not everywhere. In my opinion, we need to be more consistent with our code.

Comment thread webapp/src/components/CompetenciesDetailTable.tsx Outdated
Comment thread webapp/src/components/CompetenciesDetailTable.tsx Outdated
Comment thread webapp/src/components/CompetenciesDetailTable.tsx Outdated

@Nazanin-Rezaei Nazanin-Rezaei left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

It was a colorful design for UI but some extra line needed to be removed from the code.

Comment thread webapp/src/components/CompetenciesDetailTable.tsx Outdated
@@ -38,6 +38,18 @@ const StyledRating = styled(Rating)({
},
});

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

and this line?

Comment thread webapp/src/components/CompetenciesDetailTable.tsx Outdated
Comment thread webapp/src/components/CompetenciesDetailTable.tsx Outdated
Comment thread webapp/src/components/CompetenciesView.tsx Outdated
Comment thread webapp/src/components/CompetenciesDetailTable.tsx
Comment thread webapp/src/components/CompetenciesView.tsx Outdated
Comment thread webapp/src/components/CompetenciesView.tsx
categoryDescription,
competencies,
}: DetailTableProps) => {
const [open, setOpen] = React.useState(false);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

useState can directly be destructured in the import so that useState() can be utilized directly instead of React.useState()

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

Good point! I changed code to import useState

<Grid container justifyContent="center">
<Grid item xs={12}>
<Box textAlign="center">
<Button variant="contained" sx={{ my: 5 }}>

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

What page should the user be shown on clicking this "Take Assessment" button?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

I believe it takes to the assessment page with five pictures (CategoriesCompetenciesPage.tsx which @achichikalova was working on).

@seidior seidior changed the title 377 Competencies page should display previous reflections table #377 Competencies page should display previous reflections table Nov 25, 2022
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.

Competencies page should display previous reflections and link to reflection assessments.

4 participants