Merge pull request #388 from topcoder-platform/PROD-1573_work-details-solutions

PROD-1573 work details solutions -> qa

Author: brooketopcoder

src-ts/lib/work-provider/work-functions/index.ts

@@ -8,6 +8,7 @@ export {
     workFactoryGetStatus,
     type WorkProgress,
     type WorkProgressStep,
+    type WorkSolution,
     WorkStatus,
     WorkType,
     WorkTypeCategory,

src-ts/lib/work-provider/work-functions/work-factory/index.ts

@@ -1,6 +1,7 @@
 export * from './work-progress.model'
 export * from './work-progress-step.model'
 export * from './work-status.enum'
+export * from './work-solution.model'
 export * from './work-type-category.enum'
 export * from './work-type.enum'
 export {

src-ts/lib/work-provider/work-functions/work-factory/work-solution.model.ts

@@ -0,0 +1,20 @@
+
+export interface WorkSolution {
+    challengeId: number
+    created: Date
+    createdBy: string
+    fileType: string
+    id: string
+    isFileSubmission: boolean
+    legacyChallengeId: number
+    legacySubmissionId: number
+    memberId: number
+    placement: string
+    submissionPhaseId: string
+    submittedDate: Date
+    type: string
+    updated: Date
+    updatedBy: string
+    url: string
+    v5ChallengeId: string
+}

src-ts/tools/index.ts

@@ -1,2 +1,2 @@
 export { default as ToolsRoutes } from './tools.routes'
-export { WorkFeedback, WorkDetailDetails, WorkDetailHeader, WorkDetailSummary } from './work'
+export { WorkFeedback, WorkDetailDetails, WorkDetailHeader, WorkDetailSummary, WorkDetailSolutions } from './work'

src-ts/tools/work/index.ts

@@ -1,4 +1,5 @@
 export * from './work-detail-details'
 export * from './work-detail-header'
+export * from './work-detail-solutions'
 export * from './work-detail-summary'
 export * from './work.routes'

src-ts/tools/work/work-detail-solutions/WorkDetailSolutions.module.scss

@@ -0,0 +1,16 @@
+@import '../../../lib/styles';
+
+.wrap {
+    display: block;
+    padding-bottom: $pad-xxxxl;
+}
+
+.header {
+    @include font-black-100;
+    @include font-roboto;
+    margin-bottom: $pad-lg;
+
+    p {
+        margin-top: $pad-sm;
+    }
+}

src-ts/tools/work/work-detail-solutions/WorkDetailSolutions.tsx

@@ -0,0 +1,41 @@
+import { FC, useContext, useMemo } from 'react'
+
+import { Work, workContext, WorkContextData, WorkSolution, WorkStatus } from '../../../lib'
+
+import { WorkSolutionsList } from './work-solutions-list'
+import styles from './WorkDetailSolutions.module.scss'
+
+interface WorkDetailSolutionsProps {
+    challenge: any
+    onDownload: (solutionId: string) => void
+    solutions: Array<WorkSolution>
+}
+
+const WorkDetailSolutions: FC<WorkDetailSolutionsProps> = (props: WorkDetailSolutionsProps) => {
+
+    const workContextData: WorkContextData = useContext(workContext)
+    const work: Work = workContextData.createFromChallenge(props.challenge)
+
+    const isSolutionsReady: boolean = useMemo(() => {
+        const activeStepName: string = work.progress.steps[work.progress.activeStepIndex]?.name
+        return (activeStepName === WorkStatus.ready || activeStepName === WorkStatus.done) && props.solutions?.length > 0
+    }, [work, props.solutions])
+
+    return (
+        <div className={styles.wrap}>
+            {isSolutionsReady && (
+                <div className={styles.header}>
+                    <h3>
+                        Solutions Available for Download
+                    </h3>
+                    <p className={'body-small'}>
+                        The solutions listed below have met your detailed criteria. They are ranked based on the best solution as determined by Topcoder expert reviewers.
+                    </p>
+                </div>
+            )}
+            <WorkSolutionsList isSolutionsReady={isSolutionsReady} work={work} solutions={props.solutions} onDownload={props.onDownload} />
+        </div>
+    )
+}
+
+export default WorkDetailSolutions

src-ts/tools/work/work-detail-solutions/index.ts

@@ -0,0 +1 @@
+export { default as WorkDetailSolutions } from './WorkDetailSolutions'

src-ts/tools/work/work-detail-solutions/work-solutions-list/WorkSolutionsList.module.scss

@@ -0,0 +1,21 @@
+@import '../../../../lib/styles';
+
+.list-wrap {
+    counter-reset: solutionListItem;
+}
+  
+
+.solutions-not-available {
+    @extend .large-subtitle;
+    @include font-barlow;
+    color: $black-100;
+    
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 507px;
+    padding: $pad-lg;
+    text-align: center;
+    background-color: $black-5;
+    border-radius: $pad-sm;
+}

src-ts/tools/work/work-detail-solutions/work-solutions-list/WorkSolutionsList.tsx

@@ -0,0 +1,37 @@
+import moment from 'moment'
+import { FC, useMemo } from 'react'
+
+import { Work, WorkSolution, WorkStatus } from '../../../../lib'
+
+import { WorkSolutionsListItem } from './work-solutions-list-item'
+import styles from './WorkSolutionsList.module.scss'
+
+interface WorkSolutionsListProps {
+    isSolutionsReady: boolean
+    onDownload: (solutionId: string) => void
+    solutions: Array<WorkSolution>
+    work: Work
+}
+
+const WorkSolutionsList: FC<WorkSolutionsListProps> = (props: WorkSolutionsListProps) => {
+
+    if (!props.isSolutionsReady || !props.solutions?.length) {
+        return (
+            <div className={styles['solutions-not-available']}>
+                YOUR SOLUTIONS WILL BE AVAILABLE FOR DOWNLOAD ON:
+                <br />
+                {moment(props.work.solutionsReadyDate).format('MM/DD/YY')}
+            </div>
+        )
+    }
+
+    return (
+        <div className={styles['list-wrap']}>
+            {props.solutions.map((solution) => (
+                <WorkSolutionsListItem solution={solution} key={solution.id} onDownload={props.onDownload}/>
+            ))}
+        </div>
+    )
+}
+
+export default WorkSolutionsList