Member autocomplete

Author: kkartunov

package.json

@@ -39,6 +39,7 @@
         "moment": "^2.29.3",
         "moment-timezone": "^0.5.34",
         "prop-types": "^15.8.1",
+        "qs": "^6.11.0",
         "rc-checkbox": "^2.3.2",
         "react": "^17.0.2",
         "react-apexcharts": "^1.4.0",

src-ts/lib/member-autocomplete/InputHandleAutocomplete.module.scss

@@ -0,0 +1,5 @@
+@import "../styles/variables/palette";
+
+.memberSelect {
+    color: $black-60;
+}

src-ts/lib/member-autocomplete/InputHandleAutocomplete.tsx

@@ -0,0 +1,94 @@
+import { FC, FocusEvent } from 'react'
+import { MultiValue, StylesConfig } from 'react-select'
+// tslint:disable-next-line: no-submodule-imports
+import AsyncSelect from 'react-select/async'
+
+import { InputWrapper } from '../form/form-groups/form-input/input-wrapper'
+
+import { membersAutocompete, MembersAutocompeteResult } from './input-handle-functions'
+import styles from './InputHandleAutocomplete.module.scss'
+
+export interface InputHandleAutocompleteProps {
+    readonly className?: string
+    readonly dirty?: boolean
+    readonly disabled?: boolean
+    readonly error?: string
+    readonly hideInlineErrors?: boolean
+    readonly hint?: string
+    readonly label?: string | JSX.Element
+    readonly name: string
+    readonly onBlur?: (event: FocusEvent<HTMLInputElement>) => void
+    readonly onChange: (newValue: Array<MembersAutocompeteResult>) => void
+    readonly placeholder?: string
+    readonly tabIndex: number
+    readonly value?: Array<MembersAutocompeteResult>
+}
+
+const InputHandleAutocomplete: FC<InputHandleAutocompleteProps> = (props: InputHandleAutocompleteProps) => {
+    const customStyles: StylesConfig<any> = {
+        control: (provided) => ({
+            ...provided,
+            border: 'none',
+        }),
+        input: (provided) => ({
+            ...provided,
+            color: 'inherit',
+            fontSize: 16,
+        }),
+        multiValue: (provided) => ({
+            ...provided,
+            borderRadius: 50,
+        }),
+        multiValueLabel: (provided) => ({
+            ...provided,
+            fontSize: 12,
+        }),
+        option: (provided) => ({
+            ...provided,
+            borderBottom: '1px solid #E9E9E9',
+            color: 'inherit',
+            fontSize: 16,
+            fontWeight: 400,
+            padding: 16,
+        }),
+        placeholder: (provided) => ({
+            ...provided,
+            color: 'inherit',
+            fontSize: 16,
+            fontWeight: 400,
+        }),
+        valueContainer: (provided) => ({
+            ...provided,
+            padding: 0,
+        }),
+    }
+
+    return (
+        <InputWrapper
+            {...props}
+            dirty={!!props.dirty}
+            disabled={!!props.disabled}
+            label={props.label || props.name}
+            hideInlineErrors={props.hideInlineErrors}
+            type='text'
+        >
+            <AsyncSelect
+                className={styles.memberSelect}
+                cacheOptions
+                getOptionLabel={({ handle }) => handle}
+                getOptionValue={({ userId }) => userId}
+                isMulti
+                key={props.value?.length}
+                loadOptions={membersAutocompete}
+                styles={customStyles}
+                placeholder={props.placeholder}
+                onBlur={props.onBlur}
+                onChange={(newValue: MultiValue<MembersAutocompeteResult>) => props.onChange(newValue as Array<MembersAutocompeteResult>)}
+                value={props.value}
+                isDisabled={props.disabled}
+            />
+        </InputWrapper>
+    )
+}
+
+export default InputHandleAutocomplete

src-ts/lib/member-autocomplete/index.ts

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

src-ts/lib/member-autocomplete/input-handle-functions.ts

@@ -0,0 +1,23 @@
+import qs from 'qs'
+
+import { xhrGetAsync } from '..'
+import { EnvironmentConfig } from '../../config'
+
+export interface MembersAutocompeteQuery {
+    term: string
+}
+
+export interface MembersAutocompeteResult {
+    firstName: string
+    handle: string
+    lastName: string
+    userId: string
+}
+
+export async function membersAutocompete(term: string): Promise<Array<MembersAutocompeteResult>> {
+    const query: MembersAutocompeteQuery = {
+        term,
+    }
+
+    return xhrGetAsync(`${EnvironmentConfig.API.V5}/members/autocomplete?${qs.stringify(query)}`)
+}

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

@@ -6,5 +6,11 @@ export interface GameBadge {
   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
 }

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

@@ -0,0 +1,3 @@
+.tabWrap {
+    display: flex;
+}

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

@@ -0,0 +1,19 @@
+import { FC } from 'react'
+
+import { GameBadge } from '../../../game-lib'
+
+import styles from './AwardedMembersTab.module.scss'
+
+export interface AwardedMembersTabProps {
+    awardedMembers?: GameBadge['member_badges']
+}
+
+const AwardedMembersTab: FC<AwardedMembersTabProps> = (props: AwardedMembersTabProps) => {
+    return (
+        <div className={styles.tabWrap}>
+
+        </div>
+    )
+}
+
+export default AwardedMembersTab

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

@@ -0,0 +1 @@
+export * from './AwardedMembersTab'

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

@@ -131,4 +131,12 @@ $badgePreviewImage: 72px;
             }
         }
     }
+
+    .activeTabElement {
+        margin-top: $space-xxxxl;
+
+        @include ltemd {
+            margin-top: $space-md;
+        }
+    }
 }