Add sort function to corpus and job lists

This commit is contained in:
Patrick Jentsch 2020-01-16 15:04:12 +01:00
parent ef1eb9976e
commit 688591ebe8
4 changed files with 64 additions and 12 deletions

View File

@ -37,6 +37,7 @@ class CorpusList extends List {
corpusStatusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS));
corpusStatusElement.classList.add(CorpusList.STATUS_COLORS[operation.value] || CorpusList.STATUS_COLORS['default']);
corpusStatusElement.innerHTML = operation.value;
item.values({status: operation.value});
break;
default:
break;
@ -106,13 +107,15 @@ class CorpusList extends List {
* Add an entry to the List.js datastructure and immediatly replace the
* generic DOM element with our own one created above.
*/
this.add([{description: corpus.description, id: corpus.id, title: corpus.title}],
this.add([{description: corpus.description, id: corpus.id,
status: corpus.status, title: corpus.title}],
function(items) {items[0].elm = rowElement;});
}
}
CorpusList.DEFAULT_OPTIONS = {item: `<div>
<span class="title"></span>
<span class="description"></span>
<td class="status"></td>
<span class="title"></span>
</div>`,
page: 4,
pagination: {innerWindow: 8, outerWindow: 1},

View File

@ -37,6 +37,7 @@ class JobList extends List {
jobStatusElement.classList.remove(...Object.values(JobList.STATUS_COLORS));
jobStatusElement.classList.add(JobList.STATUS_COLORS[operation.value] || JobList.STATUS_COLORS['default']);
jobStatusElement.innerHTML = operation.value;
item.values({status: operation.value});
break;
default:
break;
@ -106,17 +107,21 @@ class JobList extends List {
* Add an entry to the List.js datastructure and immediatly replace the
* generic DOM element with our own one created above.
*/
this.add([{description: job.description, id: job.id, title: job.title}],
this.add([{description: job.description, id: job.id,
service: `/service=${job.service}`, status: job.status,
title: job.title}],
function(items) {items[0].elm = rowElement;});
}
}
JobList.DEFAULT_OPTIONS = {item: `<div>
<span class="title"></span>
<span class="description"></span>
</div>`,
JobList.DEFAULT_OPTIONS = {item: `<tr>
<td class="description"></td>
<td class="service"></td>
<td class="status"></td>
<td class="title"></td>
</tr>`,
page: 4,
pagination: {innerWindow: 8, outerWindow: 1},
valueNames: ["description", "title", {data: ["id"]}]};
valueNames: ["description", "service", "status", "title", {data: ["id"]}]};
JobList.SERVICE_ICONS = {"merge_images": "burst_mode",
"nlp": "format_textdirection_l_to_r",
"ocr": "find_in_page",

View File

@ -35,10 +35,21 @@
<div class="card-content" id="corpora">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-corpus" class="search" type="text"></input>
<input id="search-corpus" class="search" type="search"></input>
<label for="search-corpus">Search corpus</label>
</div>
<table>
<thead>
<tr>
<th></th>
<th>
<span class="sort" data-sort="title">Title</span>
<span class="sort" data-sort="description">Description</span>
</th>
<th><span class="sort" data-sort="status">Status</span></th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
@ -52,10 +63,21 @@
<div class="card-content" id="jobs">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-job" class="search" type="text"></input>
<input id="search-job" class="search" type="search"></input>
<label for="search-job">Search job</label>
</div>
<table>
<thead>
<tr>
<th><span class="sort" data-sort="service">Service</span></th>
<th>
<span class="sort" data-sort="title">Title</span>
<span class="sort" data-sort="description">Description</span>
</th>
<th><span class="sort" data-sort="status">Status</span></th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>

View File

@ -8,10 +8,21 @@
<div class="card-content" id="corpora">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-corpus" class="search" type="text"></input>
<input id="search-corpus" class="search" type="search"></input>
<label for="search-corpus">Search corpus</label>
</div>
<table>
<thead>
<tr>
<th></th>
<th>
<span class="sort" data-sort="title">Title</span>
<span class="sort" data-sort="description">Description</span>
</th>
<th><span class="sort" data-sort="status">Status</span></th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
@ -29,10 +40,21 @@
<div class="card-content" id="jobs">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-job" class="search" type="text"></input>
<input id="search-job" class="search" type="search"></input>
<label for="search-job">Search job</label>
</div>
<table>
<thead>
<tr>
<th><span class="sort" data-sort="service">Service</span></th>
<th>
<span class="sort" data-sort="title">Title</span>
<span class="sort" data-sort="description">Description</span>
</th>
<th><span class="sort" data-sort="status">Status</span></th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>