mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
4 years ago
208 changed files with 8428 additions and 5699 deletions
@ -1,27 +0,0 @@ |
|||
const { |
|||
isMultiTenant, |
|||
updateTenantId, |
|||
isTenantIdSet, |
|||
DEFAULT_TENANT_ID, |
|||
updateAppId, |
|||
} = require("../tenancy") |
|||
const ContextFactory = require("../context/FunctionContext") |
|||
const { getTenantIDFromAppID } = require("../db/utils") |
|||
|
|||
module.exports = () => { |
|||
return ContextFactory.getMiddleware(ctx => { |
|||
// if not in multi-tenancy mode make sure its default and exit
|
|||
if (!isMultiTenant()) { |
|||
updateTenantId(DEFAULT_TENANT_ID) |
|||
return |
|||
} |
|||
// if tenant ID already set no need to continue
|
|||
if (isTenantIdSet()) { |
|||
return |
|||
} |
|||
const appId = ctx.appId ? ctx.appId : ctx.user ? ctx.user.appId : null |
|||
const tenantId = getTenantIDFromAppID(appId) || DEFAULT_TENANT_ID |
|||
updateTenantId(tenantId) |
|||
updateAppId(appId) |
|||
}) |
|||
} |
|||
File diff suppressed because it is too large
@ -1,133 +1,133 @@ |
|||
import filterTests from "../support/filterTests" |
|||
|
|||
filterTests(['all'], () => { |
|||
context("Rename an App", () => { |
|||
beforeEach(() => { |
|||
cy.login() |
|||
cy.createTestApp() |
|||
}) |
|||
context("Rename an App", () => { |
|||
beforeEach(() => { |
|||
cy.login() |
|||
cy.createTestApp() |
|||
}) |
|||
|
|||
it("should rename an unpublished application", () => { |
|||
const appName = "Cypress Tests" |
|||
const appRename = "Cypress Renamed" |
|||
// Rename app, Search for app, Confirm name was changed
|
|||
cy.get(".home-logo").click() |
|||
renameApp(appName, appRename) |
|||
cy.reload() |
|||
cy.wait(1000) |
|||
cy.searchForApplication(appRename) |
|||
cy.get(".appTable").find(".title").should("have.length", 1) |
|||
// Set app name back to Cypress Tests
|
|||
cy.reload() |
|||
cy.wait(1000) |
|||
renameApp(appRename, appName) |
|||
const appName = "Cypress Tests" |
|||
const appRename = "Cypress Renamed" |
|||
// Rename app, Search for app, Confirm name was changed
|
|||
cy.get(".home-logo").click() |
|||
renameApp(appName, appRename) |
|||
cy.reload() |
|||
cy.wait(1000) |
|||
cy.get(".appTable").find(".title").should("have.length", 1) |
|||
cy.applicationInAppTable(appRename) |
|||
// Set app name back to Cypress Tests
|
|||
cy.reload() |
|||
cy.wait(1000) |
|||
renameApp(appRename, appName) |
|||
}) |
|||
|
|||
|
|||
xit("Should rename a published application", () => { |
|||
// It is not possible to rename a published application
|
|||
const appName = "Cypress Tests" |
|||
const appRename = "Cypress Renamed" |
|||
// Publish the app
|
|||
cy.get(".toprightnav") |
|||
cy.get(".spectrum-Button").contains("Publish").click({force: true}) |
|||
cy.get(".spectrum-Dialog-grid") |
|||
.within(() => { |
|||
// Click publish again within the modal
|
|||
cy.get(".spectrum-Button").contains("Publish").click({force: true}) |
|||
}) |
|||
// Rename app, Search for app, Confirm name was changed
|
|||
cy.get(".home-logo").click() |
|||
renameApp(appName, appRename, true) |
|||
cy.searchForApplication(appRename) |
|||
cy.get(".appTable").find(".wrapper").should("have.length", 1) |
|||
// It is not possible to rename a published application
|
|||
const appName = "Cypress Tests" |
|||
const appRename = "Cypress Renamed" |
|||
// Publish the app
|
|||
cy.get(".toprightnav") |
|||
cy.get(".spectrum-Button").contains("Publish").click({ force: true }) |
|||
cy.get(".spectrum-Dialog-grid") |
|||
.within(() => { |
|||
// Click publish again within the modal
|
|||
cy.get(".spectrum-Button").contains("Publish").click({ force: true }) |
|||
}) |
|||
// Rename app, Search for app, Confirm name was changed
|
|||
cy.get(".home-logo").click() |
|||
renameApp(appName, appRename, true) |
|||
cy.get(".appTable").find(".wrapper").should("have.length", 1) |
|||
cy.applicationInAppTable(appRename) |
|||
}) |
|||
|
|||
it("Should try to rename an application to have no name", () => { |
|||
const appName = "Cypress Tests" |
|||
cy.get(".home-logo").click() |
|||
renameApp(appName, " ", false, true) |
|||
cy.wait(500) |
|||
// Close modal and confirm name has not been changed
|
|||
cy.get(".spectrum-Dialog-grid").contains("Cancel").click() |
|||
cy.reload() |
|||
cy.wait(1000) |
|||
cy.searchForApplication(appName) |
|||
cy.get(".appTable").find(".title").should("have.length", 1) |
|||
const appName = "Cypress Tests" |
|||
cy.get(".home-logo").click() |
|||
renameApp(appName, " ", false, true) |
|||
cy.wait(500) |
|||
// Close modal and confirm name has not been changed
|
|||
cy.get(".spectrum-Dialog-grid").contains("Cancel").click() |
|||
cy.reload() |
|||
cy.wait(1000) |
|||
cy.applicationInAppTable(appName) |
|||
cy.get(".appTable").find(".title").should("have.length", 1) |
|||
|
|||
}) |
|||
|
|||
xit("Should create two applications with the same name", () => { |
|||
// It is not possible to have applications with the same name
|
|||
const appName = "Cypress Tests" |
|||
cy.visit(`${Cypress.config().baseUrl}/builder`) |
|||
cy.wait(500) |
|||
cy.get(".spectrum-Button").contains("Create app").click({force: true}) |
|||
cy.contains(/Start from scratch/).click() |
|||
cy.get(".spectrum-Modal") |
|||
// It is not possible to have applications with the same name
|
|||
const appName = "Cypress Tests" |
|||
cy.visit(`${Cypress.config().baseUrl}/builder`) |
|||
cy.wait(500) |
|||
cy.get(".spectrum-Button").contains("Create app").click({ force: true }) |
|||
cy.contains(/Start from scratch/).click() |
|||
cy.get(".spectrum-Modal") |
|||
.within(() => { |
|||
cy.get("input").eq(0).type(appName) |
|||
cy.get(".spectrum-ButtonGroup").contains("Create app").click({force: true}) |
|||
cy.get(".error").should("have.text", "Another app with the same name already exists") |
|||
cy.get("input").eq(0).type(appName) |
|||
cy.get(".spectrum-ButtonGroup").contains("Create app").click({ force: true }) |
|||
cy.get(".error").should("have.text", "Another app with the same name already exists") |
|||
}) |
|||
}) |
|||
|
|||
it("should validate application names", () => { |
|||
// App name must be letters, numbers and spaces only
|
|||
// This test checks numbers and special characters specifically
|
|||
const appName = "Cypress Tests" |
|||
const numberName = 12345 |
|||
const specialCharName = "£$%^" |
|||
cy.get(".home-logo").click() |
|||
renameApp(appName, numberName) |
|||
cy.reload() |
|||
cy.wait(1000) |
|||
cy.searchForApplication(numberName) |
|||
cy.get(".appTable").find(".title").should("have.length", 1) |
|||
cy.reload() |
|||
cy.wait(1000) |
|||
renameApp(numberName, specialCharName) |
|||
cy.get(".error").should("have.text", "App name must be letters, numbers and spaces only") |
|||
// Set app name back to Cypress Tests
|
|||
cy.reload() |
|||
cy.wait(1000) |
|||
renameApp(numberName, appName) |
|||
// App name must be letters, numbers and spaces only
|
|||
// This test checks numbers and special characters specifically
|
|||
const appName = "Cypress Tests" |
|||
const numberName = 12345 |
|||
const specialCharName = "£$%^" |
|||
cy.get(".home-logo").click() |
|||
renameApp(appName, numberName) |
|||
cy.reload() |
|||
cy.wait(1000) |
|||
cy.applicationInAppTable(numberName) |
|||
cy.get(".appTable").find(".title").should("have.length", 1) |
|||
cy.reload() |
|||
cy.wait(1000) |
|||
renameApp(numberName, specialCharName) |
|||
cy.get(".error").should("have.text", "App name must be letters, numbers and spaces only") |
|||
// Set app name back to Cypress Tests
|
|||
cy.reload() |
|||
cy.wait(1000) |
|||
renameApp(numberName, appName) |
|||
}) |
|||
|
|||
const renameApp = (originalName, changedName, published, noName) => { |
|||
cy.searchForApplication(originalName) |
|||
cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`) |
|||
|
|||
const renameApp = (originalName, changedName, published, noName) => { |
|||
cy.applicationInAppTable(originalName) |
|||
cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`) |
|||
.its("body") |
|||
.then(val => { |
|||
if (val.length > 0) { |
|||
cy.get(".appTable") |
|||
.within(() => { |
|||
cy.get(".spectrum-Icon").eq(1).click() |
|||
}) |
|||
// Check for when an app is published
|
|||
if (published == true){ |
|||
// Should not have Edit as option, will unpublish app
|
|||
cy.should("not.have.value", "Edit") |
|||
cy.get(".spectrum-Menu").contains("Unpublish").click() |
|||
cy.get(".spectrum-Dialog-grid").contains("Unpublish app").click() |
|||
cy.get(".appTable > :nth-child(5) > :nth-child(2) > .spectrum-Icon").click() |
|||
if (val.length > 0) { |
|||
cy.get(".appTable") |
|||
.within(() => { |
|||
cy.get(".spectrum-Icon").eq(1).click() |
|||
}) |
|||
// Check for when an app is published
|
|||
if (published == true) { |
|||
// Should not have Edit as option, will unpublish app
|
|||
cy.should("not.have.value", "Edit") |
|||
cy.get(".spectrum-Menu").contains("Unpublish").click() |
|||
cy.get(".spectrum-Dialog-grid").contains("Unpublish app").click() |
|||
cy.get(".appTable > :nth-child(5) > :nth-child(2) > .spectrum-Icon").click() |
|||
} |
|||
cy.contains("Edit").click() |
|||
cy.get(".spectrum-Modal") |
|||
.within(() => { |
|||
if (noName == true) { |
|||
cy.get("input").clear() |
|||
cy.get(".spectrum-Dialog-grid").click() |
|||
.contains("App name must be letters, numbers and spaces only") |
|||
return cy |
|||
} |
|||
cy.contains("Edit").click() |
|||
cy.get(".spectrum-Modal") |
|||
.within(() => { |
|||
if (noName == true){ |
|||
cy.get("input").clear() |
|||
cy.get(".spectrum-Dialog-grid").click() |
|||
.contains("App name must be letters, numbers and spaces only") |
|||
return cy |
|||
} |
|||
cy.get("input").clear() |
|||
cy.get("input").eq(0).type(changedName).should("have.value", changedName).blur() |
|||
cy.get(".spectrum-ButtonGroup").contains("Save").click({force: true}) |
|||
cy.wait(500) |
|||
}) |
|||
} |
|||
cy.get("input").clear() |
|||
cy.get("input").eq(0).type(changedName).should("have.value", changedName).blur() |
|||
cy.get(".spectrum-ButtonGroup").contains("Save").click({ force: true }) |
|||
cy.wait(500) |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
} |
|||
}) |
|||
}) |
|||
}) |
|||
|
|||
@ -0,0 +1,54 @@ |
|||
<script> |
|||
export let width = "100" |
|||
export let height = "100" |
|||
</script> |
|||
|
|||
<svg |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
xmlns:xlink="http://www.w3.org/1999/xlink" |
|||
viewBox="23 6 469 132" |
|||
{width} |
|||
{height} |
|||
> |
|||
<defs id="defs202"> |
|||
<linearGradient id="a" x1="-3.49%" x2="100.83%" y1="17.02%" y2="92.9%"> |
|||
<stop offset="0%" stop-color="#fff" stop-opacity=".1" id="stop192" /> |
|||
<stop offset="14%" stop-color="#fff" stop-opacity=".08" id="stop194" /> |
|||
<stop offset="61%" stop-color="#fff" stop-opacity=".02" id="stop196" /> |
|||
<stop offset="100%" stop-color="#fff" stop-opacity="0" id="stop198" /> |
|||
</linearGradient> |
|||
<path |
|||
id="b" |
|||
d="M106.687 35.2742c-.186-1.0977-.967-2-2.0244-2.338s-2.2148-.057-3.0002.73L86.2473 49.166l-12.12-23.1455c-.5133-.9786-1.525-1.5914-2.6273-1.5914s-2.114.6128-2.6273 1.5914l-6.6277 12.656L45.62 7.5726c-.603-1.1297-1.8588-1.746-3.118-1.5297s-2.2394 1.216-2.4335 2.4827L24 111.701l42.9727 24.1654c2.6985 1.5113 5.985 1.5113 8.6836 0L119 111.701l-12.313-76.427z" |
|||
/> |
|||
</defs> |
|||
<g id="g305" transform="matrix(2.9011579,0,0,2.9011579,43.533284,-135.93685)"> |
|||
<path |
|||
fill="#ffa000" |
|||
d="M 23.8266,111.7182 39.9588,8.4901 c 0.1972,-1.266 1.1818,-2.264 2.445,-2.4786 1.2632,-0.2146 2.522,0.4028 3.126,1.5327 L 62.2133,38.6615 68.8633,26 c 0.515,-0.979 1.5303,-1.592 2.6366,-1.592 1.1063,0 2.1215,0.613 2.6366,1.592 l 45.0227,85.718 H 23.8266 Z" |
|||
id="path204" |
|||
/> |
|||
<path |
|||
fill="#f57c00" |
|||
d="M 79.566,71.5074 62.2124,38.6472 23.8334,111.7187 Z" |
|||
id="path206" |
|||
/> |
|||
<path |
|||
fill="#ffca28" |
|||
d="m 119.1666,111.7187 -12.356,-76.4603 c -0.1867,-1.098 -0.9703,-2 -2.0315,-2.34 -1.0612,-0.34 -2.2226,-0.057 -3.0107,0.7302 l -77.935,78.069 43.1234,24.1834 c 2.708,1.512 6.006,1.512 8.714,0 l 43.4958,-24.1834 z" |
|||
id="path208" |
|||
/> |
|||
<path |
|||
fill="#ffffff" |
|||
fill-opacity="0.2" |
|||
d="m 106.8105,35.2584 c -0.1867,-1.098 -0.9703,-2 -2.0315,-2.34 -1.0612,-0.34 -2.2226,-0.057 -3.0107,0.7302 L 86.3,49.1562 74.1365,26 c -0.515,-0.979 -1.5303,-1.592 -2.6366,-1.592 -1.1063,0 -2.1215,0.613 -2.6366,1.592 L 62.2133,38.6615 45.529,7.5447 C 44.924,6.4145 43.6637,5.7981 42.399,6.0143 41.1343,6.2305 40.153,7.231 39.958,8.498 L 23.8333,111.7187 h -0.052 l 0.052,0.0596 0.4245,0.2085 77.488,-77.5775 c 0.7877,-0.7915 1.952,-1.076 3.016,-0.737 1.064,0.339 1.849,1.2445 2.0338,2.3457 l 12.2518,75.775 0.1192,-0.0745 -12.356,-76.4603 z M 23.9748,111.5772 39.9655,9.228 c 0.1948,-1.267 1.1784,-2.2675 2.442,-2.4837 1.2636,-0.2162 2.524,0.4 3.13,1.5304 L 62.22,39.392 68.87,26.7305 c 0.515,-0.979 1.5303,-1.592 2.6366,-1.592 1.1063,0 2.1215,0.613 2.6366,1.592 l 11.9167,22.664 -62.0858,62.1827 z" |
|||
id="path210" |
|||
/> |
|||
<path |
|||
fill="#a52714" |
|||
opacity="0.2" |
|||
d="m 75.6708,135.1722 c -2.708,1.512 -6.006,1.512 -8.714,0 l -43.0192,-24.1162 -0.1043,0.663 43.1234,24.176 c 2.708,1.512 6.006,1.512 8.714,0 l 43.4958,-24.176 -0.1117,-0.6852 -43.384,24.1387 z" |
|||
id="path212" |
|||
/> |
|||
</g> |
|||
</svg> |
|||
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,125 @@ |
|||
<script> |
|||
export let backgroundColour |
|||
export let imageSrc |
|||
export let name |
|||
export let icon |
|||
export let overlayEnabled = true |
|||
|
|||
let imageError = false |
|||
let imageLoaded = false |
|||
|
|||
const imageRenderError = () => { |
|||
imageError = true |
|||
} |
|||
|
|||
const imageLoadSuccess = () => { |
|||
imageLoaded = true |
|||
} |
|||
</script> |
|||
|
|||
<div class="template-card" style="background-color:{backgroundColour};"> |
|||
<div class="template-thumbnail card-body"> |
|||
<img |
|||
alt={name} |
|||
src={imageSrc} |
|||
on:error={imageRenderError} |
|||
on:load={imageLoadSuccess} |
|||
class={`${imageLoaded ? "loaded" : ""}`} |
|||
/> |
|||
<div style={`display:${imageError ? "block" : "none"}`}> |
|||
<svg |
|||
width="26px" |
|||
height="26px" |
|||
class="spectrum-Icon" |
|||
style="color: white" |
|||
focusable="false" |
|||
> |
|||
<use xlink:href="#spectrum-icon-18-{icon}" /> |
|||
</svg> |
|||
</div> |
|||
<div class={overlayEnabled ? "template-thumbnail-action-overlay" : ""}> |
|||
<slot /> |
|||
</div> |
|||
</div> |
|||
<div class="template-thumbnail-text"> |
|||
<div>{name}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.template-thumbnail { |
|||
position: relative; |
|||
} |
|||
|
|||
.template-card:hover .template-thumbnail-action-overlay { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.template-thumbnail-action-overlay { |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
width: 100%; |
|||
height: 70%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background-color: rgba(0, 0, 0, 0.7); |
|||
opacity: 0; |
|||
transition: opacity var(--spectrum-global-animation-duration-100) ease; |
|||
border-top-right-radius: inherit; |
|||
border-top-left-radius: inherit; |
|||
} |
|||
|
|||
.template-thumbnail-text { |
|||
position: absolute; |
|||
bottom: 0px; |
|||
display: flex; |
|||
align-items: center; |
|||
height: 30%; |
|||
width: 100%; |
|||
color: var( |
|||
--spectrum-heading-xs-text-color, |
|||
var(--spectrum-alias-heading-text-color) |
|||
); |
|||
background-color: var(--spectrum-global-color-gray-50); |
|||
} |
|||
|
|||
.template-thumbnail-text > div { |
|||
padding-left: 1rem; |
|||
padding-right: 1rem; |
|||
} |
|||
|
|||
.template-card { |
|||
position: relative; |
|||
display: flex; |
|||
border-radius: var(--border-radius-s); |
|||
border: 1px solid var(--spectrum-global-color-gray-300); |
|||
overflow: hidden; |
|||
min-height: 200px; |
|||
} |
|||
|
|||
.template-card > * { |
|||
width: 100%; |
|||
} |
|||
|
|||
.template-card img.loaded { |
|||
display: block; |
|||
} |
|||
|
|||
.template-card img { |
|||
display: none; |
|||
max-width: 100%; |
|||
border-radius: var(--border-radius-s) 0px var(--border-radius-s) 0px; |
|||
} |
|||
|
|||
.template-card:hover { |
|||
background: var(--spectrum-alias-background-color-tertiary); |
|||
} |
|||
|
|||
.card-body { |
|||
padding-left: 1rem; |
|||
padding-top: 1rem; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,152 @@ |
|||
<script> |
|||
import { |
|||
Layout, |
|||
Detail, |
|||
Heading, |
|||
Button, |
|||
Modal, |
|||
ActionGroup, |
|||
ActionButton, |
|||
} from "@budibase/bbui" |
|||
import TemplateCard from "components/common/TemplateCard.svelte" |
|||
import CreateAppModal from "components/start/CreateAppModal.svelte" |
|||
|
|||
export let templates |
|||
|
|||
let selectedTemplateCategory |
|||
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 |
|||
} |
|||
|
|||
acc[template.category] = !acc[template.category] |
|||
? [] |
|||
: acc[template.category] |
|||
acc[template.category].push(template) |
|||
|
|||
return acc |
|||
}, {}) |
|||
return grouped |
|||
} |
|||
|
|||
$: filteredTemplates = groupTemplatesByCategory( |
|||
templates, |
|||
selectedTemplateCategory |
|||
) |
|||
|
|||
$: filteredTemplateCategories = filteredTemplates |
|||
? Object.keys(filteredTemplates).sort() |
|||
: [] |
|||
|
|||
$: templateCategories = templates |
|||
? Object.keys(groupTemplatesByCategory(templates)).sort() |
|||
: [] |
|||
|
|||
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} |
|||
> |
|||
<Button |
|||
cta |
|||
on:click={() => { |
|||
template = templateEntry |
|||
creationModal.show() |
|||
}} |
|||
> |
|||
Use template |
|||
</Button> |
|||
<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> |
|||
{/each} |
|||
</Layout> |
|||
</div> |
|||
|
|||
<Modal |
|||
bind:this={creationModal} |
|||
padding={false} |
|||
width="600px" |
|||
on:hide={stopAppCreation} |
|||
> |
|||
<CreateAppModal {template} /> |
|||
</Modal> |
|||
|
|||
<style> |
|||
.template-grid { |
|||
padding-top: 10px; |
|||
display: grid; |
|||
grid-gap: var(--spacing-xl); |
|||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); |
|||
} |
|||
|
|||
a:hover.spectrum-Button.spectrum-Button--secondary.overlay-preview-link { |
|||
background-color: #c8c8c8; |
|||
border-color: #c8c8c8; |
|||
color: #505050; |
|||
} |
|||
|
|||
a.spectrum-Button--secondary.overlay-preview-link { |
|||
margin-top: 20px; |
|||
border-color: #c8c8c8; |
|||
color: #c8c8c8; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,82 @@ |
|||
<script> |
|||
import { goto } from "@roxi/routify" |
|||
import { store } from "builderStore" |
|||
import ConfirmDialog from "components/common/ConfirmDialog.svelte" |
|||
import { |
|||
ActionMenu, |
|||
MenuItem, |
|||
Icon, |
|||
Layout, |
|||
notifications, |
|||
} from "@budibase/bbui" |
|||
import { get } from "svelte/store" |
|||
|
|||
export let path |
|||
export let screens |
|||
|
|||
let confirmDeleteDialog |
|||
|
|||
const deleteScreens = async () => { |
|||
if (!screens?.length) { |
|||
return |
|||
} |
|||
try { |
|||
for (let { id } of screens) { |
|||
// We have to fetch the screen to be deleted immediately before deleting |
|||
// as otherwise we're very likely to 409 |
|||
const screen = get(store).screens.find(screen => screen._id === id) |
|||
if (!screen) { |
|||
continue |
|||
} |
|||
await store.actions.screens.delete(screen) |
|||
} |
|||
notifications.success("Screens deleted successfully") |
|||
$goto("../") |
|||
} catch (error) { |
|||
notifications.error("Error deleting screens") |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<ActionMenu> |
|||
<div slot="control" class="icon"> |
|||
<Icon size="S" hoverable name="MoreSmallList" /> |
|||
</div> |
|||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}> |
|||
Delete all screens |
|||
</MenuItem> |
|||
</ActionMenu> |
|||
|
|||
<ConfirmDialog |
|||
bind:this={confirmDeleteDialog} |
|||
title="Confirm Deletion" |
|||
okText="Delete screens" |
|||
onOk={deleteScreens} |
|||
> |
|||
<Layout noPadding gap="S"> |
|||
<div> |
|||
Are you sure you want to delete all screens under the <b>{path}</b> route? |
|||
</div> |
|||
<div>The following screens will be deleted:</div> |
|||
<div class="to-delete"> |
|||
{#each screens as screen} |
|||
<div>{screen.route}</div> |
|||
{/each} |
|||
</div> |
|||
</Layout> |
|||
</ConfirmDialog> |
|||
|
|||
<style> |
|||
.to-delete { |
|||
font-weight: bold; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: flex-start; |
|||
padding-left: var(--spacing-xl); |
|||
} |
|||
.icon { |
|||
display: grid; |
|||
place-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,78 @@ |
|||
<script> |
|||
import { Select, Body } from "@budibase/bbui" |
|||
import { onMount } from "svelte" |
|||
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte" |
|||
export let parameters |
|||
export let bindings |
|||
|
|||
const typeOptions = [ |
|||
{ |
|||
label: "Continue if", |
|||
value: "continue", |
|||
}, |
|||
{ |
|||
label: "Stop if", |
|||
value: "stop", |
|||
}, |
|||
] |
|||
const operatorOptions = [ |
|||
{ |
|||
label: "Equals", |
|||
value: "equal", |
|||
}, |
|||
{ |
|||
label: "Not equals", |
|||
value: "notEqual", |
|||
}, |
|||
] |
|||
|
|||
onMount(() => { |
|||
if (!parameters.type) { |
|||
parameters.type = "continue" |
|||
} |
|||
if (!parameters.operator) { |
|||
parameters.operator = "equal" |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<div class="root"> |
|||
<Body size="S"> |
|||
Configure a condition to be evaluated which can stop further actions from |
|||
being executed. |
|||
</Body> |
|||
<Select |
|||
bind:value={parameters.type} |
|||
options={typeOptions} |
|||
placeholder={null} |
|||
/> |
|||
<DrawerBindableInput |
|||
placeholder="Value" |
|||
value={parameters.value} |
|||
on:change={e => (parameters.value = e.detail)} |
|||
{bindings} |
|||
/> |
|||
<Select |
|||
bind:value={parameters.operator} |
|||
options={operatorOptions} |
|||
placeholder={null} |
|||
/> |
|||
<DrawerBindableInput |
|||
placeholder="Reference value" |
|||
bind:value={parameters.referenceValue} |
|||
on:change={e => (parameters.referenceValue = e.detail)} |
|||
{bindings} |
|||
/> |
|||
</div> |
|||
|
|||
<style> |
|||
.root { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: var(--spacing-l); |
|||
justify-content: flex-start; |
|||
align-items: stretch; |
|||
max-width: 400px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -1,171 +0,0 @@ |
|||
<script> |
|||
import analytics from "analytics" |
|||
import { createEventDispatcher } from "svelte" |
|||
import { fade, fly } from "svelte/transition" |
|||
import { |
|||
ActionButton, |
|||
ClearButton, |
|||
RadioGroup, |
|||
TextArea, |
|||
ButtonGroup, |
|||
Button, |
|||
Heading, |
|||
Detail, |
|||
Divider, |
|||
Layout, |
|||
notifications, |
|||
} from "@budibase/bbui" |
|||
import { auth } from "stores/portal" |
|||
|
|||
let step = 0 |
|||
let ratings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] |
|||
let options = [ |
|||
"Importing / managing data", |
|||
"Designing", |
|||
"Automations", |
|||
"Managing users / groups", |
|||
"Deployment / hosting", |
|||
"Documentation", |
|||
] |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
|
|||
// Data to send off |
|||
let rating |
|||
let improvements = "" |
|||
let comment = "" |
|||
|
|||
function selectNumber(n) { |
|||
rating = n |
|||
step = 1 |
|||
} |
|||
|
|||
function submitFeedback() { |
|||
analytics.submitFeedback({ |
|||
rating, |
|||
improvements, |
|||
comment, |
|||
}) |
|||
try { |
|||
auth.updateSelf({ |
|||
flags: { |
|||
feedbackSubmitted: true, |
|||
}, |
|||
}) |
|||
} catch (error) { |
|||
notifications.error("Error updating user") |
|||
} |
|||
dispatch("complete") |
|||
} |
|||
|
|||
function cancelFeedback() { |
|||
try { |
|||
auth.updateSelf({ |
|||
flags: { |
|||
feedbackSubmitted: true, |
|||
}, |
|||
}) |
|||
} catch (error) { |
|||
notifications.error("Error updating user") |
|||
} |
|||
dispatch("complete") |
|||
} |
|||
</script> |
|||
|
|||
<div |
|||
class="position" |
|||
in:fade={{ duration: 200 }} |
|||
out:fade|local={{ duration: 200 }} |
|||
> |
|||
<div |
|||
class="feedback-frame" |
|||
in:fly={{ y: 30, duration: 200 }} |
|||
out:fly|local={{ y: 30, duration: 200 }} |
|||
> |
|||
<div class="close"> |
|||
<ClearButton on:click={cancelFeedback} /> |
|||
</div> |
|||
<Layout gap="XS"> |
|||
{#if step === 0} |
|||
<Heading size="XS" |
|||
>How likely are you to recommend Budibase to a colleague?</Heading |
|||
> |
|||
<Divider /> |
|||
<div class="ratings"> |
|||
{#each ratings as number} |
|||
<ActionButton |
|||
size="L" |
|||
emphasized |
|||
selected={number === rating} |
|||
on:click={() => selectNumber(number)} |
|||
> |
|||
{number} |
|||
</ActionButton> |
|||
{/each} |
|||
</div> |
|||
<div class="footer"> |
|||
<Detail size="S">NOT LIKELY</Detail> |
|||
<Detail size="S">EXTREMELY LIKELY</Detail> |
|||
</div> |
|||
{:else if step === 1} |
|||
<Heading size="XS">What could be improved most in Budibase?</Heading> |
|||
<Divider /> |
|||
<RadioGroup bind:value={improvements} {options} /> |
|||
<div class="footer"> |
|||
<Detail size="S">STEP 2 OF 3</Detail> |
|||
<ButtonGroup> |
|||
<Button secondary on:click={() => (step -= 1)}>Previous</Button> |
|||
<Button primary on:click={() => (step += 1)}>Next</Button> |
|||
</ButtonGroup> |
|||
</div> |
|||
{:else} |
|||
<Heading size="XS">How can we improve your experience?</Heading> |
|||
<Divider /> |
|||
<TextArea bind:value={comment} placeholder="Add comments" /> |
|||
<div class="footer"> |
|||
<Detail size="S">STEP 3 OF 3</Detail> |
|||
<ButtonGroup> |
|||
<Button secondary on:click={() => (step -= 1)}>Previous</Button> |
|||
<Button cta on:click={submitFeedback}>Complete</Button> |
|||
</ButtonGroup> |
|||
</div> |
|||
{/if} |
|||
</Layout> |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.feedback-frame :global(textarea) { |
|||
min-height: 180px !important; |
|||
} |
|||
|
|||
.position { |
|||
position: absolute; |
|||
right: var(--spacing-l); |
|||
bottom: calc(5 * var(--spacing-xl)); |
|||
} |
|||
.feedback-frame { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
min-width: 510px; |
|||
background: var(--background); |
|||
border-radius: var(--spectrum-global-dimension-size-50); |
|||
border: 2px solid var(--spectrum-global-color-blue-400); |
|||
padding: var(--spacing-xl); |
|||
} |
|||
.ratings { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.close { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
} |
|||
.footer { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue