Merge pull request #1321 from dmm-com/feature/new-ui/advanced_search_result/introduce_is_readonly_flag

Introduce isReadonly flag at the AdvancedSearchResult page

Author: hinashi

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,28 @@ 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();
@@ -187,33 +189,44 @@ 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>
 
+              {/* 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 +242,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>
         ))}