add FilterFileName

src/pages/Documents/DocumentsTemplate.jsx

@@ -17,8 +17,9 @@ const { Search } = Input
 
 export default function DocumentsTemplate({ idCategory, idWell }) {
   const [page, setPage] = useState(1)
-  const [dataRange, setDataRange] = useState([])
+  const [filterDataRange, setFilterDataRange] = useState([])
-  const [company, setCompany] = useState([])
+  const [filterCompany, setFilterCompany] = useState([])
+  const [filterFileName, setFilterFileName] = useState('')
   const [pagination, setPagination] = useState(null)
   const [files, setFiles] = useState([])
   const [showLoader, setShowLoader] = useState(false)
@@ -45,7 +46,11 @@ export default function DocumentsTemplate({ idCategory, idWell }) {
   }
 
   const hanleCompanySearch = (value, _) => {
-    setCompany(value)
+    setFilterCompany(value)
+  }
+
+  const hanleFileNameSearch = (value, _) => {
+    setFilterFileName(value)
   }
 
   const columns = [
@@ -89,9 +94,9 @@ export default function DocumentsTemplate({ idCategory, idWell }) {
   const update = () => {
     let begin = null
     let end = null
-    if (dataRange?.length > 1) {
+    if (filterDataRange?.length > 1) {
-      begin = dataRange[0].toISOString()
+      begin = filterDataRange[0].toISOString()
-      end = dataRange[1].toISOString()
+      end = filterDataRange[1].toISOString()
     }
 
     updateFromWebApiWrapperAsync(
@@ -115,13 +120,20 @@ export default function DocumentsTemplate({ idCategory, idWell }) {
     )
   }
 
-  useEffect(update, [idWell, dataRange, page, idCategory, company])
+  useEffect(update, [idWell, idCategory, page, filterDataRange, filterCompany, filterFileName])
 
   const companies = [...new Set(files.map(file=>file.company))]
     .filter(company=>company)
 
   const DataListCompanies = <datalist id="listCompanies">
-    {companies.map((company, i)=><option key={company} value={company}>{company}</option>)}
+    {companies.map((company)=><option key={company} value={company}>{company}</option>)}
+  </datalist>
+
+  const filenames = [...new Set(files.map(file=>file.name))]
+    .filter(name=>name)
+
+  const DataListFileNames = <datalist id="listFileNames">
+    {filenames.map((name)=><option key={name} value={name}>{name}</option>)}
   </datalist>
 
   return (
@@ -130,7 +142,7 @@ export default function DocumentsTemplate({ idCategory, idWell }) {
         <div>
           <span>Фильтр по дате</span>
           <div>
-            <RangePicker showTime onChange={setDataRange} />
+            <RangePicker showTime onChange={setFilterDataRange} />
           </div>
         </div>        
         &nbsp;
@@ -142,6 +154,15 @@ export default function DocumentsTemplate({ idCategory, idWell }) {
             onSearch={hanleCompanySearch}/>
           {DataListCompanies}
         </div>        
+        &nbsp;
+        <div>
+          <span>Фильтр по имени файла</span>
+          <Search
+            list='listFileNames'
+            placeholder="Фильтр по имени файла"
+            onSearch={hanleFileNameSearch}/>
+          {DataListFileNames}
+        </div>
         &nbsp;&nbsp;
         <div>
           <span>Загрузка</span>