OpenConceptLab/ocl_issues#1453 | refactoring AddToCollection to use C…

…ollectionListItem

src/common/utils.js

@@ -350,15 +350,17 @@ export const memorySizeOf = (obj, format=true) => {
 export const getCurrentUserCollections = callback => {
   const username = getCurrentUserUsername();
   if(username) {
-    APIService.users(username)
-              .collections()
-              .get(null, null, {limit: 1000})
-              .then(response => isArray(response.data) ? callback(response.data) : false);
-    APIService.users(username)
-              .orgs()
-              .appendToUrl('collections/')
-              .get(null, null, {limit: 1000})
-              .then(response => isArray(response.data) ? callback(response.data) : false);
+    APIService
+      .users(username)
+      .collections()
+      .get(null, null, {limit: 1000, includeSummary: true})
+      .then(response => isArray(response.data) ? callback(response.data) : false);
+    APIService
+      .users(username)
+      .orgs()
+      .appendToUrl('collections/')
+      .get(null, null, {limit: 1000, includeSummary: true})
+      .then(response => isArray(response.data) ? callback(response.data) : false);
   }
 }
 

src/components/common/AddToCollection.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import alertifyjs from 'alertifyjs';
 import {
-  Button, Popper, MenuItem, MenuList, Grow, Paper, ClickAwayListener, Tooltip,
+  Button, Popper, MenuList, Grow, Paper, ClickAwayListener, Tooltip,
   CircularProgress, Dialog, DialogActions, DialogContent,
-  TextField, InputAdornment, Chip
+  TextField, InputAdornment, Chip, Divider
 } from '@mui/material'
 import {
   ArrowDropDown as ArrowDropDownIcon,
@@ -19,6 +19,7 @@ import AddReferencesResult from './AddReferencesResult';
 import ReferenceCascadeDialog from './ReferenceCascadeDialog';
 import MappingReferenceAddOptionsDialog from './MappingReferenceAddOptionsDialog';
 import DialogTitleWithCloseButton from './DialogTitleWithCloseButton';
+import CollectionListItem from './CollectionListItem';
 
 const NEW_COLLECTION = {id: '__new__', name: 'Create New Collection'}
 
@@ -59,7 +60,7 @@ class AddToCollection extends React.Component {
         allCollections: [...this.state.collections, ...collections],
         isLoading: false,
       })}
