bagas/filekeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement file deletion

Browse Source
This commit is contained in:
bagas
2024-09-17 11:21:04 +07:00
parent e07360d2b3
commit cd9a7503b5
6 changed files with 355 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
view/client/file/file.templ
View File

@ -54,6 +54,26 @@ templ MainContent(files []types.FileData, user types.User, allowance *types.Allo
</label>
<input id="file-upload" name="file-upload" type="file" class="hidden"/>
</div>
<div id="deleteModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden opacity-0 transition-opacity duration-300 z-50">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white transform transition-all duration-300 -translate-y-full scale-95 opacity-0 z-50">
<div class="mt-3 text-center">
<h3 class="text-lg leading-6 font-medium text-gray-900">Confirm Deletion</h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500">
Are you sure you want to delete the file "<span class="font-medium break-all" id="fileNameToDelete"></span>"? This action cannot be undone.
</p>
</div>
<div class="items-center px-4 py-3">
<button onClick={ hideDeletionModal() } id="confirmDelete" class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300 transition duration-300">
Yes, delete file
</button>
<button onClick={ hideDeletionModal() } id="cancelDelete" class="mt-3 px-4 py-2 bg-white text-gray-700 text-base font-medium rounded-md w-full shadow-sm border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-300 transition duration-300">
Cancel
</button>
</div>
</div>
</div>
</div>
<div class="max-w-full overflow-hidden rounded-lg shadow-md bg-white">
<div class="overflow-x-auto">
<div class="inline-block min-w-full align-middle">
@ -205,7 +225,7 @@ templ MainContent(files []types.FileData, user types.User, allowance *types.Allo
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-pen"><path d="M2 11.5V5a2 2 0 0 1 2-2h3.9c.7 0 1.3.3 1.7.9l.8 1.2c.4.6 1 .9 1.7.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-9.5"></path><path d="M11.378 13.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"></path></svg>
<i class="ri-share-line mr-3 text-gray-400"></i> Rename
</button>
<button class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 w-full" role="menuitem">
<button onClick={ showDeletionModal(file.Name, file.ID) } class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 w-full" role="menuitem">
<svg width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g><path d="M20.5001 6H3.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path> <path d="M9.5 11L10 16" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path> <path d="M14.5 11L14 16" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path> <path d="M6.5 6C6.55588 6 6.58382 6 6.60915 5.99936C7.43259 5.97849 8.15902 5.45491 8.43922 4.68032C8.44784 4.65649 8.45667 4.62999 8.47434 4.57697L8.57143 4.28571C8.65431 4.03708 8.69575 3.91276 8.75071 3.8072C8.97001 3.38607 9.37574 3.09364 9.84461 3.01877C9.96213 3 10.0932 3 10.3553 3H13.6447C13.9068 3 14.0379 3 14.1554 3.01877C14.6243 3.09364 15.03 3.38607 15.2493 3.8072C15.3043 3.91276 15.3457 4.03708 15.4286 4.28571L15.5257 4.57697C15.5433 4.62992 15.5522 4.65651 15.5608 4.68032C15.841 5.45491 16.5674 5.97849 17.3909 5.99936C17.4162 6 17.4441 6 17.5 6" stroke="#000000" stroke-width="1.5"></path> <path d="M18.3735 15.3991C18.1965 18.054 18.108 19.3815 17.243 20.1907C16.378 21 15.0476 21 12.3868 21H11.6134C8.9526 21 7.6222 21 6.75719 20.1907C5.89218 19.3815 5.80368 18.054 5.62669 15.3991L5.16675 8.5M18.8334 8.5L18.6334 11.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path> </g></svg>
<i class="ri-clipboard-line mr-3 text-gray-400"></i> Remove
</button>
@ -451,6 +471,40 @@ templ FileIcon(fileType string) {
}
}
script showDeletionModal(name string, id string) {
const deleteButton = document.getElementById('deleteButton');
const modal = document.getElementById('deleteModal');
const modalContent = modal.querySelector('div');
const confirmDelete = document.getElementById('confirmDelete');
const cancelDelete = document.getElementById('cancelDelete');
const fileNameToDelete = document.getElementById('fileNameToDelete');
confirmDelete.setAttribute("hx-delete", "/file/" + id + "?consent=true");
confirmDelete.setAttribute("hx-target", "#file-" + id);
htmx.process(confirmDelete);
modal.classList.remove('hidden');
setTimeout(() => {
modal.classList.remove('opacity-0');
modalContent.classList.remove('-translate-y-full', 'scale-95', 'opacity-0');
}, 50);
fileNameToDelete.textContent = name;
}
script hideDeletionModal() {
const deleteButton = document.getElementById('deleteButton');
const modal = document.getElementById('deleteModal');
const modalContent = modal.querySelector('div');
const confirmDelete = document.getElementById('confirmDelete');
const cancelDelete = document.getElementById('cancelDelete');
const fileNameToDelete = document.getElementById('fileNameToDelete');
modal.classList.add('opacity-0');
modalContent.classList.add('-translate-y-full', 'scale-95', 'opacity-0');
setTimeout(() => {
modal.classList.add('hidden');
}, 300);
}
templ Main(title string, files []types.FileData, user types.User, allowance *types.Allowance) {
@component(title, files, user, allowance)
}