lint ✨
This commit is contained in:
Martin McKeaveney
parent
f4965d2fa3
commit
4bcfdd5ea8
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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