Skip to content
This repository has been archived by the owner on Dec 13, 2020. It is now read-only.

Commit

Permalink
#630 Included gridview
Browse files Browse the repository at this point in the history
  • Loading branch information
@damianprzygodzki
damianprzygodzki committed Apr 14, 2017
1 parent 9c501d3 commit 81dc72c
Show file tree
Hide file tree
Showing 6 changed files with 137 additions and 72 deletions.
7 changes: 7 additions & 0 deletions src/assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -401,6 +401,13 @@ body {
min-height: 100%;
}

.document-list-included {
flex: 1;
margin-left: .5rem;
overflow: auto;
overflow-x: hidden;
}

.document-list-header {
display: flex;
justify-content: space-between;
Expand Down
12 changes: 12 additions & 0 deletions src/assets/css/table.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,18 @@
text-align: center;
}

.page-link-compressed{
border:0;
background-color: transparent;
padding: .1rem .3rem;
}

.page-item.active .page-link-compressed {
background-color: transparent;
font-weight: bold;
color: $brand-font-color;
}

th {
font-weight: 500;
position: relative;
Expand Down
23 changes: 19 additions & 4 deletions src/components/app/DocumentList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -363,15 +363,21 @@ class DocumentList extends Component {

const {
windowType, open, closeOverlays, selected, inBackground,
fetchQuickActionsOnInit, isModal, processStatus, readonly
fetchQuickActionsOnInit, isModal, processStatus, readonly,
includedView, children, isIncluded
} = this.props;

const selectionValid = this.doesSelectionExist(selected);

if(layout && data) {
return (
<div className="document-list-wrapper">
{!readonly && <div
<div
className={
'document-list-wrapper ' +
(isIncluded ? 'document-list-included ' : '')
}
>
{(!readonly && !isIncluded) && <div
className="panel panel-primary panel-spaced panel-inline document-list-header"
>
<div>
Expand Down Expand Up @@ -420,6 +426,7 @@ class DocumentList extends Component {
keyProperty="id"
onDoubleClick={(id) => this.redirectToDocument(id)}
isModal={isModal}
isIncluded={isIncluded}
size={data.size}
pageLength={this.pageLength}
handleChangePage={this.handleChangePage}
Expand All @@ -437,7 +444,7 @@ class DocumentList extends Component {
queryLimitHit={data.queryLimitHit}
doesSelectionExist={this.doesSelectionExist}
>
{layout.supportAttributes &&
{layout.supportAttributes && !isIncluded &&
<DataLayoutWrapper
className="table-flex-wrapper attributes-selector js-not-unselect"
entity="documentView"
Expand All @@ -458,6 +465,14 @@ class DocumentList extends Component {
/>
</DataLayoutWrapper>
}
{!layout.supportIncludedView && includedView &&
includedView.windowType && includedView.viewId &&
<div
className="table-flex-wrapper document-list-included js-not-unselect"
>
{children}
</div>
}
</Table>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/components/table/Table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -703,7 +703,7 @@ class Table extends Component {
cols, type, docId, rowData, tabid, readonly, size, handleChangePage,
pageLength, page, mainTable, updateDocList, sort, orderBy,
toggleFullScreen, fullScreen, tabIndex, indentSupported, isModal,
queryLimitHit, supportQuickInput, tabInfo
queryLimitHit, supportQuickInput, tabInfo, isIncluded
} = this.props;

const {
Expand Down Expand Up @@ -824,6 +824,7 @@ class Table extends Component {
orderBy={orderBy}
deselect={this.deselectAllProducts}
queryLimitHit={queryLimitHit}
compressed={isIncluded}
/>
</div>
</div>
Expand Down
154 changes: 89 additions & 65 deletions src/components/table/TablePagination.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,9 @@ class TablePagination extends Component {

handleValue = (e) => {
e.preventDefault();
if(e.target.value){
this.setState({
value: e.target.value
})
} else {
this.setState({
value: ''
})
}
this.setState({
value: e.target.value ? e.target.value : ''
})
}

handleSubmit = (e, value, pages) => {
Expand All @@ -31,10 +25,8 @@ class TablePagination extends Component {
e.preventDefault();

if(value <= pages && value > 0){

handleChangePage(Number(value));
deselect();

this.setState({
value: '',
secondDotsState: false,
Expand Down Expand Up @@ -85,37 +77,48 @@ class TablePagination extends Component {
}

renderFirstPartPagination = (pagination, pages) => {
const {handleChangePage, deselect} = this.props;
const {handleChangePage, deselect, compressed} = this.props;
const {firstDotsState, value} = this.state;
pagination.push(
<li
className="page-item"
key={1}
onClick={() => {handleChangePage(1); deselect()} }
>
<a className="page-link">{1}</a>
<a
className={
'page-link ' +
(compressed ? 'page-link-compressed ' : '')
}
>{1}</a>
</li>
);
pagination.push(
<li className="page-item page-dots" key={0}>
{ firstDotsState && this.renderGoToPage(pages, value) }
<a
className="page-link"
className={
'page-link ' +
(compressed ? 'page-link-compressed ' : '')
}
onClick={() => this.handleFirstDotsState()}
>{'...'}</a>
</li>
);
}

renderLastPartPagination = (pagination, pages) => {
const {handleChangePage, deselect} = this.props;
const {handleChangePage, deselect, compressed} = this.props;
const {secondDotsState, value} = this.state;

pagination.push(
<li className="page-item page-dots" key={99990}>
{ secondDotsState && this.renderGoToPage(pages, value) }
<a
className="page-link"
className={
'page-link ' +
(compressed ? 'page-link-compressed ' : '')
}
onClick={() => this.handleSecondDotsState()}
>{'...'}</a>
</li>
Expand All @@ -126,13 +129,18 @@ class TablePagination extends Component {
key={9999}
onClick={() => {handleChangePage(pages); deselect()} }
>
<a className="page-link">{pages}</a>
<a
className={
'page-link ' +
(compressed ? 'page-link-compressed ' : '')
}
>{pages}</a>
</li>
);
}

renderPaginationContent = (pagination, page, start, end) => {
const {handleChangePage, deselect} = this.props;
const {handleChangePage, deselect, compressed} = this.props;
for(let i = start; i <= end; i++){
pagination.push(
<li
Expand All @@ -143,16 +151,73 @@ class TablePagination extends Component {
key={i}
onClick={() => {handleChangePage(i); deselect()} }
>
<a className="page-link">{i}</a>
<a
className={
'page-link ' +
(compressed ? 'page-link-compressed ' : '')
}>{i}</a>
</li>
);
}
}

renderTotalItems = () => {
const {size, queryLimitHit} = this.props;
return (
<div className="hidden-sm-down">
<div>
Total items {size}
{queryLimitHit &&
<span className="text-danger"> (limited)
</span>
}
</div>
</div>
)
}

renderSelectAll = () => {
const {selected, handleSelectAll} = this.props;
return (
<div className="hidden-sm-down">
<div>{selected.length > 0 ? selected.length +
' items selected' : 'No items selected'
}
</div>
<div
className="pagination-link pointer"
onClick={handleSelectAll}
>
Select all on this page
</div>
</div>
)
}

renderArrow = (left) => {
const {compressed} = this.props;
return (
<li className="page-item">
<a
className={
'page-link ' +
(compressed ? 'page-link-compressed ' : '')
}
onClick={() => {
handleChangePage(left ? 'down' : 'up');
deselect();
}}
>
<span>{left ? '«' : '»'}</span>
</a>
</li>
)
}

render() {
const {
size, pageLength, selected, handleSelectAll, handleChangePage, page,
deselect, queryLimitHit
deselect, queryLimitHit, compressed
} = this.props;
const pages = size ? Math.ceil(size / pageLength) : 0;

Expand Down Expand Up @@ -181,57 +246,16 @@ class TablePagination extends Component {
return (
<div className="pagination-wrapper">
<div className="pagination-row">
<div className="hidden-sm-down">
<div>{selected.length > 0 ? selected.length +
' items selected' : 'No items selected'
}
</div>
<div
className="pagination-link pointer"
onClick={handleSelectAll}
>
Select all on this page
</div>
</div>
{!compressed && this.renderSelectAll()}

<div className="items-row-2 pagination-part">
<div className="hidden-sm-down">
<div>
Total items {size}
{queryLimitHit &&
<span className="text-danger"> (limited)
</span>
}
</div>
</div>
{!compressed && this.renderTotalItems()}
<div>
<nav>
<ul className="pagination pointer">
<li className="page-item">
<a
className="page-link"
onClick={() => {
handleChangePage('down');
deselect()}
}
>
<span>&laquo;</span>
</a>
</li>

{this.renderArrow(true)}
{pagination}

<li className="page-item ">
<a
className="page-link"
onClick={() => {
handleChangePage('up');
deselect()}
}
>
<span>&raquo;</span>
</a>
</li>
{this.renderArrow(false)}
</ul>
</nav>
</div>
Expand Down
10 changes: 8 additions & 2 deletions src/containers/DocList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,12 @@ class DocList extends Component {
processStatus={processStatus}
includedView={includedView}
>
<DocumentList
type="grid"
windowType={includedView.windowType}
defaultViewId={includedView.viewId}
isIncluded={true}
/>
</DocumentList>
</RawModal>
}
Expand Down Expand Up @@ -167,13 +173,13 @@ function mapStateToProps(state) {
latestNewDocument: null,
indicator: ''
}

const {
includedView
} = listHandler || {
includedView: {}
}

const {
processStatus
} = appHandler || {
Expand Down

0 comments on commit 81dc72c

Please sign in to comment.