perf(assets): fix layout and some refactor

packages/core-ui/src/modules/settings/team/components/common/BlockList.tsx

@@ -118,11 +118,11 @@ export default function BlockList(props: Props) {
           onClick={onClick}
           queryParams={queryParams}
           queryParamName={`${linkToText}Id`}
-          isTeam={true}
           treeView={true}
           icon={renderIcon()}
           editAction={renderEditAction}
           removeAction={renderRemoveAction}
+          keyCount="userCount"
         />
       </SidebarList>
     </Box>

packages/core-ui/src/modules/settings/team/components/unit/MainList.tsx

@@ -146,6 +146,7 @@ class MainList extends React.Component<Props, State> {
         <td>{__(unit?.supervisor?.email)}</td>
         <td>{__(unit?.department?.title || '')}</td>
         <td>{unit.userIds?.length || 0}</td>
+        <td>{unit.userCount}</td>
         <td>
           <ActionButtons>
             <ModalTrigger

packages/core/src/data/resolvers/units.ts

@@ -15,5 +15,12 @@ export default {
 
   supervisor(unit: IUnitDocument, _args, { models }: IContext) {
     return models.Users.findOne({ _id: unit.supervisorId, isActive: true });
+  },
+
+  userCount(unit: IUnitDocument, _args, { models }: IContext) {
+    return models.Users.countDocuments({
+      _id: { $in: unit.userIds || [] },
+      isActive: true
+    });
   }
 };

packages/core/src/data/schema/structure.ts

@@ -53,6 +53,7 @@ export const types = `
         description: String
         department: Department
         users: [User]
+        userCount: Int
         userIds: [String]
     }
 

packages/erxes-ui/src/components/collapsibleList/CollapsibleList.tsx

@@ -13,7 +13,6 @@ import {
 
 import EmptyState from '../EmptyState';
 import Icon from '../Icon';
-import { Link } from 'react-router-dom';
 import React from 'react';
 import { SidebarList } from '../../layout/styles';
 import Spinner from '../Spinner';
@@ -30,6 +29,7 @@ type Props = {
   queryParamName?: string;
   level?: number;
   icon?: string;
+  keyCount?: string;
 
   // hooks
   onClick?: (id: string) => void;
@@ -115,45 +115,40 @@ class CollapsibleList extends React.Component<Props, State> {
   };
 
   renderItemName = (item: any) => {
-    const { isProductCategory, isTeam } = this.props;
+    const { keyCount } = this.props;
 
-    if (isProductCategory || isTeam) {
+    if (keyCount) {
       return (
         <FlexBetween>
-          {item.code} - {isTeam ? item.title : item.name}
-          <ItemCount className="product-count">
-            {isTeam ? item.users.length : item.productCount}
-          </ItemCount>
+          {item.code} - {item.title || item.name}
+          <ItemCount className="product-count">{item[keyCount]}</ItemCount>
         </FlexBetween>
       );
     }
 
-    return item.name || '[undefined]';
+    return item.title || item.name || '[undefined]';
   };
 
   renderItemText = (item: any) => {
-    const { linkToText } = this.props;
+    const { onClick } = this.props;
 
-    if (linkToText) {
-      return (
-        <Link to={`${linkToText}${item._id}`}>{this.renderItemName(item)}</Link>
-      );
-    }
-
-    return <ItemText>{this.renderItemName(item)}</ItemText>;
+    return (
+      <ItemText
+        onClick={onClick ? () => onClick(item._id) : (undefined as any)}
+      >
+        {this.renderItemName(item)}
+      </ItemText>
+    );
   };
 
   renderItem = (item: any, hasChildren: boolean) => {
-    const { onClick, icon } = this.props;
+    const { icon } = this.props;
     const { key } = this.state;
     const isOpen = this.state.parentIds[item._id] || !!key;
 
     return (
       <FlexRow key={item._id}>
-        <SidebarListItem
-          isActive={this.isActive(item._id)}
-          onClick={onClick ? () => onClick(item._id) : (undefined as any)}
-        >
+        <SidebarListItem isActive={this.isActive(item._id)}>
           {icon && <Icon className="list-icon" icon={icon} />}
           {this.renderIcons(item, hasChildren, isOpen)}
           {this.renderItemText(item)}

packages/erxes-ui/src/components/filter/Filter.tsx

@@ -173,6 +173,17 @@ function Filter({ queryParams = {}, filterTitle, history }: IProps) {
       {renderFilterParam('type', false, filterTitle)}
       {renderFilterParam('action', false, filterTitle)}
       {renderFilterWithData('userId', 'user', 'details{fullName}, email')}
+      {renderFilterWithData(
+        'assetCategoryId',
+        'assetCategory',
+        '_id, code, name'
+      )}
+      {renderFilterWithData(
+        'knowledgebaseCategoryId',
+        'knowledgeBaseCategory',
+        '_id, title'
+      )}
+      {renderFilterWithData('assetId', 'asset', '_id, code, name')}
     </Filters>
   );
 }

packages/erxes-ui/src/components/filter/createChipText.tsx

@@ -17,6 +17,9 @@ const ChipText = (props: any) => {
   const department = query.departmentDetail;
   const unit = query.unitDetail;
   const productCategory = query.productCategoryDetail;
+  const assetCategory = query.assetCategoryDetail;
+  const asset = query.assetDetail;
+  const knowledgeBaseCategory = query.knowledgeBaseCategoryDetail;
   const user = query.userDetail;
 
   return (
@@ -30,6 +33,9 @@ const ChipText = (props: any) => {
     (department && department.title) ||
     (unit && unit.title) ||
     (productCategory && `${productCategory.code} - ${productCategory.name}`) ||
+    (assetCategory && `${assetCategory.code} - ${assetCategory.name}`) ||
+    (asset && `${asset.code} - ${asset.name}`) ||
+    (knowledgeBaseCategory && knowledgeBaseCategory.title) ||
     (user && user.details.fullName) ||
     user.email
   );

packages/erxes-ui/src/team/graphql/queries.ts

@@ -201,6 +201,7 @@ export const unitField = `
   }
   code
   userIds
+  userCount
   users {
     _id
     details {

packages/erxes-ui/src/team/types.ts

@@ -99,6 +99,7 @@ export interface IUnit extends IStructureCommon {
   department: IDepartment;
   description: string;
   userIds: string[];
+  userCount: number;
   users: IUser[];
 }