From 50d9c3c80e45c235090f413fb9323b91d5b945d1 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 15:35:27 +0200
Subject: [PATCH] adds file deletion button as well as confirmation modals to
 delete rows and delete image buttons

---
 .../src/DataGrid/AttachmentCell/Button.svelte | 10 +--
 .../src/DataGrid/Component.svelte             | 15 +++--
 .../src/DataGrid/customRenderer.js            |  7 ++
 .../src/attachments/AttachmentList.svelte     | 67 +++++++++++++++++--
 4 files changed, 83 insertions(+), 16 deletions(-)

diff --git a/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
index 1c7a24ea4f..96e210c57c 100644
--- a/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
+++ b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
@@ -1,18 +1,18 @@
 <script>
-  import { createEventDispatcher } from "svelte"
-  import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
+  // import { createEventDispatcher } from "svelte"
+  // import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
   import AttachmentList from "../../attachments/AttachmentList.svelte"
   //   import Modal from "./Modal.svelte"
 
-  const dispatch = createEventDispatcher()
+  // const dispatch = createEventDispatcher()
 
-  let anchor
+  // let anchor
   let dropdown
 
   export let files
 </script>
 
-<AttachmentList {files} />
+<AttachmentList {files} on:delete />
 <!-- <div bind:this={anchor}>
   <Button text small on:click={dropdown.show}>
     <Icon name="edit" />
diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 471d02cc68..bf2a1b9212 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -12,7 +12,7 @@
 
   import AgGrid from "@budibase/svelte-ag-grid"
   import CreateRowButton from "./CreateRow/Button.svelte"
-  import { TextButton as DeleteButton, Icon } from "@budibase/bbui"
+  import { TextButton as DeleteButton, Icon, Modal, ModalContent } from "@budibase/bbui"
 
   export let _bb
   export let datasource = {}
@@ -25,6 +25,8 @@
   let canEdit = editable && datasource && datasource.type !== "view"
   let canAddDelete = editable && datasource && datasource.type === "table"
 
+  let modal;
+
   let store = _bb.store
   let dataLoaded = false
   let data
@@ -133,7 +135,7 @@
       <div class="controls">
         <CreateRowButton {_bb} {table} on:newRow={handleNewRow} />
         {#if selectedRows.length > 0}
-          <DeleteButton text small on:click={deleteRows}>
+          <DeleteButton text small on:click={modal.show()}>
             <Icon name="addrow" />
             Delete
             {selectedRows.length}
@@ -150,13 +152,14 @@
       on:update={handleUpdate}
       on:select={({ detail }) => (selectedRows = detail)} />
   {/if}
+  <Modal bind:this={modal}>
+    <ModalContent title="Confirm Row Deletion" confirmText="Delete" onConfirm={deleteRows} >
+      <span>Are you sure you want to delete {selectedRows.length} row(s)?</span>
+    </ModalContent>
+  </Modal>
 </div>
 
 <style>
-  .container :global(form) {
-    display: grid;
-    grid-template-columns: repeat(2);
-  }
   .controls {
     margin-bottom: var(--spacing-s);
     display: grid;
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index e3f07eda47..7f6eb582b7 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -54,6 +54,13 @@ function attachmentRenderer(constraints, editable) {
       },
     })
 
+    const deleteFile = (event) => {
+      const newFilesArray = params.value.filter((file) => file !== event.detail)
+      params.setValue(newFilesArray)
+    }
+
+    attachmentInstance.$on('delete', deleteFile)
+
     return container
   }
 }
diff --git a/packages/standard-components/src/attachments/AttachmentList.svelte b/packages/standard-components/src/attachments/AttachmentList.svelte
index 52f61e2d8e..f87712409d 100644
--- a/packages/standard-components/src/attachments/AttachmentList.svelte
+++ b/packages/standard-components/src/attachments/AttachmentList.svelte
@@ -1,30 +1,53 @@
 <script>
+  import { Modal, ModalContent, Icon } from '@budibase/bbui'
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher()
   import { FILE_TYPES } from "./fileTypes"
 
   export let files = []
   export let height = "70"
   export let width = "70"
+
+  let modal;
+  let currentFile;
+
+  const openModal = (file) => {
+    currentFile = file
+    modal.show()
+  }
+
+  const handleConfirm = () => {
+    dispatch('delete', currentFile)
+  }
 </script>
 
 <div class="file-list">
   {#each files as file}
-    <a href={file.url} target="_blank">
-      <div class="file">
+    <div class="file-container">
+      <a href={file.url} target="_blank" class="file">
         {#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
           <img {width} {height} src={file.url} alt="preview of {file.name}" />
         {:else}<i class="far fa-file" />{/if}
-      </div>
+      </a>
       <span>{file.name}</span>
-    </a>
+      <div class="button-placement"><button  primary on:click={() => openModal(file)}>×</button></div>
+    </div>
   {/each}
 </div>
+<Modal bind:this={modal}>
+  <ModalContent title="Confirm File Deletion" confirmText="Delete" onConfirm={handleConfirm} >
+    <span>Are you sure you want to delete this attachment?</span>
+  </ModalContent>
+</Modal>
 
 <style>
   .file-list {
     display: grid;
+    justify-content: start;
     grid-auto-flow: column;
     grid-gap: var(--spacing-m);
-    grid-template-columns: repeat(10, 1fr);
+    grid-template-columns: repeat(auto-fill, 1fr);
   }
 
   img {
@@ -40,6 +63,40 @@
     text-decoration: none;
   }
 
+  .file-container {
+    position: relative;
+  }
+
+	button {
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    font-size: var(--font-size-l);
+    z-index: 1000;
+    top: 4px;
+    left: 46px;
+    margin: 0;
+    padding: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 0;
+    color: white;
+    border-radius: var(--border-radius-xl);
+    background: black;
+    transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
+                background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+    -webkit-appearance: none;
+    outline: none;
+	}
+    button:hover {
+        background-color: var(--grey-8);
+        cursor: pointer;
+    }
+    button:active {
+        background-color: var(--grey-9);
+        cursor: pointer;
+    }
+
   .file {
     position: relative;
     height: 75px;