merge
This commit is contained in:
commit
9e1a6c1069
5 changed files with 91 additions and 36 deletions
|
@ -242,7 +242,10 @@
|
||||||
"type": "number",
|
"type": "number",
|
||||||
"default": "500"
|
"default": "500"
|
||||||
},
|
},
|
||||||
"pagination": "bool"
|
"pagination": {
|
||||||
|
"type": "bool",
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"dataform": {
|
"dataform": {
|
||||||
|
|
|
@ -1,29 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { createEventDispatcher } from "svelte"
|
|
||||||
import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
|
|
||||||
import AttachmentList from "../../attachments/AttachmentList.svelte"
|
import AttachmentList from "../../attachments/AttachmentList.svelte"
|
||||||
// import Modal from "./Modal.svelte"
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
|
||||||
|
|
||||||
let anchor
|
|
||||||
let dropdown
|
|
||||||
|
|
||||||
export let files
|
export let files
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AttachmentList {files} />
|
<AttachmentList {files} on:delete />
|
||||||
<!-- <div bind:this={anchor}>
|
|
||||||
<Button text small on:click={dropdown.show}>
|
|
||||||
<Icon name="edit" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<DropdownMenu bind:this={dropdown} {anchor} align="left">
|
|
||||||
<h5>Edit Attachment(s)</h5>
|
|
||||||
<Modal
|
|
||||||
{_bb}
|
|
||||||
{table}
|
|
||||||
onClosed={dropdown.hide}
|
|
||||||
on:newRow={() => dispatch('newRow')} />
|
|
||||||
</DropdownMenu> -->
|
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
import AgGrid from "@budibase/svelte-ag-grid"
|
import AgGrid from "@budibase/svelte-ag-grid"
|
||||||
import CreateRowButton from "./CreateRow/Button.svelte"
|
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 _bb
|
||||||
export let datasource = {}
|
export let datasource = {}
|
||||||
|
@ -25,6 +25,8 @@
|
||||||
let canEdit = editable && datasource && datasource.type !== "view"
|
let canEdit = editable && datasource && datasource.type !== "view"
|
||||||
let canAddDelete = editable && datasource && datasource.type === "table"
|
let canAddDelete = editable && datasource && datasource.type === "table"
|
||||||
|
|
||||||
|
let modal;
|
||||||
|
|
||||||
let store = _bb.store
|
let store = _bb.store
|
||||||
let dataLoaded = false
|
let dataLoaded = false
|
||||||
let data
|
let data
|
||||||
|
@ -133,7 +135,7 @@
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<CreateRowButton {_bb} {table} on:newRow={handleNewRow} />
|
<CreateRowButton {_bb} {table} on:newRow={handleNewRow} />
|
||||||
{#if selectedRows.length > 0}
|
{#if selectedRows.length > 0}
|
||||||
<DeleteButton text small on:click={deleteRows}>
|
<DeleteButton text small on:click={modal.show()}>
|
||||||
<Icon name="addrow" />
|
<Icon name="addrow" />
|
||||||
Delete {selectedRows.length} row(s)
|
Delete {selectedRows.length} row(s)
|
||||||
</DeleteButton>
|
</DeleteButton>
|
||||||
|
@ -148,13 +150,14 @@
|
||||||
on:update={handleUpdate}
|
on:update={handleUpdate}
|
||||||
on:select={({ detail }) => (selectedRows = detail)} />
|
on:select={({ detail }) => (selectedRows = detail)} />
|
||||||
{/if}
|
{/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>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.container :global(form) {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2);
|
|
||||||
}
|
|
||||||
.controls {
|
.controls {
|
||||||
margin-bottom: var(--spacing-s);
|
margin-bottom: var(--spacing-s);
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
|
@ -55,6 +55,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
|
return container
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,32 +1,62 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { Modal, ModalContent, Icon } from "@budibase/bbui"
|
||||||
|
import { createEventDispatcher } from "svelte"
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
import { FILE_TYPES } from "./fileTypes"
|
import { FILE_TYPES } from "./fileTypes"
|
||||||
|
|
||||||
export let files = []
|
export let files = []
|
||||||
export let height = "70"
|
export let height = "70"
|
||||||
export let width = "70"
|
export let width = "70"
|
||||||
|
|
||||||
|
let modal
|
||||||
|
let currentFile
|
||||||
|
|
||||||
|
const openModal = file => {
|
||||||
|
currentFile = file
|
||||||
|
modal.show()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleConfirm = () => {
|
||||||
|
dispatch("delete", currentFile)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="file-list">
|
<div class="file-list">
|
||||||
{#each files as file}
|
{#each files as file}
|
||||||
<a href={file.url} target="_blank">
|
<div class="file-container">
|
||||||
<div class="file">
|
<a href={file.url} target="_blank" class="file">
|
||||||
{#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
|
{#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
|
||||||
<img {width} {height} src={file.url} alt="preview of {file.name}" />
|
<img {width} {height} src={file.url} alt="preview of {file.name}" />
|
||||||
{:else}
|
{:else}
|
||||||
<i class="far fa-file" />
|
<i class="far fa-file" />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</a>
|
||||||
<span>{file.name}</span>
|
<span>{file.name}</span>
|
||||||
</a>
|
<div class="button-placement">
|
||||||
|
<button primary on:click|stopPropagation={() => openModal(file)}>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</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>
|
<style>
|
||||||
.file-list {
|
.file-list {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
justify-content: start;
|
||||||
grid-auto-flow: column;
|
grid-auto-flow: column;
|
||||||
grid-gap: var(--spacing-m);
|
grid-gap: var(--spacing-m);
|
||||||
grid-template-columns: repeat(10, 1fr);
|
grid-template-columns: repeat(auto-fill, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
@ -42,6 +72,41 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.file-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
font-size: var(--font-size-m);
|
||||||
|
line-height: 110%;
|
||||||
|
z-index: 1000;
|
||||||
|
top: 4px;
|
||||||
|
left: 50px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 1.3rem;
|
||||||
|
height: 1.3rem;
|
||||||
|
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 {
|
.file {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 75px;
|
height: 75px;
|
||||||
|
|
Loading…
Reference in a new issue