Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2037 from appwrite/fix-payment-tables

Browse Source 
Update table column types and adjust payment layouts
This commit is contained in:
Torsten Dittmann
2025-06-19 18:23:12 +02:00
committed by GitHub
parent 3f3af27064 ee5394665f
commit 331f6f0d0a
6 changed files with 58 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -26,7 +26,7 @@
"@appwrite.io/pink-icons": "0.25.0",
"@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
"@appwrite.io/pink-legacy": "^1.0.3",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@973fff2",
"@popperjs/core": "^2.11.8",
"@sentry/sveltekit": "^8.38.0",
"@stripe/stripe-js": "^3.5.0",
pnpm-lock.yaml
Generated
+25 -9
View File
@@ -24,8 +24,8 @@ importers:
specifier: ^1.0.3
version: 1.0.3
'@appwrite.io/pink-svelte':
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778(svelte@5.25.3)
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@973fff2
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@973fff2(svelte@5.25.3)
'@popperjs/core':
specifier: ^2.11.8
version: 2.11.8
@@ -260,8 +260,8 @@ packages:
'@appwrite.io/console@1.9.0':
resolution: {integrity: sha512-g8+zfdBF8mz7tRUER4CGVe5FHWQVLp8TlY/UOGCZ2TgUF1qnpNu/DhiQgph8uF+QZ9jDKCLAAZlP5//9t7ckWA==}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ee1b7788cd3f877c9aa1b6487976bd63a6196870':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ee1b7788cd3f877c9aa1b6487976bd63a6196870}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@973fff20fff9995eff19c3f9c270cb676d2dde12':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@973fff20fff9995eff19c3f9c270cb676d2dde12}
version: 2.0.0-RC.1
peerDependencies:
svelte: ^4.0.0
@@ -281,8 +281,8 @@ packages:
'@appwrite.io/pink-legacy@1.0.3':
resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@973fff2':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@973fff2}
version: 2.0.0-RC.2
peerDependencies:
svelte: ^4.0.0
@@ -1265,6 +1265,14 @@ packages:
'@swc/helpers@0.5.15':
resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
'@tanstack/svelte-virtual@3.13.10':
resolution: {integrity: sha512-MVpi/yJpliu6ab7ScrYWk3VYhRh2gwyXZxEV12G5TYZqu/hNEqvw6GUTYBcAg6xzRq4VKtxt89rQSqlGyG4OMA==}
peerDependencies:
svelte: ^3.48.0 || ^4.0.0 || ^5.0.0
'@tanstack/virtual-core@3.13.10':
resolution: {integrity: sha512-sPEDhXREou5HyZYqSWIqdU580rsF6FGeN7vpzijmP3KTiOGjOMZASz4Y6+QKjiFQwhWrR58OP8izYaNGVxvViA==}
'@testing-library/dom@10.4.0':
resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
engines: {node: '>=18'}
@@ -3637,7 +3645,7 @@ snapshots:
'@appwrite.io/console@1.9.0': {}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ee1b7788cd3f877c9aa1b6487976bd63a6196870(svelte@5.25.3)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@973fff20fff9995eff19c3f9c270cb676d2dde12(svelte@5.25.3)':
dependencies:
svelte: 5.25.3
@@ -3654,12 +3662,13 @@ snapshots:
'@appwrite.io/pink-icons': 1.0.0
the-new-css-reset: 1.11.3
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778(svelte@5.25.3)':
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@973fff2(svelte@5.25.3)':
dependencies:
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ee1b7788cd3f877c9aa1b6487976bd63a6196870(svelte@5.25.3)
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@973fff20fff9995eff19c3f9c270cb676d2dde12(svelte@5.25.3)
'@floating-ui/dom': 1.6.13
'@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)
'@melt-ui/svelte': 0.86.6(svelte@5.25.3)
'@tanstack/svelte-virtual': 3.13.10(svelte@5.25.3)
ansicolor: 2.0.3
d3: 7.9.0
fuse.js: 7.1.0
@@ -4710,6 +4719,13 @@ snapshots:
dependencies:
tslib: 2.8.1
'@tanstack/svelte-virtual@3.13.10(svelte@5.25.3)':
dependencies:
'@tanstack/virtual-core': 3.13.10
svelte: 5.25.3
'@tanstack/virtual-core@3.13.10': {}
'@testing-library/dom@10.4.0':
dependencies:
'@babel/code-frame': 7.26.2
src/lib/components/cardGrid.svelte
+5 -3
View File
@@ -16,9 +16,11 @@
</Typography.Text>
{/if}
</Layout.Stack>
<Layout.Stack {gap}>
<slot name="aside" />
</Layout.Stack>
<div style:overflow="hidden">
<Layout.Stack {gap}>
<slot name="aside" />
</Layout.Stack>
</div>
</Layout.GridFraction>
{#if $$slots.actions && !hideFooter}
<span
src/lib/helpers/types.ts
+2 -1
View File
@@ -60,7 +60,8 @@ export type TableRootProp = {
selectedAll: boolean;
selectedNone: boolean;
selectedSome: boolean;
columns: Record<PinkColumn['id'], PinkColumn>;
columns: Array<PinkColumn> | number;
columnsMap: Record<PinkColumn['id'], PinkColumn>;
toggle: (id: string) => void;
toggleAll: () => void;
addAvailableId: (id: string) => void;
src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte
+21 -19
View File
@@ -7,7 +7,6 @@
import type { Invoice, InvoiceList } from '$lib/sdk/billing';
import { getApiEndpoint, sdk } from '$lib/stores/sdk';
import { Query } from '@appwrite.io/console';
import { onMount } from 'svelte';
import { trackEvent } from '$lib/actions/analytics';
import { selectedInvoice, showRetryModal } from './store';
import {
@@ -28,19 +27,16 @@
IconRefresh
} from '@appwrite.io/pink-icons-svelte';
let offset = 0;
let invoiceList: InvoiceList = {
let offset = $state(0);
let invoiceList: InvoiceList = $state({
invoices: [],
total: 0
};
});
const limit = 5;
const endpoint = getApiEndpoint();
onMount(request);
async function request() {
// isLoadingInvoices = true;
invoiceList = await sdk.forConsole.billing.listInvoices(page.params.organization, [
Query.limit(limit),
Query.offset(offset),
@@ -48,19 +44,25 @@
]);
}
$: if (page.url.searchParams.get('type') === 'validate-invoice') {
window.history.replaceState({}, '', page.url.pathname);
request();
}
function retryPayment(invoice: Invoice) {
$selectedInvoice = invoice;
$showRetryModal = true;
}
$: if (offset !== null) {
request();
}
const hasPaymentError = $derived(invoiceList?.invoices.some((invoice) => invoice?.lastError));
$effect(() => {
if (page.url.searchParams.get('type') === 'validate-invoice') {
window.history.replaceState({}, '', page.url.pathname);
request();
}
});
$effect(() => {
if (offset !== null) {
request();
}
});
</script>
<CardGrid>
@@ -71,8 +73,8 @@
<Table.Root
let:root
columns={[
{ id: 'dueDate' },
{ id: 'status', width: { min: 200 } },
{ id: 'dueDate', width: { min: 120 } },
{ id: 'status', width: { min: hasPaymentError ? 200 : 100 } },
{ id: 'amount', width: { min: 120 } },
{ id: 'action', width: 40 }
]}>
@@ -162,10 +164,10 @@
{/each}
</Table.Root>
{#if invoiceList.total > limit}
<div class="u-flex u-main-space-between">
<Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
<p class="text">Total results: {invoiceList.total}</p>
<PaginationInline {limit} bind:offset total={invoiceList.total} hidePages />
</div>
</Layout.Stack>
{/if}
{:else}
<Card.Base>
src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
+4 -4
View File
@@ -115,16 +115,16 @@
<Table.Root
let:root
columns={[
{ id: 'cc', width: 140 },
{ id: 'cc', width: { min: 155 } },
{ id: 'name', width: { min: 140 } },
{ id: 'expiry', width: 100 },
{ id: 'status', width: 110, hide: !hasPaymentError },
{ id: 'expiry', width: { min: 75 } },
{ id: 'status', width: { min: 110 }, hide: !hasPaymentError },
{ id: 'actions', width: 40 }
]}>
<svelte:fragment slot="header" let:root>
<Table.Header.Cell column="cc" {root}>Credit card</Table.Header.Cell>
<Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
<Table.Header.Cell column="expiry" {root}>Expiration date</Table.Header.Cell>
<Table.Header.Cell column="expiry" {root}>Expiration</Table.Header.Cell>
<Table.Header.Cell column="status" {root} />
<Table.Header.Cell column="actions" {root} />
</svelte:fragment>