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 feat/user-groups-tab

This commit is contained in:
Peter Clement 2022-06-24 15:08:09 +01:00
parent bff5d9aa69 e1d96eb915
commit 18782a7425
16 changed files with 414 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/bbui/src/Avatar/Avatar.svelte
View File

@ -4,7 +4,7 @@
["XXS", "--spectrum-alias-avatar-size-50"],
["XS", "--spectrum-alias-avatar-size-75"],
["S", "--spectrum-alias-avatar-size-200"],
["M", "--spectrum-alias-avatar-size-300"],
["M", "--spectrum-alias-avatar-size-400"],
["L", "--spectrum-alias-avatar-size-500"],
["XL", "--spectrum-alias-avatar-size-600"],
["XXL", "--spectrum-alias-avatar-size-700"],
@ -13,6 +13,19 @@
export let url = ""
export let disabled = false
export let initials = "JD"
const DefaultColor = "#3aab87"
$: color = getColor(initials)
const getColor = initials => {
if (!initials?.length) {
return DefaultColor
}
const code = initials[0].toLowerCase().charCodeAt(0)
const hue = ((code % 26) / 26) * 360
return `hsl(${hue}, 50%, 50%)`
}
</script>
{#if url}
@ -25,10 +38,11 @@
/>
{:else}
<div
class="spectrum-Avatar"
class:is-disabled={disabled}
style="width: var({sizes.get(size)}); height: var({sizes.get(
size
)}); font-size: calc(var({sizes.get(size)}) / 2)"
)}); font-size: calc(var({sizes.get(size)}) / 2); background: {color};"
>
{initials || ""}
</div>
@ -40,7 +54,6 @@
display: grid;
place-items: center;
font-weight: 600;
background: #3aab87;
border-radius: 50%;
overflow: hidden;
user-select: none;

219
packages/bbui/src/Form/Core/Picker.svelte
View File

