Skip to content

Commit 3b77754

Browse files
MeldironMeldiron
authored
Merge pull request #1983 from appwrite/fix-sites
add Sites feature flag and unavailable state
2 parents 33bd0c3 + 745a596 commit 3b77754

File tree

2 files changed

+90
-35
lines changed

2 files changed

+90
-35
lines changed

‎src/routes/(console)/project-[region]-[project]/sites/+page.svelte

Lines changed: 73 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@
1111
import { isServiceLimited } from '$lib/stores/billing';
1212
import { organization } from '$lib/stores/organization';
1313
import { canWriteSites } from '$lib/stores/roles.js';
14-
import { Icon, Layout } from '@appwrite.io/pink-svelte';
14+
import { Card, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
1515
import { Button } from '$lib/elements/forms';
1616
import { app } from '$lib/stores/app';
1717
import CreateSiteModal from './createSiteModal.svelte';
1818
import EmptyLight from './(images)/empty-sites-light.svg';
1919
import EmptyDark from './(images)/empty-sites-dark.svg';
20+
import EmptyLightMobile from './(images)/empty-sites-light-mobile.svg';
21+
import EmptyDarkMobile from './(images)/empty-sites-dark-mobile.svg';
2022
import Grid from './grid.svelte';
2123
import { IconPlus } from '@appwrite.io/pink-icons-svelte';
2224
import { columns } from './store';
@@ -26,6 +28,7 @@
2628
import { invalidate } from '$app/navigation';
2729
import { Dependencies } from '$lib/constants';
2830
import { sdk } from '$lib/stores/sdk';
31+
import { isSmallViewport } from '$lib/stores/viewport';
2932
3033
export let data;
3134
@@ -55,46 +58,83 @@
5558
}
5659
});
5760
});
61+
62+
$: isDark = $app.themeInUse === 'dark';
63+
$: imgSrc = isDark
64+
? $isSmallViewport
65+
? EmptyDarkMobile
66+
: EmptyDark
67+
: $isSmallViewport
68+
? EmptyLightMobile
69+
: EmptyLight;
70+
$: imgClass = $isSmallViewport ? 'mobile' : 'desktop';
5871
</script>
5972

6073
<Container>
61-
<Layout.Stack direction="row" justifyContent="space-between">
62-
<Layout.Stack direction="row" alignItems="center">
63-
<SearchQuery placeholder="Search by name" />
74+
{#if data.sitesLive}
75+
<Layout.Stack direction="row" justifyContent="space-between">
76+
<Layout.Stack direction="row" alignItems="center">
77+
<SearchQuery placeholder="Search by name" />
78+
</Layout.Stack>
79+
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
80+
<ViewSelector
81+
{columns}
82+
view={data.view}
83+
hideColumns
84+
hideView={!data.siteList.total} />
85+
{#if $canWriteSites}
86+
<Button on:mousedown={() => (show = true)} event="create_site" size="s">
87+
<Icon icon={IconPlus} slot="start" size="s" />
88+
Create site
89+
</Button>
90+
{/if}
91+
</Layout.Stack>
6492
</Layout.Stack>
65-
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
66-
<ViewSelector {columns} view={data.view} hideColumns hideView={!data.siteList.total} />
67-
{#if $canWriteSites}
68-
<Button on:mousedown={() => (show = true)} event="create_site" size="s">
69-
<Icon icon={IconPlus} slot="start" size="s" />
70-
Create site
71-
</Button>
93+
{#if data.siteList.total}
94+
{#if data.view === View.Grid}
95+
<Grid siteList={data.siteList} />
96+
{:else}
97+
<Table siteList={data.siteList} />
7298
{/if}
73-
</Layout.Stack>
74-
</Layout.Stack>
75-
{#if data.siteList.total}
76-
{#if data.view === View.Grid}
77-
<Grid siteList={data.siteList} />
99+
<PaginationWithLimit
100+
name="Sites"
101+
limit={data.limit}
102+
offset={data.offset}
103+
total={data.siteList.total} />
104+
{:else if data.search}
105+
<EmptySearch target="sites" />
78106
{:else}
79-
<Table siteList={data.siteList} />
107+
<Empty
108+
single
109+
allowCreate={$canWriteSites}
110+
href="https://appwrite.io/docs/products/sites"
111+
description="Deploy and manage your web your web applications with Sites. "
112+
target="site"
113+
src={$app.themeInUse === 'dark' ? EmptyDark : EmptyLight}
114+
on:click={() => (show = true)}>
115+
</Empty>
80116
{/if}
81-
<PaginationWithLimit
82-
name="Sites"
83-
limit={data.limit}
84-
offset={data.offset}
85-
total={data.siteList.total} />
86-
{:else if data.search}
87-
<EmptySearch target="sites" />
88117
{:else}
89-
<Empty
90-
single
91-
allowCreate={$canWriteSites}
92-
href="https://appwrite.io/docs/products/sites"
93-
description="Deploy and manage your web your web applications with Sites. "
94-
target="site"
95-
src={$app.themeInUse === 'dark' ? EmptyDark : EmptyLight}
96-
on:click={() => (show = true)}>
97-
</Empty>
118+
<Card.Base padding="m">
119+
<Layout.Stack gap="xxl">
120+
<img src={imgSrc} alt="create" aria-hidden="true" height="242" class={imgClass} />
121+
122+
<Layout.Stack>
123+
<Layout.Stack gap="m" alignItems="center">
124+
<Typography.Title size="s" align="center" color="--fgcolor-neutral-primary">
125+
Appwrite Sites is in high demand
126+
</Typography.Title>
127+
128+
<div style:max-width="600px">
129+
<Typography.Text align="center" color="--fgcolor-neutral-secondary">
130+
To ensure a smooth experience for everyone, we’re rolling out access
131+
gradually.
132+
</Typography.Text>
133+
</div>
134+
</Layout.Stack>
135+
</Layout.Stack>
136+
</Layout.Stack>
137+
</Card.Base>
98138
{/if}
99139
</Container>
100140

‎src/routes/(console)/project-[region]-[project]/sites/+page.ts

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,31 @@
1-
import { Query } from '@appwrite.io/console';
1+
import { Query, type Models } from '@appwrite.io/console';
22
import { sdk } from '$lib/stores/sdk';
33
import { getLimit, getPage, getSearch, getView, pageToOffset, View } from '$lib/helpers/load';
44
import { CARD_LIMIT, Dependencies } from '$lib/constants';
55

66
export const load = async ({ url, depends, route, params }) => {
77
depends(Dependencies.SITES);
8-
98
const page = getPage(url);
109
const search = getSearch(url);
1110
const limit = getLimit(url, route, CARD_LIMIT);
1211
const offset = pageToOffset(page, limit);
1312
const view = getView(url, route, View.Grid, View.Grid);
1413

14+
const sitesLive = false;
15+
16+
if (!sitesLive)
17+
return {
18+
sitesLive,
19+
offset,
20+
limit,
21+
search,
22+
view,
23+
siteList: {
24+
total: 0,
25+
sites: []
26+
} as Models.SiteList
27+
};
28+
1529
const siteList = await sdk
1630
.forProject(params.region, params.project)
1731
.sites.list(
@@ -20,6 +34,7 @@ export const load = async ({ url, depends, route, params }) => {
2034
);
2135

2236
return {
37+
sitesLive,
2338
offset,
2439
limit,
2540
search,

0 commit comments

Comments
 (0)