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

feat: relationship modal correct style & clickableList component

Browse Source
This commit is contained in:
Arman
2023-03-30 13:20:20 +02:00
parent 1ff8a924b2
commit 039efbf1eb
7 changed files with 53 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+4 -4
View File
@@ -8,7 +8,7 @@
"dependencies": {
"@analytics/google-analytics": "^1.0.5",
"@appwrite.io/console": "0.1.0-preview-0.1",
"@appwrite.io/pink": "^0.0.6-rc.6",
"@appwrite.io/pink": "^0.0.6-rc.7",
"@popperjs/core": "^2.11.6",
"@sentry/svelte": "^7.44.2",
"@sentry/tracing": "^7.44.2",
@@ -155,9 +155,9 @@
}
},
"node_modules/@appwrite.io/pink": {
"version": "0.0.6-rc.6",
"resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.6.tgz",
"integrity": "sha512-mSOUI2UxRqO3MS4ZXz9bdyAt0VFGRhOwWYGXw+oFfYPjmu6GSKnLEQwjF37DeuArEGRNriTiOFrKqXO0HW0odA==",
"version": "0.0.6-rc.7",
"resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.7.tgz",
"integrity": "sha512-3I+DG4HiysIRJF9ksr+aWMmazUtZ6KrivISu3k+pIX7MjyDhN5la6LVNKgU3d8WWstbHCHoEq5+FYyjsYWWIpA==",
"dependencies": {
"@appwrite.io/pink-icons": "*",
"normalize.css": "^8.0.1",
package.json
+1 -1
View File
@@ -20,7 +20,7 @@
"dependencies": {
"@analytics/google-analytics": "^1.0.5",
"@appwrite.io/console": "0.1.0-preview-0.1",
"@appwrite.io/pink": "^0.0.6-rc.6",
"@appwrite.io/pink": "^0.0.6-rc.7",
"@popperjs/core": "^2.11.6",
"@sentry/svelte": "^7.44.2",
"@sentry/tracing": "^7.44.2",
src/lib/components/clickableList.svelte
+3
View File
@@ -0,0 +1,3 @@
<ul class="clickable-list">
<slot />
</ul>
src/lib/components/clickableListItem.svelte
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts">
export let href: string;
</script>
<li class="clickable-list-item">
<a {href} class="clickable-list-button" on:click>
<h5 class="clickable-list-title u-trim-1">
<slot />
</h5>
<div class="clickable-list-desc">
<p class="text u-margin-block-start-8"><slot name="desc" /></p>
</div>
</a>
</li>
src/lib/components/index.ts
+2
View File
@@ -51,3 +51,5 @@ export { default as ViewSelector } from './viewSelector.svelte';
export { default as LabelCard } from './labelCard.svelte';
export { default as Limit } from './limit.svelte';
export { default as PaginationWithLimit } from './paginationWithLimit.svelte';
export { default as ClickableList } from './clickableList.svelte';
export { default as ClickableListItem } from './clickableListItem.svelte';
src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
+19 -27
View File
@@ -1,8 +1,7 @@
<script lang="ts">
import { base } from '$app/paths';
import { page } from '$app/stores';
import { Modal, PaginationInline } from '$lib/components';
import { TableCell, TableList, TableRowLink } from '$lib/elements/table';
import { ClickableList, ClickableListItem, Modal, Paginator } from '$lib/components';
import { teamPrefs } from '$lib/stores/team';
import type { Models } from '@appwrite.io/console';
@@ -12,7 +11,6 @@
const projectId = $page.params.project;
const databaseId = $page.params.database;
const limit = 10;
let offset = 0;
$: args = $teamPrefs?.displayNames?.[selectedRelationship?.relatedCollection];
@@ -26,31 +24,25 @@
<svelte:fragment slot="header">
{selectedRelationship.key}
</svelte:fragment>
<TableList>
{#each data as doc, i}
{#if i >= offset && i < offset + limit}
<TableRowLink
<Paginator items={data} {limit} let:paginatedItems>
<ClickableList>
{#each paginatedItems as doc}
<ClickableListItem
href={`${base}/console/project-${projectId}/databases/database-${databaseId}/collection-${selectedRelationship.relatedCollection}`}
on:click={() => (show = false)}>
<TableCell title={doc.$id}>
<div class="u-flex u-gap-8">
{#each args as arg, i}
{#if i}
<span class="u-color-text-gray">|</span>
{/if}
<span>{doc[arg]}</span>
{/each}
</div>
<span class="u-color-text-gray u-small">{doc.$id}</span>
</TableCell>
</TableRowLink>
{/if}
{/each}
</TableList>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {data?.length ?? 0}</p>
<PaginationInline {limit} bind:offset sum={data?.length ?? 0} hidePages />
</div>
{#each args as arg, i}
{#if i}
<span class="clickable-list-title-sep">|</span>
{/if}
<span>{doc[arg]}</span>
{/each}
<svelte:fragment slot="desc">
{doc.$id}
</svelte:fragment>
</ClickableListItem>
{/each}
</ClickableList>
</Paginator>
<svelte:fragment slot="footer" />
</Modal>
src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+10 -3
View File
@@ -18,6 +18,7 @@
import type { Models } from '@appwrite.io/console';
import { onMount } from 'svelte';
import type { PageData } from './$types';
import type Attribute from './document-[document]/attribute.svelte';
import RelationshipsModal from './relationshipsModal.svelte';
import { attributes, collection, columns } from './store';
@@ -78,6 +79,13 @@
whole: formattedColumn
};
}
function isRelationship(
column: (typeof $columns)[0],
attr: Partial<Attribute>
): attr is Models.AttributeRelationship {
return column.type === 'relationship';
}
</script>
<TableScroll isSticky>
@@ -104,12 +112,11 @@
{#each $columns as column}
{#if column.show}
{#if column.type === 'relationship'}
{@const attr = $attributes.find((n) => n.key === column.id)}
{@const attr = $attributes.find((n) => n.key === column.id)}
{#if isRelationship(column, attr)}
{@const args = $teamPrefs?.displayNames?.[attr.relatedCollection] ?? [
'$id'
]}
{#if attr?.relationType === 'oneToOne' || attr?.relationType === 'manyToOne'}
<TableCell title={column.title}>
<button