Web: Files: added column filtering

packages/asc-web-common/components/FilterInput/FilterInput.js

@@ -911,24 +911,26 @@ class FilterInput extends React.Component {
           </SearchInput>
         </div>
         <div ref={this.rectComboBoxRef}>
-          <SortComboBox
-            options={getSortData()}
-            viewSettings={this.state.viewSettings}
-            isDisabled={isDisabled}
-            onChangeSortId={this.onClickSortItem}
-            onChangeView={this.props.onChangeViewAs}
-            onChangeSortDirection={this.onChangeSortDirection}
-            selectedOption={
-              getSortData().length > 0
-                ? getSortData().find((x) => x.key === sortId)
-                : {}
-            }
-            onButtonClick={this.onSortDirectionClick}
-            viewAs={viewAs}
-            sortDirection={+sortDirection}
-            directionAscLabel={directionAscLabel}
-            directionDescLabel={directionDescLabel}
-          />
+          {viewAs !== "table" && (
+            <SortComboBox
+              options={getSortData()}
+              viewSettings={this.state.viewSettings}
+              isDisabled={isDisabled}
+              onChangeSortId={this.onClickSortItem}
+              onChangeView={this.props.onChangeViewAs}
+              onChangeSortDirection={this.onChangeSortDirection}
+              selectedOption={
+                getSortData().length > 0
+                  ? getSortData().find((x) => x.key === sortId)
+                  : {}
+              }
+              onButtonClick={this.onSortDirectionClick}
+              viewAs={viewAs}
+              sortDirection={+sortDirection}
+              directionAscLabel={directionAscLabel}
+              directionDescLabel={directionDescLabel}
+            />
+          )}
         </div>
         {viewAs && !isMobileOnly && (
           <ViewSelector

packages/asc-web-components/table-container/StyledTableContainer.js

@@ -117,6 +117,7 @@ const StyledTableHeaderCell = styled.div`
     .header-container-text-icon {
       padding: 2px 0 0 4px;
 
+      display: ${(props) => (props.isActive ? "block" : "none")};
       ${(props) =>
         props.sorted &&
         css`
@@ -124,6 +125,12 @@ const StyledTableHeaderCell = styled.div`
           padding: 0 0 0 4px;
         `}
     }
+
+    :hover {
+      .header-container-text-icon {
+        display: block;
+      }
+    }
   }
 
   .header-container-text {

packages/asc-web-components/table-container/TableHeader.js

@@ -267,7 +267,7 @@ class TableHeader extends React.Component {
   };
 
   render() {
-    const { columns, ...rest } = this.props;
+    const { columns, sortBy, ...rest } = this.props;
 
     //console.log("TABLE HEADER RENDER", columns);
 
@@ -290,6 +290,7 @@ class TableHeader extends React.Component {
                   key={column.key}
                   index={index}
                   column={column}
+                  sortBy={sortBy}
                   resizable={resizable}
                   onMouseDown={this.onMouseDown}
                 />
@@ -311,6 +312,7 @@ TableHeader.propTypes = {
   containerRef: PropTypes.shape({ current: PropTypes.any }),
   columns: PropTypes.array.isRequired,
   setSelected: PropTypes.func,
+  sortBy: PropTypes.string,
 };
 
 export default TableHeader;

packages/asc-web-components/table-container/TableHeaderCell.js

@@ -5,19 +5,22 @@ import Link from "../link";
 import globalColors from "../utils/globalColors";
 import { StyledTableHeaderCell } from "./StyledTableContainer";
 
-const TableHeaderCell = ({ column, index, onMouseDown, resizable }) => {
-  const [sorted, setSorted] = useState(column.sorted);
-
+const TableHeaderCell = ({ column, index, onMouseDown, resizable, sortBy }) => {
   const { options, title, enable } = column;
 
+  const isActive = column.sortBy === sortBy;
+
+  const [sorted, setSorted] = useState(column.sorted);
+
   const onClick = (e) => {
-    column.onClick(sorted, e);
-    setSorted(!sorted);
+    column.onClick(column.sortBy, e);
+    isActive && setSorted(!sorted);
   };
 
   return (
     <StyledTableHeaderCell
       sorted={sorted}
+      isActive={isActive}
       className="table-container_header-cell"
       id={`column_${index + 1}`}
       data-enable={enable}
@@ -65,6 +68,7 @@ TableHeaderCell.propTypes = {
   index: PropTypes.number,
   onMouseDown: PropTypes.func,
   resizable: PropTypes.bool,
+  sortBy: PropTypes.string,
 };
 
 export default TableHeaderCell;

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableHeader.js

@@ -21,8 +21,9 @@ class FilesTableHeader extends React.Component {
         resizable: true,
         enable: true,
         default: true,
+        sortBy: "AZ",
         sorted: filter.sortOrder === "descending",
-        onClick: this.onNameClick,
+        onClick: this.onFilter,
         onChange: this.onColumnChange,
       },
       {
@@ -30,6 +31,8 @@ class FilesTableHeader extends React.Component {
         title: t("ByAuthor"),
         enable: true,
         resizable: true,
+        sortBy: "Author",
+        onClick: this.onFilter,
         onChange: this.onColumnChange,
       },
       {
@@ -37,6 +40,8 @@ class FilesTableHeader extends React.Component {
         title: t("ByCreationDate"),
         enable: false,
         resizable: true,
+        sortBy: "DateAndTimeCreation",
+        onClick: this.onFilter,
         onChange: this.onColumnChange,
       },
       {
@@ -44,6 +49,8 @@ class FilesTableHeader extends React.Component {
         title: t("ByLastModifiedDate"),
         enable: true,
         resizable: true,
+        sortBy: "DateAndTime",
+        onClick: this.onFilter,
         onChange: this.onColumnChange,
       },
       {
@@ -51,6 +58,8 @@ class FilesTableHeader extends React.Component {
         title: t("Common:Size"),
         enable: true,
         resizable: true,
+        sortBy: "Size",
+        onClick: this.onFilter,
         onChange: this.onColumnChange,
       },
       {
@@ -58,6 +67,8 @@ class FilesTableHeader extends React.Component {
         title: t("Common:Type"),
         enable: false,
         resizable: true,
+        sortBy: "Type",
+        onClick: this.onFilter,
         onChange: this.onColumnChange,
       },
       {
@@ -119,10 +130,16 @@ class FilesTableHeader extends React.Component {
     localStorage.setItem(TABLE_COLUMNS, tableColumns);
   };
 
-  onNameClick = (val) => {
+  onFilter = (sortBy) => {
     const { filter, selectedFolderId, setIsLoading, fetchFiles } = this.props;
     const newFilter = filter.clone();
-    newFilter.sortOrder = val ? "ascending" : "descending";
+
+    if (newFilter.sortBy !== sortBy) {
+      newFilter.sortBy = sortBy;
+    } else {
+      newFilter.sortOrder =
+        newFilter.sortOrder === "ascending" ? "descending" : "ascending";
+    }
 
     setIsLoading(true);
     fetchFiles(selectedFolderId, newFilter).finally(() => setIsLoading(false));
@@ -146,6 +163,7 @@ class FilesTableHeader extends React.Component {
       isHeaderIndeterminate,
       getHeaderMenu,
       setSelected,
+      filter,
     } = this.props;
 
     const { columns } = this.state;
@@ -208,6 +226,7 @@ class FilesTableHeader extends React.Component {
       />
     ) : (
       <TableHeader
+        sortBy={filter.sortBy}
         setSelected={setSelected}
         containerRef={containerRef}
         columns={columns}