Skip to content

Commit

Permalink
web: Add search for objects list, closes #211
Browse files Browse the repository at this point in the history 
Signed-off-by: Mikhail Petrov <[email protected]>
  • Loading branch information
@mike-petrov
mike-petrov committed Dec 5, 2024
1 parent aeb6012 commit d30fee2
Show file tree
Hide file tree
Showing 3 changed files with 209 additions and 2 deletions.
7 changes: 7 additions & 0 deletions public/img/icons/info_circle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 70 additions & 0 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,13 @@ label.is-error {
padding-left: 7px;
}

.input_icon {
position: absolute;
cursor: pointer;
right: -20px;
top: 1px;
}

.navbar-item,
.navbar-link {
padding: 0.5rem 0;
Expand Down Expand Up @@ -428,6 +435,30 @@ label.panel-block:hover {
position: relative;
}

.filters_block {
background: #f0f5f6;
border: 1px solid #dfe3e3;
margin: 16px 0;
padding: 20px;
}

.filter_item {
align-items: center;
display: flex;
justify-content: space-between;
margin-top: 8px;
position: relative;
}

.filter_item .control {
width: 100%;
}

.filter_item .control.select_wrapper {
max-width: 50px;
margin: 0 12px;
}

.tooltip {
position: absolute;
min-width: 70px;
Expand All @@ -453,6 +484,20 @@ label.panel-block:hover {
border-top-color: #29363b;
}

.tooltip_block .tooltip {
width: 350px;
top: -95px;
display: none;
}

.tooltip_block:hover .tooltip {
display: block;
}

.tooltip_block .tooltip:after {
left: 52px;
}

.pagination {
margin: 1rem 0 0;
justify-content: center;
Expand Down Expand Up @@ -822,4 +867,29 @@ label.panel-block:hover {
padding: 10px;
margin: 5px 0 0;
}

.filter_item {
flex-direction: column;
border-bottom: 1px dashed #dfe3e3;
margin-bottom: 12px;
}

.filter_item:last-child {
margin-bottom: 0;
border-bottom: none;
}

.filter_item .control.select_wrapper {
margin: 6px 0;
max-width: unset;
}

.filter_item>img {
margin: 8px 0 12px;
}

.tooltip_block .tooltip {
top: -120px;
max-width: 220px;
}
}
134 changes: 132 additions & 2 deletions src/Components/ContainerItem/ContainerItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
import {
Heading,
Section,
Form,
Button,
Tile,
Notification,
Expand Down Expand Up @@ -31,6 +32,11 @@ export default function ContainerItem({
page: 0,
objects: 0,
});
const [filters, setFilters] = useState([{
key: '',
match: 'MatchCommonPrefix',
value: '',
}]);
const [objects, setObjects] = useState(null);
const [isLoadingObjects, setLoadingObjects] = useState(false);
const [isLoadingEACL, setLoadingEACL] = useState(false);
Expand Down Expand Up @@ -83,8 +89,9 @@ export default function ContainerItem({
const onGetObjects = (containerId, pageTemp = pagination.page) => {
setPagination({ ...pagination, page: pageTemp});
setLoadingObjects(true);

api('POST', `/objects/${containerId}/search?limit=${ObjectsPerPage}&offset=${pageTemp * ObjectsPerPage}`, {
"filters": [],
filters: filters.every((item) => item.key !== '' && item.value !== '') ? filters : [],
}, {
"Authorization": `Bearer ${walletData.tokens.object.bearer}`,
}).then((e) => {
Expand Down Expand Up @@ -292,7 +299,7 @@ export default function ContainerItem({
/>
Objects
</div>
{activePanel === 'objects' && !isLoadingObjects && (
{activePanel === 'objects' && (
<Button
size="small"
color="primary"
Expand All @@ -307,6 +314,129 @@ export default function ContainerItem({
</Heading>
{activePanel === 'objects' && (
<>
{objects && (objects.length !== 0 || (objects.length === 0 && filters !== null)) && (
<div className="filters_block">
<Heading
align="center"
weight="normal"
size={6}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
margin: 0,
}}
>
<span style={{ position: 'relative' }}>
Filter
<div className="tooltip_block">
<img
className="input_icon"
src="/img/icons/info_circle.svg"
height={18}
width={18}
alt="info"
/>
<div className="tooltip">Flexible search allows you to use any attributes to search through the attribute-operation-value formula, you can use parameters such as FilePath, FileName, etc.</div>
</div>
</span>
<Button
color="primary"
size="small"
onClick={() => {
let filtersTemp = [ ...filters ];
filtersTemp.push({
key: '',
match: 'MatchCommonPrefix',
value: '',
});
setFilters(filtersTemp);
}}
disabled={isLoadingObjects}
>
Add filter
</Button>
</Heading>
{filters.map((filterItem, indexFilter) => (
<div className="filter_item" key={indexFilter}>
<Form.Control>
<Form.Input
size='small'
placeholder="Attribute"
value={filterItem.key}
onChange={(e) => {
let filtersTemp = [ ...filters ];
filtersTemp[indexFilter].key = e.target.value;
setFilters(filtersTemp);
}}
disabled={isLoadingObjects}
/>
</Form.Control>
<Form.Control className="select_wrapper">
<Form.Select
size='small'
value={filterItem.match}
onChange={(e) => {
let filtersTemp = [ ...filters ];
filtersTemp[indexFilter].match = e.target.value;
setFilters(filtersTemp);
}}
disabled={isLoadingObjects}
>
{[
{ value: 'MatchStringEqual', title: '=' },
{ value: 'MatchStringNotEqual', title: '≠' },
{ value: 'MatchNumGT', title: '>' },
{ value: 'MatchNumGE', title: '≥' },
{ value: 'MatchNumLT', title: '<' },
{ value: 'MatchNumLE', title: '≤' },
].map((item) => (
<option value={item.value} key={item.title}>{item.title}</option>
))}
</Form.Select>
</Form.Control>
<Form.Control>
<Form.Input
size='small'
placeholder="Value"
value={filterItem.value}
onChange={(e) => {
let filtersTemp = [ ...filters ];
filtersTemp[indexFilter].value = e.target.value;
setFilters(filtersTemp);
}}
disabled={isLoadingObjects}
/>
</Form.Control>
{filters.length > 1 && (
<img
src="/img/icons/trashbin.svg"
width={14}
height={14}
fill="#f14668"
alt="delete"
style={{ cursor: 'pointer', marginLeft: 8 }}
onClick={() => {
let filtersTemp = [ ...filters ];
filtersTemp.splice(indexFilter, 1);
setFilters(filtersTemp);
}}
/>
)}
</div>
))}
<Button
fullwidth
color="primary"
size="small"
style={{ marginTop: 8 }}
onClick={() => onGetObjects(containerItem.containerId, 0)}
disabled={isLoadingObjects || filters.some((item) => item.key === '' || item.value === '')}
>
Search
</Button>
</div>
)}
{!isLoadingObjects ? (
<>
{objects && objects.length === 0 && (
Expand Down

0 comments on commit d30fee2

Please sign in to comment.