Org | custom configs driven layout

OpenConceptLab · Feb 2, 2021 · b6e6211 · b6e6211
1 parent 130be7e
commit b6e6211
Show file tree

Hide file tree

Showing 8 changed files with 243 additions and 91 deletions.
diff --git a/src/components/app/App.scss b/src/components/app/App.scss
@@ -150,6 +150,10 @@ td.pagination-center {
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
+.ellipsis-text-3 {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
 .gray-italics {
     color: gray;
     font-style: italic;
@@ -497,3 +501,28 @@ div.login-paper {
     color: gray;
     font-style: italic;
 }
+td.xxsmall {
+    max-width: 50px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+td.xsmall {
+    max-width: 100px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+td.small {
+    max-width: 200px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+td.medium {
+    max-width: 300px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+td.large {
+    max-width: 400px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
diff --git a/src/components/common/ConfigSelect.jsx b/src/components/common/ConfigSelect.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Tooltip, Chip, MenuItem, Menu } from '@material-ui/core'
+import SettingsIcon from '@material-ui/icons/SettingsOverscan';
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import { map } from 'lodash';
+
+const ConfigSelect = ({configs, selected, onChange, color}) => {
+  const [open, setOpen] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const toggleOpen = event => {
+    const newOpen = !open
+
+    setOpen(newOpen)
+    setAnchorEl(newOpen ? event.currentTarget : null)
+  }
+
+  const _onChange = (event, config) => {
+    event.persist();
+
+    onChange(config)
+    toggleOpen(event)
+  }
+  return (
+    <span>
+      <Tooltip title='Change View Layout'>
+        <Chip
+          variant="default"
+          color='secondary'
+          icon={<SettingsIcon style={{width: '18px', marginLeft: '8px'}} />}
+          deleteIcon={<ArrowDropDownIcon style={{width: '18px'}} />}
+          label={`Layout : ${selected.name}`}
+          onClick={toggleOpen}
+          onDelete={toggleOpen}
+          style={{backgroundColor: color, borderColor: color}}
+        />
+      </Tooltip>
+      <Menu
+        id="results-size-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={toggleOpen}
+      >
+        {
+          map(configs, config => (
+            <MenuItem key={config.name} onClick={event => _onChange(event, config)}>
+              {config.name}
+            </MenuItem>
+          ))
+        }
+      </Menu>
+    </span>
+  )
+}
+
+export default ConfigSelect;
diff --git a/src/components/common/ResourceLabel.jsx b/src/components/common/ResourceLabel.jsx
@@ -9,20 +9,20 @@ const ResourceLabel = props => {
         {
           (props.owner && props.parent) ?
           <React.Fragment>
-            <span>{props.owner}</span>
+            <span className='ellipsis-text-3'>{props.owner}</span>
             <span>{SEPARATOR}</span>
-            <span>{props.parent}</span>
+            <span className='ellipsis-text-3'>{props.parent}</span>
           </React.Fragment> :
           (
             props.parentURL &&
-            <span>{props.parentURL}</span>
+            <span className='ellipsis-text-3'>{props.parentURL}</span>
           )
         }
         <span>{SEPARATOR}</span>
-        <span className='resource-name ellipsis-text' style={{maxWidth: '100%'}}>{props.id || props.name}</span>
+        <span className='resource-name ellipsis-text-3' style={{maxWidth: '100%'}}>{props.id || props.name}</span>
       </span>
-      <span className='resource-label resource-id ellipsis-text' style={{maxWidth: '100%'}}>
-        <span>{props.name || 'None'}</span>
+      <span className='resource-label resource-id' style={{maxWidth: '100%'}}>
+        <span className='ellipsis-text'>{props.name || 'None'}</span>
       </span>
     </div>
   )

diff --git a/src/components/orgs/OrgHome.jsx b/src/components/orgs/OrgHome.jsx
@@ -1,12 +1,24 @@
 import React from 'react';
 import alertifyjs from 'alertifyjs';
 import { CircularProgress } from '@material-ui/core';
-import { reject, get, isEmpty, values } from 'lodash';
+import { reject, get, isEmpty, values, find, findIndex, isEqual } from 'lodash';
 import APIService from '../../services/APIService';
 import { isCurrentUserMemberOf, isAdminUser } from '../../common/utils';
 import Pins from '../common/Pins';
 import OrgHomeHeader from './OrgHomeHeader';
 import OrgHomeTabs from './OrgHomeTabs';
+const DEFAULT_CONFIG = {
+  name: 'OCL Default',
+  page_size: 25,
+  layout: 'table',
+  config: {
+    tabs: [
+      {type: "sources", label: "Sources", page_size: 25, "default": true},
+      {type: "collections", label: "Collections", page_size: 25},
+      {type: "users", label: "Members", page_size: 25},
+    ]
+  }
+}
 
 class OrgHome extends React.Component {
   constructor(props) {
@@ -15,7 +27,10 @@ class OrgHome extends React.Component {
       isLoading: true,
       org: {},
       pins: [],
-      tab: this.getDefaultTabIndex()
+      tab: null,
+      selectedConfig: null,
+      customConfigs: [],
+      isCustomConfigSelected: false,
     }
   }
 
@@ -34,6 +49,15 @@ class OrgHome extends React.Component {
     return 0;
   }
 
+  getDefaultTabIndexFromConfig() {
+    const index = findIndex(this.state.selectedConfig.config.tabs, {"default": true});
+    return index > -1 ? index : 0;
+  }
+
+  setTab() {
+    this.setState({tab: this.getDefaultTabIndexFromConfig()});
+  }
+
   getOrgId() {
     return get(this.props, 'match.params.org')
   }
@@ -62,7 +86,7 @@ class OrgHome extends React.Component {
     if(prevProps.location.pathname !== this.props.location.pathname) {
       this.refreshDataByURL()
       this.getPins()
-      this.onTabChange(null, this.getDefaultTabIndex())
+      //this.onTabChange(null, this.getDefaultTabIndex())
     }
   }
 
@@ -78,11 +102,29 @@ class OrgHome extends React.Component {
       this.setState(
         {isLoading: true},
         () => service
-          .get()
-          .then(response => this.setState({isLoading: false, org: response.data})))
+          .get(null, null, {includeClientConfigs: true})
+          .then(response => {
+            const org = response.data;
+            const customConfigs = get(response.data, 'client_configs', [])
+            const defaultCustomConfig = find(customConfigs, {is_default: true});
+            this.setState({
+              isLoading: false,
+              org: org,
+              selectedConfig: defaultCustomConfig || DEFAULT_CONFIG,
+              customConfigs: customConfigs,
+              isCustomConfigSelected: Boolean(defaultCustomConfig),
+            }, this.setTab)
+          }))
     }
   }
 
+  onConfigChange = config => {
+    this.setState({
+      selectedConfig: config,
+      isCustomConfigSelected: !isEqual(config, DEFAULT_CONFIG)
+    })
+  }
+
   onTabChange = (event, value) => {
     this.setState({tab: value})
   }
@@ -131,7 +173,7 @@ class OrgHome extends React.Component {
   }
 
   render() {
-    const { org, isLoading, tab, pins } = this.state;
+    const { org, isLoading, tab, pins, selectedConfig, customConfigs } = this.state;
     const url = this.getURLFromPath()
     const isCurrentUserMemberOfOrg = isCurrentUserMemberOf(this.getOrgId()) || isAdminUser();
     const showAboutTab = this.shouldShowAboutTab()
@@ -148,18 +190,24 @@ class OrgHome extends React.Component {
               canDelete={isCurrentUserMemberOfOrg}
               onOrderUpdate={this.updatePinOrder}
             />
-            <OrgHomeTabs
-              tab={tab}
-              onTabChange={this.onTabChange}
-              org={org}
-              location={this.props.location}
-              url={url}
-              pins={pins}
-              onPinCreate={this.createPin}
-              onPinDelete={this.deletePin}
-              showPin={isCurrentUserMemberOfOrg}
-              aboutTab={showAboutTab}
-            />
+            {
+              tab !== null &&
+              <OrgHomeTabs
+                tab={tab}
+                onTabChange={this.onTabChange}
+                org={org}
+                location={this.props.location}
+                url={url}
+                pins={pins}
+                onPinCreate={this.createPin}
+                onPinDelete={this.deletePin}
+                showPin={isCurrentUserMemberOfOrg}
+                aboutTab={showAboutTab}
+                customConfigs={[...customConfigs, DEFAULT_CONFIG]}
+                onConfigChange={this.onConfigChange}
+                selectedConfig={selectedConfig}
+              />
+            }
           </div>
         }
       </div>

diff --git a/src/components/orgs/OrgHomeChildrenList.jsx b/src/components/orgs/OrgHomeChildrenList.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { merge } from 'lodash';
 import Search from '../search/Search';
 
 class OrgHomeChildrenList extends React.Component {
@@ -10,13 +11,13 @@ class OrgHomeChildrenList extends React.Component {
   }
 
   render() {
-    const { org, resource } = this.props;
+    const { org, resource, fixedFilters } = this.props;
     return (
       <Search
         {...this.props}
         nested
         baseURL={this.getURL()}
-        fixedFilters={{isTable: true, limit: 25}}
+        fixedFilters={merge({isTable: true, limit: 25}, (fixedFilters || {}))}
         searchInputPlaceholder={`Search ${org.id} ${resource}...`}
       />
     )