thomas

TP4/EX0/app.riot

@@ -0,0 +1,39 @@
+<app>
+    <h1>Personnages des Simpsons</h1>
+    <div class="controls">
+        <button onclick="{ () => sort('prenom') }">Trier par Prénom</button>
+        <button onclick="{ () => sort('age') }">Trier par Âge</button>
+    </div>
+
+    <my-list personnages="{ state.personnages }" onselect="{ selectCharacter }"></my-list>
+
+    <div if="{ state.selectedCharacter }" class="selected-char">
+        <h3>Personnage sélectionné :</h3>
+        <p><strong>Nom :</strong> { state.selectedCharacter.prenom } { state.selectedCharacter.nom }</p>
+        <p><strong>Âge :</strong> { state.selectedCharacter.age !== null ? state.selectedCharacter.age : 'inconnu' }</p>
+    </div>
+
+    <script>
+        export default {
+            onMounted(props) {
+                this.update({
+                    personnages: [...props.personnages],
+                    selectedCharacter: null
+                });
+            },
+
+            sort(key) {
+                const sorted = [...this.state.personnages].sort((a, b) => {
+                    if (a[key] === null) return 1;
+                    if (b[key] === null) return -1;
+                    return a[key] > b[key] ? 1 : -1;
+                });
+                this.update({ personnages: sorted });
+            },
+
+            selectCharacter(character) {
+                this.update({ selectedCharacter: character });
+            }
+        }
+    </script>
+</app>