Web: Files: Tiles: added file selection when clicking on a tile

products/ASC.Files/Client/src/components/pages/Home/Section/Body/FileItem.js

@@ -44,6 +44,7 @@ const FileItem = createSelectable((props) => {
     viewAs,
     setTooltipPosition,
     getIcon,
+    startDrag,
   } = props;
 
   const {
@@ -56,7 +57,6 @@ const FileItem = createSelectable((props) => {
     providerKey,
     contentLength,
   } = item;
-
   const isMobile = sectionWidth < 500;
   const getItemIcon = (isEdit) => {
     return (
@@ -176,6 +176,8 @@ const FileItem = createSelectable((props) => {
 
   let className = isDragging ? " droppable" : "";
   if (draggable) className += " draggable not-selectable";
+  /*if (draggable)
+    className += ` draggable ${startDrag ? " not-selectable " : ""}`;*/
 
   const sharedButton =
     !canShare || (isPrivacy && !fileExst) || isEdit || id <= 0 || isMobile
@@ -208,7 +210,11 @@ const FileItem = createSelectable((props) => {
             temporaryIcon={temporaryIcon}
             isPrivacy={isPrivacy}
           >
-            <FilesContent item={item} viewAs={viewAs} />
+            <FilesContent
+              item={item}
+              viewAs={viewAs}
+              onLinkClick={fileContextClick}
+            />
           </Tile>
         ) : (
           <SimpleFilesRow
@@ -274,6 +280,7 @@ export default inject(
       setStartDrag,
       setTooltipPosition,
       viewAs,
+      startDrag,
     } = filesStore;
     const { isRootFolder, id: selectedFolderId } = selectedFolderStore;
 
@@ -322,6 +329,7 @@ export default inject(
       setTooltipPosition,
       viewAs,
       getIcon,
+      startDrag,
     };
   }
 )(withRouter(withTranslation("Home")(observer(FileItem))));

products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContent.js

@@ -244,6 +244,8 @@ class FilesContent extends React.Component {
 
     if (isTrashFolder) return;
 
+    this.props.onLinkClick();
+
     if (!fileExst && !contentLength) {
       setIsLoading(true);
 
@@ -463,10 +465,6 @@ class FilesContent extends React.Component {
       id,
       fileExst,
       access,
-      locked,
-      fileStatus,
-      title,
-      versionGroup,
       createdBy,
       updated,
       providerKey,
@@ -481,7 +479,7 @@ class FilesContent extends React.Component {
       access === ShareAccessRights.FullAccess ||
       access === ShareAccessRights.None; // TODO: fix access type for owner (now - None)
 
-    const showNew = !!newItems; // in tile const showNew = item.new && item.new > 0;
+    const showNew = !!newItems;
 
     const fileOwner =
       createdBy &&

products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/sub-components/Tile.js

@@ -159,9 +159,13 @@ class Tile extends React.Component {
 
     this.cm = React.createRef();
     this.tile = React.createRef();
+
+    this.state = {
+      checkedCheckbox: false,
+    };
   }
 
-  getIconFile() {
+  getIconFile = () => {
     const { item, temporaryIcon } = this.props;
 
     const icon = item.thumbnail ? item.thumbnail : temporaryIcon;
@@ -169,7 +173,21 @@ class Tile extends React.Component {
     if (!item.thumbnail) className += " temporary-icon";
 
     return <ReactSVG className={className} src={icon} loading={svgLoader} />;
-  }
+  };
+
+  onClickHandler = (e) => {
+    const { onSelect, item } = this.props;
+    if (e.target.closest(".checkbox") || e.target.tagName === "INPUT") return;
+
+    this.setState({ checkedCheckbox: !this.state.checkedCheckbox });
+    onSelect && onSelect(!this.state.checkedCheckbox, item);
+  };
+
+  changeCheckbox = (e) => {
+    const { onSelect, item } = this.props;
+    this.setState({ checkedCheckbox: e.target.checked });
+    onSelect && onSelect(e.target.checked, item);
+  };
 
   render() {
     //console.log("Row render");
@@ -202,10 +220,6 @@ class Tile extends React.Component {
       Object.prototype.hasOwnProperty.call(this.props, "contextOptions") &&
       contextOptions.length > 0;
 
-    const changeCheckbox = (e) => {
-      onSelect && onSelect(e.target.checked, item);
-    };
-
     const getOptions = () => {
       rowContextClick && rowContextClick();
       return contextOptions;
@@ -227,6 +241,7 @@ class Tile extends React.Component {
         {...this.props}
         onContextMenu={onContextMenu}
         dragging={dragging && isFolder}
+        onClick={this.onClickHandler}
       >
         {isFolder ? (
           <>
@@ -235,7 +250,7 @@ class Tile extends React.Component {
                 <Checkbox
                   isChecked={checked}
                   isIndeterminate={indeterminate}
-                  onChange={changeCheckbox}
+                  onChange={this.changeCheckbox}
                 />
               </StyledCheckbox>
             )}
@@ -264,7 +279,7 @@ class Tile extends React.Component {
                   <Checkbox
                     isChecked={checked}
                     isIndeterminate={indeterminate}
-                    onChange={changeCheckbox}
+                    onChange={this.changeCheckbox}
                   />
                 </StyledCheckbox>
               )}