GAME-147 #comment render badge assignees

Author: kkartunov

src-ts/tools/gamification-admin/game-lib/game-badge.model.ts

@@ -1,16 +1,18 @@
 // TODO: add factory to convert snake case property names to camel case
+export interface MemberBadgeAward {
+    awarded_at: string
+    awarded_by: string
+    user_handle: string
+    user_id: string
+}
+
 export interface GameBadge {
-  active: boolean
-  badge_description: string
-  badge_image_url: string
-  badge_name: string
-  badge_status: string
-  id: string
-  member_badges?: Array<{
-    awarded_at: string,
-    awarded_by: string,
-    user_handle: string,
-    user_id: string,
-  }>
-  organization_id: string
+    active: boolean
+    badge_description: string
+    badge_image_url: string
+    badge_name: string
+    badge_status: string
+    id: string
+    member_badges?: Array<MemberBadgeAward>
+    organization_id: string
 }

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

@@ -1,3 +1,6 @@
+@import "../../../../../lib/styles/variables/spacing";
+
 .tabWrap {
     display: flex;
+    padding-bottom: $space-xxxxl;
 }

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

@@ -1,17 +1,41 @@
-import { FC } from 'react'
+import { Dispatch, FC, SetStateAction, useState } from 'react'
 
-import { GameBadge } from '../../../game-lib'
+import { InfinitePageHandler, Sort, Table, TableColumn, tableGetDefaultSort } from '../../../../../lib'
+import { GameBadge, MemberBadgeAward } from '../../../game-lib'
 
+import { awardedMembersColumns } from './awarded-members-table/awarded-members-table.config'
 import styles from './AwardedMembersTab.module.scss'
 
 export interface AwardedMembersTabProps {
     badge: GameBadge
 }
 
 const AwardedMembersTab: FC<AwardedMembersTabProps> = (props: AwardedMembersTabProps) => {
+    const [sort, setSort]: [Sort, Dispatch<SetStateAction<Sort>>] = useState<Sort>(tableGetDefaultSort(awardedMembersColumns))
+
+    const [columns]: [
+        ReadonlyArray<TableColumn<MemberBadgeAward>>,
+        Dispatch<SetStateAction<ReadonlyArray<TableColumn<MemberBadgeAward>>>>,
+    ]
+        = useState<ReadonlyArray<TableColumn<MemberBadgeAward>>>([...awardedMembersColumns])
+
+    function onSortClick(newSort: Sort): void {
+        setSort({ ...newSort })
+    }
+
     return (
         <div className={styles.tabWrap}>
-
+            {
+                props.badge.member_badges?.length ? (
+                    <Table
+                        columns={columns}
+                        data={props.badge.member_badges}
+                    // onLoadMoreClick={pageHandler.getAndSetNext}
+                    // moreToLoad={pageHandler.hasMore}
+                    // onToggleSort={onSortClick}
+                    />
+                ) : undefined
+            }
         </div>
     )
 }

src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/awarded-members-table.config.tsx

@@ -0,0 +1,28 @@
+import { TableColumn } from '../../../../../../lib'
+import { MemberBadgeAward } from '../../../../game-lib'
+
+import { MemberActionRenderer } from './member-action-renderer'
+import { MemberAwaredAtRenderer } from './member-awardedAt-renderer'
+import { MemberHandleRenderer } from './member-handle-renderer'
+
+export const awardedMembersColumns: ReadonlyArray<TableColumn<MemberBadgeAward>> = [
+  {
+    defaultSortDirection: 'asc',
+    isDefaultSort: true,
+    label: 'Handle',
+    propertyName: 'user_handle',
+    renderer: MemberHandleRenderer,
+    type: 'element',
+  },
+  {
+    defaultSortDirection: 'asc',
+    label: 'Awarded at',
+    propertyName: 'awarded_at',
+    renderer: MemberAwaredAtRenderer,
+    type: 'element',
+  },
+  {
+    renderer: MemberActionRenderer,
+    type: 'action',
+  },
+]

src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-action-renderer/MemberActionRenderer.module.scss

@@ -0,0 +1,28 @@
+@import "../../../../../../../lib/styles/includes";
+@import "../../../../../../../lib/styles/variables";
+
+.badge-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-top: $space-lg;
+  padding-right: $space-sm;
+
+  @include ltemd {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  a {
+    margin-right: $space-sm;
+
+    @include ltemd {
+      margin-right: 0;
+      margin-bottom: $space-sm;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-action-renderer/MemberActionRenderer.tsx

@@ -0,0 +1,43 @@
+import { Button, ButtonProps, useCheckIsMobile } from '../../../../../../../lib'
+import { MemberBadgeAward } from '../../../../../game-lib'
+
+import styles from './MemberActionRenderer.module.scss'
+
+function MemberActionRenderer(memberAward: MemberBadgeAward): JSX.Element {
+
+    const isMobile: boolean = useCheckIsMobile()
+
+    const buttonProps: ButtonProps = {
+        buttonStyle: 'secondary',
+        size: isMobile ? 'xs' : 'sm',
+    }
+
+    const actionButtons: Array<{
+        label: string
+    }> = [
+            {
+                label: 'Unassign',
+            },
+        ]
+
+    function onUnassign(): void {
+        // TODO: unassign feature
+    }
+
+    return (
+        <div className={styles['badge-actions']}>
+            {actionButtons.map((button, index) => {
+                return (
+                    <Button
+                        {...buttonProps}
+                        key={index}
+                        label={button.label}
+                        onClick={onUnassign}
+                    />
+                )
+            })}
+        </div>
+    )
+}
+
+export default MemberActionRenderer

src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-action-renderer/index.ts

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

src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-awardedAt-renderer/MemberAwaredAtRenderer.module.scss

@@ -0,0 +1,12 @@
+@import "../../../../../../../lib/styles/variables";
+@import "../../../../../../../lib/styles/includes";
+
+.memberAwardedAt {
+  font-size: 16px;
+  font-weight: $font-weight-normal;
+  text-align: left;
+
+  @include ltemd {
+    font-size: 14px;
+  }
+}

src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-awardedAt-renderer/MemberAwaredAtRenderer.tsx

@@ -0,0 +1,19 @@
+import { MemberBadgeAward } from '../../../../../game-lib'
+
+import styles from './MemberAwaredAtRenderer.module.scss'
+
+function MemberAwaredAtRenderer(memberAward: MemberBadgeAward): JSX.Element {
+    const dateFormat: Record<string, string> = {
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        month: 'short',
+        year: 'numeric',
+    }
+
+    return (
+        <div className={styles.memberAwardedAt}>{new Date(memberAward.awarded_at).toLocaleString(undefined, dateFormat)}</div>
+    )
+}
+
+export default MemberAwaredAtRenderer

src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-awardedAt-renderer/index.ts

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