lint ✨

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -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 {
+  import { getRenderer, editRowRenderer } from "./cells/cellRenderers"
-    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

packages/builder/src/components/backend/DataTable/cells/cellRenderers.js

@@ -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,

packages/builder/src/components/backend/DataTable/modals/EditRow.svelte

@@ -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>

packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte

@@ -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>