fix(OpenFileDialog): use table toolbars

dhis2 · Jun 28, 2023 · 8f62037 · 8f62037
1 parent 66ce548
commit 8f62037
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 75 deletions.
diff --git a/src/components/OpenFileDialog/OpenFileDialog.js b/src/components/OpenFileDialog/OpenFileDialog.js
@@ -11,6 +11,7 @@ import {
     DataTableRow,
     DataTableCell,
     DataTableColumnHeader,
+    DataTableToolbar,
     NoticeBox,
     CircularLoader,
     Button,
@@ -230,68 +231,6 @@ export const OpenFileDialog = ({
             <ModalTitle>{getTranslatedString(type, 'modalTitle')}</ModalTitle>
             <ModalContent>
                 <Box minHeight="496px">
-                    <div className="search-and-filter-bar">
-                        <div className="search-field-container">
-                            <NameFilter
-                                dataTest={`${cypressSelector}-name-filter`}
-                                value={nameFilterValue}
-                                onChange={(value) => {
-                                    setNameFilterValue(value)
-
-                                    clearTimeout(searchTimeout)
-                                    setSearchTimeout(
-                                        setTimeout(
-                                            () =>
-                                                setState({
-                                                    page: 1,
-                                                    filters: {
-                                                        ...filters,
-                                                        searchTerm: value,
-                                                    },
-                                                }),
-                                            200
-                                        )
-                                    )
-                                }}
-                            />
-                        </div>
-                        {filterVisTypes?.length && (
-                            <div className="type-field-container">
-                                <VisTypeFilter
-                                    visTypes={filterVisTypes}
-                                    selected={filters.visType}
-                                    onChange={(value) =>
-                                        setState({
-                                            page: 1,
-                                            filters: {
-                                                ...filters,
-                                                visType: value,
-                                            },
-                                        })
-                                    }
-                                />
-                            </div>
-                        )}
-                        <div className="created-by-field-container">
-                            <CreatedByFilter
-                                selected={filters.createdBy}
-                                onChange={(value) =>
-                                    setState({
-                                        page: 1,
-                                        filters: {
-                                            ...filters,
-                                            createdBy: value,
-                                        },
-                                    })
-                                }
-                            />
-                        </div>
-                        {!isEqual(filters, defaultFilters) && (
-                            <Button onClick={resetFilters} secondary small>
-                                {i18n.t('Clear filters')}
-                            </Button>
-                        )}
-                    </div>
                     {error ? (
                         <NoticeBox
                             title={getTranslatedString(type, 'errorTitle')}
@@ -302,6 +241,75 @@ export const OpenFileDialog = ({
                     ) : (
                         <>
                             <div className="data-table-wrapper">
+                                <DataTableToolbar>
+                                    <div className="search-and-filter-bar">
+                                        <div className="search-field-container">
+                                            <NameFilter
+                                                dataTest={`${cypressSelector}-name-filter`}
+                                                value={nameFilterValue}
+                                                onChange={(value) => {
+                                                    setNameFilterValue(value)
+
+                                                    clearTimeout(searchTimeout)
+                                                    setSearchTimeout(
+                                                        setTimeout(
+                                                            () =>
+                                                                setState({
+                                                                    page: 1,
+                                                                    filters: {
+                                                                        ...filters,
+                                                                        searchTerm:
+                                                                            value,
+                                                                    },
+                                                                }),
+                                                            200
+                                                        )
+                                                    )
+                                                }}
+                                            />
+                                        </div>
+                                        {filterVisTypes?.length && (
+                                            <div className="type-field-container">
+                                                <VisTypeFilter
+                                                    visTypes={filterVisTypes}
+                                                    selected={filters.visType}
+                                                    onChange={(value) =>
+                                                        setState({
+                                                            page: 1,
+                                                            filters: {
+                                                                ...filters,
+                                                                visType: value,
+                                                            },
+                                                        })
+                                                    }
+                                                />
+                                            </div>
+                                        )}
+                                        <div className="created-by-field-container">
+                                            <CreatedByFilter
+                                                selected={filters.createdBy}
+                                                onChange={(value) =>
+                                                    setState({
+                                                        page: 1,
+                                                        filters: {
+                                                            ...filters,
+                                                            createdBy: value,
+                                                        },
+                                                    })
+                                                }
+                                            />
+                                        </div>
+                                        {!isEqual(filters, defaultFilters) && (
+                                            <Button
+                                                onClick={resetFilters}
+                                                secondary
+                                                small
+                                            >
+                                                {i18n.t('Clear filters')}
+                                            </Button>
+                                        )}
+                                    </div>
+                                </DataTableToolbar>
                                 <DataTable layout="fixed">
                                     <DataTableHead>
                                         <DataTableRow>
@@ -359,7 +367,10 @@ export const OpenFileDialog = ({
                                                 AOTypeMap[type].apiEndpoint
                                             ].length > 0 && (
                                                 <DataTableRow>
-                                                    <DataTableCell large>
+                                                    <DataTableCell
+                                                        staticStyle
+                                                        large
+                                                    >
                                                         <Box minHeight="342px">
                                                             <div className="info-cell">
                                                                 <div className="info-container">
@@ -420,17 +431,19 @@ export const OpenFileDialog = ({
                                         )}
                                     </DataTableBody>
                                 </DataTable>
+                                <DataTableToolbar position="bottom">
+                                    {data?.files[AOTypeMap[type].apiEndpoint]
+                                        .length > 0 && (
+                                        <div className="pagination-controls">
+                                            <PaginationControls
+                                                page={data.files.pager.page}
+                                                pager={data.files.pager}
+                                                onPageChange={setPage}
+                                            />
+                                        </div>
+                                    )}
+                                </DataTableToolbar>
                             </div>
-                            {data?.files[AOTypeMap[type].apiEndpoint].length >
-                                0 && (
-                                <div className="pagination-controls">
-                                    <PaginationControls
-                                        page={data.files.pager.page}
-                                        pager={data.files.pager}
-                                        onPageChange={setPage}
-                                    />
-                                </div>
-                            )}
                         </>
                     )}
                     <style jsx>{styles}</style>

diff --git a/src/components/OpenFileDialog/OpenFileDialog.styles.js b/src/components/OpenFileDialog/OpenFileDialog.styles.js
@@ -12,7 +12,6 @@ export const styles = css`
 
     .pagination-controls {
         width: 100%;
-        margin-top: ${spacers.dp12};
         display: flex;
         justify-content: flex-end;
     }
@@ -21,7 +20,6 @@ export const styles = css`
         display: flex;
         gap: ${spacers.dp4};
         align-items: center;
-        margin-bottom: ${spacers.dp8};
     }
 
     .search-field-container {