ADM-99: (Feat) Add form locale to filters

dev-family · Aug 28, 2023 · 3744a1d · 3744a1d
1 parent 3c684ad
commit 3744a1d
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 18 deletions.
diff --git a/admiral/crud/index.tsx b/admiral/crud/index.tsx
@@ -8,7 +8,7 @@ import { TopToolbar } from '../layout'
 import { useDataProvider } from '../dataProvider'
 import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react'
 import { CrudIndexPageContextProvider } from './CrudIndexPageContext'
-import { AppliedFilters, Filters, QuickFilters } from '../filters'
+import { AppliedFilters, Filters } from '../filters'
 import { RouterLocationState } from '../router/interfaces'
 import { CRUDConfig } from './interfaces'
 import styles from './Crud.module.scss'
@@ -110,7 +110,10 @@ function makeIndexPage<RecordType extends { id: number | string } = any>(
                         autoupdateTime={config.index.tableConfig?.autoupdateTime}
                     />
                     {!!config.filter && (
-                        <Filters fetchInitialData={fetchInitialFiltersData} locale={locale.filters}>
+                        <Filters
+                            fetchInitialData={fetchInitialFiltersData}
+                            locale={{ filters: locale.filters, form: locale.form }}
+                        >
                             {config.filter.fields}
                         </Filters>
                     )}

diff --git a/admiral/crud/interfaces.ts b/admiral/crud/interfaces.ts
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { Locale as FormLocale } from '../form/interfaces'
-import { Locale as FiltersLocale } from '../filters/interfaces'
+import { FiltersLocale } from '../filters/interfaces'
 import { ColumnsType, ColumnType, TableLocale } from '../ui/Table/interfaces'
 import { DrawerProps } from '../ui/Drawer/interfaces'
 import { PaginationLocale } from '../ui/Pagination/interfaces'

diff --git a/admiral/filters/Filters.tsx b/admiral/filters/Filters.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useEffect } from 'react'
 import { useCrudIndex } from '../crud/CrudIndexPageContext'
 import { Drawer, Button } from '../ui'
-import { Form, FormProps, useForm } from '../form'
+import { Form, FormProps } from '../form'
 import { FiSave, FiX } from 'react-icons/fi'
 import { Locale } from './interfaces'
 import { enUS } from './locale'
@@ -13,7 +13,7 @@ export type FiltersProps = {
     fetchInitialData?: (urlState: Record<string, any>) => Promise<GetFiltersFormDataResult>
 }
 
-export const Filters: React.FC<FiltersProps> = ({ locale = enUS, fetchInitialData, children }) => {
+export const Filters: React.FC<FiltersProps> = ({ locale, fetchInitialData, children }) => {
     const {
         filterDrawer,
         setFilterDrawer,
@@ -22,6 +22,8 @@ export const Filters: React.FC<FiltersProps> = ({ locale = enUS, fetchInitialDat
         filter: { setFilterOptions },
     } = useCrudIndex()
 
+    const filtersLocale = locale?.filters ?? enUS
+
     const formRef = useRef<React.ElementRef<typeof Form>>(null)
 
     useEffect(() => {
@@ -60,19 +62,19 @@ export const Filters: React.FC<FiltersProps> = ({ locale = enUS, fetchInitialDat
         <Drawer
             visible={filterDrawer}
             onClose={hideDrawer}
-            title={locale.title}
+            title={filtersLocale.title}
             footer={
                 <div className={styles.footer}>
                     <Button type="button" view="secondary" onClick={onReset} iconLeft={<FiX />}>
-                        {locale.clear}
+                        {filtersLocale.clear}
                     </Button>
                     <Button type="button" onClick={onSubmit} iconLeft={<FiSave />}>
-                        {locale.submit}
+                        {filtersLocale.submit}
                     </Button>
                 </div>
             }
         >
-            <Form ref={formRef} fetchInitialData={_fetchInitialData}>
+            <Form ref={formRef} fetchInitialData={_fetchInitialData} locale={locale?.form}>
                 <Form.Fields singleColumn>{children}</Form.Fields>
             </Form>
         </Drawer>

diff --git a/admiral/filters/interfaces.ts b/admiral/filters/interfaces.ts
@@ -1,5 +1,8 @@
+import { Locale as FormLocale } from '../form/interfaces'
+
+export type FiltersLocale = { title: string; clear: string; submit: string }
+
 export type Locale = {
-    title: string
-    clear: string
-    submit: string
+    filters: FiltersLocale
+    form: FormLocale
 }
diff --git a/admiral/filters/locale/enUS.ts b/admiral/filters/locale/enUS.ts
@@ -1,6 +1,6 @@
-import { Locale } from '../interfaces'
+import { FiltersLocale } from '../interfaces'
 
-export const enUS: Locale = {
+export const enUS: FiltersLocale = {
     title: 'Filters',
     clear: 'Clear all',
     submit: 'Apply',

diff --git a/admiral/form/interfaces.ts b/admiral/form/interfaces.ts
@@ -7,11 +7,11 @@ import { tuple } from '../utils/type'
 export type Locale = {
     successMessage: string
     fields: {
-        array: ArrayInputLocale
+        array?: ArrayInputLocale
         editor?: EditorLocaleType
-        datePicker: PickerLocale
-        select: SelectLocale
-        upload: UploadLocale
+        datePicker?: PickerLocale
+        select?: SelectLocale
+        upload?: UploadLocale
     }
 }