Commit 224787fd authored by Oleksii Savran's avatar Oleksii Savran Committed by Matija Obreza
Browse files

Config: Introducing feature configuration

parent 4efaf25f
...@@ -7,4 +7,7 @@ showGenesysUI(document.getElementById('genesys'), { ...@@ -7,4 +7,7 @@ showGenesysUI(document.getElementById('genesys'), {
clientKey: 'changeme', clientKey: 'changeme',
apiUrl: 'http://localhost:8080', apiUrl: 'http://localhost:8080',
filter: { institute: { code: [ 'COL003', 'BEL084', 'ETH013' ] } }, filter: { institute: { code: [ 'COL003', 'BEL084', 'ETH013' ] } },
}, queryLang); accession: { enabled: true },
language: { locale: queryLang, enableSwitch: true },
request: { enabled: false },
});
...@@ -23,6 +23,7 @@ interface IAccessionListPageState { ...@@ -23,6 +23,7 @@ interface IAccessionListPageState {
interface IAccessionListPageProps { interface IAccessionListPageProps {
filter: AccessionFilter; filter: AccessionFilter;
location: any; location: any;
cartEnabled: boolean;
} }
class AccessionListPage extends React.Component<IAccessionListPageProps & WithTranslation, IAccessionListPageState> { class AccessionListPage extends React.Component<IAccessionListPageProps & WithTranslation, IAccessionListPageState> {
...@@ -164,7 +165,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr ...@@ -164,7 +165,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
public render() { public render() {
const { accessions, selected, isAllSelected } = this.state; const { accessions, selected, isAllSelected } = this.state;
const { t } = this.props; const { t, cartEnabled } = this.props;
const selectedUUIDs = new Set(); const selectedUUIDs = new Set();
selected.forEach((uuid) => selectedUUIDs.add(uuid)); selected.forEach((uuid) => selectedUUIDs.add(uuid));
...@@ -188,48 +189,54 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr ...@@ -188,48 +189,54 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
<table className="table table-striped"> <table className="table table-striped">
<thead className="thead-dark"> <thead className="thead-dark">
<tr> <tr>
<th> { cartEnabled && (
<input <th>
type="checkbox" <input
name="select-all" type="checkbox"
checked={ isAllSelected } name="select-all"
onChange={ this.onToggleAll } checked={ isAllSelected }
className="align-middle" onChange={ this.onToggleAll }
/> className="align-middle"
</th> />
</th>
) }
<th>{ t('accession.crop') }</th> <th>{ t('accession.crop') }</th>
<th>{ t('accession.acceNumb') }</th> <th>{ t('accession.acceNumb') }</th>
<th>{ t('accession.accessionName') }</th> <th>{ t('accession.accessionName') }</th>
<th>{ t('accession.taxonomy') }</th> <th>{ t('accession.taxonomy') }</th>
<th>{ t('accession.countryOfOrigin') }</th> <th>{ t('accession.countryOfOrigin') }</th>
<th>{ t('accession.sampStat') }</th> <th>{ t('accession.sampStat') }</th>
<th>{ t('list.availability') }</th> { cartEnabled && ( <th>{ t('list.availability') }</th> ) }
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{ accessions.content.map((a, i) => ( { accessions.content.map((a, i) => (
<tr key={ a.id } className={ selectedUUIDs.has(a.uuid) ? 'table-primary' : '' }> <tr key={ a.id } className={ selectedUUIDs.has(a.uuid) ? 'table-primary' : '' }>
<td> { cartEnabled && (
{this.canAddToCart(a) && <td>
<input { this.canAddToCart(a) &&
type="checkbox" <input
name={ `checkbox-${a.uuid}-${i}` } type="checkbox"
data-uuid={ a.uuid } name={ `checkbox-${a.uuid}-${i}` }
checked={ selectedUUIDs.has(a.uuid) } data-uuid={ a.uuid }
onChange={ this.toggleRowSelect } checked={ selectedUUIDs.has(a.uuid) }
className="align-middle" onChange={ this.toggleRowSelect }
/> className="align-middle"
} />
</td> }
</td>
) }
<td>{ a.cropName }</td> <td>{ a.cropName }</td>
<td><Link to={ `/a/${a.uuid}` }>{ a.accessionNumber }</Link></td> <td><Link to={ `/a/${a.uuid}` }>{ a.accessionNumber }</Link></td>
<td>{ a.accessionName }</td> <td>{ a.accessionName }</td>
<td><span dangerouslySetInnerHTML={ { __html: a.taxonomy.taxonNameHtml } } /></td> <td><span dangerouslySetInnerHTML={ { __html: a.taxonomy.taxonNameHtml } } /></td>
<td>{ a.countryOfOrigin && a.countryOfOrigin.name }</td> <td>{ a.countryOfOrigin && a.countryOfOrigin.name }</td>
<td>{ a.sampStat && t(`accession.sampleStatus.${a.sampStat}`) }</td> <td>{ a.sampStat && t(`accession.sampleStatus.${a.sampStat}`) }</td>
<td> { cartEnabled &&
{this.renderCartButton(a, i)} <td>
</td> { this.renderCartButton(a, i) }
</td>
}
</tr> </tr>
)) } )) }
</tbody> </tbody>
...@@ -243,6 +250,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr ...@@ -243,6 +250,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
filter: state.appConfig.config.filter, filter: state.appConfig.config.filter,
cartEnabled: state.appConfig.config.request.enabled,
}); });
export default connect(mapStateToProps)(withTranslation()(AccessionListPage)); export default connect(mapStateToProps)(withTranslation()(AccessionListPage));
...@@ -4,6 +4,11 @@ export class Config { ...@@ -4,6 +4,11 @@ export class Config {
public clientKey: string; public clientKey: string;
public filter: Record<string, any>; public filter: Record<string, any>;
// module config
public accession: BaseFeatureConfig;
public language: Partial<LanguageConfig>;
public request: BaseFeatureConfig;
public constructor(config: Config) { public constructor(config: Config) {
this.apiUrl = config.apiUrl; this.apiUrl = config.apiUrl;
this.clientId = config.clientId; this.clientId = config.clientId;
...@@ -12,9 +17,21 @@ export class Config { ...@@ -12,9 +17,21 @@ export class Config {
} }
} }
export class BaseFeatureConfig {
public enabled: boolean;
}
class LanguageConfig {
public locale: string;
public enableSwitch: boolean;
}
export const DefaultConfig = new Config( { export const DefaultConfig = new Config( {
apiUrl: 'https://api.sandbox.genesys-pgr.org', apiUrl: 'https://api.sandbox.genesys-pgr.org',
clientId: 'clientid@genesys', clientId: 'clientid@genesys',
clientKey: 'changeme', clientKey: 'changeme',
filter: {}, filter: {},
language: { locale: 'en', enableSwitch: true },
accession: { enabled: true },
request: { enabled: true },
}) })
...@@ -51,11 +51,11 @@ function checkAccessTokens(apiUrl: string, clientId: string, clientSecret: strin ...@@ -51,11 +51,11 @@ function checkAccessTokens(apiUrl: string, clientId: string, clientSecret: strin
return appLogin; return appLogin;
}; };
export function showGenesysUI(holdingNode: HTMLElement, config: Config = DefaultConfig, language: string = 'en') { export function showGenesysUI(holdingNode: HTMLElement, config: Config = DefaultConfig) {
const { apiUrl, clientId, clientKey } = config; const { apiUrl, clientId, clientKey } = config;
reconfigureServiceAxios({ apiUrl }); reconfigureServiceAxios({ apiUrl });
initI18n(language); initI18n(config.language.locale);
store.dispatch(setConfig(config)); store.dispatch(setConfig(config));
checkAccessTokens(apiUrl, clientId, clientKey).then( (result) => { checkAccessTokens(apiUrl, clientId, clientKey).then( (result) => {
......
...@@ -9,7 +9,7 @@ import { createHashHistory } from 'history'; ...@@ -9,7 +9,7 @@ import { createHashHistory } from 'history';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { getCountryCodes } from 'core/actions/decoding'; import { getCountryCodes } from 'core/actions/decoding';
import { withTranslation, WithTranslation } from 'react-i18next'; import { withTranslation, WithTranslation } from 'react-i18next';
import { Config } from 'config/config';
import CartPage from 'request/CartPage'; import CartPage from 'request/CartPage';
import OverviewPage from 'accession/OverviewPage'; import OverviewPage from 'accession/OverviewPage';
import RequestPage from 'request/RequestPage'; import RequestPage from 'request/RequestPage';
...@@ -17,8 +17,7 @@ import RequestPage from 'request/RequestPage'; ...@@ -17,8 +17,7 @@ import RequestPage from 'request/RequestPage';
const hashHistory = createHashHistory({}); const hashHistory = createHashHistory({});
interface IAppProps extends React.ClassAttributes<any>, WithTranslation { interface IAppProps extends React.ClassAttributes<any>, WithTranslation {
apiUrl: string; config: Config;
filter: object;
getCountryCodes: (lang: string) => Promise<Record<string, string>>; getCountryCodes: (lang: string) => Promise<Record<string, string>>;
} }
...@@ -29,8 +28,9 @@ class App extends React.Component<IAppProps, any> { ...@@ -29,8 +28,9 @@ class App extends React.Component<IAppProps, any> {
} }
public render() { public render() {
const { apiUrl } = this.props; const { config } = this.props;
console.log('Using filter', this.props.filter); const { apiUrl, request } = config;
return ( return (
<> <>
<Router> <Router>
...@@ -39,9 +39,9 @@ class App extends React.Component<IAppProps, any> { ...@@ -39,9 +39,9 @@ class App extends React.Component<IAppProps, any> {
<Route path="/a/:uuid" exact component={ AccessionDetails } /> <Route path="/a/:uuid" exact component={ AccessionDetails } />
<Route path="/" exact component={ AccessionList }/> <Route path="/" exact component={ AccessionList }/>
<Route path="/api-info" exact component={ ApiInfoPage }/> <Route path="/api-info" exact component={ ApiInfoPage }/>
<Route path="/cart" exact component={ CartPage }/> { request.enabled && <Route path="/cart/" exact component={ CartPage }/> }
<Route path="/overview" exact component={ OverviewPage }/> <Route path="/overview" exact component={ OverviewPage }/>
<Route path="/request" exact component={ RequestPage }/> { request.enabled && <Route path="/request" exact component={ RequestPage }/> }
<Route component={ NotFound }/> <Route component={ NotFound }/>
</Switch> </Switch>
...@@ -57,8 +57,7 @@ class App extends React.Component<IAppProps, any> { ...@@ -57,8 +57,7 @@ class App extends React.Component<IAppProps, any> {
} }
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
apiUrl: state.appConfig.config.apiUrl, config: state.appConfig.config,
filter: state.appConfig.config.filter,
}); });
const mapDispatchToProps = (dispatch) => bindActionCreators({ const mapDispatchToProps = (dispatch) => bindActionCreators({
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment