forked from tsai/budibase
Martin McKeaveney
6 years ago
16 changed files with 141 additions and 630 deletions
@ -1,233 +0,0 @@ |
|||||
<script> |
|
||||
import { goto, params } from "@sveltech/routify" |
|
||||
import { onMount } from "svelte" |
|
||||
import { fade } from "svelte/transition" |
|
||||
import fsort from "fast-sort" |
|
||||
import getOr from "lodash/fp/getOr" |
|
||||
import { store, backendUiStore } from "builderStore" |
|
||||
import api from "builderStore/api" |
|
||||
import { Button, Icon } from "@budibase/bbui" |
|
||||
import ActionButton from "components/common/ActionButton.svelte" |
|
||||
import AttachmentList from "./AttachmentList.svelte" |
|
||||
import TablePagination from "./TablePagination.svelte" |
|
||||
import CreateEditRowModal from "./modals/CreateEditRowModal.svelte" |
|
||||
import RowPopover from "./buttons/CreateRowButton.svelte" |
|
||||
import ColumnPopover from "./buttons/CreateColumnButton.svelte" |
|
||||
import ViewPopover from "./buttons/CreateViewButton.svelte" |
|
||||
import ColumnHeaderPopover from "./popovers/ColumnPopover.svelte" |
|
||||
import EditRowPopover from "./popovers/RowPopover.svelte" |
|
||||
import CalculationPopover from "./buttons/CalculateButton.svelte" |
|
||||
import Spinner from "components/common/Spinner.svelte" |
|
||||
|
|
||||
const ITEMS_PER_PAGE = 10 |
|
||||
|
|
||||
export let schema = [] |
|
||||
export let data = [] |
|
||||
export let title |
|
||||
export let allowEditing = false |
|
||||
export let loading = false |
|
||||
|
|
||||
let currentPage = 0 |
|
||||
|
|
||||
$: columns = schema ? Object.keys(schema) : [] |
|
||||
$: sort = $backendUiStore.sort |
|
||||
$: sorted = sort ? fsort(data)[sort.direction](sort.column) : data |
|
||||
$: paginatedData = |
|
||||
sorted && sorted.length |
|
||||
? sorted.slice( |
|
||||
currentPage * ITEMS_PER_PAGE, |
|
||||
currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE |
|
||||
) |
|
||||
: [] |
|
||||
$: tableId = data?.length ? data[0].tableId : null |
|
||||
|
|
||||
function selectRelationship(row, fieldName) { |
|
||||
if (!row?.[fieldName]?.length) { |
|
||||
return |
|
||||
} |
|
||||
$goto( |
|
||||
`/${$params.application}/backend/table/${tableId}/relationship/${row._id}/${fieldName}` |
|
||||
) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<section> |
|
||||
<div class="table-controls"> |
|
||||
<h2 class="title"> |
|
||||
<span>{title}</span> |
|
||||
{#if loading} |
|
||||
<div transition:fade> |
|
||||
<Spinner size="10" /> |
|
||||
</div> |
|
||||
{/if} |
|
||||
</h2> |
|
||||
<div class="popovers"> |
|
||||
<slot /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<table class="bb-table"> |
|
||||
<thead> |
|
||||
<tr> |
|
||||
{#if allowEditing} |
|
||||
<th class="edit-header"> |
|
||||
<div>Edit</div> |
|
||||
</th> |
|
||||
{/if} |
|
||||
{#each columns as header} |
|
||||
<th> |
|
||||
{#if allowEditing} |
|
||||
<ColumnHeaderPopover field={schema[header]} /> |
|
||||
{:else} |
|
||||
<div class="header">{header}</div> |
|
||||
{/if} |
|
||||
</th> |
|
||||
{/each} |
|
||||
</tr> |
|
||||
</thead> |
|
||||
<tbody> |
|
||||
{#if paginatedData.length === 0} |
|
||||
{#if allowEditing} |
|
||||
<td class="no-border">No data.</td> |
|
||||
{/if} |
|
||||
{#each columns as header, idx} |
|
||||
<td class="no-border"> |
|
||||
{#if idx === 0 && !allowEditing}No data.{/if} |
|
||||
</td> |
|
||||
{/each} |
|
||||
{/if} |
|
||||
{#each paginatedData as row} |
|
||||
<tr> |
|
||||
{#if allowEditing} |
|
||||
<td> |
|
||||
<EditRowPopover {row} /> |
|
||||
</td> |
|
||||
{/if} |
|
||||
{#each columns as header} |
|
||||
<td> |
|
||||
{#if schema[header].type === 'link'} |
|
||||
<div |
|
||||
class:link={row[header] && row[header].length} |
|
||||
on:click={() => selectRelationship(row, header)}> |
|
||||
{row[header] ? row[header].length : 0} |
|
||||
related row(s) |
|
||||
</div> |
|
||||
{:else if schema[header].type === 'attachment'} |
|
||||
<AttachmentList files={row[header] || []} /> |
|
||||
{:else}{getOr('', header, row)}{/if} |
|
||||
</td> |
|
||||
{/each} |
|
||||
</tr> |
|
||||
{/each} |
|
||||
</tbody> |
|
||||
</table> |
|
||||
<TablePagination |
|
||||
{data} |
|
||||
bind:currentPage |
|
||||
pageItemCount={paginatedData.length} |
|
||||
{ITEMS_PER_PAGE} /> |
|
||||
</section> |
|
||||
|
|
||||
<style> |
|
||||
.title { |
|
||||
font-size: 24px; |
|
||||
font-weight: 600; |
|
||||
text-rendering: optimizeLegibility; |
|
||||
margin-top: 0; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: flex-start; |
|
||||
align-items: center; |
|
||||
} |
|
||||
.title > span { |
|
||||
margin-right: var(--spacing-xs); |
|
||||
} |
|
||||
|
|
||||
table { |
|
||||
border: 1px solid var(--grey-4); |
|
||||
background: #fff; |
|
||||
border-collapse: collapse; |
|
||||
margin-top: 0; |
|
||||
} |
|
||||
|
|
||||
thead { |
|
||||
background: var(--grey-3); |
|
||||
border: 1px solid var(--grey-4); |
|
||||
} |
|
||||
|
|
||||
thead th { |
|
||||
color: var(--ink); |
|
||||
font-weight: 500; |
|
||||
font-size: 14px; |
|
||||
text-rendering: optimizeLegibility; |
|
||||
transition: 0.5s all; |
|
||||
vertical-align: middle; |
|
||||
height: 48px; |
|
||||
padding-top: 0; |
|
||||
padding-bottom: 0; |
|
||||
} |
|
||||
|
|
||||
thead th:hover { |
|
||||
color: var(--blue); |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
.header { |
|
||||
text-transform: capitalize; |
|
||||
} |
|
||||
|
|
||||
td { |
|
||||
max-width: 200px; |
|
||||
text-overflow: ellipsis; |
|
||||
overflow: hidden; |
|
||||
border: 1px solid var(--grey-4); |
|
||||
white-space: nowrap; |
|
||||
box-sizing: border-box; |
|
||||
padding: var(--spacing-l) var(--spacing-m); |
|
||||
font-size: var(--font-size-xs); |
|
||||
} |
|
||||
|
|
||||
td.no-border { |
|
||||
border: none; |
|
||||
} |
|
||||
|
|
||||
tbody tr { |
|
||||
border-bottom: 1px solid var(--grey-4); |
|
||||
transition: 0.3s background-color; |
|
||||
color: var(--ink); |
|
||||
} |
|
||||
|
|
||||
tbody tr:hover { |
|
||||
background: var(--grey-1); |
|
||||
} |
|
||||
|
|
||||
.table-controls { |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.popovers { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
:global(.popovers > div) { |
|
||||
margin-right: var(--spacing-m); |
|
||||
margin-bottom: var(--spacing-xl); |
|
||||
} |
|
||||
|
|
||||
.edit-header { |
|
||||
width: 60px; |
|
||||
} |
|
||||
|
|
||||
.edit-header:hover { |
|
||||
cursor: default; |
|
||||
color: var(--ink); |
|
||||
} |
|
||||
|
|
||||
.link { |
|
||||
text-decoration: underline; |
|
||||
} |
|
||||
|
|
||||
.link:hover { |
|
||||
color: var(--grey-6); |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,29 @@ |
|||||
|
<script> |
||||
|
import Spinner from "components/common/Spinner.svelte" |
||||
|
import { fade } from "svelte/transition" |
||||
|
</script> |
||||
|
|
||||
|
<div class="ag-overlay-loading-center loading-container"> |
||||
|
<div transition:fade class="loading-overlay"> |
||||
|
<img |
||||
|
height="30" |
||||
|
width="30" |
||||
|
src="/_builder/assets/bb-logo.svg" |
||||
|
alt="Budibase icon" /> |
||||
|
<span> Loading Your Data </span> |
||||
|
<Spinner size="12" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.loading-overlay { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-family: var(--font-sans); |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.loading-overlay > * { |
||||
|
margin-right: var(--spacing-m); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,17 @@ |
|||||
|
import LoadingOverlay from "./LoadingOverlay.svelte" |
||||
|
|
||||
|
export default class LoadingOverlayWrapper { |
||||
|
init(params) { |
||||
|
this.gui = document.createElement("div") |
||||
|
new LoadingOverlay({ |
||||
|
target: this.gui, |
||||
|
props: { |
||||
|
params, |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
getGui() { |
||||
|
return this.gui |
||||
|
} |
||||
|
} |
||||
@ -1,136 +0,0 @@ |
|||||
<script> |
|
||||
export let data |
|
||||
export let currentPage = 0 |
|
||||
export let pageItemCount |
|
||||
export let ITEMS_PER_PAGE |
|
||||
|
|
||||
let numPages = 0 |
|
||||
$: numPages = Math.ceil((data?.length ?? 0) / ITEMS_PER_PAGE) |
|
||||
$: displayAllPages = numPages <= 10 |
|
||||
$: pagesAroundCurrent = getPagesAroundCurrent(currentPage, numPages) |
|
||||
|
|
||||
const next = () => { |
|
||||
if (currentPage + 1 === numPages) return |
|
||||
currentPage = currentPage + 1 |
|
||||
} |
|
||||
|
|
||||
const previous = () => { |
|
||||
if (currentPage == 0) return |
|
||||
currentPage = currentPage - 1 |
|
||||
} |
|
||||
|
|
||||
const selectPage = page => { |
|
||||
currentPage = page |
|
||||
} |
|
||||
|
|
||||
function getPagesAroundCurrent(current, max) { |
|
||||
const start = Math.max(current - 2, 1) |
|
||||
const end = Math.min(current + 2, max - 2) |
|
||||
let pages = [] |
|
||||
for (let i = start; i <= end; i++) { |
|
||||
pages.push(i) |
|
||||
} |
|
||||
return pages |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div class="pagination"> |
|
||||
<div class="pagination__buttons"> |
|
||||
<button on:click={previous} disabled={currentPage === 0}><</button> |
|
||||
{#if displayAllPages} |
|
||||
{#each Array(numPages) as _, idx} |
|
||||
<button |
|
||||
class:selected={idx === currentPage} |
|
||||
on:click={() => selectPage(idx)}> |
|
||||
{idx + 1} |
|
||||
</button> |
|
||||
{/each} |
|
||||
{:else} |
|
||||
<button class:selected={currentPage === 0} on:click={() => selectPage(0)}> |
|
||||
1 |
|
||||
</button> |
|
||||
{#if currentPage > 3}<button disabled>...</button>{/if} |
|
||||
{#each pagesAroundCurrent as idx} |
|
||||
<button |
|
||||
class:selected={idx === currentPage} |
|
||||
on:click={() => selectPage(idx)}> |
|
||||
{idx + 1} |
|
||||
</button> |
|
||||
{/each} |
|
||||
{#if currentPage < numPages - 4}<button disabled>...</button>{/if} |
|
||||
<button |
|
||||
class:selected={currentPage === numPages - 1} |
|
||||
on:click={() => selectPage(numPages - 1)}> |
|
||||
{numPages} |
|
||||
</button> |
|
||||
{/if} |
|
||||
<button |
|
||||
on:click={next} |
|
||||
disabled={currentPage === numPages - 1 || numPages === 0}> |
|
||||
> |
|
||||
</button> |
|
||||
</div> |
|
||||
|
|
||||
<p> |
|
||||
{#if numPages > 1} |
|
||||
Showing |
|
||||
{ITEMS_PER_PAGE * currentPage + 1} |
|
||||
- |
|
||||
{ITEMS_PER_PAGE * currentPage + pageItemCount} |
|
||||
of |
|
||||
{data.length} |
|
||||
rows |
|
||||
{:else if numPages === 1}Showing all {data.length} row(s){/if} |
|
||||
</p> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.pagination { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
|
|
||||
.pagination__buttons { |
|
||||
display: flex; |
|
||||
border: 1px solid var(--grey-4); |
|
||||
border-radius: var(--border-radius-s); |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.pagination__buttons button { |
|
||||
display: inline-block; |
|
||||
padding: var(--spacing-s) 0; |
|
||||
text-align: center; |
|
||||
margin: 0; |
|
||||
background: #fff; |
|
||||
border: none; |
|
||||
outline: none; |
|
||||
border-right: 1px solid var(--grey-4); |
|
||||
text-transform: capitalize; |
|
||||
min-width: 20px; |
|
||||
transition: 0.3s background-color; |
|
||||
font-family: var(--font-sans); |
|
||||
color: var(--grey-6); |
|
||||
width: 40px; |
|
||||
} |
|
||||
.pagination__buttons button:last-child { |
|
||||
border-right: none; |
|
||||
} |
|
||||
.pagination__buttons button:hover { |
|
||||
cursor: pointer; |
|
||||
background-color: var(--grey-1); |
|
||||
} |
|
||||
.pagination__buttons button.selected { |
|
||||
background: var(--blue); |
|
||||
color: white; |
|
||||
} |
|
||||
|
|
||||
p { |
|
||||
font-size: var(--font-size-s); |
|
||||
margin: var(--spacing-xl) 0; |
|
||||
color: var(--grey-6); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,145 +0,0 @@ |
|||||
<script> |
|
||||
import { backendUiStore } from "builderStore" |
|
||||
import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui" |
|
||||
import { FIELDS } from "constants/backend" |
|
||||
import CreateEditColumnPopover from "./CreateEditColumnPopover.svelte" |
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte" |
|
||||
import { notifier } from "../../../../builderStore/store/notifications" |
|
||||
|
|
||||
export let field |
|
||||
|
|
||||
let anchor |
|
||||
let dropdown |
|
||||
let editing |
|
||||
let confirmDeleteDialog |
|
||||
|
|
||||
$: sortColumn = $backendUiStore.sort && $backendUiStore.sort.column |
|
||||
$: sortDirection = $backendUiStore.sort && $backendUiStore.sort.direction |
|
||||
$: type = field?.type |
|
||||
|
|
||||
function showEditor() { |
|
||||
editing = true |
|
||||
} |
|
||||
|
|
||||
function hideEditor() { |
|
||||
dropdown.hide() |
|
||||
editing = false |
|
||||
} |
|
||||
|
|
||||
function showDelete() { |
|
||||
dropdown.hide() |
|
||||
confirmDeleteDialog.show() |
|
||||
} |
|
||||
|
|
||||
function deleteColumn() { |
|
||||
if (field.name === $backendUiStore.selectedTable.primaryDisplay) { |
|
||||
notifier.danger("You cannot delete the display column") |
|
||||
} else { |
|
||||
backendUiStore.actions.tables.deleteField(field) |
|
||||
notifier.success("Column deleted") |
|
||||
} |
|
||||
hideEditor() |
|
||||
} |
|
||||
|
|
||||
function sort(direction, column) { |
|
||||
backendUiStore.update(state => { |
|
||||
if (direction !== "none") { |
|
||||
state.sort = { direction, column } |
|
||||
} else { |
|
||||
state.sort = undefined |
|
||||
} |
|
||||
return state |
|
||||
}) |
|
||||
hideEditor() |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div class="container" bind:this={anchor} on:click={dropdown.show}> |
|
||||
<span>{field.name}</span> |
|
||||
<Icon name="arrowdown" /> |
|
||||
</div> |
|
||||
<DropdownMenu bind:this={dropdown} {anchor} align="left"> |
|
||||
{#if editing} |
|
||||
<h5>Edit Column</h5> |
|
||||
<CreateEditColumnPopover onClosed={hideEditor} {field} /> |
|
||||
{:else} |
|
||||
<ul> |
|
||||
{#if type !== 'link'} |
|
||||
<li data-cy="edit-column-header" on:click={showEditor}> |
|
||||
<Icon name="edit" /> |
|
||||
Edit |
|
||||
</li> |
|
||||
{/if} |
|
||||
<li data-cy="delete-column-header" on:click={showDelete}> |
|
||||
<Icon name="delete" /> |
|
||||
Delete |
|
||||
</li> |
|
||||
{#if sortDirection === 'desc' || sortDirection === 'asc'} |
|
||||
<li on:click={() => sort('none', field.name)}> |
|
||||
<Icon name="close" /> |
|
||||
Remove sort |
|
||||
</li> |
|
||||
{/if} |
|
||||
{#if sortDirection === 'desc' || sortColumn !== field.name} |
|
||||
<li on:click={() => sort('asc', field.name)}> |
|
||||
<Icon name="sortascending" /> |
|
||||
Sort A - Z |
|
||||
</li> |
|
||||
{/if} |
|
||||
{#if sortDirection === 'asc' || sortColumn !== field.name} |
|
||||
<li on:click={() => sort('desc', field.name)}> |
|
||||
<Icon name="sortdescending" /> |
|
||||
Sort Z - A |
|
||||
</li> |
|
||||
{/if} |
|
||||
</ul> |
|
||||
{/if} |
|
||||
</DropdownMenu> |
|
||||
<ConfirmDialog |
|
||||
bind:this={confirmDeleteDialog} |
|
||||
body={`Are you sure you wish to delete this column? Your data will be deleted and this action cannot be undone.`} |
|
||||
okText="Delete Column" |
|
||||
onOk={deleteColumn} |
|
||||
title="Confirm Delete" /> |
|
||||
|
|
||||
<style> |
|
||||
.container { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: flex-start; |
|
||||
align-items: center; |
|
||||
gap: var(--spacing-xs); |
|
||||
} |
|
||||
|
|
||||
h5 { |
|
||||
padding: var(--spacing-xl) 0 0 var(--spacing-xl); |
|
||||
margin: 0; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
ul { |
|
||||
list-style: none; |
|
||||
padding-left: 0; |
|
||||
margin: 0; |
|
||||
padding: var(--spacing-s) 0; |
|
||||
} |
|
||||
|
|
||||
li { |
|
||||
display: flex; |
|
||||
font-family: var(--font-sans); |
|
||||
font-size: var(--font-size-xs); |
|
||||
color: var(--ink); |
|
||||
padding: var(--spacing-s) var(--spacing-m); |
|
||||
margin: auto 0px; |
|
||||
align-items: center; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
li:hover { |
|
||||
background-color: var(--grey-2); |
|
||||
} |
|
||||
|
|
||||
li:active { |
|
||||
color: var(--blue); |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue