From 0b7a64cad281bac80e727a638d10aac84c55fe41 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Thu, 19 Jun 2025 17:43:06 +0200 Subject: [PATCH 1/4] Update table column types and adjust payment layouts The changes include typing updates for table columns and layout improvements for payment history and methods pages, with better handling of payment error states and responsive column widths. --- package.json | 2 +- pnpm-lock.yaml | 34 ++++++++++++++----- src/lib/helpers/types.ts | 3 +- .../billing/paymentHistory.svelte | 10 +++--- .../billing/paymentMethods.svelte | 8 ++--- 5 files changed, 38 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index f12341aef..e37af60a8 100644 --- a/package.json +++ b/package.json @@ -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@267da11", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.38.0", "@stripe/stripe-js": "^3.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a3664a807..233916882 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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@267da11 + version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@267da11(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@267da118049255e6b44b396773a01ae91f91af60': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@267da118049255e6b44b396773a01ae91f91af60} 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@267da11': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@267da11} 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@267da118049255e6b44b396773a01ae91f91af60(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@267da11(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@267da118049255e6b44b396773a01ae91f91af60(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 diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts index 7f4e6a66e..b00e21d41 100644 --- a/src/lib/helpers/types.ts +++ b/src/lib/helpers/types.ts @@ -60,7 +60,8 @@ export type TableRootProp = { selectedAll: boolean; selectedNone: boolean; selectedSome: boolean; - columns: Record; + columns: Array | number; + columnsMap: Record; toggle: (id: string) => void; toggleAll: () => void; addAvailableId: (id: string) => void; diff --git a/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte b/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte index c44c40c9d..c83551a03 100644 --- a/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte +++ b/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte @@ -61,6 +61,8 @@ $: if (offset !== null) { request(); } + + $: hasPaymentError = invoiceList?.invoices.some((invoice) => invoice?.lastError); @@ -71,8 +73,8 @@ @@ -162,10 +164,10 @@ {/each} {#if invoiceList.total > limit} -
+

Total results: {invoiceList.total}

-
+ {/if} {:else} diff --git a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte index db32f3c91..d9154ec2e 100644 --- a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte +++ b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte @@ -115,16 +115,16 @@ Credit card Name - Expiration date + Expiration From 0f95f1d07e1cf8dc7c85230e0477952378f1bd08 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Thu, 19 Jun 2025 17:50:34 +0200 Subject: [PATCH 2/4] Convert state management to use Svelte signals --- .../billing/paymentHistory.svelte | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte b/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte index c83551a03..2a5c9b337 100644 --- a/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte +++ b/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte @@ -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,21 +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)); - $: hasPaymentError = 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(); + } + }); From 3799fae41fd52f81acf772cb76014dbbf8c06773 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Thu, 19 Jun 2025 17:51:41 +0200 Subject: [PATCH 3/4] Update Column type references to PinkColumn --- src/lib/helpers/types.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts index b00e21d41..961c992d0 100644 --- a/src/lib/helpers/types.ts +++ b/src/lib/helpers/types.ts @@ -60,8 +60,8 @@ export type TableRootProp = { selectedAll: boolean; selectedNone: boolean; selectedSome: boolean; - columns: Array | number; - columnsMap: Record; + columns: Array | number; + columnsMap: Record; toggle: (id: string) => void; toggleAll: () => void; addAvailableId: (id: string) => void; From ee5394665f9e48e950e2f568bb8afb5ce3a27ed2 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Thu, 19 Jun 2025 18:18:56 +0200 Subject: [PATCH 4/4] Update pink-svelte package to 973fff2 version --- package.json | 2 +- pnpm-lock.yaml | 18 +++++++++--------- src/lib/components/cardGrid.svelte | 8 +++++--- 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index e37af60a8..a5f75727f 100644 --- a/package.json +++ b/package.json @@ -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@267da11", + "@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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 233916882..9fd6d1195 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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@267da11 - version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@267da11(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@267da118049255e6b44b396773a01ae91f91af60': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@267da118049255e6b44b396773a01ae91f91af60} + '@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@267da11': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@267da11} + '@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 @@ -3645,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@267da118049255e6b44b396773a01ae91f91af60(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 @@ -3662,9 +3662,9 @@ 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@267da11(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@267da118049255e6b44b396773a01ae91f91af60(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) diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte index 0d5e4bfb4..d770cccd5 100644 --- a/src/lib/components/cardGrid.svelte +++ b/src/lib/components/cardGrid.svelte @@ -16,9 +16,11 @@ {/if} - - - +
+ + + +
{#if $$slots.actions && !hideFooter}