feat(list): add more dropdown

dhis2 · Oct 23, 2023 · d69f83c · d69f83c
1 parent 3ffff0a
commit d69f83c
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 35 deletions.
diff --git a/src/components/sectionList/SectionListRow.tsx b/src/components/sectionList/SectionListRow.tsx
@@ -18,6 +18,7 @@ export type SectionListRowProps<Model extends IdentifiableObject> = {
     selectedColumns: SelectedColumns
     onSelect: (modelId: string, checked: boolean) => void
     selected: boolean
+    renderActions: (modelId: string) => React.ReactNode
     renderColumnValue: (column: SelectedColumn) => React.ReactNode
     onClick?: (modelData: GistModel<Model> | Model) => void
     active?: boolean
@@ -30,6 +31,7 @@ export function SectionListRow<Model extends IdentifiableObject>({
     onSelect,
     onClick,
     selected,
+    renderActions,
     renderColumnValue,
 }: SectionListRowProps<Model>) {
     return (
@@ -55,12 +57,7 @@ export function SectionListRow<Model extends IdentifiableObject>({
                     {renderColumnValue(selectedColumn)}
                 </DataTableCell>
             ))}
-            <DataTableCell>
-                <ListActions>
-                    <ActionEdit modelId={modelData.id} />
-                    <ActionMore />
-                </ListActions>
-            </DataTableCell>
+            <DataTableCell>{renderActions(modelData.id)}</DataTableCell>
         </DataTableRow>
     )
 }

diff --git a/src/components/sectionList/SectionListWrapper.tsx b/src/components/sectionList/SectionListWrapper.tsx
@@ -4,6 +4,11 @@ import { useSchemaFromHandle } from '../../lib'
 import { Pager, ModelCollection } from '../../types/models'
 import { DetailsPanel, DefaultDetailsPanelContent } from './detailsPanel'
 import { FilterWrapper } from './filters/FilterWrapper'
+import {
+    ActionEdit,
+    ActionMore,
+    ListActions,
+} from './listActions/SectionListActions'
 import { useModelListView } from './listView'
 import { ModelValue } from './modelValue/ModelValue'
 import { SectionList } from './SectionList'
@@ -57,6 +62,9 @@ export const SectionListWrapper = ({
         }
     }
 
+    const handleShowDetails = (id: string) =>
+        setDetailsId((prevDetailsId) => (prevDetailsId === id ? undefined : id))
+
     const allSelected = useMemo(() => {
         return data?.length !== 0 && data?.length === selectedModels.size
     }, [data, selectedModels.size])
@@ -95,12 +103,21 @@ export const SectionListWrapper = ({
                                 selectedColumns={headerColumns}
                                 onSelect={handleSelect}
                                 onClick={({ id }) => {
-                                    setDetailsId((prevDetailsId) =>
-                                        prevDetailsId === id ? undefined : id
-                                    )
+                                    handleShowDetails(id)
                                 }}
                                 selected={selectedModels.has(model.id)}
                                 active={model.id === detailsId}
+                                renderActions={(id) => (
+                                    <ListActions>
+                                        <ActionEdit modelId={id} />
+                                        <ActionMore
+                                            modelId={id}
+                                            onShowDetailsClick={() =>
+                                                handleShowDetails(id)
+                                            }
+                                        />
+                                    </ListActions>
+                                )}
                                 renderColumnValue={({ path }) => {
                                     return (
                                         <ModelValue

diff --git a/src/components/sectionList/listActions/SectionListActions.tsx b/src/components/sectionList/listActions/SectionListActions.tsx
@@ -9,7 +9,13 @@ import {
     Popover,
 } from '@dhis2/ui'
 import React, { useRef, useState } from 'react'
-import { Link } from 'react-router-dom'
+import {
+    Link,
+    useHref,
+    useLinkClickHandler,
+    useNavigate,
+    useNavigation,
+} from 'react-router-dom'
 import css from './SectionListActions.module.css'
 
 export const ListActions = ({ children }: React.PropsWithChildren) => {
@@ -26,35 +32,56 @@ export const ActionEdit = ({ modelId }: { modelId: string }) => {
     )
 }
 
-export const ActionMore = () => {
+type ActionMoreProps = {
+    modelId: string
+    onShowDetailsClick: () => void
+}
+export const ActionMore = ({
+    modelId,
+    onShowDetailsClick,
+}: ActionMoreProps) => {
     const [open, setOpen] = useState(false)
     const ref = useRef(null)
+    const href = useHref(modelId, { relative: 'path' })
+    const handleClick = useLinkClickHandler(modelId)
+    const navigate = useNavigate()
     return (
         <div ref={ref}>
-            <Button small secondary onClick={() => setOpen(!open)}>
-                <IconMore24 />
-                {open && (
-                    <Popover
-                        className={css.actionMorePopover}
-                        arrow={false}
-                        placement="bottom-end"
-                        reference={ref}
-                    >
-                        <FlyoutMenu>
-                            <MenuItem
-                                dense
-                                label={'Show details'}
-                                icon={<IconMore16 />}
-                            />
-                            <MenuItem
-                                dense
-                                label={'Edit'}
-                                icon={<IconEdit16 />}
-                            />
-                        </FlyoutMenu>
-                    </Popover>
-                )}
-            </Button>
+            <Button
+                small
+                secondary
+                onClick={() => setOpen(!open)}
+                icon={<IconMore24 />}
+            ></Button>
+            {open && (
+                <Popover
+                    className={css.actionMorePopover}
+                    arrow={false}
+                    placement="bottom-end"
+                    reference={ref}
+                    onClickOutside={() => setOpen(false)}
+                >
+                    <FlyoutMenu>
+                        <MenuItem
+                            dense
+                            label={'Show details'}
+                            icon={<IconMore16 />}
+                            onClick={onShowDetailsClick}
+                        />
+                        <MenuItem
+                            dense
+                            label={'Edit'}
+                            icon={<IconEdit16 />}
+                            onClick={(_, e) => {
+                                handleClick(e)
+                                setOpen(false)
+                            }}
+                            target="_blank"
+                            href={href}
+                        ></MenuItem>
+                    </FlyoutMenu>
+                </Popover>
+            )}
         </div>
     )
 }