Use overlay side panel and update table block side panel heading
This commit is contained in:
Andrew Kingston
parent
c58067a589
commit
b71b5704da
|
|
@ -4476,7 +4476,7 @@
|
|||
"Ascending",
|
||||
"Descending"
|
||||
],
|
||||
"defaultValue": "Descending"
|
||||
"defaultValue": "Ascending"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
import { getContext, setContext } from "svelte"
|
||||
import { writable } from "svelte/store"
|
||||
import { Heading, Icon } from "@budibase/bbui"
|
||||
import { Heading, Icon, clickOutside, Checkbox } from "@budibase/bbui"
|
||||
import { FieldTypes } from "constants"
|
||||
import active from "svelte-spa-router/active"
|
||||
import { RoleUtils } from "@budibase/frontend-core"
|
||||
|
|
@ -247,7 +247,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="side-panel-container" class:open={$sidePanelStore.open}>
|
||||
<div
|
||||
id="side-panel-container"
|
||||
class:open={$sidePanelStore.open}
|
||||
use:clickOutside={sidePanelStore.actions.close}
|
||||
>
|
||||
<div class="side-panel-header">
|
||||
<Icon
|
||||
color="var(--spectrum-global-color-gray-600)"
|
||||
|
|
@ -341,20 +345,23 @@
|
|||
}
|
||||
|
||||
#side-panel-container {
|
||||
flex: 0 0 400px;
|
||||
max-width: calc(100vw - 40px);
|
||||
background: var(--spectrum-global-color-gray-50);
|
||||
transition: margin-right 130ms ease-out;
|
||||
z-index: 3;
|
||||
padding: var(--spacing-xl);
|
||||
margin-right: -410px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
overflow-y: auto;
|
||||
border-left: 1px solid var(--spectrum-global-color-gray-300);
|
||||
transition: margin-right 260ms ease-out;
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
right: 0;
|
||||
margin-right: -400px;
|
||||
height: 100%;
|
||||
}
|
||||
#side-panel-container.open {
|
||||
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.1);
|
||||
margin-right: 0;
|
||||
}
|
||||
.side-panel-header {
|
||||
|
|
|
|||
|
|
@ -26,19 +26,22 @@
|
|||
export let titleButtonClickBehaviour
|
||||
export let onClickTitleButton
|
||||
|
||||
const { fetchDatasourceSchema } = getContext("sdk")
|
||||
const { fetchDatasourceSchema, API } = getContext("sdk")
|
||||
const stateKey = `ID_${generate()}`
|
||||
|
||||
let formId
|
||||
let dataProviderId
|
||||
let detailsFormBlockId
|
||||
let detailsSidePanelId
|
||||
let newRowSidePanelId
|
||||
let schema
|
||||
let primaryDisplay
|
||||
let schemaLoaded = false
|
||||
|
||||
$: fetchSchema(dataSource)
|
||||
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
|
||||
$: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
|
||||
$: editTitle = getEditTitle(detailsFormBlockId, primaryDisplay)
|
||||
$: normalFields = getNormalFields(schema)
|
||||
$: rowClickActions =
|
||||
clickBehaviour === "actions"
|
||||
|
|
@ -77,7 +80,11 @@
|
|||
|
||||
// Load the datasource schema so we can determine column types
|
||||
const fetchSchema = async dataSource => {
|
||||
if (dataSource) {
|
||||
if (dataSource?.type === "table") {
|
||||
const definition = await API.fetchTableDefinition(dataSource?.tableId)
|
||||
schema = definition.schema
|
||||
primaryDisplay = definition.primaryDisplay
|
||||
} else if (dataSource) {
|
||||
schema = await fetchDatasourceSchema(dataSource, {
|
||||
enrichRelationships: true,
|
||||
})
|
||||
|
|
@ -95,6 +102,14 @@
|
|||
})
|
||||
.map(entry => entry[0])
|
||||
}
|
||||
|
||||
const getEditTitle = (detailsFormBlockId, primaryDisplay) => {
|
||||
if (!primaryDisplay || !detailsFormBlockId) {
|
||||
return "Edit"
|
||||
}
|
||||
const prefix = safe(detailsFormBlockId + "-repeater")
|
||||
return `{{ ${prefix}.${safe(primaryDisplay)} }}`
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if schemaLoaded}
|
||||
|
|
@ -183,7 +198,7 @@
|
|||
props={{
|
||||
dataSource,
|
||||
filter: enrichedFilter,
|
||||
sortColumn,
|
||||
sortColumn: sortColumn || primaryDisplay,
|
||||
sortOrder,
|
||||
paginate,
|
||||
limit: rowCount,
|
||||
|
|
@ -216,6 +231,7 @@
|
|||
<BlockComponent
|
||||
name="Details form block"
|
||||
type="formblock"
|
||||
bind:id={detailsFormBlockId}
|
||||
props={{
|
||||
dataSource,
|
||||
showSaveButton: true,
|
||||
|
|
@ -223,7 +239,7 @@
|
|||
actionType: "Update",
|
||||
rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`,
|
||||
fields: normalFields,
|
||||
title: "Row Details",
|
||||
title: editTitle,
|
||||
labelPosition: "left",
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -6559,10 +6559,10 @@ typedarray@^0.0.6:
|
|||
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
|
||||
integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
|
||||
|
||||
typescript@4.5.5:
|
||||
version "4.5.5"
|
||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
|
||||
integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
|
||||
typescript@4.7.3:
|
||||
version "4.7.3"
|
||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
|
||||
integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
|
||||
|
||||
typescript@^3.9.10, typescript@^3.9.5, typescript@^3.9.7:
|
||||
version "3.9.10"
|
||||
|
|
|
|||
Loading…
Reference in New Issue