init create badge form

Author: kkartunov

src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/BadgeCreatedModal.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react'
+
+import { BaseModal } from '../../../../../lib'
+
+export interface BadgeCreatedModalProps {
+    isOpen: boolean
+    onClose: () => void
+}
+
+const BadgeCreatedModal: FC<BadgeCreatedModalProps> = (props: BadgeCreatedModalProps) => {
+
+    function onClose(): void {
+        props.onClose()
+    }
+
+    return (
+        <BaseModal
+            onClose={onClose}
+            open={props.isOpen}
+            size='md'
+            title={`Badge created`}
+        >
+
+        </BaseModal>
+    )
+}
+
+export default BadgeCreatedModal

src-ts/tools/gamification-admin/game-lib/modals/badge-created-modal/index.ts

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

src-ts/tools/gamification-admin/pages/create-badge/CreateBadgePage.tsx

@@ -1,7 +1,9 @@
-import { FC } from 'react'
+import { Dispatch, FC, SetStateAction, useState } from 'react'
 
 import { Breadcrumb, BreadcrumbItemModel, ContentLayout } from '../../../../lib'
 import { useGamificationBreadcrumb } from '../../game-lib'
+import { CreateBadgeForm, createBadgeFormDef } from './create-badge-form'
+import { BadgeCreatedModal } from '../../game-lib/modals/badge-created-modal'
 
 import styles from './CreateBadgePage.module.scss'
 
@@ -14,17 +16,28 @@ const CreateBadgePage: FC = () => {
         },
     ])
 
+    const [showBadgeCreatedModal, setShowBadgeCreatedModal]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+
+    function onSave() {
+        setShowBadgeCreatedModal(true)
+    }
+
     return (
         <ContentLayout
-            contentClass={styles['contentLayout']}
-            outerClass={styles['contentLayout-outer']}
-            innerClass={styles['contentLayout-inner']}
             title='Create Badge'
         >
             <Breadcrumb items={breadcrumb} />
             <div className={styles.container}>
-
+                <CreateBadgeForm
+                    formDef={createBadgeFormDef}
+                    onSave={onSave}
+                />
             </div>
+            <BadgeCreatedModal
+                isOpen={showBadgeCreatedModal}
+                onClose={() => setShowBadgeCreatedModal(false)}
+            />
         </ContentLayout>
     )
 }

src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/CreateBadgeForm.tsx

@@ -1,10 +1,12 @@
-import { FC, useContext } from 'react'
+import { Dispatch, FC, SetStateAction, useState } from 'react'
 
-import { Form, FormDefinition, formGetInputModel, FormInputModel, profileContext, ProfileContextData } from '../../../../../lib'
+import { Form, FormDefinition, formGetInputModel, FormInputModel } from '../../../../../lib'
 
 import { CreateBadgeFormField } from './create-badge-form.config'
 import { CreateBadgeRequest } from './create-badge-functions'
 import { createBadgeSubmitRequestAsync } from './create-badge-functions/create-badge-store'
+import { createBadgeFormDef } from './create-badge-form.config'
+
 import styles from './CreateBadgeForm.module.scss'
 
 export interface CreateBadgeFormProps {
@@ -13,21 +15,25 @@ export interface CreateBadgeFormProps {
 }
 
 const CreateBadgeForm: FC<CreateBadgeFormProps> = (props: CreateBadgeFormProps) => {
+                
+    // createBadgeFormDef.buttons.primaryGroup[0].onClick = (e) => { console.log('save btn click', e); e.preventDefault() }
 
-    const { profile }: ProfileContextData = useContext(profileContext)
 
     function generateRequest(inputs: ReadonlyArray<FormInputModel>): CreateBadgeRequest {
         const badgeName: string = formGetInputModel(inputs, CreateBadgeFormField.badgeName).value as string
         const badgeDesc: string = formGetInputModel(inputs, CreateBadgeFormField.badgeDesc).value as string
         const badgeActive: string = formGetInputModel(inputs, CreateBadgeFormField.badgeActive).value as string
+    
         return {
-          badgeActive,
-          badgeName,
-          badgeDesc,
+            badgeActive,
+            badgeName,
+            badgeDesc,
         }
     }
 
     async function saveAsync(request: CreateBadgeRequest): Promise<void> {
+        console.log('saveAsync', request)
+
         return createBadgeSubmitRequestAsync(request)
             .then(() => {
                 props.onSave()
@@ -38,7 +44,6 @@ const CreateBadgeForm: FC<CreateBadgeFormProps> = (props: CreateBadgeFormProps)
         <>
             <Form
                 formDef={props.formDef}
-                formValues={profile}
                 requestGenerator={generateRequest}
                 save={saveAsync}
             />

src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/create-badge-form.config.tsx

@@ -1,4 +1,4 @@
-import { FormDefinition, validatorRequired, IconOutline, RadioButton } from '../../../../../lib'
+import { FormDefinition, validatorRequired, IconOutline } from '../../../../../lib'
 
 export enum CreateBadgeFormField {
     badgeActive = 'badgeActive',
@@ -13,6 +13,7 @@ export const createBadgeFormDef: FormDefinition = {
                 buttonStyle: 'primary',
                 isSubmit: true,
                 label: 'Save Badge',
+                onClick: (e) => { },
                 size: 'lg',
                 type: 'submit',
             },
@@ -22,14 +23,19 @@ export const createBadgeFormDef: FormDefinition = {
                 buttonStyle: 'icon-bordered',
                 size: 'lg',
                 icon: IconOutline.ChevronLeftIcon,
-                route: `/gamification-admin`
-                
+                route: '/gamification-admin'
+
             },
         ]
     },
     groups: [
         {
             inputs: [
+                // {
+                //     label: 'Activate',
+                //     name: CreateBadgeFormField.badgeActive,
+                //     type: 'checkbox',
+                // },
                 {
                     label: 'Badge Name',
                     name: CreateBadgeFormField.badgeName,
@@ -49,16 +55,6 @@ export const createBadgeFormDef: FormDefinition = {
                             validator: validatorRequired,
                         },
                     ],
-                },
-                {
-                    label: 'Activate',
-                    name: CreateBadgeFormField.badgeActive,
-                    type: 'checkbox',
-                    validators: [
-                        {
-                            validator: validatorRequired,
-                        },
-                    ],
                 }
             ],
         },

src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/create-badge-functions/create-badge-store/create-badge.store.ts

@@ -4,6 +4,7 @@ import { xhrPostAsync } from '../../../../../../../lib'
 import { CreateBadgeRequest } from './create-badge-request.model'
 
 export async function submitRequestAsync(request: CreateBadgeRequest): Promise<void> {
+    console.log('submitRequestAsync', request)
     const url: string = `${EnvironmentConfig.API.V5}/gamification/badges`
     await xhrPostAsync(url, request)
 }