PM-1505 - clone scorecard

src/apps/review/src/lib/components/TableScorecards/TableScorecards.tsx

@@ -3,7 +3,7 @@
  */
 import { Dispatch, FC, SetStateAction, useMemo } from 'react'
 import { Link } from 'react-router-dom'
-import { noop } from 'lodash'
+import { bind, noop } from 'lodash'
 import classNames from 'classnames'
 
 import { MobileTableColumn } from '~/apps/admin/src/lib/models/MobileTableColumn.model'
@@ -26,6 +26,7 @@ interface Props {
     totalPages: number
     page: number
     setPage: Dispatch<SetStateAction<number>>
+    onClone: (scorecard: Scorecard) => unknown
 }
 
 export const TableScorecards: FC<Props> = (props: Props) => {
@@ -87,13 +88,13 @@ export const TableScorecards: FC<Props> = (props: Props) => {
             {
                 className: classNames(styles.tableCell, styles.tableCellCenter),
                 label: 'Action',
-                renderer: () => (
+                renderer: (data: Scorecard) => (
                     <div className={styles.action}>
                         <div className={styles.actionItem}>
                             <PencilIcon />
                             <span>Edit</span>
                         </div>
-                        <div className={styles.actionItem}>
+                        <div className={styles.actionItem} onClick={bind(props.onClone, this, data)}>
                             <DuplicateIcon />
                             <span>Clone</span>
                         </div>

src/apps/review/src/lib/services/scorecards.service.ts

@@ -1,12 +1,26 @@
 /**
  * Scorecards service
  */
+import { xhrPostAsync } from '~/libs/core'
+import { EnvironmentConfig } from '~/config'
+
 import { MockScorecard } from '../../mock-datas'
-import { adjustScorecardInfo, ScorecardInfo } from '../models'
+import { adjustScorecardInfo, Scorecard, ScorecardInfo } from '../models'
+
+const baseUrl = `${EnvironmentConfig.API.V6}/review/scorecards`
 
 /**
  * Fetch scorecard
  * @returns resolves to the scorecard info
  */
 export const fetchScorecards
   = async (): Promise<ScorecardInfo> => Promise.resolve(adjustScorecardInfo(MockScorecard) as ScorecardInfo)
+
+/**
+ * Clone scorecard
+ * @param scorecard Scorecard to clone
+ * @returns resolves to the cloned scorecard info
+ */
+export const cloneScorecard = async (scorecard: Pick<Scorecard, 'id'>): Promise<Scorecard> => (
+    xhrPostAsync(`${baseUrl}/${scorecard.id}/clone`, {})
+)

src/apps/review/src/pages/scorecards/ScorecardsListPage/ScorecardsListPage.tsx

@@ -1,14 +1,21 @@
+import { useNavigate } from 'react-router-dom'
 import { FC, useCallback, useMemo, useState } from 'react'
+import { toast } from 'react-toastify'
 
-import { PageTitle } from '~/libs/ui'
+import { PageTitle, useConfirmationModal } from '~/libs/ui'
 import { TableLoading } from '~/apps/admin/src/lib'
 
+import { Scorecard } from '../../../lib/models'
+import { cloneScorecard } from '../../../lib/services'
 import { PageWrapper, ScorecardsFilter, TableNoRecord, TableScorecards } from '../../../lib'
 import { ScorecardsResponse, useFetchScorecards } from '../../../lib/hooks'
 
 import styles from './ScorecardsListPage.module.scss'
 
 export const ScorecardsListPage: FC<{}> = () => {
+    const navigate = useNavigate()
+    const confirmation = useConfirmationModal()
+
     const [filters, setFilters] = useState({
         category: '',
         name: '',
@@ -43,6 +50,30 @@ export const ScorecardsListPage: FC<{}> = () => {
         setPage(1)
     }, [])
 
+    const handleScorecardClone = useCallback(async (scorecard: Scorecard) => {
+        if (!await confirmation.confirm({
+            action: 'Clone',
+            content: `Are you sure you want to clone "${scorecard.name}" scorecard?`,
+            title: 'Clone Scorecard',
+        })) {
+            return
+        }
+
+        try {
+            const cloned = await cloneScorecard({ id: scorecard.id })
+            if (!cloned || !cloned.id) {
+                toast.error('Failed to clone scorecard!')
+                return
+            }
+
+            toast.success('Scorecard cloned successfully!')
+            navigate(`${cloned.id}/details`)
+        } catch (error) {
+            toast.error('Failed to clone scorecard!')
+            console.error('Failed to clone scorecard:', error)
+        }
+    }, [navigate, confirmation])
+
     return (
         <PageWrapper
             pageTitle='Scorecards'
@@ -66,6 +97,7 @@ export const ScorecardsListPage: FC<{}> = () => {
                         <TableNoRecord />
                     ) : (
                         <TableScorecards
+                            onClone={handleScorecardClone}
                             totalPages={metadata?.totalPages}
                             page={page}
                             setPage={setPage}
@@ -80,7 +112,7 @@ export const ScorecardsListPage: FC<{}> = () => {
 
                 </>
             )}
-
+            {confirmation.modal}
         </PageWrapper>
     )