web: Components: Split group checkbox for select and check in AdvancedSelector v2

web/ASC.Web.Components/src/components/advanced-selector2/sub-components/selector.js

@@ -67,6 +67,10 @@ const StyledContainer = styled(Container)`
 
               .row-block {
                 padding-left: 8px;
+
+                .group_checkbox {
+                    display: inline-block;
+                }
               }
             }
           }
@@ -277,6 +281,7 @@ const ADSelector = props => {
       : selectedGroupList.filter(el => el.key !== group.key);
     //console.log("onGroupChange", item);
     setSelectedGroupList(newSelectedGroups);
+
     onGroupSelect(group);
 
     if (e.target.checked) {
@@ -294,6 +299,9 @@ const ADSelector = props => {
   };
 
   const onGroupSelect = group => {
+    if(!currentGroup || !group || currentGroup.key === group.key)
+        return;
+
     resetCache();
     setCurrentGroup(group);
     onGroupChanged && onGroupChanged(group);
@@ -436,17 +444,16 @@ const ADSelector = props => {
         style={style}
         className={`row-block${isSelected ? " selected" : ""}`}
       >
-        {isMultiSelect ? (
+        {isMultiSelect && (
           <Checkbox
             id={group.key}
             value={`${index}`}
-            label={`${group.label} (${group.total}/${selected})`}
             isChecked={isChecked}
             isIndeterminate={isIndeterminate}
             className="group_checkbox"
             onChange={onGroupChange}
           />
-        ) : (
+        )}
         <Link
           as="span"
           key={group.key}
@@ -454,9 +461,10 @@ const ADSelector = props => {
           className="group_link"
           onClick={() => onGroupSelect(group)}
         >
-            {group.label}
+          {isMultiSelect
+            ? `${group.label} (${group.total}/${selected})`
+            : group.label}
         </Link>
-        )}
       </div>
     );
   };