uo9xpb74
/
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
Split 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--divider={!!schema[field].divider}
style={cellStyles[field]}
on:click={e =>
schema[field].noPropagation && e.stopPropagation()}
>
<CellRenderer
{customRenderers}

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

@ -12,11 +12,13 @@
Divider,
Detail,
notifications,
List,
ListItem,
StatusLight,
} from "@budibase/bbui"
import UserRow from "./_components/UserRow.svelte"
import { users, apps, groups } from "stores/portal"
import { onMount } from "svelte"
import GroupAppsRow from "./_components/GroupAppsRow.svelte"
import { RoleUtils } from "@budibase/frontend-core"
export let groupId
let popoverAnchor
@ -31,7 +33,7 @@
)
let app_list = [
{
access: "Developer",
access: "ADMIN",
name: "test app",
icon: "Anchor",
color: "blue",
@ -138,24 +140,22 @@
</Popover>
</div>
<div class="usersTable">
{#if group?.users?.length}
<List>
{#if group?.users.length}
{#each group.users as user}
<div>
<UserRow {removeUser} {user} />
</div>
<ListItem subtitle={user.access} title={user.email} avatar
><Icon
on:click={() => removeUser(user._id)}
hoverable
size="L"
name="Close"
/></ListItem
>
{/each}
{:else}
<div>
<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>
<ListItem icon="UserGroup" title="You have no users in this team" />
{/if}
</div>
</List>
<div
style="flex-direction: column; margin-top: var(--spacing-m)"
class="title"
@ -167,24 +167,22 @@
</div>
</div>
<div style="" class="usersTable">
<List>
{#if app_list.length}
{#each app_list as app}
<div>
<GroupAppsRow {app} />
</div>
<ListItem title={app.name} icon={app.icon} iconBackground={app.color}>
<div class="title ">
<StatusLight color={RoleUtils.getRoleColour(app.access)} />
<div style="margin-left: var(--spacing-s);">
<Body size="XS">{app.access}</Body>
</div>
</div>
</ListItem>
{/each}
{:else}
<div>
<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>
<ListItem icon="UserGroup" title="You have no users in this team" />
{/if}
</div>
</List>
</Layout>
<style>
@ -230,29 +228,4 @@
.circle > div {
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>

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 () => {
try {
await groups.actions.init()
console.log($groups)
} catch (error) {
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>
import { Icon, Body } from "@budibase/bbui"
export let value
$: console.log(value)
</script>
<div class="align">

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

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

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

@ -2,18 +2,25 @@
import { Select } from "@budibase/bbui"
const options = [
{ label: "App User", value: true },
{ label: "Developer", value: false },
{ label: "Admin", value: false },
{ label: "App User", value: "appUser" },
{ label: "Developer", value: "developer" },
{ label: "Admin", value: "admin" },
]
</script>
<div class="align">
<Select {options} />
<Select
on:click={e => e.stopPropagation()}
value={"Admin"}
quiet
{options}
placeholder="Admin"
/>
</div>
<style>
.align {
display: flex;
z-index: 1000;
}
</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 SettingsTableRenderer from "./_components/SettingsTableRenderer.svelte"
import RoleTableRenderer from "./_components/RoleTableRenderer.svelte"
import { goto } from "@roxi/routify"
const schema = {
name: {},
email: {},
role: {},
userGroups: { displayName: "User groups" },
role: { noPropagation: true, sortable: false },
userGroups: { sortable: false, displayName: "User groups" },
apps: {},
settings: { width: "50px", displayName: "", align: "Right" },
// access: {},
// group: {}
settings: {
sortable: false,
width: "50px",
displayName: "",
align: "Right",
},
}
const accessTypes = [
@ -71,6 +75,7 @@
})
return {
...user,
name: user.firstName ? user.firstName + " " + user.lastName : "",
userGroups,
}
})
@ -118,17 +123,19 @@
<Button icon="Import" primary>Import Users</Button>
</ButtonGroup>
<Table
on:click={({ detail }) => $goto(`./${detail._id}`)}
{schema}
data={enrichedUsers}
allowEditColumns={false}
allowEditRows={false}
allowSelectRows={false}
allowSelectRows={true}
showHeaderBorder={false}
customRenderers={[
{ column: "userGroups", component: GroupsTableRenderer },
{ column: "apps", component: AppsTableRenderer },
{ column: "name", component: NameTableRenderer },
{ column: "settings", component: SettingsTableRenderer },
{ column: "role", component: RoleTableRenderer },
]}
/>
</Layout>

Write Preview
Loading…
Cancel
Save