added deleted button in tables

This commit is contained in:
Charles 2025-10-27 08:37:08 +01:00
parent 016c415c11
commit e1659accab
2 changed files with 130 additions and 33 deletions

View File

@ -21,13 +21,13 @@ export default class extends Controller {
connect() {
this.roleSelect();
if(this.listValue){
if (this.listValue) {
this.table();
}
if(this.newValue){
if (this.newValue) {
this.tableSmall();
}
if(this.adminValue){
if (this.adminValue) {
this.tableSmallAdmin();
}
if (this.listOrganizationValue) {
@ -143,25 +143,74 @@ export default class extends Controller {
{
title: "<b>Actions</b>",
field: "showUrl",
hozAlign: "center",
width: 100,
width: 130,
vertAlign: "middle",
headerSort: false,
formatter: (cell) => {
const url = cell.getValue();
if (url) {
return `
<a href="${url}" class="p-3 align-middle color-primary" title="Voir">
if (!url) return '';
// You can get other row data like ID for delete endpoint if needed
const rowData = cell.getRow().getData();
const deleteId = rowData.id;
return `
<div
class="d-flex gap-2 align-content-center">
<a href="${url}"
class=" color-primary"
title="Voir">
<svg xmlns="http://www.w3.org/2000/svg"
width="35px"
height="35px"
viewBox="0 0 576 512">
<path fill="currentColor"
width="25px"
height="25px"
viewBox="0 0 576 512">
<path fill="currentColor"
d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256C63 286 89.6 328.5 128 364.3c41.2 38.1 94.8 67.7 160 67.7s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80M95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6M288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80h-2c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2v2c0 44.2 35.8 80 80 80m0-208a128 128 0 1 1 0 256a128 128 0 1 1 0-256"/></svg>
</a>
`;
<a href="#"
class="text-danger delete-user"
data-id="${deleteId}"
title="Supprimer">
<svg xmlns="http://www.w3.org/2000/svg"
width="25px"
height="25px"
viewBox="0 0 448 512">
<path fill="currentColor"
d="M135.2 17.7L121 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3
32-32s-14.3-32-32-32h-89L312.8
17.7C307.3 12.2 299.7 9 291.7 9H156.3c-8
0-15.6 3.2-21.1 8.7zM32
128L53.2 467.2C54.6 491 74.2 512 98 512H350c23.8
0 43.4-21 44.8-44.8L416 128H32z"/>
</svg>
</a>
</div>
`;
},
cellClick: function (e, cell) {
const target = e.target.closest('a');
if (target && target.classList.contains('delete-user')) {
e.preventDefault();
const userId = target.getAttribute('data-id');
if (confirm('Voulez-vous vraiment supprimer cet utilisateur ?')) {
// Example delete call (replace URL as needed)
fetch(`/user/delete/${userId}`, {
method: 'POST',
})
.then(response => {
if (response.ok) {
alert('Utilisateur supprimé');
cell.getRow().delete(); // Remove row from table
} else {
alert('Erreur lors de la suppression');
}
})
.catch(() => alert('Erreur lors de la suppression'));
}
}
return '';
}
}];
const tabulator = new Tabulator("#tabulator-userList", {
@ -329,7 +378,7 @@ export default class extends Controller {
pagination: false,
paginationMode: "remote",
// paginationSize: 5,
ajaxParams: { orgId: this.orgIdValue },
ajaxParams: {orgId: this.orgIdValue},
langs: {
fr: {
ajax: {
@ -379,6 +428,7 @@ export default class extends Controller {
columns
});
}
tableSmallAdmin() {
const columns = [
{
@ -469,8 +519,6 @@ export default class extends Controller {
];
const tabulator = new Tabulator("#tabulator-userListSmallAdmin", {
locale: "fr", //'en' for English, 'fr' for French (en is default, no need to include it)
@ -480,7 +528,7 @@ export default class extends Controller {
pagination: false,
paginationMode: "remote",
// paginationSize: 5,
ajaxParams: { orgId: this.orgIdValue },
ajaxParams: {orgId: this.orgIdValue},
langs: {
fr: {
ajax: {
@ -622,25 +670,73 @@ export default class extends Controller {
{
title: "<b>Actions</b>",
field: "showUrl",
hozAlign: "center",
width: 100,
width: 130,
vertAlign: "middle",
headerSort: false,
formatter: (cell) => {
const url = cell.getValue();
if (url) {
return `
<a href="${url}" class="p-3 align-middle color-primary" title="Voir">
if (!url) return '';
// You can get other row data like ID for delete endpoint if needed
const rowData = cell.getRow().getData();
const deleteId = rowData.id;
return `
<div
class="d-flex gap-2 align-content-center">
<a href="${url}"
class=" color-primary"
title="Voir">
<svg xmlns="http://www.w3.org/2000/svg"
width="35px"
height="35px"
viewBox="0 0 576 512">
<path fill="currentColor"
width="25px"
height="25px"
viewBox="0 0 576 512">
<path fill="currentColor"
d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256C63 286 89.6 328.5 128 364.3c41.2 38.1 94.8 67.7 160 67.7s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80M95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6M288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80h-2c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2v2c0 44.2 35.8 80 80 80m0-208a128 128 0 1 1 0 256a128 128 0 1 1 0-256"/></svg>
</a>
`;
<a href="#"
class="text-danger delete-user"
data-id="${deleteId}"
title="Supprimer">
<svg xmlns="http://www.w3.org/2000/svg"
width="25px"
height="25px"
viewBox="0 0 448 512">
<path fill="currentColor"
d="M135.2 17.7L121 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3
32-32s-14.3-32-32-32h-89L312.8
17.7C307.3 12.2 299.7 9 291.7 9H156.3c-8
0-15.6 3.2-21.1 8.7zM32
128L53.2 467.2C54.6 491 74.2 512 98 512H350c23.8
0 43.4-21 44.8-44.8L416 128H32z"/>
</svg>
</a>
</div>
`;
},
cellClick: function (e, cell) {
const target = e.target.closest('a');
if (target && target.classList.contains('delete-user')) {
e.preventDefault();
const userId = target.getAttribute('data-id');
if (confirm('Voulez-vous vraiment supprimer cet utilisateur ?')) {
fetch(`/user/organization/deactivate/${userId}`, {
method: 'POST',
})
.then(response => {
if (response.ok) {
alert('Utilisateur supprimé');
cell.getRow().delete(); // Remove row from table
} else {
alert('Erreur lors de la suppression');
}
})
.catch(() => alert('Erreur lors de la suppression'));
}
}
return '';
}
}];
// if (this.statutValue) {
@ -725,15 +821,15 @@ export default class extends Controller {
locale: "fr",
ajaxURL: "/user/data/organization",
ajaxConfig: "GET",
ajaxParams: { orgId: this.orgIdValue },
ajaxParams: {orgId: this.orgIdValue},
pagination: true,
paginationMode: "remote",
paginationSize: 10,
ajaxResponse: (url, params, response) => response,
paginationDataSent: { page: "page", size: "size" },
paginationDataReceived: { last_page: "last_page" },
paginationDataSent: {page: "page", size: "size"},
paginationDataReceived: {last_page: "last_page"},
ajaxSorting: true,
ajaxFiltering: true,

View File

@ -312,7 +312,7 @@ class UserController extends AbstractController
throw $this->createAccessDeniedException(self::ACCESS_DENIED);
}
#[Route('/delete/{id}', name: 'delete', methods: ['GET'])]
#[Route('/delete/{id}', name: 'delete', methods: ['GET', 'POST'])]
public function delete(int $id, Request $request): Response
{
$this->denyAccessUnlessGranted("ROLE_SUPER_ADMIN");
@ -401,6 +401,7 @@ class UserController extends AbstractController
// Map to array (keep isConnected)
$data = array_map(function (User $user) {
return [
'id' => $user->getId(),
'pictureUrl' => $user->getPictureUrl(),
'name' => $user->getSurname(),
'prenom' => $user->getName(),