-
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.
setup other pages to handle the new pathway data layout
- Loading branch information
1 parent
694ecc7
commit 30b384f
Showing
5 changed files
with
145 additions
and
124 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
107 changes: 29 additions & 78 deletions
107
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,91 +1,42 @@ | ||
| "use client"; | ||
|
|
||
| import { useState } from "react"; | ||
| import { Competency, Pathway, ContentArea } from "../../../lib/interface"; | ||
| import Link from "next/link"; | ||
|
|
||
| export default function PathwayProgressDetails({ pathway, pathwayId }: { pathway: Pathway, pathwayId: string }) { | ||
| const [collapsed, setCollapsed] = useState(false); | ||
| import { Fragment } from 'react'; | ||
| import { Competency, Pathway, ContentArea } from '../../../lib/interface'; | ||
| import PathwayProgressDetailsCompetencyList from './PathwayProgressDetailsCompetencyList'; | ||
|
|
||
| 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[]); | ||
| acc.push(...contentArea.competencies); | ||
| return acc; | ||
| }, [] as 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.contentAreas)} / {totalCompetencies.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> | ||
| {totalCompetencies.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