init badge creation

Author: kkartunov

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

@@ -1,17 +1,3 @@
-.contentLayout {
-  width: 100%;
-  padding-bottom: 0;
-
-  .contentLayout-outer {
-    width: 100%;
-
-    .contentLayout-inner {
-      width: 100%;
-      overflow: visible;
-    }
-  }
-}
-
 .container {
   display: flex;
 }

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

@@ -1,8 +1,9 @@
-import { FC, useMemo } from 'react'
+import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
 
-import { Breadcrumb, BreadcrumbItemModel, ContentLayout } from '../../../../lib'
+import { Breadcrumb, BreadcrumbItemModel, ContentLayout, FormDefinition, formOnReset, formGetInputFields } from '../../../../lib'
 import { baseUrl } from '../../gamification-admin.routes'
 import { toolTitle } from '../../GamificationAdmin'
+import { CreateBadgeForm, createBadgeFormDef } from './create-badge-form'
 
 import styles from './CreateBadgePage.module.scss'
 
@@ -12,16 +13,25 @@ const CreateBadgePage: FC = () => {
     { name: 'create badge', url: '#' },
   ], [])
 
+  const [formDef, setFormDef]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
+        = useState<FormDefinition>({ ...createBadgeFormDef })
+
+    function onSave(): void {
+        const updatedForm: FormDefinition = { ...formDef }
+        formOnReset(formGetInputFields(updatedForm.groups || []))
+        setFormDef(updatedForm)
+    }
+
   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>
     </ContentLayout>
   )

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

@@ -0,0 +1,2 @@
+@import '../../../../../lib/styles/includes';
+

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

@@ -0,0 +1,49 @@
+import { FC, useContext } from 'react'
+
+import { Form, FormDefinition, formGetInputModel, FormInputModel, profileContext, ProfileContextData } 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 styles from './CreateBadgeForm.module.scss'
+
+export interface CreateBadgeFormProps {
+    formDef: FormDefinition
+    onSave: () => void
+}
+
+const CreateBadgeForm: FC<CreateBadgeFormProps> = (props: CreateBadgeFormProps) => {
+
+    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,
+        }
+    }
+
+    async function saveAsync(request: CreateBadgeRequest): Promise<void> {
+        return createBadgeSubmitRequestAsync(request)
+            .then(() => {
+                props.onSave()
+            })
+    }
+
+    return (
+        <>
+            <Form
+                formDef={props.formDef}
+                formValues={profile}
+                requestGenerator={generateRequest}
+                save={saveAsync}
+            />
+        </>
+    )
+}
+
+export default CreateBadgeForm

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

@@ -0,0 +1,66 @@
+import { FormDefinition, validatorRequired, IconOutline, RadioButton } from '../../../../../lib'
+
+export enum CreateBadgeFormField {
+    badgeActive = 'badgeActive',
+    badgeName = 'badgeName',
+    badgeDesc = 'badgeDesc',
+}
+
+export const createBadgeFormDef: FormDefinition = {
+    buttons: {
+        primaryGroup: [
+            {
+                buttonStyle: 'primary',
+                isSubmit: true,
+                label: 'Save Badge',
+                size: 'lg',
+                type: 'submit',
+            },
+        ],
+        secondaryGroup: [
+            {
+                buttonStyle: 'icon-bordered',
+                size: 'lg',
+                icon: IconOutline.ChevronLeftIcon,
+                route: `/gamification-admin`
+                
+            },
+        ]
+    },
+    groups: [
+        {
+            inputs: [
+                {
+                    label: 'Badge Name',
+                    name: CreateBadgeFormField.badgeName,
+                    type: 'text',
+                    validators: [
+                        {
+                            validator: validatorRequired,
+                        },
+                    ],
+                },
+                {
+                    label: 'Badge Description',
+                    name: CreateBadgeFormField.badgeDesc,
+                    type: 'textarea',
+                    validators: [
+                        {
+                            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-request.model.ts

@@ -0,0 +1,5 @@
+export interface CreateBadgeRequest {
+    badgeActive: string
+    badgeName: string
+    badgeDesc: string
+}

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

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

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

@@ -0,0 +1,2 @@
+export * from './create-badge-request.model'
+export { submitRequestAsync as createBadgeSubmitRequestAsync } from './create-badge.store'

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

@@ -0,0 +1,5 @@
+import { CreateBadgeRequest, createBadgeSubmitRequestAsync } from './create-badge-store'
+
+export async function submitRequestAsync(request: CreateBadgeRequest): Promise<void> {
+    return createBadgeSubmitRequestAsync(request)
+}

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

@@ -0,0 +1,2 @@
+export { type CreateBadgeRequest } from './create-badge-store'
+export { submitRequestAsync as contactSupportSubmitRequestAsync } from './create-badge.functions'