Topcoder Admin App - Resource Management on Challenge Management

src/apps/admin/src/admin-app.routes.tsx

@@ -29,6 +29,14 @@ const ManageUserPage: LazyLoadedComponent = lazyLoad(
     () => import('./challenge-management/ManageUserPage'),
     'ManageUserPage',
 )
+const ManageResourcePage: LazyLoadedComponent = lazyLoad(
+    () => import('./challenge-management/ManageResourcePage'),
+    'ManageResourcePage',
+)
+const AddResourcePage: LazyLoadedComponent = lazyLoad(
+    () => import('./challenge-management/AddResourcePage'),
+    'AddResourcePage',
+)
 const UserManagementPage: LazyLoadedComponent = lazyLoad(
     () => import('./user-management/UserManagementPage'),
     'UserManagementPage',
@@ -127,6 +135,16 @@ export const adminRoutes: ReadonlyArray<PlatformRoute> = [
                         id: 'manage-user',
                         route: ':challengeId/manage-user',
                     },
+                    {
+                        element: <ManageResourcePage />,
+                        id: 'manage-resource',
+                        route: ':challengeId/manage-resource',
+                    },
+                    {
+                        element: <AddResourcePage />,
+                        id: 'add-resource',
+                        route: ':challengeId/manage-resource/add',
+                    },
                 ],
                 element: <ChallengeManagement />,
                 id: manageChallengeRouteId,

src/apps/admin/src/challenge-management/AddResourcePage/AddResourcePage.module.scss

@@ -0,0 +1,6 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    display: flex;
+    flex-direction: column;
+}

src/apps/admin/src/challenge-management/AddResourcePage/AddResourcePage.tsx

