Added tabulator to organization index
This commit is contained in:
parent
0222274a17
commit
6e6d02e658
|
|
@ -21,3 +21,4 @@ import './js/hoverable-collapse.js';
|
|||
import './js/cookies.js';
|
||||
import 'choices.js';
|
||||
import 'quill'
|
||||
import 'tabulator-tables'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
import {Controller} from '@hotwired/stimulus'
|
||||
import {TabulatorFull as Tabulator} from "tabulator-tables";
|
||||
|
||||
export default class extends Controller {
|
||||
static values = {data: String, aws: String};
|
||||
|
||||
connect() {
|
||||
|
||||
this.table = new Tabulator("#tabulator-org", {
|
||||
data: JSON.parse(this.dataValue), layout: "fitColumns", columns: [
|
||||
{
|
||||
title: "Logo", field: "logoUrl", formatter: "image",
|
||||
width: 100,
|
||||
formatterParams: {height: "50px", width: "50px", urlPrefix: this.awsValue, urlSuffix: ""},
|
||||
},
|
||||
{title: "Nom", field: "name", headerFilter: "input"},
|
||||
{title: "Email", field: "email", headerFilter: "input"},
|
||||
{
|
||||
title: "Actions",
|
||||
field: "showUrl",
|
||||
hozAlign: "center",
|
||||
width: 80,
|
||||
headerSort: false,
|
||||
formatter: (cell) => {
|
||||
const url = cell.getValue();
|
||||
if (url) {
|
||||
return `
|
||||
<a href="${url}" class="p-3 align-middle color-primary" title="Voir">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="30px"
|
||||
height="30px"
|
||||
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>
|
||||
`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
disconnect() {
|
||||
if (this.table) {
|
||||
this.table.destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
|
||||
/* Remove outer table border */
|
||||
.tabulator {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Remove header and row cell borders */
|
||||
.tabulator-header,
|
||||
.tabulator-header .tabulator-col,
|
||||
.tabulator-tableholder,
|
||||
.tabulator-table,
|
||||
.tabulator-row,
|
||||
.tabulator-row .tabulator-cell {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Remove column header bottom border and row separators */
|
||||
.tabulator-header {
|
||||
border-bottom: none !important;
|
||||
background-color: transparent !important;
|
||||
/*border-top-left-radius: 25%;*/
|
||||
/*border-top-right-radius: 25%;*/
|
||||
}
|
||||
.tabulator-row {
|
||||
border-bottom: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Remove look on hover/selected without borders */
|
||||
.tabulator-row:hover {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.tabulator-row.tabulator-selected {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.tabulator-row.tabulator-row-odd {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Rounded border for images in cells */
|
||||
.tabulator-cell img {
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
/* Scope to this table only */
|
||||
.tabulator,
|
||||
.tabulator-header,
|
||||
.tabulator-header .tabulator-header-contents,
|
||||
.tabulator-header .tabulator-col{
|
||||
background: none !important;
|
||||
}
|
||||
|
|
@ -39,8 +39,21 @@ class OrganizationController extends AbstractController
|
|||
{
|
||||
$this->denyAccessUnlessGranted('ROLE_ADMIN');
|
||||
$user = $this->userService->getUserByIdentifier($this->getUser()->getUserIdentifier());
|
||||
|
||||
if ($this->isGranted("ROLE_SUPER_ADMIN")) {
|
||||
$organizations = $this->entityManager->getRepository(Organizations::class)->findBy([ 'isDeleted' => false ]);
|
||||
$organizations = $this->entityManager->getRepository(Organizations::class)->findBy(['isDeleted' => false]);
|
||||
|
||||
// Map the entities for tabulator
|
||||
$organizationsData = array_map(function($org) {
|
||||
return [
|
||||
'id' => $org->getId(),
|
||||
'name' => $org->getName(),
|
||||
'email' => $org->getEmail(),
|
||||
'logoUrl' => $org->getLogoUrl() ? $org->getLogoUrl() : null, // or prepend base URL if needed
|
||||
'active' => $org->isActive(),
|
||||
'showUrl' => $this->generateUrl('organization_show', ['id' => $org->getId()]),
|
||||
];
|
||||
}, $organizations);
|
||||
} else {
|
||||
//get all the UO of the user
|
||||
$uos = $this->entityManager->getRepository(UsersOrganizations::class)->findBy(['users' => $user]);
|
||||
|
|
@ -57,9 +70,8 @@ class OrganizationController extends AbstractController
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
return $this->render('organization/index.html.twig', [
|
||||
'organizations' => $organizations,
|
||||
'organizationsData' => $organizationsData,
|
||||
]);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<a href="{{ path('organization_new') }}" class="btn btn-primary">Ajouter une organisation</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if organizations|length == 0 %}
|
||||
{% if organizationsData|length == 0 %}
|
||||
<tr>
|
||||
<td colspan="4" class="text-center">Aucune organisation trouvée.</td>
|
||||
<td colspan="4" class="text-center">
|
||||
|
|
@ -18,44 +18,14 @@
|
|||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<table class="table align-middle shadow">
|
||||
<thead class="table-light shadow-sm">
|
||||
<tr>
|
||||
<th>Logo</th>
|
||||
<th>Nom</th>
|
||||
<th>Email</th>
|
||||
<th>Visualiser</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for organization in organizations %}
|
||||
<tr>
|
||||
<td>
|
||||
{% if organization.logoUrl %}
|
||||
<img src="{{ aws_url ~ organization.logoUrl }}" alt="Organization logo"
|
||||
class="rounded-circle" style="width:40px; height:40px;">
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ organization.name }}</td>
|
||||
<td>{{ organization.email }}</td>
|
||||
<td>
|
||||
{% if organization.active %}
|
||||
<span class="badge bg-success">Active</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger">Inactive</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<a href="{{ path('organization_show', {'id': organization.id}) }}"
|
||||
class="p-3 align-middle color-primary">
|
||||
{{ ux_icon('fa6-regular:eye', {height: '30px', width: '30px'}) }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id="tabulator-org" data-controller="organization"
|
||||
data-organization-data-value="{{ organizationsData|json_encode(constant("JSON_UNESCAPED_UNICODE"))|e("html_attr") }}"
|
||||
data-organization-aws-value="{{ aws_url }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue