Skip to content

Commit 6cfed33

Browse files
author
Maria Mattlin
committed
WIP - Created details pane and moved over code from src. Info displays but still needs to be cleaned up
1 parent e51b6f4 commit 6cfed33

File tree

8 files changed

+22934
-93
lines changed

8 files changed

+22934
-93
lines changed

‎package-lock.json

Lines changed: 22691 additions & 81 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"@testing-library/jest-dom": "^5.5.0",
2828
"@testing-library/react": "^9.4.0",
2929
"@types/jest": "^25.2.3",
30+
"@types/lodash": "^4.14.182",
3031
"@types/node": "^17.0.24",
3132
"@types/reach__router": "^1.3.10",
3233
"@types/react": "^18.0.5",

‎src-ts/tools/work/work-detail-details/WorkDetailDetails.module.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
padding-bottom: 32px;
66
}
77

8-
.details-content {
9-
flex-grow: 2;
10-
}
8+
// .details-content {
9+
// flex-grow: 2;
10+
// }

‎src-ts/tools/work/work-detail-details/WorkDetailDetails.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
import { FC } from 'react'
22

3+
import { WorkDetailDetailsPane } from './work-detail-details-pane'
34
import { WorkDetailDetailsSidebar } from './work-detail-details-sidebar'
45
import styles from './WorkDetailDetails.module.scss'
56

67
interface WorkDetailDetailsProps {
7-
children: JSX.Element
8+
children: JSX.Element,
9+
formData: {}
810
}
911

1012
const WorkDetailDetails: FC<WorkDetailDetailsProps> = (props: WorkDetailDetailsProps) => {
11-
1213
return (
1314
<div className={styles['wrap']}>
14-
<div className={styles['details-content']}>
15+
{/* <div className={styles['details-content']}>
1516
{props.children}
16-
</div>
17+
</div> */}
18+
<WorkDetailDetailsPane formData={props.formData} />
1719
<WorkDetailDetailsSidebar />
1820
</div>
1921
)

‎src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.module.scss

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
@import '../../../../lib/styles';
2+
3+
.header {
4+
display: flex;
5+
justify-content: space-between;
6+
cursor: pointer;
7+
margin-bottom: 0;
8+
9+
.icon {
10+
svg {
11+
transform: scale(1.5);
12+
margin-top: 22px;
13+
}
14+
15+
&.open {
16+
svg {
17+
margin-top: 0 !important;
18+
}
19+
20+
transform: rotate(-180deg);
21+
}
22+
}
23+
24+
.stepLabel {
25+
font-size: 16px;
26+
font-weight: 600;
27+
line-height: 20px;
28+
text-transform: uppercase;
29+
margin-top: 14px;
30+
31+
.link {
32+
color: $link-blue-dark;
33+
cursor: pointer;
34+
margin-left: 10px;
35+
margin-top: 4px;
36+
text-transform: none;
37+
38+
&:hover {
39+
text-decoration: underline;
40+
}
41+
}
42+
}
43+
}
44+
45+
.projectTitle {
46+
font-weight: 600;
47+
margin-top: 18px;
48+
font-size: 16px;
49+
line-height: 20px;
50+
}
51+
52+
.detail {
53+
margin-top: 16px;
54+
white-space: pre-wrap;
55+
56+
.itemWrapper {
57+
display: flex;
58+
59+
.item {
60+
text-transform: capitalize;
61+
@include font-roboto;
62+
font-weight: 700;
63+
font-size: 16px;
64+
line-height: 26px;
65+
}
66+
}
67+
68+
.key {
69+
@include font-roboto;
70+
font-size: 16px;
71+
line-height: 26px;
72+
73+
.detail {
74+
padding-left: 20px;
75+
}
76+
}
77+
}
78+
79+
.paneContent {
80+
flex-grow: 2;
81+
}

‎src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.tsx

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import _ from 'lodash'
2+
import { FC, useState } from 'react'
3+
4+
import PageDivider from '../../../../../src/components/PageDivider'
5+
6+
import styles from './WorkDetailDetailsPane.module.scss'
7+
8+
interface WorkDetailDetailsPaneProps {
9+
formData: any
10+
}
11+
12+
const WorkDetailDetailsPane: FC<WorkDetailDetailsPaneProps> = (props: WorkDetailDetailsPaneProps) => {
13+
const [steps, setSteps] = useState([
14+
{
15+
id: 0,
16+
isOpen: true,
17+
label: 'Review Your Project Details',
18+
value: 'basicInfo',
19+
},
20+
{ id: 1, label: 'Website Purpose', value: 'websitePurpose', isOpen: true },
21+
{ id: 2, label: 'Page Details', value: 'pageDetails', isOpen: true },
22+
{ id: 3, label: 'Branding', value: 'branding', isOpen: true },
23+
])
24+
25+
const renderPageDetails = (step: any) => {
26+
const items = props.formData[step.value] || {}
27+
const pages = items?.pages || []
28+
29+
return pages.map((page: any, index: number) => {
30+
return (
31+
<div>
32+
{page?.pageName && (
33+
<div className={styles['detail']}>
34+
<div className={styles['itemWrapper']}>
35+
<p className={styles['item']}>Page {index + 1} Name</p>
36+
</div>
37+
<p className={styles['key']}>{page?.pageName}</p>
38+
</div>
39+
)}
40+
{page?.pageDetails && (
41+
<div className={styles['detail']}>
42+
<div className={styles['itemWrapper']}>
43+
<p className={styles['item']}>Page {index + 1} Requirements</p>
44+
</div>
45+
<p className={styles['key']}>{page?.pageDetails}</p>
46+
</div>
47+
)}
48+
</div>
49+
)
50+
})
51+
}
52+
53+
const renderDetails = (step: any) => {
54+
let items = props.formData[step.value] || {}
55+
if (props.formData?.workType?.selectedWorkType === 'Find Me Data') {
56+
items = _.omit(items, ['projectTitle', 'assetsUrl', 'goals'])
57+
} else {
58+
items = _.omit(items, [
59+
'findMeProjectTitle',
60+
'analysis',
61+
'primaryDataChallenge',
62+
'primaryDataChallengeOther',
63+
'sampleData',
64+
])
65+
}
66+
return Object.keys(items).map((key) => {
67+
if (_.isArray(items[key])) {
68+
return _.map(items[key], (item, i) => (
69+
<div className={styles['detail']} key={i}>
70+
<div className={styles['itemWrapper']}>
71+
<p className={styles['item']}>
72+
{key} {i + 1}
73+
</p>
74+
</div>
75+
<p className={styles['key']}>
76+
{Object.keys(item).map((subKey) =>
77+
renderOption(item[subKey], subKey)
78+
)}
79+
</p>
80+
</div>
81+
))
82+
}
83+
return renderOption(items[key])
84+
})
85+
}
86+
87+
const renderOption = (option: any, title = '') => {
88+
console.log('renderOption', option.title)
89+
return (
90+
<div>
91+
{option.option && (
92+
<div className={styles['detail']}>
93+
<div className={styles['itemWrapper']}>
94+
<p className={styles['item']}>{option.title || title}</p>
95+
</div>
96+
<p className={styles['key']}>{formatOption(option.option)}</p>
97+
</div>
98+
)}
99+
</div>
100+
)
101+
}
102+
103+
const formatOption = (option: any): any => {
104+
if (_.isArray(option)) {
105+
return option.join(', ')
106+
}
107+
if (_.isObject(option)) {
108+
return formatOption(_.get(option, 'option', option))
109+
}
110+
return option
111+
}
112+
113+
return (
114+
<div className={styles['paneContent']}>
115+
{steps
116+
.filter((s) => {
117+
if (s.value === 'pageDetails') {
118+
return _.get(props.formData[s.value], 'pages[0].pageDetails') !== ''
119+
}
120+
return !!props.formData[s.value]
121+
})
122+
.map((step) => {
123+
return (
124+
<>
125+
<div
126+
className={styles['header']}
127+
>
128+
<p className={styles['stepLabel']}>
129+
{step.label}
130+
</p>
131+
</div>
132+
{step.value === 'pageDetails'
133+
? renderPageDetails(step)
134+
: renderDetails(step)
135+
}
136+
137+
<PageDivider styleName={''} />
138+
</>
139+
)
140+
})}
141+
</div>
142+
)
143+
}
144+
145+
export default WorkDetailDetailsPane

‎src-ts/tools/work/work-detail-details/work-detail-details-pane/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as WorkDetailDetailsPane } from './WorkDetailDetailsPane'

‎src/routes/WorkItems/index.jsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const WorkItem = ({
8181
return workUtil.isReviewPhaseEnded(work);
8282
}
8383
}, [work]);
84-
84+
8585
useEffect(() => {
8686
if (!work) {
8787
return;
@@ -123,7 +123,7 @@ const WorkItem = ({
123123
if (!work) {
124124
return;
125125
}
126-
126+
127127
if (work || selectedTab === "messaging") {
128128
getForumNotifications(work.id);
129129
}
@@ -133,7 +133,7 @@ const WorkItem = ({
133133
if (!work) {
134134
return;
135135
}
136-
136+
137137
if (isReviewPhaseEnded) {
138138
getSolutionsCount(work.id);
139139
}
@@ -242,13 +242,14 @@ const WorkItem = ({
242242

243243
{selectedTab === 'details' && (
244244
<div>
245-
<WorkDetailDetails>
245+
{/* <WorkDetailDetails>
246246
<ReviewTable
247247
formData={_.get(details, "intake-form.form", {})}
248248
enableEdit={false}
249249
enableStepsToggle={false}
250250
/>
251-
</WorkDetailDetails>
251+
</WorkDetailDetails> */}
252+
<WorkDetailDetails formData={_.get(details, "intake-form.form", {})} />
252253
</div>
253254
)}
254255

0 commit comments

Comments
 (0)