From 3744a1d23eb182f2af09df2c336b8dedeaab0ce4 Mon Sep 17 00:00:00 2001
From: Yana Korpan <y.korpan@websecret.by>
Date: Fri, 25 Aug 2023 08:46:31 +0200
Subject: [PATCH] ADM-99: (Feat) Add form locale to filters

---
 admiral/crud/index.tsx         |  7 +++++--
 admiral/crud/interfaces.ts     |  2 +-
 admiral/filters/Filters.tsx    | 14 ++++++++------
 admiral/filters/interfaces.ts  |  9 ++++++---
 admiral/filters/locale/enUS.ts |  4 ++--
 admiral/form/interfaces.ts     |  8 ++++----
 6 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/admiral/crud/index.tsx b/admiral/crud/index.tsx
index 10cafea..339a141 100644
--- 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
index 73282f6..1a7cbeb 100644
--- 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
index 59e62ca..0589017 100644
--- 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
index 9a46b45..e319845 100644
--- 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
index 95e9190..0a45344 100644
--- 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
index 38b3bb5..499cae4 100644
--- 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
     }
 }