Commit 7d1f2cc5 authored by Oleksii Savran's avatar Oleksii Savran Committed by Matija Obreza
Browse files

Request details: Tabs

parent ecf2a0f6
import * as React from 'react';
interface IProps {
children: JSX.Element;
children: React.ReactNode;
index: any;
value: any;
};
......
......@@ -9,7 +9,6 @@ import { ApiCall } from '@gringlobal/client/model/common';
import { getOrderRequestAction, listOrderRequestItemsAction, listOrderRequestActionsAction } from 'request/action/public';
import { RequestService } from '@gringlobal/client/service';
import OrderRequest from '@gringlobal/client/model/gringlobal/OrderRequest';
import ContentHeader from '@gringlobal/client/ui/common/heading/ContentHeader';
import Loading from '@gringlobal/client/ui/common/Loading';
import { Card, CardContent, CardHeader, CardActions, Button } from '@material-ui/core';
import { Properties, PropertiesItem } from '@gringlobal/client/ui/common/Properties';
......@@ -27,6 +26,10 @@ import ButtonBar from '@gringlobal/client/ui/common/button/ButtonBar';
import PageTitle from '@gringlobal/client/ui/common/PageTitle';
import OrderRequestAction from '@gringlobal/client/model/gringlobal/OrderRequestAction';
import { BasicRequestActionsTable as RequestActionsTable } from 'request/ui/c/RequestActionsTable';
import Tab from '@material-ui/core/Tab';
import HeaderTabs from '@gringlobal/client/ui/common/tabs/HeaderTabs';
import TabPanel from '@gringlobal/client/ui/common/tabs/TabPanel';
import SlotLayout from '@gringlobal/client/ui/common/layout/SlotLayout';
const OrderRequestItemTableConfig = new TableConfiguration({
defaultColumns: [
......@@ -65,6 +68,7 @@ class OrderRequestDetailsPage extends React.Component<IDetailsPageProps> {
public state = {
selectedItems: [],
selectedTab: 'request',
}
public constructor(props) {
......@@ -135,9 +139,15 @@ class OrderRequestDetailsPage extends React.Component<IDetailsPageProps> {
});
}
private selectTab = (event, newValue) => {
this.setState({
selectedTab: newValue,
});
};
public render(): React.ReactNode {
const { requestCall, requestItemsCall, requestActionsCall, t } = this.props;
const { selectedItems } = this.state;
const { selectedItems, selectedTab } = this.state;
const columns = OrderRequestItemTableConfig.getColumns(requestItemsCall && requestItemsCall.data && requestItemsCall.data.content ? requestItemsCall.data.content[0] : null);
if (!requestCall) {
return null;
......@@ -148,93 +158,108 @@ class OrderRequestDetailsPage extends React.Component<IDetailsPageProps> {
return (
<>
<PageTitle title={ request ? request.localNumber ? request.localNumber : `${t('request.public.p.details.title')} ${request.id}` : t('request.public.p.details.title') }/>
<ContentHeader
title={
request ? <>
{ request.localNumber ? request.localNumber : request.id }
</> : t('request.public.p.details.title')
}
/>
{ loading && <Loading/> }
{ request &&
<>
<Card>
<CardContent>
<Properties>
<PropertiesItem title={ t('client:model.OrderRequest.orderTypeCode') }>
<CodeValueDisplay codeGroup={ OrderRequest.CodeValues.orderTypeCode } value={ request.orderTypeCode } />
</PropertiesItem>
{ [ 'localNumber', 'orderObtainedVia', 'intendedUseNote', 'specialInstruction', 'note' ].map((property) => (
<PropertiesItem key={ property } title={ t(`client:model.OrderRequest.${property}`, `client:model._.${property}`) }>
{ request[property] }
</PropertiesItem>
)) }
<PropertiesItem title={ t('client:model.OrderRequest.intendedUseCode') }>
<CodeValueDisplay codeGroup={ OrderRequest.CodeValues.intendedUseCode } value={ request.intendedUseCode } />
</PropertiesItem>
{ request.ownedDate &&
<PropertiesItem title={ t('client:model._.ownedDate') }>
<PrettyDate value={ request.ownedDate } />
</PropertiesItem>
}
{ request.ownedBy &&
<PropertiesItem title={ t('client:model._.ownedBy') }>
<Link to={ `/cooperator/${ request.ownedBy.id }` }>
{ request.ownedBy.firstName }
</Link>
</PropertiesItem>
}
</Properties>
</CardContent>
<CardActions>
<ButtonBar>
<Link to={ `/request/${request.id}/add` }><Button variant="contained" color="primary">{ t('Add material...') }</Button></Link>
<Button variant="contained" color="primary" onClick={ this.verifyItemList }>{ t('Verify item list') }</Button>
<Button variant="contained" color="secondary">Edit</Button>
<Button variant="outlined" color="secondary">Remove</Button>
<Button variant="text" color="secondary">Do something</Button>
</ButtonBar>
</CardActions>
</Card>
<Card>
<CardHeader title={ t('request.public.p.details.items') } />
{ requestItemsCall && requestItemsCall.data && requestItemsCall.data.totalElements > 0 &&
<CardActions>
<ButtonBar>
<Button onClick={ this.toggleSelectAll }>{ t('Select all') }</Button>
{ Object.keys(OrderRequestItemStatus).map((itemStatus) => (
<Button
key={ itemStatus } variant="contained" color="secondary"
disabled={ selectedItems.length === 0 }
onClick={ this.updateItemStatus(itemStatus as OrderRequestItemStatus) }
>
<CodeValueDisplay value={ itemStatus } codeGroup={ OrderRequestItem.CodeValue.statusCode } />
</Button>
)) }
</ButtonBar>
</CardActions>
<HeaderTabs
value={ selectedTab }
textColor="primary"
onChange={ this.selectTab }
variant="scrollable"
scrollButtons="auto"
aria-label="Request tabs"
>
<Tab value="request" label={ t('request.public.p.details.title') } />
<Tab value="actions" label={ t('request.public.p.details.actions') } />
</HeaderTabs>
<TabPanel value={ selectedTab } index="request">
{ loading && <Loading/> }
{ request &&
<SlotLayout
fixedContent={
<>
<Card>
<CardHeader title={
request
? <>{ request.localNumber ? request.localNumber : request.id }</>
: t('request.public.p.details.title')
}/>
<CardContent>
<Properties>
<PropertiesItem title={ t('client:model.OrderRequest.orderTypeCode') }>
<CodeValueDisplay codeGroup={ OrderRequest.CodeValues.orderTypeCode } value={ request.orderTypeCode } />
</PropertiesItem>
{ [ 'localNumber', 'orderObtainedVia', 'intendedUseNote', 'specialInstruction', 'note' ].map((property) => (
<PropertiesItem key={ property } title={ t(`client:model.OrderRequest.${property}`, `client:model._.${property}`) }>
{ request[property] }
</PropertiesItem>
)) }
<PropertiesItem title={ t('client:model.OrderRequest.intendedUseCode') }>
<CodeValueDisplay codeGroup={ OrderRequest.CodeValues.intendedUseCode } value={ request.intendedUseCode } />
</PropertiesItem>
{ request.ownedDate &&
<PropertiesItem title={ t('client:model._.ownedDate') }>
<PrettyDate value={ request.ownedDate } />
</PropertiesItem>
}
{ request.ownedBy &&
<PropertiesItem title={ t('client:model._.ownedBy') }>
<Link to={ `/cooperator/${ request.ownedBy.id }` }>
{ request.ownedBy.firstName }
</Link>
</PropertiesItem>
}
</Properties>
</CardContent>
<CardActions>
<ButtonBar>
<Link to={ `/request/${request.id}/add` }><Button variant="contained" color="primary">{ t('Add material...') }</Button></Link>
<Button variant="contained" color="primary" onClick={ this.verifyItemList }>{ t('Verify item list') }</Button>
<Button variant="contained" color="secondary">Edit</Button>
<Button variant="outlined" color="secondary">Remove</Button>
<Button variant="text" color="secondary">Do something</Button>
</ButtonBar>
</CardActions>
</Card>
</>
}
<Table
noWrap
tableKey="request-items-list"
type={ 'OrderRequestItem' }
columns={ columns }
data={ requestItemsCall && requestItemsCall.data && requestItemsCall.data.content }
tableConfig={ OrderRequestItemTableConfig }
total={ requestItemsCall && requestItemsCall.data && requestItemsCall.data.content && requestItemsCall.data.totalElements }
selectedItems={ selectedItems }
// sort={ requestItemsCall && requestItemsCall.data && requestItemsCall.data.sort }
// onSortChange={ onSortChange }
onRowToggled={ this.rowToggled }
/>
</Card>
<Card>
<CardHeader title={ t('request.public.p.details.actions') } />
<RequestActionsTable actions={ requestActionsCall.data && requestActionsCall.data.content }/>
</Card>
</>
}
>
<Card>
<CardHeader title={ t('request.public.p.details.items') } />
{ requestItemsCall && requestItemsCall.data && requestItemsCall.data.totalElements > 0 &&
<CardActions>
<ButtonBar>
<Button onClick={ this.toggleSelectAll }>{ t('Select all') }</Button>
{ Object.keys(OrderRequestItemStatus).map((itemStatus) => (
<Button
key={ itemStatus } variant="contained" color="secondary"
disabled={ selectedItems.length === 0 }
onClick={ this.updateItemStatus(itemStatus as OrderRequestItemStatus) }
>
<CodeValueDisplay value={ itemStatus } codeGroup={ OrderRequestItem.CodeValue.statusCode } />
</Button>
)) }
</ButtonBar>
</CardActions>
}
<Table
noWrap
tableKey="request-items-list"
type={ 'OrderRequestItem' }
columns={ columns }
data={ requestItemsCall && requestItemsCall.data && requestItemsCall.data.content }
tableConfig={ OrderRequestItemTableConfig }
total={ requestItemsCall && requestItemsCall.data && requestItemsCall.data.content && requestItemsCall.data.totalElements }
selectedItems={ selectedItems }
// sort={ requestItemsCall && requestItemsCall.data && requestItemsCall.data.sort }
// onSortChange={ onSortChange }
onRowToggled={ this.rowToggled }
/>
</Card>
</SlotLayout>
}
</TabPanel>
<TabPanel value={ selectedTab } index="actions">
<RequestActionsTable actions={ requestActionsCall.data && requestActionsCall.data.content }/>
</TabPanel>
</>
);
}
......
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