# Intégration de PrimeFaces Freya Extension dans Lions User Manager

Ce guide explique comment intégrer **primefaces-freya-extension** dans le projet **lions-user-manager**.

## ✅ Compatibilité vérifiée

| Composant | lions-user-manager | primefaces-freya-extension | Status |
|-----------|-------------------|---------------------------|--------|
| Java | 17 | 17 | ✅ Compatible |
| Quarkus | 3.15.1 | 3.15.1 | ✅ Compatible |
| PrimeFaces | 14.0.5 | 14.0.0 | ✅ Compatible |
| Freya Theme | 5.0.0 | 5.0.0 | ✅ Compatible |

## 📦 Étape 1 : Installer primefaces-freya-extension localement

```bash
# Aller dans le répertoire primefaces-freya-extension
cd C:\Users\dadyo\PersonalProjects\lions-workspace\primefaces-freya-extension

# Compiler et installer dans le repository Maven local
mvn clean install

# Vérifier l'installation
# L'artefact sera dans : ~/.m2/repository/dev/lions/primefaces-freya-extension-runtime/1.0.0-SNAPSHOT/
```

## 🔧 Étape 2 : Ajouter la dépendance dans lions-user-manager

### 2.1 Modifier le pom.xml parent

Éditer `lions-user-manager/pom.xml` :

```xml
<properties>
    <!-- ... autres propriétés ... -->
    <primefaces-freya-extension.version>1.0.0-SNAPSHOT</primefaces-freya-extension.version>
</properties>

<dependencyManagement>
    <dependencies>
        <!-- ... autres dépendances ... -->
        
        <!-- PrimeFaces Freya Extension -->
        <dependency>
            <groupId>dev.lions</groupId>
            <artifactId>primefaces-freya-extension-runtime</artifactId>
            <version>${primefaces-freya-extension.version}</version>
        </dependency>
    </dependencies>
</dependencyManagement>
```

### 2.2 Modifier le pom.xml du client

Éditer `lions-user-manager/lions-user-manager-client-quarkus-primefaces-freya/pom.xml` :

```xml
<dependencies>
    <!-- ... autres dépendances ... -->
    
    <!-- PrimeFaces Freya Extension -->
    <dependency>
        <groupId>dev.lions</groupId>
        <artifactId>primefaces-freya-extension-runtime</artifactId>
    </dependency>
</dependencies>
```

## 🎨 Étape 3 : Utiliser les composants dans vos pages XHTML

### 3.1 Ajouter le namespace

Dans vos fichiers `.xhtml`, ajouter :

```xml
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:fr="http://primefaces.org/freya">
```

### 3.2 Remplacer les composants PrimeFaces par les composants Freya

**Avant (PrimeFaces standard) :**
```xml
<div class="field">
    <p:outputLabel for="username" value="Nom d'utilisateur">
        <span class="p-error"> *</span>
    </p:outputLabel>
    <p:inputText id="username" value="#{userBean.username}" required="true" />
    <p:message for="username" />
</div>
```

**Après (Freya Extension) :**
```xml
<fr:fieldInput label="Nom d'utilisateur" 
               value="#{userBean.username}" 
               required="true" />
```

**Réduction : 80% moins de code !**

## 📝 Exemples de migration

### Exemple 1 : Formulaire de création d'utilisateur

**Avant :**
```xml
<h:form id="createUserForm">
    <div class="field">
        <p:outputLabel for="firstName" value="Prénom">
            <span class="p-error"> *</span>
        </p:outputLabel>
        <p:inputText id="firstName" value="#{userBean.firstName}" required="true" />
        <p:message for="firstName" />
    </div>
    
    <div class="field">
        <p:outputLabel for="lastName" value="Nom">
            <span class="p-error"> *</span>
        </p:outputLabel>
        <p:inputText id="lastName" value="#{userBean.lastName}" required="true" />
        <p:message for="lastName" />
    </div>
    
    <div class="field">
        <p:outputLabel for="email" value="Email">
            <span class="p-error"> *</span>
        </p:outputLabel>
        <p:inputText id="email" value="#{userBean.email}" required="true" />
        <p:message for="email" />
    </div>
    
    <p:commandButton value="Créer" action="#{userBean.create}" update="createUserForm" />
</h:form>
```

**Après :**
```xml
<h:form id="createUserForm">
    <fr:fieldInput label="Prénom" value="#{userBean.firstName}" required="true" />
    <fr:fieldInput label="Nom" value="#{userBean.lastName}" required="true" />
    <fr:fieldInput label="Email" value="#{userBean.email}" required="true" />
    
    <fr:commandButton value="Créer" 
                      action="#{userBean.create}" 
                      update="createUserForm" 
                      severity="success" 
                      icon="pi pi-user-plus" />
</h:form>
```

### Exemple 2 : Dialog d'édition

**Avant :**
```xml
<p:dialog id="editDialog" widgetVar="editDialog" header="Éditer l'utilisateur" modal="true">
    <h:form id="editForm">
        <div class="field">
            <p:outputLabel for="editFirstName" value="Prénom" />
            <p:inputText id="editFirstName" value="#{userBean.selectedUser.firstName}" />
            <p:message for="editFirstName" />
        </div>
        
        <f:facet name="footer">
            <p:commandButton value="Annuler" onclick="PF('editDialog').hide()" />
            <p:commandButton value="Sauvegarder" action="#{userBean.save}" update="userTable" />
        </f:facet>
    </h:form>
</p:dialog>
```

**Après :**
```xml
<fr:actionDialog widgetVar="editDialog" 
                 header="Éditer l'utilisateur"
                 confirmAction="#{userBean.save}"
                 confirmUpdate="userTable">
    <fr:fieldInput label="Prénom" value="#{userBean.selectedUser.firstName}" />
    <fr:fieldInput label="Nom" value="#{userBean.selectedUser.lastName}" />
    <fr:fieldInput label="Email" value="#{userBean.selectedUser.email}" />
</fr:actionDialog>
```

### Exemple 3 : DataTable

**Avant :**
```xml
<p:dataTable id="userTable" 
             value="#{userBean.users}" 
             var="user"
             paginator="true"
             rows="10"
             styleClass="p-datatable-striped">
    <p:column headerText="Nom">
        <h:outputText value="#{user.lastName}" />
    </p:column>
    <p:column headerText="Prénom">
        <h:outputText value="#{user.firstName}" />
    </p:column>
    <p:column headerText="Email">
        <h:outputText value="#{user.email}" />
    </p:column>
</p:dataTable>
```

**Après :**
```xml
<fr:dataTable value="#{userBean.users}" 
              var="user" 
              paginator="true" 
              rows="10">
    <p:column headerText="Nom">
        <h:outputText value="#{user.lastName}" />
    </p:column>
    <p:column headerText="Prénom">
        <h:outputText value="#{user.firstName}" />
    </p:column>
    <p:column headerText="Email">
        <h:outputText value="#{user.email}" />
    </p:column>
</fr:dataTable>
```

## 🎯 Composants disponibles pour lions-user-manager

### Formulaires (18 composants)
- `fr:fieldInput` - Champs texte (username, firstName, lastName, email)
- `fr:fieldPassword` - Mot de passe
- `fr:fieldSelect` - Rôles, groupes, organisations
- `fr:fieldCheckbox` - Actif/Inactif, Email vérifié
- `fr:fieldCalendar` - Date de création, dernière connexion
- `fr:fieldTextarea` - Description, notes
- Et 12 autres...

### Données (4 composants)
- `fr:dataTable` - Liste des utilisateurs
- `fr:dataView` - Vue grille des utilisateurs
- `fr:tree` - Hiérarchie des organisations
- `fr:treeTable` - Table hiérarchique

### Dialogs (2 composants)
- `fr:actionDialog` - Éditer, Supprimer
- `fr:formDialog` - Créer utilisateur

### Feedback (3 composants)
- `fr:growl` - Notifications (succès, erreur)
- `fr:message` - Messages de validation
- `fr:inplace` - Édition rapide

### Actions (4 composants)
- `fr:commandButton` - Créer, Éditer, Supprimer
- `fr:button` - Navigation
- `fr:linkButton` - Liens
- `fr:splitButton` - Actions multiples

## 🚀 Étape 4 : Tester l'intégration

```bash
# Compiler lions-user-manager
cd C:\Users\dadyo\PersonalProjects\lions-workspace\lions-user-manager
mvn clean install

# Lancer le client
cd lions-user-manager-client-quarkus-primefaces-freya
mvn quarkus:dev

# Accéder à l'application
# http://localhost:9090
```

## 📊 Bénéfices attendus

- ✅ **Réduction de 80% du code XHTML**
- ✅ **Cohérence visuelle** avec le thème Freya
- ✅ **Maintenance simplifiée** (un seul endroit pour modifier le pattern)
- ✅ **Accessibilité améliorée** (WCAG 2.1 AA)
- ✅ **Développement plus rapide** (moins de boilerplate)

## 🔧 Dépannage

### Problème : Composants non reconnus

**Solution :** Vérifier que la dépendance est bien ajoutée et que le namespace est correct :
```xml
xmlns:fr="http://primefaces.org/freya"
```

### Problème : Styles non appliqués

**Solution :** Vérifier que les ressources Freya sont chargées dans votre template :
```xml
<h:outputStylesheet name="freya-layout/css/layout-light.css" />
```

### Problème : Conflit de versions

**Solution :** Utiliser la même version de PrimeFaces partout (14.0.5 recommandé)

## 📚 Documentation

- [README Freya Extension](../primefaces-freya-extension/README.md)
- [Guide de démarrage rapide](../primefaces-freya-extension/QUICKSTART.md)
- [Liste complète des composants](../primefaces-freya-extension/README.md#-composants-disponibles-46-au-total)

## ✅ Checklist d'intégration

- [ ] primefaces-freya-extension compilé et installé localement
- [ ] Dépendance ajoutée dans pom.xml parent
- [ ] Dépendance ajoutée dans pom.xml client
- [ ] Namespace ajouté dans les pages XHTML
- [ ] Premiers composants migrés
- [ ] Tests effectués
- [ ] Application fonctionne correctement

Bonne intégration ! 🚀

