Merge branch 'feat/user-groups-tab' of github.com:Budibase/budibase into app-overview-access-tab
This commit is contained in:
Andrew Kingston
commit
e1063bf0bf
|
|
@ -285,7 +285,7 @@
|
|||
<div class="spectrum-Table-head">
|
||||
{#if showEditColumn}
|
||||
<div
|
||||
class:noBorder={!showHeaderBorder}
|
||||
class:noBorderHeader={!showHeaderBorder}
|
||||
class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
|
||||
>
|
||||
{#if allowSelectRows}
|
||||
|
|
@ -301,7 +301,7 @@
|
|||
{#each fields as field}
|
||||
<div
|
||||
class="spectrum-Table-headCell"
|
||||
class:noBorder={!showHeaderBorder}
|
||||
class:noBorderHeader={!showHeaderBorder}
|
||||
class:spectrum-Table-headCell--alignCenter={schema[field]
|
||||
.align === "Center"}
|
||||
class:spectrum-Table-headCell--alignRight={schema[field].align ===
|
||||
|
|
@ -353,7 +353,7 @@
|
|||
>
|
||||
{#if showEditColumn}
|
||||
<div
|
||||
class:noBorder={!showHeaderBorder}
|
||||
class:noBorderCheckbox={!showHeaderBorder}
|
||||
class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
|
||||
on:click={e => {
|
||||
toggleSelectRow(row)
|
||||
|
|
@ -482,12 +482,17 @@
|
|||
border-right: var(--table-border);
|
||||
}
|
||||
|
||||
.noBorder {
|
||||
.noBorderHeader {
|
||||
border-top: none !important;
|
||||
border-right: none !important;
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
.noBorderCheckbox {
|
||||
border-top: none !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.spectrum-Table-headCell--alignCenter {
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
>Manage</Button
|
||||
>
|
||||
</div>
|
||||
<div class="">
|
||||
<div>
|
||||
<ActionMenu align="right">
|
||||
<span slot="control">
|
||||
<Icon hoverable name="More" />
|
||||
|
|
|
|||
|
|
@ -16,7 +16,12 @@
|
|||
import UserGroupsRow from "./_components/UserGroupsRow.svelte"
|
||||
|
||||
let modal
|
||||
let group = {}
|
||||
let group = {
|
||||
name: "",
|
||||
icon: "",
|
||||
color: "",
|
||||
users: [],
|
||||
}
|
||||
let proPlan = true
|
||||
|
||||
async function deleteGroup(group) {
|
||||
|
|
@ -38,6 +43,7 @@
|
|||
onMount(async () => {
|
||||
try {
|
||||
await groups.actions.init()
|
||||
console.log($groups)
|
||||
} catch (error) {
|
||||
notifications.error("Error getting User groups")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
<div class="align">
|
||||
<div class="spacing">
|
||||
<Icon name="User" />
|
||||
<Icon name="Apps" />
|
||||
</div>
|
||||
{#if value?.apps?.length === 0}
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,21 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
import { Icon, Body } from "@budibase/bbui"
|
||||
export let value
|
||||
$: console.log(value)
|
||||
</script>
|
||||
|
||||
<div class="align">
|
||||
<div class="spacing">
|
||||
<Icon name="User" />
|
||||
</div>
|
||||
{#if value?.groups?.length === 0}
|
||||
<div>
|
||||
<div>No groups</div>
|
||||
{#if value.length === 0}
|
||||
<div>0</div>
|
||||
{:else if value.length === 1}
|
||||
<div class="opacity">
|
||||
<Body size="S">{value[0].name}</Body>
|
||||
</div>
|
||||
{:else if value?.groups?.length === 1}
|
||||
{value.groups[0]?.name}
|
||||
{:else}
|
||||
{parseInt(value?.groups?.length) || 0}
|
||||
{parseInt(value.length) || 0} groups
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
|
@ -23,6 +24,10 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.opacity {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.spacing {
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -5,27 +5,26 @@
|
|||
Button,
|
||||
ButtonGroup,
|
||||
Table,
|
||||
Label,
|
||||
Layout,
|
||||
Modal,
|
||||
Icon,
|
||||
notifications,
|
||||
} from "@budibase/bbui"
|
||||
import AddUserModal from "./_components/AddUserModal.svelte"
|
||||
import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte"
|
||||
import { users, groups } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
import GroupsTableRenderer from "./_components/GroupsTableRenderer.svelte"
|
||||
import AppsTableRenderer from "./_components/AppsTableRenderer.svelte"
|
||||
import NameTableRenderer from "./_components/NameTableRenderer.svelte"
|
||||
import SettingsTableRenderer from "./_components/SettingsTableRenderer.svelte"
|
||||
|
||||
const schema = {
|
||||
name: {},
|
||||
email: {},
|
||||
role: {},
|
||||
userGroup: { displayName: "User group" },
|
||||
userGroups: { displayName: "User groups" },
|
||||
apps: {},
|
||||
settings: { displayName: "" },
|
||||
settings: { width: "50px", displayName: "", align: "Right" },
|
||||
// access: {},
|
||||
// group: {}
|
||||
}
|
||||
|
|
@ -57,10 +56,25 @@
|
|||
adminAccess: !!user.admin?.global,
|
||||
}))
|
||||
|
||||
let createUserModal
|
||||
let basicOnboardingModal
|
||||
$: enrichedUsers = $users.map(user => {
|
||||
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()
|
||||
basicOnboardingModal.show()
|
||||
}
|
||||
|
|
@ -103,23 +117,21 @@
|
|||
</ButtonGroup>
|
||||
<Table
|
||||
{schema}
|
||||
data={filteredUsers || $users}
|
||||
data={enrichedUsers}
|
||||
allowEditColumns={false}
|
||||
allowEditRows={false}
|
||||
allowSelectRows={true}
|
||||
allowSelectRows={false}
|
||||
showHeaderBorder={false}
|
||||
customRenderers={[
|
||||
{ column: "userGroup", component: GroupsTableRenderer },
|
||||
{ column: "userGroups", component: GroupsTableRenderer },
|
||||
{ column: "apps", component: AppsTableRenderer },
|
||||
{ column: "name", component: NameTableRenderer },
|
||||
{ column: "settings", component: SettingsTableRenderer },
|
||||
]}
|
||||
/>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
<Modal bind:this={createUserModal}>
|
||||
<AddUserModal on:change={openBasicOnboardingModal} />
|
||||
</Modal>
|
||||
<Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal>
|
||||
|
||||
<style>
|
||||
|
|
@ -132,8 +144,4 @@
|
|||
.access-text {
|
||||
margin-left: var(--spacing-m);
|
||||
}
|
||||
|
||||
.field > :global(*) + :global(*) {
|
||||
margin-left: var(--spacing-m);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,14 @@ import { writable } from "svelte/store"
|
|||
import { API } from "api"
|
||||
|
||||
export function createGroupsStore() {
|
||||
const store = writable([])
|
||||
const DEFAULT_CONFIG = {
|
||||
name: "",
|
||||
icon: "",
|
||||
color: "",
|
||||
users: [],
|
||||
}
|
||||
|
||||
const store = writable([DEFAULT_CONFIG])
|
||||
|
||||
const actions = {
|
||||
init: async () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue