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

feat: implement file renaming

Browse Source
This commit is contained in:
bagas
2024-09-17 12:34:35 +07:00
parent cd9a7503b5
commit f52e75db78
10 changed files with 461 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,25 +55,53 @@ templ MainContent(files []types.FileData, user types.User, allowance *types.Allo
<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 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 id="renameModal" 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="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
Rename File
</h3>
<div class="mt-2">
<input id="newFileName" required type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" value="">
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" hx-swap="outerHTML" onClick={ hideRenameModal() } id="confirmRenameFile" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
Rename
</button>
<button type="button" onClick={ hideRenameModal() } class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
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">
@ -221,7 +249,7 @@ templ MainContent(files []types.FileData, user types.User, allowance *types.Allo
</div>
}
<div class="py-1 border-t" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<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={ showRenameModal(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 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>
@ -440,15 +468,15 @@ templ JustFile(file types.FileData) {
</div>
}
<div class="py-1 border-t" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<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">
<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">
<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>
</div>
<button onClick={ showRenameModal(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 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 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>
</div>
</div>
</div>
</td>
@ -472,11 +500,9 @@ 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");
@ -491,12 +517,8 @@ script showDeletionModal(name string, id string) {
}
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');
@ -505,6 +527,39 @@ script hideDeletionModal() {
}, 300);
}
script showRenameModal(name string, id string) {
const rename = document.getElementById('renameModal');
const renameModalContent = rename.querySelector('div');
const fileName = document.getElementById("newFileName");
const confirmRenameFile = document.getElementById("confirmRenameFile");
confirmRenameFile.setAttribute("hx-target", "#file-" + id);
htmx.process(confirmRenameFile);
fileName.addEventListener("change", function (event) {
event.preventDefault();
confirmRenameFile.setAttribute("hx-patch", "/file/" + id + "?name=" + event.target.value);
htmx.process(confirmRenameFile);
});
rename.classList.remove('hidden');
setTimeout(() => {
rename.classList.remove('opacity-0');
renameModalContent.classList.remove('-translate-y-full', 'scale-95', 'opacity-0');
}, 50);
fileName.value = name
}
script hideRenameModal() {
const rename = document.getElementById('renameModal');
const renameModalContent = rename.querySelector('div');
rename.classList.add('opacity-0');
renameModalContent.classList.add('-translate-y-full', 'scale-95', 'opacity-0');
setTimeout(() => {
rename.classList.add('hidden');
}, 300);
}
templ Main(title string, files []types.FileData, user types.User, allowance *types.Allowance) {
@component(title, files, user, allowance)
}