Intoduce isReadonly flag at the AdvancedSearchResult page

This flag is used for hiding control components because this might be
used at other pages to show its result as more simple style.

Author: userlocalhost

frontend/src/components/entry/SearchResults.tsx

@@ -63,6 +63,7 @@ interface Props {
   joinAttrs: AdvancedSearchJoinAttrInfo[];
   disablePaginationFooter: boolean;
   setSearchResults: () => void;
+  isReadonly?: boolean;
 }
 
 export const SearchResults: FC<Props> = ({
@@ -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.
@@ -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}

frontend/src/components/entry/SearchResultsTableHead.tsx

@@ -61,6 +61,7 @@ interface Props {
   searchAllEntities: boolean;
   joinAttrs: AdvancedSearchJoinAttrInfo[];
   refreshSearchResults: () => void;
+  isReadonly?: boolean;
 }
 
 export const SearchResultsTableHead: FC<Props> = ({
@@ -73,6 +74,7 @@ export const SearchResultsTableHead: FC<Props> = ({
   searchAllEntities,
   joinAttrs,
   refreshSearchResults,
+  isReadonly = false,
 }) => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -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) => {
@@ -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 />
@@ -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>
         ))}