-    )
+                             )
   }
 
   handleClose = event => {
@@ -156,8 +157,8 @@ class AddToCollection extends React.Component {
   onSearchValueChange = event => this.setState({
     searchedValue: event.target.value,
     collections: event.target.value.trim() ?
-                 this.getFilteredCollections(event.target.value) :
-                 this.state.allCollections
+      this.getFilteredCollections(event.target.value) :
+      this.state.allCollections
   })
 
   getButton = () => {
@@ -201,64 +202,59 @@ class AddToCollection extends React.Component {
                 transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
                 zIndex: '1000'
               }}
-              >
+            >
               <Paper>
                 <ClickAwayListener onClickAway={this.handleClose}>
                   {
                     noOverallCollections ?
-                    <p style={{padding: '20px'}}>
-                      You do not have any collections.
-                      <a style={{cursor: 'pointer', marginLeft: '2px'}} onClick={this.toggleCollectionForm}>
-                        Create New Collection?
-                      </a>
-                    </p> :
+                      <p style={{padding: '20px'}}>
+                        You do not have any collections.
+                        <a style={{cursor: 'pointer', marginLeft: '2px'}} onClick={this.toggleCollectionForm}>
+                          Create New Collection?
+                        </a>
+                      </p> :
                       <MenuList variant='menu' id="split-button-menu" style={{maxWidth: '500px', maxHeight: '100%', overflow: 'auto'}}>
-                      <TextField
-                        id='collection-search-input'
-                        placeholder='Search Collection...'
-                        variant='outlined'
-                        size='small'
-                        style={{padding: '10px', width: '100%'}}
-                        autoFocus
-                        onChange={this.onSearchValueChange}
-                        InputProps={{
-                          endAdornment: (
-                            <InputAdornment position="end">
-                              <SearchIcon />
-                            </InputAdornment>
-                          )
-                        }}
-                      />
-                      {
-                        noSearchResults ?
-                        <p style={{padding: '0 20px'}}>
-                          No Matches.
-                          <a style={{cursor: 'pointer', marginLeft: '2px'}} onClick={this.toggleCollectionForm}>
-                            Create New Collection?
-                          </a>
-                        </p> :
-                        map(_collections, (collection, index) => (
-                          <MenuItem
-                            id={collection.url}
-                            key={index}
-                            onClick={event => this.handleMenuItemClick(event, collection)}
-                            style={{padding: '10px 15px'}}
-                            >
-                            <span className='flex-vertical-center'>
-                              {
-                                collection.owner ?
-                                <React.Fragment>
-                                  <span>{collection.owner}</span>
-                                  <span style={{margin: '0 2px'}}>/</span>
-                                  <span><b>{collection.short_code}</b></span>
-                                </React.Fragment> :
-                                <span><i>{collection.name}</i></span>
-                              }
-                            </span>
-                          </MenuItem>
-                        ))
-                      }
-                    </MenuList>
+                        <TextField
+                          id='collection-search-input'
+                          placeholder='Search Collection...'
+                          variant='outlined'
+                          size='small'
+                          style={{padding: '10px', width: '100%'}}
+                          autoFocus
+                          onChange={this.onSearchValueChange}
+                          InputProps={{
+                            endAdornment: (
+                              <InputAdornment position="end">
+                                <SearchIcon />
+                              </InputAdornment>
+                            )
+                          }}
+                        />
+                        {
+                          isLoading ?
+                            <div style={{textAlign: 'center'}}>
+                              <CircularProgress />
+                            </div> : (
+                              noSearchResults ?
+                                <p style={{padding: '0 20px'}}>
+                                  No Matches.
+                                  <a style={{cursor: 'pointer', marginLeft: '2px'}} onClick={this.toggleCollectionForm}>
+                                    Create New Collection?
+                                  </a>
+                                </p> :
+                                map(_collections, (collection, index) => (
+                                  <React.Fragment key={index}>
+                                    <CollectionListItem
+                                      option={collection}
+                                      listItemProps={{onClick: event => this.handleMenuItemClick(event, collection)}}
+                                      style={{cursor: 'pointer'}}
+                                    />
+                                    <Divider variant="inset" component="li" style={{listStyle: 'none'}} />
+                                  </React.Fragment>
+                                ))
+                            )
+                        }
+                      </MenuList>
                   }
                 </ClickAwayListener>
               </Paper>
@@ -300,12 +296,12 @@ class AddToCollection extends React.Component {
         </Dialog>
         {
           result &&
-          <AddReferencesResult
-            title={`Results: Add Reference(s) to ${this._collectionName}`}
-            open={Boolean(result)}
-            onClose={() => this.setState({result: false})}
-            result={result}
-          />
+            <AddReferencesResult
+              title={`Results: Add Reference(s) to ${this._collectionName}`}
+              open={Boolean(result)}
+              onClose={() => this.setState({result: false})}
+              result={result}
+            />
         }
         <CommonFormDrawer
           style={{zIndex: 1202}}

src/components/common/CollectionListItem.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { ListItem, ListItemIcon, ListItemText, Typography, Tooltip } from '@mui/material';
+import {
+  LocalOffer as ConceptIcon, Loyalty as CollectionIcon,
+  Person as UserIcon, AccountBalance as OrgIcon,
+} from '@mui/icons-material';
+import { isNumber, merge } from 'lodash'
+import { GREEN } from '../../common/constants';
+
+const SubText = ({ text, divider }) => (
+  <span className='flex-vertical-center'>
+    <Typography
+      sx={{ display: 'inline', color: 'rgba(0, 0, 0, 0.6)' }}
+      component="span"
+      className='flex-vertical-center'>
+      <span className='flex-vertical-center'>
+        {
+          divider &&
+            <span className='flex-vertical-center' style={{backgroundColor: 'rgba(0, 0, 0, 0.6)', width: '3px', height: '3px', borderRadius: '100px', margin: '0 8px'}} />
+        }
+        <span className='flex-vertical-center' style={{fontSize: '14px'}}>
+          {text}
+        </span>
+      </span>
+    </Typography>
+  </span>
+)
+
+
+const Owner = ({ option, marginTop }) => (
+  <Tooltip title={option.owner}>
+    <span style={{display: 'flex', marginTop: marginTop || 0, alignItems: 'center'}}>
+      {
+        option.owner_type === 'User' ?
+          <UserIcon style={{marginRight: '4px', color: 'rgba(0, 0, 0, 0.26)', fontSize: '13px' }}/> :
+        <OrgIcon style={{marginRight: '4px', color: 'rgba(0, 0, 0, 0.26)', fontSize: '13px'}} />
+      }
+      <span className='flex-vertical-center' style={{maxWidth: '70px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: 'rgba(0, 0, 0, 0.26)', fontSize: '13px'}}>
+        {option.owner}
+      </span>
+    </span>
+  </Tooltip>
+)
+
+const CollectionListItem = ({ option, style, listItemProps }) => {
+  return (
+    <ListItem
+      {...listItemProps}
+      alignItems="flex-start"
+      style={merge({alignItems: 'flex-start'}, (style || {}))}
+      secondaryAction={
+        <Owner option={option} marginTop='-22px' />
+      }>
+      <ListItemIcon style={{minWidth: 'auto', marginRight: '10px'}}>
+        <CollectionIcon style={{color: GREEN, marginTop: '-5px'}} fontSize='large' />
+      </ListItemIcon>
+      <ListItemText
+        primary={
+          <Typography
+            sx={{ maxWidth: 'calc(100% - 90px)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {option.name}
+          </Typography>
+        }
+        secondary={
+          (
+            isNumber(option?.summary?.active_concepts) ?
+              <span className='flex-vertical-center'>
+                <Typography
+                  sx={{ display: 'inline', color: 'rgba(0, 0, 0, 0.6)', fontSize: '14px' }}
+                  component="span"
+                  className='flex-vertical-center'>
+                  <ConceptIcon size='small' style={{marginRight: '4px', width: '13.3px', height: '13.3px'}} />
+                  {option.summary.active_concepts.toLocaleString()}
+                </Typography>
+                { option.suggestionType && <SubText text={option.suggestionType} divider /> }
+              </span> :
+            (
+              option.suggestionType ? <SubText text={option.suggestionType} /> : ''
+            )
+          )
+        }
+      />
+    </ListItem>
+
+  )
+}
+
+export default CollectionListItem;