Commit 18750624 authored by Nicolas Frandeboeuf's avatar Nicolas Frandeboeuf
Browse files

Display readonly dashboard with alert when offline

parent d453c23c
Pipeline #341322 passed with stage
in 4 minutes and 29 seconds
import React from 'react';
import { translate as $t } from '../../helpers';
import Dashboard from './index';
export default () => (
<div id="content" className="offline">
<div>
<p className="alerts warning">{$t('client.general.offline_warning')}</p>
</div>
<Dashboard />
</div>
);
......@@ -15,6 +15,7 @@ const AccountListItem = connect(
return {
account: get.accountById(state, props.accountId),
isSmallScreen: get.isSmallScreen(state),
isOffline: get.isOffline(state),
};
},
dispatch => {
......@@ -37,19 +38,29 @@ const AccountListItem = connect(
let handleHideMenu = isSmallScreen ? hideMenu : null;
let content = (
<React.Fragment>
<span>{displayLabel(account)}</span>
&ensp;
<ColoredAmount amount={balance} formatCurrency={formatCurrency} />
<DisplayIf condition={outstandingSum !== 0}>
&ensp;
{`(${$t('client.menu.outstanding_sum')}: `}
<ColoredAmount amount={outstandingSum} formatCurrency={formatCurrency} />
{')'}
</DisplayIf>
</React.Fragment>
);
return (
<li key={`account-details-account-list-item-${accountId}`} onClick={handleHideMenu}>
<NavLink to={newPathname} activeClassName="active">
<span>{displayLabel(account)}</span>
&ensp;
<ColoredAmount amount={balance} formatCurrency={formatCurrency} />
<DisplayIf condition={outstandingSum !== 0}>
&ensp;
{`(${$t('client.menu.outstanding_sum')}: `}
<ColoredAmount amount={outstandingSum} formatCurrency={formatCurrency} />
{')'}
</DisplayIf>
</NavLink>
<DisplayIf condition={props.isOffline}>{content}</DisplayIf>
<DisplayIf condition={!props.isOffline}>
<NavLink to={newPathname} activeClassName="active">
{content}
</NavLink>
</DisplayIf>
</li>
);
});
......
......@@ -348,6 +348,10 @@ main nav .sidebar-section-list li.duplicates > a > span:first-of-type {
margin: auto;
}
#content.offline > div {
max-width: 1200px;
}
#content > div:first-child > h3 {
margin-top: 0;
}
......
......@@ -32,6 +32,7 @@ import Accesses from './components/accesses';
import Onboarding from './components/onboarding';
import Dashboard from './components/dashboard';
import Offline from './components/dashboard/offline';
import Menu from './components/menu';
import DropdownMenu from './components/menu/dropdown';
......@@ -211,8 +212,13 @@ const DisplayOrRedirectToInitialScreen = connect(state => {
return {
hasAccess: get.accessIds(state).length > 0,
isWeboobInstalled: get.isWeboobInstalled(state),
isOffline: get.isOffline(state),
};
})(props => {
if (props.isOffline) {
return <Offline />;
}
let isWeboobReadmeDisplayed = useRouteMatch({ path: URL.weboobReadme.pattern });
let isOnboardingDisplayed = useRouteMatch({ path: URL.onboarding.pattern });
......
......@@ -312,6 +312,10 @@ export const get = {
},
// Bool
isOffline(state) {
return Ui.isOffline(state.ui);
},
isWeboobInstalled(state) {
assertDefined(state);
return this.boolInstanceProperty(state, WEBOOB_INSTALLED);
......@@ -703,7 +707,7 @@ export function init() {
state.types = OperationType.initialState();
// The UI must be computed at the end.
state.ui = Ui.initialState(get.boolSetting(state, DEMO_MODE));
state.ui = Ui.initialState(get.boolSetting(state, DEMO_MODE), world.isOffline === true);
return new Promise(accept => {
accept(state);
......
......@@ -293,6 +293,7 @@ const uiState = u({
sendingTestEmail: false,
sendingTestNotification: false,
isDemoMode: false,
isOffline: false,
});
export const reducer = createReducerFromMap(uiState, reducers);
......@@ -310,7 +311,7 @@ function initialSearch() {
};
}
export function initialState(isDemoEnabled) {
export function initialState(isDemoEnabled, offline) {
let search = initialSearch();
return u(
{
......@@ -329,6 +330,7 @@ export function initialState(isDemoEnabled) {
},
isMenuHidden: computeIsSmallScreen(),
isDarkMode: false,
isOffline: offline,
},
{}
);
......@@ -395,3 +397,7 @@ export function isDemoMode(state) {
export function isDarkMode(state) {
return state.isDarkMode;
}
export function isOffline(state) {
return state.isOffline;
}
......@@ -183,7 +183,8 @@
"see_developers_console": "Please refer to the developers' console for more information.",
"loading_assets": "Please wait while Kresus is loading the assets…",
"add_custom_label": "Add a custom label",
"no_value_found": "No matching value found"
"no_value_found": "No matching value found",
"offline_warning": "Your internet connection seems down. What you see below are the results from your last successful visit."
},
"menu": {
"about": "About",
......
......@@ -183,7 +183,8 @@
"see_developers_console": "Veuillez vous référer à la console développeurs pour plus d'informations.",
"loading_assets": "Veuillez patienter pendant que Kresus charge l'interface…",
"add_custom_label": "Ajouter un libellé personnalisé",
"no_value_found": "Aucune valeur de ce type trouvée"
"no_value_found": "Aucune valeur de ce type trouvée",
"offline_warning": "Votre connexion internet semble être coupée. Ce qui est affiché ci-dessous est le résultat de votre dernière visite."
},
"menu": {
"about": "À propos",
......
Supports Markdown
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