budibase/packages/builder/src/components/common/RoleSelect.svelte

147 lines
3.2 KiB
Svelte

<script>
import { Select, FancySelect } from "@budibase/bbui"
import { roles } from "stores/backend"
import { licensing } from "stores/portal"
import { Constants, RoleUtils } from "@budibase/frontend-core"
import { createEventDispatcher } from "svelte"
import { capitalise } from "helpers"
export let value
export let error
export let placeholder = null
export let autoWidth = false
export let quiet = false
export let allowPublic = true
export let allowRemove = false
export let disabled = false
export let align
export let footer = null
export let allowedRoles = null
export let allowCreator = false
export let fancySelect = false
const dispatch = createEventDispatcher()
const RemoveID = "remove"
$: options = getOptions(
$roles,
allowPublic,
allowRemove,
allowedRoles,
allowCreator
)
const getOptions = (
roles,
allowPublic,
allowRemove,
allowedRoles,
allowCreator
) => {
if (allowedRoles?.length) {
const filteredRoles = roles.filter(role =>
allowedRoles.includes(role._id)
)
return [
...filteredRoles,
...(allowedRoles.includes(Constants.Roles.CREATOR)
? [{ _id: Constants.Roles.CREATOR, name: "Creator", enabled: false }]
: []),
]
}
let newRoles = [...roles]
if (allowCreator) {
newRoles = [
{
_id: Constants.Roles.CREATOR,
name: "Creator",
tag:
!$licensing.perAppBuildersEnabled &&
capitalise(Constants.PlanType.BUSINESS),
},
...newRoles,
]
}
if (allowRemove) {
newRoles = [
...newRoles,
{
_id: RemoveID,
name: "Remove",
},
]
}
if (allowPublic) {
return newRoles
}
return newRoles.filter(role => role._id !== Constants.Roles.PUBLIC)
}
const getColor = role => {
if (allowRemove && role._id === RemoveID) {
return null
}
return RoleUtils.getRoleColour(role._id)
}
const getIcon = role => {
if (allowRemove && role._id === RemoveID) {
return "Close"
}
return null
}
const onChange = e => {
if (allowRemove && e.detail === RemoveID) {
dispatch("remove")
} else {
dispatch("change", e.detail)
}
}
</script>
{#if fancySelect}
<FancySelect
{autoWidth}
{quiet}
{disabled}
{align}
{footer}
bind:value
on:change={onChange}
{options}
label="Access on this app"
getOptionLabel={role => role.name}
getOptionValue={role => role._id}
getOptionColour={getColor}
getOptionIcon={getIcon}
isOptionEnabled={option =>
option._id !== Constants.Roles.CREATOR ||
$licensing.perAppBuildersEnabled}
{placeholder}
{error}
/>
{:else}
<Select
{autoWidth}
{quiet}
{disabled}
{align}
{footer}
bind:value
on:change={onChange}
{options}
getOptionLabel={role => role.name}
getOptionValue={role => role._id}
getOptionColour={getColor}
getOptionIcon={getIcon}
isOptionEnabled={option =>
(option._id !== Constants.Roles.CREATOR ||
$licensing.perAppBuildersEnabled) &&
option.enabled !== false}
{placeholder}
{error}
/>
{/if}