fix(views): move view-transfers to tabs

dhis2 · Feb 1, 2024 · 585c92e · 585c92e
1 parent 92c1a70
commit 585c92e
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 24 deletions.
diff --git a/src/components/sectionList/listView/ManageListView.module.css b/src/components/sectionList/listView/ManageListView.module.css
@@ -5,6 +5,7 @@
 }
 
 .transferContainer {
+    padding-top: var(--spacers-dp16);
     padding-bottom: var(--spacers-dp16);
 }
 
@@ -21,3 +22,6 @@ of reorder-buttons */
 .resetDefaultButton {
     margin-top: var(--spacers-dp8);
 }
+
+.tabContent {
+}
diff --git a/src/components/sectionList/listView/ManageListView.tsx b/src/components/sectionList/listView/ManageListView.tsx
@@ -1,8 +1,16 @@
 import { FetchError } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { Button, Field, NoticeBox, Transfer, TransferOption } from '@dhis2/ui'
+import {
+    Button,
+    Field,
+    NoticeBox,
+    Tab,
+    TabBar,
+    Transfer,
+    TransferOption,
+} from '@dhis2/ui'
 import { FORM_ERROR } from 'final-form'
-import React, { useMemo } from 'react'
+import React, { SyntheticEvent, useMemo } from 'react'
 import { Form, useField } from 'react-final-form'
 import {
     getColumnsForSection,
@@ -50,6 +58,9 @@ export const ManageListView = ({
         filters: savedFilters,
         query,
     } = useModelListView()
+    const [selectedTab, setSelectedTab] = React.useState<'columns' | 'filters'>(
+        'columns' as const
+    )
     const section = useModelSectionHandleOrThrow()
     const { saveView } = useMutateModelListViews()
 
@@ -91,6 +102,11 @@ export const ManageListView = ({
         }
     }, [savedFilters, savedColumns, filtersConfig, columnsConfig])
 
+    const handleChangeTab = (tab: 'columns' | 'filters', e: SyntheticEvent) => {
+        e.preventDefault()
+        setSelectedTab(tab)
+    }
+
     return (
         <Form
             onSubmit={handleSave}
@@ -99,28 +115,53 @@ export const ManageListView = ({
         >
             {({ handleSubmit, submitting, submitError }) => (
                 <form onSubmit={handleSubmit}>
-                    <TransferField
-                        name={'columns'}
-                        availableLabel={i18n.t('Available columns')}
-                        selectedLabel={i18n.t('Selected columns')}
-                        loading={query.isLoading}
-                        defaultOptions={columnsConfig.default.map(toPath)}
-                        availableOptions={columnsConfig.available.map((c) => ({
-                            label: c.label,
-                            value: c.path,
-                        }))}
-                    />
-                    <TransferField
-                        name={'filters'}
-                        availableLabel={i18n.t('Available filters')}
-                        selectedLabel={i18n.t('Selected filters')}
-                        loading={query.isLoading}
-                        defaultOptions={filtersConfig.default.map(toFilterKey)}
-                        availableOptions={filtersConfig.available.map((f) => ({
-                            label: f.label,
-                            value: f.filterKey,
-                        }))}
-                    />
+                    <TabBar>
+                        <Tab
+                            selected={selectedTab === 'columns'}
+                            onClick={(_, e) => handleChangeTab('columns', e)}
+                        >
+                            {i18n.t('Columns')}
+                        </Tab>
+                        <Tab
+                            selected={selectedTab === 'filters'}
+                            onClick={(_, e) => handleChangeTab('filters', e)}
+                        >
+                            {i18n.t('Filters')}
+                        </Tab>
+                    </TabBar>
+
+                    <TabContent show={selectedTab === 'columns'}>
+                        <TransferField
+                            name={'columns'}
+                            availableLabel={i18n.t('Available columns')}
+                            selectedLabel={i18n.t('Selected columns')}
+                            loading={query.isLoading}
+                            defaultOptions={columnsConfig.default.map(toPath)}
+                            availableOptions={columnsConfig.available.map(
+                                (c) => ({
+                                    label: c.label,
+                                    value: c.path,
+                                })
+                            )}
+                        />
+                    </TabContent>
+                    <TabContent show={selectedTab === 'filters'}>
+                        <TransferField
+                            name={'filters'}
+                            availableLabel={i18n.t('Available filters')}
+                            selectedLabel={i18n.t('Selected filters')}
+                            loading={query.isLoading}
+                            defaultOptions={filtersConfig.default.map(
+                                toFilterKey
+                            )}
+                            availableOptions={filtersConfig.available.map(
+                                (f) => ({
+                                    label: f.label,
+                                    value: f.filterKey,
+                                })
+                            )}
+                        />
+                    </TabContent>
                     {submitError && (
                         <p>
                             <NoticeBox error title={i18n.t('Failed to save')}>
@@ -200,3 +241,10 @@ const TransferField = ({
 const TransferHeader = ({ children }: React.PropsWithChildren) => (
     <div className={css.transferHeader}>{children}</div>
 )
+
+const TabContent = ({
+    children,
+    show,
+}: React.PropsWithChildren<{ show: boolean }>) => (
+    <div style={{ display: show ? 'initial' : 'none' }}>{children}</div>
+)