@@ -0,0 +1,216 @@
+/**
+ * Add Resource Page.
+ */
+import { FC, useCallback, useContext } from 'react'
+import {
+    Controller,
+    ControllerRenderProps,
+    useForm,
+    UseFormReturn,
+} from 'react-hook-form'
+import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
+import _ from 'lodash'
+import classNames from 'classnames'
+
+import { Button, LinkButton } from '~/libs/ui'
+import { yupResolver } from '@hookform/resolvers/yup'
+
+import {
+    useManageAddChallengeResource,
+    useManageAddChallengeResourceProps,
+    useOnComponentDidMount,
+    useSearchUserInfo,
+    useSearchUserInfoProps,
+} from '../../lib/hooks'
+import {
+    ChallengeManagementContext,
+    ChallengeManagementContextType,
+    FieldHandleSelect,
+    FieldSingleSelect,
+    FormAddWrapper,
+    InputTextAdmin,
+    PageWrapper,
+} from '../../lib'
+import { FormAddResource, SelectOption } from '../../lib/models'
+import { formAddResourceSchema } from '../../lib/utils'
+
+import styles from './AddResourcePage.module.scss'
+
+interface Props {
+    className?: string
+}
+
+export const AddResourcePage: FC<Props> = (props: Props) => {
+    const { challengeId = '' }: { challengeId?: string } = useParams<{
+        challengeId: string
+    }>()
+
+    const { isLoading, doSearchUserInfo, setUserInfo }: useSearchUserInfoProps
+        = useSearchUserInfo()
+
+    const { resourceRoles, loadResourceRoles, resourceRolesLoading }: ChallengeManagementContextType
+        = useContext(ChallengeManagementContext)
+
+    const {
+        doAddChallengeResource,
+        isAdding,
+    }: useManageAddChallengeResourceProps = useManageAddChallengeResource(challengeId)
+
+    const navigate: NavigateFunction = useNavigate()
+    const {
+        control,
+        handleSubmit,
+        register,
+        formState: { errors, isDirty },
+        setValue,
+    }: UseFormReturn<FormAddResource> = useForm({
+        defaultValues: {
+            handle: undefined,
+            resourceRole: undefined,
+            userId: '',
+        },
+        mode: 'all',
+        resolver: yupResolver(formAddResourceSchema),
+    })
+    const onSubmit = useCallback((data: FormAddResource) => {
+        doAddChallengeResource(data, () => {
+            navigate('./..')
+        })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    useOnComponentDidMount(() => {
+        loadResourceRoles()
+    })
+
+    return (
+        <PageWrapper
+            pageTitle='Add Resource'
+            className={classNames(styles.container, props.className)}
+        >
+            <FormAddWrapper
+                onSubmit={handleSubmit(onSubmit)}
+                isAdding={isAdding}
+                actions={(
+                    <>
+                        <Button
+                            primary
+                            size='lg'
+                            type='submit'
+                            disabled={isAdding || isLoading || !isDirty}
+                        >
+                            Add Resource
+                        </Button>
+                        <LinkButton
+                            disabled={isAdding}
+                            secondary
+                            to='./..'
+                            size='lg'
+                        >
+                            Cancel
+                        </LinkButton>
+                    </>
+                )}
+            >
+                <InputTextAdmin
+                    type='text'
+                    name='userId'
+                    label='User ID (Unfocus this field to fetch user handle)'
+                    placeholder='Enter'
+                    tabIndex={0}
+                    onChange={_.noop}
+                    classNameWrapper={styles.field}
+                    inputControl={register('userId', {
+                        onBlur: e => {
+                            doSearchUserInfo(
+                                e.target.value,
+                                userInfo => {
+                                    setValue(
+                                        'handle',
+                                        {
+                                            label: userInfo.handle,
+                                            value: userInfo.userId,
+                                        },
+                                        {
+                                            shouldValidate: true,
+                                        },
+                                    )
+                                },
+                                () => {
+                                    // eslint-disable-next-line unicorn/no-null
+                                    setValue('handle', null as any, { // only null value work in this place
+                                        shouldValidate: true,
+                                    })
+                                },
+                            )
+                        },
+                    })}
+                    disabled={isAdding}
+                    error={_.get(errors, 'userId.message')}
+                    dirty
+                    isLoading={isLoading}
+                />
+                <Controller
+                    name='handle'
+                    control={control}
+                    render={function render(controlProps: {
+                        field: ControllerRenderProps<FormAddResource, 'handle'>
+                    }) {
+                        return (
+                            <FieldHandleSelect
+                                label='Handle'
+                                value={controlProps.field.value}
+                                onChange={function onChange(result: SelectOption) {
+                                    controlProps.field.onChange(result)
+                                    const userId = `${result.value}`
+                                    setUserInfo({
+                                        handle: result.label as string,
+                                        userId,
+                                    })
+                                    setValue('userId', userId, {
+                                        shouldValidate: true,
+                                    })
+                                }}
+                                onBlur={controlProps.field.onBlur}
+                                error={_.get(errors, 'handle.message')}
+                                dirty
+                                isLoading={isLoading}
+                                disabled={isAdding}
+                            />
+                        )
+                    }}
+                />
+                <Controller
+                    name='resourceRole'
+                    control={control}
+                    render={function render(controlProps: {
+                        field: ControllerRenderProps<
+                            FormAddResource,
+                            'resourceRole'
+                        >
+                    }) {
+                        return (
+                            <FieldSingleSelect
+                                options={resourceRoles.map(resourceRole => ({
+                                    label: resourceRole.name,
+                                    value: resourceRole.id,
+                                }))}
+                                label='Resource Role'
+                                placeholder='Select'
+                                value={controlProps.field.value}
+                                onChange={controlProps.field.onChange}
+                                onBlur={controlProps.field.onBlur}
+                                error={_.get(errors, 'resourceRole.message')}
+                                dirty
+                                disabled={isAdding}
+                                isLoading={resourceRolesLoading}
+                            />
+                        )
+                    }}
+                />
+            </FormAddWrapper>
+        </PageWrapper>
+    )
+}
+
+export default AddResourcePage

src/apps/admin/src/challenge-management/AddResourcePage/index.ts

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

src/apps/admin/src/challenge-management/ManageResourcePage/ManageResourcePage.module.scss

@@ -0,0 +1,8 @@
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.blockTableContainer {
+    position: relative;
+}

src/apps/admin/src/challenge-management/ManageResourcePage/ManageResourcePage.tsx

@@ -0,0 +1,99 @@
+/**
+ * Manage Resource Page.
+ */
+import { FC } from 'react'
+import { useParams } from 'react-router-dom'
+import classNames from 'classnames'
+
+import { LinkButton } from '~/libs/ui'
+import { PlusIcon } from '@heroicons/react/solid'
+
+import {
+    useManageChallengeResources,
+    useManageChallengeResourcesProps,
+} from '../../lib/hooks'
+import {
+    ActionLoading,
+    PageWrapper,
+    ResourceTable,
+    TableLoading,
+    TableNoRecord,
+} from '../../lib'
+
+import styles from './ManageResourcePage.module.scss'
+
+interface Props {
+    className?: string
+}
+
+export const ManageResourcePage: FC<Props> = (props: Props) => {
+    const { challengeId = '' }: { challengeId?: string } = useParams<{
+        challengeId: string
+    }>()
+
+    const {
+        isLoading,
+        resources,
+        totalPages,
+        page,
+        setPage,
+        sort,
+        setSort,
+        isRemovingBool,
+        doRemoveResource,
+    }: useManageChallengeResourcesProps = useManageChallengeResources(
+        challengeId,
+        {
+            createdString: 'created',
+        },
+    )
+
+    return (
+        <PageWrapper
+            pageTitle='Resource Management'
+            className={classNames(styles.container, props.className)}
+            headerActions={(
+                <>
+                    <LinkButton
+                        primary
+                        size='lg'
+                        to='add'
+                        icon={PlusIcon}
+                        iconToLeft
+                        label='add resource'
+                    />
+                    <LinkButton primary light to='./../..' size='lg'>
+                        Back
+                    </LinkButton>
+                </>
+            )}
+        >
+            {isLoading ? (
+                <TableLoading />
+            ) : (
+                <>
+                    {resources.length === 0 ? (
+                        <TableNoRecord />
+                    ) : (
+                        <div className={styles.blockTableContainer}>
+                            <ResourceTable
+                                datas={resources}
+                                totalPages={totalPages}
+                                page={page}
+                                setPage={setPage}
+                                setSort={setSort}
+                                sort={sort}
+                                isRemovingBool={isRemovingBool}
+                                doRemoveItem={doRemoveResource}
+                            />
+
+                            {isRemovingBool && <ActionLoading />}
+                        </div>
+                    )}
+                </>
+            )}
+        </PageWrapper>
+    )
+}
+
+export default ManageResourcePage

src/apps/admin/src/challenge-management/ManageResourcePage/index.ts

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