Skip to content

Commit

Permalink
Intoduce isReadonly flag at the AdvancedSearchResult page
Browse files Browse the repository at this point in the history 
This flag is used for hiding control components because this might be
used at other pages to show its result as more simple style.
  • Loading branch information
@userlocalhost
userlocalhost committed Nov 12, 2024
1 parent 184bbc6 commit d9b8214
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 101 deletions.
29 changes: 18 additions & 11 deletions frontend/src/components/entry/SearchResults.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ interface Props {
joinAttrs: AdvancedSearchJoinAttrInfo[];
disablePaginationFooter: boolean;
setSearchResults: () => void;
isReadonly?: boolean;
}

export const SearchResults: FC<Props> = ({
Expand All @@ -80,6 +81,7 @@ export const SearchResults: FC<Props> = ({
joinAttrs,
disablePaginationFooter,
setSearchResults,
isReadonly = false,
}) => {
// NOTE attrTypes are guessed by the first element on the results. So if it has no appropriate attr,
// the type guess doesn't work well. We should improve attr type API if more accurate type is needed.
Expand Down Expand Up @@ -109,21 +111,26 @@ export const SearchResults: FC<Props> = ({
searchAllEntities={searchAllEntities}
joinAttrs={joinAttrs}
refreshSearchResults={setSearchResults}
isReadonly={isReadonly}
/>
<TableBody>
{results.values?.map((result) => (
<StyledTableRow key={result.entry.id}>
<TableCell sx={{ padding: 0 }}>
<Checkbox
checked={bulkOperationEntryIds.includes(result.entry.id)}
onChange={(e) =>
handleChangeBulkOperationEntryId(
result.entry.id,
e.target.checked
)
}
/>
</TableCell>
{/* Bulk operation checkbox would be invisible when Readonly mode is true */}
{!isReadonly && (
<TableCell sx={{ padding: 0 }}>
<Checkbox
checked={bulkOperationEntryIds.includes(result.entry.id)}
onChange={(e) =>
handleChangeBulkOperationEntryId(
result.entry.id,
e.target.checked
)
}
/>
</TableCell>
)}

<TableCell>
<Box
component={Link}
Expand Down
196 changes: 106 additions & 90 deletions frontend/src/components/entry/SearchResultsTableHead.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ interface Props {
searchAllEntities: boolean;
joinAttrs: AdvancedSearchJoinAttrInfo[];
refreshSearchResults: () => void;
isReadonly?: boolean;
}

export const SearchResultsTableHead: FC<Props> = ({
Expand All @@ -73,6 +74,7 @@ export const SearchResultsTableHead: FC<Props> = ({
searchAllEntities,
joinAttrs,
refreshSearchResults,
isReadonly = false,
}) => {
const location = useLocation();
const navigate = useNavigate();
Expand Down Expand Up @@ -129,52 +131,52 @@ export const SearchResultsTableHead: FC<Props> = ({

const handleSelectFilterConditions =
(attrName?: string) =>
(
attrFilter?: AttrFilter,
overwriteEntryName?: string,
overwriteReferral?: string
) => {
const _attrsFilter =
attrName != null && attrFilter != null
? { ...attrsFilter, [attrName]: attrFilter }
: attrsFilter;
(
attrFilter?: AttrFilter,
overwriteEntryName?: string,
overwriteReferral?: string
) => {
const _attrsFilter =
attrName != null && attrFilter != null
? { ...attrsFilter, [attrName]: attrFilter }
: attrsFilter;

const newParams = formatAdvancedSearchParams({
attrsFilter: Object.keys(_attrsFilter)
.filter((k) => _attrsFilter[k]?.joinedAttrname === undefined)
.reduce((a, k) => ({ ...a, [k]: _attrsFilter[k] }), {}),
entryName: overwriteEntryName ?? entryFilter,
referralName: overwriteReferral ?? referralFilter,
baseParams: new URLSearchParams(location.search),
joinAttrs: Object.keys(_attrsFilter)
.filter((k) => _attrsFilter[k]?.joinedAttrname !== undefined)
.map((k) => ({
name: _attrsFilter[k]?.baseAttrname ?? "",
attrinfo: Object.keys(_attrsFilter)
.filter(
(j) =>
_attrsFilter[j].baseAttrname === _attrsFilter[k].baseAttrname
)
.map((j) => ({
name: _attrsFilter[j]?.joinedAttrname ?? "",
filterKey: _attrsFilter[j].filterKey,
keyword: _attrsFilter[j].keyword,
})),
}))
// This removes duplicates
.filter((v, i, a) => a.findIndex((t) => t.name === v.name) === i),
});
const newParams = formatAdvancedSearchParams({
attrsFilter: Object.keys(_attrsFilter)
.filter((k) => _attrsFilter[k]?.joinedAttrname === undefined)
.reduce((a, k) => ({ ...a, [k]: _attrsFilter[k] }), {}),
entryName: overwriteEntryName ?? entryFilter,
referralName: overwriteReferral ?? referralFilter,
baseParams: new URLSearchParams(location.search),
joinAttrs: Object.keys(_attrsFilter)
.filter((k) => _attrsFilter[k]?.joinedAttrname !== undefined)
.map((k) => ({
name: _attrsFilter[k]?.baseAttrname ?? "",
attrinfo: Object.keys(_attrsFilter)
.filter(
(j) =>
_attrsFilter[j].baseAttrname === _attrsFilter[k].baseAttrname
)
.map((j) => ({
name: _attrsFilter[j]?.joinedAttrname ?? "",
filterKey: _attrsFilter[j].filterKey,
keyword: _attrsFilter[j].keyword,
})),
}))
// This removes duplicates
.filter((v, i, a) => a.findIndex((t) => t.name === v.name) === i),
});

if (getIsFiltered(attrFilter?.filterKey, attrFilter?.keyword)) {
refreshSearchResults();
}
if (getIsFiltered(attrFilter?.filterKey, attrFilter?.keyword)) {
refreshSearchResults();
}

// simply reload with the new params
navigate({
pathname: location.pathname,
search: "?" + newParams.toString(),
});
};
// simply reload with the new params
navigate({
pathname: location.pathname,
search: "?" + newParams.toString(),
});
};

const handleUpdateAttrFilter =
(attrName: string) => (attrFilter: AttrFilter) => {
Expand All @@ -187,33 +189,43 @@ export const SearchResultsTableHead: FC<Props> = ({
return (
<TableHead>
<TableRow sx={{ backgroundColor: "primary.dark" }}>
<TableCell sx={{ witdh: "80px" }} />
{/* Bulk operation checkbox would be invisible when Readonly mode is true */}
{!isReadonly && (
<TableCell sx={{ witdh: "80px" }} />
)}
<StyledTableCell sx={{ outline: "1px solid #FFFFFF" }}>
<HeaderBox>
<Typography>アイテム名</Typography>
<StyledIconButton
onClick={(e) => {
setEntryMenuEls(e.currentTarget);
}}
>
{defaultEntryFilter ? <FilterAltIcon /> : <FilterListIcon />}
</StyledIconButton>
<SearchResultControlMenuForEntry
entryFilter={entryFilter}
anchorElem={entryMenuEls}
handleClose={() => setEntryMenuEls(null)}
entryFilterDispatcher={entryFilterDispatcher}
handleSelectFilterConditions={handleSelectFilterConditions()}
handleClear={() => handleSelectFilterConditions()(undefined, "")}
/>

{/* SearchControlMenu would be invisible when Readonly Mode is True */}
{!isReadonly && (
<>
<StyledIconButton
onClick={(e) => {
setEntryMenuEls(e.currentTarget);
}}
>
{defaultEntryFilter ? <FilterAltIcon /> : <FilterListIcon />}
</StyledIconButton>
<SearchResultControlMenuForEntry
entryFilter={entryFilter}
anchorElem={entryMenuEls}
handleClose={() => setEntryMenuEls(null)}
entryFilterDispatcher={entryFilterDispatcher}
handleSelectFilterConditions={handleSelectFilterConditions()}
handleClear={() => handleSelectFilterConditions()(undefined, "")}
/>
</>
)}
</HeaderBox>
</StyledTableCell>
{attrNames.map((attrName) => (
<StyledTableCell key={attrName}>
<HeaderBox>
<Typography>{attrName}</Typography>

{(attrTypes[attrName] & EntryAttributeTypeTypeEnum.OBJECT) > 0 &&
{/* Bulk operation checkbox would be invisible when Readonly mode is true */}
{(attrTypes[attrName] & EntryAttributeTypeTypeEnum.OBJECT) > 0 && !isReadonly &&
attrsFilter[attrName]?.joinedAttrname === undefined && (
<StyledIconButton onClick={() => setJoinAttrname(attrName)}>
<AddIcon />
Expand All @@ -229,36 +241,40 @@ export const SearchResultsTableHead: FC<Props> = ({
refreshSearchResults={refreshSearchResults}
/>
)}
<StyledIconButton
onClick={(e) => {
setAttributeMenuEls({
...attributeMenuEls,
[attrName]: e.currentTarget,
});
}}
sx={{ marginLeft: "auto" }}
>
{isFiltered[attrName] ?? false ? (
<FilterAltIcon />
) : (
<FilterListIcon />
)}
</StyledIconButton>
<SearchResultControlMenu
attrFilter={attrsFilter[attrName]}
anchorElem={attributeMenuEls[attrName]}
handleClose={() =>
setAttributeMenuEls({
...attributeMenuEls,
[attrName]: null,
})
}
handleSelectFilterConditions={handleSelectFilterConditions(
attrName
)}
handleUpdateAttrFilter={handleUpdateAttrFilter(attrName)}
attrType={attrTypes[attrName]}
/>
{!isReadonly && (
<>
<StyledIconButton
onClick={(e) => {
setAttributeMenuEls({
...attributeMenuEls,
[attrName]: e.currentTarget,
});
}}
sx={{ marginLeft: "auto" }}
>
{isFiltered[attrName] ?? false ? (
<FilterAltIcon />
) : (
<FilterListIcon />
)}
</StyledIconButton>
<SearchResultControlMenu
attrFilter={attrsFilter[attrName]}
anchorElem={attributeMenuEls[attrName]}
handleClose={() =>
setAttributeMenuEls({
...attributeMenuEls,
[attrName]: null,
})
}
handleSelectFilterConditions={handleSelectFilterConditions(
attrName
)}
handleUpdateAttrFilter={handleUpdateAttrFilter(attrName)}
attrType={attrTypes[attrName]}
/>
</>
)}
</HeaderBox>
</StyledTableCell>
))}
Expand Down

0 comments on commit d9b8214

Please sign in to comment.