MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

convert to new ListItem component

This commit is contained in:
Peter Clement 2022-06-26 20:46:31 +01:00
parent 18782a7425
commit d51efb2f70
9 changed files with 65 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/bbui/src/Table/Table.svelte
View File

@ -376,6 +376,8 @@
class="spectrum-Table-cell" class="spectrum-Table-cell"
class:spectrum-Table-cell--divider={!!schema[field].divider} class:spectrum-Table-cell--divider={!!schema[field].divider}
style={cellStyles[field]} style={cellStyles[field]}
on:click={e =>
schema[field].noPropagation && e.stopPropagation()}
> >
<CellRenderer <CellRenderer
{customRenderers} {customRenderers}

81
packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
View File

@ -12,11 +12,13 @@
Divider, Divider,
Detail, Detail,
notifications, notifications,
List,
ListItem,
StatusLight,
} from "@budibase/bbui" } from "@budibase/bbui"
import UserRow from "./_components/UserRow.svelte"
import { users, apps, groups } from "stores/portal" import { users, apps, groups } from "stores/portal"
import { onMount } from "svelte" import { onMount } from "svelte"
import GroupAppsRow from "./_components/GroupAppsRow.svelte" import { RoleUtils } from "@budibase/frontend-core"
export let groupId export let groupId
let popoverAnchor let popoverAnchor
@ -31,7 +33,7 @@
) )
let app_list = [ let app_list = [
{ {
access: "Developer", access: "ADMIN",
name: "test app", name: "test app",
icon: "Anchor", icon: "Anchor",
color: "blue", color: "blue",
@ -138,24 +140,22 @@
</Popover> </Popover>
</div> </div>
<div class="usersTable"> <List>
{#if group?.users?.length} {#if group?.users.length}
{#each group.users as user} {#each group.users as user}
<div> <ListItem subtitle={user.access} title={user.email} avatar
<UserRow {removeUser} {user} /> ><Icon
</div> on:click={() => removeUser(user._id)}
hoverable
size="L"
name="Close"
/></ListItem
>
{/each} {/each}
{:else} {:else}
<div> <ListItem icon="UserGroup" title="You have no users in this team" />
<div class="title header text-padding">
<Icon name="UserGroup" />
<div class="text-padding">
<Body size="S">You have no users in this team</Body>
</div>
</div>
</div>
{/if} {/if}
</div> </List>
<div <div
style="flex-direction: column; margin-top: var(--spacing-m)" style="flex-direction: column; margin-top: var(--spacing-m)"
class="title" class="title"
@ -167,24 +167,22 @@
</div> </div>
</div> </div>
<div style="" class="usersTable"> <List>
{#if app_list.length} {#if app_list.length}
{#each app_list as app} {#each app_list as app}
<div> <ListItem title={app.name} icon={app.icon} iconBackground={app.color}>
<GroupAppsRow {app} /> <div class="title ">
<StatusLight color={RoleUtils.getRoleColour(app.access)} />
<div style="margin-left: var(--spacing-s);">
<Body size="XS">{app.access}</Body>
</div> </div>
</div>
</ListItem>
{/each} {/each}
{:else} {:else}
<div> <ListItem icon="UserGroup" title="You have no users in this team" />
<div class="title header text-padding">
<Icon name="UserGroup" />
<div class="text-padding">
<Body size="S">You have no users in this team</Body>
</div>
</div>
</div>
{/if} {/if}
</div> </List>
</Layout> </Layout>
<style> <style>
@ -230,29 +228,4 @@
.circle > div { .circle > div {
padding: calc(1.5 * var(--spacing-xs)) var(--spacing-xs); padding: calc(1.5 * var(--spacing-xs)) var(--spacing-xs);
} }
.usersTable {
display: grid;
grid-template-rows: auto;
align-items: center;
border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
border-left: 1px solid var(--spectrum-alias-border-color-mid);
background: var(--spectrum-global-color-gray-50);
}
.usersTable :global(> div) {
background: var(--bg-color);
height: 70px;
display: grid;
align-items: center;
grid-gap: var(--spacing-xl);
grid-template-columns: 0.1fr 0.6fr 2fr 0.4fr;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 var(--spacing-s);
border-top: 1px solid var(--spectrum-alias-border-color-mid);
border-right: 1px solid var(--spectrum-alias-border-color-mid);
}
</style> </style>

73
packages/builder/src/pages/builder/portal/manage/groups/_components/GroupAppsRow.svelte
View File

@ -1,73 +0,0 @@
<script>
import { Icon, Body, StatusLight } from "@budibase/bbui"
export let app
</script>
<div class="title">
<div class="name app-icon" style="color: {app.icon?.color || ''}">
<Icon size="XL" name={app.icon?.name || "Apps"} />
</div>
</div>
<div class="desktop">
<div class="name-content">
<Body size="M">{app.name}</Body>
<div class="access">
<Body size="XS">{app.access}</Body>
</div>
</div>
</div>
<div class="desktop" />
<div class="apps">
<StatusLight purple />
<Body size="XS">{app.access}</Body>
</div>
<style>
.name {
grid-gap: var(--spacing-xl);
grid-template-columns: 75px 75px;
align-items: center;
}
.app-icon {
display: flex;
margin-left: var(--spacing-xl);
}
.apps {
display: flex;
align-items: baseline;
margin-right: var(--spacing-xl);
}
.access {
opacity: 0.5;
margin: var(--spacing-xs) 0 0 var(--spacing-m);
}
.name-content {
display: flex;
align-items: center;
}
.name {
text-decoration: none;
overflow: hidden;
}
.name :global(.spectrum-Heading) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: calc(1.5 * var(--spacing-xl));
}
.title :global(h1:hover) {
color: var(--spectrum-global-color-blue-600);
cursor: pointer;
transition: color 130ms ease;
}
@media (max-width: 640px) {
.desktop {
display: none !important;
}
}
</style>

66
packages/builder/src/pages/builder/portal/manage/groups/_components/UserRow.svelte
View File

@ -1,66 +0,0 @@
<script>
import { Icon, Body, Avatar } from "@budibase/bbui"
export let user
export let removeUser
</script>
<div class="title">
<div class="name" style="display: flex; margin-left: var(--spacing-xl)">
<div>
<Avatar size="L" initials="PC" />
</div>
</div>
</div>
<div class="desktop">
<div class="align-email">
<Body size="M">{user.email}</Body>
<div class="text">
<Body size="XS">{user.access}</Body>
</div>
</div>
</div>
<div class="desktop" />
<div>
<Icon on:click={() => removeUser(user._id)} hoverable size="L" name="Close" />
</div>
<style>
.name {
grid-gap: var(--spacing-xl);
grid-template-columns: 75px 75px;
align-items: center;
}
.text {
opacity: 0.5;
margin: var(--spacing-xs) 0 0 var(--spacing-m);
}
.align-email {
display: flex;
align-items: center;
}
.name {
text-decoration: none;
overflow: hidden;
}
.name :global(.spectrum-Heading) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: calc(1.5 * var(--spacing-xl));
}
.title :global(h1:hover) {
color: var(--spectrum-global-color-blue-600);
cursor: pointer;
transition: color 130ms ease;
}
@media (max-width: 640px) {
.desktop {
display: none !important;
}
}
</style>

1
packages/builder/src/pages/builder/portal/manage/groups/index.svelte
View File

@ -43,7 +43,6 @@
onMount(async () => { onMount(async () => {
try { try {
await groups.actions.init() await groups.actions.init()
console.log($groups)
} catch (error) { } catch (error) {
notifications.error("Error getting User groups") notifications.error("Error getting User groups")
} }

1
packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
View File

@ -1,7 +1,6 @@
<script> <script>
import { Icon, Body } from "@budibase/bbui" import { Icon, Body } from "@budibase/bbui"
export let value export let value
$: console.log(value)
</script> </script>
<div class="align"> <div class="align">

14
packages/builder/src/pages/builder/portal/manage/users/_components/NameTableRenderer.svelte
View File

@ -1,14 +1,21 @@
<script> <script>
import { Avatar } from "@budibase/bbui" import { Avatar } from "@budibase/bbui"
export let value export let value
</script> </script>
<div class="align"> <div class="align">
{#if value?.name} {#if value}
<div class="spacing"> <div class="spacing">
<Avatar size="L" initials="PC" /> <Avatar
size="L"
initials={value
.split(" ")
.map(x => x[0])
.join("")}
/>
</div> </div>
{value.name} {value}
{:else} {:else}
<div class="text">Invite pending...</div> <div class="text">Invite pending...</div>
{/if} {/if}
@ -17,6 +24,7 @@
<style> <style>
.align { .align {
display: flex; display: flex;
align-items: center;
} }
.spacing { .spacing {

15
packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte
View File

@ -2,18 +2,25 @@
import { Select } from "@budibase/bbui" import { Select } from "@budibase/bbui"
const options = [ const options = [
{ label: "App User", value: true }, { label: "App User", value: "appUser" },
{ label: "Developer", value: false }, { label: "Developer", value: "developer" },
{ label: "Admin", value: false }, { label: "Admin", value: "admin" },
] ]
</script> </script>
<div class="align"> <div class="align">
<Select {options} /> <Select
on:click={e => e.stopPropagation()}
value={"Admin"}
quiet
{options}
placeholder="Admin"
/>
</div> </div>
<style> <style>
.align { .align {
display: flex; display: flex;
z-index: 1000;
} }
</style> </style>

19
packages/builder/src/pages/builder/portal/manage/users/index.svelte
View File

@ -19,16 +19,20 @@
import NameTableRenderer from "./_components/NameTableRenderer.svelte" import NameTableRenderer from "./_components/NameTableRenderer.svelte"
import SettingsTableRenderer from "./_components/SettingsTableRenderer.svelte" import SettingsTableRenderer from "./_components/SettingsTableRenderer.svelte"
import RoleTableRenderer from "./_components/RoleTableRenderer.svelte" import RoleTableRenderer from "./_components/RoleTableRenderer.svelte"
import { goto } from "@roxi/routify"
const schema = { const schema = {
name: {}, name: {},
email: {}, email: {},
role: {}, role: { noPropagation: true, sortable: false },
userGroups: { displayName: "User groups" }, userGroups: { sortable: false, displayName: "User groups" },
apps: {}, apps: {},
settings: { width: "50px", displayName: "", align: "Right" }, settings: {
// access: {}, sortable: false,
// group: {} width: "50px",
displayName: "",
align: "Right",
},
} }
const accessTypes = [ const accessTypes = [
@ -71,6 +75,7 @@
}) })
return { return {
...user, ...user,
name: user.firstName ? user.firstName + " " + user.lastName : "",
userGroups, userGroups,
} }
}) })
@ -118,17 +123,19 @@
<Button icon="Import" primary>Import Users</Button> <Button icon="Import" primary>Import Users</Button>
</ButtonGroup> </ButtonGroup>
<Table <Table
on:click={({ detail }) => $goto(`./${detail._id}`)}
{schema} {schema}
data={enrichedUsers} data={enrichedUsers}
allowEditColumns={false} allowEditColumns={false}
allowEditRows={false} allowEditRows={false}
allowSelectRows={false} allowSelectRows={true}
showHeaderBorder={false} showHeaderBorder={false}
customRenderers={[ customRenderers={[
{ column: "userGroups", component: GroupsTableRenderer }, { column: "userGroups", component: GroupsTableRenderer },
{ column: "apps", component: AppsTableRenderer }, { column: "apps", component: AppsTableRenderer },
{ column: "name", component: NameTableRenderer }, { column: "name", component: NameTableRenderer },
{ column: "settings", component: SettingsTableRenderer }, { column: "settings", component: SettingsTableRenderer },
{ column: "role", component: RoleTableRenderer },
]} ]}
/> />
</Layout> </Layout>