-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #81 from CassandraGoose/develop
Develop
- Loading branch information
Showing
18 changed files
with
981 additions
and
464 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
108 changes: 32 additions & 76 deletions
108
app/dashboard/[pathway]/_components/PathwayProgressDetails.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,86 +1,42 @@ | ||
| "use client"; | ||
| import { Fragment } from 'react'; | ||
| import { Competency, Pathway, ContentArea } from '../../../lib/interface'; | ||
| import PathwayProgressDetailsCompetencyList from './PathwayProgressDetailsCompetencyList'; | ||
|
|
||
| import { useState } from "react"; | ||
| import { Competency, Pathway } from "../../../lib/interface"; | ||
| import Link from "next/link"; | ||
| export default function PathwayProgressDetails({ | ||
| pathway, | ||
| pathwayId, | ||
| }: { | ||
| pathway: Pathway; | ||
| pathwayId: string; | ||
| }) { | ||
| const totalCompetencies = pathway.contentAreas.reduce((acc, contentArea) => { | ||
| acc.push(...contentArea.competencies); | ||
| return acc; | ||
| }, [] as Competency[]); | ||
|
|
||
| export default function PathwayProgressDetails({ pathway, pathwayId }: { pathway: Pathway, pathwayId: string }) { | ||
| const [collapsed, setCollapsed] = useState(false); | ||
|
|
||
| const getCompletedCompetencies = (competencies: Competency[]) => { | ||
| return competencies.reduce((acc, competency) => { | ||
| const getCompletedCompetencies = (contentAreas: ContentArea[]) => { | ||
| return totalCompetencies.reduce((acc, competency) => { | ||
| if (competency.proofs && competency.proofs.length > 0) acc++; | ||
| return acc; | ||
| }, 0); | ||
| } | ||
|
|
||
| const checkCompetencyCompleted = (competency: Competency) => { | ||
| return competency.proofs && competency.proofs.length > 0; | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex justify-center items-start mt-0"> | ||
| <div | ||
| className="w-full border border-secondary bg-bright mt-16 rounded-md p-4" | ||
| > | ||
| <div> | ||
| <div className="flex justify-between items-center"> | ||
| <p className="text-xl" data-testid="competency-progress"> | ||
| {getCompletedCompetencies(pathway.competencies)} / {pathway.competencies.length} competencies met | ||
| </p> | ||
| <button | ||
| data-testid="toggle-competency-details" | ||
| className="text-4xl" | ||
| aria-controls={`${pathway.title}-details`} | ||
| aria-expanded={!collapsed} | ||
| onClick={() => setCollapsed(!collapsed)} | ||
| > | ||
| {collapsed ? "-" : "+"} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div | ||
| className={` ${collapsed ? "block" : "hidden"} overflow-x-auto`} | ||
| id={`${pathway.title}-details`} | ||
| > | ||
| <table className="table table-xs"> | ||
| <thead> | ||
| <tr> | ||
| <th className="text-primary">Completed</th> | ||
| <th className="text-primary">Competency</th> | ||
| <th className="text-primary">Description</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {pathway.competencies.map((competency: Competency) => ( | ||
| <tr key={competency.id}> | ||
| <td> | ||
| <span className="flex items-center space-x-3 pl-4 text-xl" data-testid="completed-check"> | ||
| {checkCompetencyCompleted(competency) ? '✓' : null} | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <span className="flex items-center space-x-3"> | ||
| <p>{competency.title}</p> | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <p>{competency.description}</p> | ||
| </td> | ||
| <td> | ||
| <Link | ||
| data-testid="view-proofs" | ||
| href={`/dashboard/${pathwayId}/${competency.id}`} | ||
| className='btn btn-secondary'> | ||
| Proof | ||
| </Link> | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| <div className="mt-0 flex flex-col items-start justify-center space-y-6"> | ||
| <p className="text-xl" data-testid="competency-progress"> | ||
| {getCompletedCompetencies(pathway.contentAreas)} /{' '} | ||
| {totalCompetencies.length} competencies met | ||
| </p> | ||
| {pathway.contentAreas.map((contentArea) => { | ||
| return ( | ||
| <Fragment key={contentArea.id}> | ||
| <PathwayProgressDetailsCompetencyList | ||
| contentArea={contentArea} | ||
| pathwayId={pathwayId} | ||
| /> | ||
| </Fragment> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| } |
76 changes: 76 additions & 0 deletions
76
app/dashboard/[pathway]/_components/PathwayProgressDetailsCompetencyList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| 'use client'; | ||
|
|
||
| import { useState } from 'react'; | ||
| import Link from 'next/link'; | ||
| import { Competency, ContentArea } from '../../../lib/interface'; | ||
|
|
||
| export default function PathwayProgressDetailsCompetencyList({ contentArea, pathwayId}: { contentArea: ContentArea, pathwayId: string }) { | ||
| const [collapsed, setCollapsed] = useState(false); | ||
|
|
||
| const checkCompetencyCompleted = (competency: Competency) => { | ||
| return competency.proofs && competency.proofs.length > 0; | ||
| }; | ||
|
|
||
| return (<div key={contentArea.id} className="w-full rounded-md border border-secondary bg-bright p-4"> | ||
| <div> | ||
| <div className="flex items-center justify-between"> | ||
| <p className="text-xl">{contentArea.title}</p> | ||
|
|
||
| <button | ||
| data-testid="toggle-competency-details" | ||
| className="text-4xl" | ||
| aria-controls={`${contentArea.title}-details`} | ||
| aria-expanded={!collapsed} | ||
| onClick={() => setCollapsed(!collapsed)} | ||
| > | ||
| {collapsed ? '-' : '+'} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div | ||
| className={` ${collapsed ? 'block' : 'hidden'} overflow-x-auto`} | ||
| id={`${contentArea.title}-details`} | ||
| > | ||
| <table className="table table-xs"> | ||
| <thead> | ||
| <tr> | ||
| <th className="text-primary">Completed</th> | ||
| <th className="text-primary">Competency</th> | ||
| <th className="text-primary">Description</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {contentArea.competencies.map((competency: Competency) => ( | ||
| <tr key={competency.id}> | ||
| <td> | ||
| <span | ||
| className="flex items-center space-x-3 pl-4 text-xl" | ||
| data-testid="completed-check" | ||
| > | ||
| {checkCompetencyCompleted(competency) ? '✓' : null} | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <span className="flex items-center space-x-3"> | ||
| <p>{competency.title}</p> | ||
| </span> | ||
| </td> | ||
| <td> | ||
| <p>{competency.description}</p> | ||
| </td> | ||
| <td> | ||
| <Link | ||
| data-testid="view-proofs" | ||
| href={`/dashboard/${pathwayId}/${competency.id}`} | ||
| className="btn btn-secondary" | ||
| > | ||
| Proof | ||
| </Link> | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div>); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.