forked from tsai/budibase
Martin McKeaveney
6 years ago
4 changed files with 3 additions and 198 deletions
@ -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