diff --git a/packages/bbui/src/Table/AttachmentRenderer.svelte b/packages/bbui/src/Table/AttachmentRenderer.svelte index 96e9f7ff99..ab9760a980 100644 --- a/packages/bbui/src/Table/AttachmentRenderer.svelte +++ b/packages/bbui/src/Table/AttachmentRenderer.svelte @@ -4,10 +4,15 @@ const displayLimit = 5 $: attachments = value?.slice(0, displayLimit) ?? [] $: leftover = (value?.length ?? 0) - attachments.length + + const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"] + const isImage = extension => { + return imageExtensions.includes(extension?.toLowerCase()) + } {#each attachments as attachment} - {#if attachment.type?.startsWith('image')} + {#if isImage(attachment.extension)} {attachment.extension} {:else}
{attachment.extension}
diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte index 0c14ec2aa5..e45d9696b8 100644 --- a/packages/bbui/src/Table/CellRenderer.svelte +++ b/packages/bbui/src/Table/CellRenderer.svelte @@ -7,13 +7,17 @@ export let schema export let value + export let customRenderers = [] const plainTypes = ["string", "options", "number", "longform"] $: type = schema?.type ?? "string" + $: customRenderer = customRenderers?.find(x => x.column === schema?.name) {#if value != null && value !== ''} - {#if plainTypes.includes(type)} + {#if customRenderer} + + {:else if plainTypes.includes(type)} {:else if type === 'boolean'} diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index 548e46b607..d002b4c939 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -16,6 +16,7 @@ export let selectedRows = [] export let customColumnRenderer = SelectEditRenderer export let customColumnTitle + export let customRenderers = [] const dispatch = createEventDispatcher() @@ -93,7 +94,11 @@ autoColumns.push(field) } }) - return columns.sort().concat(autoColumns) + return columns + .sort((a, b) => { + return a.toLowerCase() < b.toLowerCase() ? a : b + }) + .concat(autoColumns) } const onScroll = event => { @@ -181,7 +186,7 @@ {/if} - {#if allowEditColumns} + {#if allowEditColumns && schema[field]?.editable !== false}
- +
{/each} diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte index fa15f3f886..8f99088e4a 100644 --- a/packages/builder/src/components/backend/DataTable/Table.svelte +++ b/packages/builder/src/components/backend/DataTable/Table.svelte @@ -12,6 +12,7 @@ import CreateEditColumn from "./modals/CreateEditColumn.svelte" import "@budibase/svelte-ag-grid/dist/index.css" import { TableNames, UNEDITABLE_USER_FIELDS } from "constants" + import RoleCell from "./cells/RoleCell.svelte" export let schema = {} export let data = [] @@ -28,12 +29,23 @@ let editableRow let editRowModal let editColumnModal + let customRenderers = [] $: isUsersTable = tableId === TableNames.USERS $: editRowComponent = isUsersTable ? CreateEditUser : CreateEditRow $: { if (isUsersTable) { - console.log(schema) + customRenderers = [ + { + column: "roleId", + component: RoleCell, + }, + ] + UNEDITABLE_USER_FIELDS.forEach(field => { + if (schema[field]) { + schema[field].editable = false + } + }) schema.email.displayName = "Email" schema.roleId.displayName = "Role" if (schema.status) { @@ -97,6 +109,7 @@ {data} {schema} {loading} + {customRenderers} customColumnTitle="Edit" bind:selectedRows showAutoColumns={!hideAutocolumns} diff --git a/packages/builder/src/components/backend/DataTable/cells/AttachmentCell.svelte b/packages/builder/src/components/backend/DataTable/cells/AttachmentCell.svelte deleted file mode 100644 index b8169f1398..0000000000 --- a/packages/builder/src/components/backend/DataTable/cells/AttachmentCell.svelte +++ /dev/null @@ -1,69 +0,0 @@ - - -
- {#each files as file} -
- {#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())} - - {:else} - .{file.extension} - - {file.name} - {/if} -
- {/each} -
- - diff --git a/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte deleted file mode 100644 index 0aae16f3db..0000000000 --- a/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte +++ /dev/null @@ -1,45 +0,0 @@ - - -
selectRelationship(row, columnName)}> - {#each items as item} -
{item?.primaryDisplay ?? ''}
- {/each} -
- - diff --git a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte index 9a04933a19..4b4ce1622b 100644 --- a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte +++ b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte @@ -1,10 +1,10 @@ -
{roleName}
+{roleName} diff --git a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js b/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js deleted file mode 100644 index 15a7910186..0000000000 --- a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js +++ /dev/null @@ -1,128 +0,0 @@ -import AttachmentList from "./AttachmentCell.svelte" -import EditRow from "../modals/EditRow.svelte" -import CreateEditUser from "../modals/CreateEditUser.svelte" -import DeleteRow from "../modals/DeleteRow.svelte" -import RelationshipDisplay from "./RelationshipCell.svelte" -import RoleCell from "./RoleCell.svelte" - -const renderers = { - attachment: attachmentRenderer, - link: linkedRowRenderer, -} - -export function getRenderer({ schema, editable, isUsersTable }) { - const rendererParams = { - options: schema.options, - constraints: schema.constraints, - editable, - } - if (renderers[schema.type]) { - return renderers[schema.type](rendererParams) - } else if (isUsersTable && schema.name === "roleId") { - return roleRenderer(rendererParams) - } else { - return false - } -} - -export function deleteRowRenderer(params) { - const container = document.createElement("div") - - new DeleteRow({ - target: container, - props: { - row: params.data, - }, - }) - - return container -} - -export function editRowRenderer(params) { - const container = document.createElement("div") - container.style.height = "100%" - container.style.display = "flex" - container.style.alignItems = "center" - - new EditRow({ - target: container, - props: { - row: params.data, - }, - }) - - return container -} - -export function userRowRenderer(params) { - const container = document.createElement("div") - container.style.height = "100%" - container.style.display = "flex" - container.style.alignItems = "center" - - new EditRow({ - target: container, - props: { - row: params.data, - modalContentComponent: CreateEditUser, - }, - }) - - return container -} - -function attachmentRenderer() { - return params => { - const container = document.createElement("div") - container.style.height = "100%" - container.style.display = "flex" - container.style.alignItems = "center" - - new AttachmentList({ - target: container, - props: { - files: params.value || [], - }, - }) - - return container - } -} - -function linkedRowRenderer() { - return params => { - let container = document.createElement("div") - container.style.display = "grid" - container.style.height = "100%" - container.style.alignItems = "center" - - new RelationshipDisplay({ - target: container, - props: { - row: params.data, - columnName: params.column.colId, - selectRelationship: params.selectRelationship, - }, - }) - - return container - } -} - -function roleRenderer() { - return params => { - let container = document.createElement("div") - container.style.display = "grid" - container.style.height = "100%" - container.style.alignItems = "center" - - new RoleCell({ - target: container, - props: { - roleId: params.value, - }, - }) - - return container - } -}