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

Merge branch 'feat/user-groups-tab' of github.com:Budibase/budibase into app-overview-access-tab

This commit is contained in:
Andrew Kingston 2022-06-24 14:58:27 +01:00
parent 69a3c708a7 f28186e75c
commit e1d96eb915
9 changed files with 95 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -285,7 +285,7 @@
<div class="spectrum-Table-head"> <div class="spectrum-Table-head">
{#if showEditColumn} {#if showEditColumn}
<div <div
class:noBorder={!showHeaderBorder} class:noBorderHeader={!showHeaderBorder}
class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit" class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
> >
{#if allowSelectRows} {#if allowSelectRows}
@ -301,7 +301,7 @@
{#each fields as field} {#each fields as field}
<div <div
class="spectrum-Table-headCell" class="spectrum-Table-headCell"
class:noBorder={!showHeaderBorder} class:noBorderHeader={!showHeaderBorder}
class:spectrum-Table-headCell--alignCenter={schema[field] class:spectrum-Table-headCell--alignCenter={schema[field]
.align === "Center"} .align === "Center"}
class:spectrum-Table-headCell--alignRight={schema[field].align === class:spectrum-Table-headCell--alignRight={schema[field].align ===
@ -353,7 +353,7 @@
> >
{#if showEditColumn} {#if showEditColumn}
<div <div
class:noBorder={!showHeaderBorder} class:noBorderCheckbox={!showHeaderBorder}
class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit" class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
on:click={e => { on:click={e => {
toggleSelectRow(row) toggleSelectRow(row)
@ -482,12 +482,17 @@
border-right: var(--table-border); border-right: var(--table-border);
} }
.noBorder { .noBorderHeader {
border-top: none !important; border-top: none !important;
border-right: none !important; border-right: none !important;
border-left: none !important; border-left: none !important;
} }
.noBorderCheckbox {
border-top: none !important;
border-right: none !important;
}
.spectrum-Table-headCell--alignCenter { .spectrum-Table-headCell--alignCenter {
justify-content: center; justify-content: center;
} }

2
packages/builder/src/pages/builder/portal/manage/groups/_components/UserGroupsRow.svelte
View File

@ -57,7 +57,7 @@
>Manage</Button >Manage</Button
> >
</div> </div>
<div class=""> <div>
<ActionMenu align="right"> <ActionMenu align="right">
<span slot="control"> <span slot="control">
<Icon hoverable name="More" /> <Icon hoverable name="More" />

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

@ -16,7 +16,12 @@
import UserGroupsRow from "./_components/UserGroupsRow.svelte" import UserGroupsRow from "./_components/UserGroupsRow.svelte"
let modal let modal
let group = {} let group = {
name: "",
icon: "",
color: "",
users: [],
}
let proPlan = true let proPlan = true
async function deleteGroup(group) { async function deleteGroup(group) {
@ -38,6 +43,7 @@
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")
} }

2
packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
View File

@ -5,7 +5,7 @@
<div class="align"> <div class="align">
<div class="spacing"> <div class="spacing">
<Icon name="User" /> <Icon name="Apps" />
</div> </div>
{#if value?.apps?.length === 0} {#if value?.apps?.length === 0}
<div> <div>

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

@ -1,20 +1,21 @@
<script> <script>
import { Icon } 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">
<div class="spacing"> <div class="spacing">
<Icon name="User" /> <Icon name="User" />
</div> </div>
{#if value?.groups?.length === 0} {#if value.length === 0}
<div> <div>0</div>
<div>No groups</div> {:else if value.length === 1}
<div class="opacity">
<Body size="S">{value[0].name}</Body>
</div> </div>
{:else if value?.groups?.length === 1}
{value.groups[0]?.name}
{:else} {:else}
{parseInt(value?.groups?.length) || 0} {parseInt(value.length) || 0} groups
{/if} {/if}
</div> </div>
@ -23,6 +24,10 @@
display: flex; display: flex;
} }
.opacity {
opacity: 0.7;
}
.spacing { .spacing {
margin-right: var(--spacing-m); margin-right: var(--spacing-m);
} }

19
packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte Normal file
View File

@ -0,0 +1,19 @@
<script>
import { Select } from "@budibase/bbui"
const options = [
{ label: "App User", value: true },
{ label: "Developer", value: false },
{ label: "Admin", value: false },
]
</script>
<div class="align">
<Select {options} />
</div>
<style>
.align {
display: flex;
}
</style>

13
packages/builder/src/pages/builder/portal/manage/users/_components/SettingsTableRenderer.svelte Normal file
View File

@ -0,0 +1,13 @@
<script>
import { Icon, ActionMenu, MenuItem } from "@budibase/bbui"
</script>
<div>
<ActionMenu align="right">
<span slot="control">
<Icon hoverable name="More" />
</span>
<MenuItem icon="Delete">Delete</MenuItem>
<MenuItem icon="Delete">Edit</MenuItem>
</ActionMenu>
</div>

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

@ -5,27 +5,26 @@
Button, Button,
ButtonGroup, ButtonGroup,
Table, Table,
Label,
Layout, Layout,
Modal, Modal,
Icon, Icon,
notifications, notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import AddUserModal from "./_components/AddUserModal.svelte"
import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte" import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte"
import { users, groups } from "stores/portal" import { users, groups } from "stores/portal"
import { onMount } from "svelte" import { onMount } from "svelte"
import GroupsTableRenderer from "./_components/GroupsTableRenderer.svelte" import GroupsTableRenderer from "./_components/GroupsTableRenderer.svelte"
import AppsTableRenderer from "./_components/AppsTableRenderer.svelte" import AppsTableRenderer from "./_components/AppsTableRenderer.svelte"
import NameTableRenderer from "./_components/NameTableRenderer.svelte" import NameTableRenderer from "./_components/NameTableRenderer.svelte"
import SettingsTableRenderer from "./_components/SettingsTableRenderer.svelte"
const schema = { const schema = {
name: {}, name: {},
email: {}, email: {},
role: {}, role: {},
userGroup: { displayName: "User group" }, userGroups: { displayName: "User groups" },
apps: {}, apps: {},
settings: { displayName: "" }, settings: { width: "50px", displayName: "", align: "Right" },
// access: {}, // access: {},
// group: {} // group: {}
} }
@ -57,10 +56,25 @@
adminAccess: !!user.admin?.global, adminAccess: !!user.admin?.global,
})) }))
let createUserModal $: enrichedUsers = $users.map(user => {
let basicOnboardingModal let userGroups = []
$groups.forEach(group => {
if (group.users) {
group.users?.forEach(y => {
if (y._id === user._id) {
userGroups.push(group)
}
})
}
})
return {
...user,
userGroups,
}
})
function openBasicOnboardingModal() { let createUserModal
let basicOnboardingModal = function openBasicOnboardingModal() {
createUserModal.hide() createUserModal.hide()
basicOnboardingModal.show() basicOnboardingModal.show()
} }
@ -103,23 +117,21 @@
</ButtonGroup> </ButtonGroup>
<Table <Table
{schema} {schema}
data={filteredUsers || $users} data={enrichedUsers}
allowEditColumns={false} allowEditColumns={false}
allowEditRows={false} allowEditRows={false}
allowSelectRows={true} allowSelectRows={false}
showHeaderBorder={false} showHeaderBorder={false}
customRenderers={[ customRenderers={[
{ column: "userGroup", 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 },
]} ]}
/> />
</Layout> </Layout>
</Layout> </Layout>
<Modal bind:this={createUserModal}>
<AddUserModal on:change={openBasicOnboardingModal} />
</Modal>
<Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal> <Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal>
<style> <style>
@ -132,8 +144,4 @@
.access-text { .access-text {
margin-left: var(--spacing-m); margin-left: var(--spacing-m);
} }
.field > :global(*) + :global(*) {
margin-left: var(--spacing-m);
}
</style> </style>

9
packages/builder/src/stores/portal/groups.js
View File

@ -2,7 +2,14 @@ import { writable } from "svelte/store"
import { API } from "api" import { API } from "api"
export function createGroupsStore() { export function createGroupsStore() {
const store = writable([]) const DEFAULT_CONFIG = {
name: "",
icon: "",
color: "",
users: [],
}
const store = writable([DEFAULT_CONFIG])
const actions = { const actions = {
init: async () => { init: async () => {