@ -6,12 +6,15 @@
import { createEventDispatcher } from "svelte"
import clickOutside from "../../Actions/click_outside"
import Search from "./Search.svelte"
import Icon from "../../Icon/Icon.svelte"
import StatusLight from "../../StatusLight/StatusLight.svelte"
export let id = null
export let disabled = false
export let error = null
export let fieldText = ""
export let fieldIcon = ""
export let fieldColour = ""
export let isPlaceholder = false
export let placeholderOption = null
export let options = []
@ -20,6 +23,7 @@
export let getOptionLabel = option => option
export let getOptionValue = option => option
export let getOptionIcon = () => null
export let getOptionColour = () => null
export let open = false
export let readonly = false
export let quiet = false
@ -43,7 +47,7 @@
return
}
searchTerm = null
open = !open
open = true
}
const getSortedOptions = (options, getLabel, sort) => {
@ -71,73 +75,112 @@
}
</script>
<div use:clickOutside={() => (open = false)}>
<button
{id}
class="spectrum-Picker spectrum-Picker--sizeM"
class:spectrum-Picker--quiet={quiet}
{disabled}
class:is-invalid={!!error}
class:is-open={open}
aria-haspopup="listbox"
on:mousedown={onClick}
>
{#if fieldIcon}
<span class="icon-Placeholder-Padding">
<img src={fieldIcon} alt="icon" width="20" height="15" />
</span>
{/if}
<span
class="spectrum-Picker-label"
class:is-placeholder={isPlaceholder}
class:auto-width={autoWidth}
>
{fieldText}
<button
{id}
class="spectrum-Picker spectrum-Picker--sizeM"
class:spectrum-Picker--quiet={quiet}
{disabled}
class:is-invalid={!!error}
class:is-open={open}
aria-haspopup="listbox"
on:mousedown={onClick}
>
{#if fieldIcon}
<span class="option-left">
<Icon name={fieldIcon} />
</span>
{#if error}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
focusable="false"
aria-hidden="true"
aria-label="Folder"
>
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
{/if}
{:else if fieldColour}
<span class="option-left">
<StatusLight color={fieldColour} />
</span>
{/if}
<span
class="spectrum-Picker-label"
class:is-placeholder={isPlaceholder}
class:auto-width={autoWidth}
>
{fieldText}
</span>
{#if error}
<svg
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
focusable="false"
aria-hidden="true"
aria-label="Folder"
>
<use xlink:href="#spectrum-css-icon-Chevron100" />
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
</button>
{#if open}
<div
transition:fly|local={{ y: -20, duration: 200 }}
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
class:auto-width={autoWidth}
>
{#if autocomplete}
<Search
value={searchTerm}
on:change={event => (searchTerm = event.detail)}
{disabled}
placeholder="Search"
/>
{/if}
{#if fieldIcon && fieldColour}
<span class="option-right">
<StatusLight color={fieldColour} />
</span>
{/if}
<svg
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</button>
{#if open}
<div
use:clickOutside={() => (open = false)}
transition:fly|local={{ y: -20, duration: 200 }}
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
class:auto-width={autoWidth}
>
{#if autocomplete}
<Search
value={searchTerm}
on:change={event => (searchTerm = event.detail)}
{disabled}
placeholder="Search"
/>
{/if}
<ul class="spectrum-Menu" role="listbox">
{#if placeholderOption}
<li
class="spectrum-Menu-item placeholder"
class:is-selected={isPlaceholder}
role="option"
aria-selected="true"
tabindex="0"
on:click={() => onSelectOption(null)}
>
<span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>
{/if}
<ul class="spectrum-Menu" role="listbox">
{#if placeholderOption}
{#if filteredOptions.length}
{#each filteredOptions as option, idx}
<li
class="spectrum-Menu-item placeholder"
class:is-selected={isPlaceholder}
class="spectrum-Menu-item"
class:is-selected={isOptionSelected(getOptionValue(option, idx))}
role="option"
aria-selected="true"
tabindex="0"
on:click={() => onSelectOption(null)}
on:click={() => onSelectOption(getOptionValue(option, idx))}
>
<span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
{#if getOptionIcon(option, idx)}
<span class="option-left">
<Icon name={getOptionIcon(option, idx)} />
</span>
{:else if getOptionColour(option, idx)}
<span class="option-left">
<StatusLight color={getOptionColour(option, idx)} />
</span>
{/if}
<span class="spectrum-Menu-itemLabel">
{getOptionLabel(option, idx)}
</span>
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
focusable="false"
@ -145,45 +188,17 @@
>
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>
{/if}
{#if filteredOptions.length}
{#each filteredOptions as option, idx}
<li
class="spectrum-Menu-item"
class:is-selected={isOptionSelected(getOptionValue(option, idx))}
role="option"
aria-selected="true"
tabindex="0"
on:click={() => onSelectOption(getOptionValue(option, idx))}
>
{#if getOptionIcon(option, idx)}
<span class="icon-Padding">
<img
src={getOptionIcon(option, idx)}
alt="icon"
width="20"
height="15"
/>
</span>
{/if}
<span class="spectrum-Menu-itemLabel">
{getOptionLabel(option, idx)}
{#if getOptionIcon(option, idx) && getOptionColour(option, idx)}
<span class="option-right">
<StatusLight color={getOptionColour(option, idx)} />
</span>
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>
{/each}
{/if}
</ul>
</div>
{/if}
</div>
{/if}
</li>
{/each}
{/if}
</ul>
</div>
{/if}
<style>
.spectrum-Popover {
@ -213,13 +228,19 @@
padding-right: 2px;
}
.icon-Padding {
padding-right: 10px;
/* Icon and colour alignment */
.spectrum-Menu-checkmark {
align-self: center;
margin-top: 0;
margin-left: 12px;
}
.icon-Placeholder-Padding {
padding-top: 5px;
padding-right: 10px;
.option-left {
padding-right: 8px;
}
.option-right {
padding-left: 8px;
}
.spectrum-Popover :global(.spectrum-Search) {
margin-top: -1px;
margin-left: -1px;

41
packages/bbui/src/Form/Core/Select.svelte
View File

@ -11,6 +11,7 @@
export let getOptionLabel = option => option
export let getOptionValue = option => option
export let getOptionIcon = () => null
export let getOptionColour = () => null
export let readonly = false
export let quiet = false
export let autoWidth = false
@ -20,7 +21,19 @@
const dispatch = createEventDispatcher()
let open = false
$: fieldText = getFieldText(value, options, placeholder)
$: fieldIcon = getFieldIcon(value, options, placeholder)
$: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
$: fieldColour = getFieldAttribute(getOptionColour, value, options)
const getFieldAttribute = (getAttribute, value, options) => {
// Wait for options to load if there is a value but no options
if (!options?.length) {
return ""
}
const index = options.findIndex(
(option, idx) => getOptionValue(option, idx) === value
)
return index !== -1 ? getAttribute(options[index], index) : null
}
const getFieldText = (value, options, placeholder) => {
// Always use placeholder if no value
@ -28,27 +41,7 @@
return placeholder || "Choose an option"
}
// Wait for options to load if there is a value but no options
if (!options?.length) {
return ""
}
// Render the label if the selected option is found, otherwise raw value
const index = options.findIndex(
(option, idx) => getOptionValue(option, idx) === value
)
return index !== -1 ? getOptionLabel(options[index], index) : value
}
const getFieldIcon = (value, options) => {
// Wait for options to load if there is a value but no options
if (!options?.length) {
return ""
}
const index = options.findIndex(
(option, idx) => getOptionValue(option, idx) === value
)
return index !== -1 ? getOptionIcon(options[index], index) : null
return getFieldAttribute(getOptionLabel, value, options)
}
const selectOption = value => {
@ -66,12 +59,14 @@
{disabled}
{readonly}
{fieldText}
{fieldIcon}
{fieldColour}
{options}
{autoWidth}
{getOptionLabel}
{getOptionValue}
{getOptionIcon}
{fieldIcon}
{getOptionColour}
{autocomplete}
{sort}
isPlaceholder={value == null || value === ""}

2
packages/bbui/src/Form/Select.svelte
View File

@ -14,6 +14,7 @@
export let getOptionLabel = option => extractProperty(option, "label")
export let getOptionValue = option => extractProperty(option, "value")
export let getOptionIcon = option => option?.icon
export let getOptionColour = option => option?.colour
export let quiet = false
export let autoWidth = false
export let sort = false
@ -47,6 +48,7 @@
{getOptionLabel}
{getOptionValue}
{getOptionIcon}
{getOptionColour}
on:change={onChange}
on:click
/>

53
packages/bbui/src/List/Items/DetailSummary.svench
View File

@ -1,53 +0,0 @@
<script>
import { View } from "svench";
import DetailSummary from "./DetailSummary.svelte";
</script>
<svelte:head>
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</svelte:head>
<style>
div {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-m);
width: 120px;
}
</style>
<View name="default">
<div>
<DetailSummary name="Category 1">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</DetailSummary>
<DetailSummary name="Category 2">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</DetailSummary>
</div>
</View>
<View name="thin">
<div>
<DetailSummary thin name="Category 1">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</DetailSummary>
<DetailSummary thin name="Category 2">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</DetailSummary>
</div>
</View>

28
packages/bbui/src/List/List.svelte Normal file
View File

@ -0,0 +1,28 @@
<script>
import Detail from "../Typography/Detail.svelte"
export let title = null
</script>
<div>
{#if title}
<div class="title">
<Detail>{title}</Detail>
</div>
{/if}
<div class="list-items">
<slot />
</div>
</div>
<style>
.title {
margin-bottom: 6px;
}
.list-items {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
</style>

92
packages/bbui/src/List/ListItem.svelte Normal file
View File

@ -0,0 +1,92 @@
<script>
import Body from "../Typography/Body.svelte"
import Icon from "../Icon/Icon.svelte"
import Label from "../Label/Label.svelte"
import Avatar from "../Avatar/Avatar.svelte"
export let icon = null
export let iconBackground = null
export let avatar = false
export let title = null
export let subtitle = null
$: initials = avatar ? title?.[0] : null
</script>
<div class="list-item">
<div class="left">
{#if icon}
<div class="icon" style="background: {iconBackground || `transparent`};">
<Icon name={icon} size="S" color={iconBackground ? "white" : null} />
</div>
{/if}
{#if avatar}
<Avatar {initials} />
{/if}
{#if title}
<Body>{title}</Body>
{/if}
{#if subtitle}
<Label>{subtitle}</Label>
{/if}
</div>
<div class="right">
<slot />
</div>
</div>
<style>
.list-item {
padding: 0 16px;
height: 56px;
background: var(--spectrum-alias-background-color-tertiary);
display: flex;
flex-direction: row;
justify-content: space-between;
border: 1px solid var(--spectrum-global-color-gray-300);
}
.list-item:not(:first-child) {
border-top: none;
}
.list-item:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.list-item:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.left,
.right {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-xl);
}
.left {
width: 0;
flex: 1 1 auto;
}
.right {
flex: 0 0 auto;
}
.list-item :global(.spectrum-Icon),
.list-item :global(.spectrum-Avatar) {
flex: 0 0 auto;
}
.list-item :global(.spectrum-Body) {
color: var(--spectrum-global-color-gray-900);
}
.list-item :global(.spectrum-Body) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.icon {
width: var(--spectrum-alias-avatar-size-400);
height: var(--spectrum-alias-avatar-size-400);
display: grid;
place-items: center;
border-radius: 50%;
}
</style>

23
packages/bbui/src/StatusLight/StatusLight.svelte
View File

@ -17,10 +17,13 @@
export let negative = false
export let disabled = false
export let active = false
export let color = null
</script>
<div
class="spectrum-StatusLight spectrum-StatusLight--size{size}"
class:custom={!!color}
style={`--color: ${color};`}
class:spectrum-StatusLight--celery={celery}
class:spectrum-StatusLight--yellow={yellow}
class:spectrum-StatusLight--fuchsia={fuchsia}
@ -36,6 +39,26 @@
class:spectrum-StatusLight--negative={negative}
class:spectrum-StatusLight--disabled={disabled}
class:spectrum-StatusLight--active={active}
class:withText={!!$$slots.default}
>
<slot />
</div>
<style>
.spectrum-StatusLight {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
--spectrum-statuslight-info-text-gap: 4px;
min-height: 0;
padding-top: 0;
padding-bottom: 0;
}
.spectrum-StatusLight.withText::before {
margin-right: 10px;
}
.custom::before {
background: var(--color) !important;
}
</style>

2
packages/bbui/src/index.js
View File

@ -65,6 +65,8 @@ export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
export { default as RichTextField } from "./Form/RichTextField.svelte"
export { default as List } from "./List/List.svelte"
export { default as ListItem } from "./List/ListItem.svelte"
// Renderers
export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"

24
packages/builder/src/components/common/RoleSelect.svelte Normal file
View File

@ -0,0 +1,24 @@
<script>
import { Select } from "@budibase/bbui"
import { roles } from "stores/backend"
import { RoleUtils } from "@budibase/frontend-core"
export let value
export let error
export let placeholder = null
export let autoWidth = false
export let quiet = false
</script>
<Select
{autoWidth}
{quiet}
bind:value
on:change
options={$roles}
getOptionLabel={role => role.name}
getOptionValue={role => role._id}
getOptionColour={role => RoleUtils.getRoleColour(role._id)}
{placeholder}
{error}
/>

2
packages/builder/src/pages/builder/portal/_layout.svelte
View File

@ -14,6 +14,7 @@
} from "@budibase/bbui"
import ConfigChecklist from "components/common/ConfigChecklist.svelte"
import { organisation, auth } from "stores/portal"
import { roles } from "stores/backend"
import { admin as adminStore } from "stores/portal"
import { onMount } from "svelte"
import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
@ -126,6 +127,7 @@
} else {
try {
await organisation.init()
await roles.fetch()
} catch (error) {
notifications.error("Error getting org config")
}

4
packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
View File

@ -19,6 +19,7 @@
} from "@budibase/bbui"
import OverviewTab from "../_components/OverviewTab.svelte"
import SettingsTab from "../_components/SettingsTab.svelte"
import AccessTab from "../_components/AccessTab.svelte"
import { API } from "api"
import { store } from "builderStore"
import { apps, auth } from "stores/portal"
@ -302,6 +303,9 @@
on:unpublish={e => unpublishApp(e.detail)}
/>
</Tab>
<Tab title="Access">
<AccessTab app={selectedApp} />
</Tab>
{#if false}
<Tab title="Automation History">
<div class="container">Automation History contents</div>

51
packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte Normal file
View File

@ -0,0 +1,51 @@
<script>
import { Layout, Heading, Body, Button, List, ListItem } from "@budibase/bbui"
import RoleSelect from "components/common/RoleSelect.svelte"
</script>
<div class="access-tab">
<Layout>
<div>
<Heading>Access</Heading>
<div class="subtitle">
<Body size="S">
Assign users to your app and define their access here</Body
>
<Button icon="User" cta>Assign users</Button>
</div>
</div>
<List title="User Groups">
<ListItem title="Design Team" icon="Brush" iconBackground="#348c6f">
<RoleSelect autoWidth quiet value="POWER" />
</ListItem>
<ListItem title="Admin Team" icon="UserAdmin" iconBackground="#843c6f">
<RoleSelect autoWidth quiet value="ADMIN" />
</ListItem>
</List>
<List title="Users">
<ListItem title="andy@gmail.com" avatar>
<RoleSelect autoWidth quiet value="BASIC" />
</ListItem>
<ListItem title="jeff@gmail.com" avatar>
<RoleSelect autoWidth quiet value="BASIC" />
</ListItem>
<ListItem title="tom@gmail.com" avatar>
<RoleSelect autoWidth quiet value="BASIC" />
</ListItem>
</List>
</Layout>
</div>
<style>
.access-tab {
max-width: 600px;
margin: 0 auto;
padding: 40px;
}
.subtitle {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
</style>

9
packages/frontend-core/src/constants.js
View File

@ -63,3 +63,12 @@ export const TableNames = {
* - Coerce types for search endpoint
*/
export const ApiVersion = "1"
// Role IDs
export const Roles = {
ADMIN: "ADMIN",
POWER: "POWER",
BASIC: "BASIC",
PUBLIC: "PUBLIC",
BUILDER: "BUILDER",
}

1
packages/frontend-core/src/utils/index.js
View File

@ -1,4 +1,5 @@
export * as LuceneUtils from "./lucene"
export * as JSONUtils from "./json"
export * as CookieUtils from "./cookies"
export * as RoleUtils from "./roles"
export * as Utils from "./utils"

22
packages/frontend-core/src/utils/roles.js Normal file
View File

@ -0,0 +1,22 @@
import { Roles } from "../constants"
const RolePriorities = {
[Roles.ADMIN]: 4,
[Roles.POWER]: 3,
[Roles.BASIC]: 2,
[Roles.PUBLIC]: 1,
}
const RoleColours = {
[Roles.ADMIN]: "var(--spectrum-global-color-static-seafoam-400)",
[Roles.POWER]: "var(--spectrum-global-color-static-purple-400)",
[Roles.BASIC]: "var(--spectrum-global-color-static-magenta-400)",
[Roles.PUBLIC]: "var(--spectrum-global-color-static-yellow-400)",
}
export const getRolePriority = roleId => {
return RolePriorities[roleId] ?? 0
}
export const getRoleColour = roleId => {
return RoleColours[roleId] ?? "rgb(20, 115, 230)"
}