mirror of https://github.com/Budibase/budibase.git
mike12345567
4 years ago
212 changed files with 8933 additions and 1729 deletions
@ -0,0 +1,64 @@ |
|||
import { publishEvent } from "../events" |
|||
import { |
|||
Event, |
|||
UserGroup, |
|||
GroupCreatedEvent, |
|||
GroupDeletedEvent, |
|||
GroupUpdatedEvent, |
|||
GroupUsersAddedEvent, |
|||
GroupUsersDeletedEvent, |
|||
GroupAddedOnboardingEvent, |
|||
UserGroupRoles, |
|||
} from "@budibase/types" |
|||
|
|||
export async function created(group: UserGroup, timestamp?: number) { |
|||
const properties: GroupCreatedEvent = { |
|||
groupId: group._id as string, |
|||
} |
|||
await publishEvent(Event.USER_GROUP_CREATED, properties, timestamp) |
|||
} |
|||
|
|||
export async function updated(group: UserGroup) { |
|||
const properties: GroupUpdatedEvent = { |
|||
groupId: group._id as string, |
|||
} |
|||
await publishEvent(Event.USER_GROUP_UPDATED, properties) |
|||
} |
|||
|
|||
export async function deleted(group: UserGroup) { |
|||
const properties: GroupDeletedEvent = { |
|||
groupId: group._id as string, |
|||
} |
|||
await publishEvent(Event.USER_GROUP_DELETED, properties) |
|||
} |
|||
|
|||
export async function usersAdded(count: number, group: UserGroup) { |
|||
const properties: GroupUsersAddedEvent = { |
|||
count, |
|||
groupId: group._id as string, |
|||
} |
|||
await publishEvent(Event.USER_GROUP_USERS_ADDED, properties) |
|||
} |
|||
|
|||
export async function usersDeleted(emails: string[], group: UserGroup) { |
|||
const properties: GroupUsersDeletedEvent = { |
|||
count: emails.length, |
|||
groupId: group._id as string, |
|||
} |
|||
await publishEvent(Event.USER_GROUP_USERS_REMOVED, properties) |
|||
} |
|||
|
|||
export async function createdOnboarding(groupId: string) { |
|||
const properties: GroupAddedOnboardingEvent = { |
|||
groupId: groupId, |
|||
onboarding: true, |
|||
} |
|||
await publishEvent(Event.USER_GROUP_ONBOARDING, properties) |
|||
} |
|||
|
|||
export async function permissionsEdited(roles: UserGroupRoles) { |
|||
const properties: UserGroupRoles = { |
|||
...roles, |
|||
} |
|||
await publishEvent(Event.USER_GROUP_PERMISSIONS_EDITED, properties) |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
module.exports = async (ctx, next) => { |
|||
if ( |
|||
!ctx.internal && |
|||
(!ctx.user || !ctx.user.admin || !ctx.user.admin.global) |
|||
) { |
|||
ctx.throw(403, "Admin user only endpoint.") |
|||
} |
|||
return next() |
|||
} |
|||
@ -0,0 +1,28 @@ |
|||
function validate(schema, property) { |
|||
// Return a Koa middleware function
|
|||
return (ctx, next) => { |
|||
if (!schema) { |
|||
return next() |
|||
} |
|||
let params = null |
|||
if (ctx[property] != null) { |
|||
params = ctx[property] |
|||
} else if (ctx.request[property] != null) { |
|||
params = ctx.request[property] |
|||
} |
|||
const { error } = schema.validate(params) |
|||
if (error) { |
|||
ctx.throw(400, `Invalid ${property} - ${error.message}`) |
|||
return |
|||
} |
|||
return next() |
|||
} |
|||
} |
|||
|
|||
module.exports.body = schema => { |
|||
return validate(schema, "body") |
|||
} |
|||
|
|||
module.exports.params = schema => { |
|||
return validate(schema, "params") |
|||
} |
|||
@ -0,0 +1,228 @@ |
|||
<script> |
|||
import "@spectrum-css/inputgroup/dist/index-vars.css" |
|||
import "@spectrum-css/popover/dist/index-vars.css" |
|||
import "@spectrum-css/menu/dist/index-vars.css" |
|||
import { fly } from "svelte/transition" |
|||
import { createEventDispatcher } from "svelte" |
|||
import clickOutside from "../../Actions/click_outside" |
|||
|
|||
export let inputValue |
|||
export let dropdownValue |
|||
export let id = null |
|||
export let inputType = "text" |
|||
export let placeholder = "Choose an option or type" |
|||
export let disabled = false |
|||
export let readonly = false |
|||
export let updateOnChange = true |
|||
export let error = null |
|||
export let options = [] |
|||
export let getOptionLabel = option => extractProperty(option, "label") |
|||
export let getOptionValue = option => extractProperty(option, "value") |
|||
|
|||
export let isOptionSelected = () => false |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
let open = false |
|||
let focus = false |
|||
|
|||
$: fieldText = getFieldText(dropdownValue, options, placeholder) |
|||
|
|||
const getFieldText = (dropdownValue, options, placeholder) => { |
|||
// Always use placeholder if no value |
|||
if (dropdownValue == null || dropdownValue === "") { |
|||
return placeholder || "Choose an option or type" |
|||
} |
|||
|
|||
// 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 selected = options.find( |
|||
option => getOptionValue(option) === dropdownValue |
|||
) |
|||
return selected ? getOptionLabel(selected) : dropdownValue |
|||
} |
|||
|
|||
const updateValue = newValue => { |
|||
if (readonly) { |
|||
return |
|||
} |
|||
dispatch("change", newValue) |
|||
} |
|||
|
|||
const onFocus = () => { |
|||
if (readonly) { |
|||
return |
|||
} |
|||
focus = true |
|||
} |
|||
|
|||
const onBlur = event => { |
|||
if (readonly) { |
|||
return |
|||
} |
|||
focus = false |
|||
updateValue(event.target.value) |
|||
} |
|||
|
|||
const onInput = event => { |
|||
if (readonly || !updateOnChange) { |
|||
return |
|||
} |
|||
updateValue(event.target.value) |
|||
} |
|||
|
|||
const updateValueOnEnter = event => { |
|||
if (readonly) { |
|||
return |
|||
} |
|||
if (event.key === "Enter") { |
|||
updateValue(event.target.value) |
|||
} |
|||
} |
|||
|
|||
const onClick = () => { |
|||
dispatch("click") |
|||
if (readonly) { |
|||
return |
|||
} |
|||
open = true |
|||
} |
|||
|
|||
const onPick = newValue => { |
|||
dispatch("pick", newValue) |
|||
open = false |
|||
} |
|||
|
|||
const extractProperty = (value, property) => { |
|||
if (value && typeof value === "object") { |
|||
return value[property] |
|||
} |
|||
return value |
|||
} |
|||
</script> |
|||
|
|||
<div |
|||
class="spectrum-InputGroup" |
|||
class:is-invalid={!!error} |
|||
class:is-disabled={disabled} |
|||
> |
|||
<div |
|||
class="spectrum-Textfield spectrum-InputGroup-textfield" |
|||
class:is-invalid={!!error} |
|||
class:is-disabled={disabled} |
|||
class:is-focused={focus} |
|||
> |
|||
{#if error} |
|||
<svg |
|||
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" |
|||
focusable="false" |
|||
aria-hidden="true" |
|||
> |
|||
<use xlink:href="#spectrum-icon-18-Alert" /> |
|||
</svg> |
|||
{/if} |
|||
|
|||
<input |
|||
{id} |
|||
on:click |
|||
on:blur |
|||
on:focus |
|||
on:input |
|||
on:keyup |
|||
on:blur={onBlur} |
|||
on:focus={onFocus} |
|||
on:input={onInput} |
|||
on:keyup={updateValueOnEnter} |
|||
value={inputValue || ""} |
|||
placeholder={placeholder || ""} |
|||
{disabled} |
|||
{readonly} |
|||
{inputType} |
|||
class="spectrum-Textfield-input spectrum-InputGroup-input" |
|||
/> |
|||
</div> |
|||
<div style="width: 30%"> |
|||
<button |
|||
{id} |
|||
class="spectrum-Picker spectrum-Picker--sizeM override-borders" |
|||
{disabled} |
|||
class:is-open={open} |
|||
aria-haspopup="listbox" |
|||
on:mousedown={onClick} |
|||
> |
|||
<span class="spectrum-Picker-label"> |
|||
<div> |
|||
{fieldText} |
|||
</div></span |
|||
> |
|||
<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" |
|||
> |
|||
<ul class="spectrum-Menu" role="listbox"> |
|||
{#each options as option, idx} |
|||
<li |
|||
class="spectrum-Menu-item" |
|||
class:is-selected={isOptionSelected(getOptionValue(option, idx))} |
|||
role="option" |
|||
aria-selected="true" |
|||
tabindex="0" |
|||
on:click={() => onPick(getOptionValue(option, idx))} |
|||
> |
|||
<span class="spectrum-Menu-itemLabel"> |
|||
{getOptionLabel(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} |
|||
</ul> |
|||
</div> |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.spectrum-InputGroup { |
|||
min-width: 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
.spectrum-InputGroup-input { |
|||
border-right-width: 1px; |
|||
} |
|||
.spectrum-Textfield { |
|||
width: 100%; |
|||
} |
|||
.spectrum-Textfield-input { |
|||
width: 0; |
|||
} |
|||
|
|||
.override-borders { |
|||
border-top-left-radius: 0px; |
|||
border-bottom-left-radius: 0px; |
|||
} |
|||
.spectrum-Popover { |
|||
max-height: 240px; |
|||
z-index: 999; |
|||
top: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,436 @@ |
|||
<script> |
|||
import "@spectrum-css/inputgroup/dist/index-vars.css" |
|||
import "@spectrum-css/popover/dist/index-vars.css" |
|||
import "@spectrum-css/menu/dist/index-vars.css" |
|||
import { fly } from "svelte/transition" |
|||
import { createEventDispatcher } from "svelte" |
|||
import clickOutside from "../../Actions/click_outside" |
|||
import Icon from "../../Icon/Icon.svelte" |
|||
import StatusLight from "../../StatusLight/StatusLight.svelte" |
|||
import Detail from "../../Typography/Detail.svelte" |
|||
import Search from "./Search.svelte" |
|||
|
|||
export let primaryLabel = "" |
|||
export let primaryValue = null |
|||
export let id = null |
|||
export let placeholder = "Choose an option or type" |
|||
export let disabled = false |
|||
export let readonly = false |
|||
export let updateOnChange = true |
|||
export let error = null |
|||
export let secondaryOptions = [] |
|||
export let primaryOptions = [] |
|||
export let secondaryFieldText = "" |
|||
export let secondaryFieldIcon = "" |
|||
export let secondaryFieldColour = "" |
|||
export let getPrimaryOptionValue = option => option |
|||
export let getPrimaryOptionColour = () => null |
|||
export let getPrimaryOptionIcon = () => null |
|||
export let getSecondaryOptionLabel = option => option |
|||
export let getSecondaryOptionValue = option => option |
|||
export let getSecondaryOptionColour = () => null |
|||
export let onSelectOption = () => {} |
|||
export let autoWidth = false |
|||
export let autocomplete = false |
|||
export let isOptionSelected = () => false |
|||
export let isPlaceholder = false |
|||
export let placeholderOption = null |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
let primaryOpen = false |
|||
let secondaryOpen = false |
|||
let focus = false |
|||
let searchTerm = null |
|||
|
|||
$: groupTitles = Object.keys(primaryOptions) |
|||
let iconData |
|||
|
|||
const updateSearch = e => { |
|||
dispatch("search", e.detail) |
|||
} |
|||
|
|||
const updateValue = newValue => { |
|||
if (readonly) { |
|||
return |
|||
} |
|||
dispatch("change", newValue) |
|||
} |
|||
|
|||
const onClickSecondary = () => { |
|||
dispatch("click") |
|||
if (readonly) { |
|||
return |
|||
} |
|||
secondaryOpen = true |
|||
} |
|||
|
|||
const onPickPrimary = newValue => { |
|||
dispatch("pickprimary", newValue) |
|||
primaryOpen = false |
|||
} |
|||
|
|||
const onClearPrimary = () => { |
|||
dispatch("pickprimary", null) |
|||
primaryOpen = false |
|||
} |
|||
|
|||
const onPickSecondary = newValue => { |
|||
dispatch("picksecondary", newValue) |
|||
secondaryOpen = false |
|||
} |
|||
|
|||
const onBlur = event => { |
|||
if (readonly) { |
|||
return |
|||
} |
|||
focus = false |
|||
updateValue(event.target.value) |
|||
} |
|||
|
|||
const onInput = event => { |
|||
if (readonly || !updateOnChange) { |
|||
return |
|||
} |
|||
updateValue(event.target.value) |
|||
} |
|||
|
|||
const updateValueOnEnter = event => { |
|||
if (readonly) { |
|||
return |
|||
} |
|||
if (event.key === "Enter") { |
|||
updateValue(event.target.value) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<div |
|||
class="spectrum-InputGroup" |
|||
class:is-invalid={!!error} |
|||
class:is-disabled={disabled} |
|||
> |
|||
<div |
|||
class="spectrum-Textfield spectrum-InputGroup-textfield" |
|||
class:is-invalid={!!error} |
|||
class:is-disabled={disabled} |
|||
class:is-focused={focus} |
|||
class:is-full-width={!secondaryOptions.length} |
|||
> |
|||
{#if iconData} |
|||
<svg |
|||
width="16px" |
|||
height="16px" |
|||
class="spectrum-Icon iconPadding" |
|||
style="color: {iconData?.color}" |
|||
focusable="false" |
|||
> |
|||
<use xlink:href="#spectrum-icon-18-{iconData?.icon}" /> |
|||
</svg> |
|||
{/if} |
|||
<input |
|||
{id} |
|||
on:click={() => (primaryOpen = true)} |
|||
on:blur |
|||
on:focus |
|||
on:input |
|||
on:keyup |
|||
on:blur={onBlur} |
|||
on:input={onInput} |
|||
on:keyup={updateValueOnEnter} |
|||
value={primaryLabel || ""} |
|||
placeholder={placeholder || ""} |
|||
{disabled} |
|||
{readonly} |
|||
class="spectrum-Textfield-input spectrum-InputGroup-input" |
|||
class:labelPadding={iconData} |
|||
/> |
|||
{#if primaryValue} |
|||
<button |
|||
on:click={() => onClearPrimary()} |
|||
type="reset" |
|||
class="spectrum-ClearButton spectrum-Search-clearButton" |
|||
> |
|||
<svg |
|||
class="spectrum-Icon spectrum-UIIcon-Cross75" |
|||
focusable="false" |
|||
aria-hidden="true" |
|||
> |
|||
<use xlink:href="#spectrum-css-icon-Cross75" /> |
|||
</svg> |
|||
</button> |
|||
{/if} |
|||
</div> |
|||
{#if primaryOpen} |
|||
<div |
|||
use:clickOutside={() => (primaryOpen = false)} |
|||
transition:fly|local={{ y: -20, duration: 200 }} |
|||
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" |
|||
class:auto-width={autoWidth} |
|||
class:is-full-width={!secondaryOptions.length} |
|||
> |
|||
{#if autocomplete} |
|||
<Search |
|||
value={searchTerm} |
|||
on:change={event => updateSearch(event)} |
|||
{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} |
|||
{#each groupTitles as title} |
|||
<div class="spectrum-Menu-item"> |
|||
<Detail>{title}</Detail> |
|||
</div> |
|||
{#if primaryOptions} |
|||
{#each primaryOptions[title].data as option, idx} |
|||
<li |
|||
class="spectrum-Menu-item" |
|||
class:is-selected={isOptionSelected( |
|||
getPrimaryOptionValue(option, idx) |
|||
)} |
|||
role="option" |
|||
aria-selected="true" |
|||
tabindex="0" |
|||
on:click={() => |
|||
onPickPrimary({ |
|||
value: primaryOptions[title].getValue(option), |
|||
label: primaryOptions[title].getLabel(option), |
|||
})} |
|||
> |
|||
{#if primaryOptions[title].getIcon(option)} |
|||
<div |
|||
style="background: {primaryOptions[title].getColour( |
|||
option |
|||
)};" |
|||
class="circle" |
|||
> |
|||
<div> |
|||
<Icon |
|||
size="S" |
|||
name={primaryOptions[title].getIcon(option)} |
|||
/> |
|||
</div> |
|||
</div> |
|||
{:else if getPrimaryOptionColour(option, idx)} |
|||
<span class="option-left"> |
|||
<StatusLight |
|||
square |
|||
color={getPrimaryOptionColour(option, idx)} |
|||
/> |
|||
</span> |
|||
{/if} |
|||
<span class="spectrum-Menu-itemLabel"> |
|||
<span |
|||
class:spacing-group={primaryOptions[title].getIcon(option)} |
|||
> |
|||
{primaryOptions[title].getLabel(option)} |
|||
<span /> |
|||
</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> |
|||
{#if getPrimaryOptionIcon(option, idx) && getPrimaryOptionColour(option, idx)} |
|||
<span class="option-right"> |
|||
<StatusLight |
|||
square |
|||
color={getPrimaryOptionColour(option, idx)} |
|||
/> |
|||
</span> |
|||
{/if} |
|||
</span> |
|||
</li> |
|||
{/each} |
|||
{/if} |
|||
{/each} |
|||
</ul> |
|||
</div> |
|||
{/if} |
|||
{#if secondaryOptions.length} |
|||
<div style="width: 30%"> |
|||
<button |
|||
{id} |
|||
class="spectrum-Picker spectrum-Picker--sizeM override-borders" |
|||
{disabled} |
|||
class:is-open={secondaryOpen} |
|||
aria-haspopup="listbox" |
|||
on:mousedown={onClickSecondary} |
|||
> |
|||
{#if secondaryFieldIcon} |
|||
<span class="option-left"> |
|||
<Icon name={secondaryFieldIcon} /> |
|||
</span> |
|||
{:else if secondaryFieldColour} |
|||
<span class="option-left"> |
|||
<StatusLight square color={secondaryFieldColour} /> |
|||
</span> |
|||
{/if} |
|||
|
|||
<span class:auto-width={autoWidth} class="spectrum-Picker-label"> |
|||
{secondaryFieldText} |
|||
</span> |
|||
<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 secondaryOpen} |
|||
<div |
|||
use:clickOutside={() => (secondaryOpen = false)} |
|||
transition:fly|local={{ y: -20, duration: 200 }} |
|||
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" |
|||
style="width: 30%" |
|||
> |
|||
<ul class="spectrum-Menu" role="listbox"> |
|||
{#each secondaryOptions as option, idx} |
|||
<li |
|||
class="spectrum-Menu-item" |
|||
class:is-selected={isOptionSelected( |
|||
getSecondaryOptionValue(option, idx) |
|||
)} |
|||
role="option" |
|||
aria-selected="true" |
|||
tabindex="0" |
|||
on:click={() => |
|||
onPickSecondary(getSecondaryOptionValue(option, idx))} |
|||
> |
|||
{#if getSecondaryOptionColour(option, idx)} |
|||
<span class="option-left"> |
|||
<StatusLight |
|||
square |
|||
color={getSecondaryOptionColour(option, idx)} |
|||
/> |
|||
</span> |
|||
{/if} |
|||
|
|||
<span class="spectrum-Menu-itemLabel"> |
|||
{getSecondaryOptionLabel(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} |
|||
</ul> |
|||
</div> |
|||
{/if} |
|||
</div> |
|||
{/if} |
|||
</div> |
|||
|
|||
<style> |
|||
.spacing-group { |
|||
margin-left: var(--spacing-m); |
|||
} |
|||
.spectrum-InputGroup { |
|||
min-width: 0; |
|||
width: 100%; |
|||
} |
|||
.spectrum-InputGroup :global(.spectrum-Search-input) { |
|||
border: none; |
|||
border-bottom: 1px solid var(--spectrum-global-color-gray-300); |
|||
border-bottom-left-radius: 0; |
|||
border-bottom-right-radius: 0; |
|||
} |
|||
|
|||
.override-borders { |
|||
border-top-left-radius: 0px; |
|||
border-bottom-left-radius: 0px; |
|||
} |
|||
|
|||
.spectrum-Popover { |
|||
max-height: 240px; |
|||
z-index: 999; |
|||
top: 100%; |
|||
} |
|||
|
|||
.option-left { |
|||
padding-right: 8px; |
|||
} |
|||
.option-right { |
|||
padding-left: 8px; |
|||
} |
|||
|
|||
.circle { |
|||
border-radius: 50%; |
|||
height: 28px; |
|||
color: white; |
|||
font-weight: bold; |
|||
line-height: 48px; |
|||
font-size: 1.2em; |
|||
width: 28px; |
|||
position: relative; |
|||
} |
|||
|
|||
.circle > div { |
|||
position: absolute; |
|||
text-decoration: none; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translateX(-50%) translateY(-50%); |
|||
} |
|||
|
|||
.iconPadding { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 10px; |
|||
transform: translateY(-50%); |
|||
color: silver; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.labelPadding { |
|||
padding-left: calc(1em + 10px + 8px); |
|||
} |
|||
|
|||
.spectrum-Textfield.spectrum-InputGroup-textfield { |
|||
width: 70%; |
|||
} |
|||
.spectrum-Textfield.spectrum-InputGroup-textfield.is-full-width { |
|||
width: 100%; |
|||
} |
|||
.spectrum-Textfield.spectrum-InputGroup-textfield.is-full-width input { |
|||
border-right-width: thin; |
|||
} |
|||
|
|||
.spectrum-Popover.spectrum-Popover--bottom.spectrum-Picker-popover.is-open { |
|||
width: 70%; |
|||
} |
|||
.spectrum-Popover.spectrum-Popover--bottom.spectrum-Picker-popover.is-open.is-full-width { |
|||
width: 100%; |
|||
} |
|||
|
|||
.spectrum-Search-clearButton { |
|||
position: absolute; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,55 @@ |
|||
<script> |
|||
import Field from "./Field.svelte" |
|||
import InputDropdown from "./Core/InputDropdown.svelte" |
|||
import { createEventDispatcher } from "svelte" |
|||
|
|||
export let inputValue = null |
|||
export let dropdownValue = null |
|||
export let inputType = "text" |
|||
export let label = null |
|||
export let labelPosition = "above" |
|||
export let placeholder = null |
|||
export let disabled = false |
|||
export let readonly = false |
|||
export let error = null |
|||
export let updateOnChange = true |
|||
export let quiet = false |
|||
export let dataCy |
|||
export let autofocus |
|||
export let options = [] |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
|
|||
const onPick = e => { |
|||
dropdownValue = e.detail |
|||
dispatch("pick", e.detail) |
|||
} |
|||
const onChange = e => { |
|||
inputValue = e.detail |
|||
dispatch("change", e.detail) |
|||
} |
|||
</script> |
|||
|
|||
<Field {label} {labelPosition} {error}> |
|||
<InputDropdown |
|||
{dataCy} |
|||
{updateOnChange} |
|||
{error} |
|||
{disabled} |
|||
{readonly} |
|||
{inputValue} |
|||
{dropdownValue} |
|||
{placeholder} |
|||
{inputType} |
|||
{quiet} |
|||
{autofocus} |
|||
{options} |
|||
on:change={onChange} |
|||
on:pick={onPick} |
|||
on:click |
|||
on:input |
|||
on:blur |
|||
on:focus |
|||
on:keyup |
|||
/> |
|||
</Field> |
|||
@ -0,0 +1,132 @@ |
|||
<script> |
|||
import Field from "./Field.svelte" |
|||
import PickerDropdown from "./Core/PickerDropdown.svelte" |
|||
import { createEventDispatcher } from "svelte" |
|||
|
|||
export let primaryValue = null |
|||
export let secondaryValue = null |
|||
export let inputType = "text" |
|||
export let label = null |
|||
export let labelPosition = "above" |
|||
export let secondaryPlaceholder = null |
|||
export let autocomplete |
|||
export let placeholder = null |
|||
export let disabled = false |
|||
export let readonly = false |
|||
export let error = null |
|||
export let updateOnChange = true |
|||
export let getSecondaryOptionLabel = option => |
|||
extractProperty(option, "label") |
|||
export let getSecondaryOptionValue = option => |
|||
extractProperty(option, "value") |
|||
export let getSecondaryOptionColour = () => {} |
|||
export let getSecondaryOptionIcon = () => {} |
|||
export let quiet = false |
|||
export let dataCy |
|||
export let autofocus |
|||
export let primaryOptions = [] |
|||
export let secondaryOptions = [] |
|||
export let searchTerm |
|||
|
|||
let primaryLabel |
|||
let secondaryLabel |
|||
const dispatch = createEventDispatcher() |
|||
|
|||
$: secondaryFieldText = getSecondaryFieldText( |
|||
secondaryValue, |
|||
secondaryOptions, |
|||
secondaryPlaceholder |
|||
) |
|||
$: secondaryFieldIcon = getSecondaryFieldAttribute( |
|||
getSecondaryOptionIcon, |
|||
secondaryValue, |
|||
secondaryOptions |
|||
) |
|||
$: secondaryFieldColour = getSecondaryFieldAttribute( |
|||
getSecondaryOptionColour, |
|||
secondaryValue, |
|||
secondaryOptions |
|||
) |
|||
|
|||
const getSecondaryFieldAttribute = (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) => getSecondaryOptionValue(option, idx) === value |
|||
) |
|||
|
|||
return index !== -1 ? getAttribute(options[index], index) : null |
|||
} |
|||
|
|||
const getSecondaryFieldText = (value, options, placeholder) => { |
|||
// Always use placeholder if no value |
|||
if (value == null || value === "") { |
|||
return placeholder || "Choose an option" |
|||
} |
|||
|
|||
return getSecondaryFieldAttribute(getSecondaryOptionLabel, value, options) |
|||
} |
|||
|
|||
const onPickPrimary = e => { |
|||
primaryLabel = e?.detail?.label || null |
|||
primaryValue = e?.detail?.value || null |
|||
dispatch("pickprimary", e?.detail?.value || {}) |
|||
} |
|||
|
|||
const onPickSecondary = e => { |
|||
secondaryValue = e.detail |
|||
dispatch("picksecondary", e.detail) |
|||
} |
|||
|
|||
const extractProperty = (value, property) => { |
|||
if (value && typeof value === "object") { |
|||
return value[property] |
|||
} |
|||
return value |
|||
} |
|||
|
|||
const updateSearchTerm = e => { |
|||
searchTerm = e.detail |
|||
} |
|||
</script> |
|||
|
|||
<Field {label} {labelPosition} {error}> |
|||
<PickerDropdown |
|||
{searchTerm} |
|||
{autocomplete} |
|||
{dataCy} |
|||
{updateOnChange} |
|||
{error} |
|||
{disabled} |
|||
{readonly} |
|||
{placeholder} |
|||
{inputType} |
|||
{quiet} |
|||
{autofocus} |
|||
{primaryOptions} |
|||
{secondaryOptions} |
|||
{getSecondaryOptionLabel} |
|||
{getSecondaryOptionValue} |
|||
{getSecondaryOptionIcon} |
|||
{getSecondaryOptionColour} |
|||
{secondaryFieldText} |
|||
{secondaryFieldIcon} |
|||
{secondaryFieldColour} |
|||
{primaryValue} |
|||
{secondaryValue} |
|||
{primaryLabel} |
|||
{secondaryLabel} |
|||
on:pickprimary={onPickPrimary} |
|||
on:picksecondary={onPickSecondary} |
|||
on:search={updateSearchTerm} |
|||
on:click |
|||
on:input |
|||
on:blur |
|||
on:focus |
|||
on:keyup |
|||
/> |
|||
</Field> |
|||
@ -0,0 +1,177 @@ |
|||
<script> |
|||
//import { createEventDispatcher } from "svelte" |
|||
import "@spectrum-css/popover/dist/index-vars.css" |
|||
import clickOutside from "../Actions/click_outside" |
|||
import { fly } from "svelte/transition" |
|||
import Icon from "../Icon/Icon.svelte" |
|||
import { createEventDispatcher } from "svelte" |
|||
|
|||
export let value |
|||
export let size = "M" |
|||
export let alignRight = false |
|||
|
|||
let open = false |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
|
|||
const iconList = [ |
|||
{ |
|||
label: "Icons", |
|||
icons: [ |
|||
"Apps", |
|||
"Actions", |
|||
"ConversionFunnel", |
|||
"App", |
|||
"Briefcase", |
|||
"Money", |
|||
"ShoppingCart", |
|||
"Form", |
|||
"Help", |
|||
"Monitoring", |
|||
"Sandbox", |
|||
"Project", |
|||
"Organisations", |
|||
"Magnify", |
|||
"Launch", |
|||
"Car", |
|||
"Camera", |
|||
"Bug", |
|||
"Channel", |
|||
"Calculator", |
|||
"Calendar", |
|||
"GraphDonut", |
|||
"GraphBarHorizontal", |
|||
"Demographic", |
|||
], |
|||
}, |
|||
] |
|||
|
|||
const onChange = value => { |
|||
dispatch("change", value) |
|||
open = false |
|||
} |
|||
</script> |
|||
|
|||
<div class="container"> |
|||
<div class="preview size--{size || 'M'}" on:click={() => (open = true)}> |
|||
<div |
|||
class="fill" |
|||
style={value ? `background: ${value};` : ""} |
|||
class:placeholder={!value} |
|||
> |
|||
<Icon name={value || "UserGroup"} /> |
|||
</div> |
|||
</div> |
|||
{#if open} |
|||
<div |
|||
use:clickOutside={() => (open = false)} |
|||
transition:fly={{ y: -20, duration: 200 }} |
|||
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" |
|||
class:spectrum-Popover--align-right={alignRight} |
|||
> |
|||
{#each iconList as icon} |
|||
<div class="category"> |
|||
<div class="heading">{icon.label}</div> |
|||
<div class="icons"> |
|||
{#each icon.icons as icon} |
|||
<div |
|||
on:click={() => { |
|||
onChange(icon) |
|||
}} |
|||
> |
|||
<Icon name={icon} /> |
|||
</div> |
|||
{/each} |
|||
</div> |
|||
</div> |
|||
{/each} |
|||
</div> |
|||
{/if} |
|||
</div> |
|||
|
|||
<style> |
|||
.container { |
|||
position: relative; |
|||
} |
|||
.preview { |
|||
width: 32px; |
|||
height: 32px; |
|||
position: relative; |
|||
box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-400); |
|||
} |
|||
.preview:hover { |
|||
cursor: pointer; |
|||
} |
|||
.fill { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
display: grid; |
|||
place-items: center; |
|||
} |
|||
.size--S { |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
.size--M { |
|||
width: 32px; |
|||
height: 32px; |
|||
} |
|||
.size--L { |
|||
width: 48px; |
|||
height: 48px; |
|||
} |
|||
.spectrum-Popover { |
|||
width: 210px; |
|||
z-index: 999; |
|||
top: 100%; |
|||
padding: var(--spacing-l) var(--spacing-xl); |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: stretch; |
|||
gap: var(--spacing-xl); |
|||
} |
|||
.spectrum-Popover--align-right { |
|||
right: 0; |
|||
} |
|||
.icons { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; |
|||
gap: var(--spacing-m); |
|||
} |
|||
.heading { |
|||
font-size: var(--font-size-s); |
|||
font-weight: 600; |
|||
letter-spacing: 0.14px; |
|||
flex: 1 1 auto; |
|||
text-transform: uppercase; |
|||
grid-column: 1 / 5; |
|||
margin-bottom: var(--spacing-s); |
|||
} |
|||
|
|||
.icon { |
|||
height: 16px; |
|||
width: 16px; |
|||
border-radius: 100%; |
|||
box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300); |
|||
position: relative; |
|||
} |
|||
.icon:hover { |
|||
cursor: pointer; |
|||
box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300); |
|||
} |
|||
.custom { |
|||
display: grid; |
|||
grid-template-columns: 1fr auto; |
|||
align-items: center; |
|||
gap: var(--spacing-m); |
|||
margin-right: var(--spacing-xs); |
|||
} |
|||
|
|||
.spectrum-wrapper { |
|||
background-color: transparent; |
|||
} |
|||
</style> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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} |
|||
/> |
|||
@ -0,0 +1,75 @@ |
|||
<script> |
|||
import { ActionButton, Icon, Search, Divider, Detail } from "@budibase/bbui" |
|||
|
|||
export let searchTerm = "" |
|||
export let selected |
|||
export let filtered = [] |
|||
export let addAll |
|||
export let select |
|||
export let title |
|||
export let key |
|||
</script> |
|||
|
|||
<div style="padding: var(--spacing-m)"> |
|||
<Search placeholder="Search" bind:value={searchTerm} /> |
|||
<div class="header sub-header"> |
|||
<div> |
|||
<Detail |
|||
>{filtered.length} {title}{filtered.length === 1 ? "" : "s"}</Detail |
|||
> |
|||
</div> |
|||
<div> |
|||
<ActionButton on:click={addAll} emphasized size="S">Add all</ActionButton> |
|||
</div> |
|||
</div> |
|||
<Divider noMargin /> |
|||
<div> |
|||
{#each filtered as item} |
|||
<div |
|||
on:click={() => { |
|||
select(item._id) |
|||
}} |
|||
style="padding-bottom: var(--spacing-m)" |
|||
class="selection" |
|||
> |
|||
<div> |
|||
{item[key]} |
|||
</div> |
|||
|
|||
{#if selected.includes(item._id)} |
|||
<div> |
|||
<Icon |
|||
color="var(--spectrum-global-color-blue-600);" |
|||
name="Checkmark" |
|||
/> |
|||
</div> |
|||
{/if} |
|||
</div> |
|||
{/each} |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.header { |
|||
align-items: center; |
|||
padding: var(--spacing-m) 0 var(--spacing-m) 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.selection { |
|||
align-items: end; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.selection > :first-child { |
|||
padding-top: var(--spacing-m); |
|||
} |
|||
|
|||
.sub-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,43 @@ |
|||
<script> |
|||
import { PickerDropdown, notifications } from "@budibase/bbui" |
|||
import { groups } from "stores/portal" |
|||
import { onMount, createEventDispatcher } from "svelte" |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
|
|||
$: optionSections = { |
|||
groups: { |
|||
data: $groups, |
|||
getLabel: group => group.name, |
|||
getValue: group => group._id, |
|||
getIcon: group => group.icon, |
|||
getColour: group => group.color, |
|||
}, |
|||
} |
|||
|
|||
$: appData = [{ id: "", role: "" }] |
|||
|
|||
$: onChange = selected => { |
|||
const { detail } = selected |
|||
if (!detail) return |
|||
|
|||
const groupSelected = $groups.find(x => x._id === detail) |
|||
const appIds = groupSelected?.apps.map(x => x.appId) || null |
|||
dispatch("change", appIds) |
|||
} |
|||
|
|||
onMount(async () => { |
|||
try { |
|||
await groups.actions.init() |
|||
} catch (error) { |
|||
notifications.error("Error") |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<PickerDropdown |
|||
autocomplete |
|||
primaryOptions={optionSections} |
|||
placeholder={"Filter by access"} |
|||
on:pickprimary={onChange} |
|||
/> |
|||
@ -0,0 +1,260 @@ |
|||
<script> |
|||
import { goto } from "@roxi/routify" |
|||
import { |
|||
ActionButton, |
|||
Button, |
|||
Layout, |
|||
Heading, |
|||
Body, |
|||
Icon, |
|||
Popover, |
|||
notifications, |
|||
List, |
|||
ListItem, |
|||
StatusLight, |
|||
} from "@budibase/bbui" |
|||
import UserGroupPicker from "components/settings/UserGroupPicker.svelte" |
|||
import { createPaginationStore } from "helpers/pagination" |
|||
import { users, apps, groups } from "stores/portal" |
|||
import { onMount } from "svelte" |
|||
import { RoleUtils } from "@budibase/frontend-core" |
|||
import { roles } from "stores/backend" |
|||
|
|||
export let groupId |
|||
|
|||
let popoverAnchor |
|||
let popover |
|||
let searchTerm = "" |
|||
let selectedUsers = [] |
|||
let prevSearch = undefined |
|||
let pageInfo = createPaginationStore() |
|||
let loaded = false |
|||
|
|||
$: page = $pageInfo.page |
|||
$: fetchUsers(page, searchTerm) |
|||
$: group = $groups.find(x => x._id === groupId) |
|||
|
|||
async function addAll() { |
|||
selectedUsers = [...selectedUsers, ...filtered.map(u => u._id)] |
|||
|
|||
let reducedUserObjects = filtered.map(u => { |
|||
return { |
|||
_id: u._id, |
|||
email: u.email, |
|||
} |
|||
}) |
|||
group.users = [...reducedUserObjects, ...group.users] |
|||
|
|||
await groups.actions.save(group) |
|||
|
|||
$users.data.forEach(async user => { |
|||
let userToEdit = await users.get(user._id) |
|||
let userGroups = userToEdit.userGroups || [] |
|||
userGroups.push(groupId) |
|||
await users.save({ |
|||
...userToEdit, |
|||
userGroups, |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
async function selectUser(id) { |
|||
let selectedUser = selectedUsers.includes(id) |
|||
if (selectedUser) { |
|||
selectedUsers = selectedUsers.filter(id => id !== selectedUser) |
|||
let newUsers = group.users.filter(user => user._id !== id) |
|||
group.users = newUsers |
|||
} else { |
|||
let enrichedUser = $users.data |
|||
.filter(user => user._id === id) |
|||
.map(u => { |
|||
return { |
|||
_id: u._id, |
|||
email: u.email, |
|||
} |
|||
})[0] |
|||
selectedUsers = [...selectedUsers, id] |
|||
group.users.push(enrichedUser) |
|||
} |
|||
|
|||
await groups.actions.save(group) |
|||
|
|||
let user = await users.get(id) |
|||
|
|||
let userGroups = user.userGroups || [] |
|||
userGroups.push(groupId) |
|||
await users.save({ |
|||
...user, |
|||
userGroups, |
|||
}) |
|||
} |
|||
$: filtered = |
|||
$users.data?.filter(x => !group?.users.map(y => y._id).includes(x._id)) || |
|||
[] |
|||
|
|||
$: groupApps = $apps.filter(x => group.apps.includes(x.appId)) |
|||
async function removeUser(id) { |
|||
let newUsers = group.users.filter(user => user._id !== id) |
|||
group.users = newUsers |
|||
let user = await users.get(id) |
|||
|
|||
await users.save({ |
|||
...user, |
|||
userGroups: [], |
|||
}) |
|||
|
|||
await groups.actions.save(group) |
|||
} |
|||
|
|||
async function fetchUsers(page, search) { |
|||
if ($pageInfo.loading) { |
|||
return |
|||
} |
|||
// need to remove the page if they've started searching |
|||
if (search && !prevSearch) { |
|||
pageInfo.reset() |
|||
page = undefined |
|||
} |
|||
prevSearch = search |
|||
try { |
|||
pageInfo.loading() |
|||
await users.search({ page, email: search }) |
|||
pageInfo.fetched($users.hasNextPage, $users.nextPage) |
|||
} catch (error) { |
|||
notifications.error("Error getting user list") |
|||
} |
|||
} |
|||
|
|||
const getRoleLabel = appId => { |
|||
const roleId = group?.roles?.[`app_${appId}`] |
|||
const role = $roles.find(x => x._id === roleId) |
|||
return role?.name || "Custom role" |
|||
} |
|||
|
|||
onMount(async () => { |
|||
try { |
|||
await Promise.all([groups.actions.init(), apps.load(), roles.fetch()]) |
|||
loaded = true |
|||
} catch (error) { |
|||
notifications.error("Error fetching user group data") |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
{#if loaded} |
|||
<Layout noPadding> |
|||
<div> |
|||
<ActionButton |
|||
on:click={() => $goto("../groups")} |
|||
size="S" |
|||
icon="ArrowLeft" |
|||
> |
|||
Back |
|||
</ActionButton> |
|||
</div> |
|||
<div class="header"> |
|||
<div class="title"> |
|||
<div style="background: {group?.color};" class="circle"> |
|||
<div> |
|||
<Icon size="M" name={group?.icon} /> |
|||
</div> |
|||
</div> |
|||
<div class="text-padding"> |
|||
<Heading>{group?.name}</Heading> |
|||
</div> |
|||
</div> |
|||
<div bind:this={popoverAnchor}> |
|||
<Button on:click={popover.show()} icon="UserAdd" cta>Add user</Button> |
|||
</div> |
|||
<Popover align="right" bind:this={popover} anchor={popoverAnchor}> |
|||
<UserGroupPicker |
|||
key={"email"} |
|||
title={"User"} |
|||
bind:searchTerm |
|||
bind:selected={selectedUsers} |
|||
bind:filtered |
|||
{addAll} |
|||
select={selectUser} |
|||
/> |
|||
</Popover> |
|||
</div> |
|||
|
|||
<List> |
|||
{#if group?.users.length} |
|||
{#each group.users as user} |
|||
<ListItem title={user?.email} avatar |
|||
><Icon |
|||
on:click={() => removeUser(user?._id)} |
|||
hoverable |
|||
size="L" |
|||
name="Close" |
|||
/></ListItem |
|||
> |
|||
{/each} |
|||
{:else} |
|||
<ListItem icon="UserGroup" title="You have no users in this team" /> |
|||
{/if} |
|||
</List> |
|||
<div |
|||
style="flex-direction: column; margin-top: var(--spacing-m)" |
|||
class="title" |
|||
> |
|||
<Heading weight="light" size="XS">Apps</Heading> |
|||
<div style="margin-top: var(--spacing-xs)"> |
|||
<Body size="S" |
|||
>Manage apps that this User group has been assigned to</Body |
|||
> |
|||
</div> |
|||
</div> |
|||
|
|||
<List> |
|||
{#if groupApps.length} |
|||
{#each groupApps as app} |
|||
<ListItem |
|||
title={app.name} |
|||
icon={app?.icon?.name || "Apps"} |
|||
iconBackground={app?.icon?.color || ""} |
|||
> |
|||
<div class="title "> |
|||
<StatusLight |
|||
square |
|||
color={RoleUtils.getRoleColour(group.roles[`app_${app.appId}`])} |
|||
> |
|||
{getRoleLabel(app.appId)} |
|||
</StatusLight> |
|||
</div> |
|||
</ListItem> |
|||
{/each} |
|||
{:else} |
|||
<ListItem icon="UserGroup" title="No apps" /> |
|||
{/if} |
|||
</List> |
|||
</Layout> |
|||
{/if} |
|||
|
|||
<style> |
|||
.text-padding { |
|||
margin-left: var(--spacing-l); |
|||
} |
|||
|
|||
.header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.title { |
|||
display: flex; |
|||
} |
|||
.circle { |
|||
border-radius: 50%; |
|||
height: 30px; |
|||
color: white; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
font-size: 1.2em; |
|||
width: 30px; |
|||
} |
|||
|
|||
.circle > div { |
|||
padding: calc(1.5 * var(--spacing-xs)) var(--spacing-xs); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
<script> |
|||
import { |
|||
ColorPicker, |
|||
Body, |
|||
ModalContent, |
|||
Input, |
|||
IconPicker, |
|||
} from "@budibase/bbui" |
|||
|
|||
export let group |
|||
export let saveGroup |
|||
</script> |
|||
|
|||
<ModalContent |
|||
onConfirm={() => saveGroup(group)} |
|||
size="M" |
|||
title="Create User Group" |
|||
confirmText="Save" |
|||
> |
|||
<Input bind:value={group.name} label="Team name" /> |
|||
<div class="modal-format"> |
|||
<div class="modal-inner"> |
|||
<Body size="XS">Icon</Body> |
|||
<div class="modal-spacing"> |
|||
<IconPicker |
|||
bind:value={group.icon} |
|||
on:change={e => (group.icon = e.detail)} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="modal-inner"> |
|||
<Body size="XS">Color</Body> |
|||
<div class="modal-spacing"> |
|||
<ColorPicker |
|||
bind:value={group.color} |
|||
on:change={e => (group.color = e.detail)} |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ModalContent> |
|||
|
|||
<style> |
|||
.modal-format { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: 40%; |
|||
} |
|||
|
|||
.modal-inner { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.modal-spacing { |
|||
margin-left: var(--spacing-l); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,129 @@ |
|||
<script> |
|||
import { |
|||
Button, |
|||
Icon, |
|||
Body, |
|||
ActionMenu, |
|||
MenuItem, |
|||
Modal, |
|||
} from "@budibase/bbui" |
|||
import { goto } from "@roxi/routify" |
|||
import CreateEditGroupModal from "./CreateEditGroupModal.svelte" |
|||
|
|||
export let group |
|||
export let deleteGroup |
|||
export let saveGroup |
|||
let modal |
|||
function editGroup() { |
|||
modal.show() |
|||
} |
|||
</script> |
|||
|
|||
<div class="title"> |
|||
<div class="name" style="display: flex; margin-left: var(--spacing-xl)"> |
|||
<div style="background: {group.color};" class="circle"> |
|||
<div> |
|||
<Icon size="M" name={group.icon} /> |
|||
</div> |
|||
</div> |
|||
<div class="name" data-cy="app-name-link"> |
|||
<Body size="S">{group.name}</Body> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="desktop tableElement"> |
|||
<Icon name="User" /> |
|||
<div style="margin-left: var(--spacing-l"> |
|||
{parseInt(group?.users?.length) || 0} user{parseInt( |
|||
group?.users?.length |
|||
) === 1 |
|||
? "" |
|||
: "s"} |
|||
</div> |
|||
</div> |
|||
<div class="desktop tableElement"> |
|||
<Icon name="WebPage" /> |
|||
|
|||
<div style="margin-left: var(--spacing-l)"> |
|||
{parseInt(group?.apps?.length) || 0} app{parseInt(group?.apps?.length) === 1 |
|||
? "" |
|||
: "s"} |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<div class="group-row-actions"> |
|||
<div> |
|||
<Button on:click={() => $goto(`./${group._id}`)} size="S" cta |
|||
>Manage</Button |
|||
> |
|||
</div> |
|||
<div> |
|||
<ActionMenu align="right"> |
|||
<span slot="control"> |
|||
<Icon hoverable name="More" /> |
|||
</span> |
|||
<MenuItem on:click={() => deleteGroup(group)} icon="Delete" |
|||
>Delete</MenuItem |
|||
> |
|||
<MenuItem on:click={() => editGroup(group)} icon="Edit">Edit</MenuItem> |
|||
</ActionMenu> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<Modal bind:this={modal}> |
|||
<CreateEditGroupModal {group} {saveGroup} /> |
|||
</Modal> |
|||
|
|||
<style> |
|||
.group-row-actions { |
|||
display: flex; |
|||
float: right; |
|||
margin-right: var(--spacing-xl); |
|||
grid-template-columns: 75px 75px; |
|||
grid-gap: var(--spacing-xl); |
|||
} |
|||
.name { |
|||
grid-gap: var(--spacing-xl); |
|||
grid-template-columns: 75px 75px; |
|||
align-items: center; |
|||
} |
|||
.circle { |
|||
border-radius: 50%; |
|||
height: 30px; |
|||
color: white; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
font-size: 1.2em; |
|||
width: 30px; |
|||
} |
|||
|
|||
.tableElement { |
|||
display: flex; |
|||
} |
|||
|
|||
.circle > div { |
|||
padding: calc(1.5 * var(--spacing-xs)) var(--spacing-xs); |
|||
} |
|||
.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> |
|||
@ -0,0 +1,3 @@ |
|||
<div style="float: right;"> |
|||
<slot /> |
|||
</div> |
|||
@ -0,0 +1,153 @@ |
|||
<script> |
|||
import { |
|||
Layout, |
|||
Heading, |
|||
Body, |
|||
Button, |
|||
Modal, |
|||
Tag, |
|||
Tags, |
|||
notifications, |
|||
} from "@budibase/bbui" |
|||
import { groups, auth } from "stores/portal" |
|||
import { onMount } from "svelte" |
|||
import { Constants } from "@budibase/frontend-core" |
|||
import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte" |
|||
import UserGroupsRow from "./_components/UserGroupsRow.svelte" |
|||
import { cloneDeep } from "lodash/fp" |
|||
|
|||
const DefaultGroup = { |
|||
name: "", |
|||
icon: "UserGroup", |
|||
color: "var(--spectrum-global-color-blue-600)", |
|||
users: [], |
|||
apps: [], |
|||
roles: {}, |
|||
} |
|||
let modal |
|||
let group = cloneDeep(DefaultGroup) |
|||
|
|||
$: hasGroupsLicense = $auth.user?.license.features.includes( |
|||
Constants.Features.USER_GROUPS |
|||
) |
|||
|
|||
async function deleteGroup(group) { |
|||
try { |
|||
groups.actions.delete(group) |
|||
} catch (error) { |
|||
notifications.error(`Failed to delete group`) |
|||
} |
|||
} |
|||
|
|||
async function saveGroup(group) { |
|||
try { |
|||
await groups.actions.save(group) |
|||
} catch (error) { |
|||
notifications.error(`Failed to save group`) |
|||
} |
|||
} |
|||
|
|||
const showCreateGroupModal = () => { |
|||
group = cloneDeep(DefaultGroup) |
|||
modal?.show() |
|||
} |
|||
|
|||
onMount(async () => { |
|||
try { |
|||
if (hasGroupsLicense) { |
|||
await groups.actions.init() |
|||
} |
|||
} catch (error) { |
|||
notifications.error("Error getting User groups") |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<Layout noPadding> |
|||
<Layout gap="XS" noPadding> |
|||
<div style="display: flex;"> |
|||
<Heading size="M">User groups</Heading> |
|||
{#if !hasGroupsLicense} |
|||
<Tags> |
|||
<div class="tags"> |
|||
<div class="tag"> |
|||
<Tag icon="LockClosed">Pro plan</Tag> |
|||
</div> |
|||
</div> |
|||
</Tags> |
|||
{/if} |
|||
</div> |
|||
<Body>Easily assign and manage your users access with User Groups</Body> |
|||
</Layout> |
|||
<div class="align-buttons"> |
|||
<Button |
|||
newStyles |
|||
icon={hasGroupsLicense ? "UserGroup" : ""} |
|||
cta={hasGroupsLicense} |
|||
on:click={hasGroupsLicense |
|||
? showCreateGroupModal |
|||
: window.open("https://budibase.com/pricing/", "_blank")} |
|||
> |
|||
{hasGroupsLicense ? "Create user group" : "Upgrade Account"} |
|||
</Button> |
|||
{#if !hasGroupsLicense} |
|||
<Button |
|||
newStyles |
|||
secondary |
|||
on:click={() => { |
|||
window.open("https://budibase.com/pricing/", "_blank") |
|||
}}>View Plans</Button |
|||
> |
|||
{/if} |
|||
</div> |
|||
|
|||
{#if hasGroupsLicense && $groups.length} |
|||
<div class="groupTable"> |
|||
{#each $groups as group} |
|||
<div> |
|||
<UserGroupsRow {saveGroup} {deleteGroup} {group} /> |
|||
</div> |
|||
{/each} |
|||
</div> |
|||
{/if} |
|||
</Layout> |
|||
|
|||
<Modal bind:this={modal}> |
|||
<CreateEditGroupModal bind:group {saveGroup} /> |
|||
</Modal> |
|||
|
|||
<style> |
|||
.align-buttons { |
|||
display: flex; |
|||
column-gap: var(--spacing-xl); |
|||
} |
|||
.tag { |
|||
margin-top: var(--spacing-xs); |
|||
margin-left: var(--spacing-m); |
|||
} |
|||
|
|||
.groupTable { |
|||
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); |
|||
} |
|||
|
|||
.groupTable :global(> div) { |
|||
background: var(--bg-color); |
|||
|
|||
height: 55px; |
|||
display: grid; |
|||
align-items: center; |
|||
grid-gap: var(--spacing-xl); |
|||
grid-template-columns: 2fr 2fr 2fr auto; |
|||
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> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue