Merge pull request #1200 from topcoder-platform/PM-1504_edit-create-scorecard

PM-1504 edit create scorecard

Author: vas3a

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 {

src/apps/review/src/pages/scorecards/EditScorecardPage/components/BasicSelect.tsx

@@ -26,7 +26,7 @@ const BasicSelect: FC<BasicSelectProps<any>> = props => (
         {props.options.map(option => (
             <option
                 key={`${option.value}`}
-                value={option.value as string}
+                value={`${option.value}`}
             >
                 {option.label}
             </option>

src/apps/review/src/pages/scorecards/EditScorecardPage/components/CalculatedWeightsSum.module.scss

@@ -6,13 +6,21 @@
     align-items: center;
 
     margin-right: 56px;
+
+    @include ltemd {
+        margin-right: 0;
+    }
 }
 
 .labels {
     text-align: right;
     > * {
         line-height: 20px;
     }
+
+    @include ltemd {
+        text-align: left;
+    }
 }
 
 .value {

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()

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<ScorecardQuestionFormProps> = props => {
                             name={`${name}.${index}.requiresUpload`}
                             placeholder='Select Document Requirements'
                         >
-                            <BasicSelect options={yesNoOptions} />
+                            <BasicSelect
+                                options={yesNoOptions}
+                                onChange={(function handleChangeRequireUpload(
+                                    ev: ChangeEvent<HTMLInputElement>,
+                                    field: any,
+                                ) {
+                                    field.onChange({
+                                        ...ev,
+                                        target: { ...ev.target, value: ev.target.value === 'true' },
+                                    })
+                                }) as ChangeEventHandler}
+                            />
                         </InputWrapper>
                     </div>
                 </div>

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'),

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;
 }