Connect create badge to API and clean up

Author: kkartunov

src-ts/lib/form/form-groups/form-input/input-image-picker/InputImagePicker.tsx

@@ -36,6 +36,7 @@ const InputImagePicker: FC<InputImagePickerProps> = (props: InputImagePickerProp
         }
     }, [
         files,
+        fileDataURL,
     ])
 
     return (
@@ -59,7 +60,7 @@ const InputImagePicker: FC<InputImagePickerProps> = (props: InputImagePickerProp
             />
             {
                 fileDataURL ? (
-                    <img src={fileDataURL} className={styles.badgeImage} />
+                    <img src={fileDataURL} alt={'Badge image preview'} className={styles.badgeImage} />
                 ) : (
                     <div className={styles.filePickerPlaceholder}>UPLOAD<br />IMAGE</div>
                 )

src-ts/lib/table/Table.tsx

@@ -61,6 +61,7 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
                 columns,
                 data,
                 defaultSortDirectionMap,
+                props.onToggleSort,
                 sort,
             ])
 

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

@@ -0,0 +1,39 @@
+@import "../../../../../lib/styles/variables";
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+
+    .badge {
+        display: flex;
+        align-items: center;
+        margin-bottom: $space-xxl;
+
+        .badge-image {
+            width: 43px;
+            height: 43px;
+            margin-right: $space-xl;
+        }
+
+        .badge-image-disabled {
+            width: 43px;
+            height: 43px;
+            margin-right: $space-xl;
+            opacity: 0.5;
+            filter: grayscale(1);
+        }
+
+        .badge-name {
+            font-size: 16px;
+        }
+    }
+
+    .actions {
+        display: flex;
+        align-items: center;
+
+        a {
+            margin-right: $space-md;
+        }
+    }
+}

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

@@ -1,8 +1,12 @@
 import { FC } from 'react'
 
-import { BaseModal } from '../../../../../lib'
+import { BaseModal, Button } from '../../../../../lib'
+import { badgeDetailPath } from '../../../gamification-admin.routes'
+import { GameBadge } from '../../game-badge.model'
 
+import styles from './BadgeCreatedModal.module.scss'
 export interface BadgeCreatedModalProps {
+    badge: GameBadge
     isOpen: boolean
     onClose: () => void
 }
@@ -20,7 +24,28 @@ const BadgeCreatedModal: FC<BadgeCreatedModalProps> = (props: BadgeCreatedModalP
             size='md'
             title={`Badge created`}
         >
-
+            <div className={styles.wrapper}>
+                <div className={styles.badge}>
+                    <img
+                        alt={props.badge.badge_name}
+                        className={styles[props.badge.active ? 'badge-image' : 'badge-image-disabled']}
+                        src={props.badge.badge_image_url}
+                    />
+                    <p className={styles['badge-name']}>{props.badge.badge_name} badge has been sucessfully created.</p>
+                </div>
+                <div className={styles.actions}>
+                    <Button
+                        label='View'
+                        buttonStyle='primary'
+                        route={badgeDetailPath(props.badge.id)}
+                    />
+                    <Button
+                        label={props.badge.active ? 'Award' : 'Activate & Award'}
+                        buttonStyle='secondary'
+                        route={badgeDetailPath(props.badge.id, 'award')}
+                    />
+                </div>
+            </div>
         </BaseModal>
     )
 }

src-ts/tools/gamification-admin/gamification-admin.routes.tsx

@@ -5,8 +5,8 @@ import BadgeDetailPage from './pages/badge-detail/BadgeDetailPage'
 import BadgeListingPage from './pages/badge-listing/BadgeListingPage'
 import CreateBadgePage from './pages/create-badge/CreateBadgePage'
 
-const baseDetailPath: string = '/badge-detail'
-const createBadgePath: string = '/create-badge'
+export const baseDetailPath: string = '/badge-detail'
+export const createBadgePath: string = '/create-badge'
 
 export const basePath: string = '/gamification-admin'
 

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

@@ -1,7 +1,7 @@
 import { Dispatch, FC, SetStateAction, useState } from 'react'
 
 import { Breadcrumb, BreadcrumbItemModel, ContentLayout } from '../../../../lib'
