GAME-133 #comment integrate batch assign with API

Author: kkartunov

public/gamification-admin/bulk.sample.csv

@@ -0,0 +1,4 @@
+tc_handle,badge_id,badge_name,awarded_by,awarded_at
+kirildev,858dafad-5fcd-4bc3-ab7c-849453d139ad,,kirildev,2022-08-15T07:25:43.187Z
+jcori,bc39b152-e0e3-4984-962b-f1eba67229dd,TCO22 Development Finalist,,2022-08-15T07:25:43.187Z
+amy_admin,bc39b152-e0e3-4984-962b-f1eba67229dd,TCO22 Development Finalist,,

src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/AwardedMembersTab.tsx

@@ -24,7 +24,7 @@ const AwardedMembersTab: FC<AwardedMembersTabProps> = (props: AwardedMembersTabP
     const pageHandler: InfinitePageHandler<MemberBadgeAward> = useGetGameBadgeAssigneesPage(props.badge, sort)
 
     useEffect(() => {
-        if (props.forceRefresh && pageHandler) {
+        if (props.forceRefresh && pageHandler && !pageHandler.isValidating) {
             pageHandler.mutate()
         }
     }, [

src-ts/tools/gamification-admin/pages/badge-detail/BadgeDetailPage.tsx

@@ -264,7 +264,7 @@ const BadgeDetailPage: FC = () => {
         }
     }
 
-    function onManualAssign(): void {
+    function onAssign(): void {
         // refresh awardedMembers data
         setForceAwardedMembersTabRefresh(true)
         setActiveTab(BadgeDetailsTabViews.awardedMembers)
@@ -279,11 +279,14 @@ const BadgeDetailPage: FC = () => {
     if (activeTab === BadgeDetailsTabViews.manualAward) {
         activeTabElement = <ManualAwardTab
             badge={badgeDetailsHandler.data as GameBadge}
-            onManualAssign={onManualAssign}
+            onManualAssign={onAssign}
         />
     }
     if (activeTab === BadgeDetailsTabViews.batchAward) {
-        activeTabElement = <BatchAwardTab />
+        activeTabElement = <BatchAwardTab
+            badge={badgeDetailsHandler.data as GameBadge}
+            onBatchAssign={onAssign}
+        />
     }
 
     // show page loader if we fetching results

src-ts/tools/gamification-admin/pages/badge-detail/BatchAwardTab/BatchAwardTab.module.scss

@@ -19,6 +19,14 @@ $error-line-height: 14px;
             grid-template-columns: 1fr;
         }
 
+        .templateLink {
+            text-transform: uppercase;
+            color: $turq-160;
+            font-weight: $font-weight-bold;
+            margin-top: $space-lg;
+            display: inline-block;
+        }
+
         .batchForm {
             display: flex;
             flex-direction: column;

src-ts/tools/gamification-admin/pages/badge-detail/BatchAwardTab/BatchAwardTab.tsx

@@ -1,8 +1,10 @@
+// tslint:disable:no-null-keyword
 import { Dispatch, FC, SetStateAction, useState } from 'react'
 
 import { Button, IconSolid, InputFilePicker } from '../../../../../lib'
 import { GameBadge } from '../../../game-lib'
 import { BadgeAssignedModal } from '../../../game-lib/modals/badge-assigned-modal'
+import { batchAssignRequestAsync } from '../badge-details.functions'
 
 import styles from './BatchAwardTab.module.scss'
 interface BatchAwardTabProps {
@@ -14,7 +16,6 @@ const BatchAwardTab: FC<BatchAwardTabProps> = (props: BatchAwardTabProps) => {
 
     const [showBadgeAssigned, setShowBadgeAssigned]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
-    // tslint:disable-next-line:no-null-keyword
     const [files, setFiles]: [FileList | null, Dispatch<SetStateAction<FileList | null>>] = useState<FileList | null>(null)
 
     const [errorText, setErrorText]: [string, Dispatch<SetStateAction<string>>] = useState<string>('')
@@ -29,14 +30,28 @@ const BatchAwardTab: FC<BatchAwardTabProps> = (props: BatchAwardTabProps) => {
     }
 
     function onAward(): void {
-
+        batchAssignRequestAsync(files?.item(0) as File)
+            .then(() => {
+                setShowBadgeAssigned(true)
+                setFiles(null)
+            })
+            .catch(e => {
+                let message: string = e.message
+                if (e.errors && e.errors[0] && e.errors[0].path === 'user_id') {
+                    message = `CSV file contains duplicate data. There are members included already owning this badge.`
+                }
+                setErrorText(message)
+            })
     }
 
     return (
         <div className={styles.tabWrap}>
             <h3>Batch Award</h3>
             <div className={styles.batchFormWrap}>
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque ullamcorper neque sed orci, enim amet, sed.</p>
+                <div>
+                    <p>If you would like to assign multiple people to multiple badges, this area is for you. Download the template below, populate the file with your data, and upload that file to the right once completed.</p>
+                    <a target={'_blank'} href='/gamification-admin/bulk.sample.csv' download='bulk.smaple.csv' className={styles.templateLink}>Download template CSV</a>
+                </div>
                 <div className={styles.batchForm}>
                     <InputFilePicker
                         fileConfig={{

src-ts/tools/gamification-admin/pages/badge-detail/badge-details.functions.ts

@@ -1,6 +1,7 @@
 import { GamificationConfig } from '../../game-config'
 import { GameBadge } from '../../game-lib'
 
+import { submitRequestAsync as submitBatchAssignRequestAsync } from './batch-assign-badge.store'
 import { submitRequestAsync as submitBadgeAssingRequestAsync } from './manual-assign-badge.store'
 import { submitRequestAsync as submitBadgeUpdateRequestAsync } from './update-badge.store'
 import { UpdateBadgeRequest } from './updated-badge-request.model'
@@ -18,3 +19,7 @@ export function generateCSV(input: Array<Array<string | number>>): string {
 export async function manualAssignRequestAsync(csv: string): Promise<any> {
     return submitBadgeAssingRequestAsync(csv)
 }
+
+export async function batchAssignRequestAsync(batchFile: File): Promise<any> {
+    return submitBatchAssignRequestAsync(batchFile)
+}

src-ts/tools/gamification-admin/pages/badge-detail/batch-assign-badge.store.ts

@@ -0,0 +1,17 @@
+import { EnvironmentConfig } from '../../../../config'
+import { xhrPostAsync } from '../../../../lib'
+
+export async function submitRequestAsync(batchFile: File): Promise<any> {
+    const url: string = `${EnvironmentConfig.API.V5}/gamification/badges/assign`
+
+    const form: any = new FormData()
+
+    // fill the form
+    form.append('file', batchFile)
+
+    return xhrPostAsync(url, form, {
+        headers: {
+            'Content-Type': 'multipart/form-data',
+        },
+    })
+}