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

lint ✨

This commit is contained in:
Martin McKeaveney 2020-10-26 18:07:08 +00:00
parent 341843af84
commit 3f587a4756
4 changed files with 3 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,10 +3,7 @@
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"

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>