From 579da806d8d03da45e3cdfc0a953b41b9c7a9821 Mon Sep 17 00:00:00 2001
From: Mikhail Petrov <mike@nspcc.ru>
Date: Wed, 18 Sep 2024 23:23:29 +0300
Subject: [PATCH] web: Add search for objects list, closes #211

Signed-off-by: Mikhail Petrov <mike@nspcc.ru>
---
 src/Components/ContainerItem/ContainerItem.js | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/Components/ContainerItem/ContainerItem.js b/src/Components/ContainerItem/ContainerItem.js
index 27795bf..2c31464 100644
--- a/src/Components/ContainerItem/ContainerItem.js
+++ b/src/Components/ContainerItem/ContainerItem.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import {
 	Heading,
 	Section,
+	Form,
 	Button,
 	Tile,
 	Notification,
@@ -31,6 +32,7 @@ export default function ContainerItem({
 		page: 0,
 		objects: 0,
 	});
+	const [search, setSearch] = useState(null);
 	const [objects, setObjects] = useState(null);
 	const [isLoadingObjects, setLoadingObjects] = useState(false);
 	const [isLoadingEACL, setLoadingEACL] = useState(false);
@@ -83,8 +85,18 @@ export default function ContainerItem({
 	const onGetObjects = (containerId, pageTemp = pagination.page) => {
 		setPagination({ ...pagination, page: pageTemp});
 		setLoadingObjects(true);
+
+		const filters = [];
+		if (search) {
+			filters.push({
+				"key": "FileName",
+				"match": "MatchCommonPrefix",
+				"value": search,
+			});
+		}
+
 		api('POST', `/objects/${containerId}/search?limit=${ObjectsPerPage}&offset=${pageTemp * ObjectsPerPage}`, {
-			"filters": [],
+			filters,
 		}, {
 			"Authorization": `Bearer ${walletData.tokens.object.bearer}`,
 		}).then((e) => {
@@ -292,7 +304,7 @@ export default function ContainerItem({
 												/>
 												Objects
 											</div>
-											{activePanel === 'objects' && !isLoadingObjects && (
+											{activePanel === 'objects' && (
 												<Button
 													size="small"
 													color="primary"
@@ -307,6 +319,22 @@ export default function ContainerItem({
 										</Heading>
 										{activePanel === 'objects' && (
 											<>
+												{objects && (objects.length !== 0 || (objects.length === 0 && search !== null)) && (
+													<Form.Control>
+														<Form.Input
+															placeholder="Search here..."
+															value={search ? search : ''}
+															size='small'
+															style={{ margin: '10px 0' }}
+															onChange={(e) => setSearch(e.target.value)}
+															onKeyDown={(e) => {
+																if(e.key === 'Enter') onGetObjects(containerItem.containerId, 0);
+															}}
+															onBlur={() => onGetObjects(containerItem.containerId, 0)}
+															disabled={isLoadingObjects}
+														/>
+													</Form.Control>
+												)}
 												{!isLoadingObjects ? (
 													<>
 														{objects && objects.length === 0 && (