From f195175e04d1b2d84c98542b0b5297e784794040 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Wed, 28 Sep 2022 22:07:30 +0300 Subject: [PATCH 1/2] Fix GAME-141 --- .../create-badge/create-badge-form/create-badge-form.config.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/create-badge-form.config.tsx b/src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/create-badge-form.config.tsx index 74a0414b9..6621857d8 100644 --- a/src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/create-badge-form.config.tsx +++ b/src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/create-badge-form.config.tsx @@ -52,6 +52,7 @@ export const createBadgeFormDef: FormDefinition = { { label: 'Badge Name', name: CreateBadgeFormField.badgeName, + placeholder: 'Enter badge name', type: 'text', validators: [ { @@ -62,6 +63,7 @@ export const createBadgeFormDef: FormDefinition = { { label: 'Badge Description', name: CreateBadgeFormField.badgeDesc, + placeholder: 'Enter badge description, details, how to get awarded info', type: 'textarea', validators: [ { From d69583dd7244731025e9ae59e9fbfe496a4fd9b2 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Thu, 29 Sep 2022 12:11:21 +0300 Subject: [PATCH 2/2] Badge create page UI fixes from QA --- src-ts/lib/form/Form.tsx | 9 ++++++ .../input-wrapper/InputWrapper.module.scss | 3 -- .../validator.functions.ts | 2 +- .../BadgeCreatedModal.module.scss | 20 +++++++++--- .../badge-created-modal/BadgeCreatedModal.tsx | 31 ++++++++++++------- .../create-badge-form/CreateBadgeForm.tsx | 1 + 6 files changed, 46 insertions(+), 20 deletions(-) diff --git a/src-ts/lib/form/Form.tsx b/src-ts/lib/form/Form.tsx index c1aa827d1..ad7d7cb14 100644 --- a/src-ts/lib/form/Form.tsx +++ b/src-ts/lib/form/Form.tsx @@ -35,6 +35,7 @@ interface FormProps { readonly onChange?: (inputs: ReadonlyArray) => void, readonly onSuccess?: () => void readonly requestGenerator: (inputs: ReadonlyArray) => RequestType + readonly resetFormOnUnmount?: boolean readonly save: (value: RequestType) => Promise } @@ -83,6 +84,14 @@ const Form: (props: FormProps { + return () => { + if (props.resetFormOnUnmount) { + onReset() + } + } + }, []) + function checkIfFormIsValid(formInputFields: Array): void { setFormInvalid(formInputFields.filter(item => !!item.error).length > 0) } diff --git a/src-ts/lib/form/form-groups/form-input/input-wrapper/InputWrapper.module.scss b/src-ts/lib/form/form-groups/form-input/input-wrapper/InputWrapper.module.scss index 4052802ad..bb0a843be 100644 --- a/src-ts/lib/form/form-groups/form-input/input-wrapper/InputWrapper.module.scss +++ b/src-ts/lib/form/form-groups/form-input/input-wrapper/InputWrapper.module.scss @@ -45,9 +45,6 @@ $error-line-height: 14px; display: flex; flex-direction: row; align-items: center; - @include ltemd { - align-items: flex-start; - } .checkbox-label { margin-left: $space-sm; flex: 1; diff --git a/src-ts/lib/form/validator-functions/validator.functions.ts b/src-ts/lib/form/validator-functions/validator.functions.ts index 9dc9663f9..dbf89559a 100644 --- a/src-ts/lib/form/validator-functions/validator.functions.ts +++ b/src-ts/lib/form/validator-functions/validator.functions.ts @@ -90,7 +90,7 @@ export function matchOther(value: InputValue, formElements?: HTMLFormControlsCol } export function required(value: InputValue): string | undefined { - return (value === undefined || value === '') ? 'Required' : undefined + return (value === undefined || value === '' || !(value as FileList).length) ? 'Required' : undefined } export function requiredIfOther(value: InputValue, formElements?: HTMLFormControlsCollection, otherFieldName?: string): string | undefined { diff --git a/src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/BadgeCreatedModal.module.scss b/src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/BadgeCreatedModal.module.scss index adadea7c1..4ba71f360 100644 --- a/src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/BadgeCreatedModal.module.scss +++ b/src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/BadgeCreatedModal.module.scss @@ -1,8 +1,11 @@ @import "../../../../../lib/styles/variables"; +@import "../../../../../lib/styles/includes"; .wrapper { display: flex; flex-direction: column; + justify-content: space-between; + min-height: 100%; .badge { display: flex; @@ -28,12 +31,21 @@ } } - .actions { + .actions-wrap { display: flex; - align-items: center; + flex-direction: column; + + .actions { + display: flex; + align-items: center; + + @include ltemd { + justify-content: flex-end; + } - a { - margin-right: $space-md; + a { + margin-right: $space-md; + } } } } \ No newline at end of file diff --git a/src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/BadgeCreatedModal.tsx b/src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/BadgeCreatedModal.tsx index 375c47192..a46076c18 100644 --- a/src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/BadgeCreatedModal.tsx +++ b/src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/BadgeCreatedModal.tsx @@ -1,6 +1,6 @@ import { FC } from 'react' -import { BaseModal, Button } from '../../../../../lib' +import { BaseModal, Button, PageDivider, useCheckIsMobile } from '../../../../../lib' import { badgeDetailPath } from '../../../gamification-admin.routes' import { GameBadge } from '../../game-badge.model' @@ -13,6 +13,8 @@ export interface BadgeCreatedModalProps { const BadgeCreatedModal: FC = (props: BadgeCreatedModalProps) => { + const isMobile: boolean = useCheckIsMobile() + function onClose(): void { props.onClose() } @@ -34,17 +36,22 @@ const BadgeCreatedModal: FC = (props: BadgeCreatedModalP />

{props.badge.badge_name} badge has been sucessfully created.

-
-
diff --git a/src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/CreateBadgeForm.tsx b/src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/CreateBadgeForm.tsx index 558132e61..d32e0501b 100644 --- a/src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/CreateBadgeForm.tsx +++ b/src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/CreateBadgeForm.tsx @@ -42,6 +42,7 @@ const CreateBadgeForm: FC = (props: CreateBadgeFormProps)
)