mirror of https://github.com/Budibase/budibase.git
Michael Shanks
6 years ago
2 changed files with 0 additions and 334 deletions
@ -1,217 +0,0 @@ |
|||
<script> |
|||
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 { 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" |
|||
<<<<<<< HEAD |
|||
======= |
|||
import Spinner from "components/common/Spinner.svelte" |
|||
import { DeleteRecordModal, CreateEditRecordModal } from "./modals" |
|||
>>>>>>> master |
|||
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 |
|||
let loading |
|||
|
|||
$: { |
|||
if ( |
|||
$backendUiStore.selectedView && |
|||
$backendUiStore.selectedView.name.startsWith("all_") |
|||
) { |
|||
loading = true |
|||
api.fetchDataForView($backendUiStore.selectedView).then(records => { |
|||
data = records || [] |
|||
loading = false |
|||
}) |
|||
} |
|||
} |
|||
|
|||
$: 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"> |
|||
<span>{$backendUiStore.selectedModel.name}</span> |
|||
{#if loading} |
|||
<div transition:fade> |
|||
<Spinner size="10" /> |
|||
</div> |
|||
{/if} |
|||
</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; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.title > span { |
|||
margin-right: var(--spacing-xs); |
|||
} |
|||
|
|||
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,117 +0,0 @@ |
|||
<script> |
|||
import { goto } from "@sveltech/routify" |
|||
import { backendUiStore } from "builderStore" |
|||
import { notifier } from "builderStore/store/notifications" |
|||
import Spinner from "components/common/Spinner.svelte" |
|||
import { |
|||
DropdownMenu, |
|||
Button, |
|||
Label, |
|||
Heading, |
|||
Icon, |
|||
Input, |
|||
Select, |
|||
Dropzone, |
|||
Spacer, |
|||
} from "@budibase/bbui" |
|||
import TableDataImport from "./TableDataImport.svelte" |
|||
import api from "builderStore/api" |
|||
import analytics from "analytics" |
|||
|
|||
let anchor |
|||
let dropdown |
|||
let name |
|||
let dataImport |
|||
let loading |
|||
|
|||
async function saveTable() { |
|||
loading = true |
|||
const model = await backendUiStore.actions.models.save({ |
|||
name, |
|||
schema: dataImport.schema || {}, |
|||
dataImport, |
|||
}) |
|||
notifier.success(`Table ${name} created successfully.`) |
|||
$goto(`./model/${model._id}`) |
|||
analytics.captureEvent("Table Created", { name }) |
|||
name = "" |
|||
dropdown.hide() |
|||
<<<<<<< HEAD |
|||
======= |
|||
analytics.captureEvent("Table Created", { name }) |
|||
loading = false |
|||
>>>>>>> master |
|||
} |
|||
|
|||
const onClosed = () => { |
|||
name = "" |
|||
dropdown.hide() |
|||
} |
|||
</script> |
|||
|
|||
<div bind:this={anchor}> |
|||
<Button primary wide on:click={dropdown.show}>Create New Table</Button> |
|||
</div> |
|||
<DropdownMenu bind:this={dropdown} {anchor} align="left"> |
|||
<div class="container"> |
|||
<h5>Create Table</h5> |
|||
<Label grey extraSmall>Name</Label> |
|||
<Input |
|||
data-cy="table-name-input" |
|||
placeholder="Table Name" |
|||
thin |
|||
bind:value={name} /> |
|||
<Spacer medium /> |
|||
<Label grey extraSmall>Create Table from CSV (Optional)</Label> |
|||
<TableDataImport bind:dataImport /> |
|||
</div> |
|||
<footer> |
|||
<div class="button-margin-3"> |
|||
<Button secondary on:click={onClosed}>Cancel</Button> |
|||
</div> |
|||
<div class="button-margin-4"> |
|||
<Button |
|||
disabled={!name || (dataImport && !dataImport.valid)} |
|||
primary |
|||
on:click={saveTable}> |
|||
<span style={`margin-right: ${loading ? '10px' : 0};`}>Save</span> |
|||
{#if loading} |
|||
<Spinner size="10" /> |
|||
{/if} |
|||
</Button> |
|||
</div> |
|||
</footer> |
|||
</DropdownMenu> |
|||
|
|||
<style> |
|||
h5 { |
|||
margin-bottom: var(--spacing-m); |
|||
margin-top: 0; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.container { |
|||
padding: var(--spacing-l); |
|||
margin: 0; |
|||
} |
|||
|
|||
footer { |
|||
padding: 20px; |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr 1fr 1fr; |
|||
gap: 20px; |
|||
background: var(--grey-1); |
|||
border-bottom-left-radius: 0.5rem; |
|||
border-bottom-left-radius: 0.5rem; |
|||
} |
|||
|
|||
.button-margin-3 { |
|||
grid-column-start: 3; |
|||
display: grid; |
|||
} |
|||
|
|||
.button-margin-4 { |
|||
grid-column-start: 4; |
|||
display: grid; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue