setTimeout(() => (content = copyText))}>
-
+ onclick={(event) => {
+ event.preventDefault();
+ event.stopPropagation();
+ handleClick();
+ }}
+ onkeyup={clickOnEnter}
+ onmouseenter={() => setTimeout(() => (content = copyText))}>
+ {@render children?.()}
{#if showing}
diff --git a/src/lib/components/creditCardBrandImage.svelte b/src/lib/components/creditCardBrandImage.svelte
index 43e8dadc0..18f4d2474 100644
--- a/src/lib/components/creditCardBrandImage.svelte
+++ b/src/lib/components/creditCardBrandImage.svelte
@@ -10,7 +10,11 @@
export let height = 16;
$: ccImage = isValueOfStringEnum(CreditCard, brand)
- ? sdk.forConsole.avatars.getCreditCard(brand, width, height)
+ ? sdk.forConsole.avatars.getCreditCard({
+ code: brand,
+ width,
+ height
+ })
: '';
diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
index 7b3fcc920..8ff2838ab 100644
--- a/src/lib/components/csvImportBox.svelte
+++ b/src/lib/components/csvImportBox.svelte
@@ -11,9 +11,13 @@
import { Layout, Typography } from '@appwrite.io/pink-svelte';
import { type Models, type Payload, Query } from '@appwrite.io/console';
+ // re-render the key for sheet UI.
+ import { hash } from '$lib/helpers/string';
+ import { spreadsheetRenderKey } from '$routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store';
+
type ImportItem = {
status: string;
- collection?: string;
+ table?: string;
};
type ImportItemsMap = Map;
@@ -22,15 +26,11 @@
* Keeps a track of the active and ongoing csv migrations.
*
* The structure is as follows -
- * `{ migrationId: { status: status, collection: collection } }`
+ * `{ migrationId: { status: status, table: table } }`
*/
const importItems: Writable = writable(new Map());
- async function showCompletionNotification(
- database: string,
- collection: string,
- payload: Payload
- ) {
+ async function showCompletionNotification(database: string, table: string, payload: Payload) {
const isSuccess = payload.status === 'completed';
const isError = !isSuccess && !!payload.errors;
@@ -48,20 +48,21 @@
const type = isSuccess ? 'success' : 'error';
const message = isError ? errorMessage : 'CSV import finished successfully.';
- const url = `${base}/project-${page.params.region}-${page.params.project}/databases/database-${database}/collection-${collection}`;
+ const url = `${base}/project-${page.params.region}-${page.params.project}/databases/database-${database}/table-${table}`;
addNotification({
type,
message,
isHtml: true,
buttons:
- isSuccess && collection !== page.params.collection
- ? [{ name: 'View documents', method: () => goto(url) }]
+ isSuccess && table !== page.params.table
+ ? [{ name: 'View rows', method: () => goto(url) }]
: undefined
});
if (isSuccess) {
- await invalidate(Dependencies.DOCUMENTS);
+ await invalidate(Dependencies.ROWS);
+ $spreadsheetRenderKey = hash(Date.now().toString());
}
}
@@ -70,19 +71,22 @@
const status = importData.status;
const resourceId = importData.resourceId ?? '';
- const [databaseId, collectionId] = resourceId.split(':') ?? [];
+ const [databaseId, tableId] = resourceId.split(':') ?? [];
const current = $importItems.get(importData.$id);
- let collectionName = current?.collection ?? null;
+ let tableName = current?.table ?? null;
- if (!collectionName && collectionId) {
+ if (!tableName && tableId) {
try {
- const collection = await sdk
+ const table = await sdk
.forProject(page.params.region, page.params.project)
- .databases.getCollection(databaseId, collectionId);
- collectionName = collection.name;
+ .tablesDB.getTable({
+ databaseId,
+ tableId
+ });
+ tableName = table.name;
} catch {
- collectionName = null;
+ tableName = null;
}
}
@@ -99,12 +103,12 @@
if (shouldSkip) return items;
const next = new Map(items);
- next.set(importData.$id, { status, collection: collectionName ?? undefined });
+ next.set(importData.$id, { status, table: tableName ?? undefined });
return next;
});
if (status === 'completed' || status === 'failed') {
- await showCompletionNotification(databaseId, collectionId, importData);
+ await showCompletionNotification(databaseId, tableId, importData);
}
}
@@ -146,10 +150,12 @@
onMount(() => {
sdk.forProject(page.params.region, page.params.project)
- .migrations.list([
- Query.equal('source', 'CSV'),
- Query.equal('status', ['pending', 'processing'])
- ])
+ .migrations.list({
+ queries: [
+ Query.equal('source', 'CSV'),
+ Query.equal('status', ['pending', 'processing'])
+ ]
+ })
.then((migrations) => {
migrations.migrations.forEach(updateOrAddItem);
});
@@ -172,7 +178,7 @@
- {#each [...$importItems.entries()] as [key, value] (key)}
-
-
- -
-
-
-
- {@html text(value.status, value.collection)}
-
-
-
-
-
-
-
-
+ {#each [...$importItems.entries()] as [key, value] (key)}
+
+
+ -
+
+
+
+ {@html text(value.status, value.table)}
+
+
+
+
+
+
+
+
+ {/each}
+
-
+
+
+
{#if page.route?.id?.includes('/project-[region]-[project]') && currentProject && currentProject.pingCount === 0}
-
+
diff --git a/src/lib/components/paginationWithLimit.svelte b/src/lib/components/paginationWithLimit.svelte
index 089019adc..7cf78f6b5 100644
--- a/src/lib/components/paginationWithLimit.svelte
+++ b/src/lib/components/paginationWithLimit.svelte
@@ -3,13 +3,29 @@
import Pagination from './pagination.svelte';
import { Layout } from '@appwrite.io/pink-svelte';
- export let limit: number;
- export let offset: number;
- export let total: number;
- export let name: string;
+ let {
+ limit,
+ offset,
+ total,
+ name,
+ useCreateLink = true
+ }: {
+ limit: number;
+ offset: number;
+ total: number;
+ name: string;
+ useCreateLink?: boolean;
+ } = $props();
+
+ const showLimit = $derived(!!useCreateLink);
+ const direction = $derived(showLimit ? 'row' : 'column');
+ const alignItems = $derived(showLimit ? 'center' : 'flex-end');
-
-
-
+
+ {#if showLimit}
+
+ {/if}
+
+
diff --git a/src/lib/components/permissions/label.svelte b/src/lib/components/permissions/label.svelte
index 74ed9db0c..415d66379 100644
--- a/src/lib/components/permissions/label.svelte
+++ b/src/lib/components/permissions/label.svelte
@@ -30,7 +30,7 @@
$: disabled = !value || $groups.has(value);
-
+
Labels allow you to grant access to users with the specified label.
diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
index 31a6fd4db..8706f77a7 100644
--- a/src/lib/components/permissions/row.svelte
+++ b/src/lib/components/permissions/row.svelte
@@ -29,13 +29,13 @@
if (role === 'user') {
const user = await sdk
.forProject(page.params.region, page.params.project)
- .users.get(id);
+ .users.get({ userId: id });
return user;
}
if (role === 'team') {
const team = await sdk
.forProject(page.params.region, page.params.project)
- .teams.get(id);
+ .teams.get({ teamId: id });
return team;
}
}
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index c5d21e5f5..02867a7fd 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -45,9 +45,10 @@
async function request() {
if (!show) return;
isLoading = true;
- results = await sdk
- .forProject(page.params.region, page.params.project)
- .teams.list([Query.limit(5), Query.offset(offset)], search || undefined);
+ results = await sdk.forProject(page.params.region, page.params.project).teams.list({
+ queries: [Query.limit(5), Query.offset(offset)],
+ search: search || undefined
+ });
isLoading = false;
}
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
index 64f687a69..bf051e76d 100644
--- a/src/lib/components/permissions/user.svelte
+++ b/src/lib/components/permissions/user.svelte
@@ -48,9 +48,10 @@
async function request() {
if (!show) return;
isLoading = true;
- results = await sdk
- .forProject(page.params.region, page.params.project)
- .users.list([Query.limit(5), Query.offset(offset)], search || undefined);
+ results = await sdk.forProject(page.params.region, page.params.project).users.list({
+ queries: [Query.limit(5), Query.offset(offset)],
+ search: search || undefined
+ });
isLoading = false;
}
diff --git a/src/lib/components/regionEndpoint.svelte b/src/lib/components/regionEndpoint.svelte
index adcd0e0d6..aeaef43de 100644
--- a/src/lib/components/regionEndpoint.svelte
+++ b/src/lib/components/regionEndpoint.svelte
@@ -11,7 +11,12 @@
$: flagSrc =
region && isValueOfStringEnum(Flag, region.flag)
- ? sdk.forConsole.avatars.getFlag(region.flag, 30, 20, 100)
+ ? sdk.forConsole.avatars.getFlag({
+ code: region.flag,
+ width: 30,
+ height: 20,
+ quality: 100
+ })
: '';
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 9c128d556..65b18ae1a 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -1,7 +1,7 @@
@@ -101,7 +102,7 @@
updateSidebarState(event.detail)}
+ on:resize={(event) => updateSidebarState($page, event.detail)}
resizable>
@@ -240,7 +241,9 @@
{projectOption.name}
{/each}
- {#if project}
+ {#if project && $isSmallViewport}
+
+
{#if subNavigation}
-
+
{/if}
@@ -608,8 +614,9 @@
.sub-navigation {
margin-top: 48px;
+
@media (min-width: 1024px) {
- margin-top: 0;
+ margin-top: var(--banner-spacing, 0px);
width: 400px;
height: calc(100vh - 48px);
display: flex;
@@ -623,6 +630,17 @@
&.icons {
width: 266px;
transition: width 0.3s linear;
+
+ & :global(nav) {
+ margin-top: var(--banner-spacing);
+ }
+ }
+ }
+
+ /* when in small or tablet viewport and there's a banner */
+ @media (max-width: 1023px) {
+ & :global(header) {
+ margin-top: var(--banner-spacing);
}
}
}
diff --git a/src/lib/components/sortButton.svelte b/src/lib/components/sortButton.svelte
new file mode 100644
index 000000000..d202cf664
--- /dev/null
+++ b/src/lib/components/sortButton.svelte
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index 02f4dcbf2..7523c6f67 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -6,23 +6,73 @@
import { IconViewBoards } from '@appwrite.io/pink-icons-svelte';
import ViewToggle from './viewToggle.svelte';
import ColumnSelector from './columnSelector.svelte';
+ import { isSmallViewport } from '$lib/stores/viewport';
+ import { preferences } from '$lib/stores/preferences';
+ import { page } from '$app/state';
+ import { hash } from '$lib/helpers/string';
- export let columns: Writable
;
- export let view: View;
- export let isCustomCollection = false;
- export let hideView = false;
- export let hideColumns = false;
- export let allowNoColumns = false;
+ interface Props {
+ onlyIcon?: boolean;
+ ui?: 'legacy' | 'new';
+ columns: Writable;
+ view: View;
+ isCustomTable?: boolean;
+ hideView?: boolean;
+ hideColumns?: boolean;
+ allowNoColumns?: boolean;
+ showAnyway?: boolean;
+ }
+
+ let {
+ onlyIcon = false,
+ ui = 'legacy',
+ columns,
+ view = $bindable(),
+ isCustomTable = false,
+ hideView = false,
+ hideColumns = false,
+ allowNoColumns = false,
+ showAnyway = false
+ }: Props = $props();
+
+ let showCountBadge = $state(false);
+ const preferenceKey = $derived(getPreferenceKey());
+
+ function getPreferenceKey(): string {
+ const tableId = page.params.table;
+ const organizationId = page.data.organization?.$id ?? page.data.project?.teamId;
+ return hash([organizationId, tableId].filter(Boolean).join('#'));
+ }
+
+ function updateBadgeState() {
+ if (!preferences.getKey(preferenceKey, false)) {
+ showCountBadge = true;
+ preferences.setKey(preferenceKey, true);
+ }
+ }
+
+ $effect(() => {
+ showCountBadge = !onlyIcon || !!preferences.getKey(preferenceKey, false);
+ });
{#if !hideColumns && view === View.Table}
-
+
{#snippet children(toggle, selectedColumnsNumber)}
+ disabled={!$columns.length && showAnyway}
+ class={onlyIcon && !$isSmallViewport ? 'width-fix' : undefined}
+ badge={showCountBadge ? selectedColumnsNumber.toString() : undefined}>
{/snippet}
@@ -32,3 +82,10 @@
{#if !hideView}
{/if}
+
+
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 7414a2ffa..a2d138457 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1,4 +1,5 @@
export const PAGE_LIMIT = 12; // default page limit
+export const SPREADSHEET_PAGE_LIMIT = 50; // default sheet page limit
export const CARD_LIMIT = 6; // default card limit
export const INTERVAL = 5 * 60000; // default interval to check for feedback
export const NEW_DEV_PRO_UPGRADE_COUPON = 'appw50';
@@ -6,10 +7,12 @@ export const NEW_DEV_PRO_UPGRADE_COUPON = 'appw50';
export const REGION_FRA = 'fra';
export const REGION_SYD = 'syd';
export const REGION_NYC = 'nyc';
+export const REGION_SFO = 'sfo';
export const SUBDOMAIN_FRA = 'fra.';
export const SUBDOMAIN_SYD = 'syd.';
export const SUBDOMAIN_NYC = 'nyc.';
+export const SUBDOMAIN_SFO = 'sfo.';
export enum Dependencies {
FACTORS = 'dependency:factors',
@@ -38,9 +41,9 @@ export enum Dependencies {
MEMBERSHIPS = 'dependency:memberships',
DATABASE = 'dependency:database',
DATABASES = 'dependency:databases',
- COLLECTION = 'dependency:collection',
- DOCUMENT = 'dependency:document',
- DOCUMENTS = 'dependency:documents',
+ TABLE = 'dependency:table',
+ ROW = 'dependency:row',
+ ROWS = 'dependency:rows',
BUCKET = 'dependency:bucket',
FILE = 'dependency:file',
FILE_TOKENS = 'dependency:file_tokens',
@@ -64,7 +67,7 @@ export enum Dependencies {
WEBHOOK = 'dependency:webhook',
WEBHOOKS = 'dependency:webhooks',
MIGRATIONS = 'dependency:migrations',
- COLLECTIONS = 'dependency:collections',
+ TABLES = 'dependency:tables',
BACKUPS = 'dependency:backups',
RUNTIMES = 'dependency:runtimes',
CONSOLE_VARIABLES = 'dependency:console_variables',
@@ -92,6 +95,8 @@ export const defaultScopes: string[] = [
'teams.write',
'documents.read',
'documents.write',
+ 'rows.read',
+ 'rows.write',
'files.read',
'files.write',
'projects.read',
@@ -111,6 +116,8 @@ export const defaultScopes: string[] = [
'databases.write',
'collections.read',
'collections.write',
+ 'tables.read',
+ 'tables.write',
'buckets.read',
'buckets.write',
'functions.read',
@@ -141,6 +148,8 @@ export const defaultScopes: string[] = [
export const defaultRoles: string[] = ['owner'];
+// these are kept for backwards compatibility with keys and events that already exists.
+// for the new ones, we use the new terminology.
export const scopes: {
scope: string;
description: string;
@@ -201,6 +210,18 @@ export const scopes: {
category: 'Database',
icon: 'database'
},
+ {
+ scope: 'tables.read',
+ description: "Access to read your project's database tables",
+ category: 'Database',
+ icon: 'database'
+ },
+ {
+ scope: 'tables.write',
+ description: "Access to create, update, and delete your project's database tables",
+ category: 'Database',
+ icon: 'database'
+ },
{
scope: 'attributes.read',
description: "Access to read your project's database collection's attributes",
@@ -214,6 +235,18 @@ export const scopes: {
category: 'Database',
icon: 'database'
},
+ {
+ scope: 'columns.read',
+ description: "Access to read your project's database table's columns",
+ category: 'Database',
+ icon: 'database'
+ },
+ {
+ scope: 'columns.write',
+ description: "Access to create, update, and delete your project's database table's columns",
+ category: 'Database',
+ icon: 'database'
+ },
{
scope: 'indexes.read',
description: "Access to read your project's database collection's indexes",
@@ -239,6 +272,18 @@ export const scopes: {
category: 'Database',
icon: 'database'
},
+ {
+ scope: 'rows.read',
+ description: "Access to read your project's database rows",
+ category: 'Database',
+ icon: 'database'
+ },
+ {
+ scope: 'rows.write',
+ description: "Access to create, update, and delete your project's database rows",
+ category: 'Database',
+ icon: 'database'
+ },
{
scope: 'files.read',
description: "Access to read your project's storage files and preview images",
@@ -430,7 +475,7 @@ export type EventResource = {
export type EventAction = {
name: string;
- attributes?: string[];
+ columns?: string[];
};
export const eventServices: Array = [
@@ -448,11 +493,11 @@ export const eventServices: Array = [
name: 'databases',
resources: [
{
- name: 'collections',
+ name: 'tables',
actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
},
{
- name: 'documents',
+ name: 'rows',
actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
}
],
@@ -479,7 +524,7 @@ export const eventServices: Array = [
name: 'memberships',
actions: [
{ name: 'create' },
- { name: 'update', attributes: ['status'] },
+ { name: 'update', columns: ['status'] },
{ name: 'delete' }
]
}
@@ -495,7 +540,7 @@ export const eventServices: Array = [
],
actions: [
{ name: 'create' },
- { name: 'update', attributes: ['email', 'name', 'password', 'status', 'prefs'] },
+ { name: 'update', columns: ['email', 'name', 'password', 'status', 'prefs'] },
{ name: 'delete' }
]
},
diff --git a/src/lib/elements/flag.svelte b/src/lib/elements/flag.svelte
index 9fc0f2dcf..5a4809db3 100644
--- a/src/lib/elements/flag.svelte
+++ b/src/lib/elements/flag.svelte
@@ -14,7 +14,12 @@
export function getFlag(country: string, width: number, height: number, quality: number) {
if (!isValueOfStringEnum(Flag, country)) return '';
return sdk.forConsole.avatars
- .getFlag(country, width * 2, height * 2, quality)
+ .getFlag({
+ code: country,
+ width: width * 2,
+ height: height * 2,
+ quality
+ })
?.toString()
?.replace('&project=console', '&mode=admin');
}
diff --git a/src/lib/elements/forms/Seekbar.svelte b/src/lib/elements/forms/Seekbar.svelte
new file mode 100644
index 000000000..7fa184e8e
--- /dev/null
+++ b/src/lib/elements/forms/Seekbar.svelte
@@ -0,0 +1,315 @@
+
+
+
+
+ {#if maxAllowed < max}
+
+
+ {/if}
+
+
+
+
+
+
+
+
!disabled}
+ onmouseleave={() => !isDragging}>
+
+
+
+
+ {#if exactBreakpoints().length > 0}
+
+ {#each exactBreakpoints() as breakPoint, index (index)}
+ {@const breakPercentage = ((breakPoint - min) / range) * 100}
+
+
+ {/each}
+
+ {/if}
+
+
+
+ User
+ Event
+ Location
+ IP
+ Date
+
+ {#each logs.logs as log}
+
+
+
+ {#if log.userEmail}
+ {#if log.userName}
+
+ {log.userName}
+ {:else}
+
+ {log.userEmail}
+ {/if}
{:else}
-
- {log.userEmail}
+
+
+
+ {log.userName ?? 'Anonymous'}
{/if}
+
+
+
+ {log.event}
+
+
+ {#if log.countryCode !== '--'}
+ {log.countryName}
{:else}
-
-
-
- {log.userName ?? 'Anonymous'}
+ Unknown
{/if}
-
-
-
- {log.event}
-
-
- {#if log.countryCode !== '--'}
- {log.countryName}
- {:else}
- Unknown
- {/if}
-
-
- {log.ip}
-
-
- {toLocaleDateTime(log.time)}
-
-
- {/each}
-
+
+
+ {log.ip}
+
+
+ {toLocaleDateTime(log.time)}
+
+
+ {/each}
+
+
+ {@render children()}
+
+
+
+
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index abe25a4a9..8bb2983dd 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -1,6 +1,15 @@
-
-
+
+
@@ -18,26 +35,92 @@
diff --git a/src/lib/layout/coverTitle.svelte b/src/lib/layout/coverTitle.svelte
index ce87e70e5..2cfecde2a 100644
--- a/src/lib/layout/coverTitle.svelte
+++ b/src/lib/layout/coverTitle.svelte
@@ -1,5 +1,5 @@
@@ -35,7 +35,7 @@
{#if !hideColumns && $columns?.length}
Columns
-
+
{#snippet children(toggle, selectedColumnsNumber)}
{
+ const endings = ['table-[table]', 'table-[table]/columns', 'table-[table]/indexes'];
+ return endings.some((end) => page.route.id?.endsWith(end));
+ });
-
@@ -172,15 +177,20 @@
flex-direction: column;
gap: var(--gap-l);
margin-inline: 2rem;
+
+ &.hide {
+ display: none;
+ }
}
:global(main:has(.sub-navigation)) footer {
@media (min-width: 1024px) {
- margin-inline-start: -1.5rem;
margin-inline-end: 2rem;
+ margin-inline-start: -1.5rem;
}
}
- .extra-margin {
- margin-block-start: var(--space-2, 4px);
+
+ :global(main:has(.wide-screen-wrapper)) footer {
+ margin-inline-start: 2rem !important;
}
diff --git a/src/lib/layout/gridHeader.svelte b/src/lib/layout/gridHeader.svelte
index 9b66018bb..c3532f1e0 100644
--- a/src/lib/layout/gridHeader.svelte
+++ b/src/lib/layout/gridHeader.svelte
@@ -8,7 +8,7 @@
export let title: string;
export let columns: Writable
;
export let view: View;
- export let isCustomCollection = false;
+ export let isCustomTable = false;
export let hideView = false;
export let hideColumns = false;
export let allowNoColumns = false;
@@ -17,13 +17,7 @@