mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
feat: execute step
This commit is contained in:
Arman
@@ -0,0 +1,86 @@
|
||||
<script lang="ts">
|
||||
import { InputSearch, Button } from '$lib/elements/forms';
|
||||
import { Modal, Avatar } from '$lib/components';
|
||||
import { teamsList } from '../authentication/store';
|
||||
import { sdkForProject } from '$lib/stores/sdk';
|
||||
import { createFunction } from './wizard/store';
|
||||
|
||||
export let showTeams = false;
|
||||
|
||||
let search: string;
|
||||
let offset = 0;
|
||||
let limit = 5;
|
||||
|
||||
const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 64, 64).toString();
|
||||
|
||||
function handleCheck(id: string) {
|
||||
if ($createFunction.execute.includes(`team:${id}`)) {
|
||||
$createFunction.execute = $createFunction.execute.filter(
|
||||
(item) => item !== `team:${id}`
|
||||
);
|
||||
} else {
|
||||
$createFunction.execute.push(`team:${id}`);
|
||||
}
|
||||
$createFunction = $createFunction;
|
||||
}
|
||||
|
||||
$: teamsList.load(search, limit, offset ?? 0);
|
||||
$: if (search) offset = 0;
|
||||
</script>
|
||||
|
||||
<Modal bind:show={showTeams} size="big">
|
||||
<svelte:fragment slot="header">Select teams</svelte:fragment>
|
||||
<InputSearch bind:value={search} placeholder="Search" />
|
||||
{#if $teamsList?.total}
|
||||
<div class="table-wrapper">
|
||||
<div class="table is-remove-outer-styles">
|
||||
<ul class="table-thead">
|
||||
{#each $teamsList.teams as team}
|
||||
<li class="table-row">
|
||||
<div class="u-flex u-gap-12 u-cross-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="team"
|
||||
checked={$createFunction.execute.includes(`team:${team.$id}`)}
|
||||
id={team.$id}
|
||||
on:change={() => {
|
||||
handleCheck(team.$id);
|
||||
}} />
|
||||
<label for={team.$id} class="u-flex u-gap-12 u-cross-center">
|
||||
<Avatar size={32} src={getAvatar(team.name)} name={team.name} />
|
||||
<div>
|
||||
<p class="text">
|
||||
{team.name ?? '-'}
|
||||
</p>
|
||||
<span class="text u-small">team:{team.$id}</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-flex u-main-space-between">
|
||||
<p class="text u-small">Total results: {$teamsList?.total}</p>
|
||||
|
||||
<div class="u-flex u-gap-12">
|
||||
<Button text on:click={() => (offset = offset - limit)} disabled={offset === 0}>
|
||||
<span class="icon-cheveron-left" />
|
||||
Prev
|
||||
</Button>
|
||||
<Button
|
||||
text
|
||||
on:click={() => (offset = offset + limit)}
|
||||
disabled={offset + limit >= $teamsList.total}>
|
||||
Next
|
||||
<span class="icon-cheveron-right" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<svelte:fragment slot="footer">
|
||||
<Button secondary on:click={() => (showTeams = false)}>Cancel</Button>
|
||||
<Button submit>Add</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script lang="ts">
|
||||
import { InputSearch, Button } from '$lib/elements/forms';
|
||||
import { Modal, Avatar } from '$lib/components';
|
||||
import { usersList } from '../authentication/store';
|
||||
import { sdkForProject } from '$lib/stores/sdk';
|
||||
import { createFunction } from './wizard/store';
|
||||
|
||||
export let showUsers = false;
|
||||
|
||||
let search: string;
|
||||
let offset = 0;
|
||||
let limit = 5;
|
||||
|
||||
const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 64, 64).toString();
|
||||
|
||||
function handleCheck(id: string) {
|
||||
if ($createFunction.execute.includes(`user:${id}`)) {
|
||||
$createFunction.execute = $createFunction.execute.filter(
|
||||
(item) => item !== `user:${id}`
|
||||
);
|
||||
} else {
|
||||
$createFunction.execute.push(`user:${id}`);
|
||||
}
|
||||
$createFunction = $createFunction;
|
||||
}
|
||||
|
||||
$: usersList.load(search, limit, offset ?? 0);
|
||||
$: if (search) offset = 0;
|
||||
</script>
|
||||
|
||||
<Modal bind:show={showUsers} size="big">
|
||||
<svelte:fragment slot="header">Select Users</svelte:fragment>
|
||||
<InputSearch bind:value={search} placeholder="Search" />
|
||||
{#if $usersList?.total}
|
||||
<div class="table-wrapper">
|
||||
<div class="table is-remove-outer-styles">
|
||||
<ul class="table-thead">
|
||||
{#each $usersList.users as user}
|
||||
<li class="table-row">
|
||||
<div class="u-flex u-gap-12 u-cross-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="user"
|
||||
checked={$createFunction.execute.includes(`user:${user.$id}`)}
|
||||
id={user.$id}
|
||||
on:change={() => {
|
||||
handleCheck(user.$id);
|
||||
}} />
|
||||
<label for={user.$id} class="u-flex u-gap-12 u-cross-center">
|
||||
<Avatar size={32} src={getAvatar(user.name)} name={user.name} />
|
||||
<div>
|
||||
<p class="text">
|
||||
{user.name ?? user.email ?? user.phone ?? '-'}
|
||||
</p>
|
||||
<span class="text u-small">user:{user.$id}</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="u-flex u-main-space-between">
|
||||
<p class="text u-small">Total results: {$usersList?.total}</p>
|
||||
|
||||
<div class="u-flex u-gap-12">
|
||||
<Button text on:click={() => (offset = offset - limit)} disabled={offset === 0}>
|
||||
<span class="icon-cheveron-left" />
|
||||
Prev
|
||||
</Button>
|
||||
<Button
|
||||
text
|
||||
on:click={() => (offset = offset + limit)}
|
||||
disabled={offset + limit >= $usersList.total}>
|
||||
Next
|
||||
<span class="icon-cheveron-right" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<svelte:fragment slot="footer">
|
||||
<Button secondary on:click={() => (showUsers = false)}>Cancel</Button>
|
||||
<Button submit>Add</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
@@ -2,7 +2,9 @@
|
||||
import { WizardStep } from '$lib/layout';
|
||||
import { Button } from '$lib/elements/forms';
|
||||
import { DropList, DropListItem } from '$lib/components';
|
||||
// import { createFunction } from './store';
|
||||
import { createFunction } from './store';
|
||||
import SelectUsers from '../selectUsers.svelte';
|
||||
import SelectTeams from '../selectTeams.svelte';
|
||||
|
||||
let showDropdown = false;
|
||||
let showUsers = false;
|
||||
@@ -20,6 +22,41 @@
|
||||
|
||||
ROLE
|
||||
|
||||
<div class="table-with-scroll">
|
||||
<div class="table-wrapper">
|
||||
<div class="table is-remove-outer-styles">
|
||||
<ul class="table-thead">
|
||||
{#each $createFunction.execute as id}
|
||||
<li class="table-row">
|
||||
<div class="table-col" data-title="Name">
|
||||
<span class="text">blahblahkey</span>
|
||||
</div>
|
||||
<div class="table-col" data-title="Name">
|
||||
<span class="text">{id}</span>
|
||||
</div>
|
||||
<div
|
||||
class="table-col u-overflow-visible"
|
||||
data-title="options"
|
||||
style="--p-col-width:40">
|
||||
<button
|
||||
class="button is-text is-only-icon"
|
||||
aria-label="delete id"
|
||||
on:click={() => {
|
||||
$createFunction.execute = $createFunction.execute.filter(
|
||||
(item) => item !== id
|
||||
);
|
||||
$createFunction = $createFunction;
|
||||
}}>
|
||||
<span class="icon-trash" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DropList bind:show={showDropdown} position="bottom" arrow={false}>
|
||||
<Button text on:click={() => (showDropdown = !showDropdown)}>
|
||||
<span class="icon-plus" aria-hidden="true" />
|
||||
@@ -27,11 +64,32 @@
|
||||
</Button>
|
||||
|
||||
<svelte:fragment slot="list">
|
||||
<DropListItem>Any</DropListItem>
|
||||
<DropListItem>All guests</DropListItem>
|
||||
<DropListItem>All users</DropListItem>
|
||||
<DropListItem
|
||||
on:click={() => {
|
||||
$createFunction.execute.push('role:any');
|
||||
$createFunction = $createFunction;
|
||||
}}>
|
||||
Any
|
||||
</DropListItem>
|
||||
<DropListItem
|
||||
on:click={() => {
|
||||
$createFunction.execute.push('role:guest');
|
||||
$createFunction = $createFunction;
|
||||
}}>
|
||||
All guests
|
||||
</DropListItem>
|
||||
<DropListItem
|
||||
on:click={() => {
|
||||
$createFunction.execute.push('role:member');
|
||||
$createFunction = $createFunction;
|
||||
}}>
|
||||
All users
|
||||
</DropListItem>
|
||||
<DropListItem on:click={() => (showUsers = true)}>Select users</DropListItem>
|
||||
<DropListItem on:click={() => (showTeams = true)}>Select teams</DropListItem>
|
||||
</svelte:fragment>
|
||||
</DropList>
|
||||
</WizardStep>
|
||||
|
||||
<SelectUsers {showUsers} />
|
||||
<SelectTeams {showTeams} />
|
||||
|
||||
Reference in New Issue
Block a user