-import { useGamificationBreadcrumb } from '../../game-lib'
+import { GameBadge, useGamificationBreadcrumb } from '../../game-lib'
 import { BadgeCreatedModal } from '../../game-lib/modals/badge-created-modal'
 
 import { CreateBadgeForm, createBadgeFormDef } from './create-badge-form'
@@ -19,7 +19,11 @@ const CreateBadgePage: FC = () => {
     const [showBadgeCreatedModal, setShowBadgeCreatedModal]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
-    function onSave() {
+    const [createdBadge, setCreatedBadge]: [GameBadge | undefined, Dispatch<SetStateAction<GameBadge | undefined>>]
+        = useState<GameBadge | undefined>()
+
+    function onSave(newBadge: GameBadge): void {
+        setCreatedBadge(newBadge)
         setShowBadgeCreatedModal(true)
     }
 
@@ -34,10 +38,13 @@ const CreateBadgePage: FC = () => {
                     onSave={onSave}
                 />
             </div>
-            <BadgeCreatedModal
-                isOpen={showBadgeCreatedModal}
-                onClose={() => setShowBadgeCreatedModal(false)}
-            />
+            {
+                createdBadge && <BadgeCreatedModal
+                    badge={createdBadge}
+                    isOpen={showBadgeCreatedModal}
+                    onClose={() => setShowBadgeCreatedModal(false)}
+                />
+            }
         </ContentLayout>
     )
 }

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

@@ -1,14 +1,16 @@
 import { FC } from 'react'
 
 import { Form, FormDefinition, formGetInputModel, FormInputModel } from '../../../../../lib'
+import { GamificationConfig } from '../../../game-config'
+import { GameBadge } from '../../../game-lib'
 
 import { CreateBadgeFormField } from './create-badge-form.config'
 import { CreateBadgeRequest } from './create-badge-functions'
 import { createBadgeSubmitRequestAsync } from './create-badge-functions/create-badge-store'
 
 export interface CreateBadgeFormProps {
     formDef: FormDefinition
-    onSave: () => void
+    onSave: (createdBadge: GameBadge) => void
 }
 
 const CreateBadgeForm: FC<CreateBadgeFormProps> = (props: CreateBadgeFormProps) => {
@@ -23,16 +25,16 @@ const CreateBadgeForm: FC<CreateBadgeFormProps> = (props: CreateBadgeFormProps)
             badgeActive,
             badgeDesc,
             badgeName,
-            file: files[0],
+            badgeStatus: 'Active', // not used currently thus fixed field
+            files,
+            orgID: GamificationConfig.ORG_ID,
         }
     }
 
     async function saveAsync(request: CreateBadgeRequest): Promise<void> {
-        console.log('saveAsync', request)
-
         return createBadgeSubmitRequestAsync(request)
-            .then(() => {
-                props.onSave()
+            .then((createdBadge: GameBadge) => {
+                props.onSave(createdBadge)
             })
     }
 

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

@@ -2,5 +2,7 @@ export interface CreateBadgeRequest {
     badgeActive: boolean
     badgeDesc: string
     badgeName: string
-    file: File
+    badgeStatus: string
+    files: FileList
+    orgID: string
 }

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

@@ -1,10 +1,21 @@
 import { EnvironmentConfig } from '../../../../../../../config'
 import { xhrPostAsync } from '../../../../../../../lib'
+import { GameBadge } from '../../../../../game-lib'
 
 import { CreateBadgeRequest } from './create-badge-request.model'
 
-export async function submitRequestAsync(request: CreateBadgeRequest): Promise<void> {
-    console.log('submitRequestAsync', request)
+export async function submitRequestAsync(request: CreateBadgeRequest): Promise<GameBadge> {
     const url: string = `${EnvironmentConfig.API.V5}/gamification/badges`
-    await xhrPostAsync(url, request)
+
+    const form: any = new FormData()
+
+    // fill the form
+    form.append('file', request.files[0])
+    form.append('organization_id', request.orgID)
+    form.append('badge_status', request.badgeStatus)
+    form.append('badge_name', request.badgeName)
+    form.append('badge_description', request.badgeDesc)
+    form.append('active', request.badgeActive ? 'true' : 'false')
+
+    return xhrPostAsync(url, form)
 }