Merge branch 'develop' into api-tests-generate-tenants
This commit is contained in:
commit
fa6dcc1fbe
240 changed files with 6004 additions and 4342 deletions
2
.github/ISSUE_TEMPLATE/bug_report.md
vendored
2
.github/ISSUE_TEMPLATE/bug_report.md
vendored
|
@ -6,7 +6,7 @@ labels: bug
|
|||
assignees: ''
|
||||
|
||||
---
|
||||
## Checklist
|
||||
**Checklist**
|
||||
- [ ] I have searched budibase discussions and github issues to check if my issue already exists
|
||||
|
||||
**Hosting**
|
||||
|
|
|
@ -6,7 +6,8 @@ services:
|
|||
minio-service:
|
||||
container_name: budi-minio-dev
|
||||
restart: on-failure
|
||||
image: minio/minio
|
||||
# Last version that supports the "fs" backend
|
||||
image: minio/minio:RELEASE.2022-10-24T18-35-07Z
|
||||
volumes:
|
||||
- minio_data:/data
|
||||
ports:
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version": "2.2.12-alpha.21",
|
||||
"version": "2.2.12-alpha.44",
|
||||
"npmClient": "yarn",
|
||||
"packages": [
|
||||
"packages/*"
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@budibase/backend-core",
|
||||
"version": "2.2.12-alpha.21",
|
||||
"version": "2.2.12-alpha.44",
|
||||
"description": "Budibase backend core libraries used in server and worker",
|
||||
"main": "dist/src/index.js",
|
||||
"types": "dist/src/index.d.ts",
|
||||
|
@ -23,7 +23,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@budibase/nano": "10.1.1",
|
||||
"@budibase/types": "2.2.12-alpha.21",
|
||||
"@budibase/types": "2.2.12-alpha.44",
|
||||
"@shopify/jest-koa-mocks": "5.0.1",
|
||||
"@techpass/passport-openidconnect": "0.3.2",
|
||||
"aws-cloudfront-sign": "2.2.0",
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@budibase/bbui",
|
||||
"description": "A UI solution used in the different Budibase projects.",
|
||||
"version": "2.2.12-alpha.21",
|
||||
"version": "2.2.12-alpha.44",
|
||||
"license": "MPL-2.0",
|
||||
"svelte": "src/index.js",
|
||||
"module": "dist/bbui.es.js",
|
||||
|
@ -38,7 +38,8 @@
|
|||
],
|
||||
"dependencies": {
|
||||
"@adobe/spectrum-css-workflow-icons": "1.2.1",
|
||||
"@budibase/string-templates": "2.2.12-alpha.21",
|
||||
"@budibase/string-templates": "2.2.12-alpha.44",
|
||||
"@spectrum-css/accordion": "3.0.24",
|
||||
"@spectrum-css/actionbutton": "1.0.1",
|
||||
"@spectrum-css/actiongroup": "1.0.1",
|
||||
"@spectrum-css/avatar": "3.0.2",
|
||||
|
|
58
packages/bbui/src/Accordion/Accordion.svelte
Normal file
58
packages/bbui/src/Accordion/Accordion.svelte
Normal file
|
@ -0,0 +1,58 @@
|
|||
<script>
|
||||
import "@spectrum-css/accordion"
|
||||
|
||||
export let itemName
|
||||
export let initialOpen
|
||||
export let header
|
||||
|
||||
let isOpen
|
||||
|
||||
function getOpenClass(isOpen) {
|
||||
if (isOpen === undefined) {
|
||||
isOpen = initialOpen
|
||||
}
|
||||
return isOpen ? "is-open" : ""
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="spectrum-Accordion" role={itemName}>
|
||||
<div class="spectrum-Accordion-item {getOpenClass(isOpen)}">
|
||||
<h3 class="spectrum-Accordion-itemHeading">
|
||||
<button
|
||||
class="spectrum-Accordion-itemHeader"
|
||||
type="button"
|
||||
on:click={() => (isOpen = !isOpen)}
|
||||
>
|
||||
{header}
|
||||
</button>
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Accordion-itemIndicator"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#spectrum-css-icon-Chevron100" />
|
||||
</svg>
|
||||
</h3>
|
||||
<div class="spectrum-Accordion-itemContent" role={itemName}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.spectrum-Accordion {
|
||||
margin-left: -20px;
|
||||
}
|
||||
.spectrum-Accordion-item {
|
||||
border: none;
|
||||
}
|
||||
.spectrum-Accordion-itemContent {
|
||||
width: 97%;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.spectrum-Accordion-itemHeader {
|
||||
text-transform: none;
|
||||
font-weight: bold;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
|
@ -88,6 +88,7 @@
|
|||
}
|
||||
.is-selected:not(.spectrum-ActionButton--emphasized) {
|
||||
background: var(--spectrum-global-color-gray-300);
|
||||
border-color: var(--spectrum-global-color-gray-700);
|
||||
}
|
||||
.noPadding {
|
||||
padding: 0;
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
const ignoredClasses = [".flatpickr-calendar", ".modal-container"]
|
||||
const ignoredClasses = [".flatpickr-calendar", ".spectrum-Popover"]
|
||||
let clickHandlers = []
|
||||
|
||||
/**
|
||||
* Handle a body click event
|
||||
*/
|
||||
const handleClick = event => {
|
||||
// Ignore click if needed
|
||||
// Ignore click if this is an ignored class
|
||||
for (let className of ignoredClasses) {
|
||||
if (event.target.closest(className)) {
|
||||
return
|
||||
|
@ -14,9 +14,18 @@ const handleClick = event => {
|
|||
|
||||
// Process handlers
|
||||
clickHandlers.forEach(handler => {
|
||||
if (!handler.element.contains(event.target)) {
|
||||
handler.callback?.(event)
|
||||
if (handler.element.contains(event.target)) {
|
||||
return
|
||||
}
|
||||
|
||||
// Ignore clicks for modals, unless the handler is registered from a modal
|
||||
const sourceInModal = handler.anchor.closest(".spectrum-Modal") != null
|
||||
const clickInModal = event.target.closest(".spectrum-Modal") != null
|
||||
if (clickInModal && !sourceInModal) {
|
||||
return
|
||||
}
|
||||
|
||||
handler.callback?.(event)
|
||||
})
|
||||
}
|
||||
document.documentElement.addEventListener("click", handleClick, true)
|
||||
|
@ -24,10 +33,10 @@ document.documentElement.addEventListener("click", handleClick, true)
|
|||
/**
|
||||
* Adds or updates a click handler
|
||||
*/
|
||||
const updateHandler = (id, element, callback) => {
|
||||
const updateHandler = (id, element, anchor, callback) => {
|
||||
let existingHandler = clickHandlers.find(x => x.id === id)
|
||||
if (!existingHandler) {
|
||||
clickHandlers.push({ id, element, callback })
|
||||
clickHandlers.push({ id, element, anchor, callback })
|
||||
} else {
|
||||
existingHandler.callback = callback
|
||||
}
|
||||
|
@ -42,12 +51,22 @@ const removeHandler = id => {
|
|||
|
||||
/**
|
||||
* Svelte action to apply a click outside handler for a certain element
|
||||
* opts.anchor is an optional param specifying the real root source of the
|
||||
* component being observed. This is required for things like popovers, where
|
||||
* the element using the clickoutside action is the popover, but the popover is
|
||||
* rendered at the root of the DOM somewhere, whereas the popover anchor is the
|
||||
* element we actually want to consider when determining the source component.
|
||||
*/
|
||||
export default (element, callback) => {
|
||||
export default (element, opts) => {
|
||||
const id = Math.random()
|
||||
updateHandler(id, element, callback)
|
||||
const update = newOpts => {
|
||||
const callback = newOpts?.callback || newOpts
|
||||
const anchor = newOpts?.anchor || element
|
||||
updateHandler(id, element, anchor, callback)
|
||||
}
|
||||
update(opts)
|
||||
return {
|
||||
update: newCallback => updateHandler(id, element, newCallback),
|
||||
update,
|
||||
destroy: () => removeHandler(id),
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,75 +1,68 @@
|
|||
export default function positionDropdown(element, { anchor, align, maxWidth }) {
|
||||
let positionSide = "top"
|
||||
let maxHeight = 0
|
||||
let dimensions = getDimensions(anchor)
|
||||
export default function positionDropdown(
|
||||
element,
|
||||
{ anchor, align, maxWidth, useAnchorWidth }
|
||||
) {
|
||||
const update = () => {
|
||||
const anchorBounds = anchor.getBoundingClientRect()
|
||||
const elementBounds = element.getBoundingClientRect()
|
||||
let styles = {
|
||||
maxHeight: null,
|
||||
minWidth: null,
|
||||
maxWidth,
|
||||
left: null,
|
||||
top: null,
|
||||
}
|
||||
|
||||
function getDimensions() {
|
||||
const {
|
||||
bottom,
|
||||
top: spaceAbove,
|
||||
left,
|
||||
width,
|
||||
} = anchor.getBoundingClientRect()
|
||||
const spaceBelow = window.innerHeight - bottom
|
||||
const containerRect = element.getBoundingClientRect()
|
||||
|
||||
let y
|
||||
|
||||
if (spaceAbove > spaceBelow) {
|
||||
positionSide = "bottom"
|
||||
maxHeight = spaceAbove - 20
|
||||
y = window.innerHeight - spaceAbove + 5
|
||||
// Determine vertical styles
|
||||
if (window.innerHeight - anchorBounds.bottom < 100) {
|
||||
styles.top = anchorBounds.top - elementBounds.height - 5
|
||||
} else {
|
||||
positionSide = "top"
|
||||
y = bottom + 5
|
||||
maxHeight = spaceBelow - 20
|
||||
styles.top = anchorBounds.bottom + 5
|
||||
styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
|
||||
}
|
||||
|
||||
return {
|
||||
[positionSide]: y,
|
||||
left,
|
||||
width,
|
||||
containerWidth: containerRect.width,
|
||||
// Determine horizontal styles
|
||||
if (!maxWidth && useAnchorWidth) {
|
||||
styles.maxWidth = anchorBounds.width
|
||||
}
|
||||
if (useAnchorWidth) {
|
||||
styles.minWidth = anchorBounds.width
|
||||
}
|
||||
if (align === "right") {
|
||||
styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
|
||||
} else if (align === "right-side") {
|
||||
styles.left = anchorBounds.left + anchorBounds.width
|
||||
} else {
|
||||
styles.left = anchorBounds.left
|
||||
}
|
||||
|
||||
// Apply styles
|
||||
Object.entries(styles).forEach(([style, value]) => {
|
||||
if (value) {
|
||||
element.style[style] = `${value.toFixed(0)}px`
|
||||
} else {
|
||||
element.style[style] = null
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function calcLeftPosition() {
|
||||
let left
|
||||
|
||||
if (align == "right") {
|
||||
left = dimensions.left + dimensions.width - dimensions.containerWidth
|
||||
} else if (align == "right-side") {
|
||||
left = dimensions.left + dimensions.width
|
||||
} else {
|
||||
left = dimensions.left
|
||||
}
|
||||
|
||||
return left
|
||||
}
|
||||
|
||||
// Apply initial styles which don't need to change
|
||||
element.style.position = "absolute"
|
||||
element.style.zIndex = "9999"
|
||||
if (maxWidth) {
|
||||
element.style.maxWidth = `${maxWidth}px`
|
||||
}
|
||||
element.style.minWidth = `${dimensions.width}px`
|
||||
element.style.maxHeight = `${maxHeight.toFixed(0)}px`
|
||||
element.style.transformOrigin = `center ${positionSide}`
|
||||
element.style[positionSide] = `${dimensions[positionSide]}px`
|
||||
element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
|
||||
|
||||
// Observe both anchor and element and resize the popover as appropriate
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
entries.forEach(() => {
|
||||
dimensions = getDimensions()
|
||||
element.style[positionSide] = `${dimensions[positionSide]}px`
|
||||
element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
|
||||
})
|
||||
entries.forEach(update)
|
||||
})
|
||||
resizeObserver.observe(anchor)
|
||||
resizeObserver.observe(element)
|
||||
|
||||
document.addEventListener("scroll", update, true)
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
resizeObserver.disconnect()
|
||||
document.removeEventListener("scroll", update, true)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
@ -58,5 +58,6 @@
|
|||
overflow: hidden;
|
||||
user-select: none;
|
||||
text-transform: uppercase;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
export let active = false
|
||||
export let tooltip = undefined
|
||||
export let dataCy
|
||||
export let newStyles = false
|
||||
export let newStyles = true
|
||||
|
||||
let showTooltip = false
|
||||
</script>
|
||||
|
@ -28,6 +28,7 @@
|
|||
class:spectrum-Button--quiet={quiet}
|
||||
class:new-styles={newStyles}
|
||||
class:active
|
||||
class:disabled
|
||||
class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
|
||||
{disabled}
|
||||
data-cy={dataCy}
|
||||
|
@ -108,7 +109,10 @@
|
|||
border-color: transparent;
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
}
|
||||
.spectrum-Button--secondary.new-styles:hover {
|
||||
.spectrum-Button--secondary.new-styles:not(.disabled):hover {
|
||||
background: var(--spectrum-global-color-gray-300);
|
||||
}
|
||||
.spectrum-Button--secondary.new-styles.disabled {
|
||||
color: var(--spectrum-global-color-gray-500);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -34,7 +34,6 @@
|
|||
display: none;
|
||||
}
|
||||
.main {
|
||||
font-family: var(--font-sans);
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
.main :global(textarea) {
|
||||
|
|
30
packages/bbui/src/FancyForm/FancyButton.svelte
Normal file
30
packages/bbui/src/FancyForm/FancyButton.svelte
Normal file
|
@ -0,0 +1,30 @@
|
|||
<script>
|
||||
import Icon from "../Icon/Icon.svelte"
|
||||
import FancyField from "./FancyField.svelte"
|
||||
|
||||
export let icon
|
||||
export let disabled
|
||||
</script>
|
||||
|
||||
<FancyField on:click clickable {disabled}>
|
||||
{#if icon}
|
||||
{#if icon.includes("/")}
|
||||
<img src={icon} alt="button" />
|
||||
{:else}
|
||||
<Icon name={icon} />
|
||||
{/if}
|
||||
{/if}
|
||||
<slot name="icon" />
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</FancyField>
|
||||
|
||||
<style>
|
||||
img {
|
||||
width: 22px;
|
||||
}
|
||||
div {
|
||||
font-size: var(--font-size-l);
|
||||
}
|
||||
</style>
|
70
packages/bbui/src/FancyForm/FancyButtonRadio.svelte
Normal file
70
packages/bbui/src/FancyForm/FancyButtonRadio.svelte
Normal file
|
@ -0,0 +1,70 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import FancyField from "./FancyField.svelte"
|
||||
import FancyFieldLabel from "./FancyFieldLabel.svelte"
|
||||
import ActionButton from "../ActionButton/ActionButton.svelte"
|
||||
|
||||
export let label
|
||||
export let value
|
||||
export let disabled = false
|
||||
export let error = null
|
||||
export let validate = null
|
||||
export let options = []
|
||||
export let getOptionLabel = option => extractProperty(option, "label")
|
||||
export let getOptionValue = option => extractProperty(option, "value")
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
$: placeholder = !value
|
||||
|
||||
const extractProperty = (value, property) => {
|
||||
if (value && typeof value === "object") {
|
||||
return value[property]
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
const onChange = newValue => {
|
||||
dispatch("change", newValue)
|
||||
value = newValue
|
||||
if (validate) {
|
||||
error = validate(newValue)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<FancyField {error} {value} {validate} {disabled} autoHeight>
|
||||
{#if label}
|
||||
<FancyFieldLabel placeholder={false}>{label}</FancyFieldLabel>
|
||||
{/if}
|
||||
|
||||
<div class="options">
|
||||
{#each options as option}
|
||||
<ActionButton
|
||||
selected={getOptionValue(option) === value}
|
||||
on:click={() => onChange(getOptionValue(option))}
|
||||
>
|
||||
{getOptionLabel(option)}
|
||||
</ActionButton>
|
||||
{/each}
|
||||
</div>
|
||||
</FancyField>
|
||||
|
||||
<style>
|
||||
.options {
|
||||
margin-top: 34px;
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.options :global(.spectrum-ActionButton) {
|
||||
font-size: 15px;
|
||||
line-height: 17px;
|
||||
height: auto;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
</style>
|
53
packages/bbui/src/FancyForm/FancyCheckbox.svelte
Normal file
53
packages/bbui/src/FancyForm/FancyCheckbox.svelte
Normal file
|
@ -0,0 +1,53 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import FancyField from "./FancyField.svelte"
|
||||
import Checkbox from "../Form/Core/Checkbox.svelte"
|
||||
|
||||
export let value
|
||||
export let text
|
||||
export let disabled = false
|
||||
export let error = null
|
||||
export let validate = null
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
const onChange = () => {
|
||||
const newValue = !value
|
||||
dispatch("change", newValue)
|
||||
value = newValue
|
||||
if (validate) {
|
||||
error = validate(newValue)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<FancyField {error} {value} {validate} {disabled} clickable on:click={onChange}>
|
||||
<span>
|
||||
<Checkbox {disabled} {value} />
|
||||
</span>
|
||||
<div class="text">
|
||||
{#if text}
|
||||
{text}
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
</FancyField>
|
||||
|
||||
<style>
|
||||
span {
|
||||
pointer-events: none;
|
||||
}
|
||||
.text {
|
||||
font-size: 15px;
|
||||
line-height: 17px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.text > :global(*) {
|
||||
font-size: inherit !important;
|
||||
}
|
||||
</style>
|
126
packages/bbui/src/FancyForm/FancyField.svelte
Normal file
126
packages/bbui/src/FancyForm/FancyField.svelte
Normal file
|
@ -0,0 +1,126 @@
|
|||
<script>
|
||||
import Icon from "../Icon/Icon.svelte"
|
||||
import { getContext, onMount } from "svelte"
|
||||
import { slide } from "svelte/transition"
|
||||
|
||||
export let disabled = false
|
||||
export let error = null
|
||||
export let focused = false
|
||||
export let clickable = false
|
||||
export let validate
|
||||
export let value
|
||||
export let ref
|
||||
export let autoHeight
|
||||
|
||||
const formContext = getContext("fancy-form")
|
||||
const id = Math.random()
|
||||
const API = {
|
||||
validate: () => {
|
||||
if (validate) {
|
||||
error = validate(value)
|
||||
}
|
||||
return !error
|
||||
},
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (formContext) {
|
||||
formContext.registerField(id, API)
|
||||
}
|
||||
return () => {
|
||||
if (formContext) {
|
||||
formContext.unregisterField(id)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
class="fancy-field"
|
||||
class:error
|
||||
class:disabled
|
||||
class:focused
|
||||
class:clickable
|
||||
class:auto-height={autoHeight}
|
||||
>
|
||||
<div class="content" on:click>
|
||||
<div class="field">
|
||||
<slot />
|
||||
</div>
|
||||
{#if error}
|
||||
<div class="error-icon">
|
||||
<Icon name="Alert" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if error}
|
||||
<div transition:slide|local={{ duration: 130 }} class="error-message">
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.fancy-field {
|
||||
max-width: 400px;
|
||||
background: var(--spectrum-global-color-gray-75);
|
||||
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 130ms ease-out, background 130ms ease-out,
|
||||
background 130ms ease-out;
|
||||
color: var(--spectrum-global-color-gray-800);
|
||||
}
|
||||
.fancy-field:hover {
|
||||
border-color: var(--spectrum-global-color-gray-400);
|
||||
}
|
||||
.fancy-field.clickable:hover {
|
||||
background: var(--spectrum-global-color-gray-200);
|
||||
cursor: pointer;
|
||||
}
|
||||
.fancy-field.focused {
|
||||
border-color: var(--spectrum-global-color-blue-400);
|
||||
}
|
||||
.fancy-field.error {
|
||||
border-color: var(--spectrum-global-color-red-400);
|
||||
}
|
||||
.fancy-field.disabled {
|
||||
background: var(--spectrum-global-color-gray-200);
|
||||
color: var(--spectrum-global-color-gray-400);
|
||||
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||
pointer-events: none;
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
height: 64px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.fancy-field.auto-height .content {
|
||||
height: auto;
|
||||
}
|
||||
.content,
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.field {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.error-message {
|
||||
background: var(--spectrum-global-color-red-400);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
padding: 6px 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.error-icon {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.error-icon :global(.spectrum-Icon) {
|
||||
fill: var(--spectrum-global-color-red-400);
|
||||
}
|
||||
</style>
|
25
packages/bbui/src/FancyForm/FancyFieldLabel.svelte
Normal file
25
packages/bbui/src/FancyForm/FancyFieldLabel.svelte
Normal file
|
@ -0,0 +1,25 @@
|
|||
<script>
|
||||
export let placeholder = true
|
||||
</script>
|
||||
|
||||
<div class:placeholder>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
font-size: 14px;
|
||||
line-height: 15px;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
transition: font-size 130ms ease-out, top 130ms ease-out,
|
||||
transform 130ms ease-out;
|
||||
}
|
||||
div.placeholder {
|
||||
top: 50%;
|
||||
font-size: 15px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
40
packages/bbui/src/FancyForm/FancyForm.svelte
Normal file
40
packages/bbui/src/FancyForm/FancyForm.svelte
Normal file
|
@ -0,0 +1,40 @@
|
|||
<script>
|
||||
import { setContext } from "svelte"
|
||||
|
||||
let fields = {}
|
||||
|
||||
setContext("fancy-form", {
|
||||
registerField: (id, api) => {
|
||||
fields = { ...fields, [id]: api }
|
||||
},
|
||||
unregisterField: id => {
|
||||
delete fields[id]
|
||||
fields = fields
|
||||
},
|
||||
})
|
||||
|
||||
export const validate = () => {
|
||||
let valid = true
|
||||
Object.values(fields).forEach(api => {
|
||||
if (!api.validate()) {
|
||||
valid = false
|
||||
}
|
||||
})
|
||||
return valid
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="fancy-form">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.fancy-form :global(.fancy-field:not(:first-of-type)) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.fancy-form :global(.fancy-field:not(:last-of-type)) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
</style>
|
77
packages/bbui/src/FancyForm/FancyInput.svelte
Normal file
77
packages/bbui/src/FancyForm/FancyInput.svelte
Normal file
|
@ -0,0 +1,77 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import FancyField from "./FancyField.svelte"
|
||||
import FancyFieldLabel from "./FancyFieldLabel.svelte"
|
||||
import { fade } from "svelte/transition"
|
||||
|
||||
export let label
|
||||
export let value
|
||||
export let type = "text"
|
||||
export let disabled = false
|
||||
export let error = null
|
||||
export let validate = null
|
||||
export let suffix = null
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let focused = false
|
||||
$: placeholder = !focused && !value
|
||||
|
||||
const onChange = e => {
|
||||
const newValue = e.target.value
|
||||
dispatch("change", newValue)
|
||||
value = newValue
|
||||
if (validate) {
|
||||
error = validate(newValue)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<FancyField {error} {value} {validate} {disabled} {focused}>
|
||||
{#if label}
|
||||
<FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
|
||||
{/if}
|
||||
<input
|
||||
{disabled}
|
||||
value={value || ""}
|
||||
type={type || "text"}
|
||||
on:input={onChange}
|
||||
on:focus={() => (focused = true)}
|
||||
on:blur={() => (focused = false)}
|
||||
class:placeholder
|
||||
/>
|
||||
{#if suffix && !placeholder}
|
||||
<div in:fade|local={{ duration: 130 }} class="suffix">{suffix}</div>
|
||||
{/if}
|
||||
</FancyField>
|
||||
|
||||
<style>
|
||||
input {
|
||||
width: 100%;
|
||||
transition: transform 130ms ease-out;
|
||||
transform: translateY(9px);
|
||||
background: transparent;
|
||||
font-size: 15px;
|
||||
line-height: 17px;
|
||||
font-family: var(--font-sans);
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
input.placeholder {
|
||||
transform: translateY(0);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.suffix {
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
transform: translateY(9px);
|
||||
font-size: 15px;
|
||||
line-height: 17px;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
</style>
|
147
packages/bbui/src/FancyForm/FancySelect.svelte
Normal file
147
packages/bbui/src/FancyForm/FancySelect.svelte
Normal file
|
@ -0,0 +1,147 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import FancyField from "./FancyField.svelte"
|
||||
import Icon from "../Icon/Icon.svelte"
|
||||
import Popover from "../Popover/Popover.svelte"
|
||||
import FancyFieldLabel from "./FancyFieldLabel.svelte"
|
||||
|
||||
export let label
|
||||
export let value
|
||||
export let disabled = false
|
||||
export let error = null
|
||||
export let validate = null
|
||||
export let options = []
|
||||
export let getOptionLabel = option => extractProperty(option, "label")
|
||||
export let getOptionValue = option => extractProperty(option, "value")
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let open = false
|
||||
let popover
|
||||
let wrapper
|
||||
|
||||
$: placeholder = !value
|
||||
$: selectedLabel = getSelectedLabel(value)
|
||||
|
||||
const extractProperty = (value, property) => {
|
||||
if (value && typeof value === "object") {
|
||||
return value[property]
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
const onChange = newValue => {
|
||||
dispatch("change", newValue)
|
||||
value = newValue
|
||||
if (validate) {
|
||||
error = validate(newValue)
|
||||
}
|
||||
open = false
|
||||
}
|
||||
|
||||
const getSelectedLabel = value => {
|
||||
if (!value || !options?.length) {
|
||||
return ""
|
||||
}
|
||||
const selectedOption = options.find(x => getOptionValue(x) === value)
|
||||
if (!selectedOption) {
|
||||
return value
|
||||
}
|
||||
return getOptionLabel(selectedOption)
|
||||
}
|
||||
</script>
|
||||
|
||||
<FancyField
|
||||
bind:ref={wrapper}
|
||||
{error}
|
||||
{value}
|
||||
{validate}
|
||||
{disabled}
|
||||
clickable
|
||||
on:click={() => (open = true)}
|
||||
>
|
||||
{#if label}
|
||||
<FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
|
||||
{/if}
|
||||
|
||||
<div class="value" class:placeholder>
|
||||
{selectedLabel || ""}
|
||||
</div>
|
||||
|
||||
<div class="arrow">
|
||||
<Icon name="ChevronDown" />
|
||||
</div>
|
||||
</FancyField>
|
||||
|
||||
<Popover
|
||||
anchor={wrapper}
|
||||
align="left"
|
||||
portalTarget={document.documentElement}
|
||||
bind:this={popover}
|
||||
{open}
|
||||
on:close={() => (open = false)}
|
||||
useAnchorWidth={true}
|
||||
maxWidth={null}
|
||||
>
|
||||
<div class="popover-content">
|
||||
{#if options.length}
|
||||
{#each options as option, idx}
|
||||
<div
|
||||
class="popover-option"
|
||||
tabindex="0"
|
||||
on:click={() => onChange(getOptionValue(option, idx))}
|
||||
>
|
||||
<span class="option-text">
|
||||
{getOptionLabel(option, idx)}
|
||||
</span>
|
||||
{#if value === getOptionValue(option, idx)}
|
||||
<Icon name="Checkmark" />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</Popover>
|
||||
|
||||
<style>
|
||||
.value {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
font-size: 15px;
|
||||
line-height: 17px;
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
transition: transform 130ms ease-out, opacity 130ms ease-out;
|
||||
opacity: 1;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
transform: translateY(9px);
|
||||
}
|
||||
.value.placeholder {
|
||||
transform: translateY(0);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
margin-top: 0;
|
||||
}
|
||||
.popover-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
padding: 7px 0;
|
||||
}
|
||||
.popover-option {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 7px 16px;
|
||||
transition: background 130ms ease-out;
|
||||
font-size: 15px;
|
||||
}
|
||||
.popover-option:hover {
|
||||
background: var(--spectrum-global-color-gray-200);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
6
packages/bbui/src/FancyForm/index.js
Normal file
6
packages/bbui/src/FancyForm/index.js
Normal file
|
@ -0,0 +1,6 @@
|
|||
export { default as FancyInput } from "./FancyInput.svelte"
|
||||
export { default as FancyCheckbox } from "./FancyCheckbox.svelte"
|
||||
export { default as FancySelect } from "./FancySelect.svelte"
|
||||
export { default as FancyButton } from "./FancyButton.svelte"
|
||||
export { default as FancyForm } from "./FancyForm.svelte"
|
||||
export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte"
|
|
@ -264,7 +264,7 @@
|
|||
max-height: 100%;
|
||||
}
|
||||
:global(.flatpickr-calendar) {
|
||||
font-family: "Source Sans Pro", sans-serif;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
.is-disabled {
|
||||
pointer-events: none !important;
|
||||
|
|
|
@ -2,12 +2,12 @@
|
|||
import "@spectrum-css/picker/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 Search from "./Search.svelte"
|
||||
import Icon from "../../Icon/Icon.svelte"
|
||||
import StatusLight from "../../StatusLight/StatusLight.svelte"
|
||||
import Popover from "../../Popover/Popover.svelte"
|
||||
|
||||
export let id = null
|
||||
export let disabled = false
|
||||
|
@ -33,7 +33,10 @@
|
|||
export let sort = false
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let searchTerm = null
|
||||
let button
|
||||
let popover
|
||||
|
||||
$: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
|
||||
$: filteredOptions = getFilteredOptions(
|
||||
|
@ -42,7 +45,9 @@
|
|||
getOptionLabel
|
||||
)
|
||||
|
||||
const onClick = () => {
|
||||
const onClick = e => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
dispatch("click")
|
||||
if (readonly) {
|
||||
return
|
||||
|
@ -76,77 +81,119 @@
|
|||
}
|
||||
</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:click={onClick}
|
||||
>
|
||||
{#if fieldIcon}
|
||||
<span class="option-extra">
|
||||
<Icon name={fieldIcon} />
|
||||
</span>
|
||||
{/if}
|
||||
{#if fieldColour}
|
||||
<span class="option-extra">
|
||||
<StatusLight square color={fieldColour} />
|
||||
</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:click={onClick}
|
||||
bind:this={button}
|
||||
>
|
||||
{#if fieldIcon}
|
||||
<span class="option-extra icon">
|
||||
<Icon size="S" 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}
|
||||
{/if}
|
||||
{#if fieldColour}
|
||||
<span class="option-extra">
|
||||
<StatusLight square 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}
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#spectrum-css-icon-Chevron100" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<Popover
|
||||
anchor={button}
|
||||
align="left"
|
||||
bind:this={popover}
|
||||
{open}
|
||||
on:close={() => (open = false)}
|
||||
useAnchorWidth={!autoWidth}
|
||||
maxWidth={autoWidth ? 400 : null}
|
||||
>
|
||||
<div
|
||||
class="popover-content"
|
||||
class:auto-width={autoWidth}
|
||||
use:clickOutside={() => (open = false)}
|
||||
>
|
||||
{#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))}
|
||||
class:is-disabled={!isOptionEnabled(option)}
|
||||
>
|
||||
<span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
|
||||
{#if getOptionIcon(option, idx)}
|
||||
<span class="option-extra icon">
|
||||
<Icon size="S" name={getOptionIcon(option, idx)} />
|
||||
</span>
|
||||
{/if}
|
||||
{#if getOptionColour(option, idx)}
|
||||
<span class="option-extra">
|
||||
<StatusLight square 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"
|
||||
|
@ -155,61 +202,13 @@
|
|||
<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))}
|
||||
class:is-disabled={!isOptionEnabled(option)}
|
||||
>
|
||||
{#if getOptionIcon(option, idx)}
|
||||
<span class="option-extra">
|
||||
<Icon name={getOptionIcon(option, idx)} />
|
||||
</span>
|
||||
{/if}
|
||||
{#if getOptionColour(option, idx)}
|
||||
<span class="option-extra">
|
||||
<StatusLight square 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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||
</svg>
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
</Popover>
|
||||
|
||||
<style>
|
||||
.spectrum-Popover {
|
||||
max-height: 240px;
|
||||
z-index: 999;
|
||||
top: 100%;
|
||||
}
|
||||
.spectrum-Popover:not(.auto-width) {
|
||||
width: 100%;
|
||||
}
|
||||
.spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) {
|
||||
max-width: 400px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.spectrum-Picker {
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
|
@ -229,9 +228,6 @@
|
|||
.spectrum-Picker-label.auto-width.is-placeholder {
|
||||
padding-right: 2px;
|
||||
}
|
||||
.auto-width .spectrum-Menu-item {
|
||||
padding-right: var(--spacing-xl);
|
||||
}
|
||||
|
||||
/* Icon and colour alignment */
|
||||
.spectrum-Menu-checkmark {
|
||||
|
@ -241,27 +237,48 @@
|
|||
.option-extra {
|
||||
padding-right: 8px;
|
||||
}
|
||||
.option-extra.icon {
|
||||
margin: 0 -1px;
|
||||
}
|
||||
|
||||
.spectrum-Popover :global(.spectrum-Search) {
|
||||
/* Popover */
|
||||
.popover-content {
|
||||
display: contents;
|
||||
}
|
||||
.popover-content.auto-width .spectrum-Menu-itemLabel {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.popover-content:not(.auto-width) .spectrum-Menu-itemLabel {
|
||||
width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.popover-content.auto-width .spectrum-Menu-item {
|
||||
padding-right: var(--spacing-xl);
|
||||
}
|
||||
.spectrum-Menu-item.is-disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Search styles inside popover */
|
||||
.popover-content :global(.spectrum-Search) {
|
||||
margin-top: -1px;
|
||||
margin-left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
}
|
||||
.spectrum-Popover :global(.spectrum-Search input) {
|
||||
.popover-content :global(.spectrum-Search input) {
|
||||
height: auto;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
padding-top: var(--spectrum-global-dimension-size-100);
|
||||
padding-bottom: var(--spectrum-global-dimension-size-100);
|
||||
}
|
||||
.spectrum-Popover :global(.spectrum-Search .spectrum-ClearButton) {
|
||||
.popover-content :global(.spectrum-Search .spectrum-ClearButton) {
|
||||
right: 1px;
|
||||
top: 2px;
|
||||
}
|
||||
.spectrum-Popover :global(.spectrum-Search .spectrum-Textfield-icon) {
|
||||
.popover-content :global(.spectrum-Search .spectrum-Textfield-icon) {
|
||||
top: 9px;
|
||||
}
|
||||
.spectrum-Menu-item.is-disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -18,8 +18,11 @@
|
|||
export let autoWidth = false
|
||||
export let autocomplete = false
|
||||
export let sort = false
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let open = false
|
||||
|
||||
$: fieldText = getFieldText(value, options, placeholder)
|
||||
$: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
|
||||
$: fieldColour = getFieldAttribute(getOptionColour, value, options)
|
||||
|
|
|
@ -112,8 +112,4 @@
|
|||
.spectrum-Textfield {
|
||||
width: 100%;
|
||||
}
|
||||
input:disabled {
|
||||
color: var(--spectrum-global-color-gray-600) !important;
|
||||
-webkit-text-fill-color: var(--spectrum-global-color-gray-600) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -19,6 +19,7 @@
|
|||
.icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex: 0 0 28px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
|
@ -34,6 +35,7 @@
|
|||
.icon.size--S {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
flex: 0 0 22px;
|
||||
}
|
||||
.icon.size--S :global(.spectrum-Icon) {
|
||||
width: 16px;
|
||||
|
@ -46,6 +48,7 @@
|
|||
.icon.size--L {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex: 0 0 40px;
|
||||
}
|
||||
.icon.size--L :global(.spectrum-Icon) {
|
||||
width: 28px;
|
||||
|
|
|
@ -56,5 +56,6 @@
|
|||
--spectrum-semantic-positive-icon-color: #2d9d78;
|
||||
--spectrum-semantic-negative-icon-color: #e34850;
|
||||
min-width: 100px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
label {
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
|
||||
.muted {
|
||||
|
|
|
@ -1,32 +1,101 @@
|
|||
<script>
|
||||
import { setContext } from "svelte"
|
||||
import clickOutside from "../Actions/click_outside"
|
||||
|
||||
export let wide = false
|
||||
export let maxWidth = "80ch"
|
||||
export let narrow = false
|
||||
export let noPadding = false
|
||||
|
||||
let sidePanelVisble = false
|
||||
|
||||
setContext("side-panel", {
|
||||
open: () => (sidePanelVisble = true),
|
||||
close: () => (sidePanelVisble = false),
|
||||
})
|
||||
</script>
|
||||
|
||||
<div style="--max-width: {maxWidth}" class:wide class:noPadding>
|
||||
<slot />
|
||||
<div class="page">
|
||||
<div class="main">
|
||||
<div class="content" class:wide class:noPadding class:narrow>
|
||||
<slot />
|
||||
<div class="fix-scroll-padding" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="side-panel"
|
||||
class:visible={sidePanelVisble}
|
||||
use:clickOutside={() => {
|
||||
sidePanelVisble = false
|
||||
}}
|
||||
>
|
||||
<slot name="side-panel" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
.page {
|
||||
position: relative;
|
||||
}
|
||||
.page,
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
flex: 1 1 auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.main {
|
||||
overflow: auto;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
max-width: var(--max-width);
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
padding: calc(var(--spacing-xl) * 2);
|
||||
min-height: calc(100% - var(--spacing-xl) * 4);
|
||||
flex: 1 1 auto;
|
||||
padding: 50px 50px 0 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wide {
|
||||
.fix-scroll-padding {
|
||||
content: "";
|
||||
display: block;
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
.content.wide {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
.content.narrow {
|
||||
max-width: 840px;
|
||||
}
|
||||
#side-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 24px;
|
||||
background: var(--background);
|
||||
border-left: var(--border-light);
|
||||
width: 320px;
|
||||
max-width: calc(100vw - 48px - 48px);
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
transform: translateX(100%);
|
||||
transition: transform 130ms ease-out;
|
||||
height: calc(100% - 48px);
|
||||
z-index: 2;
|
||||
}
|
||||
#side-panel.visible {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.noPadding {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
@media (max-width: 640px) {
|
||||
.content {
|
||||
padding: 24px;
|
||||
max-width: calc(100vw - 48px) !important;
|
||||
width: calc(100vw - 48px) !important;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import "@spectrum-css/link/dist/index-vars.css"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
export let href = "#"
|
||||
export let size = "M"
|
||||
|
@ -9,10 +10,12 @@
|
|||
export let overBackground = false
|
||||
export let target
|
||||
export let download
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<a
|
||||
on:click
|
||||
on:click={e => dispatch("click") && e.stopPropagation()}
|
||||
{href}
|
||||
{target}
|
||||
{download}
|
||||
|
|
|
@ -30,9 +30,11 @@
|
|||
<Label>{subtitle}</Label>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="right">
|
||||
<slot />
|
||||
</div>
|
||||
{#if $$slots.default}
|
||||
<div class="right">
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
@ -45,6 +47,7 @@
|
|||
justify-content: space-between;
|
||||
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||
transition: background 130ms ease-out;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
.list-item:not(:first-child) {
|
||||
border-top: none;
|
||||
|
|
|
@ -26,7 +26,6 @@
|
|||
padding: 40px;
|
||||
background-color: var(--purple);
|
||||
color: white;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
|
|
|
@ -19,7 +19,6 @@
|
|||
|
||||
<style>
|
||||
p, span {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
|
|
|
@ -104,7 +104,7 @@
|
|||
{/if}
|
||||
|
||||
{#if showCancelButton}
|
||||
<Button group secondary newStyles on:click={close}>
|
||||
<Button group secondary on:click={close}>
|
||||
{cancelText}
|
||||
</Button>
|
||||
{/if}
|
||||
|
@ -151,7 +151,8 @@
|
|||
overflow: visible;
|
||||
}
|
||||
.spectrum-Dialog-heading {
|
||||
font-family: var(--font-sans);
|
||||
font-family: var(--font-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.spectrum-Dialog-heading.noDivider {
|
||||
margin-bottom: 12px;
|
||||
|
|
|
@ -42,7 +42,6 @@
|
|||
<style>
|
||||
p {
|
||||
margin: 0;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
p.error {
|
||||
|
|
|
@ -4,6 +4,9 @@
|
|||
import { createEventDispatcher } from "svelte"
|
||||
import positionDropdown from "../Actions/position_dropdown"
|
||||
import clickOutside from "../Actions/click_outside"
|
||||
import { fly } from "svelte/transition"
|
||||
import { getContext } from "svelte"
|
||||
import Context from "../context"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
|
@ -12,9 +15,10 @@
|
|||
export let portalTarget
|
||||
export let dataCy
|
||||
export let maxWidth
|
||||
|
||||
export let direction = "bottom"
|
||||
export let showTip = false
|
||||
export let open = false
|
||||
export let useAnchorWidth = false
|
||||
|
||||
let tipSvg =
|
||||
'<svg xmlns="http://www.w3.org/svg/2000" width="23" height="12" class="spectrum-Popover-tip" > <path class="spectrum-Popover-tip-triangle" d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0" /> </svg>'
|
||||
|
@ -22,6 +26,7 @@
|
|||
$: tooltipClasses = showTip
|
||||
? `spectrum-Popover--withTip spectrum-Popover--${direction}`
|
||||
: ""
|
||||
$: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
|
||||
|
||||
export const show = () => {
|
||||
dispatch("open")
|
||||
|
@ -35,13 +40,22 @@
|
|||
|
||||
const handleOutsideClick = e => {
|
||||
if (open) {
|
||||
e.stopPropagation()
|
||||
// Stop propagation if the source is the anchor
|
||||
let node = e.target
|
||||
let fromAnchor = false
|
||||
while (!fromAnchor && node && node.parentNode) {
|
||||
fromAnchor = node === anchor
|
||||
node = node.parentNode
|
||||
}
|
||||
if (fromAnchor) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
// Hide the popover
|
||||
hide()
|
||||
}
|
||||
}
|
||||
|
||||
let open = null
|
||||
|
||||
function handleEscape(e) {
|
||||
if (open && e.key === "Escape") {
|
||||
hide()
|
||||
|
@ -50,15 +64,19 @@
|
|||
</script>
|
||||
|
||||
{#if open}
|
||||
<Portal target={portalTarget}>
|
||||
<Portal {target}>
|
||||
<div
|
||||
tabindex="0"
|
||||
use:positionDropdown={{ anchor, align, maxWidth }}
|
||||
use:clickOutside={handleOutsideClick}
|
||||
use:positionDropdown={{ anchor, align, maxWidth, useAnchorWidth }}
|
||||
use:clickOutside={{
|
||||
callback: handleOutsideClick,
|
||||
anchor,
|
||||
}}
|
||||
on:keydown={handleEscape}
|
||||
class={"spectrum-Popover is-open " + (tooltipClasses || "")}
|
||||
role="presentation"
|
||||
data-cy={dataCy}
|
||||
transition:fly|local={{ y: -20, duration: 200 }}
|
||||
>
|
||||
{#if showTip}
|
||||
{@html tipSvg}
|
||||
|
|
|
@ -29,7 +29,6 @@
|
|||
font-size: var(--font-size-m);
|
||||
margin: 0 0 var(--spacing-l) 0;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
.input-group-column {
|
||||
|
|
|
@ -1,8 +1,11 @@
|
|||
<script>
|
||||
export let value
|
||||
export let schema
|
||||
</script>
|
||||
|
||||
<div>{typeof value === "object" ? JSON.stringify(value) : value}</div>
|
||||
<div class:capitalise={schema?.capitalise}>
|
||||
{typeof value === "object" ? JSON.stringify(value) : value}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
|
@ -10,5 +13,10 @@
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: var(--max-cell-width);
|
||||
width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
div.capitalise {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -21,6 +21,8 @@
|
|||
* template: a HBS or JS binding to use as the value
|
||||
* background: the background color
|
||||
* color: the text color
|
||||
* borderLeft: show a left border
|
||||
* borderRight: show a right border
|
||||
*/
|
||||
export let data = []
|
||||
export let schema = {}
|
||||
|
@ -31,6 +33,7 @@
|
|||
export let allowSelectRows
|
||||
export let allowEditRows = true
|
||||
export let allowEditColumns = true
|
||||
export let allowClickRows = true
|
||||
export let selectedRows = []
|
||||
export let customRenderers = []
|
||||
export let disableSorting = false
|
||||
|
@ -270,6 +273,17 @@
|
|||
if (schema[field].align === "Right") {
|
||||
styles[field] += "justify-content: flex-end; text-align: right;"
|
||||
}
|
||||
if (schema[field].borderLeft) {
|
||||
styles[field] +=
|
||||
"border-left: 1px solid var(--spectrum-global-color-gray-200);"
|
||||
}
|
||||
if (schema[field].borderLeft) {
|
||||
styles[field] +=
|
||||
"border-right: 1px solid var(--spectrum-global-color-gray-200);"
|
||||
}
|
||||
if (schema[field].minWidth) {
|
||||
styles[field] += `min-width: ${schema[field].minWidth};`
|
||||
}
|
||||
})
|
||||
return styles
|
||||
}
|
||||
|
@ -290,7 +304,11 @@
|
|||
</slot>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
|
||||
<div
|
||||
class="spectrum-Table"
|
||||
class:no-scroll={!rowCount}
|
||||
style={`${heightStyle}${gridStyle}`}
|
||||
>
|
||||
{#if fields.length}
|
||||
<div class="spectrum-Table-head">
|
||||
{#if showEditColumn}
|
||||
|
@ -356,7 +374,7 @@
|
|||
{/if}
|
||||
{#if sortedRows?.length}
|
||||
{#each sortedRows as row, idx}
|
||||
<div class="spectrum-Table-row">
|
||||
<div class="spectrum-Table-row" class:clickable={allowClickRows}>
|
||||
{#if showEditColumn}
|
||||
<div
|
||||
class:noBorderCheckbox={!showHeaderBorder}
|
||||
|
@ -433,10 +451,10 @@
|
|||
/* Wrapper */
|
||||
.wrapper {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
--table-bg: var(--spectrum-global-color-gray-50);
|
||||
--table-border: 1px solid var(--spectrum-alias-border-color-mid);
|
||||
--cell-padding: var(--spectrum-global-dimension-size-250);
|
||||
overflow: auto;
|
||||
}
|
||||
.wrapper--quiet {
|
||||
--table-bg: var(--spectrum-alias-background-color-transparent);
|
||||
|
@ -460,6 +478,9 @@
|
|||
display: grid;
|
||||
overflow: auto;
|
||||
}
|
||||
.spectrum-Table.no-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.spectrum-Table-head {
|
||||
|
@ -546,12 +567,13 @@
|
|||
/* Table rows */
|
||||
.spectrum-Table-row {
|
||||
display: contents;
|
||||
cursor: auto;
|
||||
}
|
||||
.spectrum-Table-row:hover .spectrum-Table-cell {
|
||||
/*background-color: var(--hover-bg) !important;*/
|
||||
.spectrum-Table-row.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.spectrum-Table-row:hover .spectrum-Table-cell:after {
|
||||
background-color: var(--spectrum-alias-highlight-hover);
|
||||
.spectrum-Table-row.clickable:hover .spectrum-Table-cell {
|
||||
background-color: var(--spectrum-global-color-gray-100);
|
||||
}
|
||||
.wrapper--quiet .spectrum-Table-row {
|
||||
border-left: none;
|
||||
|
@ -584,24 +606,13 @@
|
|||
border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
|
||||
background-color: var(--table-bg);
|
||||
z-index: auto;
|
||||
transition: background-color 130ms ease-out;
|
||||
}
|
||||
.spectrum-Table-cell--edit {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.spectrum-Table-cell:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
transition: background-color
|
||||
var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
|
||||
}
|
||||
|
||||
/* Placeholder */
|
||||
.placeholder {
|
||||
|
|
|
@ -82,7 +82,8 @@
|
|||
.spectrum-Tabs-item {
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
.spectrum-Tabs-item.is-selected {
|
||||
.spectrum-Tabs-item.is-selected,
|
||||
.spectrum-Tabs-item:hover {
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
<style>
|
||||
.spectrum-Tags-item {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -5,3 +5,13 @@
|
|||
<div class="spectrum-Tags" role="list" aria-label="list">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.spectrum-Tags {
|
||||
margin-top: -8px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
.spectrum-Tags :global(.spectrum-Tags-item) {
|
||||
margin: 8px 0 0 4px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -15,3 +15,9 @@
|
|||
>
|
||||
<slot />
|
||||
</h1>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
font-family: var(--font-accent);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -40,12 +40,14 @@
|
|||
--rounded-medium: 8px;
|
||||
--rounded-large: 16px;
|
||||
|
||||
--font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
|
||||
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
|
||||
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||
--font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
|
||||
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||
--font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
|
||||
--font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
|
||||
monospace;
|
||||
--spectrum-alias-body-text-font-family: var(--font-sans);
|
||||
|
||||
font-size: 16px;
|
||||
--font-size-xs: 0.75rem;
|
||||
|
@ -89,6 +91,8 @@
|
|||
--border-light-2: 2px var(--grey-3) solid;
|
||||
--border-blue: 2px var(--blue) solid;
|
||||
--border-transparent: 2px transparent solid;
|
||||
|
||||
--spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
export default {
|
||||
Modal: "bbui-modal",
|
||||
PopoverRoot: "bbui-popover-root",
|
||||
}
|
||||
|
|
|
@ -75,6 +75,7 @@ export { default as ListItem } from "./List/ListItem.svelte"
|
|||
export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
|
||||
export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
|
||||
export { default as Slider } from "./Form/Slider.svelte"
|
||||
export { default as Accordion } from "./Accordion/Accordion.svelte"
|
||||
|
||||
// Renderers
|
||||
export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
|
||||
|
@ -101,3 +102,6 @@ export { banner, BANNER_TYPES } from "./Stores/banner"
|
|||
|
||||
// Helpers
|
||||
export * as Helpers from "./helpers"
|
||||
|
||||
// Fancy form components
|
||||
export * from "./FancyForm"
|
||||
|
|
|
@ -109,6 +109,11 @@
|
|||
estree-walker "^1.0.1"
|
||||
picomatch "^2.2.2"
|
||||
|
||||
"@spectrum-css/accordion@3.0.24":
|
||||
version "3.0.24"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-3.0.24.tgz#f89066c120c57b0cfc9aba66d60c39fc1cf69f74"
|
||||
integrity sha512-jNOmUsxmiT3lRLButnN5KKHM94fd+87fjiF8L0c4uRNgJl6ZsBuxPXrM15lV4y1f8D2IACAw01/ZkGRAeaCOFA==
|
||||
|
||||
"@spectrum-css/actionbutton@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#393C44;}
|
||||
.st0{fill:#000000;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
.st2{fill:#4285F4;}
|
||||
</style>
|
||||
|
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
|
@ -11,9 +11,5 @@
|
|||
"WORKER_PORT": "4200",
|
||||
"JWT_SECRET": "test",
|
||||
"HOST_IP": ""
|
||||
},
|
||||
"retries": {
|
||||
"runMode": 1,
|
||||
"openMode": 0
|
||||
}
|
||||
}
|
|
@ -2,7 +2,7 @@ import filterTests from "../../support/filterTests"
|
|||
// const interact = require("../support/interact")
|
||||
|
||||
filterTests(["smoke", "all"], () => {
|
||||
context("Auth Configuration", () => {
|
||||
xcontext("Auth Configuration", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
})
|
||||
|
@ -21,7 +21,7 @@ filterTests(["smoke", "all"], () => {
|
|||
cy.get("[data-cy=oidc-active]").should('not.be.checked')
|
||||
|
||||
cy.intercept("POST", "/api/global/configs").as("updateAuth")
|
||||
cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
|
||||
cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
|
||||
cy.wait("@updateAuth")
|
||||
cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
|
||||
|
||||
|
@ -45,7 +45,7 @@ filterTests(["smoke", "all"], () => {
|
|||
cy.get("button[data-cy=oidc-save]").should("not.be.disabled");
|
||||
|
||||
cy.intercept("POST", "/api/global/configs").as("updateAuth")
|
||||
cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
|
||||
cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
|
||||
cy.wait("@updateAuth")
|
||||
cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
|
||||
|
||||
|
@ -85,11 +85,11 @@ filterTests(["smoke", "all"], () => {
|
|||
cy.get(".auth-form input.spectrum-Textfield-input").type("Another ")
|
||||
cy.get(".spectrum-Tags").find(".spectrum-Tags-item").its("length").should("eq", 6)
|
||||
cy.get(".spectrum-Tags-item").contains("Another")
|
||||
|
||||
|
||||
cy.get("button[data-cy=oidc-save]").should("not.be.disabled");
|
||||
|
||||
cy.intercept("POST", "/api/global/configs").as("updateAuth")
|
||||
cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
|
||||
cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
|
||||
cy.wait("@updateAuth")
|
||||
cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
|
||||
|
||||
|
@ -123,7 +123,7 @@ filterTests(["smoke", "all"], () => {
|
|||
cy.get("button[data-cy=oidc-save]").should("not.be.disabled");
|
||||
|
||||
cy.intercept("POST", "/api/global/configs").as("updateAuth")
|
||||
cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
|
||||
cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
|
||||
cy.wait("@updateAuth")
|
||||
cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
|
||||
|
||||
|
@ -144,7 +144,7 @@ filterTests(["smoke", "all"], () => {
|
|||
|
||||
cy.get("div.content").scrollTo("bottom")
|
||||
|
||||
cy.get("[data-cy=restore-oidc-default-scopes]").click({force: true})
|
||||
cy.get("[data-cy=restore-oidc-default-scopes]").click({ force: true })
|
||||
|
||||
cy.get(".spectrum-Tags").find(".spectrum-Tags-item").its("length").should("eq", 4)
|
||||
|
||||
|
|
|
@ -3,107 +3,112 @@ const interact = require('../../support/interact')
|
|||
|
||||
filterTests(["smoke", "all"], () => {
|
||||
context("User Settings Menu", () => {
|
||||
|
||||
|
||||
before(() => {
|
||||
cy.login()
|
||||
})
|
||||
|
||||
|
||||
it("should update user information via user settings menu", () => {
|
||||
const fname = "test"
|
||||
const lname = "user"
|
||||
const fname = "test"
|
||||
const lname = "user"
|
||||
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`)
|
||||
cy.updateUserInformation(fname, lname)
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`)
|
||||
cy.updateUserInformation(fname, lname)
|
||||
|
||||
// Go to user info and confirm name update
|
||||
cy.contains("Users").click()
|
||||
cy.contains("test@test.com").click()
|
||||
// Go to user info and confirm name update
|
||||
cy.contains("Users").click()
|
||||
cy.contains("test@test.com").click()
|
||||
|
||||
cy.get(interact.FIELD, { timeout: 1000 }).eq(1).within(() => {
|
||||
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', fname)
|
||||
})
|
||||
cy.get(interact.FIELD).eq(2).within(() => {
|
||||
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', lname)
|
||||
})
|
||||
cy.get(interact.FIELD, { timeout: 1000 }).eq(1).within(() => {
|
||||
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', fname)
|
||||
})
|
||||
cy.get(interact.FIELD).eq(2).within(() => {
|
||||
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', lname)
|
||||
})
|
||||
})
|
||||
|
||||
it("should allow copying of the users API key", () => {
|
||||
cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
|
||||
cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true })
|
||||
cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
|
||||
cy.get(interact.SPECTRUM_ICON).click({force: true})
|
||||
})
|
||||
// There may be timing issues with this on the smoke build
|
||||
cy.wait(500)
|
||||
cy.get(".spectrum-Toast-content")
|
||||
xit("should allow copying of the users API key", () => {
|
||||
cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
|
||||
cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true })
|
||||
cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
|
||||
cy.get(interact.SPECTRUM_ICON).click({ force: true })
|
||||
})
|
||||
// There may be timing issues with this on the smoke build
|
||||
cy.wait(500)
|
||||
cy.get(".spectrum-Toast-content")
|
||||
.contains("URL copied to clipboard")
|
||||
.should("be.visible")
|
||||
})
|
||||
|
||||
it("should allow API key regeneration", () => {
|
||||
// Get initial API key value
|
||||
cy.get(interact.SPECTRUM_DIALOG_CONTENT)
|
||||
cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
|
||||
cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true })
|
||||
cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
|
||||
cy.get(interact.SPECTRUM_ICON).click({ force: true })
|
||||
})
|
||||
// Get initial API key value
|
||||
cy.get(interact.SPECTRUM_DIALOG_CONTENT)
|
||||
.find(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').as('keyOne')
|
||||
|
||||
// Click re-generate key button
|
||||
cy.get("button").contains("Re-generate key").click({ force: true })
|
||||
// Click re-generate key button
|
||||
cy.get("button").contains("Regenerate key").click({ force: true })
|
||||
|
||||
// Verify API key was changed
|
||||
cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
|
||||
cy.get('@keyOne').then((keyOne) => {
|
||||
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').should('not.eq', keyOne)
|
||||
})
|
||||
// Verify API key was changed
|
||||
cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
|
||||
cy.get('@keyOne').then((keyOne) => {
|
||||
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').should('not.eq', keyOne)
|
||||
})
|
||||
cy.closeModal()
|
||||
})
|
||||
cy.closeModal()
|
||||
})
|
||||
|
||||
it("should update password", () => {
|
||||
// Access Update password modal
|
||||
cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
|
||||
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
|
||||
// Access Update password modal
|
||||
cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
|
||||
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
|
||||
|
||||
// Enter new password and update
|
||||
cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
|
||||
for (let i = 0; i < 2; i++) {
|
||||
// password set to 'newpwd'
|
||||
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("newpwd")
|
||||
}
|
||||
cy.get("button").contains("Update password").click({ force: true })
|
||||
})
|
||||
// Enter new password and update
|
||||
cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
|
||||
for (let i = 0; i < 2; i++) {
|
||||
// password set to 'newpwd'
|
||||
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("newpwd")
|
||||
}
|
||||
cy.get("button").contains("Update password").click({ force: true })
|
||||
})
|
||||
|
||||
// Logout & in with new password
|
||||
//cy.logOut()
|
||||
cy.login("test@test.com", "newpwd")
|
||||
// Logout & in with new password
|
||||
//cy.logOut()
|
||||
cy.login("test@test.com", "newpwd")
|
||||
})
|
||||
|
||||
it("should open and close developer mode", () => {
|
||||
cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
|
||||
|
||||
// Close developer mode & verify
|
||||
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Close developer mode").click({ force: true })
|
||||
cy.get(interact.SPECTRUM_SIDENAV).should('not.exist') // No config sections
|
||||
cy.get(interact.CREATE_APP_BUTTON).should('not.exist') // No create app button
|
||||
cy.get(".app").should('not.exist') // At least one app should be available
|
||||
xit("should open and close developer mode", () => {
|
||||
cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
|
||||
|
||||
// Open developer mode & verify
|
||||
cy.get(".avatar > .icon").click({ force: true })
|
||||
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Open developer mode").click({ force: true })
|
||||
cy.get(interact.SPECTRUM_SIDENAV).should('exist') // config sections available
|
||||
cy.get(interact.CREATE_APP_BUTTON).should('exist') // create app button available
|
||||
// Close developer mode & verify
|
||||
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Close developer mode").click({ force: true })
|
||||
cy.get(interact.SPECTRUM_SIDENAV).should('not.exist') // No config sections
|
||||
cy.get(interact.CREATE_APP_BUTTON).should('not.exist') // No create app button
|
||||
cy.get(".app").should('not.exist') // At least one app should be available
|
||||
|
||||
// Open developer mode & verify
|
||||
cy.get(".avatar > .icon").click({ force: true })
|
||||
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Open developer mode").click({ force: true })
|
||||
cy.get(".app-table").should('exist') // config sections available
|
||||
cy.get(interact.CREATE_APP_BUTTON).should('exist') // create app button available
|
||||
})
|
||||
|
||||
after(() => {
|
||||
// Change password back to original value
|
||||
cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
|
||||
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
|
||||
cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
|
||||
for (let i = 0; i < 2; i++) {
|
||||
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("test")
|
||||
}
|
||||
cy.get("button").contains("Update password").click({ force: true })
|
||||
})
|
||||
// Remove users name
|
||||
cy.updateUserInformation()
|
||||
// Change password back to original value
|
||||
cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
|
||||
cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
|
||||
cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
|
||||
for (let i = 0; i < 2; i++) {
|
||||
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("test")
|
||||
}
|
||||
cy.get("button").contains("Update password").click({ force: true })
|
||||
})
|
||||
// Remove users name
|
||||
cy.updateUserInformation()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
@ -2,7 +2,7 @@ import filterTests from "../support/filterTests"
|
|||
import clientPackage from "@budibase/client/package.json"
|
||||
|
||||
filterTests(["all"], () => {
|
||||
context("Application Overview screen", () => {
|
||||
xcontext("Application Overview screen", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.deleteAllApps()
|
||||
|
|
|
@ -14,15 +14,15 @@ filterTests(['smoke', 'all'], () => {
|
|||
cy.visit(`${Cypress.config().baseUrl}/builder/portal/apps/create`, { timeout: 5000 }) //added /portal/apps/create
|
||||
cy.wait(1000)
|
||||
cy.get(interact.CREATE_APP_BUTTON, { timeout: 10000 }).contains('Start from scratch').should("exist")
|
||||
|
||||
|
||||
cy.get(interact.TEMPLATE_CATEGORY_FILTER).should("exist")
|
||||
cy.get(interact.TEMPLATE_CATEGORY).should("exist")
|
||||
|
||||
|
||||
cy.get(interact.APP_TABLE).should("not.exist")
|
||||
})
|
||||
}
|
||||
|
||||
it("should provide filterable templates", () => {
|
||||
xit("should provide filterable templates", () => {
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 5000 })
|
||||
cy.wait(500)
|
||||
|
||||
|
@ -30,16 +30,16 @@ filterTests(['smoke', 'all'], () => {
|
|||
.its("body")
|
||||
.then(val => {
|
||||
if (val.length > 0) {
|
||||
cy.get(interact.SPECTRUM_BUTTON).contains("Templates").click({force: true})
|
||||
cy.get(interact.SPECTRUM_BUTTON).contains("View Templates").click({ force: true })
|
||||
}
|
||||
})
|
||||
|
||||
cy.get(interact.TEMPLATE_CATEGORY_FILTER).should("exist")
|
||||
cy.get(interact.TEMPLATE_CATEGORY).should("exist")
|
||||
|
||||
|
||||
cy.get(interact.TEMPLATE_CATEGORY_ACTIONGROUP).its('length').should('be.gt', 1)
|
||||
cy.get(interact.TEMPLATE_CATEGORY_FILTER_ACTIONBUTTON).its('length').should('be.gt', 2)
|
||||
|
||||
|
||||
cy.get(interact.TEMPLATE_CATEGORY_FILTER_ACTIONBUTTON).eq(1).click()
|
||||
cy.get(interact.TEMPLATE_CATEGORY_ACTIONGROUP).should('have.length', 1)
|
||||
|
||||
|
@ -104,14 +104,14 @@ filterTests(['smoke', 'all'], () => {
|
|||
cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 5000 })
|
||||
|
||||
cy.updateUserInformation("Ted", "Userman")
|
||||
|
||||
|
||||
cy.createApp("", false)
|
||||
cy.applicationInAppTable("Teds app")
|
||||
cy.deleteApp("Teds app")
|
||||
|
||||
// Accomodate names that end in 'S'
|
||||
cy.updateUserInformation("Chris", "Userman")
|
||||
|
||||
|
||||
cy.createApp("", false)
|
||||
cy.applicationInAppTable("Chris app")
|
||||
cy.deleteApp("Chris app")
|
||||
|
@ -123,35 +123,49 @@ filterTests(['smoke', 'all'], () => {
|
|||
const exportedApp = 'cypress/fixtures/exported-app.txt'
|
||||
|
||||
cy.importApp(exportedApp, "")
|
||||
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 2000 })
|
||||
|
||||
cy.applicationInAppTable("My app")
|
||||
|
||||
cy.get(".appTable .name").eq(0).click()
|
||||
|
||||
cy.deleteApp("My app")
|
||||
cy.get(".app-table .name").eq(0).click()
|
||||
cy.closeModal()
|
||||
cy.get(`[aria-label="ShowMenu"]`).click()
|
||||
cy.get(".spectrum-Menu").within(() => {
|
||||
cy.contains("Overview").click()
|
||||
})
|
||||
cy.get(".app-overview-actions-icon").within(() => {
|
||||
cy.get(".spectrum-Icon").click({ force: true })
|
||||
})
|
||||
cy.get(".spectrum-Menu").contains("Delete").click({ force: true })
|
||||
cy.get(".spectrum-Dialog-grid").within(() => {
|
||||
cy.get("input").type("My app")
|
||||
})
|
||||
cy.get(".spectrum-Button--warning").click()
|
||||
})
|
||||
|
||||
it("should create an application from an export, using the users first name as the default app name", () => {
|
||||
const exportedApp = 'cypress/fixtures/exported-app.txt'
|
||||
|
||||
cy.updateUserInformation("Ted", "Userman")
|
||||
|
||||
cy.importApp(exportedApp, "")
|
||||
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`)
|
||||
|
||||
cy.applicationInAppTable("Teds app")
|
||||
|
||||
cy.get(".appTable .name").eq(0).click()
|
||||
|
||||
cy.deleteApp("Teds app")
|
||||
|
||||
cy.get(".app-table .name").eq(0).click()
|
||||
cy.closeModal()
|
||||
cy.get(`[aria-label="ShowMenu"]`).click()
|
||||
cy.get(".spectrum-Menu").within(() => {
|
||||
cy.contains("Overview").click()
|
||||
})
|
||||
cy.get(".app-overview-actions-icon").within(() => {
|
||||
cy.get(".spectrum-Icon").click({ force: true })
|
||||
})
|
||||
cy.get(".spectrum-Menu").contains("Delete").click({ force: true })
|
||||
cy.get(".spectrum-Dialog-grid").within(() => {
|
||||
cy.get("input").type("Teds app")
|
||||
})
|
||||
cy.get(".spectrum-Button--warning").click()
|
||||
cy.updateUserInformation("", "")
|
||||
})
|
||||
|
||||
it("should generate the first application from a template", () => {
|
||||
xit("should generate the first application from a template", () => {
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`)
|
||||
cy.wait(500)
|
||||
|
||||
|
@ -172,28 +186,28 @@ filterTests(['smoke', 'all'], () => {
|
|||
const card = cy.get('.template-card').eq(0).should("exist");
|
||||
const cardOverlay = card.get('.template-thumbnail-action-overlay').should("exist")
|
||||
cardOverlay.invoke("show")
|
||||
cardOverlay.get("button").contains("Use template").should("exist").click({force: true})
|
||||
cardOverlay.get("button").contains("Use template").should("exist").click({ force: true })
|
||||
})
|
||||
|
||||
// CMD Create app from theme card
|
||||
cy.get(".spectrum-Modal").should('be.visible')
|
||||
|
||||
|
||||
const templateName = cy.get(".spectrum-Modal .template-thumbnail-text")
|
||||
templateName.invoke('text')
|
||||
.then(templateNameText => {
|
||||
const templateNameParsed = "/"+templateNameText.toLowerCase().replace(/\s+/g, "-")
|
||||
cy.get(interact.SPECTRUM_MODAL_INPUT).eq(0).should("have.value", templateNameText)
|
||||
cy.get(interact.SPECTRUM_MODAL_INPUT).eq(1).should("have.value", templateNameParsed)
|
||||
.then(templateNameText => {
|
||||
const templateNameParsed = "/" + templateNameText.toLowerCase().replace(/\s+/g, "-")
|
||||
cy.get(interact.SPECTRUM_MODAL_INPUT).eq(0).should("have.value", templateNameText)
|
||||
cy.get(interact.SPECTRUM_MODAL_INPUT).eq(1).should("have.value", templateNameParsed)
|
||||
|
||||
cy.get(".spectrum-Modal .spectrum-ButtonGroup").contains("Create app").click()
|
||||
cy.wait(5000)
|
||||
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`)
|
||||
cy.wait(2000)
|
||||
cy.get(".spectrum-Modal .spectrum-ButtonGroup").contains("Create app").click()
|
||||
cy.wait(5000)
|
||||
|
||||
cy.applicationInAppTable(templateNameText)
|
||||
cy.deleteApp(templateNameText)
|
||||
});
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`)
|
||||
cy.wait(2000)
|
||||
|
||||
cy.applicationInAppTable(templateNameText)
|
||||
cy.deleteApp(templateNameText)
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
|
@ -217,5 +231,5 @@ filterTests(['smoke', 'all'], () => {
|
|||
cy.deleteApp(secondAppName)
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
@ -101,7 +101,7 @@ Cypress.Commands.add("deleteUser", email => {
|
|||
})
|
||||
|
||||
Cypress.Commands.add("updateUserInformation", (firstName, lastName) => {
|
||||
cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({
|
||||
cy.get(".user-dropdown .icon", { timeout: 2000 }).click({
|
||||
force: true,
|
||||
})
|
||||
|
||||
|
@ -132,7 +132,7 @@ Cypress.Commands.add("updateUserInformation", (firstName, lastName) => {
|
|||
.blur()
|
||||
}
|
||||
cy.get(".confirm-wrap").within(() => {
|
||||
cy.get("button").contains("Update information").click({ force: true })
|
||||
cy.get("button").contains("Save").click({ force: true })
|
||||
})
|
||||
cy.get(".spectrum-Dialog-grid").should("not.exist")
|
||||
})
|
||||
|
@ -222,9 +222,12 @@ Cypress.Commands.add("deleteApp", name => {
|
|||
// Go to app overview
|
||||
const appIdParsed = appId.split("_").pop()
|
||||
const actionEleId = `[data-cy=row_actions_${appIdParsed}]`
|
||||
cy.get(actionEleId).within(() => {
|
||||
cy.contains("Manage").click({ force: true })
|
||||
cy.get(actionEleId).click()
|
||||
cy.get(`[aria-label="ShowMenu"]`).click()
|
||||
cy.get(".spectrum-Menu").within(() => {
|
||||
cy.contains("Overview").click()
|
||||
})
|
||||
|
||||
cy.wait(500)
|
||||
|
||||
// Unpublish first if needed
|
||||
|
@ -400,7 +403,7 @@ Cypress.Commands.add("searchForApplication", appName => {
|
|||
return
|
||||
} else {
|
||||
// Searches for the app
|
||||
cy.get(".filter").then(() => {
|
||||
cy.get(".spectrum-Search").then(() => {
|
||||
cy.get(".spectrum-Textfield").within(() => {
|
||||
cy.get("input").eq(0).clear({ force: true })
|
||||
cy.get("input").eq(0).type(appName, { force: true })
|
||||
|
@ -413,7 +416,7 @@ Cypress.Commands.add("searchForApplication", appName => {
|
|||
// Assumes there are no others
|
||||
Cypress.Commands.add("applicationInAppTable", appName => {
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 30000 })
|
||||
cy.get(".appTable", { timeout: 30000 }).within(() => {
|
||||
cy.get(".app-table", { timeout: 30000 }).within(() => {
|
||||
cy.get(".title").contains(appName).should("exist")
|
||||
})
|
||||
})
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@budibase/builder",
|
||||
"version": "2.2.12-alpha.21",
|
||||
"version": "2.2.12-alpha.44",
|
||||
"license": "GPL-3.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
@ -71,11 +71,12 @@
|
|||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@budibase/bbui": "2.2.12-alpha.21",
|
||||
"@budibase/client": "2.2.12-alpha.21",
|
||||
"@budibase/frontend-core": "2.2.12-alpha.21",
|
||||
"@budibase/string-templates": "2.2.12-alpha.21",
|
||||
"@budibase/bbui": "2.2.12-alpha.44",
|
||||
"@budibase/client": "2.2.12-alpha.44",
|
||||
"@budibase/frontend-core": "2.2.12-alpha.44",
|
||||
"@budibase/string-templates": "2.2.12-alpha.44",
|
||||
"@sentry/browser": "5.19.1",
|
||||
"@spectrum-css/accordion": "^3.0.24",
|
||||
"@spectrum-css/page": "^3.0.1",
|
||||
"@spectrum-css/vars": "^3.0.1",
|
||||
"codemirror": "^5.59.0",
|
||||
|
@ -87,7 +88,7 @@
|
|||
"shortid": "2.2.15",
|
||||
"svelte-dnd-action": "^0.9.8",
|
||||
"svelte-loading-spinners": "^0.1.1",
|
||||
"svelte-portal": "0.1.0",
|
||||
"svelte-portal": "1.0.0",
|
||||
"uuid": "8.3.1",
|
||||
"yup": "0.29.2"
|
||||
},
|
||||
|
|
|
@ -11,11 +11,8 @@
|
|||
|
||||
<div class="banner-container" />
|
||||
<BannerDisplay />
|
||||
|
||||
<NotificationDisplay />
|
||||
|
||||
<LicensingOverlays />
|
||||
|
||||
<Router {routes} config={{ queryHandler }} />
|
||||
<div class="modal-container" />
|
||||
<HelpIcon />
|
||||
|
|
|
@ -378,6 +378,7 @@ const getProviderContextBindings = (asset, dataProviders) => {
|
|||
providerId,
|
||||
// Table ID is used by JSON fields to know what table the field is in
|
||||
tableId: table?._id,
|
||||
component: component._component,
|
||||
category: component._instanceName,
|
||||
icon: def.icon,
|
||||
display: {
|
||||
|
|
|
@ -25,7 +25,6 @@
|
|||
export let loading = false
|
||||
export let hideAutocolumns
|
||||
export let rowCount
|
||||
export let type
|
||||
export let disableSorting = false
|
||||
export let customPlaceholder = false
|
||||
|
||||
|
|
|
@ -20,7 +20,8 @@
|
|||
$isActive,
|
||||
$tables,
|
||||
$queries,
|
||||
$views
|
||||
$views,
|
||||
openDataSources
|
||||
)
|
||||
$: openDataSource = enrichedDataSources.find(x => x.open)
|
||||
$: {
|
||||
|
@ -36,7 +37,8 @@
|
|||
isActive,
|
||||
tables,
|
||||
queries,
|
||||
views
|
||||
views,
|
||||
openDataSources
|
||||
) => {
|
||||
if (!datasources?.list?.length) {
|
||||
return []
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
Toggle,
|
||||
Button,
|
||||
TextArea,
|
||||
Accordion,
|
||||
} from "@budibase/bbui"
|
||||
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
|
||||
import { capitalise } from "helpers"
|
||||
|
@ -51,15 +52,24 @@
|
|||
|
||||
let addButton
|
||||
|
||||
function getDisplayName(key) {
|
||||
function getDisplayName(key, fieldKey) {
|
||||
let name
|
||||
if (schema[key]?.display) {
|
||||
if (fieldKey && schema[key]["fields"][fieldKey]?.display) {
|
||||
name = schema[key]["fields"][fieldKey].display
|
||||
} else if (fieldKey) {
|
||||
name = fieldKey
|
||||
} else if (schema[key]?.display) {
|
||||
name = schema[key].display
|
||||
} else {
|
||||
name = key
|
||||
}
|
||||
return capitalise(name)
|
||||
}
|
||||
function getFieldGroupKeys(fieldGroup) {
|
||||
return Object.entries(schema[fieldGroup].fields || {})
|
||||
.filter(el => filter(el))
|
||||
.map(([key]) => key)
|
||||
}
|
||||
</script>
|
||||
|
||||
<form>
|
||||
|
@ -100,6 +110,27 @@
|
|||
error={$validation.errors[configKey]}
|
||||
/>
|
||||
</div>
|
||||
{:else if schema[configKey].type === "fieldGroup"}
|
||||
<Accordion
|
||||
itemName={configKey}
|
||||
initialOpen={getFieldGroupKeys(configKey).some(
|
||||
fieldKey => !!config[fieldKey]
|
||||
)}
|
||||
header={getDisplayName(configKey)}
|
||||
>
|
||||
<Layout gap="S">
|
||||
{#each getFieldGroupKeys(configKey) as fieldKey}
|
||||
<div class="form-row">
|
||||
<Label>{getDisplayName(configKey, fieldKey)}</Label>
|
||||
<Input
|
||||
type={schema[configKey]["fields"][fieldKey]?.type}
|
||||
on:change
|
||||
bind:value={config[fieldKey]}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</Layout>
|
||||
</Accordion>
|
||||
{:else}
|
||||
<div class="form-row">
|
||||
<Label>{getDisplayName(configKey)}</Label>
|
||||
|
|
|
@ -10,7 +10,6 @@
|
|||
} from "@budibase/bbui"
|
||||
import { tables } from "stores/backend"
|
||||
import { Helpers } from "@budibase/bbui"
|
||||
import { writable } from "svelte/store"
|
||||
|
||||
export let save
|
||||
export let datasource
|
||||
|
@ -18,41 +17,97 @@
|
|||
export let fromRelationship = {}
|
||||
export let toRelationship = {}
|
||||
export let close
|
||||
export let selectedFromTable
|
||||
|
||||
let originalFromName = fromRelationship.name,
|
||||
originalToName = toRelationship.name
|
||||
let fromTable, toTable, through, linkTable, tableOptions
|
||||
let isManyToMany, isManyToOne, relationshipTypes
|
||||
let errors, valid
|
||||
let currentTables = {}
|
||||
const colNotSet = "Please specify a column name"
|
||||
const relationshipAlreadyExists =
|
||||
"A relationship between these tables already exists."
|
||||
const relationshipTypes = [
|
||||
{
|
||||
label: "One to Many",
|
||||
value: RelationshipTypes.MANY_TO_ONE,
|
||||
},
|
||||
{
|
||||
label: "Many to Many",
|
||||
value: RelationshipTypes.MANY_TO_MANY,
|
||||
},
|
||||
]
|
||||
|
||||
if (fromRelationship && !fromRelationship.relationshipType) {
|
||||
fromRelationship.relationshipType = RelationshipTypes.MANY_TO_ONE
|
||||
}
|
||||
let originalFromColumnName = toRelationship.name,
|
||||
originalToColumnName = fromRelationship.name
|
||||
let originalFromTable = plusTables.find(
|
||||
table => table._id === toRelationship?.tableId
|
||||
)
|
||||
let originalToTable = plusTables.find(
|
||||
table => table._id === fromRelationship?.tableId
|
||||
)
|
||||
|
||||
if (toRelationship && selectedFromTable) {
|
||||
toRelationship.tableId = selectedFromTable._id
|
||||
}
|
||||
let tableOptions
|
||||
let errors = {}
|
||||
let hasClickedSave = !!fromRelationship.relationshipType
|
||||
let fromPrimary,
|
||||
fromForeign,
|
||||
fromTable,
|
||||
toTable,
|
||||
throughTable,
|
||||
fromColumn,
|
||||
toColumn
|
||||
let fromId, toId, throughId, throughToKey, throughFromKey
|
||||
let isManyToMany, isManyToOne, relationshipType
|
||||
|
||||
function inSchema(table, prop, ogName) {
|
||||
if (!table || !prop || prop === ogName) {
|
||||
return false
|
||||
$: {
|
||||
if (!fromPrimary) {
|
||||
fromPrimary = fromRelationship.foreignKey
|
||||
fromForeign = toRelationship.foreignKey
|
||||
}
|
||||
if (!fromColumn && !errors.fromColumn) {
|
||||
fromColumn = toRelationship.name
|
||||
}
|
||||
if (!toColumn && !errors.toColumn) {
|
||||
toColumn = fromRelationship.name
|
||||
}
|
||||
if (!fromId) {
|
||||
fromId = toRelationship.tableId
|
||||
}
|
||||
if (!toId) {
|
||||
toId = fromRelationship.tableId
|
||||
}
|
||||
if (!throughId) {
|
||||
throughId = fromRelationship.through
|
||||
throughFromKey = fromRelationship.throughFrom
|
||||
throughToKey = fromRelationship.throughTo
|
||||
}
|
||||
if (!relationshipType) {
|
||||
relationshipType = fromRelationship.relationshipType
|
||||
}
|
||||
const keys = Object.keys(table.schema).map(key => key.toLowerCase())
|
||||
return keys.indexOf(prop.toLowerCase()) !== -1
|
||||
}
|
||||
|
||||
const touched = writable({})
|
||||
$: tableOptions = plusTables.map(table => ({
|
||||
label: table.name,
|
||||
value: table._id,
|
||||
}))
|
||||
$: valid = getErrorCount(errors) === 0 || !hasClickedSave
|
||||
|
||||
function invalidThroughTable({ through, throughTo, throughFrom }) {
|
||||
$: isManyToMany = relationshipType === RelationshipTypes.MANY_TO_MANY
|
||||
$: isManyToOne = relationshipType === RelationshipTypes.MANY_TO_ONE
|
||||
$: fromTable = plusTables.find(table => table._id === fromId)
|
||||
$: toTable = plusTables.find(table => table._id === toId)
|
||||
$: throughTable = plusTables.find(table => table._id === throughId)
|
||||
|
||||
$: toRelationship.relationshipType = fromRelationship?.relationshipType
|
||||
|
||||
const getErrorCount = errors =>
|
||||
Object.entries(errors)
|
||||
.filter(entry => !!entry[1])
|
||||
.map(entry => entry[0]).length
|
||||
|
||||
function invalidThroughTable() {
|
||||
// need to know the foreign key columns to check error
|
||||
if (!through || !throughTo || !throughFrom) {
|
||||
if (!throughId || !throughToKey || !throughFromKey) {
|
||||
return false
|
||||
}
|
||||
const throughTable = plusTables.find(tbl => tbl._id === through)
|
||||
const otherColumns = Object.values(throughTable.schema).filter(
|
||||
col => col.name !== throughFrom && col.name !== throughTo
|
||||
const throughTbl = plusTables.find(tbl => tbl._id === throughId)
|
||||
const otherColumns = Object.values(throughTbl.schema).filter(
|
||||
col => col.name !== throughFromKey && col.name !== throughToKey
|
||||
)
|
||||
for (let col of otherColumns) {
|
||||
if (col.constraints?.presence && !col.autocolumn) {
|
||||
|
@ -62,142 +117,138 @@
|
|||
return false
|
||||
}
|
||||
|
||||
function checkForErrors(fromRelate, toRelate) {
|
||||
const isMany =
|
||||
fromRelate.relationshipType === RelationshipTypes.MANY_TO_MANY
|
||||
function validate() {
|
||||
const isMany = relationshipType === RelationshipTypes.MANY_TO_MANY
|
||||
const tableNotSet = "Please specify a table"
|
||||
const foreignKeyNotSet = "Please pick a foreign key"
|
||||
const errObj = {}
|
||||
if ($touched.from && !fromTable) {
|
||||
errObj.from = tableNotSet
|
||||
if (!relationshipType) {
|
||||
errObj.relationshipType = "Please specify a relationship type"
|
||||
}
|
||||
if ($touched.to && !toTable) {
|
||||
errObj.to = tableNotSet
|
||||
if (!fromTable) {
|
||||
errObj.fromTable = tableNotSet
|
||||
}
|
||||
if ($touched.through && isMany && !fromRelate.through) {
|
||||
errObj.through = tableNotSet
|
||||
if (!toTable) {
|
||||
errObj.toTable = tableNotSet
|
||||
}
|
||||
if ($touched.through && invalidThroughTable(fromRelate)) {
|
||||
errObj.through =
|
||||
"Ensure all columns in table are nullable or auto generated"
|
||||
if (isMany && !throughTable) {
|
||||
errObj.throughTable = tableNotSet
|
||||
}
|
||||
if ($touched.foreign && !isMany && !fromRelate.fieldName) {
|
||||
errObj.foreign = "Please pick the foreign key"
|
||||
if (isMany && !throughFromKey) {
|
||||
errObj.throughFromKey = foreignKeyNotSet
|
||||
}
|
||||
const colNotSet = "Please specify a column name"
|
||||
if ($touched.fromCol && !fromRelate.name) {
|
||||
errObj.fromCol = colNotSet
|
||||
if (isMany && !throughToKey) {
|
||||
errObj.throughToKey = foreignKeyNotSet
|
||||
}
|
||||
if ($touched.toCol && !toRelate.name) {
|
||||
errObj.toCol = colNotSet
|
||||
if (invalidThroughTable()) {
|
||||
errObj.throughTable =
|
||||
"Ensure non-key columns are nullable or auto-generated"
|
||||
}
|
||||
if ($touched.primary && !fromPrimary) {
|
||||
errObj.primary = "Please pick the primary key"
|
||||
if (!isMany && !fromForeign) {
|
||||
errObj.fromForeign = foreignKeyNotSet
|
||||
}
|
||||
if (!fromColumn) {
|
||||
errObj.fromColumn = colNotSet
|
||||
}
|
||||
if (!toColumn) {
|
||||
errObj.toColumn = colNotSet
|
||||
}
|
||||
if (!isMany && !fromPrimary) {
|
||||
errObj.fromPrimary = "Please pick the primary key"
|
||||
}
|
||||
if (isMany && relationshipExists()) {
|
||||
errObj.fromTable = relationshipAlreadyExists
|
||||
errObj.toTable = relationshipAlreadyExists
|
||||
}
|
||||
|
||||
// currently don't support relationships back onto the table itself, needs to relate out
|
||||
const tableError = "From/to/through tables must be different"
|
||||
if (fromTable && (fromTable === toTable || fromTable === through)) {
|
||||
errObj.from = tableError
|
||||
if (fromTable && (fromTable === toTable || fromTable === throughTable)) {
|
||||
errObj.fromTable = tableError
|
||||
}
|
||||
if (toTable && (toTable === fromTable || toTable === through)) {
|
||||
errObj.to = tableError
|
||||
if (toTable && (toTable === fromTable || toTable === throughTable)) {
|
||||
errObj.toTable = tableError
|
||||
}
|
||||
if (through && (through === fromTable || through === toTable)) {
|
||||
errObj.through = tableError
|
||||
if (
|
||||
throughTable &&
|
||||
(throughTable === fromTable || throughTable === toTable)
|
||||
) {
|
||||
errObj.throughTable = tableError
|
||||
}
|
||||
const colError = "Column name cannot be an existing column"
|
||||
if (inSchema(fromTable, fromRelate.name, originalFromName)) {
|
||||
errObj.fromCol = colError
|
||||
if (isColumnNameBeingUsed(toTable, fromColumn, originalFromColumnName)) {
|
||||
errObj.fromColumn = colError
|
||||
}
|
||||
if (inSchema(toTable, toRelate.name, originalToName)) {
|
||||
errObj.toCol = colError
|
||||
if (isColumnNameBeingUsed(fromTable, toColumn, originalToColumnName)) {
|
||||
errObj.toColumn = colError
|
||||
}
|
||||
|
||||
let fromType, toType
|
||||
if (fromPrimary && fromRelate.fieldName) {
|
||||
if (fromPrimary && fromForeign) {
|
||||
fromType = fromTable?.schema[fromPrimary]?.type
|
||||
toType = toTable?.schema[fromRelate.fieldName]?.type
|
||||
toType = toTable?.schema[fromForeign]?.type
|
||||
}
|
||||
if (fromType && toType && fromType !== toType) {
|
||||
errObj.foreign =
|
||||
errObj.fromForeign =
|
||||
"Column type of the foreign key must match the primary key"
|
||||
}
|
||||
|
||||
errors = errObj
|
||||
return getErrorCount(errors) === 0
|
||||
}
|
||||
|
||||
let fromPrimary
|
||||
$: {
|
||||
if (!fromPrimary && fromTable) {
|
||||
fromPrimary = fromTable.primary[0]
|
||||
}
|
||||
}
|
||||
$: isManyToMany =
|
||||
fromRelationship?.relationshipType === RelationshipTypes.MANY_TO_MANY
|
||||
$: isManyToOne =
|
||||
fromRelationship?.relationshipType === RelationshipTypes.MANY_TO_ONE
|
||||
$: tableOptions = plusTables.map(table => ({
|
||||
label: table.name,
|
||||
value: table._id,
|
||||
}))
|
||||
$: fromTable = plusTables.find(table => table._id === toRelationship?.tableId)
|
||||
$: toTable = plusTables.find(table => table._id === fromRelationship?.tableId)
|
||||
$: through = plusTables.find(table => table._id === fromRelationship?.through)
|
||||
$: checkForErrors(fromRelationship, toRelationship)
|
||||
$: valid =
|
||||
Object.keys(errors).length === 0 && Object.keys($touched).length !== 0
|
||||
$: linkTable = through || toTable
|
||||
$: relationshipTypes = [
|
||||
{
|
||||
label: "Many",
|
||||
value: RelationshipTypes.MANY_TO_MANY,
|
||||
},
|
||||
{
|
||||
label: "One",
|
||||
value: RelationshipTypes.MANY_TO_ONE,
|
||||
},
|
||||
]
|
||||
$: updateRelationshipType(fromRelationship?.relationshipType)
|
||||
$: tableChanged(fromTable, toTable)
|
||||
|
||||
function updateRelationshipType(fromType) {
|
||||
if (fromType === RelationshipTypes.MANY_TO_MANY) {
|
||||
toRelationship.relationshipType = RelationshipTypes.MANY_TO_MANY
|
||||
} else {
|
||||
toRelationship.relationshipType = RelationshipTypes.MANY_TO_ONE
|
||||
function isColumnNameBeingUsed(table, columnName, originalName) {
|
||||
if (!table || !columnName || columnName === originalName) {
|
||||
return false
|
||||
}
|
||||
const keys = Object.keys(table.schema).map(key => key.toLowerCase())
|
||||
return keys.indexOf(columnName.toLowerCase()) !== -1
|
||||
}
|
||||
|
||||
function buildRelationships() {
|
||||
// if any to many only need to check from
|
||||
const manyToMany =
|
||||
fromRelationship.relationshipType === RelationshipTypes.MANY_TO_MANY
|
||||
// main is simply used to know this is the side the user configured it from
|
||||
const id = Helpers.uuid()
|
||||
if (!manyToMany) {
|
||||
delete fromRelationship.through
|
||||
delete toRelationship.through
|
||||
}
|
||||
//Map temporary variables
|
||||
let relateFrom = {
|
||||
...fromRelationship,
|
||||
tableId: toId,
|
||||
name: toColumn,
|
||||
relationshipType,
|
||||
fieldName: fromForeign,
|
||||
through: throughId,
|
||||
throughFrom: throughFromKey,
|
||||
throughTo: throughToKey,
|
||||
type: "link",
|
||||
main: true,
|
||||
_id: id,
|
||||
}
|
||||
let relateTo = {
|
||||
let relateTo = (toRelationship = {
|
||||
...toRelationship,
|
||||
tableId: fromId,
|
||||
name: fromColumn,
|
||||
through: throughId,
|
||||
type: "link",
|
||||
_id: id,
|
||||
})
|
||||
|
||||
// if any to many only need to check from
|
||||
const manyToMany =
|
||||
relateFrom.relationshipType === RelationshipTypes.MANY_TO_MANY
|
||||
|
||||
if (!manyToMany) {
|
||||
delete relateFrom.through
|
||||
delete relateTo.through
|
||||
}
|
||||
|
||||
// [0] is because we don't support composite keys for relationships right now
|
||||
if (manyToMany) {
|
||||
relateFrom = {
|
||||
...relateFrom,
|
||||
through: through._id,
|
||||
through: throughTable._id,
|
||||
fieldName: toTable.primary[0],
|
||||
}
|
||||
relateTo = {
|
||||
...relateTo,
|
||||
through: through._id,
|
||||
through: throughTable._id,
|
||||
fieldName: fromTable.primary[0],
|
||||
throughFrom: relateFrom.throughTo,
|
||||
throughTo: relateFrom.throughFrom,
|
||||
|
@ -226,9 +277,56 @@
|
|||
toRelationship = relateTo
|
||||
}
|
||||
|
||||
// save the relationship on to the datasource
|
||||
function relationshipExists() {
|
||||
if (
|
||||
originalFromTable &&
|
||||
originalToTable &&
|
||||
originalFromTable === fromTable &&
|
||||
originalToTable === toTable
|
||||
) {
|
||||
return false
|
||||
}
|
||||
let fromThroughLinks = Object.values(
|
||||
datasource.entities[fromTable.name].schema
|
||||
).filter(value => value.through)
|
||||
let toThroughLinks = Object.values(
|
||||
datasource.entities[toTable.name].schema
|
||||
).filter(value => value.through)
|
||||
|
||||
const matchAgainstUserInput = (fromTableId, toTableId) =>
|
||||
(fromTableId === fromId && toTableId === toId) ||
|
||||
(fromTableId === toId && toTableId === fromId)
|
||||
|
||||
return !!fromThroughLinks.find(from =>
|
||||
toThroughLinks.find(
|
||||
to =>
|
||||
from.through === to.through &&
|
||||
matchAgainstUserInput(from.tableId, to.tableId)
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
function removeExistingRelationship() {
|
||||
if (originalFromTable && originalFromColumnName) {
|
||||
delete datasource.entities[originalFromTable.name].schema[
|
||||
originalToColumnName
|
||||
]
|
||||
}
|
||||
if (originalToTable && originalToColumnName) {
|
||||
delete datasource.entities[originalToTable.name].schema[
|
||||
originalFromColumnName
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
async function saveRelationship() {
|
||||
hasClickedSave = true
|
||||
if (!validate()) {
|
||||
return false
|
||||
}
|
||||
buildRelationships()
|
||||
removeExistingRelationship()
|
||||
|
||||
// source of relationship
|
||||
datasource.entities[fromTable.name].schema[fromRelationship.name] =
|
||||
fromRelationship
|
||||
|
@ -236,43 +334,14 @@
|
|||
datasource.entities[toTable.name].schema[toRelationship.name] =
|
||||
toRelationship
|
||||
|
||||
// If relationship has been renamed
|
||||
if (originalFromName !== fromRelationship.name) {
|
||||
delete datasource.entities[fromTable.name].schema[originalFromName]
|
||||
}
|
||||
if (originalToName !== toRelationship.name) {
|
||||
delete datasource.entities[toTable.name].schema[originalToName]
|
||||
}
|
||||
|
||||
// store the original names so it won't cause an error
|
||||
originalToName = toRelationship.name
|
||||
originalFromName = fromRelationship.name
|
||||
await save()
|
||||
}
|
||||
|
||||
async function deleteRelationship() {
|
||||
delete datasource.entities[fromTable.name].schema[fromRelationship.name]
|
||||
delete datasource.entities[toTable.name].schema[toRelationship.name]
|
||||
removeExistingRelationship()
|
||||
await save()
|
||||
await tables.fetch()
|
||||
close()
|
||||
}
|
||||
|
||||
function tableChanged(fromTbl, toTbl) {
|
||||
if (
|
||||
(currentTables?.from?._id === fromTbl?._id &&
|
||||
currentTables?.to?._id === toTbl?._id) ||
|
||||
originalFromName ||
|
||||
originalToName
|
||||
) {
|
||||
return
|
||||
}
|
||||
fromRelationship.name = toTbl?.name || ""
|
||||
errors.fromCol = ""
|
||||
toRelationship.name = fromTbl?.name || ""
|
||||
errors.toCol = ""
|
||||
currentTables = { from: fromTbl, to: toTbl }
|
||||
}
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
|
@ -284,7 +353,9 @@
|
|||
<Select
|
||||
label="Relationship type"
|
||||
options={relationshipTypes}
|
||||
bind:value={fromRelationship.relationshipType}
|
||||
bind:value={relationshipType}
|
||||
bind:error={errors.relationshipType}
|
||||
on:change={() => (errors.relationshipType = null)}
|
||||
/>
|
||||
<div class="headings">
|
||||
<Detail>Tables</Detail>
|
||||
|
@ -292,58 +363,89 @@
|
|||
<Select
|
||||
label="Select from table"
|
||||
options={tableOptions}
|
||||
disabled={!!selectedFromTable}
|
||||
on:change={() => ($touched.from = true)}
|
||||
bind:error={errors.from}
|
||||
bind:value={toRelationship.tableId}
|
||||
bind:value={fromId}
|
||||
bind:error={errors.fromTable}
|
||||
on:change={e => {
|
||||
fromColumn = tableOptions.find(opt => opt.value === e.detail)?.label || ""
|
||||
if (errors.fromTable === relationshipAlreadyExists) {
|
||||
errors.toColumn = null
|
||||
}
|
||||
errors.fromTable = null
|
||||
errors.fromColumn = null
|
||||
errors.toTable = null
|
||||
errors.throughTable = null
|
||||
}}
|
||||
/>
|
||||
{#if isManyToOne && fromTable}
|
||||
<Select
|
||||
label={`Primary Key (${fromTable?.name})`}
|
||||
options={Object.keys(fromTable?.schema)}
|
||||
on:change={() => ($touched.primary = true)}
|
||||
bind:error={errors.primary}
|
||||
label={`Primary Key (${fromTable.name})`}
|
||||
options={Object.keys(fromTable.schema)}
|
||||
bind:value={fromPrimary}
|
||||
bind:error={errors.fromPrimary}
|
||||
on:change={() => (errors.fromPrimary = null)}
|
||||
/>
|
||||
{/if}
|
||||
<Select
|
||||
label={"Select to table"}
|
||||
options={tableOptions}
|
||||
on:change={() => ($touched.to = true)}
|
||||
bind:error={errors.to}
|
||||
bind:value={fromRelationship.tableId}
|
||||
bind:value={toId}
|
||||
bind:error={errors.toTable}
|
||||
on:change={e => {
|
||||
toColumn = tableOptions.find(opt => opt.value === e.detail)?.label || ""
|
||||
if (errors.toTable === relationshipAlreadyExists) {
|
||||
errors.fromColumn = null
|
||||
}
|
||||
errors.toTable = null
|
||||
errors.toColumn = null
|
||||
errors.fromTable = null
|
||||
errors.throughTable = null
|
||||
}}
|
||||
/>
|
||||
{#if isManyToMany}
|
||||
<Select
|
||||
label={"Through"}
|
||||
options={tableOptions}
|
||||
on:change={() => ($touched.through = true)}
|
||||
bind:error={errors.through}
|
||||
bind:value={fromRelationship.through}
|
||||
bind:value={throughId}
|
||||
bind:error={errors.throughTable}
|
||||
on:change={() => {
|
||||
errors.fromTable = null
|
||||
errors.toTable = null
|
||||
errors.throughTable = null
|
||||
}}
|
||||
/>
|
||||
{#if fromTable && toTable && through}
|
||||
{#if fromTable && toTable && throughTable}
|
||||
<Select
|
||||
label={`Foreign Key (${fromTable?.name})`}
|
||||
options={Object.keys(through?.schema)}
|
||||
on:change={() => ($touched.fromForeign = true)}
|
||||
bind:error={errors.fromForeign}
|
||||
bind:value={fromRelationship.throughTo}
|
||||
options={Object.keys(throughTable?.schema)}
|
||||
bind:value={throughToKey}
|
||||
bind:error={errors.throughToKey}
|
||||
on:change={e => {
|
||||
if (throughFromKey === e.detail) {
|
||||
throughFromKey = null
|
||||
}
|
||||
errors.throughToKey = null
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
label={`Foreign Key (${toTable?.name})`}
|
||||
options={Object.keys(through?.schema)}
|
||||
on:change={() => ($touched.toForeign = true)}
|
||||
bind:error={errors.toForeign}
|
||||
bind:value={fromRelationship.throughFrom}
|
||||
options={Object.keys(throughTable?.schema)}
|
||||
bind:value={throughFromKey}
|
||||
bind:error={errors.throughFromKey}
|
||||
on:change={e => {
|
||||
if (throughToKey === e.detail) {
|
||||
throughToKey = null
|
||||
}
|
||||
errors.throughFromKey = null
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
{:else if isManyToOne && toTable}
|
||||
<Select
|
||||
label={`Foreign Key (${toTable?.name})`}
|
||||
options={Object.keys(toTable?.schema)}
|
||||
on:change={() => ($touched.foreign = true)}
|
||||
bind:error={errors.foreign}
|
||||
bind:value={fromRelationship.fieldName}
|
||||
bind:value={fromForeign}
|
||||
bind:error={errors.fromForeign}
|
||||
on:change={() => (errors.fromForeign = null)}
|
||||
/>
|
||||
{/if}
|
||||
<div class="headings">
|
||||
|
@ -354,19 +456,21 @@
|
|||
provide a name for these columns.
|
||||
</Body>
|
||||
<Input
|
||||
on:blur={() => ($touched.fromCol = true)}
|
||||
bind:error={errors.fromCol}
|
||||
label="From table column"
|
||||
bind:value={fromRelationship.name}
|
||||
bind:value={fromColumn}
|
||||
bind:error={errors.fromColumn}
|
||||
on:change={e => {
|
||||
errors.fromColumn = e.detail?.length > 0 ? null : colNotSet
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
on:blur={() => ($touched.toCol = true)}
|
||||
bind:error={errors.toCol}
|
||||
label="To table column"
|
||||
bind:value={toRelationship.name}
|
||||
bind:value={toColumn}
|
||||
bind:error={errors.toColumn}
|
||||
on:change={e => (errors.toColumn = e.detail?.length > 0 ? null : colNotSet)}
|
||||
/>
|
||||
<div slot="footer">
|
||||
{#if originalFromName != null}
|
||||
{#if originalFromColumnName != null}
|
||||
<Button warning text on:click={deleteRelationship}>Delete</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
export let rows = []
|
||||
export let schema = {}
|
||||
export let allValid = false
|
||||
export let allValid = true
|
||||
export let displayColumn = null
|
||||
|
||||
const typeOptions = [
|
||||
|
@ -174,7 +174,6 @@
|
|||
}
|
||||
|
||||
label {
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
let autoColumns = getAutoColumnInformation()
|
||||
let schema = {}
|
||||
let rows = []
|
||||
let allValid = false
|
||||
let allValid = true
|
||||
let displayColumn = null
|
||||
|
||||
function getAutoColumns() {
|
||||
|
@ -99,7 +99,7 @@
|
|||
title="Create Table"
|
||||
confirmText="Create"
|
||||
onConfirm={saveTable}
|
||||
disabled={error || !name || !allValid}
|
||||
disabled={error || !name || (rows.length && !allValid)}
|
||||
>
|
||||
<Input
|
||||
data-cy="table-name-input"
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
ProgressCircle,
|
||||
Layout,
|
||||
Body,
|
||||
Icon,
|
||||
} from "@budibase/bbui"
|
||||
import { auth, apps } from "stores/portal"
|
||||
import { processStringSync } from "@budibase/string-templates"
|
||||
|
@ -56,85 +57,77 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="lock-status">
|
||||
{#if lockedBy}
|
||||
<Button
|
||||
quiet
|
||||
secondary
|
||||
icon="LockClosed"
|
||||
{#if lockedBy}
|
||||
<div class="lock-status">
|
||||
<Icon
|
||||
name="LockClosed"
|
||||
hoverable
|
||||
size={buttonSize}
|
||||
on:click={() => {
|
||||
on:click={e => {
|
||||
e.stopPropagation()
|
||||
appLockModal.show()
|
||||
}}
|
||||
>
|
||||
<span class="lock-status-text">
|
||||
{lockedByHeading}
|
||||
</span>
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#key app}
|
||||
<div>
|
||||
<Modal bind:this={appLockModal}>
|
||||
<ModalContent
|
||||
title={lockedByHeading}
|
||||
dataCy={"app-lock-modal"}
|
||||
showConfirmButton={false}
|
||||
showCancelButton={false}
|
||||
>
|
||||
<Layout noPadding>
|
||||
<Body size="S">
|
||||
Apps are locked to prevent work from being lost from overlapping
|
||||
changes between your team.
|
||||
</Body>
|
||||
{#if lockedByYou && getExpiryDuration(app) > 0}
|
||||
<span class="lock-expiry-body">
|
||||
{processStringSync(
|
||||
"This lock will expire in {{ duration time 'millisecond' }} from now. This lock will expire in This lock will expire in ",
|
||||
{
|
||||
time: getExpiryDuration(app),
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
{/if}
|
||||
<div class="lock-modal-actions">
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
secondary
|
||||
quiet={lockedBy && lockedByYou}
|
||||
disabled={processing}
|
||||
on:click={() => {
|
||||
appLockModal.hide()
|
||||
}}
|
||||
>
|
||||
<span class="cancel"
|
||||
>{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
|
||||
>
|
||||
</Button>
|
||||
{#if lockedByYou}
|
||||
<Button
|
||||
secondary
|
||||
disabled={processing}
|
||||
on:click={() => {
|
||||
releaseLock()
|
||||
appLockModal.hide()
|
||||
}}
|
||||
>
|
||||
{#if processing}
|
||||
<ProgressCircle overBackground={true} size="S" />
|
||||
{:else}
|
||||
<span class="unlock">Release Lock</span>
|
||||
{/if}
|
||||
</Button>
|
||||
{/if}
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Layout>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
/>
|
||||
</div>
|
||||
{/key}
|
||||
{/if}
|
||||
|
||||
<Modal bind:this={appLockModal}>
|
||||
<ModalContent
|
||||
title={lockedByHeading}
|
||||
dataCy={"app-lock-modal"}
|
||||
showConfirmButton={false}
|
||||
showCancelButton={false}
|
||||
>
|
||||
<Layout noPadding>
|
||||
<Body size="S">
|
||||
Apps are locked to prevent work being lost from overlapping changes
|
||||
between your team.
|
||||
</Body>
|
||||
{#if lockedByYou && getExpiryDuration(app) > 0}
|
||||
<span class="lock-expiry-body">
|
||||
{processStringSync(
|
||||
"This lock will expire in {{ duration time 'millisecond' }} from now.",
|
||||
{
|
||||
time: getExpiryDuration(app),
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
{/if}
|
||||
<div class="lock-modal-actions">
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
secondary
|
||||
quiet={lockedBy && lockedByYou}
|
||||
disabled={processing}
|
||||
on:click={() => {
|
||||
appLockModal.hide()
|
||||
}}
|
||||
>
|
||||
<span class="cancel"
|
||||
>{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
|
||||
>
|
||||
</Button>
|
||||
{#if lockedByYou}
|
||||
<Button
|
||||
cta
|
||||
disabled={processing}
|
||||
on:click={() => {
|
||||
releaseLock()
|
||||
appLockModal.hide()
|
||||
}}
|
||||
>
|
||||
{#if processing}
|
||||
<ProgressCircle overBackground={true} size="S" />
|
||||
{:else}
|
||||
<span class="unlock">Release Lock</span>
|
||||
{/if}
|
||||
</Button>
|
||||
{/if}
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Layout>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.lock-modal-actions {
|
||||
|
@ -148,8 +141,4 @@
|
|||
gap: var(--spacing-s);
|
||||
max-width: 175px;
|
||||
}
|
||||
.lock-status-text {
|
||||
font-weight: 400;
|
||||
color: var(--spectrum-global-color-gray-800);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -135,7 +135,7 @@
|
|||
div :global(.CodeMirror) {
|
||||
height: var(--code-mirror-height);
|
||||
min-height: var(--code-mirror-height);
|
||||
font-family: monospace;
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.3;
|
||||
border: var(--spectrum-alias-border-size-thin) solid;
|
||||
border-color: var(--spectrum-alias-border-color);
|
||||
|
|
|
@ -1,64 +0,0 @@
|
|||
<script>
|
||||
import {
|
||||
ActionMenu,
|
||||
Checkbox,
|
||||
MenuItem,
|
||||
Heading,
|
||||
ProgressCircle,
|
||||
} from "@budibase/bbui"
|
||||
import { admin } from "stores/portal"
|
||||
import { goto } from "@roxi/routify"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
let width = window.innerWidth
|
||||
$: side = width < 500 ? "right" : "left"
|
||||
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
if (entries?.[0]) {
|
||||
width = entries[0].contentRect?.width
|
||||
}
|
||||
})
|
||||
|
||||
onMount(() => {
|
||||
const doc = document.documentElement
|
||||
resizeObserver.observe(doc)
|
||||
|
||||
return () => {
|
||||
resizeObserver.unobserve(doc)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<ActionMenu align={side}>
|
||||
<div slot="control" class="icon">
|
||||
<ProgressCircle size="S" value={$admin.onboardingProgress} />
|
||||
</div>
|
||||
<MenuItem disabled>
|
||||
<header class="item">
|
||||
<Heading size="XXS">Get Started Checklist</Heading>
|
||||
<ProgressCircle size="S" value={$admin.onboardingProgress} />
|
||||
</header>
|
||||
</MenuItem>
|
||||
{#each Object.keys($admin.checklist) as checklistItem, idx}
|
||||
<MenuItem>
|
||||
<div
|
||||
class="item"
|
||||
on:click={() => $goto($admin.checklist[checklistItem].link)}
|
||||
>
|
||||
<span>{idx + 1}. {$admin.checklist[checklistItem].label}</span>
|
||||
<Checkbox value={$admin.checklist[checklistItem].checked} />
|
||||
</div>
|
||||
</MenuItem>
|
||||
{/each}
|
||||
</ActionMenu>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 175px 20px;
|
||||
}
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
|
@ -1,47 +1,46 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
import { Icon, Modal } from "@budibase/bbui"
|
||||
import ChooseIconModal from "components/start/ChooseIconModal.svelte"
|
||||
|
||||
export let name
|
||||
export let size
|
||||
export let size = "M"
|
||||
export let app
|
||||
export let color
|
||||
export let autoSave = false
|
||||
|
||||
let iconModal
|
||||
let modal
|
||||
</script>
|
||||
|
||||
<div class="editable-icon">
|
||||
<div
|
||||
class="edit-hover"
|
||||
on:click={() => {
|
||||
iconModal.show()
|
||||
}}
|
||||
>
|
||||
<Icon name={"Edit"} size={"L"} />
|
||||
<div class="hover" on:click={modal.show}>
|
||||
<Icon name="Edit" {size} color="var(--spectrum-global-color-gray-600)" />
|
||||
</div>
|
||||
<div class="app-icon">
|
||||
<Icon {name} {size} />
|
||||
<div class="normal">
|
||||
<Icon {name} {size} {color} />
|
||||
</div>
|
||||
</div>
|
||||
<ChooseIconModal {app} bind:this={iconModal} />
|
||||
|
||||
<Modal bind:this={modal}>
|
||||
<ChooseIconModal {name} {color} {app} {autoSave} on:change />
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.editable-icon:hover .app-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
.editable-icon {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.editable-icon:hover .edit-hover {
|
||||
opacity: 1;
|
||||
.normal {
|
||||
display: block;
|
||||
}
|
||||
.edit-hover {
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
.hover {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
/* transition: opacity var(--spectrum-global-animation-duration-100) ease; */
|
||||
}
|
||||
.editable-icon:hover .normal {
|
||||
display: none;
|
||||
}
|
||||
.editable-icon:hover .hover {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -31,6 +31,7 @@
|
|||
bottom: var(--spacing-m);
|
||||
right: var(--spacing-m);
|
||||
border-radius: 55%;
|
||||
z-index: 99999;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
import { Select } from "@budibase/bbui"
|
||||
import { roles } from "stores/backend"
|
||||
import { Constants, RoleUtils } from "@budibase/frontend-core"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
export let value
|
||||
export let error
|
||||
|
@ -9,26 +10,62 @@
|
|||
export let autoWidth = false
|
||||
export let quiet = false
|
||||
export let allowPublic = true
|
||||
export let allowRemove = false
|
||||
|
||||
$: options = getOptions($roles, allowPublic)
|
||||
const dispatch = createEventDispatcher()
|
||||
const RemoveID = "remove"
|
||||
|
||||
$: options = getOptions($roles, allowPublic, allowRemove)
|
||||
|
||||
const getOptions = (roles, allowPublic) => {
|
||||
if (allowRemove) {
|
||||
roles = [
|
||||
...roles,
|
||||
{
|
||||
_id: RemoveID,
|
||||
name: "Remove",
|
||||
},
|
||||
]
|
||||
}
|
||||
if (allowPublic) {
|
||||
return roles
|
||||
}
|
||||
return roles.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>
|
||||
|
||||
<Select
|
||||
{autoWidth}
|
||||
{quiet}
|
||||
bind:value
|
||||
on:change
|
||||
on:change={onChange}
|
||||
{options}
|
||||
getOptionLabel={role => role.name}
|
||||
getOptionValue={role => role._id}
|
||||
getOptionColour={role => RoleUtils.getRoleColour(role._id)}
|
||||
getOptionColour={getColor}
|
||||
getOptionIcon={getIcon}
|
||||
{placeholder}
|
||||
{error}
|
||||
/>
|
||||
|
|
|
@ -1,128 +1,110 @@
|
|||
<script>
|
||||
import {
|
||||
Layout,
|
||||
Detail,
|
||||
Heading,
|
||||
Button,
|
||||
Modal,
|
||||
ActionGroup,
|
||||
ActionButton,
|
||||
} from "@budibase/bbui"
|
||||
import { Layout, Detail, Button, Modal } from "@budibase/bbui"
|
||||
import TemplateCard from "components/common/TemplateCard.svelte"
|
||||
import CreateAppModal from "components/start/CreateAppModal.svelte"
|
||||
import { licensing } from "stores/portal"
|
||||
import { Content, SideNav, SideNavItem } from "components/portal/page"
|
||||
|
||||
export let templates
|
||||
|
||||
let selectedTemplateCategory
|
||||
let selectedCategory
|
||||
let creationModal
|
||||
let template
|
||||
|
||||
const groupTemplatesByCategory = (templates, categoryFilter) => {
|
||||
let grouped = templates.reduce((acc, template) => {
|
||||
if (
|
||||
typeof categoryFilter === "string" &&
|
||||
[categoryFilter].indexOf(template.category) < 0
|
||||
) {
|
||||
return acc
|
||||
$: categories = getCategories(templates)
|
||||
$: filteredCategories = getFilteredCategories(categories, selectedCategory)
|
||||
|
||||
const getCategories = templates => {
|
||||
let categories = {}
|
||||
templates?.forEach(template => {
|
||||
if (!categories[template.category]) {
|
||||
categories[template.category] = []
|
||||
}
|
||||
|
||||
acc[template.category] = !acc[template.category]
|
||||
? []
|
||||
: acc[template.category]
|
||||
acc[template.category].push(template)
|
||||
|
||||
return acc
|
||||
}, {})
|
||||
return grouped
|
||||
categories[template.category].push(template)
|
||||
})
|
||||
categories = Object.entries(categories).map(
|
||||
([category, categoryTemplates]) => {
|
||||
return {
|
||||
name: category,
|
||||
templates: categoryTemplates,
|
||||
}
|
||||
}
|
||||
)
|
||||
categories.sort((a, b) => {
|
||||
return a.name < b.name ? -1 : 1
|
||||
})
|
||||
return categories
|
||||
}
|
||||
|
||||
$: filteredTemplates = groupTemplatesByCategory(
|
||||
templates,
|
||||
selectedTemplateCategory
|
||||
)
|
||||
|
||||
$: filteredTemplateCategories = filteredTemplates
|
||||
? Object.keys(filteredTemplates).sort()
|
||||
: []
|
||||
|
||||
$: templateCategories = templates
|
||||
? Object.keys(groupTemplatesByCategory(templates)).sort()
|
||||
: []
|
||||
const getFilteredCategories = (categories, selectedCategory) => {
|
||||
if (!selectedCategory) {
|
||||
return categories
|
||||
}
|
||||
return categories.filter(x => x.name === selectedCategory)
|
||||
}
|
||||
|
||||
const stopAppCreation = () => {
|
||||
template = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="template-header">
|
||||
<Layout noPadding gap="S">
|
||||
<Heading size="S">Templates</Heading>
|
||||
<div class="template-category-filters spectrum-ActionGroup">
|
||||
<ActionGroup>
|
||||
<ActionButton
|
||||
selected={!selectedTemplateCategory}
|
||||
on:click={() => {
|
||||
selectedTemplateCategory = null
|
||||
}}
|
||||
>
|
||||
All
|
||||
</ActionButton>
|
||||
{#each templateCategories as templateCategoryKey}
|
||||
<ActionButton
|
||||
dataCy={templateCategoryKey}
|
||||
selected={templateCategoryKey == selectedTemplateCategory}
|
||||
on:click={() => {
|
||||
selectedTemplateCategory = templateCategoryKey
|
||||
}}
|
||||
>
|
||||
{templateCategoryKey}
|
||||
</ActionButton>
|
||||
{/each}
|
||||
</ActionGroup>
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
|
||||
<div class="template-categories">
|
||||
<Layout gap="XL" noPadding>
|
||||
{#each filteredTemplateCategories as templateCategoryKey}
|
||||
<div class="template-category" data-cy={templateCategoryKey}>
|
||||
<Detail size="M">{templateCategoryKey}</Detail>
|
||||
<div class="template-grid">
|
||||
{#each filteredTemplates[templateCategoryKey] as templateEntry}
|
||||
<TemplateCard
|
||||
name={templateEntry.name}
|
||||
imageSrc={templateEntry.image}
|
||||
backgroundColour={templateEntry.background}
|
||||
icon={templateEntry.icon}
|
||||
>
|
||||
{#if !($licensing?.usageMetrics?.apps >= 100)}
|
||||
<Button
|
||||
cta
|
||||
on:click={() => {
|
||||
template = templateEntry
|
||||
creationModal.show()
|
||||
}}
|
||||
>
|
||||
Use template
|
||||
</Button>
|
||||
{/if}
|
||||
<a
|
||||
href={templateEntry.url}
|
||||
target="_blank"
|
||||
class="overlay-preview-link spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary"
|
||||
on:click|stopPropagation
|
||||
<Content>
|
||||
<div slot="side-nav">
|
||||
<SideNav>
|
||||
<SideNavItem
|
||||
on:click={() => (selectedCategory = null)}
|
||||
text="All"
|
||||
active={selectedCategory == null}
|
||||
/>
|
||||
{#each categories as category}
|
||||
<SideNavItem
|
||||
on:click={() => (selectedCategory = category.name)}
|
||||
text={category.name}
|
||||
active={selectedCategory === category.name}
|
||||
/>
|
||||
{/each}
|
||||
</SideNav>
|
||||
</div>
|
||||
<div class="template-categories">
|
||||
<Layout gap="XL" noPadding>
|
||||
{#each filteredCategories as category}
|
||||
<div class="template-category" data-cy={category.name}>
|
||||
<Detail size="M">{category.name}</Detail>
|
||||
<div class="template-grid">
|
||||
{#each category.templates as templateEntry}
|
||||
<TemplateCard
|
||||
name={templateEntry.name}
|
||||
imageSrc={templateEntry.image}
|
||||
backgroundColour={templateEntry.background}
|
||||
icon={templateEntry.icon}
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</TemplateCard>
|
||||
{/each}
|
||||
{#if !($licensing?.usageMetrics?.apps >= 100)}
|
||||
<Button
|
||||
cta
|
||||
on:click={() => {
|
||||
template = templateEntry
|
||||
creationModal.show()
|
||||
}}
|
||||
>
|
||||
Use template
|
||||
</Button>
|
||||
{/if}
|
||||
<a
|
||||
href={templateEntry.url}
|
||||
target="_blank"
|
||||
class="overlay-preview-link spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary"
|
||||
on:click|stopPropagation
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</TemplateCard>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</Layout>
|
||||
</div>
|
||||
{/each}
|
||||
</Layout>
|
||||
</div>
|
||||
</Content>
|
||||
|
||||
<Modal
|
||||
bind:this={creationModal}
|
||||
|
|
|
@ -469,7 +469,7 @@
|
|||
}
|
||||
|
||||
.binding__type {
|
||||
font-family: monospace;
|
||||
font-family: var(--font-mono);
|
||||
background-color: var(--spectrum-global-color-gray-200);
|
||||
border-radius: var(--border-radius-s);
|
||||
padding: 2px 4px;
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
dummy.select()
|
||||
document.execCommand("copy")
|
||||
document.body.removeChild(dummy)
|
||||
notifications.success(`URL copied to clipboard`)
|
||||
notifications.success(`Copied to clipboard`)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -57,15 +57,13 @@
|
|||
<Button cta on:click={publishModal.show}>Publish</Button>
|
||||
<Modal bind:this={publishModal}>
|
||||
<ModalContent
|
||||
title="Publish to Production"
|
||||
title="Publish to production"
|
||||
confirmText="Publish"
|
||||
onConfirm={publishApp}
|
||||
dataCy={"deploy-app-modal"}
|
||||
>
|
||||
<span
|
||||
>The changes you have made will be published to the production version of
|
||||
the application.</span
|
||||
>
|
||||
The changes you have made will be published to the production version of the
|
||||
application.
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
|
|
|
@ -179,7 +179,7 @@
|
|||
</ConfirmDialog>
|
||||
|
||||
<div class="buttons">
|
||||
<Button on:click={previewApp} newStyles secondary>Preview</Button>
|
||||
<Button on:click={previewApp} secondary>Preview</Button>
|
||||
<DeployModal onOk={completePublish} />
|
||||
</div>
|
||||
|
||||
|
|
|
@ -70,7 +70,10 @@
|
|||
type: "provider",
|
||||
}))
|
||||
$: links = bindings
|
||||
// Get only link bindings
|
||||
.filter(x => x.fieldSchema?.type === "link")
|
||||
// Filter out bindings provided by forms
|
||||
.filter(x => !x.component?.endsWith("/form"))
|
||||
.map(binding => {
|
||||
const { providerId, readableBinding, fieldSchema } = binding || {}
|
||||
const { name, tableId } = fieldSchema || {}
|
||||
|
|
|
@ -185,7 +185,7 @@
|
|||
div :global(.CodeMirror) {
|
||||
height: var(--code-mirror-height) !important;
|
||||
border-radius: var(--border-radius-s);
|
||||
font-family: monospace !important;
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,106 +0,0 @@
|
|||
<script>
|
||||
import { Layout, Icon, ActionButton, InlineAlert } from "@budibase/bbui"
|
||||
import StatusRenderer from "./StatusRenderer.svelte"
|
||||
import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
|
||||
import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
|
||||
import { goto } from "@roxi/routify"
|
||||
import { automationStore } from "builderStore"
|
||||
|
||||
export let history
|
||||
export let appId
|
||||
export let close
|
||||
const STOPPED_ERROR = "stopped_error"
|
||||
|
||||
$: exists = $automationStore.automations?.find(
|
||||
auto => auto._id === history?.automationId
|
||||
)
|
||||
</script>
|
||||
|
||||
{#if history}
|
||||
<div class="body">
|
||||
<div class="top">
|
||||
<div class="controls">
|
||||
<StatusRenderer value={history.status} />
|
||||
<ActionButton noPadding size="S" icon="Close" quiet on:click={close} />
|
||||
</div>
|
||||
</div>
|
||||
<Layout paddingY="XL" paddingX="XL" gap="S">
|
||||
<div class="icon">
|
||||
<Icon name="Clock" />
|
||||
<DateTimeRenderer value={history.createdAt} />
|
||||
</div>
|
||||
<div class="icon">
|
||||
<Icon name="JourneyVoyager" />
|
||||
<div>{history.automationName}</div>
|
||||
</div>
|
||||
{#if history.status === STOPPED_ERROR}
|
||||
<div class="cron-error">
|
||||
<InlineAlert
|
||||
type="error"
|
||||
header="CRON automation disabled"
|
||||
message="Fix the error and re-publish your app to re-activate."
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
{#if exists}
|
||||
<ActionButton
|
||||
icon="Edit"
|
||||
fullWidth={false}
|
||||
on:click={() =>
|
||||
$goto(`../../../app/${appId}/automate/${history.automationId}`)}
|
||||
>Edit automation</ActionButton
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
<div class="bottom">
|
||||
{#key history}
|
||||
<TestDisplay testResults={history} width="100%" />
|
||||
{/key}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div>No details found</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.body {
|
||||
right: 0;
|
||||
background-color: var(--background);
|
||||
border-left: var(--border-light);
|
||||
width: 420px;
|
||||
height: calc(100vh - 240px);
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.top {
|
||||
padding: var(--spacing-m) 0 var(--spacing-m) 0;
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
border-top: var(--border-light);
|
||||
padding-top: calc(var(--spacing-xl) * 2);
|
||||
padding-bottom: calc(var(--spacing-xl) * 2);
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
|
||||
.controls {
|
||||
padding: 0 var(--spacing-l) 0 var(--spacing-l);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: var(--spacing-s);
|
||||
}
|
||||
|
||||
.cron-error {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
|
@ -1,39 +0,0 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
export let value
|
||||
|
||||
$: isError = !value || value.toLowerCase() === "error"
|
||||
$: isStoppedError = value?.toLowerCase() === "stopped_error"
|
||||
$: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
|
||||
$: status = getStatus(isError, isStopped)
|
||||
|
||||
function getStatus(error, stopped) {
|
||||
if (error) {
|
||||
return { color: "var(--red)", message: "Error", icon: "Alert" }
|
||||
} else if (stopped) {
|
||||
return { color: "var(--yellow)", message: "Stopped", icon: "StopCircle" }
|
||||
} else {
|
||||
return {
|
||||
color: "var(--green)",
|
||||
message: "Success",
|
||||
icon: "CheckmarkCircle",
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
<Icon color={status.color} name={status.icon} />
|
||||
<div style={`color: ${status.color};`}>
|
||||
{status.message}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,37 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
|
||||
export let url
|
||||
export let text
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<a href={url}>
|
||||
{text}
|
||||
</a>
|
||||
<Icon name="ChevronRight" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
gap: var(--spacing-m);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
div :global(.spectrum-Icon),
|
||||
a {
|
||||
color: inherit;
|
||||
transition: color 130ms ease-out;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,22 @@
|
|||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
|
||||
div :global(> *:last-child .spectrum-Icon) {
|
||||
display: none;
|
||||
}
|
||||
div :global(> *:last-child) {
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
flex: 1 1 auto;
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
46
packages/builder/src/components/portal/page/Content.svelte
Normal file
46
packages/builder/src/components/portal/page/Content.svelte
Normal file
|
@ -0,0 +1,46 @@
|
|||
<script>
|
||||
export let narrow = false
|
||||
export let showMobileNav = false
|
||||
</script>
|
||||
|
||||
<div class="content">
|
||||
<div class="side-nav" class:show-mobile={showMobileNav}>
|
||||
<slot name="side-nav" />
|
||||
</div>
|
||||
<div class="main" class:narrow>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: 40px;
|
||||
}
|
||||
.side-nav {
|
||||
flex: 0 0 200px;
|
||||
}
|
||||
.main {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.main.narrow {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
}
|
||||
.side-nav:not(.show-mobile) {
|
||||
display: none;
|
||||
}
|
||||
.side-nav.show-mobile :global(.side-nav) {
|
||||
border-bottom: var(--border-light);
|
||||
margin: 0 -24px;
|
||||
padding: 0 24px 32px 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
52
packages/builder/src/components/portal/page/Header.svelte
Normal file
52
packages/builder/src/components/portal/page/Header.svelte
Normal file
|
@ -0,0 +1,52 @@
|
|||
<script>
|
||||
import { Heading } from "@budibase/bbui"
|
||||
|
||||
export let title
|
||||
export let wrap = true
|
||||
</script>
|
||||
|
||||
<div class="header" class:wrap>
|
||||
<slot name="icon" />
|
||||
<Heading size="L">{title}</Heading>
|
||||
<div class="buttons">
|
||||
<slot name="buttons" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
.header.wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.header :global(.spectrum-Heading) {
|
||||
flex: 1 1 auto;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.header:not(.wrap) :global(.spectrum-Heading) {
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
.buttons :global(> div) {
|
||||
display: contents;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.wrap .buttons {
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
</style>
|
26
packages/builder/src/components/portal/page/SideNav.svelte
Normal file
26
packages/builder/src/components/portal/page/SideNav.svelte
Normal file
|
@ -0,0 +1,26 @@
|
|||
<script>
|
||||
export let title
|
||||
</script>
|
||||
|
||||
<div class="side-nav">
|
||||
{#if title}
|
||||
<div class="title">{title}</div>
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.side-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: 4px;
|
||||
}
|
||||
.title {
|
||||
margin-left: var(--spacing-m);
|
||||
font-size: 12px;
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
export let text
|
||||
export let url
|
||||
export let active = false
|
||||
</script>
|
||||
|
||||
<a on:click href={url} class:active>
|
||||
{text || ""}
|
||||
</a>
|
||||
|
||||
<style>
|
||||
a {
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
border-radius: 4px;
|
||||
transition: background 130ms ease-out;
|
||||
}
|
||||
.active,
|
||||
a:hover {
|
||||
background-color: var(--spectrum-global-color-gray-200);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
6
packages/builder/src/components/portal/page/index.js
Normal file
6
packages/builder/src/components/portal/page/index.js
Normal file
|
@ -0,0 +1,6 @@
|
|||
export { default as Breadcrumb } from "./Breadcrumb.svelte"
|
||||
export { default as Breadcrumbs } from "./Breadcrumbs.svelte"
|
||||
export { default as Header } from "./Header.svelte"
|
||||
export { default as Content } from "./Content.svelte"
|
||||
export { default as SideNavItem } from "./SideNavItem.svelte"
|
||||
export { default as SideNav } from "./SideNav.svelte"
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import { ModalContent, Body, notifications } from "@budibase/bbui"
|
||||
import { ModalContent } from "@budibase/bbui"
|
||||
import { Body, notifications } from "@budibase/bbui"
|
||||
import { auth } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
import CopyInput from "components/common/inputs/CopyInput.svelte"
|
||||
|
@ -27,15 +28,13 @@
|
|||
</script>
|
||||
|
||||
<ModalContent
|
||||
title="Developer information"
|
||||
showConfirmButton={false}
|
||||
showSecondaryButton={true}
|
||||
secondaryButtonText="Re-generate key"
|
||||
title="API Key"
|
||||
showSecondaryButton
|
||||
secondaryButtonText="Regenerate key"
|
||||
secondaryAction={generateAPIKey}
|
||||
showCancelButton={false}
|
||||
confirmText="Close"
|
||||
>
|
||||
<Body size="S">
|
||||
You can find information about your developer account here, such as the API
|
||||
key used to access the Budibase API.
|
||||
</Body>
|
||||
<CopyInput bind:value={apiKey} label="API key" />
|
||||
<Body size="S">Your API key for accessing the Budibase public API:</Body>
|
||||
<CopyInput bind:value={apiKey} />
|
||||
</ModalContent>
|
|
@ -18,11 +18,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
title="Update user information"
|
||||
confirmText="Update information"
|
||||
onConfirm={updateInfo}
|
||||
>
|
||||
<ModalContent title="My profile" confirmText="Save" onConfirm={updateInfo}>
|
||||
<Body size="S">
|
||||
Personalise the platform by adding your first name and last name.
|
||||
</Body>
|
16
packages/builder/src/components/settings/ThemeModal.svelte
Normal file
16
packages/builder/src/components/settings/ThemeModal.svelte
Normal file
|
@ -0,0 +1,16 @@
|
|||
<script>
|
||||
import { ModalContent } from "@budibase/bbui"
|
||||
import { Select } from "@budibase/bbui"
|
||||
import { themeStore } from "builderStore"
|
||||
import { Constants } from "@budibase/frontend-core"
|
||||
</script>
|
||||
|
||||
<ModalContent title="Theme">
|
||||
<Select
|
||||
options={Constants.Themes}
|
||||
bind:value={$themeStore.theme}
|
||||
placeholder={null}
|
||||
getOptionLabel={x => x.name}
|
||||
getOptionValue={x => x.class}
|
||||
/>
|
||||
</ModalContent>
|
|
@ -1,85 +1,126 @@
|
|||
<script>
|
||||
import { Heading, Button, Icon } from "@budibase/bbui"
|
||||
import { Heading, Body, Button, Icon, notifications } from "@budibase/bbui"
|
||||
import AppLockModal from "../common/AppLockModal.svelte"
|
||||
import { processStringSync } from "@budibase/string-templates"
|
||||
import { goto } from "@roxi/routify"
|
||||
|
||||
export let app
|
||||
export let editApp
|
||||
export let appOverview
|
||||
|
||||
const handleDefaultClick = () => {
|
||||
if (window.innerWidth < 640) {
|
||||
goToOverview()
|
||||
} else {
|
||||
goToBuilder()
|
||||
}
|
||||
}
|
||||
|
||||
const goToBuilder = () => {
|
||||
if (app.lockedOther) {
|
||||
notifications.error(
|
||||
`App locked by ${app.lockedBy.email}. Please allow lock to expire or have them unlock this app.`
|
||||
)
|
||||
return
|
||||
}
|
||||
$goto(`../../app/${app.devId}`)
|
||||
}
|
||||
|
||||
const goToOverview = () => {
|
||||
$goto(`../overview/${app.devId}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="title" data-cy={`${app.devId}`}>
|
||||
<div>
|
||||
<div class="app-icon" style="color: {app.icon?.color || ''}">
|
||||
<Icon size="XL" name={app.icon?.name || "Apps"} />
|
||||
<div class="app-row" on:click={handleDefaultClick}>
|
||||
<div class="title" data-cy={`${app.devId}`}>
|
||||
<div class="app-icon">
|
||||
<Icon size="L" name={app.icon?.name || "Apps"} color={app.icon?.color} />
|
||||
</div>
|
||||
<div class="name" data-cy="app-name-link" on:click={() => editApp(app)}>
|
||||
<Heading size="XS">
|
||||
<div class="name" data-cy="app-name-link">
|
||||
<Heading size="S">
|
||||
{app.name}
|
||||
</Heading>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desktop">
|
||||
{#if app.updatedAt}
|
||||
{processStringSync("Updated {{ duration time 'millisecond' }} ago", {
|
||||
time: new Date().getTime() - new Date(app.updatedAt).getTime(),
|
||||
})}
|
||||
{:else}
|
||||
Never updated
|
||||
{/if}
|
||||
</div>
|
||||
<div class="desktop">
|
||||
<span><AppLockModal {app} buttonSize="M" /></span>
|
||||
</div>
|
||||
<div class="desktop">
|
||||
<div class="app-status">
|
||||
{#if app.deployed}
|
||||
<Icon name="Globe" disabled={false} />
|
||||
Published
|
||||
|
||||
<div class="updated">
|
||||
{#if app.updatedAt}
|
||||
{processStringSync("Updated {{ duration time 'millisecond' }} ago", {
|
||||
time: new Date().getTime() - new Date(app.updatedAt).getTime(),
|
||||
})}
|
||||
{:else}
|
||||
<Icon name="GlobeStrike" disabled={true} />
|
||||
<span class="disabled"> Unpublished </span>
|
||||
Never updated
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div data-cy={`row_actions_${app.appId}`}>
|
||||
<div class="app-row-actions">
|
||||
<Button size="S" secondary newStyles on:click={() => appOverview(app)}>
|
||||
Manage
|
||||
</Button>
|
||||
<Button
|
||||
size="S"
|
||||
primary
|
||||
newStyles
|
||||
disabled={app.lockedOther}
|
||||
on:click={() => editApp(app)}
|
||||
>
|
||||
|
||||
<div class="title app-status" class:deployed={app.deployed}>
|
||||
<Icon size="L" name={app.deployed ? "GlobeCheck" : "GlobeStrike"} />
|
||||
<Body size="S">{app.deployed ? "Published" : "Unpublished"}</Body>
|
||||
</div>
|
||||
|
||||
<div class="app-row-actions" data-cy={`row_actions_${app.appId}`}>
|
||||
<AppLockModal {app} buttonSize="M" />
|
||||
<Button size="S" secondary on:click={goToOverview}>Manage</Button>
|
||||
<Button size="S" primary disabled={app.lockedOther} on:click={goToBuilder}>
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div.title,
|
||||
div.title > div {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
.app-row {
|
||||
background: var(--background);
|
||||
padding: 24px 32px;
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: 35% 25% 15% auto;
|
||||
align-items: center;
|
||||
gap: var(--spacing-m);
|
||||
transition: border 130ms ease-out;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.app-row:hover {
|
||||
cursor: pointer;
|
||||
border-color: var(--spectrum-global-color-gray-300);
|
||||
}
|
||||
|
||||
.updated {
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
}
|
||||
|
||||
.title,
|
||||
.name {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.name {
|
||||
width: 0;
|
||||
}
|
||||
.title,
|
||||
.app-status {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.title :global(.spectrum-Heading),
|
||||
.title :global(.spectrum-Icon),
|
||||
.title :global(.spectrum-Body) {
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
}
|
||||
|
||||
.app-status:not(.deployed) :global(.spectrum-Icon),
|
||||
.app-status:not(.deployed) :global(.spectrum-Body) {
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
|
||||
.app-row-actions {
|
||||
grid-gap: var(--spacing-s);
|
||||
gap: var(--spacing-m);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.app-status {
|
||||
display: grid;
|
||||
grid-gap: var(--spacing-s);
|
||||
grid-template-columns: 24px 100px;
|
||||
}
|
||||
.app-status span.disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.name {
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
|
@ -88,17 +129,30 @@
|
|||
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: 1000px) {
|
||||
.app-row {
|
||||
grid-template-columns: 45% 30% auto;
|
||||
}
|
||||
.updated {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.app-row {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
.app-status {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.desktop {
|
||||
display: none !important;
|
||||
.app-row {
|
||||
padding: 20px;
|
||||
}
|
||||
.app-row-actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,18 +1,20 @@
|
|||
<script>
|
||||
import {
|
||||
ModalContent,
|
||||
Modal,
|
||||
Icon,
|
||||
ColorPicker,
|
||||
Label,
|
||||
notifications,
|
||||
} from "@budibase/bbui"
|
||||
import { apps } from "stores/portal"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
export let app
|
||||
let modal
|
||||
$: selectedIcon = app?.icon?.name || "Apps"
|
||||
$: selectedColor = app?.icon?.color
|
||||
export let name
|
||||
export let color
|
||||
export let autoSave = false
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let iconsList = [
|
||||
"Apps",
|
||||
|
@ -40,30 +42,15 @@
|
|||
"GraphBarHorizontal",
|
||||
"Demographic",
|
||||
]
|
||||
export const show = () => {
|
||||
modal.show()
|
||||
}
|
||||
export const hide = () => {
|
||||
modal.hide()
|
||||
}
|
||||
|
||||
const onCancel = () => {
|
||||
selectedIcon = ""
|
||||
selectedColor = ""
|
||||
hide()
|
||||
}
|
||||
|
||||
const changeColor = val => {
|
||||
selectedColor = val
|
||||
}
|
||||
|
||||
const save = async () => {
|
||||
if (!autoSave) {
|
||||
dispatch("change", { color, name })
|
||||
return
|
||||
}
|
||||
try {
|
||||
await apps.update(app.instance._id, {
|
||||
icon: {
|
||||
name: selectedIcon,
|
||||
color: selectedColor,
|
||||
},
|
||||
icon: { name, color },
|
||||
})
|
||||
} catch (error) {
|
||||
notifications.error("Error updating app")
|
||||
|
@ -71,41 +58,32 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Modal bind:this={modal} on:hide={onCancel}>
|
||||
<ModalContent
|
||||
title={"Edit Icon"}
|
||||
confirmText={"Save"}
|
||||
onConfirm={() => save()}
|
||||
>
|
||||
<div class="scrollable-icons">
|
||||
<div class="title-spacing">
|
||||
<Label>Select an icon</Label>
|
||||
</div>
|
||||
<div class="grid">
|
||||
{#each iconsList as item}
|
||||
<div
|
||||
class="icon-item"
|
||||
class:selected={item === selectedIcon}
|
||||
on:click={() => (selectedIcon = item)}
|
||||
>
|
||||
<Icon name={item} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<ModalContent title="Edit Icon" confirmText="Save" onConfirm={save}>
|
||||
<div class="scrollable-icons">
|
||||
<div class="title-spacing">
|
||||
<Label>Select an icon</Label>
|
||||
</div>
|
||||
<div class="color-selection">
|
||||
<div>
|
||||
<Label>Select a color</Label>
|
||||
</div>
|
||||
<div class="color-selection-item">
|
||||
<ColorPicker
|
||||
bind:value={selectedColor}
|
||||
on:change={e => changeColor(e.detail)}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid">
|
||||
{#each iconsList as item}
|
||||
<div
|
||||
class="icon-item"
|
||||
class:selected={item === name}
|
||||
on:click={() => (name = item)}
|
||||
>
|
||||
<Icon name={item} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</div>
|
||||
<div class="color-selection">
|
||||
<div>
|
||||
<Label>Select a color</Label>
|
||||
</div>
|
||||
<div class="color-selection-item">
|
||||
<ColorPicker bind:value={color} on:change={e => (color = e.detail)} />
|
||||
</div>
|
||||
</div>
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
.scrollable-icons {
|
||||
|
|
|
@ -138,6 +138,7 @@
|
|||
}
|
||||
|
||||
$goto(`/builder/app/${createdApp.instance._id}`)
|
||||
// apps.load()
|
||||
} catch (error) {
|
||||
creating = false
|
||||
console.error(error)
|
||||
|
|
|
@ -1,22 +1,29 @@
|
|||
<script>
|
||||
import { writable, get as svelteGet } from "svelte/store"
|
||||
import { notifications, Input, ModalContent, Body } from "@budibase/bbui"
|
||||
import {
|
||||
notifications,
|
||||
Input,
|
||||
ModalContent,
|
||||
Layout,
|
||||
Label,
|
||||
} from "@budibase/bbui"
|
||||
import { apps } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
import { createValidationStore } from "helpers/validation/yup"
|
||||
import * as appValidation from "helpers/validation/yup/app"
|
||||
import EditableIcon from "../common/EditableIcon.svelte"
|
||||
|
||||
export let app
|
||||
|
||||
const values = writable({ name: "", url: null })
|
||||
const validation = createValidationStore()
|
||||
$: validation.check($values)
|
||||
|
||||
onMount(async () => {
|
||||
$values.name = app.name
|
||||
$values.url = app.url
|
||||
setupValidation()
|
||||
const values = writable({
|
||||
name: app.name,
|
||||
url: app.url,
|
||||
iconName: app.icon?.name,
|
||||
iconColor: app.icon?.color,
|
||||
})
|
||||
const validation = createValidationStore()
|
||||
|
||||
$: validation.check($values)
|
||||
|
||||
const setupValidation = async () => {
|
||||
const applications = svelteGet(apps)
|
||||
|
@ -28,14 +35,14 @@
|
|||
|
||||
async function updateApp() {
|
||||
try {
|
||||
// Update App
|
||||
const body = {
|
||||
name: $values.name.trim(),
|
||||
}
|
||||
if ($values.url) {
|
||||
body.url = $values.url.trim()
|
||||
}
|
||||
await apps.update(app.instance._id, body)
|
||||
await apps.update(app.instance._id, {
|
||||
name: $values.name?.trim(),
|
||||
url: $values.url?.trim(),
|
||||
icon: {
|
||||
name: $values.iconName,
|
||||
color: $values.iconColor,
|
||||
},
|
||||
})
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
notifications.error("Error updating app")
|
||||
|
@ -68,15 +75,22 @@
|
|||
let resolvedUrl = resolveAppUrl(null, appName)
|
||||
tidyUrl(resolvedUrl)
|
||||
}
|
||||
|
||||
const updateIcon = e => {
|
||||
const { name, color } = e.detail
|
||||
$values.iconColor = color
|
||||
$values.iconName = name
|
||||
}
|
||||
|
||||
onMount(setupValidation)
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
title={"Edit app"}
|
||||
confirmText={"Save"}
|
||||
title="Edit name and URL"
|
||||
confirmText="Save"
|
||||
onConfirm={updateApp}
|
||||
disabled={!$validation.valid}
|
||||
>
|
||||
<Body size="S">Update the name of your app.</Body>
|
||||
<Input
|
||||
bind:value={$values.name}
|
||||
error={$validation.touched.name && $validation.errors.name}
|
||||
|
@ -84,6 +98,16 @@
|
|||
on:change={nameToUrl($values.name)}
|
||||
label="Name"
|
||||
/>
|
||||
<Layout noPadding gap="XS">
|
||||
<Label>Icon</Label>
|
||||
<EditableIcon
|
||||
{app}
|
||||
size="XL"
|
||||
name={$values.iconName}
|
||||
color={$values.iconColor}
|
||||
on:change={updateIcon}
|
||||
/>
|
||||
</Layout>
|
||||
<Input
|
||||
bind:value={$values.url}
|
||||
error={$validation.touched.url && $validation.errors.url}
|
||||
|
|
|
@ -39,15 +39,21 @@
|
|||
{#if showWarning}
|
||||
<Icon name="Alert" />
|
||||
{/if}
|
||||
<div class="heading header-item">
|
||||
<Heading size="XS" weight="light">{usage.name}</Heading>
|
||||
</div>
|
||||
<Heading size="XS" weight="light">
|
||||
<span class="nowrap">
|
||||
{usage.name}
|
||||
</span>
|
||||
</Heading>
|
||||
</div>
|
||||
{#if unlimited}
|
||||
<Body size="S">{usage.used} / Unlimited</Body>
|
||||
{:else}
|
||||
<Body size="S">{usage.used} / {usage.total}</Body>
|
||||
{/if}
|
||||
<Body size="S">
|
||||
<span class="nowrap">
|
||||
{#if unlimited}
|
||||
{usage.used} / Unlimited
|
||||
{:else}
|
||||
{usage.used} / {usage.total}
|
||||
{/if}
|
||||
</span>
|
||||
</Body>
|
||||
</div>
|
||||
<div>
|
||||
{#if unlimited}
|
||||
|
@ -89,13 +95,14 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 12px;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
.header-container {
|
||||
display: flex;
|
||||
}
|
||||
.heading {
|
||||
margin-top: 3px;
|
||||
margin-left: 5px;
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -47,7 +47,7 @@
|
|||
<div class="header-actions">
|
||||
{#if secondaryDefined}
|
||||
<div>
|
||||
<Button newStyles secondary on:click={secondaryAction}
|
||||
<Button secondary on:click={secondaryAction}
|
||||
>{secondaryActionText}</Button
|
||||
>
|
||||
</div>
|
||||
|
|
|
@ -23,7 +23,6 @@ body {
|
|||
--grey-8: var(--spectrum-global-color-gray-800);
|
||||
--grey-9: var(--spectrum-global-color-gray-900);
|
||||
|
||||
font-family: var(--font-sans);
|
||||
color: var(--ink);
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
|
|
|
@ -105,32 +105,34 @@
|
|||
</MenuItem>
|
||||
<MenuItem
|
||||
on:click={() =>
|
||||
$goto(`../../portal/overview/${application}?tab=Access`)}
|
||||
$goto(`../../portal/overview/${application}/access`)}
|
||||
>
|
||||
Access
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
on:click={() =>
|
||||
$goto(
|
||||
`../../portal/overview/${application}?tab=${encodeURIComponent(
|
||||
"Automation History"
|
||||
)}`
|
||||
)}
|
||||
$goto(`../../portal/overview/${application}/automation-history`)}
|
||||
>
|
||||
Automation history
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
on:click={() =>
|
||||
$goto(`../../portal/overview/${application}?tab=Backups`)}
|
||||
$goto(`../../portal/overview/${application}/backups`)}
|
||||
>
|
||||
Backups
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem
|
||||
on:click={() =>
|
||||
$goto(`../../portal/overview/${application}?tab=Settings`)}
|
||||
$goto(`../../portal/overview/${application}/name-and-url`)}
|
||||
>
|
||||
Settings
|
||||
Name and URL
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
on:click={() =>
|
||||
$goto(`../../portal/overview/${application}/version`)}
|
||||
>
|
||||
Version
|
||||
</MenuItem>
|
||||
</ActionMenu>
|
||||
<Heading size="XS">{$store.name || "App"}</Heading>
|
||||
|
|
|
@ -176,7 +176,6 @@
|
|||
const addComponent = async component => {
|
||||
try {
|
||||
await store.actions.components.create(component)
|
||||
$goto("../")
|
||||
} catch (error) {
|
||||
notifications.error(error || "Error creating component")
|
||||
}
|
||||
|
@ -263,6 +262,7 @@
|
|||
orderMap[component.component]}
|
||||
on:click={() => addComponent(component.component)}
|
||||
on:mouseover={() => (selectedIndex = null)}
|
||||
on:focus
|
||||
>
|
||||
<Icon name={component.icon} />
|
||||
<Body size="XS">{component.name}</Body>
|
||||
|
|
|
@ -20,6 +20,7 @@
|
|||
class="container"
|
||||
on:mouseover={() => (showTooltip = true)}
|
||||
on:mouseleave={() => (showTooltip = false)}
|
||||
on:focus
|
||||
style="--color: {color};"
|
||||
>
|
||||
<StatusLight square {color} />
|
||||
|
|
|
@ -172,7 +172,7 @@
|
|||
{bindings}
|
||||
/>
|
||||
{/each}
|
||||
<Button secondary newStyles on:click={() => $goto("../components")}>
|
||||
<Button secondary on:click={() => $goto("../components")}>
|
||||
View components
|
||||
</Button>
|
||||
</Layout>
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
<div class="container">
|
||||
<Slider min={0} max={3} step={1} value={index} on:change={onChange} />
|
||||
<div class="button" style="--radius: {customTheme.buttonBorderRadius};">
|
||||
<Button primary newStyles>Button</Button>
|
||||
<Button primary>Button</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue