This commit is contained in:
Arman
2023-11-21 18:49:28 +01:00
parent 77a4d695dd
commit e17be08787
10 changed files with 80 additions and 30 deletions
+31
View File
@@ -29,6 +29,7 @@
"web-vitals": "^3.4.0"
},
"devDependencies": {
"@melt-ui/pp": "^0.1.4",
"@melt-ui/svelte": "^0.61.2",
"@playwright/test": "^1.37.1",
"@sveltejs/adapter-static": "^2.0.3",
@@ -55,6 +56,7 @@
"svelte-check": "^3.5.1",
"svelte-jester": "^2.3.2",
"svelte-preprocess": "^5.0.4",
"svelte-sequential-preprocessor": "^2.0.1",
"tslib": "^2.6.2",
"typescript": "^5.2.2",
"vite": "^4.4.9",
@@ -1845,6 +1847,22 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@melt-ui/pp": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/@melt-ui/pp/-/pp-0.1.4.tgz",
"integrity": "sha512-zR+Kl3CZJPJBHW8V7YcdQCMI/dVcnW9Ct3yGbVaIywYVStVRS7F9uEDOea3xLLT2WTGodQePzPlUn53yKFu87g==",
"dev": true,
"dependencies": {
"estree-walker": "^3.0.3"
},
"engines": {
"pnpm": ">=8.6.3"
},
"peerDependencies": {
"@melt-ui/svelte": ">= 0.29.0",
"svelte": "^3.55.0 || ^4.0.0 || ^5.0.0-next.1"
}
},
"node_modules/@melt-ui/svelte": {
"version": "0.61.2",
"resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.61.2.tgz",
@@ -8525,6 +8543,19 @@
"node": ">=12"
}
},
"node_modules/svelte-sequential-preprocessor": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/svelte-sequential-preprocessor/-/svelte-sequential-preprocessor-2.0.1.tgz",
"integrity": "sha512-N5JqlBni6BzElxmuFrOPxOJnjsxh1cFDACLEVKs8OHBcx8ZNRO1p5SxuQex1m3qbLzAC8G99EHeWcxGkjyKjLQ==",
"dev": true,
"dependencies": {
"svelte": "^4.0.1",
"tslib": "~2.6.0"
},
"engines": {
"node": ">=16"
}
},
"node_modules/svelte/node_modules/aria-query": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+2
View File
@@ -41,6 +41,7 @@
"web-vitals": "^3.4.0"
},
"devDependencies": {
"@melt-ui/pp": "^0.1.4",
"@melt-ui/svelte": "^0.61.2",
"@playwright/test": "^1.37.1",
"@sveltejs/adapter-static": "^2.0.3",
@@ -67,6 +68,7 @@
"svelte-check": "^3.5.1",
"svelte-jester": "^2.3.2",
"svelte-preprocess": "^5.0.4",
"svelte-sequential-preprocessor": "^2.0.1",
"tslib": "^2.6.2",
"typescript": "^5.2.2",
"vite": "^4.4.9",
+11 -12
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { createDateRangePicker, type DateRange } from '@melt-ui/svelte';
import { createDateRangePicker, melt, type DateRange } from '@melt-ui/svelte';
import { Label } from '.';
const {
elements: {
@@ -44,38 +44,38 @@
<div class="u-flex u-gap-4">
{#if showDates}
{#each $segmentContents.start as seg}
<div {...$startSegment(seg.part)} use:startSegment>
<div use:melt={$startSegment(seg.part)}>
{seg.value}
</div>
{/each}
<div aria-hidden="true">-</div>
{#each $segmentContents.end as seg}
<div {...$endSegment(seg.part)} use:endSegment>
<div use:melt={$endSegment(seg.part)}>
{seg.value}
</div>
{/each}
{/if}
<div>
<button {...$trigger} use:trigger class="button is-secondary" type="button">
<button use:melt={$trigger} class="button is-secondary" type="button">
<slot>Open calendar</slot>
</button>
</div>
</div>
<div {...$content} use:content class="card dt-container">
<div {...$calendar} use:calendar class="u-flex u-flex-vertical">
<div use:melt={$content} class="card dt-container">
<div use:melt={$calendar} class="u-flex u-flex-vertical">
<header class="u-flex u-main-space-between u-cross-center">
<button type="button" class="button is-only-icon is-text" use:prevButton>
<button type="button" class="button is-only-icon is-text" use:melt={$prevButton}>
<span class="icon-cheveron-left" aria-label="previous month"></span>
</button>
<div {...$heading} use:heading>
<div {...$heading} use:melt={$heading}>
{$headingValue}
</div>
<button type="button" class="button is-only-icon is-text" use:nextButton>
<button type="button" class="button is-only-icon is-text" use:melt={$nextButton}>
<span class="icon-cheveron-right" aria-label="next month"></span>
</button>
</header>
{#each $months as month}
<table use:grid>
<table use:melt={$grid}>
<thead aria-hidden="true">
<tr>
{#each $daysOfWeek as day}
@@ -97,8 +97,7 @@
aria-disabled={$isDateDisabled(date) ||
$isDateUnavailable(date)}>
<div
{...$cell(date, month.value)}
use:cell
use:melt={$cell(date, month.value)}
class="u-flex u-main-center u-cross-center dt-button">
{date.day}
</div>
+2 -2
View File
@@ -14,9 +14,9 @@ export function calculateSize(bytes: number, decimals = 1) {
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
export function sizeToBytes(value: number, unit: Size) {
export function sizeToBytes(value: number, unit: Size, base = 1024) {
const index = sizes.indexOf(unit);
return value * Math.pow(1024, index);
return value * Math.pow(base, index);
}
export function bytesToSize(value: number, unit: Size) {
+2 -2
View File
@@ -452,8 +452,8 @@ export class Billing {
// TODO: add date range
async listUsage(
organizationId: string,
startDate: string = '',
endDate: string = ''
startDate: string = null,
endDate: string = null
): Promise<OrganizationUsage> {
const path = `/organizations/${organizationId}/usage`;
const params = {
@@ -2,7 +2,7 @@ import { Dependencies } from '$lib/constants';
import { sdk } from '$lib/stores/sdk';
import type { PageLoad } from './$types';
export const load: PageLoad = async ({ params, parent, depends }) => {
export const load: PageLoad = async ({ parent, depends }) => {
await parent();
depends(Dependencies.PAYMENT_METHODS);
depends(Dependencies.ORGANIZATION);
@@ -12,7 +12,6 @@ export const load: PageLoad = async ({ params, parent, depends }) => {
return {
paymentMethods: await sdk.forConsole.billing.listPaymentMethods(),
addressList: await sdk.forConsole.billing.listAddresses(),
oraganizationUsage: await sdk.forConsole.billing.listUsage(params.organization)
addressList: await sdk.forConsole.billing.listAddresses()
};
};
@@ -20,7 +20,11 @@
let excess: Record<string, number> = null;
onMount(async () => {
usage = await sdk.forConsole.billing.listUsage($organization.$id);
usage = await sdk.forConsole.billing.listUsage(
$organization.$id,
$organization.billingCurrentInvoiceDate,
new Date().toISOString()
);
members = await sdk.forConsole.teams.listMemberships($organization.$id);
calculateExcess();
});
@@ -15,8 +15,13 @@ export const load: PageLoad = async ({ params, depends, url, route }) => {
const limit = getLimit(url, route, PAGE_LIMIT);
const offset = pageToOffset(page, limit);
let oraganizationUsage: OrganizationUsage = null;
if (isCloud && get(organization)) {
oraganizationUsage = await sdk.forConsole.billing.listUsage(get(organization)?.$id);
const org = get(organization);
if (isCloud && org) {
oraganizationUsage = await sdk.forConsole.billing.listUsage(
org.$id,
org.billingCurrentInvoiceDate,
new Date().toISOString()
);
}
return {
@@ -1,8 +1,8 @@
<script lang="ts">
import { Submit } from '$lib/actions/analytics';
import { Alert, CardGrid, Heading } from '$lib/components';
import { Button, Form, InputNumber, InputSelect } from '$lib/elements/forms';
import { humanFileSize } from '$lib/helpers/sizeConvertion';
import { Button, Form, FormItem, InputNumber, InputSelect } from '$lib/elements/forms';
import { humanFileSize, sizeToBytes } from '$lib/helpers/sizeConvertion';
import { createByteUnitPair } from '$lib/helpers/unit';
import { getServiceLimit, readOnly } from '$lib/stores/billing';
import { organization } from '$lib/stores/organization';
@@ -27,7 +27,7 @@
);
}
const service = getServiceLimit('storage');
const service = getServiceLimit('fileSize');
</script>
<Form onSubmit={updateMaxSize}>
@@ -36,7 +36,7 @@
<p class="text">Set the maximum file size allowed in the bucket.</p>
<svelte:fragment slot="aside">
{#if isCloud && $organization?.billingPlan === 'tier-0'}
{@const size = humanFileSize(service)}
{@const size = humanFileSize(sizeToBytes(service, 'MB', 1000))}
<Alert type="info">
<p class="text">
The Starter plan has a maximum upload file size limit of {size.value}{size.unit}.
@@ -51,8 +51,10 @@
</svelte:fragment>
</Alert>
{/if}
<ul class="u-flex u-gap-12 u-width-full-line">
<FormItem isMultiple>
<InputNumber
isMultiple
fullWidth
id="size"
label="Size"
disabled={$readOnly.storage}
@@ -60,8 +62,14 @@
min={0}
max={isCloud ? service : Infinity}
bind:value={$value} />
<InputSelect id="bytes" label="Bytes" {options} bind:value={$unit} />
</ul>
<InputSelect
id="bytes"
label="Bytes"
isMultiple
fullWidth
{options}
bind:value={$unit} />
</FormItem>
</svelte:fragment>
<svelte:fragment slot="actions">
+3 -1
View File
@@ -1,11 +1,13 @@
import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';
import { preprocessMeltUI } from '@melt-ui/pp';
import sequence from 'svelte-sequential-preprocessor';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
preprocess: sequence([preprocess(), preprocessMeltUI()]),
compilerOptions: {
accessors: process.env.VITEST
},