diff --git a/src/apps/review/src/pages/scorecards/EditScorecardPage/EditScorecardPage.module.scss b/src/apps/review/src/pages/scorecards/EditScorecardPage/EditScorecardPage.module.scss index 8799405fa..6d0df9e21 100644 --- a/src/apps/review/src/pages/scorecards/EditScorecardPage/EditScorecardPage.module.scss +++ b/src/apps/review/src/pages/scorecards/EditScorecardPage/EditScorecardPage.module.scss @@ -35,6 +35,9 @@ background-color: #F6F7F9; border-radius: $sp-2; padding: $sp-8; + @include ltemd { + padding: $sp-3; + } } .scorecardInfo { @@ -60,11 +63,25 @@ display: flex; gap: $sp-4; width: 100%; + @include ltemd { + flex-wrap: wrap; + position: relative; + + .trashIcon { + position: absolute; + bottom: 100%; + right: 0; + flex: 0 0 100%; + } + } } } .contentArea { padding: $sp-5 $sp-4; + @include ltemd { + padding: $sp-3; + } } .groupWrap { @@ -76,6 +93,9 @@ .contentArea { background: #E0E4E84D; padding: $sp-10 $sp-8; + @include ltemd { + padding: $sp-3; + } } } @@ -92,8 +112,11 @@ .questionWrap { .questionItem { + --pad-x: #{$sp-4}; + --pad-y: #{$sp-5}; + width: 100%; - padding: $sp-5 $sp-4; + padding: var(--pad-y) var(--pad-x); background: #F6F7F9; display: grid; @@ -120,6 +143,42 @@ .headerAreaLabel { width: 100%; } + + @include ltemd { + .questionItem { + --pad-x: #{$sp-3}; + --pad-y: #{$sp-3}; + position: relative; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto auto; + gap: $sp-4; + + :global(.main-group) { + grid-column: 1 / -1; + } + + :global(.weight-group) { + grid-column: 1 / -1; + } + + :global(.action-group) { + position: absolute; + top: var(--pad-y); + right: var(--pad-x); + height: 28px; + } + + .doubleInputWrap { + display: flex; + flex-direction: column; + gap: $sp-4; + + > * { + flex: 1; + } + } + } + } } .xlWidthInput { @@ -135,6 +194,15 @@ flex: 0 0 40%; } +.xlWidthInput, +.smWidthInput, +.mdWidthInput { + @include ltemd { + flex: 0 0 100%; + } +} + + .doubleInputWrap { display: flex; gap: $sp-3; @@ -160,6 +228,10 @@ justify-content: space-between; align-items: center; margin-top: $sp-5; + @include ltemd { + flex-direction: column; + align-items: center; + } } .bottomContainer { diff --git a/src/apps/review/src/pages/scorecards/EditScorecardPage/components/BasicSelect.tsx b/src/apps/review/src/pages/scorecards/EditScorecardPage/components/BasicSelect.tsx index fbf897338..7890278f0 100644 --- a/src/apps/review/src/pages/scorecards/EditScorecardPage/components/BasicSelect.tsx +++ b/src/apps/review/src/pages/scorecards/EditScorecardPage/components/BasicSelect.tsx @@ -26,7 +26,7 @@ const BasicSelect: FC> = props => ( {props.options.map(option => ( diff --git a/src/apps/review/src/pages/scorecards/EditScorecardPage/components/CalculatedWeightsSum.module.scss b/src/apps/review/src/pages/scorecards/EditScorecardPage/components/CalculatedWeightsSum.module.scss index 0529c00a5..2bbe5d7db 100644 --- a/src/apps/review/src/pages/scorecards/EditScorecardPage/components/CalculatedWeightsSum.module.scss +++ b/src/apps/review/src/pages/scorecards/EditScorecardPage/components/CalculatedWeightsSum.module.scss @@ -6,6 +6,10 @@ align-items: center; margin-right: 56px; + + @include ltemd { + margin-right: 0; + } } .labels { @@ -13,6 +17,10 @@ > * { line-height: 20px; } + + @include ltemd { + text-align: left; + } } .value { diff --git a/src/apps/review/src/pages/scorecards/EditScorecardPage/components/ScorecardInfoForm.tsx b/src/apps/review/src/pages/scorecards/EditScorecardPage/components/ScorecardInfoForm.tsx index 37f67f6b0..859cce8c1 100644 --- a/src/apps/review/src/pages/scorecards/EditScorecardPage/components/ScorecardInfoForm.tsx +++ b/src/apps/review/src/pages/scorecards/EditScorecardPage/components/ScorecardInfoForm.tsx @@ -28,14 +28,15 @@ export const scorecardInfoSchema = { .required('Category is required'), maxScore: yup .number() - .typeError('Max. Score must be a number') - .required('Max. Score is required') - .moreThan(yup.ref('minScore'), 'Max. Score must be greater than Min. Score'), + .typeError('Max score must be a number') + .required('Max score is required') + .moreThan(yup.ref('minScore'), 'Max score must be greater than min score') + .max(100, 'Max score must be lower than 100'), minScore: yup .number() - .typeError('Min. Score must be a number') - .required('Min. Score is required') - .min(0, 'Min. Score must be at least 0'), + .typeError('Min Score must be a number') + .required('Min Score is required') + .min(0, 'Min Score must be at least 0'), name: yup.string() .required('Scorecard Name is required'), status: yup.string() diff --git a/src/apps/review/src/pages/scorecards/EditScorecardPage/components/ScorecardQuestionForm.tsx b/src/apps/review/src/pages/scorecards/EditScorecardPage/components/ScorecardQuestionForm.tsx index 824657055..7a2cb9d8a 100644 --- a/src/apps/review/src/pages/scorecards/EditScorecardPage/components/ScorecardQuestionForm.tsx +++ b/src/apps/review/src/pages/scorecards/EditScorecardPage/components/ScorecardQuestionForm.tsx @@ -29,6 +29,15 @@ export const scorecardQuestionSchema = { .required('Description is required'), guidelines: yup.string() .nullable(), + requiresUpload: yup.boolean() + .transform((value, originalValue) => { + // Handle empty string as undefined (so required() can catch it) + if (originalValue === '') return undefined + + // Yup already transforms "true"/"false" strings into booleans + return value + }) + .required('Documents requirements is required'), type: yup.string() .required('Scale is required'), weight: yup @@ -168,7 +177,18 @@ const ScorecardQuestionForm: FC = props => { name={`${name}.${index}.requiresUpload`} placeholder='Select Document Requirements' > - + , + field: any, + ) { + field.onChange({ + ...ev, + target: { ...ev.target, value: ev.target.value === 'true' }, + }) + }) as ChangeEventHandler} + /> diff --git a/src/apps/review/src/pages/scorecards/EditScorecardPage/utils.ts b/src/apps/review/src/pages/scorecards/EditScorecardPage/utils.ts index a89b2f412..f87fce501 100644 --- a/src/apps/review/src/pages/scorecards/EditScorecardPage/utils.ts +++ b/src/apps/review/src/pages/scorecards/EditScorecardPage/utils.ts @@ -7,7 +7,7 @@ import { Scorecard, ScorecardGroup, ScorecardQuestion, ScorecardSection } from ' export const getEmptyScorecardQuestion = (): ScorecardQuestion => ({ description: '', guidelines: '', - requiresUpload: false, + requiresUpload: '', scaleMax: '', scaleMin: '', sortOrder: 0, @@ -61,7 +61,7 @@ export const weightsSum = ( if (!items?.length) return false const sum = items.reduce((acc, g) => acc + (Number(g.weight) || 0), 0) - if (sum !== 100) { + if (sum !== value) { // force the error to go into `.root`, otherwise it will overwride the array errors return ctx.createError({ path: ctx.path.replace(/(\.root$)|$/, '.root'), diff --git a/src/libs/ui/lib/components/button/base-button/BaseButton.module.scss b/src/libs/ui/lib/components/button/base-button/BaseButton.module.scss index 9170bc036..06c28e30a 100644 --- a/src/libs/ui/lib/components/button/base-button/BaseButton.module.scss +++ b/src/libs/ui/lib/components/button/base-button/BaseButton.module.scss @@ -253,4 +253,5 @@ $btn-secondary-border-width: $border; --btn-secondary-border-width: 1px; font-weight: $font-weight-medium; + font-family: "Nunito Sans", sans-serif; }