ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

convert to new ListItem component

master
Peter Clement 4 years ago
parent
0129888761
commit
82ebc9526f
9 changed files with 65 additions and 209 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/bbui/src/Table/Table.svelte
  2. 83
      packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
  3. 73
      packages/builder/src/pages/builder/portal/manage/groups/_components/GroupAppsRow.svelte
  4. 66
      packages/builder/src/pages/builder/portal/manage/groups/_components/UserRow.svelte
  5. 1
      packages/builder/src/pages/builder/portal/manage/groups/index.svelte
  6. 1
      packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
  7. 14
      packages/builder/src/pages/builder/portal/manage/users/_components/NameTableRenderer.svelte
  8. 15
      packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte
  9. 19
      packages/builder/src/pages/builder/portal/manage/users/index.svelte

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}

83
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 ">
</div> <StatusLight color={RoleUtils.getRoleColour(app.access)} />
<div style="margin-left: var(--spacing-s);">
<Body size="XS">{app.access}</Body>
</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>

Write Preview
Loading…
Cancel
Save