cluedin-widget
Version:
This is the project for creating and managing widgets in CluedIn.
164 lines (129 loc) • 5.02 kB
JSX
import React, { Component } from 'react'
import Grid from './Grid.jsx'
import localStorage from 'store'
import ReactTabs from 'react-tabs'
import userProfile from '../../userProfile/index'
const Tab = ReactTabs.Tab;
const Tabs = ReactTabs.Tabs;
const TabList = ReactTabs.TabList;
const TabPanel = ReactTabs.TabPanel;
export default class AppWithTabs extends Component {
buildTabMenu( tab, index ) {
return ( <Tab key={index}>{tab.name}</Tab>);
}
buildSuggestedSearchWidget( suggestedSearches ) {
const { index, type } = this.props;
var result = [];
suggestedSearches.forEach( ( search, i ) => {
result.push( {
name: 'EntitySuggestedSearch',
place: 'Content',
size: 4,
parameters: {
search: search,
index: i,
layoutIndex: index,
type: type
}
} );
} );
return result;
}
filterAdminWidget( w ) {
const { currentUser } = this.props;
if ( w.onlyAdmin ) {
return currentUser.client.IsAdmin;
}
return true;
}
filterBasedOnUserSettings( w ) {
const { type } = this.props;
let excludedWidgets = userProfile.getExcludedWidgets( type );
return !(excludedWidgets.indexOf( w.name ) > -1);
}
addParamToWidget( w ) {
const { entityId } = this.props;
w.parameters = w.parameters || {};
w.parameters.entityId = entityId;
}
filterWidget( widgets ) {
const { entityId } = this.props;
widgets = widgets.filter( this.filterBasedOnUserSettings, this ).filter( this.filterAdminWidget, this );
if ( entityId ) {
widgets.forEach( this.addParamToWidget, this );
}
return widgets;
}
filterSuggestedSearches( suggestedSearches, filterSuggestedSearches ) {
suggestedSearches = suggestedSearches || [];
if ( !filterSuggestedSearches || filterSuggestedSearches.length === 0 ) {
return suggestedSearches;
}
return suggestedSearches.filter( ( s ) => {
return filterSuggestedSearches.find( ( include ) => {
return ( include.key === s.DisplayName );
} );
} );
}
buildTabs( tab, tabIndex ) {
const { entityId, entity, type, layout, isFetchingEntity, index, currentUser } = this.props;
let singleLayout = layout[ index ];
let widgets = this.filterWidget( tab.widgets.slice( 0 ) );
let currentTabLayoutInformation = {
layoutIndex: index,
tabIndex: tabIndex,
type: type
};
if ( entityId && entity && !isFetchingEntity && tab.includeSuggestedSearches ) {
let suggestedSearches = this.filterSuggestedSearches( entity.SuggestedSearches, tab.suggestedSearchFilter );
let widgetsForSuggestedSearch = this.buildSuggestedSearchWidget( suggestedSearches );
if ( widgetsForSuggestedSearch && widgetsForSuggestedSearch.length > 0 ) {
widgetsForSuggestedSearch.forEach( ( w )=> {
if ( singleLayout.includeSuggestedSearchesBefore ) {
widgets.shift( w );
} else {
widgets.push( w );
}
} );
}
}
return (<TabPanel key={tabIndex}>
<div className="cluedIn_container">
<Grid layoutInformation={currentTabLayoutInformation}
isAdmin={currentUser.client.IsAdmin} widgets={widgets}></Grid>
</div>
</TabPanel>);
}
render() {
const { layout, index, type, currentUser } = this.props;
let tabs;
let tabsTitles;
let tabsContent;
let singleLayout = layout[ index ];
let sharedWidgetLayoutInformation = {
layoutIndex: index,
tabIndex: -1,
type: type
};
tabs = singleLayout.tabs.slice( 0 );
tabsTitles = tabs.map( this.buildTabMenu, this );
tabsContent = tabs.map( this.buildTabs, this );
return ( <div className="cluedIn_generic_tabs">
<div className="cluedIn_row">
<div className="cluedIn_col s12">
<Grid layoutInformation={sharedWidgetLayoutInformation}
isAdmin={currentUser.client.IsAdmin}
widgets={singleLayout.sharedWidgets}></Grid>
</div>
<div className="cluedIn_col s12">
<Tabs>
<TabList>
{tabsTitles}
</TabList>
{tabsContent}
</Tabs>
</div>
</div>
</div>);
}
}