tsai
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

lint ✨

pull/788/head
Martin McKeaveney 6 years ago
parent
f4965d2fa3
commit
4bcfdd5ea8
4 changed files with 3 additions and 198 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      packages/builder/src/components/backend/DataTable/Table.svelte
  2. 3
      packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
  3. 46
      packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
  4. 145
      packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte

7
packages/builder/src/components/backend/DataTable/Table.svelte
View File

@ -3,15 +3,12 @@
import { goto, params } from "@sveltech/routify"
import Spinner from "components/common/Spinner.svelte"
import AgGrid from "@budibase/svelte-ag-grid"
import {
getRenderer,
editRowRenderer,
} from "./cells/cellRenderers"
import { getRenderer, editRowRenderer } from "./cells/cellRenderers"
import TableLoadingOverlay from "./TableLoadingOverlay"
import TableHeader from "./TableHeader"
import "@budibase/svelte-ag-grid/dist/index.css"
export let schema = {}
export let schema = {}
export let data = []
export let title
export let allowEditing = false

3
packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
View File

@ -1,7 +1,6 @@
import AttachmentList from "./AttachmentCell.svelte"
import EditRowPopover from "../popovers/RowPopover.svelte"
import EditRowPopover from "../modals/EditRow.svelte"
import RelationshipDisplay from "./RelationshipCell.svelte"
import LoadingOverlay from "./LoadingOverlay.svelte"
const renderers = {
attachment: attachmentRenderer,

46
packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte → packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
View File

@ -14,12 +14,10 @@
let modal
function showModal() {
// dropdown.hide()
modal.show()
}
function showDelete() {
// dropdown.hide()
confirmDeleteDialog.show()
}
@ -31,18 +29,6 @@
</script>
<div on:click={showModal}><i class="ri-more-line" /></div>
<!-- <DropdownMenu bind:this={dropdown} {anchor} align="left">
<ul>
<li data-cy="edit-row" on:click={showModal}>
<Icon name="edit" />
<span>Edit</span>
</li>
<li data-cy="delete-row" on:click={showDelete}>
<Icon name="delete" />
<span>Delete</span>
</li>
</ul>
</DropdownMenu> -->
<ConfirmDialog
bind:this={confirmDeleteDialog}
body={`Are you sure you wish to delete this row? Your data will be deleted and this action cannot be undone.`}
@ -57,36 +43,4 @@
.ri-more-line:hover {
cursor: pointer;
}
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);
color: var(--ink);
padding: var(--spacing-s) var(--spacing-m);
margin: auto 0px;
align-items: center;
cursor: pointer;
font-size: var(--font-size-xs);
}
li:hover {
background-color: var(--grey-2);
}
li:active {
color: var(--blue);
}
</style>

145
packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte
View File

@ -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>
Write Preview
Loading…
Cancel
Save