forked from tsai/budibase
Andrew Kingston
5 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" |
import filterTests from "../support/filterTests" |
||||
|
|
||||
filterTests(['all'], () => { |
filterTests(['all'], () => { |
||||
context("Rename an App", () => { |
context("Rename an App", () => { |
||||
beforeEach(() => { |
beforeEach(() => { |
||||
cy.login() |
cy.login() |
||||
cy.createTestApp() |
cy.createTestApp() |
||||
}) |
}) |
||||
|
|
||||
it("should rename an unpublished application", () => { |
it("should rename an unpublished application", () => { |
||||
const appName = "Cypress Tests" |
const appName = "Cypress Tests" |
||||
const appRename = "Cypress Renamed" |
const appRename = "Cypress Renamed" |
||||
// Rename app, Search for app, Confirm name was changed
|
// Rename app, Search for app, Confirm name was changed
|
||||
cy.get(".home-logo").click() |
cy.get(".home-logo").click() |
||||
renameApp(appName, appRename) |
renameApp(appName, appRename) |
||||
cy.reload() |
cy.reload() |
||||
cy.wait(1000) |
cy.wait(1000) |
||||
cy.searchForApplication(appRename) |
cy.get(".appTable").find(".title").should("have.length", 1) |
||||
cy.get(".appTable").find(".title").should("have.length", 1) |
cy.applicationInAppTable(appRename) |
||||
// Set app name back to Cypress Tests
|
// Set app name back to Cypress Tests
|
||||
cy.reload() |
cy.reload() |
||||
cy.wait(1000) |
cy.wait(1000) |
||||
renameApp(appRename, appName) |
renameApp(appRename, appName) |
||||
}) |
}) |
||||
|
|
||||
xit("Should rename a published application", () => { |
xit("Should rename a published application", () => { |
||||
// It is not possible to rename a published application
|
// It is not possible to rename a published application
|
||||
const appName = "Cypress Tests" |
const appName = "Cypress Tests" |
||||
const appRename = "Cypress Renamed" |
const appRename = "Cypress Renamed" |
||||
// Publish the app
|
// Publish the app
|
||||
cy.get(".toprightnav") |
cy.get(".toprightnav") |
||||
cy.get(".spectrum-Button").contains("Publish").click({force: true}) |
cy.get(".spectrum-Button").contains("Publish").click({ force: true }) |
||||
cy.get(".spectrum-Dialog-grid") |
cy.get(".spectrum-Dialog-grid") |
||||
.within(() => { |
.within(() => { |
||||
// Click publish again within the modal
|
// Click publish again within the modal
|
||||
cy.get(".spectrum-Button").contains("Publish").click({force: true}) |
cy.get(".spectrum-Button").contains("Publish").click({ force: true }) |
||||
}) |
}) |
||||
// Rename app, Search for app, Confirm name was changed
|
// Rename app, Search for app, Confirm name was changed
|
||||
cy.get(".home-logo").click() |
cy.get(".home-logo").click() |
||||
renameApp(appName, appRename, true) |
renameApp(appName, appRename, true) |
||||
cy.searchForApplication(appRename) |
cy.get(".appTable").find(".wrapper").should("have.length", 1) |
||||
cy.get(".appTable").find(".wrapper").should("have.length", 1) |
cy.applicationInAppTable(appRename) |
||||
}) |
}) |
||||
|
|
||||
it("Should try to rename an application to have no name", () => { |
it("Should try to rename an application to have no name", () => { |
||||
const appName = "Cypress Tests" |
const appName = "Cypress Tests" |
||||
cy.get(".home-logo").click() |
cy.get(".home-logo").click() |
||||
renameApp(appName, " ", false, true) |
renameApp(appName, " ", false, true) |
||||
cy.wait(500) |
cy.wait(500) |
||||
// Close modal and confirm name has not been changed
|
// Close modal and confirm name has not been changed
|
||||
cy.get(".spectrum-Dialog-grid").contains("Cancel").click() |
cy.get(".spectrum-Dialog-grid").contains("Cancel").click() |
||||
cy.reload() |
cy.reload() |
||||
cy.wait(1000) |
cy.wait(1000) |
||||
cy.searchForApplication(appName) |
cy.applicationInAppTable(appName) |
||||
cy.get(".appTable").find(".title").should("have.length", 1) |
cy.get(".appTable").find(".title").should("have.length", 1) |
||||
|
|
||||
}) |
}) |
||||
|
|
||||
xit("Should create two applications with the same name", () => { |
xit("Should create two applications with the same name", () => { |
||||
// It is not possible to have applications with the same name
|
// It is not possible to have applications with the same name
|
||||
const appName = "Cypress Tests" |
const appName = "Cypress Tests" |
||||
cy.visit(`${Cypress.config().baseUrl}/builder`) |
cy.visit(`${Cypress.config().baseUrl}/builder`) |
||||
cy.wait(500) |
cy.wait(500) |
||||
cy.get(".spectrum-Button").contains("Create app").click({force: true}) |
cy.get(".spectrum-Button").contains("Create app").click({ force: true }) |
||||
cy.contains(/Start from scratch/).click() |
cy.contains(/Start from scratch/).click() |
||||
cy.get(".spectrum-Modal") |
cy.get(".spectrum-Modal") |
||||
.within(() => { |
.within(() => { |
||||
cy.get("input").eq(0).type(appName) |
cy.get("input").eq(0).type(appName) |
||||
cy.get(".spectrum-ButtonGroup").contains("Create app").click({force: true}) |
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(".error").should("have.text", "Another app with the same name already exists") |
||||
}) |
}) |
||||
}) |
}) |
||||
|
|
||||
it("should validate application names", () => { |
it("should validate application names", () => { |
||||
// App name must be letters, numbers and spaces only
|
// App name must be letters, numbers and spaces only
|
||||
// This test checks numbers and special characters specifically
|
// This test checks numbers and special characters specifically
|
||||
const appName = "Cypress Tests" |
const appName = "Cypress Tests" |
||||
const numberName = 12345 |
const numberName = 12345 |
||||
const specialCharName = "£$%^" |
const specialCharName = "£$%^" |
||||
cy.get(".home-logo").click() |
cy.get(".home-logo").click() |
||||
renameApp(appName, numberName) |
renameApp(appName, numberName) |
||||
cy.reload() |
cy.reload() |
||||
cy.wait(1000) |
cy.wait(1000) |
||||
cy.searchForApplication(numberName) |
cy.applicationInAppTable(numberName) |
||||
cy.get(".appTable").find(".title").should("have.length", 1) |
cy.get(".appTable").find(".title").should("have.length", 1) |
||||
cy.reload() |
cy.reload() |
||||
cy.wait(1000) |
cy.wait(1000) |
||||
renameApp(numberName, specialCharName) |
renameApp(numberName, specialCharName) |
||||
cy.get(".error").should("have.text", "App name must be letters, numbers and spaces only") |
cy.get(".error").should("have.text", "App name must be letters, numbers and spaces only") |
||||
// Set app name back to Cypress Tests
|
// Set app name back to Cypress Tests
|
||||
cy.reload() |
cy.reload() |
||||
cy.wait(1000) |
cy.wait(1000) |
||||
renameApp(numberName, appName) |
renameApp(numberName, appName) |
||||
}) |
}) |
||||
|
|
||||
const renameApp = (originalName, changedName, published, noName) => { |
const renameApp = (originalName, changedName, published, noName) => { |
||||
cy.searchForApplication(originalName) |
cy.applicationInAppTable(originalName) |
||||
cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`) |
cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`) |
||||
.its("body") |
.its("body") |
||||
.then(val => { |
.then(val => { |
||||
if (val.length > 0) { |
if (val.length > 0) { |
||||
cy.get(".appTable") |
cy.get(".appTable") |
||||
.within(() => { |
.within(() => { |
||||
cy.get(".spectrum-Icon").eq(1).click() |
cy.get(".spectrum-Icon").eq(1).click() |
||||
}) |
}) |
||||
// Check for when an app is published
|
// Check for when an app is published
|
||||
if (published == true){ |
if (published == true) { |
||||
// Should not have Edit as option, will unpublish app
|
// Should not have Edit as option, will unpublish app
|
||||
cy.should("not.have.value", "Edit") |
cy.should("not.have.value", "Edit") |
||||
cy.get(".spectrum-Menu").contains("Unpublish").click() |
cy.get(".spectrum-Menu").contains("Unpublish").click() |
||||
cy.get(".spectrum-Dialog-grid").contains("Unpublish app").click() |
cy.get(".spectrum-Dialog-grid").contains("Unpublish app").click() |
||||
cy.get(".appTable > :nth-child(5) > :nth-child(2) > .spectrum-Icon").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("input").clear() |
||||
cy.get(".spectrum-Modal") |
cy.get("input").eq(0).type(changedName).should("have.value", changedName).blur() |
||||
.within(() => { |
cy.get(".spectrum-ButtonGroup").contains("Save").click({ force: true }) |
||||
if (noName == true){ |
cy.wait(500) |
||||
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) |
|
||||
}) |
|
||||
} |
|
||||
}) |
}) |
||||
|
|
||||
} |
} |
||||
}) |
}) |
||||
}) |
}) |
||||
|
|||||
@ -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