forked from tsai/budibase
Andrew Kingston
6 years ago
7 changed files with 89 additions and 323 deletions
@ -0,0 +1,20 @@ |
|||||
|
<script> |
||||
|
import { TextButton, Icon, Popover } from "@budibase/bbui" |
||||
|
import api from "builderStore/api" |
||||
|
import ExportPopover from "../popovers/ExportPopover.svelte" |
||||
|
|
||||
|
export let view |
||||
|
|
||||
|
let anchor |
||||
|
let dropdown |
||||
|
</script> |
||||
|
|
||||
|
<div bind:this={anchor}> |
||||
|
<TextButton text small on:click={dropdown.show}> |
||||
|
<Icon name="download" /> |
||||
|
Export |
||||
|
</TextButton> |
||||
|
</div> |
||||
|
<Popover bind:this={dropdown} {anchor} align="left"> |
||||
|
<ExportPopover {view} onClosed={dropdown.hide} /> |
||||
|
</Popover> |
||||
@ -0,0 +1,61 @@ |
|||||
|
<script> |
||||
|
import api from "builderStore/api" |
||||
|
import { Button, Select } from "@budibase/bbui" |
||||
|
|
||||
|
const FORMATS = [ |
||||
|
{ |
||||
|
name: "CSV", |
||||
|
key: "csv", |
||||
|
}, |
||||
|
{ |
||||
|
name: "JSON", |
||||
|
key: "json", |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
export let view |
||||
|
export let onClosed |
||||
|
|
||||
|
let exportFormat = FORMATS[0].key |
||||
|
|
||||
|
async function exportView() { |
||||
|
const response = await api.post( |
||||
|
`/api/views/export?format=${exportFormat}`, |
||||
|
view |
||||
|
) |
||||
|
const downloadInfo = await response.json() |
||||
|
onClosed() |
||||
|
window.location = downloadInfo.url |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div class="popover"> |
||||
|
<h5>Export Data</h5> |
||||
|
<Select label="Format" secondary thin bind:value={exportFormat}> |
||||
|
{#each FORMATS as format} |
||||
|
<option value={format.key}>{format.name}</option> |
||||
|
{/each} |
||||
|
</Select> |
||||
|
<div class="footer"> |
||||
|
<Button secondary on:click={onClosed}>Cancel</Button> |
||||
|
<Button primary on:click={exportView}>Export</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.popover { |
||||
|
display: grid; |
||||
|
grid-gap: var(--spacing-xl); |
||||
|
} |
||||
|
|
||||
|
h5 { |
||||
|
margin: 0; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
gap: var(--spacing-m); |
||||
|
} |
||||
|
</style> |
||||
@ -1,196 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount } from "svelte" |
|
||||
import fsort from "fast-sort" |
|
||||
import getOr from "lodash/fp/getOr" |
|
||||
import { store, backendUiStore } from "builderStore" |
|
||||
import { Button, Icon } from "@budibase/bbui" |
|
||||
import ActionButton from "components/common/ActionButton.svelte" |
|
||||
import LinkedRecord from "./LinkedRecord.svelte" |
|
||||
import AttachmentList from "./AttachmentList.svelte" |
|
||||
import TablePagination from "./TablePagination.svelte" |
|
||||
import { DeleteRecordModal, CreateEditRecordModal } from "./modals" |
|
||||
import RowPopover from "./popovers/Row.svelte" |
|
||||
import ColumnPopover from "./popovers/Column.svelte" |
|
||||
import ViewPopover from "./popovers/View.svelte" |
|
||||
import ExportPopover from "./popovers/Export.svelte" |
|
||||
import ColumnHeaderPopover from "./popovers/ColumnHeader.svelte" |
|
||||
import EditRowPopover from "./popovers/EditRow.svelte" |
|
||||
import * as api from "./api" |
|
||||
|
|
||||
const ITEMS_PER_PAGE = 10 |
|
||||
// Internal headers we want to hide from the user |
|
||||
const INTERNAL_HEADERS = ["_id", "_rev", "modelId", "type"] |
|
||||
|
|
||||
let modalOpen = false |
|
||||
let data = [] |
|
||||
let headers = [] |
|
||||
let currentPage = 0 |
|
||||
let search |
|
||||
|
|
||||
$: { |
|
||||
if ( |
|
||||
$backendUiStore.selectedView && |
|
||||
$backendUiStore.selectedView.name.startsWith("all_") |
|
||||
) { |
|
||||
api.fetchDataForView($backendUiStore.selectedView).then(records => { |
|
||||
data = records || [] |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
$: sort = $backendUiStore.sort |
|
||||
$: sorted = sort ? fsort(data)[sort.direction](sort.column) : data |
|
||||
$: paginatedData = sorted |
|
||||
? sorted.slice( |
|
||||
currentPage * ITEMS_PER_PAGE, |
|
||||
currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE |
|
||||
) |
|
||||
: [] |
|
||||
|
|
||||
$: headers = Object.keys($backendUiStore.selectedModel.schema) |
|
||||
.sort() |
|
||||
.filter(id => !INTERNAL_HEADERS.includes(id)) |
|
||||
|
|
||||
$: schema = $backendUiStore.selectedModel.schema |
|
||||
$: modelView = { |
|
||||
schema: $backendUiStore.selectedModel.schema, |
|
||||
name: $backendUiStore.selectedView.name, |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<section> |
|
||||
<div class="table-controls"> |
|
||||
<h2 class="title">{$backendUiStore.selectedModel.name}</h2> |
|
||||
<div class="popovers"> |
|
||||
<ColumnPopover /> |
|
||||
{#if Object.keys($backendUiStore.selectedModel.schema).length > 0} |
|
||||
<RowPopover /> |
|
||||
<ViewPopover /> |
|
||||
<ExportPopover view={modelView} /> |
|
||||
{/if} |
|
||||
</div> |
|
||||
</div> |
|
||||
<table class="bb-table"> |
|
||||
<thead> |
|
||||
<tr> |
|
||||
<th class="edit-header"> |
|
||||
<div>Edit</div> |
|
||||
</th> |
|
||||
{#each headers as header} |
|
||||
<th> |
|
||||
<ColumnHeaderPopover |
|
||||
field={$backendUiStore.selectedModel.schema[header]} /> |
|
||||
</th> |
|
||||
{/each} |
|
||||
</tr> |
|
||||
</thead> |
|
||||
<tbody> |
|
||||
{#if paginatedData.length === 0} |
|
||||
<div class="no-data">No Data.</div> |
|
||||
{/if} |
|
||||
{#each paginatedData as row} |
|
||||
<tr> |
|
||||
<td> |
|
||||
<EditRowPopover {row} /> |
|
||||
</td> |
|
||||
{#each headers as header} |
|
||||
<td> |
|
||||
{#if schema[header].type === 'link'} |
|
||||
<LinkedRecord field={schema[header]} ids={row[header]} /> |
|
||||
{: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> |
|
||||
section { |
|
||||
margin-bottom: 20px; |
|
||||
} |
|
||||
|
|
||||
.title { |
|
||||
font-size: 24px; |
|
||||
font-weight: 600; |
|
||||
text-rendering: optimizeLegibility; |
|
||||
text-transform: capitalize; |
|
||||
} |
|
||||
|
|
||||
table { |
|
||||
border: 1px solid var(--grey-4); |
|
||||
background: #fff; |
|
||||
border-radius: 3px; |
|
||||
border-collapse: collapse; |
|
||||
} |
|
||||
|
|
||||
thead { |
|
||||
height: 40px; |
|
||||
background: var(--grey-3); |
|
||||
border: 1px solid var(--grey-4); |
|
||||
} |
|
||||
|
|
||||
thead th { |
|
||||
color: var(--ink); |
|
||||
text-transform: capitalize; |
|
||||
font-weight: 500; |
|
||||
font-size: 14px; |
|
||||
text-rendering: optimizeLegibility; |
|
||||
transition: 0.5s all; |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
|
|
||||
.edit-header { |
|
||||
width: 100px; |
|
||||
cursor: default; |
|
||||
} |
|
||||
|
|
||||
.edit-header:hover { |
|
||||
color: var(--ink); |
|
||||
} |
|
||||
|
|
||||
th:hover { |
|
||||
color: var(--blue); |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
td { |
|
||||
max-width: 200px; |
|
||||
text-overflow: ellipsis; |
|
||||
border: 1px solid var(--grey-4); |
|
||||
overflow: hidden; |
|
||||
white-space: pre; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
tbody tr { |
|
||||
border-bottom: 1px solid var(--grey-4); |
|
||||
transition: 0.3s background-color; |
|
||||
color: var(--ink); |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
|
|
||||
tbody tr:hover { |
|
||||
background: var(--grey-1); |
|
||||
} |
|
||||
|
|
||||
.table-controls { |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.popovers { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
.no-data { |
|
||||
padding: 14px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,56 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount } from "svelte" |
|
||||
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 Table from "./Table.svelte" |
|
||||
import ActionButton from "components/common/ActionButton.svelte" |
|
||||
import LinkedRecord from "./LinkedRecord.svelte" |
|
||||
import TablePagination from "./TablePagination.svelte" |
|
||||
import { DeleteRecordModal, CreateEditRecordModal } from "./modals" |
|
||||
import RowPopover from "./popovers/Row.svelte" |
|
||||
import ColumnPopover from "./popovers/Column.svelte" |
|
||||
import ViewPopover from "./popovers/View.svelte" |
|
||||
import ColumnHeaderPopover from "./popovers/ColumnHeader.svelte" |
|
||||
import EditRowPopover from "./popovers/EditRow.svelte" |
|
||||
import CalculationPopover from "./popovers/Calculate.svelte" |
|
||||
import GroupByPopover from "./popovers/GroupBy.svelte" |
|
||||
import FilterPopover from "./popovers/Filter.svelte" |
|
||||
import ExportPopover from "./popovers/Export.svelte" |
|
||||
|
|
||||
export let view = {} |
|
||||
|
|
||||
let data = [] |
|
||||
|
|
||||
$: name = view.name |
|
||||
$: filters = view.filters |
|
||||
$: field = view.field |
|
||||
$: groupBy = view.groupBy |
|
||||
$: !name.startsWith("all_") && filters && fetchViewData(name, field, groupBy) |
|
||||
|
|
||||
async function fetchViewData(name, field, groupBy) { |
|
||||
const params = new URLSearchParams() |
|
||||
|
|
||||
if (field) { |
|
||||
params.set("field", field) |
|
||||
params.set("stats", true) |
|
||||
} |
|
||||
if (groupBy) params.set("group", groupBy) |
|
||||
|
|
||||
let QUERY_VIEW_URL = `/api/views/${name}?${params}` |
|
||||
|
|
||||
const response = await api.get(QUERY_VIEW_URL) |
|
||||
data = await response.json() |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<Table title={decodeURI(name)} schema={view.schema} {data}> |
|
||||
<FilterPopover {view} /> |
|
||||
<CalculationPopover {view} /> |
|
||||
{#if view.calculation} |
|
||||
<GroupByPopover {view} /> |
|
||||
{/if} |
|
||||
<ExportPopover {view} /> |
|
||||
</Table> |
|
||||
@ -1,71 +0,0 @@ |
|||||
<script> |
|
||||
import { |
|
||||
TextButton, |
|
||||
Button, |
|
||||
Icon, |
|
||||
Input, |
|
||||
Select, |
|
||||
Popover, |
|
||||
} from "@budibase/bbui" |
|
||||
import { backendUiStore } from "builderStore" |
|
||||
import { notifier } from "builderStore/store/notifications" |
|
||||
import api from "builderStore/api" |
|
||||
|
|
||||
const FORMATS = [ |
|
||||
{ |
|
||||
name: "CSV", |
|
||||
key: "csv", |
|
||||
}, |
|
||||
{ |
|
||||
name: "JSON", |
|
||||
key: "json", |
|
||||
}, |
|
||||
] |
|
||||
|
|
||||
export let view |
|
||||
|
|
||||
let anchor |
|
||||
let dropdown |
|
||||
let exportFormat |
|
||||
|
|
||||
async function exportView() { |
|
||||
const response = await api.post( |
|
||||
`/api/views/export?format=${exportFormat}`, |
|
||||
view |
|
||||
) |
|
||||
const downloadInfo = await response.json() |
|
||||
window.location = downloadInfo.url |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div bind:this={anchor}> |
|
||||
<TextButton text small on:click={dropdown.show}> |
|
||||
<Icon name="download" /> |
|
||||
Export |
|
||||
</TextButton> |
|
||||
</div> |
|
||||
<Popover bind:this={dropdown} {anchor} align="left"> |
|
||||
<h5>Export Format</h5> |
|
||||
<Select secondary thin bind:value={exportFormat}> |
|
||||
<option value={''}>Select an option</option> |
|
||||
{#each FORMATS as format} |
|
||||
<option value={format.key}>{format.name}</option> |
|
||||
{/each} |
|
||||
</Select> |
|
||||
<div class="button-group"> |
|
||||
<Button secondary on:click={dropdown.hide}>Cancel</Button> |
|
||||
<Button primary on:click={exportView}>Export</Button> |
|
||||
</div> |
|
||||
</Popover> |
|
||||
|
|
||||
<style> |
|
||||
h5 { |
|
||||
margin-top: 0; |
|
||||
} |
|
||||
|
|
||||
.button-group { |
|
||||
margin-top: var(--spacing-l); |
|
||||
display: flex; |
|
||||
justify-content: flex-end; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue