use the filenames instead of indexes on delete

This commit is contained in:
Gani Georgiev
2023-05-17 23:17:45 +03:00
parent 04e0ad9b21
commit df5a291d20
32 changed files with 121 additions and 118 deletions
@@ -12,7 +12,7 @@
export let record;
export let value = "";
export let uploadedFiles = []; // Array<File> array
export let deletedFileIndexes = []; // Array<int> array
export let deletedFileNames = []; // Array<string> array
export let field = new SchemaField();
let fileInput;
@@ -25,9 +25,9 @@
uploadedFiles = CommonHelper.toArray(uploadedFiles);
}
// normalize delited file indexes
$: if (!Array.isArray(deletedFileIndexes)) {
deletedFileIndexes = CommonHelper.toArray(deletedFileIndexes);
// normalize deleted files
$: if (!Array.isArray(deletedFileNames)) {
deletedFileNames = CommonHelper.toArray(deletedFileNames);
}
$: isMultiple = field.options?.maxSelect > 1;
@@ -40,20 +40,20 @@
$: maxReached =
(valueAsArray.length || uploadedFiles.length) &&
field.options?.maxSelect <= valueAsArray.length + uploadedFiles.length - deletedFileIndexes.length;
field.options?.maxSelect <= valueAsArray.length + uploadedFiles.length - deletedFileNames.length;
$: if (uploadedFiles !== -1 || deletedFileIndexes !== -1) {
$: if (uploadedFiles !== -1 || deletedFileNames !== -1) {
triggerListChange();
}
function restoreExistingFile(valueIndex) {
CommonHelper.removeByValue(deletedFileIndexes, valueIndex);
deletedFileIndexes = deletedFileIndexes;
function restoreExistingFile(name) {
CommonHelper.removeByValue(deletedFileNames, name);
deletedFileNames = deletedFileNames;
}
function removeExistingFile(valueIndex) {
CommonHelper.pushUnique(deletedFileIndexes, valueIndex);
deletedFileIndexes = deletedFileIndexes;
function removeExistingFile(name) {
CommonHelper.pushUnique(deletedFileNames, name);
deletedFileNames = deletedFileNames;
}
function removeNewFile(index) {
@@ -67,7 +67,7 @@
function triggerListChange() {
filesListElem?.dispatchEvent(
new CustomEvent("change", {
detail: { value, uploadedFiles, deletedFileIndexes },
detail: { value, uploadedFiles, deletedFileNames },
bubbles: true,
})
);
@@ -85,7 +85,7 @@
}
for (const file of files) {
const currentTotal = valueAsArray.length + uploadedFiles.length - deletedFileIndexes.length;
const currentTotal = valueAsArray.length + uploadedFiles.length - deletedFileNames.length;
if (field.options?.maxSelect <= currentTotal) {
break;
@@ -131,7 +131,7 @@
<div bind:this={filesListElem} class="list">
{#each valueAsArray as filename, i (filename + record.id)}
{@const isDeleted = deletedFileIndexes.includes(i)}
{@const isDeleted = deletedFileNames.includes(filename)}
<Draggable
bind:list={value}
group={field.name + "_uploaded"}
@@ -141,7 +141,7 @@
let:dragover
>
<div class="list-item" class:dragging class:dragover>
<div class:fade={deletedFileIndexes.includes(i)}>
<div class:fade={isDeleted}>
<RecordFileThumb {record} {filename} />
</div>
@@ -161,11 +161,11 @@
</div>
<div class="actions">
{#if deletedFileIndexes.includes(i)}
{#if isDeleted}
<button
type="button"
class="btn btn-sm btn-danger btn-transparent"
on:click={() => restoreExistingFile(i)}
on:click={() => restoreExistingFile(filename)}
>
<span class="txt">Restore</span>
</button>
@@ -174,7 +174,7 @@
type="button"
class="btn btn-transparent btn-hint btn-sm btn-circle btn-remove"
use:tooltip={"Remove file"}
on:click={() => removeExistingFile(i)}
on:click={() => removeExistingFile(filename)}
>
<i class="ri-close-line" />
</button>