125 lines
4.6 KiB
Twig
125 lines
4.6 KiB
Twig
<div id="file-browser-{{ domain }}-{{ id|e('html_attr') }}"
|
|
class="file-browser"
|
|
data-domain="{{ domain }}"
|
|
data-id="{{ id }}"
|
|
data-base-path="{{ path('app_files', { domain: domain, id: id, editable: editable }) }}"
|
|
data-current-path="{{ path }}">
|
|
|
|
<div class="card mt-3">
|
|
<div class="card-header">Fichiers</div>
|
|
<div class="card-body">
|
|
|
|
{% if editable %}
|
|
<div class="mb-3">
|
|
<a class="btn btn-info" style="max-width:100%; margin-bottom:15px;" data-bs-toggle="modal" data-bs-target="#mymodal" onClick="ModalLoad('mymodal','Upload','{{ path('app_files_uploadmodal',{domain:domain, id:id,path:path}) }}');" title='Upload'>Upload</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<p><strong>Chemin :</strong> {{ path ?: '/' }}</p>
|
|
|
|
{% set parentPath = path|split('/')|slice(0, -1)|join('/') %}
|
|
|
|
<ul class="list-unstyled">
|
|
{% if path %}
|
|
<li><a href="#" class="file-nav" data-path="{{ parentPath }}">⬅️ ..</a></li>
|
|
{% endif %}
|
|
|
|
{% for file in files %}
|
|
<li>
|
|
{% if file.isDirectory %}
|
|
📁 <a href="#" class="file-nav" data-path="{{ path ? path ~ '/' ~ file.name : file.name }}">{{ file.name }}/</a>
|
|
{% if editable %}
|
|
<button class="btn btn-sm btn-danger btn-delete ms-2" data-path="{{ file.path }}">🗑️</button>
|
|
{% endif %}
|
|
{% else %}
|
|
📄 {{ file.name }}
|
|
{% if editable %}
|
|
<button class="btn btn-sm btn-danger btn-delete ms-2" data-path="{{ file.path }}">🗑️</button>
|
|
{% endif %}
|
|
{% endif %}
|
|
</li>
|
|
{% else %}
|
|
<li><em>Dossier vide</em></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(function () {
|
|
function refreshContainer(containerId, path) {
|
|
const $oldContainer = $('#' + containerId);
|
|
const base = $oldContainer.data('base-path');
|
|
|
|
$.get(base, { path: path }, function (html) {
|
|
console.log(html);
|
|
const $doc = $('<div>').html(html);
|
|
const $newContainer = $doc.find('#' + containerId);
|
|
console.log(containerId);
|
|
if ($newContainer.length) {
|
|
console.log("HHHHHHHHHHHHHHHHHHHH");
|
|
$oldContainer.replaceWith($newContainer);
|
|
initFileBrowser($newContainer); // rebind events
|
|
}
|
|
});
|
|
}
|
|
|
|
function initFileBrowser($container) {
|
|
const containerId = $container.attr('id');
|
|
|
|
// Clear any previous bindings (important!)
|
|
$container.off('click');
|
|
|
|
// Navigation dossier
|
|
$container.on('click', '.file-nav', function (e) {
|
|
e.preventDefault();
|
|
const path = $(this).data('path');
|
|
refreshContainer(containerId, path);
|
|
});
|
|
|
|
// Suppression fichier ou dossier
|
|
$container.on('click', '.btn-delete', function (e) {
|
|
e.preventDefault();
|
|
if (!confirm('Supprimer ce fichier ?')) return;
|
|
|
|
const pathToDelete = $(this).data('path');
|
|
const currentPath = $container.data('current-path');
|
|
|
|
$.ajax({
|
|
url: '/user/file/' + $container.data('domain') + '/' + $container.data('id') + '/delete',
|
|
method: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({ path: pathToDelete }),
|
|
success: function (res) {
|
|
if (res.success) {
|
|
refreshContainer(containerId, currentPath);
|
|
} else {
|
|
alert('Erreur : ' + res.error);
|
|
}
|
|
},
|
|
error: function (xhr) {
|
|
alert('Erreur lors de la suppression : ' + xhr.responseText);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Init navigateur fichiers
|
|
const containerId = 'file-browser-{{ domain }}-{{ id|e('html_attr') }}';
|
|
const $browser = $('#' + containerId);
|
|
initFileBrowser($browser);
|
|
|
|
// Rafraîchir après fermeture modale
|
|
$('#mymodal').on('hidden.bs.modal', function () {
|
|
const $browser = $('#' + containerId);
|
|
const currentPath = $browser.data('current-path') || '';
|
|
refreshContainer(containerId, currentPath);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</div>
|