From 7dbb8aabf854af650af6ecea89b5ddfbc8b7113a Mon Sep 17 00:00:00 2001 From: Wiktoria Salamon Date: Mon, 22 Jul 2024 11:42:19 +0200 Subject: [PATCH 1/9] refactor: extract reusable component from AdvancementLevel --- .../ExpandableSection.interface.ts | 7 ++ .../ExpandableSection/ExpandableSection.tsx | 43 ++++++++++ .../common/ExpandableSection/index.ts | 1 + .../AdvancementLevel.hooks.ts | 0 .../AdvancementLevel.interface.ts | 3 - .../AdvancementLevel/AdvancementLevel.tsx | 68 +++++++++++++--- .../AdvancemetLevel.interface.ts | 0 .../modules/BucketCard/BucketCard.tsx | 4 +- .../modules/LevelDots/LevelDots.interface.ts | 3 + .../modules/LevelDots/LevelDots.tsx | 17 ++++ .../constants.ts | 0 .../src/components/modules/LevelDots/index.ts | 1 + .../pages/BucketDetails/BucketDetails.tsx | 2 +- .../AdvancementLevel/AdvancementLevel.tsx | 80 ------------------- .../modules/AdvancementLevel/index.ts | 1 - 15 files changed, 131 insertions(+), 99 deletions(-) create mode 100644 frontend/src/components/common/ExpandableSection/ExpandableSection.interface.ts create mode 100644 frontend/src/components/common/ExpandableSection/ExpandableSection.tsx create mode 100644 frontend/src/components/common/ExpandableSection/index.ts rename frontend/src/components/{pages/BucketDetails => }/modules/AdvancementLevel/AdvancementLevel.hooks.ts (100%) delete mode 100644 frontend/src/components/modules/AdvancementLevel/AdvancementLevel.interface.ts rename frontend/src/components/{pages/BucketDetails => }/modules/AdvancementLevel/AdvancemetLevel.interface.ts (100%) create mode 100644 frontend/src/components/modules/LevelDots/LevelDots.interface.ts create mode 100644 frontend/src/components/modules/LevelDots/LevelDots.tsx rename frontend/src/components/modules/{AdvancementLevel => LevelDots}/constants.ts (100%) create mode 100644 frontend/src/components/modules/LevelDots/index.ts delete mode 100644 frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx delete mode 100644 frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/index.ts diff --git a/frontend/src/components/common/ExpandableSection/ExpandableSection.interface.ts b/frontend/src/components/common/ExpandableSection/ExpandableSection.interface.ts new file mode 100644 index 00000000..364ec4e0 --- /dev/null +++ b/frontend/src/components/common/ExpandableSection/ExpandableSection.interface.ts @@ -0,0 +1,7 @@ +export interface ExpandableSectionProps { + title: string; + description?: string; + showVerticalLine?: boolean; + open: boolean; + onClick: () => void; +} diff --git a/frontend/src/components/common/ExpandableSection/ExpandableSection.tsx b/frontend/src/components/common/ExpandableSection/ExpandableSection.tsx new file mode 100644 index 00000000..4656f0e8 --- /dev/null +++ b/frontend/src/components/common/ExpandableSection/ExpandableSection.tsx @@ -0,0 +1,43 @@ +import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon'; +import { Typography } from '@app/components/common/Typography'; +import { ExpandableSectionProps } from '@app/components/common/ExpandableSection/ExpandableSection.interface'; +import { FC, PropsWithChildren } from 'react'; + +export const ExpandableSection: FC> = ({ + onClick, + open, + title, + description, + showVerticalLine, + children, +}) => { + return ( +
+
+ + {showVerticalLine &&
} +
+
+ + {open && children} +
+
+ ); +}; diff --git a/frontend/src/components/common/ExpandableSection/index.ts b/frontend/src/components/common/ExpandableSection/index.ts new file mode 100644 index 00000000..3bef8c21 --- /dev/null +++ b/frontend/src/components/common/ExpandableSection/index.ts @@ -0,0 +1 @@ +export { ExpandableSection } from './ExpandableSection'; diff --git a/frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/AdvancementLevel.hooks.ts b/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.hooks.ts similarity index 100% rename from frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/AdvancementLevel.hooks.ts rename to frontend/src/components/modules/AdvancementLevel/AdvancementLevel.hooks.ts diff --git a/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.interface.ts b/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.interface.ts deleted file mode 100644 index 2d580c66..00000000 --- a/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.interface.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface AdvancementLevelProps { - level?: number; -} diff --git a/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx b/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx index 3196400c..4756a7c4 100644 --- a/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx +++ b/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx @@ -1,17 +1,61 @@ -import { AdvancementLevelProps } from './AdvancementLevel.interface'; -import { MAX_LEVEL, MIN_LEVEL } from './constants'; +'use client'; +import { AccordionCard } from '@app/components/common/AccordionCard'; +import { AccordionList } from '@app/components/common/AccordionList'; +import { Modal } from '@app/components/common/Modal'; +import { AdvancementLevelProps } from './AdvancemetLevel.interface'; +import { useAdvancementLevel } from './AdvancementLevel.hooks'; +import { Markdown } from '@app/components/common/Markdown'; +import { Button } from '@app/components/common/Button'; +import { ExpandableSection } from '@app/components/common/ExpandableSection'; -export const AdvancementLevel = ({ level }: AdvancementLevelProps) => { - const currentLevel = Math.min(Math.max(level ?? MIN_LEVEL, MIN_LEVEL), MAX_LEVEL); +export const AdvancementLevel: React.FC = ({ showVerticalLine, data, open, onClick }) => { + const { hideModal, openModal, modalOpen } = useAdvancementLevel(); + + const { advancementLevel, description, projects, categories } = data; + const shouldBeExpandedByDefault = Object.keys(data.categories).length === 1; return ( -
- {[...Array(currentLevel)].map((_, idx) => ( -
- ))} - {[...Array(MAX_LEVEL - currentLevel)].map((_, idx) => ( -
- ))} -
+ + <> + {projects.length > 0 && ( + + )} + {Object.entries(categories).map(([category, skills]) => ( + + ({ + key: name, + title: name, + children: description ?

{description}

: undefined, + }))} + /> + + ))} + + {projects.map(({ title, overview }) => ( +
+

{title}

+
+ +
+
+ ))} + + + ); }; diff --git a/frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/AdvancemetLevel.interface.ts b/frontend/src/components/modules/AdvancementLevel/AdvancemetLevel.interface.ts similarity index 100% rename from frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/AdvancemetLevel.interface.ts rename to frontend/src/components/modules/AdvancementLevel/AdvancemetLevel.interface.ts diff --git a/frontend/src/components/modules/BucketCard/BucketCard.tsx b/frontend/src/components/modules/BucketCard/BucketCard.tsx index 86788486..c976a94c 100644 --- a/frontend/src/components/modules/BucketCard/BucketCard.tsx +++ b/frontend/src/components/modules/BucketCard/BucketCard.tsx @@ -2,7 +2,7 @@ import Link from 'next/link'; import { BucketCardProps } from './BucketCard.interface'; import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon'; import { Typography } from '@app/components/common/Typography'; -import { AdvancementLevel } from '@app/components/modules/AdvancementLevel'; +import { LevelDots } from '@app/components/modules/LevelDots'; export const BucketCard = ({ bucket, withLevel, href }: BucketCardProps) => { const { bucketName, description } = bucket; @@ -22,7 +22,7 @@ export const BucketCard = ({ bucket, withLevel, href }: BucketCardProps) => { Level # - +
)}
diff --git a/frontend/src/components/modules/LevelDots/LevelDots.interface.ts b/frontend/src/components/modules/LevelDots/LevelDots.interface.ts new file mode 100644 index 00000000..e9a1feee --- /dev/null +++ b/frontend/src/components/modules/LevelDots/LevelDots.interface.ts @@ -0,0 +1,3 @@ +export interface LevelDotsProps { + level?: number; +} diff --git a/frontend/src/components/modules/LevelDots/LevelDots.tsx b/frontend/src/components/modules/LevelDots/LevelDots.tsx new file mode 100644 index 00000000..393b3db7 --- /dev/null +++ b/frontend/src/components/modules/LevelDots/LevelDots.tsx @@ -0,0 +1,17 @@ +import { LevelDotsProps } from './LevelDots.interface'; +import { MAX_LEVEL, MIN_LEVEL } from './constants'; + +export const LevelDots = ({ level }: LevelDotsProps) => { + const currentLevel = Math.min(Math.max(level ?? MIN_LEVEL, MIN_LEVEL), MAX_LEVEL); + + return ( +
+ {[...Array(currentLevel)].map((_, idx) => ( +
+ ))} + {[...Array(MAX_LEVEL - currentLevel)].map((_, idx) => ( +
+ ))} +
+ ); +}; diff --git a/frontend/src/components/modules/AdvancementLevel/constants.ts b/frontend/src/components/modules/LevelDots/constants.ts similarity index 100% rename from frontend/src/components/modules/AdvancementLevel/constants.ts rename to frontend/src/components/modules/LevelDots/constants.ts diff --git a/frontend/src/components/modules/LevelDots/index.ts b/frontend/src/components/modules/LevelDots/index.ts new file mode 100644 index 00000000..1fbec75f --- /dev/null +++ b/frontend/src/components/modules/LevelDots/index.ts @@ -0,0 +1 @@ +export { LevelDots } from './LevelDots'; diff --git a/frontend/src/components/pages/BucketDetails/BucketDetails.tsx b/frontend/src/components/pages/BucketDetails/BucketDetails.tsx index bbc46230..9ebbe122 100644 --- a/frontend/src/components/pages/BucketDetails/BucketDetails.tsx +++ b/frontend/src/components/pages/BucketDetails/BucketDetails.tsx @@ -1,6 +1,6 @@ 'use client'; import { BucketDetailsProps } from './BucketDetails.interface'; -import { AdvancementLevel } from './modules/AdvancementLevel'; +import { AdvancementLevel } from '@app/components/modules/AdvancementLevel'; import { Typography } from '@app/components/common/Typography'; import { Breadcrumbs } from '@app/components/modules/Breadcrumbs'; import { useBucketDetails } from './BucketDetails.hooks'; diff --git a/frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx b/frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx deleted file mode 100644 index 98beb23c..00000000 --- a/frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx +++ /dev/null @@ -1,80 +0,0 @@ -'use client'; -import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon'; -import { AccordionCard } from '@app/components/common/AccordionCard'; -import { AccordionList } from '@app/components/common/AccordionList'; -import { Modal } from '@app/components/common/Modal'; -import { AdvancementLevelProps } from './AdvancemetLevel.interface'; -import { useAdvancementLevel } from './AdvancementLevel.hooks'; -import { Markdown } from '@app/components/common/Markdown'; -import { Typography } from '@app/components/common/Typography'; -import { Button } from '@app/components/common/Button'; - -export const AdvancementLevel: React.FC = ({ showVerticalLine, data, open, onClick }) => { - const { hideModal, openModal, modalOpen } = useAdvancementLevel(); - - const { advancementLevel, description, projects, categories } = data; - const shouldBeExpandedByDefault = Object.keys(data.categories).length === 1; - - return ( -
-
- - {showVerticalLine &&
} -
-
- - {open && ( - <> - {projects.length > 0 && ( - - )} - {Object.entries(categories).map(([category, skills]) => ( - - ({ - key: name, - title: name, - children: description ?

{description}

: undefined, - }))} - /> - - ))} - - )} -
- - {projects.map(({ title, overview }) => ( -
-

{title}

-
- -
-
- ))} - -
- ); -}; diff --git a/frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/index.ts b/frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/index.ts deleted file mode 100644 index d167aa39..00000000 --- a/frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { AdvancementLevel } from './AdvancementLevel'; From cb56fae0dc4a4f31ee0bf09fec3529907b59585a Mon Sep 17 00:00:00 2001 From: Wiktoria Salamon Date: Wed, 24 Jul 2024 13:22:30 +0200 Subject: [PATCH 2/9] feat: add BucketDetails page for MySpace --- .../(app)/(root)/my-space/[bucket]/page.tsx | 14 +---- .../AccordionList/AccordionList.interface.ts | 6 +- .../common/AccordionList/AccordionList.tsx | 9 ++- .../AccordionList/AccordionListItem.tsx | 10 +++- .../ExampleWayToPassLevelModal.interface.ts | 7 +++ .../ExampleWayToPassLevelModal.tsx | 18 ++++++ .../ExampleWayToPassLevelModal/index.ts | 1 + .../pages/BucketDetails/BucketDetails.tsx | 2 +- .../AdvancementLevel.hooks.ts | 0 .../AdvancementLevel/AdvancementLevel.tsx | 22 +++---- .../AdvancemetLevel.interface.ts | 0 .../modules/AdvancementLevel/index.ts | 0 .../MySpaceBucketDetails.hooks.ts | 14 +++++ .../MySpaceBucketDetails.interface.ts | 5 ++ .../MySpaceBucketDetails.tsx | 57 +++++++++++++++++++ .../pages/MySpaceBucketDetails/index.ts | 1 + .../AdvancementLevel.hooks.ts | 14 +++++ .../AdvancementLevel.interface.ts | 8 +++ .../AdvancementLevel/AdvancementLevel.tsx | 54 ++++++++++++++++++ .../modules/AdvancementLevel/index.ts | 1 + .../pages/MySpaceBucketDetails/utils.tsx | 31 ++++++++++ frontend/src/static/icons/ArrowRight.tsx | 11 ++++ frontend/src/static/icons/CrossIcon.tsx | 10 ++++ frontend/src/static/icons/DashedCircle.tsx | 15 +++++ frontend/src/types/library.ts | 7 +++ 25 files changed, 283 insertions(+), 34 deletions(-) create mode 100644 frontend/src/components/modules/ExampleWayToPassLevelModal/ExampleWayToPassLevelModal.interface.ts create mode 100644 frontend/src/components/modules/ExampleWayToPassLevelModal/ExampleWayToPassLevelModal.tsx create mode 100644 frontend/src/components/modules/ExampleWayToPassLevelModal/index.ts rename frontend/src/components/{ => pages/BucketDetails}/modules/AdvancementLevel/AdvancementLevel.hooks.ts (100%) rename frontend/src/components/{ => pages/BucketDetails}/modules/AdvancementLevel/AdvancementLevel.tsx (70%) rename frontend/src/components/{ => pages/BucketDetails}/modules/AdvancementLevel/AdvancemetLevel.interface.ts (100%) rename frontend/src/components/{ => pages/BucketDetails}/modules/AdvancementLevel/index.ts (100%) create mode 100644 frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.hooks.ts create mode 100644 frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.interface.ts create mode 100644 frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.tsx create mode 100644 frontend/src/components/pages/MySpaceBucketDetails/index.ts create mode 100644 frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.hooks.ts create mode 100644 frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.interface.ts create mode 100644 frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx create mode 100644 frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/index.ts create mode 100644 frontend/src/components/pages/MySpaceBucketDetails/utils.tsx create mode 100644 frontend/src/static/icons/ArrowRight.tsx create mode 100644 frontend/src/static/icons/CrossIcon.tsx create mode 100644 frontend/src/static/icons/DashedCircle.tsx diff --git a/frontend/src/app/(app)/(root)/my-space/[bucket]/page.tsx b/frontend/src/app/(app)/(root)/my-space/[bucket]/page.tsx index f6df43b2..f5510e0e 100644 --- a/frontend/src/app/(app)/(root)/my-space/[bucket]/page.tsx +++ b/frontend/src/app/(app)/(root)/my-space/[bucket]/page.tsx @@ -1,19 +1,9 @@ import { getBucketDetails } from '@app/api/bucket'; -import { routes } from '@app/constants'; -import { Breadcrumbs } from '@app/components/modules/Breadcrumbs'; +import { MySpaceBucketDetails } from '@app/components/pages/MySpaceBucketDetails'; export default async function MySpaceBucketDetailed({ params }: { params: { bucket: string } }) { const { bucket } = params; const data = await getBucketDetails(bucket); - return ( -
- -
- ); + return ; } diff --git a/frontend/src/components/common/AccordionList/AccordionList.interface.ts b/frontend/src/components/common/AccordionList/AccordionList.interface.ts index 288c7e5f..604cfbb6 100644 --- a/frontend/src/components/common/AccordionList/AccordionList.interface.ts +++ b/frontend/src/components/common/AccordionList/AccordionList.interface.ts @@ -1,12 +1,16 @@ +import { ReactNode } from 'react'; + export interface AccordionListProps { items: { key: string; title: string; - children?: JSX.Element; + children?: ReactNode; + icon?: ReactNode; }[]; } export interface AccordionListItemProps { title: string; noContentTooltipText: string; + icon?: ReactNode; } diff --git a/frontend/src/components/common/AccordionList/AccordionList.tsx b/frontend/src/components/common/AccordionList/AccordionList.tsx index 7fd692ae..9789fd15 100644 --- a/frontend/src/components/common/AccordionList/AccordionList.tsx +++ b/frontend/src/components/common/AccordionList/AccordionList.tsx @@ -5,8 +5,13 @@ import { AccordionListItem } from './AccordionListItem'; export const AccordionList = ({ items }: PropsWithChildren) => { return (
- {items.map(({ title, children, key }) => ( - + {items.map(({ title, children, key, icon }) => ( + {children} ))} diff --git a/frontend/src/components/common/AccordionList/AccordionListItem.tsx b/frontend/src/components/common/AccordionList/AccordionListItem.tsx index c564ac54..ae4ed77b 100644 --- a/frontend/src/components/common/AccordionList/AccordionListItem.tsx +++ b/frontend/src/components/common/AccordionList/AccordionListItem.tsx @@ -9,6 +9,7 @@ export const AccordionListItem = ({ title, noContentTooltipText, children, + icon, }: PropsWithChildren) => { const [isOpen, setOpen] = useState(false); const disableExpand = !children; @@ -26,9 +27,12 @@ export const AccordionListItem = ({ onClick={handleClick} disabled={disableExpand} > - - {title} - +
+ {icon} + + {title} + +
void; + projects: ExampleProject[]; +} diff --git a/frontend/src/components/modules/ExampleWayToPassLevelModal/ExampleWayToPassLevelModal.tsx b/frontend/src/components/modules/ExampleWayToPassLevelModal/ExampleWayToPassLevelModal.tsx new file mode 100644 index 00000000..907ad158 --- /dev/null +++ b/frontend/src/components/modules/ExampleWayToPassLevelModal/ExampleWayToPassLevelModal.tsx @@ -0,0 +1,18 @@ +import { Modal } from '@app/components/common/Modal'; +import { Markdown } from '@app/components/common/Markdown'; +import { ExampleWayToPassLevelModalProps } from './ExampleWayToPassLevelModal.interface'; + +export const ExampleWayToPassLevelModal: React.FC = ({ open, onClose, projects }) => { + return ( + + {projects.map(({ title, overview }) => ( +
+

{title}

+
+ +
+
+ ))} + + ); +}; diff --git a/frontend/src/components/modules/ExampleWayToPassLevelModal/index.ts b/frontend/src/components/modules/ExampleWayToPassLevelModal/index.ts new file mode 100644 index 00000000..d2aff6f3 --- /dev/null +++ b/frontend/src/components/modules/ExampleWayToPassLevelModal/index.ts @@ -0,0 +1 @@ +export { ExampleWayToPassLevelModal } from './ExampleWayToPassLevelModal'; diff --git a/frontend/src/components/pages/BucketDetails/BucketDetails.tsx b/frontend/src/components/pages/BucketDetails/BucketDetails.tsx index 9ebbe122..bbc46230 100644 --- a/frontend/src/components/pages/BucketDetails/BucketDetails.tsx +++ b/frontend/src/components/pages/BucketDetails/BucketDetails.tsx @@ -1,6 +1,6 @@ 'use client'; import { BucketDetailsProps } from './BucketDetails.interface'; -import { AdvancementLevel } from '@app/components/modules/AdvancementLevel'; +import { AdvancementLevel } from './modules/AdvancementLevel'; import { Typography } from '@app/components/common/Typography'; import { Breadcrumbs } from '@app/components/modules/Breadcrumbs'; import { useBucketDetails } from './BucketDetails.hooks'; diff --git a/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.hooks.ts b/frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/AdvancementLevel.hooks.ts similarity index 100% rename from frontend/src/components/modules/AdvancementLevel/AdvancementLevel.hooks.ts rename to frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/AdvancementLevel.hooks.ts diff --git a/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx b/frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx similarity index 70% rename from frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx rename to frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx index 4756a7c4..a74139eb 100644 --- a/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx +++ b/frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx @@ -1,12 +1,11 @@ 'use client'; import { AccordionCard } from '@app/components/common/AccordionCard'; import { AccordionList } from '@app/components/common/AccordionList'; -import { Modal } from '@app/components/common/Modal'; import { AdvancementLevelProps } from './AdvancemetLevel.interface'; import { useAdvancementLevel } from './AdvancementLevel.hooks'; -import { Markdown } from '@app/components/common/Markdown'; import { Button } from '@app/components/common/Button'; import { ExpandableSection } from '@app/components/common/ExpandableSection'; +import { ExampleWayToPassLevelModal } from '@app/components/modules/ExampleWayToPassLevelModal'; export const AdvancementLevel: React.FC = ({ showVerticalLine, data, open, onClick }) => { const { hideModal, openModal, modalOpen } = useAdvancementLevel(); @@ -24,9 +23,12 @@ export const AdvancementLevel: React.FC = ({ showVertical > <> {projects.length > 0 && ( - + <> + + + )} {Object.entries(categories).map(([category, skills]) => ( = ({ showVertical /> ))} - - {projects.map(({ title, overview }) => ( -
-

{title}

-
- -
-
- ))} - ); diff --git a/frontend/src/components/modules/AdvancementLevel/AdvancemetLevel.interface.ts b/frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/AdvancemetLevel.interface.ts similarity index 100% rename from frontend/src/components/modules/AdvancementLevel/AdvancemetLevel.interface.ts rename to frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/AdvancemetLevel.interface.ts diff --git a/frontend/src/components/modules/AdvancementLevel/index.ts b/frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/index.ts similarity index 100% rename from frontend/src/components/modules/AdvancementLevel/index.ts rename to frontend/src/components/pages/BucketDetails/modules/AdvancementLevel/index.ts diff --git a/frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.hooks.ts b/frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.hooks.ts new file mode 100644 index 00000000..1ecdaceb --- /dev/null +++ b/frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.hooks.ts @@ -0,0 +1,14 @@ +import { useState } from 'react'; + +export const useMySpaceBucketDetails = () => { + const [levelOpen, setLevelOpen] = useState(null); + + const handleOpen = (level: null | number) => { + setLevelOpen((prev) => (prev === level ? null : level)); + }; + + return { + levelOpen, + handleOpen, + }; +}; diff --git a/frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.interface.ts b/frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.interface.ts new file mode 100644 index 00000000..333e90b0 --- /dev/null +++ b/frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.interface.ts @@ -0,0 +1,5 @@ +import { Bucket } from '@app/types/library'; + +export interface MySpaceBucketDetailsProps { + data: Bucket; +} diff --git a/frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.tsx b/frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.tsx new file mode 100644 index 00000000..8b2b035a --- /dev/null +++ b/frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.tsx @@ -0,0 +1,57 @@ +'use client'; + +import { MySpaceBucketDetailsProps } from '@app/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.interface'; +import { routes } from '@app/constants'; +import { Breadcrumbs } from '@app/components/modules/Breadcrumbs'; +import { Typography } from '@app/components/common/Typography'; +import { AdvancementLevel } from './modules/AdvancementLevel'; +import { useMySpaceBucketDetails } from '@app/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.hooks'; +import { LevelDots } from '@app/components/modules/LevelDots'; + +export const MySpaceBucketDetails: React.FC = ({ data }) => { + const { bucketSlug, bucketName, description, advancementLevels } = data; + const { levelOpen, handleOpen } = useMySpaceBucketDetails(); + const level = 2; + + return ( +
+ +
+
+
+
+ + {bucketName} + +
+ + Level {level} + + +
+
+ + {description} + +
+
+
+ {advancementLevels.map((level, index) => ( + handleOpen(level.advancementLevel)} + /> + ))} +
+
+
+ ); +}; diff --git a/frontend/src/components/pages/MySpaceBucketDetails/index.ts b/frontend/src/components/pages/MySpaceBucketDetails/index.ts new file mode 100644 index 00000000..b1dcd60b --- /dev/null +++ b/frontend/src/components/pages/MySpaceBucketDetails/index.ts @@ -0,0 +1 @@ +export { MySpaceBucketDetails } from './MySpaceBucketDetails'; diff --git a/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.hooks.ts b/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.hooks.ts new file mode 100644 index 00000000..e2a24bcc --- /dev/null +++ b/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.hooks.ts @@ -0,0 +1,14 @@ +import { useState } from 'react'; + +export const useAdvancementLevel = () => { + const [modalOpen, setModalOpen] = useState(false); + + const openModal = () => setModalOpen(true); + const hideModal = () => setModalOpen(false); + + return { + hideModal, + openModal, + modalOpen, + }; +}; diff --git a/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.interface.ts b/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.interface.ts new file mode 100644 index 00000000..5c633165 --- /dev/null +++ b/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.interface.ts @@ -0,0 +1,8 @@ +import { AdvancementLevel } from '@app/types/library'; + +export interface AdvancementLevelProps { + data: AdvancementLevel; + showVerticalLine: boolean; + open: boolean; + onClick: () => void; +} diff --git a/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx b/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx new file mode 100644 index 00000000..d82c3d69 --- /dev/null +++ b/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx @@ -0,0 +1,54 @@ +'use client'; +import { AccordionCard } from '@app/components/common/AccordionCard'; +import { AccordionList } from '@app/components/common/AccordionList'; +import { AdvancementLevelProps } from './AdvancementLevel.interface'; +import { Button } from '@app/components/common/Button'; +import { ExpandableSection } from '@app/components/common/ExpandableSection'; +import { ExampleWayToPassLevelModal } from '@app/components/modules/ExampleWayToPassLevelModal'; +import { useAdvancementLevel } from './AdvancementLevel.hooks'; +import { getSkillIcon } from '@app/components/pages/MySpaceBucketDetails/utils'; + +export const AdvancementLevel: React.FC = ({ showVerticalLine, data, open, onClick }) => { + const { hideModal, openModal, modalOpen } = useAdvancementLevel(); + const { advancementLevel, description, projects, categories } = data; + const shouldBeExpandedByDefault = Object.keys(data.categories).length === 1; + + return ( + + <> + {projects.length > 0 && ( + <> + + + + )} + {Object.entries(categories).map(([category, skills]) => ( + + ({ + key: name, + title: name, + children: description ?

{description}

: undefined, + icon: getSkillIcon(), + }))} + /> + + ))} + + + ); +}; diff --git a/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/index.ts b/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/index.ts new file mode 100644 index 00000000..d167aa39 --- /dev/null +++ b/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/index.ts @@ -0,0 +1 @@ +export { AdvancementLevel } from './AdvancementLevel'; diff --git a/frontend/src/components/pages/MySpaceBucketDetails/utils.tsx b/frontend/src/components/pages/MySpaceBucketDetails/utils.tsx new file mode 100644 index 00000000..02afe0d3 --- /dev/null +++ b/frontend/src/components/pages/MySpaceBucketDetails/utils.tsx @@ -0,0 +1,31 @@ +import { ProofStatus } from '@app/types/library'; +import { ReactNode } from 'react'; +import { CheckMarkIcon } from '@app/static/icons/CheckMarkIcon'; +import { ArrowRight } from '@app/static/icons/ArrowRight'; +import { CrossIcon } from '@app/static/icons/CrossIcon'; +import { DashedCircle } from '@app/static/icons/DashedCircle'; + +export const getSkillIcon = (proofStatus?: string): ReactNode => { + switch (proofStatus) { + case ProofStatus.APPROVED: + return ( +
+ +
+ ); + case ProofStatus.PENDING: + return ( +
+ +
+ ); + case ProofStatus.REJECTED: + return ( +
+ +
+ ); + default: + return ; + } +}; diff --git a/frontend/src/static/icons/ArrowRight.tsx b/frontend/src/static/icons/ArrowRight.tsx new file mode 100644 index 00000000..f72cbe65 --- /dev/null +++ b/frontend/src/static/icons/ArrowRight.tsx @@ -0,0 +1,11 @@ +export const ArrowRight: React.FC> = (props) => ( + + + +); diff --git a/frontend/src/static/icons/CrossIcon.tsx b/frontend/src/static/icons/CrossIcon.tsx new file mode 100644 index 00000000..d18cacb5 --- /dev/null +++ b/frontend/src/static/icons/CrossIcon.tsx @@ -0,0 +1,10 @@ +export const CrossIcon: React.FC> = (props) => ( + + + +); diff --git a/frontend/src/static/icons/DashedCircle.tsx b/frontend/src/static/icons/DashedCircle.tsx new file mode 100644 index 00000000..b83734a5 --- /dev/null +++ b/frontend/src/static/icons/DashedCircle.tsx @@ -0,0 +1,15 @@ +export const DashedCircle: React.FC> = (props) => ( + + + +); diff --git a/frontend/src/types/library.ts b/frontend/src/types/library.ts index fb94376d..78f9326a 100644 --- a/frontend/src/types/library.ts +++ b/frontend/src/types/library.ts @@ -43,4 +43,11 @@ export interface ExampleProject { export interface AtomicSkill { name: string; description?: string; + proofStatus?: typeof ProofStatus; } + +export const ProofStatus = { + APPROVED: 'approved', + PENDING: 'pending', + REJECTED: 'rejected', +} as const; From 415fdcee3e86832f5903b2d642e8f3f8f943382b Mon Sep 17 00:00:00 2001 From: Wiktoria Salamon Date: Wed, 24 Jul 2024 15:28:17 +0200 Subject: [PATCH 3/9] feat: add soft skills bucket details and refactor my space pages --- .../(app)/(root)/my-space/[bucket]/page.tsx | 2 +- .../src/app/(app)/(root)/my-space/page.tsx | 2 +- .../(root)/my-space/soft-skills/page.tsx | 38 ++++++++++++++ .../common/StatusChip/StatusChip.interface.ts | 5 ++ .../common/StatusChip/StatusChip.tsx | 38 ++++++++++++++ .../src/components/common/StatusChip/index.ts | 1 + .../BucketCard/BucketCard.interface.ts | 1 + .../modules/BucketCard/BucketCard.tsx | 15 +++--- .../SkillStatusIcon.interface.tsx | 3 ++ .../SkillStatusIcon/SkillStatusIcon.tsx} | 9 ++-- .../modules/SkillStatusIcon/index.ts | 1 + .../{ => mySpace}/MySpace/MySpace.hooks.ts | 0 .../MySpace/MySpace.interface.ts | 0 .../pages/{ => mySpace}/MySpace/MySpace.tsx | 2 +- .../pages/{ => mySpace}/MySpace/contants.ts | 0 .../pages/{ => mySpace}/MySpace/index.ts | 0 .../modules/Header/Header.interface.ts | 0 .../MySpace/modules/Header/Header.tsx | 2 +- .../MySpace/modules/Header/index.ts | 0 .../modules/LadderTab/LadderTab.hooks.ts | 2 +- .../modules/LadderTab/LadderTab.interface.ts | 0 .../MySpace/modules/LadderTab/LadderTab.tsx | 0 .../MySpace/modules/LadderTab/index.ts | 0 .../LadderDetails/LadderDetails.interface.ts | 0 .../modules/LadderDetails/LadderDetails.tsx | 22 ++++++-- .../LadderTab/modules/LadderDetails/index.ts | 0 .../modules/LevelCard/LevelCard.interface.ts | 0 .../MySpace/modules/LevelCard/LevelCard.tsx | 0 .../MySpace/modules/LevelCard/index.ts | 0 .../MySpaceBucketDetails.hooks.ts | 0 .../MySpaceBucketDetails.interface.ts | 0 .../MySpaceBucketDetails.tsx | 6 +-- .../MySpaceBucketDetails/index.ts | 0 .../AdvancementLevel.hooks.ts | 0 .../AdvancementLevel.interface.ts | 0 .../AdvancementLevel/AdvancementLevel.tsx | 6 +-- .../modules/AdvancementLevel/index.ts | 0 ...MySpaceSoftSkillBucketDetails.interface.ts | 5 ++ .../MySpaceSoftSkillBucketDetails.tsx | 52 +++++++++++++++++++ .../MySpaceSoftSkillBucketDetails/index.ts | 1 + frontend/src/constants/routes.ts | 1 + frontend/src/types/library.ts | 18 ++++++- 42 files changed, 206 insertions(+), 26 deletions(-) create mode 100644 frontend/src/app/(app)/(root)/my-space/soft-skills/page.tsx create mode 100644 frontend/src/components/common/StatusChip/StatusChip.interface.ts create mode 100644 frontend/src/components/common/StatusChip/StatusChip.tsx create mode 100644 frontend/src/components/common/StatusChip/index.ts create mode 100644 frontend/src/components/modules/SkillStatusIcon/SkillStatusIcon.interface.tsx rename frontend/src/components/{pages/MySpaceBucketDetails/utils.tsx => modules/SkillStatusIcon/SkillStatusIcon.tsx} (80%) create mode 100644 frontend/src/components/modules/SkillStatusIcon/index.ts rename frontend/src/components/pages/{ => mySpace}/MySpace/MySpace.hooks.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpace/MySpace.interface.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpace/MySpace.tsx (93%) rename frontend/src/components/pages/{ => mySpace}/MySpace/contants.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpace/index.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpace/modules/Header/Header.interface.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpace/modules/Header/Header.tsx (95%) rename frontend/src/components/pages/{ => mySpace}/MySpace/modules/Header/index.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpace/modules/LadderTab/LadderTab.hooks.ts (92%) rename frontend/src/components/pages/{ => mySpace}/MySpace/modules/LadderTab/LadderTab.interface.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpace/modules/LadderTab/LadderTab.tsx (100%) rename frontend/src/components/pages/{ => mySpace}/MySpace/modules/LadderTab/index.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpace/modules/LadderTab/modules/LadderDetails/LadderDetails.interface.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpace/modules/LadderTab/modules/LadderDetails/LadderDetails.tsx (69%) rename frontend/src/components/pages/{ => mySpace}/MySpace/modules/LadderTab/modules/LadderDetails/index.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpace/modules/LevelCard/LevelCard.interface.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpace/modules/LevelCard/LevelCard.tsx (100%) rename frontend/src/components/pages/{ => mySpace}/MySpace/modules/LevelCard/index.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpaceBucketDetails/MySpaceBucketDetails.hooks.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpaceBucketDetails/MySpaceBucketDetails.interface.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpaceBucketDetails/MySpaceBucketDetails.tsx (87%) rename frontend/src/components/pages/{ => mySpace}/MySpaceBucketDetails/index.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.hooks.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.interface.ts (100%) rename frontend/src/components/pages/{ => mySpace}/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx (91%) rename frontend/src/components/pages/{ => mySpace}/MySpaceBucketDetails/modules/AdvancementLevel/index.ts (100%) create mode 100644 frontend/src/components/pages/mySpace/MySpaceSoftSkillBucketDetails/MySpaceSoftSkillBucketDetails.interface.ts create mode 100644 frontend/src/components/pages/mySpace/MySpaceSoftSkillBucketDetails/MySpaceSoftSkillBucketDetails.tsx create mode 100644 frontend/src/components/pages/mySpace/MySpaceSoftSkillBucketDetails/index.ts diff --git a/frontend/src/app/(app)/(root)/my-space/[bucket]/page.tsx b/frontend/src/app/(app)/(root)/my-space/[bucket]/page.tsx index f5510e0e..5b20740b 100644 --- a/frontend/src/app/(app)/(root)/my-space/[bucket]/page.tsx +++ b/frontend/src/app/(app)/(root)/my-space/[bucket]/page.tsx @@ -1,5 +1,5 @@ import { getBucketDetails } from '@app/api/bucket'; -import { MySpaceBucketDetails } from '@app/components/pages/MySpaceBucketDetails'; +import { MySpaceBucketDetails } from '@app/components/pages/mySpace/MySpaceBucketDetails'; export default async function MySpaceBucketDetailed({ params }: { params: { bucket: string } }) { const { bucket } = params; diff --git a/frontend/src/app/(app)/(root)/my-space/page.tsx b/frontend/src/app/(app)/(root)/my-space/page.tsx index 9351e0a8..cfd9e416 100644 --- a/frontend/src/app/(app)/(root)/my-space/page.tsx +++ b/frontend/src/app/(app)/(root)/my-space/page.tsx @@ -1,4 +1,4 @@ -import { MySpace } from '@app/components/pages/MySpace'; +import { MySpace } from '@app/components/pages/mySpace/MySpace'; import { getLadderDetails } from '@app/api/ladder'; // TODO: get data from api diff --git a/frontend/src/app/(app)/(root)/my-space/soft-skills/page.tsx b/frontend/src/app/(app)/(root)/my-space/soft-skills/page.tsx new file mode 100644 index 00000000..04d1e6c2 --- /dev/null +++ b/frontend/src/app/(app)/(root)/my-space/soft-skills/page.tsx @@ -0,0 +1,38 @@ +import { MySpaceSoftSkillBucketDetails } from '@app/components/pages/mySpace/MySpaceSoftSkillBucketDetails'; +import { ProofStatus, SoftSkillBucket } from '@app/types/library'; + +export default async function MySpaceBucketDetailed() { + const loremIpsum = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, felis et tincidunt tempor, justo orci cursus ipsum, nec efficitur neque felis sit amet orci.'; + + const data: SoftSkillBucket = { + bucketSlug: 'soft-skills', + bucketName: 'Soft skills', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, felis et tincidunt tempor, justo orci cursus ipsum, nec efficitur neque felis sit amet orci. Vivamus tempus, ex et ultrices rutrum, libero mi molestie mi, non tempus ex metus sed augue. Morbi euismod, nulla nec tempus consequat, quam mi pellentesque elit, non sagittis est nisl sed arcu.', + status: 'completed', + categories: { + Responsibility: [ + { + name: 'Fulfills undertaken obligations regarding tasks', + description: loremIpsum, + proofStatus: ProofStatus.APPROVED as unknown as typeof ProofStatus, + }, + { + name: 'He is responsive and communicates responsibly - without unnecessary delay.', + description: loremIpsum, + proofStatus: ProofStatus.APPROVED as unknown as typeof ProofStatus, + }, + ], + Quality: [ + { + name: 'Fulfills undertaken obligations regarding tasks', + description: loremIpsum, + proofStatus: ProofStatus.APPROVED as unknown as typeof ProofStatus, + }, + ], + }, + }; + + return ; +} diff --git a/frontend/src/components/common/StatusChip/StatusChip.interface.ts b/frontend/src/components/common/StatusChip/StatusChip.interface.ts new file mode 100644 index 00000000..0d9c243f --- /dev/null +++ b/frontend/src/components/common/StatusChip/StatusChip.interface.ts @@ -0,0 +1,5 @@ +export interface StatusChipProps { + variant?: Variants; +} + +export type Variants = 'green' | 'red' | 'yellow' | 'grey'; diff --git a/frontend/src/components/common/StatusChip/StatusChip.tsx b/frontend/src/components/common/StatusChip/StatusChip.tsx new file mode 100644 index 00000000..11b2aef3 --- /dev/null +++ b/frontend/src/components/common/StatusChip/StatusChip.tsx @@ -0,0 +1,38 @@ +import { FC, PropsWithChildren } from 'react'; +import { StatusChipProps, Variants } from '@app/components/common/StatusChip/StatusChip.interface'; +import { Typography } from '@app/components/common/Typography'; +import { generateClassNames } from '@app/utils'; + +const styles: { + [key in Variants]: { + text: string; + wrapper: string; + }; +} = { + grey: { + text: 'text-navy-600', + wrapper: 'bg-navy-100', + }, + yellow: { + text: 'text-yellow-600', + wrapper: 'bg-yellow-200', + }, + red: { + text: 'text-red-700', + wrapper: 'bg-red-100', + }, + green: { + text: 'text-green-600', + wrapper: 'bg-green-200', + }, +}; + +export const StatusChip: FC> = ({ variant = 'grey', children }) => { + return ( +
+ + {children} + +
+ ); +}; diff --git a/frontend/src/components/common/StatusChip/index.ts b/frontend/src/components/common/StatusChip/index.ts new file mode 100644 index 00000000..466a85ed --- /dev/null +++ b/frontend/src/components/common/StatusChip/index.ts @@ -0,0 +1 @@ +export { StatusChip } from './StatusChip'; diff --git a/frontend/src/components/modules/BucketCard/BucketCard.interface.ts b/frontend/src/components/modules/BucketCard/BucketCard.interface.ts index e6168f7e..50e3b840 100644 --- a/frontend/src/components/modules/BucketCard/BucketCard.interface.ts +++ b/frontend/src/components/modules/BucketCard/BucketCard.interface.ts @@ -3,5 +3,6 @@ import { LadderBandBucket } from '@app/types/library'; export interface BucketCardProps { bucket: LadderBandBucket; withLevel?: boolean; + withStatus?: boolean; href: string; } diff --git a/frontend/src/components/modules/BucketCard/BucketCard.tsx b/frontend/src/components/modules/BucketCard/BucketCard.tsx index c976a94c..7719e624 100644 --- a/frontend/src/components/modules/BucketCard/BucketCard.tsx +++ b/frontend/src/components/modules/BucketCard/BucketCard.tsx @@ -3,9 +3,11 @@ import { BucketCardProps } from './BucketCard.interface'; import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon'; import { Typography } from '@app/components/common/Typography'; import { LevelDots } from '@app/components/modules/LevelDots'; +import { StatusChip } from '@app/components/common/StatusChip'; -export const BucketCard = ({ bucket, withLevel, href }: BucketCardProps) => { - const { bucketName, description } = bucket; +export const BucketCard = ({ bucket, withLevel, withStatus, href }: BucketCardProps) => { + const { bucketName, description, status } = bucket; + const level = 1; //TODO: replace with real value from api return ( { {bucketName} -
+
{withLevel && (
- Level # + Level {level ?? '#'} - +
)} + {withStatus && {status}}
- + {description} diff --git a/frontend/src/components/modules/SkillStatusIcon/SkillStatusIcon.interface.tsx b/frontend/src/components/modules/SkillStatusIcon/SkillStatusIcon.interface.tsx new file mode 100644 index 00000000..3d90be9f --- /dev/null +++ b/frontend/src/components/modules/SkillStatusIcon/SkillStatusIcon.interface.tsx @@ -0,0 +1,3 @@ +export interface SkillStatusIconProps { + status?: string; +} diff --git a/frontend/src/components/pages/MySpaceBucketDetails/utils.tsx b/frontend/src/components/modules/SkillStatusIcon/SkillStatusIcon.tsx similarity index 80% rename from frontend/src/components/pages/MySpaceBucketDetails/utils.tsx rename to frontend/src/components/modules/SkillStatusIcon/SkillStatusIcon.tsx index 02afe0d3..625eb00d 100644 --- a/frontend/src/components/pages/MySpaceBucketDetails/utils.tsx +++ b/frontend/src/components/modules/SkillStatusIcon/SkillStatusIcon.tsx @@ -1,12 +1,13 @@ +import { SkillStatusIconProps } from '@app/components/modules/SkillStatusIcon/SkillStatusIcon.interface'; +import { FC } from 'react'; +import { DashedCircle } from '@app/static/icons/DashedCircle'; import { ProofStatus } from '@app/types/library'; -import { ReactNode } from 'react'; import { CheckMarkIcon } from '@app/static/icons/CheckMarkIcon'; import { ArrowRight } from '@app/static/icons/ArrowRight'; import { CrossIcon } from '@app/static/icons/CrossIcon'; -import { DashedCircle } from '@app/static/icons/DashedCircle'; -export const getSkillIcon = (proofStatus?: string): ReactNode => { - switch (proofStatus) { +export const SkillStatusIcon: FC = ({ status }) => { + switch (status) { case ProofStatus.APPROVED: return (
diff --git a/frontend/src/components/modules/SkillStatusIcon/index.ts b/frontend/src/components/modules/SkillStatusIcon/index.ts new file mode 100644 index 00000000..4dd8ad80 --- /dev/null +++ b/frontend/src/components/modules/SkillStatusIcon/index.ts @@ -0,0 +1 @@ +export { SkillStatusIcon } from './SkillStatusIcon'; diff --git a/frontend/src/components/pages/MySpace/MySpace.hooks.ts b/frontend/src/components/pages/mySpace/MySpace/MySpace.hooks.ts similarity index 100% rename from frontend/src/components/pages/MySpace/MySpace.hooks.ts rename to frontend/src/components/pages/mySpace/MySpace/MySpace.hooks.ts diff --git a/frontend/src/components/pages/MySpace/MySpace.interface.ts b/frontend/src/components/pages/mySpace/MySpace/MySpace.interface.ts similarity index 100% rename from frontend/src/components/pages/MySpace/MySpace.interface.ts rename to frontend/src/components/pages/mySpace/MySpace/MySpace.interface.ts diff --git a/frontend/src/components/pages/MySpace/MySpace.tsx b/frontend/src/components/pages/mySpace/MySpace/MySpace.tsx similarity index 93% rename from frontend/src/components/pages/MySpace/MySpace.tsx rename to frontend/src/components/pages/mySpace/MySpace/MySpace.tsx index 5bbab705..822930e1 100644 --- a/frontend/src/components/pages/MySpace/MySpace.tsx +++ b/frontend/src/components/pages/mySpace/MySpace/MySpace.tsx @@ -1,7 +1,7 @@ 'use client'; import { Typography } from '@app/components/common/Typography'; import { MySpaceProps } from './MySpace.interface'; -import { Header } from '@app/components/pages/MySpace/modules/Header'; +import { Header } from './modules/Header'; import { Tabs } from '@app/components/common/Tabs'; import { useMySpace } from './MySpace.hooks'; import { mySpaceTabs } from './contants'; diff --git a/frontend/src/components/pages/MySpace/contants.ts b/frontend/src/components/pages/mySpace/MySpace/contants.ts similarity index 100% rename from frontend/src/components/pages/MySpace/contants.ts rename to frontend/src/components/pages/mySpace/MySpace/contants.ts diff --git a/frontend/src/components/pages/MySpace/index.ts b/frontend/src/components/pages/mySpace/MySpace/index.ts similarity index 100% rename from frontend/src/components/pages/MySpace/index.ts rename to frontend/src/components/pages/mySpace/MySpace/index.ts diff --git a/frontend/src/components/pages/MySpace/modules/Header/Header.interface.ts b/frontend/src/components/pages/mySpace/MySpace/modules/Header/Header.interface.ts similarity index 100% rename from frontend/src/components/pages/MySpace/modules/Header/Header.interface.ts rename to frontend/src/components/pages/mySpace/MySpace/modules/Header/Header.interface.ts diff --git a/frontend/src/components/pages/MySpace/modules/Header/Header.tsx b/frontend/src/components/pages/mySpace/MySpace/modules/Header/Header.tsx similarity index 95% rename from frontend/src/components/pages/MySpace/modules/Header/Header.tsx rename to frontend/src/components/pages/mySpace/MySpace/modules/Header/Header.tsx index 0c28a53c..69c35dd7 100644 --- a/frontend/src/components/pages/MySpace/modules/Header/Header.tsx +++ b/frontend/src/components/pages/mySpace/MySpace/modules/Header/Header.tsx @@ -3,7 +3,7 @@ import { HeaderProps } from './Header.interface'; import { Avatar } from '@app/components/common/Avatar'; import { CheckIcon } from '@app/static/icons/CheckIcon'; import { TargetIcon } from '@app/static/icons/TargetIcon'; -import { LevelCard } from '@app/components/pages/MySpace/modules/LevelCard'; +import { LevelCard } from '../LevelCard'; export const Header: React.FC = ({ user, currentLevel, nextLevel }) => { const { firstName, lastName, photo, position } = user; diff --git a/frontend/src/components/pages/MySpace/modules/Header/index.ts b/frontend/src/components/pages/mySpace/MySpace/modules/Header/index.ts similarity index 100% rename from frontend/src/components/pages/MySpace/modules/Header/index.ts rename to frontend/src/components/pages/mySpace/MySpace/modules/Header/index.ts diff --git a/frontend/src/components/pages/MySpace/modules/LadderTab/LadderTab.hooks.ts b/frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/LadderTab.hooks.ts similarity index 92% rename from frontend/src/components/pages/MySpace/modules/LadderTab/LadderTab.hooks.ts rename to frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/LadderTab.hooks.ts index 1ab4c107..b7dcc960 100644 --- a/frontend/src/components/pages/MySpace/modules/LadderTab/LadderTab.hooks.ts +++ b/frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/LadderTab.hooks.ts @@ -1,6 +1,6 @@ import { useCallback, useEffect, useState } from 'react'; import { LadderBand } from '@app/types/library'; -import { LadderTabHooks } from '@app/components/pages/MySpace/modules/LadderTab/LadderTab.interface'; +import { LadderTabHooks } from './LadderTab.interface'; import { useQueryParams } from '@app/hooks'; import { DEFAULT_STEP } from '@app/components/modules/SideStepper'; import { useSearchParams } from 'next/navigation'; diff --git a/frontend/src/components/pages/MySpace/modules/LadderTab/LadderTab.interface.ts b/frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/LadderTab.interface.ts similarity index 100% rename from frontend/src/components/pages/MySpace/modules/LadderTab/LadderTab.interface.ts rename to frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/LadderTab.interface.ts diff --git a/frontend/src/components/pages/MySpace/modules/LadderTab/LadderTab.tsx b/frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/LadderTab.tsx similarity index 100% rename from frontend/src/components/pages/MySpace/modules/LadderTab/LadderTab.tsx rename to frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/LadderTab.tsx diff --git a/frontend/src/components/pages/MySpace/modules/LadderTab/index.ts b/frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/index.ts similarity index 100% rename from frontend/src/components/pages/MySpace/modules/LadderTab/index.ts rename to frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/index.ts diff --git a/frontend/src/components/pages/MySpace/modules/LadderTab/modules/LadderDetails/LadderDetails.interface.ts b/frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/modules/LadderDetails/LadderDetails.interface.ts similarity index 100% rename from frontend/src/components/pages/MySpace/modules/LadderTab/modules/LadderDetails/LadderDetails.interface.ts rename to frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/modules/LadderDetails/LadderDetails.interface.ts diff --git a/frontend/src/components/pages/MySpace/modules/LadderTab/modules/LadderDetails/LadderDetails.tsx b/frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/modules/LadderDetails/LadderDetails.tsx similarity index 69% rename from frontend/src/components/pages/MySpace/modules/LadderTab/modules/LadderDetails/LadderDetails.tsx rename to frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/modules/LadderDetails/LadderDetails.tsx index 7353a759..8001d63b 100644 --- a/frontend/src/components/pages/MySpace/modules/LadderTab/modules/LadderDetails/LadderDetails.tsx +++ b/frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/modules/LadderDetails/LadderDetails.tsx @@ -1,11 +1,22 @@ import { LadderDetailsProps } from './LadderDetails.interface'; -import { LadderBandBucket } from '@app/types/library'; +import { BucketType, LadderBandBucket } from '@app/types/library'; import { Typography } from '@app/components/common/Typography'; import { ThresholdCard } from '@app/components/modules/ThresholdCard'; import { BucketCard } from '@app/components/modules/BucketCard'; import { routes } from '@app/constants'; export const LadderDetails = ({ ladder, ladderName, band }: LadderDetailsProps) => { + const softSkills: LadderBandBucket[] = [ + { + bucketName: 'Soft skills', + bucketSlug: 'soft-skills', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, felis et tincidunt tempor, justo orci cursus ipsum, nec efficitur neque felis sit amet orci. Vivamus tempus, ex et ultrices rutrum, libero mi molestie mi, non tempus ex metus sed augue. Morbi euismod, nulla nec tempus consequat, quam mi pellentesque elit, non sagittis est nisl sed arcu.', + bucketType: BucketType.SOFT as unknown as typeof BucketType, + status: 'Completed', + }, + ]; // TODO: remove when data are fetched from api + return (
@@ -38,18 +49,21 @@ export const LadderDetails = ({ ladder, ladderName, band }: LadderDetailsProps) ))}
- {ladder.softSkillBuckets.length > 0 && ( + {/* TODO: replace with: + ladder.softSkillBuckets.length > 0 + */} + {softSkills.length > 0 && (
Soft skills
- {ladder.softSkillBuckets.map((bucket: LadderBandBucket) => ( + {softSkills.map((bucket: LadderBandBucket) => ( ))}
diff --git a/frontend/src/components/pages/MySpace/modules/LadderTab/modules/LadderDetails/index.ts b/frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/modules/LadderDetails/index.ts similarity index 100% rename from frontend/src/components/pages/MySpace/modules/LadderTab/modules/LadderDetails/index.ts rename to frontend/src/components/pages/mySpace/MySpace/modules/LadderTab/modules/LadderDetails/index.ts diff --git a/frontend/src/components/pages/MySpace/modules/LevelCard/LevelCard.interface.ts b/frontend/src/components/pages/mySpace/MySpace/modules/LevelCard/LevelCard.interface.ts similarity index 100% rename from frontend/src/components/pages/MySpace/modules/LevelCard/LevelCard.interface.ts rename to frontend/src/components/pages/mySpace/MySpace/modules/LevelCard/LevelCard.interface.ts diff --git a/frontend/src/components/pages/MySpace/modules/LevelCard/LevelCard.tsx b/frontend/src/components/pages/mySpace/MySpace/modules/LevelCard/LevelCard.tsx similarity index 100% rename from frontend/src/components/pages/MySpace/modules/LevelCard/LevelCard.tsx rename to frontend/src/components/pages/mySpace/MySpace/modules/LevelCard/LevelCard.tsx diff --git a/frontend/src/components/pages/MySpace/modules/LevelCard/index.ts b/frontend/src/components/pages/mySpace/MySpace/modules/LevelCard/index.ts similarity index 100% rename from frontend/src/components/pages/MySpace/modules/LevelCard/index.ts rename to frontend/src/components/pages/mySpace/MySpace/modules/LevelCard/index.ts diff --git a/frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.hooks.ts b/frontend/src/components/pages/mySpace/MySpaceBucketDetails/MySpaceBucketDetails.hooks.ts similarity index 100% rename from frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.hooks.ts rename to frontend/src/components/pages/mySpace/MySpaceBucketDetails/MySpaceBucketDetails.hooks.ts diff --git a/frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.interface.ts b/frontend/src/components/pages/mySpace/MySpaceBucketDetails/MySpaceBucketDetails.interface.ts similarity index 100% rename from frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.interface.ts rename to frontend/src/components/pages/mySpace/MySpaceBucketDetails/MySpaceBucketDetails.interface.ts diff --git a/frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.tsx b/frontend/src/components/pages/mySpace/MySpaceBucketDetails/MySpaceBucketDetails.tsx similarity index 87% rename from frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.tsx rename to frontend/src/components/pages/mySpace/MySpaceBucketDetails/MySpaceBucketDetails.tsx index 8b2b035a..73c9f675 100644 --- a/frontend/src/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.tsx +++ b/frontend/src/components/pages/mySpace/MySpaceBucketDetails/MySpaceBucketDetails.tsx @@ -1,11 +1,11 @@ 'use client'; -import { MySpaceBucketDetailsProps } from '@app/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.interface'; +import { MySpaceBucketDetailsProps } from './MySpaceBucketDetails.interface'; import { routes } from '@app/constants'; import { Breadcrumbs } from '@app/components/modules/Breadcrumbs'; import { Typography } from '@app/components/common/Typography'; import { AdvancementLevel } from './modules/AdvancementLevel'; -import { useMySpaceBucketDetails } from '@app/components/pages/MySpaceBucketDetails/MySpaceBucketDetails.hooks'; +import { useMySpaceBucketDetails } from './MySpaceBucketDetails.hooks'; import { LevelDots } from '@app/components/modules/LevelDots'; export const MySpaceBucketDetails: React.FC = ({ data }) => { @@ -18,7 +18,7 @@ export const MySpaceBucketDetails: React.FC = ({ data
diff --git a/frontend/src/components/pages/MySpaceBucketDetails/index.ts b/frontend/src/components/pages/mySpace/MySpaceBucketDetails/index.ts similarity index 100% rename from frontend/src/components/pages/MySpaceBucketDetails/index.ts rename to frontend/src/components/pages/mySpace/MySpaceBucketDetails/index.ts diff --git a/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.hooks.ts b/frontend/src/components/pages/mySpace/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.hooks.ts similarity index 100% rename from frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.hooks.ts rename to frontend/src/components/pages/mySpace/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.hooks.ts diff --git a/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.interface.ts b/frontend/src/components/pages/mySpace/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.interface.ts similarity index 100% rename from frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.interface.ts rename to frontend/src/components/pages/mySpace/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.interface.ts diff --git a/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx b/frontend/src/components/pages/mySpace/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx similarity index 91% rename from frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx rename to frontend/src/components/pages/mySpace/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx index d82c3d69..000d7d72 100644 --- a/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx +++ b/frontend/src/components/pages/mySpace/MySpaceBucketDetails/modules/AdvancementLevel/AdvancementLevel.tsx @@ -6,7 +6,7 @@ import { Button } from '@app/components/common/Button'; import { ExpandableSection } from '@app/components/common/ExpandableSection'; import { ExampleWayToPassLevelModal } from '@app/components/modules/ExampleWayToPassLevelModal'; import { useAdvancementLevel } from './AdvancementLevel.hooks'; -import { getSkillIcon } from '@app/components/pages/MySpaceBucketDetails/utils'; +import { SkillStatusIcon } from '@app/components/modules/SkillStatusIcon'; export const AdvancementLevel: React.FC = ({ showVerticalLine, data, open, onClick }) => { const { hideModal, openModal, modalOpen } = useAdvancementLevel(); @@ -39,11 +39,11 @@ export const AdvancementLevel: React.FC = ({ showVertical small > ({ + items={skills.map(({ name, description }) => ({ key: name, title: name, children: description ?

{description}

: undefined, - icon: getSkillIcon(), + icon: , }))} /> diff --git a/frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/index.ts b/frontend/src/components/pages/mySpace/MySpaceBucketDetails/modules/AdvancementLevel/index.ts similarity index 100% rename from frontend/src/components/pages/MySpaceBucketDetails/modules/AdvancementLevel/index.ts rename to frontend/src/components/pages/mySpace/MySpaceBucketDetails/modules/AdvancementLevel/index.ts diff --git a/frontend/src/components/pages/mySpace/MySpaceSoftSkillBucketDetails/MySpaceSoftSkillBucketDetails.interface.ts b/frontend/src/components/pages/mySpace/MySpaceSoftSkillBucketDetails/MySpaceSoftSkillBucketDetails.interface.ts new file mode 100644 index 00000000..e0a37ef5 --- /dev/null +++ b/frontend/src/components/pages/mySpace/MySpaceSoftSkillBucketDetails/MySpaceSoftSkillBucketDetails.interface.ts @@ -0,0 +1,5 @@ +import { SoftSkillBucket } from '@app/types/library'; + +export interface MySpaceSoftSkillBucketDetailsProps { + data: SoftSkillBucket; +} diff --git a/frontend/src/components/pages/mySpace/MySpaceSoftSkillBucketDetails/MySpaceSoftSkillBucketDetails.tsx b/frontend/src/components/pages/mySpace/MySpaceSoftSkillBucketDetails/MySpaceSoftSkillBucketDetails.tsx new file mode 100644 index 00000000..18a0eb6b --- /dev/null +++ b/frontend/src/components/pages/mySpace/MySpaceSoftSkillBucketDetails/MySpaceSoftSkillBucketDetails.tsx @@ -0,0 +1,52 @@ +'use client'; + +import { routes } from '@app/constants'; +import { Breadcrumbs } from '@app/components/modules/Breadcrumbs'; +import { Typography } from '@app/components/common/Typography'; +import { MySpaceSoftSkillBucketDetailsProps } from './MySpaceSoftSkillBucketDetails.interface'; +import { StatusChip } from '@app/components/common/StatusChip'; +import { AccordionCard } from '@app/components/common/AccordionCard'; +import { AccordionList } from '@app/components/common/AccordionList'; +import { SkillStatusIcon } from '@app/components/modules/SkillStatusIcon'; + +export const MySpaceSoftSkillBucketDetails: React.FC = ({ data }) => { + const { description, status, categories } = data; + + return ( +
+ +
+
+
+
+ + Soft skills + + {status} +
+ + {description} + + {Object.entries(categories).map(([category, skills]) => ( + + ({ + key: name, + title: name, + children: description ?

{description}

: undefined, + icon: , + }))} + /> + + ))} +
+
+
+
+ ); +}; diff --git a/frontend/src/components/pages/mySpace/MySpaceSoftSkillBucketDetails/index.ts b/frontend/src/components/pages/mySpace/MySpaceSoftSkillBucketDetails/index.ts new file mode 100644 index 00000000..b503e4c0 --- /dev/null +++ b/frontend/src/components/pages/mySpace/MySpaceSoftSkillBucketDetails/index.ts @@ -0,0 +1 @@ +export { MySpaceSoftSkillBucketDetails } from './MySpaceSoftSkillBucketDetails'; diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index b8802b33..ba887844 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -7,6 +7,7 @@ export const routes = { }, mySpace: { index: '/my-space', + softSkills: '/my-space/soft-skills', }, people: { index: '/people?tab=active&page=1', diff --git a/frontend/src/types/library.ts b/frontend/src/types/library.ts index 78f9326a..a5ef426d 100644 --- a/frontend/src/types/library.ts +++ b/frontend/src/types/library.ts @@ -11,6 +11,7 @@ export interface LadderBandBucket { bucketType: typeof BucketType; description: string; level?: number; + status?: string; } export interface Bucket { @@ -21,6 +22,16 @@ export interface Bucket { advancementLevels: AdvancementLevel[]; } +export interface SoftSkillBucket { + bucketName: string; + bucketSlug: string; + description: string; + status?: string; + categories: { + [categoryGroup: string]: AtomicSkill[]; + }; +} + export const BucketType = { HARD: 'hard', SOFT: 'soft', @@ -50,4 +61,9 @@ export const ProofStatus = { APPROVED: 'approved', PENDING: 'pending', REJECTED: 'rejected', -} as const; +}; + +export const SoftSkillStatus = { + COMPLETED: 'completed', + PENDING: 'pending', +}; From ae39b22a82b3e6c78df8e452ce6ce4fdcbf080ac Mon Sep 17 00:00:00 2001 From: Wiktoria Salamon Date: Mon, 29 Jul 2024 11:03:33 +0200 Subject: [PATCH 4/9] refactor: move mocked data outside the component --- .../(app)/(root)/my-space/[bucket]/page.tsx | 1 + .../(root)/my-space/soft-skills/page.tsx | 63 ++++++++++--------- 2 files changed, 33 insertions(+), 31 deletions(-) diff --git a/frontend/src/app/(app)/(root)/my-space/[bucket]/page.tsx b/frontend/src/app/(app)/(root)/my-space/[bucket]/page.tsx index 5b20740b..ef243273 100644 --- a/frontend/src/app/(app)/(root)/my-space/[bucket]/page.tsx +++ b/frontend/src/app/(app)/(root)/my-space/[bucket]/page.tsx @@ -3,6 +3,7 @@ import { MySpaceBucketDetails } from '@app/components/pages/mySpace/MySpaceBucke export default async function MySpaceBucketDetailed({ params }: { params: { bucket: string } }) { const { bucket } = params; + // TODO: get proper data from api const data = await getBucketDetails(bucket); return ; diff --git a/frontend/src/app/(app)/(root)/my-space/soft-skills/page.tsx b/frontend/src/app/(app)/(root)/my-space/soft-skills/page.tsx index 04d1e6c2..aa9d2102 100644 --- a/frontend/src/app/(app)/(root)/my-space/soft-skills/page.tsx +++ b/frontend/src/app/(app)/(root)/my-space/soft-skills/page.tsx @@ -1,38 +1,39 @@ import { MySpaceSoftSkillBucketDetails } from '@app/components/pages/mySpace/MySpaceSoftSkillBucketDetails'; import { ProofStatus, SoftSkillBucket } from '@app/types/library'; -export default async function MySpaceBucketDetailed() { - const loremIpsum = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, felis et tincidunt tempor, justo orci cursus ipsum, nec efficitur neque felis sit amet orci.'; +// TODO: get data from api +const loremIpsum = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, felis et tincidunt tempor, justo orci cursus ipsum, nec efficitur neque felis sit amet orci.'; - const data: SoftSkillBucket = { - bucketSlug: 'soft-skills', - bucketName: 'Soft skills', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, felis et tincidunt tempor, justo orci cursus ipsum, nec efficitur neque felis sit amet orci. Vivamus tempus, ex et ultrices rutrum, libero mi molestie mi, non tempus ex metus sed augue. Morbi euismod, nulla nec tempus consequat, quam mi pellentesque elit, non sagittis est nisl sed arcu.', - status: 'completed', - categories: { - Responsibility: [ - { - name: 'Fulfills undertaken obligations regarding tasks', - description: loremIpsum, - proofStatus: ProofStatus.APPROVED as unknown as typeof ProofStatus, - }, - { - name: 'He is responsive and communicates responsibly - without unnecessary delay.', - description: loremIpsum, - proofStatus: ProofStatus.APPROVED as unknown as typeof ProofStatus, - }, - ], - Quality: [ - { - name: 'Fulfills undertaken obligations regarding tasks', - description: loremIpsum, - proofStatus: ProofStatus.APPROVED as unknown as typeof ProofStatus, - }, - ], - }, - }; +const data: SoftSkillBucket = { + bucketSlug: 'soft-skills', + bucketName: 'Soft skills', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, felis et tincidunt tempor, justo orci cursus ipsum, nec efficitur neque felis sit amet orci. Vivamus tempus, ex et ultrices rutrum, libero mi molestie mi, non tempus ex metus sed augue. Morbi euismod, nulla nec tempus consequat, quam mi pellentesque elit, non sagittis est nisl sed arcu.', + status: 'completed', + categories: { + Responsibility: [ + { + name: 'Fulfills undertaken obligations regarding tasks', + description: loremIpsum, + proofStatus: ProofStatus.APPROVED as unknown as typeof ProofStatus, + }, + { + name: 'He is responsive and communicates responsibly - without unnecessary delay.', + description: loremIpsum, + proofStatus: ProofStatus.APPROVED as unknown as typeof ProofStatus, + }, + ], + Quality: [ + { + name: 'Fulfills undertaken obligations regarding tasks', + description: loremIpsum, + proofStatus: ProofStatus.APPROVED as unknown as typeof ProofStatus, + }, + ], + }, +}; +export default async function MySpaceBucketDetailed() { return ; } From 599c8d5fb6dcf9cc1393f414a8191bdded5d24da Mon Sep 17 00:00:00 2001 From: Wiktoria Salamon Date: Mon, 29 Jul 2024 11:21:50 +0200 Subject: [PATCH 5/9] refactor: use route const --- frontend/src/components/modules/Topbar/Topbar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/modules/Topbar/Topbar.tsx b/frontend/src/components/modules/Topbar/Topbar.tsx index 2987ae75..7655ea97 100644 --- a/frontend/src/components/modules/Topbar/Topbar.tsx +++ b/frontend/src/components/modules/Topbar/Topbar.tsx @@ -6,6 +6,7 @@ import { Avatar } from '@app/components/common/Avatar'; import { UserIcon } from '@app/static/icons/UserIcon'; import { LogoutIcon } from '@app/static/icons/LogoutIcon'; import Link from 'next/link'; +import { routes } from '@app/constants'; export const Topbar = () => { // TODO: get user from some context @@ -16,7 +17,7 @@ export const Topbar = () => { const menuItems = [ { - href: '/people/my-profile', + href: routes.people.myProfile, label: 'Profile settings', icon: , }, From 23613e1063f7af21619337a21e1bc733f6e2e831 Mon Sep 17 00:00:00 2001 From: Wiktoria Salamon <39302106+wiktoriasalamon@users.noreply.github.com> Date: Wed, 31 Jul 2024 10:45:04 +0200 Subject: [PATCH 6/9] Update frontend/src/components/modules/LevelDots/LevelDots.tsx Co-authored-by: Mikolaj Schatt <45075843+r1skz3ro@users.noreply.github.com> --- frontend/src/components/modules/LevelDots/LevelDots.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/modules/LevelDots/LevelDots.tsx b/frontend/src/components/modules/LevelDots/LevelDots.tsx index 393b3db7..52ac6c7a 100644 --- a/frontend/src/components/modules/LevelDots/LevelDots.tsx +++ b/frontend/src/components/modules/LevelDots/LevelDots.tsx @@ -1,7 +1,7 @@ import { LevelDotsProps } from './LevelDots.interface'; import { MAX_LEVEL, MIN_LEVEL } from './constants'; -export const LevelDots = ({ level }: LevelDotsProps) => { +export const LevelDots: React.FC = ({ level }) => { const currentLevel = Math.min(Math.max(level ?? MIN_LEVEL, MIN_LEVEL), MAX_LEVEL); return ( From a24cf9234f7ea2fc1fe8f51c73485d88cf5da6a2 Mon Sep 17 00:00:00 2001 From: Wiktoria Salamon Date: Wed, 31 Jul 2024 10:52:34 +0200 Subject: [PATCH 7/9] refactor: rename property --- .../common/ExpandableSection/ExpandableSection.interface.ts | 2 +- .../common/ExpandableSection/ExpandableSection.tsx | 4 ++-- .../src/components/pages/BucketDetails/BucketDetails.tsx | 2 +- .../modules/AdvancementLevel/AdvancementLevel.tsx | 5 +++-- .../modules/AdvancementLevel/AdvancemetLevel.interface.ts | 2 +- .../mySpace/MySpaceBucketDetails/MySpaceBucketDetails.tsx | 2 +- .../modules/AdvancementLevel/AdvancementLevel.interface.ts | 2 +- .../modules/AdvancementLevel/AdvancementLevel.tsx | 4 ++-- 8 files changed, 12 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/common/ExpandableSection/ExpandableSection.interface.ts b/frontend/src/components/common/ExpandableSection/ExpandableSection.interface.ts index 364ec4e0..e992bb90 100644 --- a/frontend/src/components/common/ExpandableSection/ExpandableSection.interface.ts +++ b/frontend/src/components/common/ExpandableSection/ExpandableSection.interface.ts @@ -1,7 +1,7 @@ export interface ExpandableSectionProps { title: string; description?: string; - showVerticalLine?: boolean; + verticalLine?: boolean; open: boolean; onClick: () => void; } diff --git a/frontend/src/components/common/ExpandableSection/ExpandableSection.tsx b/frontend/src/components/common/ExpandableSection/ExpandableSection.tsx index 4656f0e8..4866e7f2 100644 --- a/frontend/src/components/common/ExpandableSection/ExpandableSection.tsx +++ b/frontend/src/components/common/ExpandableSection/ExpandableSection.tsx @@ -8,7 +8,7 @@ export const ExpandableSection: FC> = open, title, description, - showVerticalLine, + verticalLine, children, }) => { return ( @@ -20,7 +20,7 @@ export const ExpandableSection: FC> = > - {showVerticalLine &&
} + {verticalLine &&
}