797 lines
60 KiB
HTML
797 lines
60 KiB
HTML
<!DOCTYPE html>
|
|
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
|
xmlns:f="http://xmlns.jcp.org/jsf/core"
|
|
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
|
xmlns:p="http://primefaces.org/ui"
|
|
template="/templates/main-template.xhtml">
|
|
|
|
<ui:define name="title">
|
|
#{empty organisationDetailBean.organisation ? 'Organisation introuvable' : organisationDetailBean.organisation.nom}
|
|
</ui:define>
|
|
|
|
<ui:define name="content">
|
|
<h:form id="formDetail">
|
|
<p:messages id="messages" showDetail="true" closable="true" styleClass="mb-3" />
|
|
|
|
<!-- ══ ÉTAT VIDE ════════════════════════════════════════════════ -->
|
|
<h:panelGroup rendered="#{empty organisationDetailBean.organisation}">
|
|
<div class="card text-center py-7">
|
|
<div class="flex align-items-center justify-content-center surface-200 border-circle mx-auto mb-4"
|
|
style="width:5rem;height:5rem;">
|
|
<i class="pi pi-exclamation-triangle text-4xl text-orange-400" />
|
|
</div>
|
|
<h4 class="text-900 font-bold mb-2">Organisation introuvable</h4>
|
|
<p class="text-600 mb-4 mx-auto" style="max-width:30rem;">
|
|
L'organisation demandée n'existe pas ou n'est pas accessible.
|
|
</p>
|
|
<p:button value="Retour à la liste" icon="pi pi-arrow-left"
|
|
styleClass="ui-button-primary"
|
|
href="/pages/secure/organisation/liste.xhtml" />
|
|
</div>
|
|
</h:panelGroup>
|
|
|
|
<!-- ══ CONTENU PRINCIPAL ════════════════════════════════════════ -->
|
|
<h:panelGroup rendered="#{not empty organisationDetailBean.organisation}">
|
|
|
|
<!-- ─── HERO CARD ─────────────────────────────────────────── -->
|
|
<div class="card mb-4" style="border-left:4px solid var(--primary-color);">
|
|
<div class="flex flex-column gap-3">
|
|
|
|
<!-- Ligne 1 : Identité visuelle + Actions -->
|
|
<div class="flex align-items-start justify-content-between flex-wrap gap-3">
|
|
<div class="flex align-items-center gap-4">
|
|
<h:panelGroup rendered="#{empty organisationDetailBean.organisation.logo}">
|
|
<div class="flex align-items-center justify-content-center bg-primary text-white font-bold text-2xl border-round-xl flex-shrink-0"
|
|
style="width:4.5rem;height:4.5rem;letter-spacing:1px;">
|
|
<h:outputText value="#{organisationDetailBean.initiales}" />
|
|
</div>
|
|
</h:panelGroup>
|
|
<h:panelGroup rendered="#{not empty organisationDetailBean.organisation.logo}">
|
|
<p:graphicImage value="#{organisationDetailBean.organisation.logo}"
|
|
styleClass="border-round-xl border-1 surface-border flex-shrink-0"
|
|
style="width:4.5rem;height:4.5rem;object-fit:cover;" />
|
|
</h:panelGroup>
|
|
<div>
|
|
<h:outputText value="#{organisationDetailBean.organisation.nom}"
|
|
styleClass="text-900 font-bold text-3xl block" />
|
|
<div class="flex align-items-center gap-2 flex-wrap mt-2">
|
|
<h:panelGroup rendered="#{not empty organisationDetailBean.organisation.nomCourt}">
|
|
<span class="text-500 font-medium text-sm surface-100 border-round px-2 py-1">
|
|
<h:outputText value="#{organisationDetailBean.organisation.nomCourt}" />
|
|
</span>
|
|
</h:panelGroup>
|
|
<p:tag value="#{organisationDetailBean.typeLibelle}" severity="info"
|
|
icon="pi pi-tag" styleClass="text-xs" />
|
|
<p:tag value="#{organisationDetailBean.statutLibelle}"
|
|
severity="#{organisationDetailBean.statutSeverity}" styleClass="text-xs" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex align-items-center gap-2 flex-wrap">
|
|
<p:button value="Retour" icon="pi pi-arrow-left"
|
|
styleClass="ui-button-secondary ui-button-outlined"
|
|
href="/pages/secure/organisation/liste.xhtml"
|
|
rendered="#{not organisationDetailBean.modeEdition}" />
|
|
<p:commandButton value="Actualiser" icon="pi pi-refresh"
|
|
styleClass="ui-button-secondary ui-button-outlined"
|
|
action="#{organisationDetailBean.actualiser}"
|
|
update="formDetail"
|
|
rendered="#{not organisationDetailBean.modeEdition}" />
|
|
<p:commandButton value="Modifier" icon="pi pi-pencil"
|
|
styleClass="ui-button-warning"
|
|
action="#{organisationDetailBean.activerEdition}"
|
|
update="formDetail"
|
|
rendered="#{not organisationDetailBean.modeEdition}" />
|
|
<p:commandButton value="Annuler" icon="pi pi-times"
|
|
styleClass="ui-button-secondary ui-button-outlined"
|
|
action="#{organisationDetailBean.annulerEdition}"
|
|
update="formDetail"
|
|
rendered="#{organisationDetailBean.modeEdition}" />
|
|
<p:commandButton value="Enregistrer" icon="pi pi-check"
|
|
styleClass="ui-button-success"
|
|
action="#{organisationDetailBean.sauvegarder}"
|
|
update="formDetail"
|
|
rendered="#{organisationDetailBean.modeEdition}" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Coordonnées rapides (mode lecture) -->
|
|
<h:panelGroup rendered="#{not organisationDetailBean.modeEdition}">
|
|
<p:divider styleClass="my-1" />
|
|
<div class="flex flex-wrap gap-4 pt-1">
|
|
<h:panelGroup rendered="#{not empty organisationDetailBean.organisation.email}">
|
|
<span class="flex align-items-center gap-2 text-600 text-sm">
|
|
<i class="pi pi-envelope text-primary" />
|
|
<h:outputText value="#{organisationDetailBean.organisation.email}" />
|
|
</span>
|
|
</h:panelGroup>
|
|
<h:panelGroup rendered="#{not empty organisationDetailBean.organisation.telephone}">
|
|
<span class="flex align-items-center gap-2 text-600 text-sm">
|
|
<i class="pi pi-phone text-primary" />
|
|
<h:outputText value="#{organisationDetailBean.organisation.telephone}" />
|
|
</span>
|
|
</h:panelGroup>
|
|
<h:panelGroup rendered="#{not empty organisationDetailBean.organisation.siteWeb}">
|
|
<span class="flex align-items-center gap-2 text-600 text-sm">
|
|
<i class="pi pi-globe text-primary" />
|
|
<h:outputText value="#{organisationDetailBean.organisation.siteWeb}" />
|
|
</span>
|
|
</h:panelGroup>
|
|
<h:panelGroup rendered="#{not empty organisationDetailBean.adresseComplete}">
|
|
<span class="flex align-items-center gap-2 text-600 text-sm">
|
|
<i class="pi pi-map-marker text-primary" />
|
|
<h:outputText value="#{organisationDetailBean.adresseComplete}" />
|
|
</span>
|
|
</h:panelGroup>
|
|
</div>
|
|
</h:panelGroup>
|
|
|
|
<!-- Métriques clés (mode lecture) -->
|
|
<h:panelGroup rendered="#{not organisationDetailBean.modeEdition}">
|
|
<p:divider styleClass="my-1" />
|
|
<div class="flex flex-wrap gap-5 pt-1">
|
|
<div class="flex align-items-center gap-2">
|
|
<div class="flex align-items-center justify-content-center surface-200 border-round-lg"
|
|
style="width:2rem;height:2rem;">
|
|
<i class="pi pi-users text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<div class="text-900 font-bold text-lg">
|
|
<h:outputText value="#{organisationDetailBean.organisation.nombreMembres != null ? organisationDetailBean.organisation.nombreMembres : '—'}" />
|
|
</div>
|
|
<div class="text-500 text-xs">Membres</div>
|
|
</div>
|
|
</div>
|
|
<h:panelGroup rendered="#{organisationDetailBean.organisation.nombreAdministrateurs != null}">
|
|
<div class="flex align-items-center gap-2">
|
|
<div class="flex align-items-center justify-content-center surface-200 border-round-lg"
|
|
style="width:2rem;height:2rem;">
|
|
<i class="pi pi-shield text-purple-600" />
|
|
</div>
|
|
<div>
|
|
<div class="text-900 font-bold text-lg">
|
|
<h:outputText value="#{organisationDetailBean.organisation.nombreAdministrateurs}" />
|
|
</div>
|
|
<div class="text-500 text-xs">Admins</div>
|
|
</div>
|
|
</div>
|
|
</h:panelGroup>
|
|
<h:panelGroup rendered="#{not empty organisationDetailBean.organisation.dateFondation}">
|
|
<div class="flex align-items-center gap-2">
|
|
<div class="flex align-items-center justify-content-center surface-200 border-round-lg"
|
|
style="width:2rem;height:2rem;">
|
|
<i class="pi pi-calendar text-green-600" />
|
|
</div>
|
|
<div>
|
|
<div class="text-900 font-bold text-lg">
|
|
<h:outputText value="#{organisationDetailBean.organisation.dateFondation}">
|
|
<f:convertDateTime pattern="dd/MM/yyyy" type="localDate" />
|
|
</h:outputText>
|
|
</div>
|
|
<div class="text-500 text-xs">Fondée le</div>
|
|
</div>
|
|
</div>
|
|
</h:panelGroup>
|
|
<h:panelGroup rendered="#{organisationDetailBean.organisation.niveauHierarchique != null}">
|
|
<div class="flex align-items-center gap-2">
|
|
<div class="flex align-items-center justify-content-center surface-200 border-round-lg"
|
|
style="width:2rem;height:2rem;">
|
|
<i class="pi pi-sitemap text-orange-600" />
|
|
</div>
|
|
<div>
|
|
<div class="text-900 font-bold text-lg">
|
|
<h:outputText value="#{organisationDetailBean.organisation.niveauHierarchique}" />
|
|
</div>
|
|
<div class="text-500 text-xs">Niveau</div>
|
|
</div>
|
|
</div>
|
|
</h:panelGroup>
|
|
<h:panelGroup rendered="#{not empty organisationDetailBean.organisation.budgetAnnuel}">
|
|
<div class="flex align-items-center gap-2">
|
|
<div class="flex align-items-center justify-content-center surface-200 border-round-lg"
|
|
style="width:2rem;height:2rem;">
|
|
<i class="pi pi-wallet text-indigo-600" />
|
|
</div>
|
|
<div>
|
|
<div class="text-900 font-bold text-lg">
|
|
<h:outputText value="#{organisationDetailBean.organisation.budgetAnnuel}" />
|
|
<span class="text-500 font-normal text-xs ml-1">
|
|
<h:outputText value="#{organisationDetailBean.organisation.devise}" />
|
|
</span>
|
|
</div>
|
|
<div class="text-500 text-xs">Budget annuel</div>
|
|
</div>
|
|
</div>
|
|
</h:panelGroup>
|
|
</div>
|
|
</h:panelGroup>
|
|
</div>
|
|
</div>
|
|
<!-- ─── /HERO CARD ─────────────────────────────────────────── -->
|
|
|
|
<!-- ══ MODE LECTURE ════════════════════════════════════════════ -->
|
|
<h:panelGroup rendered="#{not organisationDetailBean.modeEdition}">
|
|
<div class="grid">
|
|
|
|
<!-- ┄┄ SECTION : IDENTIFICATION ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ -->
|
|
<div class="col-12">
|
|
<div style="display:flex;align-items:center;gap:1rem;margin:.25rem 0 .75rem;">
|
|
<div style="height:2px;width:2rem;background:var(--blue-500);border-radius:2px;flex-shrink:0;"></div>
|
|
<span style="font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--blue-600);">
|
|
Identification
|
|
</span>
|
|
<div style="height:1px;flex:1;background:var(--surface-300);"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Identité -->
|
|
<div class="col-12 md:col-6">
|
|
<div class="card h-full" style="border-top:3px solid var(--blue-500);">
|
|
<!-- En-tête de section -->
|
|
<div class="flex align-items-center gap-3 mb-1">
|
|
<div class="flex align-items-center justify-content-center border-round-lg flex-shrink-0"
|
|
style="width:2.5rem;height:2.5rem;background:var(--blue-50);">
|
|
<i class="pi pi-id-card" style="color:var(--blue-600);font-size:1rem;" />
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-900" style="font-size:1rem;">Identité</div>
|
|
<div class="text-500" style="font-size:.75rem;">Informations d'identification officielle</div>
|
|
</div>
|
|
</div>
|
|
<p:divider styleClass="mb-3" />
|
|
|
|
<!-- Nom mis en valeur -->
|
|
<div class="mb-4 p-3 border-round"
|
|
style="background:var(--blue-50);border-left:3px solid var(--blue-300);">
|
|
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--blue-600);margin-bottom:.35rem;">
|
|
Nom complet
|
|
</div>
|
|
<div style="font-size:1.05rem;font-weight:700;color:var(--text-color);">
|
|
<h:outputText value="#{organisationDetailBean.organisation.nom}" />
|
|
</div>
|
|
</div>
|
|
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Nom court / Sigle" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.nomCourt}" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Type d'organisation" />
|
|
<ui:param name="value" value="#{organisationDetailBean.typeLibelle}" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="N° d'enregistrement" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.numeroRegistre}" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Date de fondation" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.dateFondation}" />
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contacts -->
|
|
<div class="col-12 md:col-6">
|
|
<div class="card h-full" style="border-top:3px solid var(--green-500);">
|
|
<div class="flex align-items-center gap-3 mb-1">
|
|
<div class="flex align-items-center justify-content-center border-round-lg flex-shrink-0"
|
|
style="width:2.5rem;height:2.5rem;background:var(--green-50);">
|
|
<i class="pi pi-phone" style="color:var(--green-600);font-size:1rem;" />
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-900" style="font-size:1rem;">Contacts</div>
|
|
<div class="text-500" style="font-size:.75rem;">Coordonnées de l'organisation</div>
|
|
</div>
|
|
</div>
|
|
<p:divider styleClass="mb-3" />
|
|
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Email principal" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.email}" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Email secondaire" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.emailSecondaire}" />
|
|
</ui:include>
|
|
|
|
<!-- Séparateur interne -->
|
|
<div style="display:flex;align-items:center;gap:.75rem;margin:.5rem 0 1rem;">
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
<span style="font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-color-secondary);opacity:.6;">Téléphone</span>
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
</div>
|
|
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Téléphone principal" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.telephone}" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Téléphone secondaire" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.telephoneSecondaire}" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Site web" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.siteWeb}" />
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ┄┄ SECTION : GÉOGRAPHIE & MISSION ┄┄┄┄┄┄┄┄┄┄┄┄ -->
|
|
<div class="col-12">
|
|
<div style="display:flex;align-items:center;gap:1rem;margin:.25rem 0 .75rem;">
|
|
<div style="height:2px;width:2rem;background:var(--orange-500);border-radius:2px;flex-shrink:0;"></div>
|
|
<span style="font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--orange-600);">
|
|
Géographie & Mission
|
|
</span>
|
|
<div style="height:1px;flex:1;background:var(--surface-300);"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Localisation -->
|
|
<div class="col-12 md:col-6">
|
|
<div class="card h-full" style="border-top:3px solid var(--orange-500);">
|
|
<div class="flex align-items-center gap-3 mb-1">
|
|
<div class="flex align-items-center justify-content-center border-round-lg flex-shrink-0"
|
|
style="width:2.5rem;height:2.5rem;background:var(--orange-50);">
|
|
<i class="pi pi-map-marker" style="color:var(--orange-600);font-size:1rem;" />
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-900" style="font-size:1rem;">Localisation</div>
|
|
<div class="text-500" style="font-size:.75rem;">Adresse et situation géographique</div>
|
|
</div>
|
|
</div>
|
|
<p:divider styleClass="mb-3" />
|
|
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Adresse" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.adresse}" />
|
|
</ui:include>
|
|
|
|
<!-- Sous-groupe administratif -->
|
|
<div style="display:flex;align-items:center;gap:.75rem;margin:.5rem 0 1rem;">
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
<span style="font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-color-secondary);opacity:.6;">Localisation administrative</span>
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
</div>
|
|
|
|
<div class="formgrid grid">
|
|
<div class="col-12 md:col-6">
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Quartier" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.quartier}" />
|
|
</ui:include>
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Ville" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.ville}" />
|
|
</ui:include>
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Région" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.region}" />
|
|
</ui:include>
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Pays" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.pays}" />
|
|
</ui:include>
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Code postal" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.codePostal}" />
|
|
</ui:include>
|
|
</div>
|
|
<h:panelGroup rendered="#{not empty organisationDetailBean.organisation.latitude}">
|
|
<div class="col-12">
|
|
<div style="display:flex;align-items:center;gap:.75rem;margin:.25rem 0 1rem;">
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
<span style="font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-color-secondary);opacity:.6;">Coordonnées GPS</span>
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Latitude" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.latitude}" />
|
|
</ui:include>
|
|
</div>
|
|
<div class="col-6">
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Longitude" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.longitude}" />
|
|
</ui:include>
|
|
</div>
|
|
</h:panelGroup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mission & Activités -->
|
|
<div class="col-12 md:col-6">
|
|
<div class="card h-full" style="border-top:3px solid var(--purple-500);">
|
|
<div class="flex align-items-center gap-3 mb-1">
|
|
<div class="flex align-items-center justify-content-center border-round-lg flex-shrink-0"
|
|
style="width:2.5rem;height:2.5rem;background:var(--purple-50);">
|
|
<i class="pi pi-star" style="color:var(--purple-600);font-size:1rem;" />
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-900" style="font-size:1rem;">Mission & Activités</div>
|
|
<div class="text-500" style="font-size:.75rem;">Raison d'être et domaines d'action</div>
|
|
</div>
|
|
</div>
|
|
<p:divider styleClass="mb-3" />
|
|
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Description" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.description}" />
|
|
<ui:param name="multiline" value="true" />
|
|
</ui:include>
|
|
|
|
<div style="display:flex;align-items:center;gap:.75rem;margin:.5rem 0 1rem;">
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
<span style="font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-color-secondary);opacity:.6;">Objectifs & activités</span>
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
</div>
|
|
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Objectifs" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.objectifs}" />
|
|
<ui:param name="multiline" value="true" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Activités principales" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.activitesPrincipales}" />
|
|
<ui:param name="multiline" value="true" />
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ┄┄ SECTION : ORGANISATION INTERNE ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ -->
|
|
<div class="col-12">
|
|
<div style="display:flex;align-items:center;gap:1rem;margin:.25rem 0 .75rem;">
|
|
<div style="height:2px;width:2rem;background:var(--teal-500);border-radius:2px;flex-shrink:0;"></div>
|
|
<span style="font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--teal-600);">
|
|
Organisation interne
|
|
</span>
|
|
<div style="height:1px;flex:1;background:var(--surface-300);"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gouvernance & Membres -->
|
|
<div class="col-12 md:col-6">
|
|
<div class="card h-full" style="border-top:3px solid var(--teal-500);">
|
|
<div class="flex align-items-center gap-3 mb-1">
|
|
<div class="flex align-items-center justify-content-center border-round-lg flex-shrink-0"
|
|
style="width:2.5rem;height:2.5rem;background:var(--teal-50);">
|
|
<i class="pi pi-users" style="color:var(--teal-600);font-size:1rem;" />
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-900" style="font-size:1rem;">Gouvernance & Membres</div>
|
|
<div class="text-500" style="font-size:.75rem;">Structure et politique d'adhésion</div>
|
|
</div>
|
|
</div>
|
|
<p:divider styleClass="mb-3" />
|
|
|
|
<!-- Compteurs mis en valeur -->
|
|
<div class="grid mb-4">
|
|
<div class="col-6">
|
|
<div class="text-center border-round-lg p-3"
|
|
style="background:var(--blue-50);border:1px solid var(--blue-100);">
|
|
<div style="font-size:2rem;font-weight:800;color:var(--blue-600);line-height:1;">
|
|
<h:outputText value="#{organisationDetailBean.organisation.nombreMembres != null ? organisationDetailBean.organisation.nombreMembres : '—'}" />
|
|
</div>
|
|
<div style="font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue-500);margin-top:.35rem;">
|
|
Membres
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="text-center border-round-lg p-3"
|
|
style="background:var(--purple-50);border:1px solid var(--purple-100);">
|
|
<div style="font-size:2rem;font-weight:800;color:var(--purple-600);line-height:1;">
|
|
<h:outputText value="#{organisationDetailBean.organisation.nombreAdministrateurs != null ? organisationDetailBean.organisation.nombreAdministrateurs : '—'}" />
|
|
</div>
|
|
<div style="font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--purple-500);margin-top:.35rem;">
|
|
Administrateurs
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Badges booléens -->
|
|
<div style="display:flex;align-items:center;gap:.75rem;margin:.25rem 0 .75rem;">
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
<span style="font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-color-secondary);opacity:.6;">Politique</span>
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
</div>
|
|
<div class="flex flex-column gap-2 mb-3">
|
|
<div class="flex align-items-center gap-2 px-3 py-2 border-round"
|
|
style="background:var(--surface-50);border:1px solid var(--surface-200);">
|
|
<i class="pi #{organisationDetailBean.organisation.organisationPublique ? 'pi-eye text-blue-500' : 'pi-eye-slash text-400'}" />
|
|
<span class="text-sm font-semibold">
|
|
<h:outputText value="#{organisationDetailBean.organisation.organisationPublique ? 'Organisation publique' : 'Organisation privée'}" />
|
|
</span>
|
|
</div>
|
|
<div class="flex align-items-center gap-2 px-3 py-2 border-round"
|
|
style="background:var(--surface-50);border:1px solid var(--surface-200);">
|
|
<i class="pi #{organisationDetailBean.organisation.accepteNouveauxMembres ? 'pi-user-plus text-green-500' : 'pi-ban text-400'}" />
|
|
<span class="text-sm font-semibold">
|
|
<h:outputText value="#{organisationDetailBean.organisation.accepteNouveauxMembres ? 'Ouverte aux nouveaux membres' : 'Fermée aux nouveaux membres'}" />
|
|
</span>
|
|
</div>
|
|
<div class="flex align-items-center gap-2 px-3 py-2 border-round"
|
|
style="background:var(--surface-50);border:1px solid var(--surface-200);">
|
|
<i class="pi #{organisationDetailBean.organisation.cotisationObligatoire ? 'pi-credit-card text-orange-500' : 'pi-info-circle text-400'}" />
|
|
<span class="text-sm font-semibold">
|
|
<h:outputText value="#{organisationDetailBean.organisation.cotisationObligatoire ? 'Cotisation obligatoire' : 'Cotisation libre'}" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Niveau hiérarchique" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.niveauHierarchique}" />
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Finance & Cotisations -->
|
|
<div class="col-12 md:col-6">
|
|
<div class="card h-full" style="border-top:3px solid var(--indigo-500);">
|
|
<div class="flex align-items-center gap-3 mb-1">
|
|
<div class="flex align-items-center justify-content-center border-round-lg flex-shrink-0"
|
|
style="width:2.5rem;height:2.5rem;background:var(--indigo-50);">
|
|
<i class="pi pi-wallet" style="color:var(--indigo-600);font-size:1rem;" />
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-900" style="font-size:1rem;">Finance & Cotisations</div>
|
|
<div class="text-500" style="font-size:.75rem;">Budget et politique financière</div>
|
|
</div>
|
|
</div>
|
|
<p:divider styleClass="mb-3" />
|
|
|
|
<!-- Budget mis en valeur -->
|
|
<h:panelGroup rendered="#{not empty organisationDetailBean.organisation.budgetAnnuel}">
|
|
<div class="border-round-lg p-3 mb-4"
|
|
style="background:linear-gradient(135deg,var(--indigo-600),var(--indigo-800));">
|
|
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.65);margin-bottom:.4rem;">
|
|
Budget annuel
|
|
</div>
|
|
<div style="font-size:1.6rem;font-weight:800;color:#fff;line-height:1.2;">
|
|
<h:outputText value="#{organisationDetailBean.organisation.budgetAnnuel}" />
|
|
<span style="font-size:.9rem;font-weight:500;opacity:.75;margin-left:.4rem;">
|
|
<h:outputText value="#{organisationDetailBean.organisation.devise}" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</h:panelGroup>
|
|
<h:panelGroup rendered="#{empty organisationDetailBean.organisation.budgetAnnuel}">
|
|
<div class="border-round-lg p-3 mb-4"
|
|
style="background:var(--surface-100);border:1px dashed var(--surface-300);">
|
|
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text-color-secondary);margin-bottom:.4rem;">
|
|
Budget annuel
|
|
</div>
|
|
<em style="color:var(--text-color-secondary);opacity:.45;font-size:.875rem;">Non renseigné</em>
|
|
</div>
|
|
</h:panelGroup>
|
|
|
|
<div style="display:flex;align-items:center;gap:.75rem;margin:.25rem 0 1rem;">
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
<span style="font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-color-secondary);opacity:.6;">Cotisations membres</span>
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
</div>
|
|
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Montant de la cotisation annuelle" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.montantCotisationAnnuelle}" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Devise" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.devise}" />
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ┄┄ SECTION : RÉSEAU & ADMINISTRATIF ┄┄┄┄┄┄┄┄┄┄ -->
|
|
<div class="col-12">
|
|
<div style="display:flex;align-items:center;gap:1rem;margin:.25rem 0 .75rem;">
|
|
<div style="height:2px;width:2rem;background:var(--pink-500);border-radius:2px;flex-shrink:0;"></div>
|
|
<span style="font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--pink-600);">
|
|
Réseau & Administratif
|
|
</span>
|
|
<div style="height:1px;flex:1;background:var(--surface-300);"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Partenariats & Réseaux -->
|
|
<div class="col-12 md:col-6">
|
|
<div class="card h-full" style="border-top:3px solid var(--pink-500);">
|
|
<div class="flex align-items-center gap-3 mb-1">
|
|
<div class="flex align-items-center justify-content-center border-round-lg flex-shrink-0"
|
|
style="width:2.5rem;height:2.5rem;background:var(--pink-50);">
|
|
<i class="pi pi-share-alt" style="color:var(--pink-600);font-size:1rem;" />
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-900" style="font-size:1rem;">Partenariats & Réseaux</div>
|
|
<div class="text-500" style="font-size:.75rem;">Présence en ligne et alliances</div>
|
|
</div>
|
|
</div>
|
|
<p:divider styleClass="mb-3" />
|
|
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Réseaux sociaux" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.reseauxSociaux}" />
|
|
<ui:param name="multiline" value="true" />
|
|
</ui:include>
|
|
|
|
<div style="display:flex;align-items:center;gap:.75rem;margin:.5rem 0 1rem;">
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
<span style="font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-color-secondary);opacity:.6;">Partenaires & certifications</span>
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
</div>
|
|
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Certifications / Labels" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.certifications}" />
|
|
<ui:param name="multiline" value="true" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/forms/detail-field.xhtml">
|
|
<ui:param name="label" value="Partenaires principaux" />
|
|
<ui:param name="value" value="#{organisationDetailBean.organisation.partenaires}" />
|
|
<ui:param name="multiline" value="true" />
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hiérarchie & Notes -->
|
|
<div class="col-12 md:col-6">
|
|
<div class="card h-full" style="border-top:3px solid var(--cyan-500);">
|
|
<div class="flex align-items-center gap-3 mb-1">
|
|
<div class="flex align-items-center justify-content-center border-round-lg flex-shrink-0"
|
|
style="width:2.5rem;height:2.5rem;background:var(--cyan-50);">
|
|
<i class="pi pi-sitemap" style="color:var(--cyan-600);font-size:1rem;" />
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-900" style="font-size:1rem;">Hiérarchie & Notes</div>
|
|
<div class="text-500" style="font-size:.75rem;">Rattachement et observations internes</div>
|
|
</div>
|
|
</div>
|
|
<p:divider styleClass="mb-3" />
|
|
|
|
<h:panelGroup rendered="#{not empty organisationDetailBean.organisation.nomOrganisationParente}">
|
|
<div class="border-round-lg p-3 mb-4 flex align-items-center gap-3"
|
|
style="background:var(--cyan-50);border:1px solid var(--cyan-100);">
|
|
<i class="pi pi-arrow-up text-cyan-600" />
|
|
<div>
|
|
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--cyan-600);margin-bottom:.2rem;">
|
|
Rattachée à
|
|
</div>
|
|
<div style="font-weight:700;color:var(--text-color);">
|
|
<h:outputText value="#{organisationDetailBean.organisation.nomOrganisationParente}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</h:panelGroup>
|
|
<h:panelGroup rendered="#{empty organisationDetailBean.organisation.nomOrganisationParente}">
|
|
<div class="mb-4">
|
|
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text-color-secondary);opacity:.7;margin-bottom:.35rem;">
|
|
Organisation parente
|
|
</div>
|
|
<em style="font-size:.875rem;color:var(--text-color-secondary);opacity:.45;">Aucune (organisation racine)</em>
|
|
</div>
|
|
</h:panelGroup>
|
|
|
|
<div style="display:flex;align-items:center;gap:.75rem;margin:.25rem 0 1rem;">
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
<span style="font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-color-secondary);opacity:.6;">Notes administratives</span>
|
|
<div style="height:1px;flex:1;background:var(--surface-200);"></div>
|
|
</div>
|
|
|
|
<h:panelGroup rendered="#{not empty organisationDetailBean.organisation.notes}">
|
|
<div class="border-round-lg p-3"
|
|
style="background:var(--surface-50);border-left:3px solid var(--cyan-300);font-size:.9rem;line-height:1.7;color:var(--text-color);white-space:pre-line;">
|
|
<h:outputText value="#{organisationDetailBean.organisation.notes}" />
|
|
</div>
|
|
</h:panelGroup>
|
|
<h:panelGroup rendered="#{empty organisationDetailBean.organisation.notes}">
|
|
<em style="font-size:.875rem;color:var(--text-color-secondary);opacity:.45;">Aucune note</em>
|
|
</h:panelGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ┄┄ SECTION : TRAÇABILITÉ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ -->
|
|
<div class="col-12">
|
|
<div style="display:flex;align-items:center;gap:1rem;margin:.25rem 0 .75rem;">
|
|
<div style="height:2px;width:2rem;background:var(--gray-400);border-radius:2px;flex-shrink:0;"></div>
|
|
<span style="font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--gray-500);">
|
|
Traçabilité
|
|
</span>
|
|
<div style="height:1px;flex:1;background:var(--surface-300);"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="card" style="border-top:3px solid var(--gray-400);background:var(--surface-50);">
|
|
<div class="formgrid grid">
|
|
<div class="col-12 md:col-3">
|
|
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-color-secondary);margin-bottom:.3rem;">
|
|
Créé le
|
|
</div>
|
|
<h:outputText value="#{organisationDetailBean.organisation.dateCreation}">
|
|
<f:convertDateTime pattern="dd/MM/yyyy HH:mm" type="localDateTime" />
|
|
</h:outputText>
|
|
</div>
|
|
<div class="col-12 md:col-3">
|
|
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-color-secondary);margin-bottom:.3rem;">
|
|
Créé par
|
|
</div>
|
|
<h:outputText value="#{not empty organisationDetailBean.organisation.creePar ? organisationDetailBean.organisation.creePar : '—'}" />
|
|
</div>
|
|
<div class="col-12 md:col-3">
|
|
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-color-secondary);margin-bottom:.3rem;">
|
|
Modifié le
|
|
</div>
|
|
<h:outputText value="#{organisationDetailBean.organisation.dateModification}">
|
|
<f:convertDateTime pattern="dd/MM/yyyy HH:mm" type="localDateTime" />
|
|
</h:outputText>
|
|
</div>
|
|
<div class="col-12 md:col-3">
|
|
<div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-color-secondary);margin-bottom:.3rem;">
|
|
Modifié par
|
|
</div>
|
|
<h:outputText value="#{not empty organisationDetailBean.organisation.modifiePar ? organisationDetailBean.organisation.modifiePar : '—'}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</h:panelGroup>
|
|
<!-- ── /MODE LECTURE ──────────────────────────────────────── -->
|
|
|
|
<!-- ══ MODE ÉDITION ════════════════════════════════════════════ -->
|
|
<h:panelGroup rendered="#{organisationDetailBean.modeEdition}">
|
|
<div class="card">
|
|
<div class="flex align-items-center justify-content-between mb-4">
|
|
<div class="flex align-items-center gap-2">
|
|
<div class="flex align-items-center justify-content-center surface-100 border-round"
|
|
style="width:2rem;height:2rem;">
|
|
<i class="pi pi-pencil text-primary" />
|
|
</div>
|
|
<h5 class="m-0 text-900">Modifier l'organisation</h5>
|
|
</div>
|
|
<p:tag value="Mode édition" severity="warning" icon="pi pi-pencil" />
|
|
</div>
|
|
|
|
<ui:include src="/ui/includes/organisation-form.xhtml">
|
|
<ui:param name="model" value="#{organisationDetailBean.organisation}" />
|
|
<ui:param name="typesItems" value="#{organisationDetailBean.typesSelectItemsForForm}" />
|
|
<ui:param name="completionBean" value="#{organisationDetailBean}" />
|
|
</ui:include>
|
|
|
|
<p:divider styleClass="mt-4" />
|
|
<div class="flex justify-content-end gap-2">
|
|
<p:commandButton value="Annuler les modifications" icon="pi pi-times"
|
|
styleClass="ui-button-secondary ui-button-outlined"
|
|
action="#{organisationDetailBean.annulerEdition}"
|
|
update="formDetail" />
|
|
<p:commandButton value="Enregistrer les modifications" icon="pi pi-check"
|
|
styleClass="ui-button-success"
|
|
action="#{organisationDetailBean.sauvegarder}"
|
|
update="formDetail" />
|
|
</div>
|
|
</div>
|
|
</h:panelGroup>
|
|
<!-- ── /MODE ÉDITION ─────────────────────────────────────── -->
|
|
|
|
</h:panelGroup>
|
|
</h:form>
|
|
</ui:define>
|
|
</ui:composition>
|