convert to new ListItem component
This commit is contained in:
Peter Clement
parent
0129888761
commit
82ebc9526f
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -43,7 +43,6 @@
|
|||
onMount(async () => {
|
||||
try {
|
||||
await groups.actions.init()
|
||||
console.log($groups)
|
||||
} catch (error) {
|
||||
notifications.error("Error getting User groups")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
import { Icon, Body } from "@budibase/bbui"
|
||||
export let value
|
||||
$: console.log(value)
|
||||
</script>
|
||||
|
||||
<div class="align">
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue