Skip to content

Commit d065d8e

Browse files
zonia3000zonia3000
committed
Added status and attribute filters to images status modal
1 parent e541c5a commit d065d8e

File tree

7 files changed

+288
-194
lines changed

7 files changed

+288
-194
lines changed

‎components/src/lib/types/api.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ export type Image = {
7171
zarr_url: string;
7272
attributes: { [key: string]: string | number | boolean };
7373
types: { [key: string]: boolean };
74+
status?: string;
7475
};
7576

7677
export type Pagination<T> = {

‎src/lib/components/common/Paginator.svelte‎

Lines changed: 67 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
export let pageSize;
1111
export let totalCount;
1212
export let currentPage;
13+
export let singleLine = false;
1314
1415
$: numberOfPages = Math.ceil(totalCount / pageSize);
1516
$: pageNumbers = getPageNumbers(currentPage, numberOfPages);
@@ -77,74 +78,80 @@
7778
}
7879
</script>
7980

80-
<div class="row justify-content-center">
81-
{#if numberOfPages > 1}
82-
<div class="col">
83-
<nav aria-label="Page navigation">
84-
<ul class="pagination justify-content-center">
85-
<li class="page-item">
86-
<button
87-
class="page-link"
88-
type="button"
89-
aria-label="Previous"
90-
disabled={currentPage === 1}
91-
on:click={() => setCurrentPage(currentPage - 1)}
92-
class:disabled={currentPage === 1}
93-
>
94-
<span aria-hidden="true">&laquo;</span>
95-
</button>
96-
</li>
97-
{#each pageNumbers as pageNumber}
98-
{#if typeof pageNumber === 'number'}
99-
<li class="page-item" class:active={pageNumber === currentPage}>
81+
<div class="row">
82+
<div class={singleLine ? 'col-6' : 'col-12'}>
83+
<div class="justify-content-center" class:row={!singleLine}>
84+
{#if numberOfPages > 1}
85+
<div class="col">
86+
<nav aria-label="Page navigation">
87+
<ul class="pagination justify-content-center">
88+
<li class="page-item">
10089
<button
101-
type="button"
10290
class="page-link"
103-
on:click={() => setCurrentPage(/** @type {number} */ (pageNumber))}
91+
type="button"
92+
aria-label="Previous"
93+
disabled={currentPage === 1}
94+
on:click={() => setCurrentPage(currentPage - 1)}
95+
class:disabled={currentPage === 1}
10496
>
105-
{pageNumber}
97+
<span aria-hidden="true">&laquo;</span>
10698
</button>
10799
</li>
108-
{:else}
100+
{#each pageNumbers as pageNumber}
101+
{#if typeof pageNumber === 'number'}
102+
<li class="page-item" class:active={pageNumber === currentPage}>
103+
<button
104+
type="button"
105+
class="page-link"
106+
on:click={() => setCurrentPage(/** @type {number} */ (pageNumber))}
107+
>
108+
{pageNumber}
109+
</button>
110+
</li>
111+
{:else}
112+
<li class="page-item">
113+
<span class="page-link disabled">{pageNumber}</span>
114+
</li>
115+
{/if}
116+
{/each}
109117
<li class="page-item">
110-
<span class="page-link disabled">{pageNumber}</span>
118+
<button
119+
class="page-link"
120+
type="button"
121+
aria-label="Next"
122+
disabled={currentPage === numberOfPages}
123+
on:click={() => setCurrentPage(currentPage + 1)}
124+
class:disabled={currentPage === numberOfPages}
125+
>
126+
<span aria-hidden="true">&raquo;</span>
127+
</button>
111128
</li>
112-
{/if}
113-
{/each}
114-
<li class="page-item">
115-
<button
116-
class="page-link"
117-
type="button"
118-
aria-label="Next"
119-
disabled={currentPage === numberOfPages}
120-
on:click={() => setCurrentPage(currentPage + 1)}
121-
class:disabled={currentPage === numberOfPages}
122-
>
123-
<span aria-hidden="true">&raquo;</span>
124-
</button>
125-
</li>
126-
</ul>
127-
</nav>
128-
</div>
129-
{/if}
130-
</div>
131-
<div class="row row-cols-lg-auto justify-content-center">
132-
<div class="col-6">
133-
<div class="input-group">
134-
<label class="input-group-text" for="page_size">Page size</label>
135-
<select
136-
class="form-select"
137-
id="page_size"
138-
bind:value={pageSize}
139-
on:change={() => setPageSize()}
140-
>
141-
{#each availablePageSizes as pageSize}
142-
<option value={pageSize}>{pageSize}</option>
143-
{/each}
144-
</select>
129+
</ul>
130+
</nav>
131+
</div>
132+
{/if}
145133
</div>
146134
</div>
147-
<div class="col-6 mt-2">
148-
<p class="text-center">Total results: {totalCount}</p>
135+
<div class={singleLine ? 'col-6' : 'col-12'}>
136+
<div class="row row-cols-lg-auto justify-content-center">
137+
<div class="col-6">
138+
<div class="input-group">
139+
<label class="input-group-text" for="page_size">Page size</label>
140+
<select
141+
class="form-select"
142+
id="page_size"
143+
bind:value={pageSize}
144+
on:change={() => setPageSize()}
145+
>
146+
{#each availablePageSizes as pageSize}
147+
<option value={pageSize}>{pageSize}</option>
148+
{/each}
149+
</select>
150+
</div>
151+
</div>
152+
<div class="col-6 mt-2">
153+
<p class="text-center">Total results: {totalCount}</p>
154+
</div>
155+
</div>
149156
</div>
150157
</div>

‎src/lib/components/jobs/ImagesStatus.svelte‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@
33
44
/** @type {import('fractal-components/types/api').ImagesStatus|undefined} */
55
export let status;
6-
/** @type {number} */
7-
export let projectId;
8-
/** @type {number} */
9-
export let datasetId;
6+
/** @type {import('fractal-components/types/api').DatasetV2} */
7+
export let dataset;
108
/** @type {import('fractal-components/types/api').WorkflowTaskV2} */
119
export let workflowTask;
1210
@@ -60,7 +58,7 @@
6058
<button
6159
aria-label="Submitted images"
6260
class="status-modal-btn btn btn-link text-decoration-none p-0"
63-
on:click={() => imagesStatusModal.open(projectId, datasetId, workflowTask.id)}
61+
on:click={() => imagesStatusModal.open(dataset, workflowTask.id)}
6462
>
6563
<span class="d-flex pe-1">
6664
<span class="pe-1 status-wrapper text-primary">
@@ -79,7 +77,7 @@
7977
<button
8078
aria-label="Done images"
8179
class="status-modal-btn btn btn-link text-decoration-none p-0"
82-
on:click={() => imagesStatusModal.open(projectId, datasetId, workflowTask.id)}
80+
on:click={() => imagesStatusModal.open(dataset, workflowTask.id)}
8381
>
8482
<span class="d-flex">
8583
<span class="status-wrapper text-success ps-1">
@@ -96,7 +94,7 @@
9694
<button
9795
aria-label="Failed images"
9896
class="status-modal-btn btn btn-link text-decoration-none p-0"
99-
on:click={() => imagesStatusModal.open(projectId, datasetId, workflowTask.id)}
97+
on:click={() => imagesStatusModal.open(dataset, workflowTask.id)}
10098
>
10199
<span class="d-flex">
102100
<span class="status-wrapper text-danger ps-1">

0 commit comments

Comments
 (0)