IF YOU WOULD LIKE TO GET AN ACCOUNT, please write an email to s dot adaszewski at gmail dot com. User accounts are meant only to report issues and/or generate pull requests. This is a purpose-specific Git hosting for ADARED projects. Thank you for your understanding!
sadaszewski1
/
wba
forked from sadaszewski/wba
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Trying to implement pagination.

master
Stanislaw Adaszewski 4 years ago
parent
09de898398
commit
41e59baaa6
7 changed files with 161 additions and 26 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      frontend/rollup.config.js
  2. +1
    -0
      frontend/src/html/index.html
  3. +13
    -26
      frontend/src/js/component/wb-app.js
  4. +20
    -0
      frontend/src/js/component/wb-project-listing.js
  5. +27
    -0
      frontend/src/js/misc/make-arvados-request.js
  6. +73
    -0
      frontend/src/js/widget/wb-pagination.js
  7. +26
    -0
      frontend/src/js/widget/wb-table.js

+ 1
- 0
frontend/rollup.config.js View File

@@ -23,6 +23,7 @@ export default {
'src/css/index.css': 'dist/css/index.css',
'node_modules/bootstrap/dist/css/bootstrap.min.css': 'dist/css/bootstrap.min.css',
'node_modules/bootstrap/dist/js/bootstrap.min.js': 'dist/js/bootstrap.min.js',
'node_modules/jquery/dist/jquery.min.js': 'dist/js/jquery.min.js',
verbose: true
}),
buble({jsx: 'h'}),


+ 1
- 0
frontend/src/html/index.html View File

@@ -2,6 +2,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
<script language="javascript" src="/js/jquery.min.js"></script>
<script language="javascript" src="/js/bootstrap.min.js"></script>
</head>
<body>


+ 13
- 26
frontend/src/js/component/wb-app.js View File

@@ -1,37 +1,24 @@
import { h, Component } from 'preact';
import WBTabs from 'wb-tabs';
import WBTable from 'wb-table';
import WBPagination from 'wb-pagination';
class WBApp extends Component {
render() {
return (
<div>
<h1>WBApp</h1>
<table class="table table-striped table-hover">
<thead class="thead-light">
<tr>
<th>Name</th>
<th>Description</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Description</td>
<td>0 bytes</td>
</tr>
<tr>
<td>Name</td>
<td>Description</td>
<td>0 bytes</td>
</tr>
<tr>
<td>Name</td>
<td>Description</td>
<td>0 bytes</td>
</tr>
</tbody>
</table>
<WBPagination numPages={ 100 } activePage={ 0 }
onPageChanged={ idx => alert(idx) } />
<WBTable
columns={ [ 'Name', 'Description', 'Size' ] }
rows={ [
[ 'Name', 'Description', '0 bytes'],
[ 'Name', 'Description', '0 bytes'],
[ 'Name', 'Description', '0 bytes'],
[ 'Name', 'Description', '0 bytes'],
[ 'Name', 'Description', '0 bytes']
] } />
<WBTabs tabs={ [
{ 'name': 'Ala', 'isActive': true },
"Ma",


+ 20
- 0
frontend/src/js/component/wb-project-listing.js View File

@@ -0,0 +1,20 @@
import { h, Component } from 'preact';
import makeArvadosRequest from 'make-arvados-request';
class WBProjectListing extends Component {
componentDidMount() {
let filters = [
[ 'group_class', '=', 'project' ],
[ 'owner_uuid', '=', this.props.ownerUuid ]
];
let req = makeArvadosRequest(his.props.arvHost, this.props.arvToken,
'/arvados/v1/groups?filters=' + encodeURIComponent(JSON.stringify(filters)))
}
render({ arvHost, arvToken, ownerUuid }) {
return (
<div>Project Listing</div>
);
}
}

+ 27
- 0
frontend/src/js/misc/make-arvados-request.js View File

@@ -0,0 +1,27 @@
makeArvadosRequest(arvHost, arvToken, endpoint, method='GET', data=null,
contentType='application/json;charset=utf-8', responseType='json') {
let xhr = new XMLHttpRequest();
xhr.open(method, 'https://' + arvHost + endpoint);
xhr.setRequestHeader('Authorization', 'OAuth2 ' + arvToken);
if (data !== null)
xhr.setRequestHeader('Content-Type', contentType);
xhr.responseType = responseType;
let res = new Promise((accept, reject) => {
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4)
return;
if (xhr.status !== 200)
reject(xhr);
else
accept(xhr);
};
xhr.send(data);
});
return res;
}
export default makeArvadosRequest;

+ 73
- 0
frontend/src/js/widget/wb-pagination.js View File

@@ -0,0 +1,73 @@
import { h, Component } from 'preact';
class WBPagination extends Component {
renderVisiblePages(numPages, activePage, chunkSize, onPageChanged) {
let visible = {};
let begActChnk = activePage - Math.floor(chunkSize / 2);
let endActChnk = activePage + Math.floor(chunkSize / 2) + 1;
for (let i = begActChnk; i < endActChnk; i++)
visible[i] = true;
for (let i = 0; i < chunkSize; i++)
visible[i] = true;
for (let i = Math.max(numPages - chunkSize, 0); i < numPages; i++)
visible[i] = true;
visible = Object.keys(visible).map(n => Number(n));
let res = [];
let prev = 0;
res.push((
<li class={ activePage === 0 ? "page-item disabled" : "page-item" }>
<a class="page-link" href="#"
onclick={ () => onPageChanged(activePage - 1) }>Previous</a>
</li>
));
for (let i in visible) {
if (i > prev + 1)
res.push((
<li class="page-item">
<a class="page-link" href="#"
onclick={ () => onPageChanged(i - 1) }>...</a>
</li>
));
prev = i;
res.push((
<li class={ i === activePage ? "page-item active" : "page-item" }>
<a class="page-link" href="#"
onclick={ () => onPageChanged(i) }>{ i + 1 }</a>
</li>
));
}
res.push((
<li class={ activePage >= numPages - 1 ? "page-item disabled" : "page-item" }>
<a class="page-link" href="#"
onclick={ () => onPageChanged(activePage + 1) }>Next</a>
</li>
));
return res;
}
render({ numPages, activePage, chunkSize, onPageChanged }) {
return (
<nav aria-label="Pagination">
<ul class="pagination">
{ this.renderVisiblePages(numPages, activePage, chunkSize, onPageChanged) }
</ul>
</nav>
);
}
}
WBPagination.defaultProps = {
'chunkSize': 5
};
export default WBPagination;

+ 26
- 0
frontend/src/js/widget/wb-table.js View File

@@ -0,0 +1,26 @@
import { h, Component } from 'preact';
class WBTable extends Component {
render({ columns, rows }) {
return (
<table class="table table-striped table-hover">
<thead class="thead-light">
<tr>
{ columns.map(c => <th>{ c }</th>) }
</tr>
</thead>
<tbody>
{ rows.map(r => (
<tr>
{ columns.map((_, idx) => (
<td>{ r[idx] }</td>
)) }
</tr>
)) }
</tbody>
</table>
);
}
}
export default WBTable;

Write Preview
Loading…
Cancel
Save