mirror of
https://github.com/kunkunsh/kunkun-ext-neohtop.git
synced 2025-04-04 09:46:43 +00:00
pagination controls
This commit is contained in:
Abdenasser
parent
b9515c8ae3
commit
d516169dee
@ -0,0 +1,149 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { AppConfig } from "$lib/types/config";
|
||||||
|
import { configStore } from "$lib/stores/config";
|
||||||
|
|
||||||
|
export let itemsPerPage: number;
|
||||||
|
export let currentPage: number;
|
||||||
|
export let totalPages: number;
|
||||||
|
export let totalResults: number;
|
||||||
|
|
||||||
|
const itemsPerPageOptions = [15, 25, 50, 100, 250, 500];
|
||||||
|
|
||||||
|
function changePage(page: number) {
|
||||||
|
if (page >= 1 && page <= totalPages) {
|
||||||
|
currentPage = page;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
|
||||||
|
configStore.updateConfig({
|
||||||
|
behavior: {
|
||||||
|
...$configStore.behavior,
|
||||||
|
[key]: value,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="pagination-controls">
|
||||||
|
<select
|
||||||
|
class="select-input"
|
||||||
|
bind:value={itemsPerPage}
|
||||||
|
on:change={() => updateBehaviorConfig("itemsPerPage", itemsPerPage)}
|
||||||
|
aria-label="Items per page"
|
||||||
|
>
|
||||||
|
{#each itemsPerPageOptions as option}
|
||||||
|
<option value={option}>{option} per page</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<div class="pagination">
|
||||||
|
<button
|
||||||
|
class="btn-page"
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
on:click={() => changePage(1)}
|
||||||
|
>
|
||||||
|
««
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn-page"
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
on:click={() => changePage(currentPage - 1)}
|
||||||
|
>
|
||||||
|
«
|
||||||
|
</button>
|
||||||
|
<div class="page-info">
|
||||||
|
<span>Page {currentPage} of {totalPages}</span>
|
||||||
|
<span class="results-info">({totalResults} processes)</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="btn-page"
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
on:click={() => changePage(currentPage + 1)}
|
||||||
|
>
|
||||||
|
»
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn-page"
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
on:click={() => changePage(totalPages)}
|
||||||
|
>
|
||||||
|
»»
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.pagination-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-input {
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--surface0);
|
||||||
|
border: 1px solid var(--surface1);
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
padding-right: 24px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 8px center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-input:hover {
|
||||||
|
background-color: var(--surface1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-page {
|
||||||
|
padding: 6px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--surface0);
|
||||||
|
border: 1px solid var(--surface1);
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-page:hover:not(:disabled) {
|
||||||
|
background: var(--surface1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-page:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-info {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--subtext0);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-info span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results-info {
|
||||||
|
color: var(--overlay0);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -13,6 +13,7 @@
|
|||||||
import StatusFilter from "./StatusFilter.svelte";
|
import StatusFilter from "./StatusFilter.svelte";
|
||||||
import SearchBox from "./SearchBox.svelte";
|
import SearchBox from "./SearchBox.svelte";
|
||||||
import RefreshControls from "./RefreshControls.svelte";
|
import RefreshControls from "./RefreshControls.svelte";
|
||||||
|
import PaginationControls from "./PaginationControls.svelte";
|
||||||
export let searchTerm: string;
|
export let searchTerm: string;
|
||||||
export let statusFilter: string = "all";
|
export let statusFilter: string = "all";
|
||||||
export let itemsPerPage: number;
|
export let itemsPerPage: number;
|
||||||
@ -28,7 +29,6 @@
|
|||||||
export let refreshRate: number;
|
export let refreshRate: number;
|
||||||
export let isFrozen: boolean;
|
export let isFrozen: boolean;
|
||||||
|
|
||||||
const itemsPerPageOptions = [15, 25, 50, 100, 250, 500];
|
|
||||||
let showColumnMenu = false;
|
let showColumnMenu = false;
|
||||||
const statusOptions = [
|
const statusOptions = [
|
||||||
{ value: "all", label: "All Statuses" },
|
{ value: "all", label: "All Statuses" },
|
||||||
@ -38,12 +38,6 @@
|
|||||||
})),
|
})),
|
||||||
];
|
];
|
||||||
|
|
||||||
function changePage(page: number) {
|
|
||||||
if (page >= 1 && page <= totalPages) {
|
|
||||||
currentPage = page;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleColumnVisibilityChange(columnId: string, visible: boolean) {
|
function handleColumnVisibilityChange(columnId: string, visible: boolean) {
|
||||||
configStore.updateConfig({
|
configStore.updateConfig({
|
||||||
appearance: {
|
appearance: {
|
||||||
@ -72,53 +66,12 @@
|
|||||||
|
|
||||||
<div class="toolbar-spacer"></div>
|
<div class="toolbar-spacer"></div>
|
||||||
|
|
||||||
<div class="pagination-controls">
|
<PaginationControls
|
||||||
<select
|
bind:itemsPerPage
|
||||||
class="select-input"
|
bind:currentPage
|
||||||
bind:value={itemsPerPage}
|
{totalPages}
|
||||||
on:change={() => updateBehaviorConfig("itemsPerPage", itemsPerPage)}
|
{totalResults}
|
||||||
aria-label="Items per page"
|
/>
|
||||||
>
|
|
||||||
{#each itemsPerPageOptions as option}
|
|
||||||
<option value={option}>{option} per page</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<div class="pagination">
|
|
||||||
<button
|
|
||||||
class="btn-page"
|
|
||||||
disabled={currentPage === 1}
|
|
||||||
on:click={() => changePage(1)}
|
|
||||||
>
|
|
||||||
««
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn-page"
|
|
||||||
disabled={currentPage === 1}
|
|
||||||
on:click={() => changePage(currentPage - 1)}
|
|
||||||
>
|
|
||||||
«
|
|
||||||
</button>
|
|
||||||
<div class="page-info">
|
|
||||||
<span>Page {currentPage} of {totalPages}</span>
|
|
||||||
<span class="results-info">({totalResults} processes)</span>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
class="btn-page"
|
|
||||||
disabled={currentPage === totalPages}
|
|
||||||
on:click={() => changePage(currentPage + 1)}
|
|
||||||
>
|
|
||||||
»
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn-page"
|
|
||||||
disabled={currentPage === totalPages}
|
|
||||||
on:click={() => changePage(totalPages)}
|
|
||||||
>
|
|
||||||
»»
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="toolbar-spacer"></div>
|
<div class="toolbar-spacer"></div>
|
||||||
|
|
||||||
<div class="column-toggle">
|
<div class="column-toggle">
|
||||||
@ -255,79 +208,6 @@
|
|||||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 25%, transparent);
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 25%, transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-controls {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-input {
|
|
||||||
padding: 6px 12px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text);
|
|
||||||
background: var(--surface0);
|
|
||||||
border: 1px solid var(--surface1);
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
appearance: none;
|
|
||||||
padding-right: 24px;
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: right 8px center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-input:hover {
|
|
||||||
background-color: var(--surface1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-page {
|
|
||||||
padding: 6px 10px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text);
|
|
||||||
background: var(--surface0);
|
|
||||||
border: 1px solid var(--surface1);
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-page:hover:not(:disabled) {
|
|
||||||
background: var(--surface1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-page:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-info {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--subtext0);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-info span {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.results-info {
|
|
||||||
color: var(--overlay0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-toggle {
|
.column-toggle {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user