intervention-pages
Version:
192 lines (187 loc) • 7.38 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import '@polymer/paper-button/paper-button';
import './common/layout/page-content-header/page-content-header';
import './common/layout/etools-tabs';
// eslint-disable-next-line max-len
import './common/layout/status/etools-status';
import { customElement, LitElement, html, property, css } from 'lit-element';
import cloneDeep from 'lodash-es/cloneDeep';
import get from 'lodash-es/get';
import { setStore, getStore } from './utils/redux-store-access';
import { currentPage, currentSubpage } from './common/selectors';
import { elevationStyles } from './common/styles/elevation-styles';
import { getIntervention } from './common/actions';
import { sharedStyles } from './common/styles/shared-styles-lit';
import { isJsonStrMatch } from './utils/utils';
import { pageContentHeaderSlottedStyles } from './common/layout/page-content-header/page-content-header-slotted-styles';
/**
* @LitElement
* @customElement
*/
let InterventionTabs = class InterventionTabs extends LitElement {
constructor() {
super(...arguments);
this.pageTabs = [
{
tab: 'overview',
tabLabel: 'Overview',
hidden: false
},
{
tab: 'details',
tabLabel: 'Details',
hidden: false
},
{
tab: 'results',
tabLabel: 'Results',
hidden: false
},
{
tab: 'timing',
tabLabel: 'Timing',
hidden: false
},
{
tab: 'management',
tabLabel: 'Management',
hidden: false
},
{
tab: 'attachments',
tabLabel: 'Attachments',
hidden: false
}
];
this.activeTab = 'details';
}
static get styles() {
return [
elevationStyles,
pageContentHeaderSlottedStyles,
css `
.page-content {
margin: 24px;
}
(max-width: 576px) {
.page-content {
margin: 5px;
}
}
`
];
}
render() {
// main template
// language=HTML
return html `
<style>
${sharedStyles} etools-status {
justify-content: center;
}
</style>
<etools-status></etools-status>
<page-content-header with-tabs-visible>
<h1 slot="page-title">Title here</h1>
<div slot="title-row-actions" class="content-header-actions">
<paper-button raised>Action 1</paper-button>
<paper-button raised>Action 2</paper-button>
</div>
<etools-tabs
slot="tabs"
.tabs="${this.pageTabs}"
.activeTab="${this.activeTab}"
-select="${this.handleTabChange}"
></etools-tabs>
</page-content-header>
<div class="page-content">
<intervention-details ?hidden="${!this.isActiveTab(this.activeTab, 'details')}"> </intervention-details>
<intervention-overview ?hidden="${!this.isActiveTab(this.activeTab, 'overview')}"> </intervention-overview>
<intervention-results ?hidden="${!this.isActiveTab(this.activeTab, 'results')}"> </intervention-results>
<intervention-timing ?hidden="${!this.isActiveTab(this.activeTab, 'timing')}"> </intervention-timing>
<intervention-management ?hidden="${!this.isActiveTab(this.activeTab, 'management')}">
</intervention-management>
<intervention-attachments ?hidden="${!this.isActiveTab(this.activeTab, 'attachments')}">
</intervention-attachments>
</div>
`;
}
get store() {
return this._store;
}
set store(parentAppReduxStore) {
setStore(parentAppReduxStore);
this._storeUnsubscribe = getStore().subscribe(() => this.stateChanged(getStore().getState()));
this.stateChanged(getStore().getState());
this._store = parentAppReduxStore;
}
connectedCallback() {
super.connectedCallback();
}
disconnectedCallback() {
this._storeUnsubscribe();
super.disconnectedCallback();
}
isActiveTab(tab, expectedTab) {
return tab === expectedTab;
}
stateChanged(state) {
if (currentPage(state) === 'interventions' && currentSubpage(state) !== 'list') {
this.activeTab = currentSubpage(state);
const currentInterventionId = get(state, 'app.routeDetails.params.interventionId');
const currentIntervention = get(state, 'interventions.current');
if (currentInterventionId !== String(get(this.intervention, 'id'))) {
if (currentIntervention) {
if (!isJsonStrMatch(this.intervention, currentIntervention)) {
this.intervention = cloneDeep(currentIntervention);
}
}
if (!isJsonStrMatch(state.app.routeDetails, this._routeDetails)) {
this._routeDetails = cloneDeep(state.app.routeDetails);
getStore().dispatch(getIntervention(currentInterventionId));
}
}
}
}
handleTabChange(e) {
const newTabName = e.detail.item.getAttribute('name');
if (newTabName === this.activeTab) {
return;
}
this.tabChanged(newTabName, this.activeTab);
}
tabChanged(newTabName, oldTabName) {
if (oldTabName === undefined) {
// page load, tab init, component is gonna be imported in loadPageComponents action
return;
}
if (newTabName !== oldTabName) {
const newPath = `interventions/${this.intervention.id}/${newTabName}`;
history.pushState(window.history.state, '', newPath);
// Don't know why I have to specifically trigger popstate,
// history.pushState should do that by default (?)
window.dispatchEvent(new CustomEvent('popstate'));
}
}
};
__decorate([
property({ type: Array })
], InterventionTabs.prototype, "pageTabs", void 0);
__decorate([
property({ type: String })
], InterventionTabs.prototype, "activeTab", void 0);
__decorate([
property({ type: Object })
], InterventionTabs.prototype, "intervention", void 0);
__decorate([
property({ type: Object })
], InterventionTabs.prototype, "store", null);
InterventionTabs = __decorate([
customElement('intervention-tabs')
], InterventionTabs);
export { InterventionTabs };