Commit dedcbef3 authored by Oleksii Savran's avatar Oleksii Savran
Browse files

Merge branch 'ui-updates' into 'master'

Ui updates

See merge request !22
parents 46aa25ae 5f9c0696
......@@ -29,7 +29,7 @@ Add a container `<div>` to your HTML page and initialize the Genesys UI with the
apiUrl: 'https://api.sandbox.genesys-pgr.org', // Genesys API server
clientId: 'clientid@genesys', // Client ID
clientKey: 'changeme', // Client key
title: 'Genesys |', // HTML title prefix
title: 'Genesys:', // HTML title prefix
filter: {
institute: { code: [ 'ETH013' ] }, // Genesys data filter
},
......@@ -62,12 +62,12 @@ to *@geneesys-pgr/ui-embedded*:
|Property|Default|Description|
|---|---|---|
|`apiUrl` | *http://localhost:8080* | Production Genesys API is at https://api.genesys-pgr.org<br />Sandbox API is at https://api.sandbox.genesys-pgr.org |
|`apiUrl` | *https://api.sandbox.genesys-pgr.org* | Production Genesys API is at https://api.genesys-pgr.org<br />Sandbox API is at https://api.sandbox.genesys-pgr.org |
|`clientId` | **Required** | Please contact helpdesk@genesys-pgr.org to obtain API keys for use in your environment.<br />The API keys are limited to your website and will not work on a different domain. |
|`clientSecret` | **Required** | Ditto. |
|`filter` |`undefined` | Allows for narrowing the scope of requested accession data from Genesys API. <br />To filter for accessions from your genebank, use: `{ institute: { code: ['XXX000'] } }` with the FAO WIEWS Code of your genebank. Default `undefined` value will return all accessions. |
|`language`|`'en'`| Specify the language of the user interface.<br />Fully supported: `en`<br />Partially supported: `es` |
|`title`|`'Genesys |'`| HTML title prefix |
|`language`|*en*| Specify the language of the user interface.<br />Fully supported: `en`<br />Partially supported: `es` |
|`title`| *Genesys:* | HTML page title prefix |
| `accession` | `{ ... }` | See *Accession* configuration options |
| `shoppingCart` | `{ ... }` | See *Shopping cart* configuration options |
......
......@@ -10,6 +10,7 @@ const genesysConfig: Config = {
apiUrl: 'http://localhost:8080',
clientId: 'defaultclient@localhost',
clientKey: 'changeme',
title: 'Testing:',
filter: { institute: { code: [ 'COL003', 'BEL084', 'ETH013' ] } },
language: queryLang,
accession: {
......
......@@ -234,7 +234,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
) }
<td>{ a.crop && a.crop.name || a.cropName }</td>
<td><Link to={ `/a/${a.uuid}` }>{ a.accessionNumber }</Link></td>
<td>{ a.accessionName }</td>
<td>{ a.accessionName && <b>{ a.accessionName }</b> }</td>
<td><span dangerouslySetInnerHTML={ { __html: a.taxonomy.taxonNameHtml } } /></td>
<td>{ a.countryOfOrigin && (countryCodes && countryCodes[a.countryOfOrigin.code3] || a.countryOfOrigin.name) }</td>
<td>{ a.sampStat && t(`accession.sampleStatus.${a.sampStat}`) }</td>
......
......@@ -9,11 +9,11 @@ export class Config {
public filter?: Record<string, any>;
// module config
public language?: string = 'en';
public language: string;
public accession?: AccessionConfig;
public shoppingCart?: BaseFeatureConfig;
public recaptchaSiteKey?: string;
public title?: string = 'Genesys |'
public title?: string;
public constructor(config: Config) {
this.apiUrl = config.apiUrl || defaultConfig.apiUrl;
......@@ -45,7 +45,7 @@ export const defaultConfig: Partial<Config> = {
apiUrl: 'https://api.sandbox.genesys-pgr.org',
filter: {},
language: 'en',
title: 'Genesys | ',
title: 'Genesys:',
accession: {
enabled: true,
pdci: true,
......
......@@ -15,6 +15,7 @@ import { Config } from 'config/config';
import rootReducer from 'core/reducer';
import { setConfig } from 'core/actions/appConfig';
import OverviewPage from 'accession/OverviewPage';
import PoweredBy from 'ui/common/PoweredBy';
declare const window: Window & { devToolsExtension: any, __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any };
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
......@@ -66,6 +67,7 @@ export function showGenesysUI(holdingNode: HTMLElement, config: Config) {
<HelmetProvider>
<App/>
</HelmetProvider>
<PoweredBy />
</Provider>,
holdingNode,
);
......@@ -90,7 +92,10 @@ export function showOverview(holdingNode: HTMLElement, config: Config) {
ReactDOM.render(
<Provider store={ store }>
<OverviewPage />
<HelmetProvider>
<OverviewPage />
</HelmetProvider>
<PoweredBy />
</Provider>,
holdingNode,
);
......
......@@ -163,7 +163,7 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> {
/>
</td>
<td><Link to={ `/a/${a.uuid}` }>{ a.accessionNumber }</Link></td>
<td>{ a.accessionName }</td>
<td>{ a.accessionName && <b>{ a.accessionName }</b> }</td>
<td><span dangerouslySetInnerHTML={ { __html: a.taxonomy.taxonNameHtml } } /></td>
<td>{ a.countryOfOrigin && (countryCodes && countryCodes[a.countryOfOrigin.code3] || a.countryOfOrigin.name) }</td>
<td>{ a.sampStat && t(`accession.sampleStatus.${a.sampStat}`) }</td>
......
import * as React from 'react';
import { WithTranslation, withTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet-async';
import { stripHtml } from '@genesys/client/utilities';
import { connect } from 'react-redux';
import { WithConfig } from 'config/config';
interface IPageTitle extends React.ClassAttributes<any>, WithTranslation {
interface IPageTitle extends React.ClassAttributes<any> {
title: string;
description?: string;
}
class PageTitle extends React.Component<IPageTitle & WithConfig, any> {
public constructor(props, context) {
super(props, context);
}
public render() {
const { appConfig: { title: appTitle }, title, description, t } = this.props;
const { appConfig: { title: appTitle }, title, description } = this.props;
return (
<Helmet>
<title>{ t(stripHtml( appTitle ? (appTitle + ' ' + title).trim() : title)) }</title>
{ description && <meta name="description" content={ t(description) } /> }
<title>{ stripHtml( appTitle ? (appTitle + ' ' + title).trim() : title) }</title>
{ description && <meta name="description" content={ stripHtml(description) } /> }
</Helmet>
);
}
......@@ -31,4 +27,4 @@ const mapStateToProps = (state) => ({
appConfig: state.appConfig.config,
});
export default connect(mapStateToProps)(withTranslation()(PageTitle));
export default connect(mapStateToProps)(PageTitle);
import { WithConfig } from 'config/config';
import * as React from 'react';
import { connect } from 'react-redux';
const PoweredBy = ({ appConfig }: WithConfig) => (
<div style={ { marginTop: 20, textAlign: 'center', fontSize: '10pt', display: 'block', visibility: 'visible' } }>
<img style={ { height: '1.2em', verticalAlign: 'text-bottom', display: 'inline', visibility: 'visible' } } src={ `${appConfig.apiUrl}/html/1/images/GENESYS-ICON.svg` } alt="Genesys PGR" />
<> Powered by <a target="_blank" style={ { display: 'inline', visibility: 'visible' } } title="Data sourced from Genesys" href={ appConfig.apiUrl }>Genesys PGR</a></>
</div>
);
const mapStateToProps = (state) => ({
appConfig: state.appConfig.config,
});
export default connect(mapStateToProps, null)(PoweredBy);
......@@ -27,7 +27,7 @@ class App extends React.Component<IAppProps & WithTranslation & WithConfig, any>
}
public render() {
const { appConfig: { apiUrl, shoppingCart } } = this.props;
const { appConfig: { shoppingCart } } = this.props;
return (
<>
......@@ -42,11 +42,6 @@ class App extends React.Component<IAppProps & WithTranslation & WithConfig, any>
{ shoppingCart.enabled && <Route path="/request" exact component={ RequestPage }/> }
<Route component={ NotFound }/>
</Switch>
<div style={ { marginTop: 20, textAlign: 'center', fontSize: '10pt' } }>
<img style={ { height: '1.2em', verticalAlign: 'text-bottom' } } src={ `${apiUrl}/html/1/images/GENESYS-ICON.svg` } alt="Genesys PGR" />
<> Powered by <a target="_blank" title="Data sourced from Genesys" href={ apiUrl }>Genesys PGR</a></>
</div>
</div>
</Router>
</>
......
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