UNPKG

cluedin-widget

Version:

This is the project for creating and managing widgets in CluedIn.

164 lines (129 loc) 5.02 kB
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>); } }