00:00Bonjour à tous et bienvenue dans cette vidéo où nous allons enfin nous occuper de finir notre routage admin.
00:06On avait vu dans la précédente comment avoir plusieurs, entre guillemets, routers au sein de notre routeur principal,
00:13qui est mon app.js, et puis on avait vu les différents problèmes qu'on avait avec le routeur V6.
00:20Bien, donc on a traversé notre layout, et puis on a notre première page qui est la dashboard.
00:30Alors, on va rapidement aussi se cogner, je crois qu'on les avait fait, voilà, dans l'admin public on
00:35avait un header et une sidebar.
00:37Alors on va de suite se les brancher dans notre admin layout.
00:44Ici on a, comment je vais la faire celle-là ?
00:48Bon, bah déjà j'ai mon header ici.
00:55Tiens, tu le connais pas ? Tu es casse-pieds, je vais l'importer.
01:00Alors, import, le header, qu'est-ce que je fais ?
01:05Hop, le header venant de arrobase slash components slash, alors, admin, youpla !
01:18Non, dans components il n'y a pas de A majuscule, slash header.
01:25Ok, je vais me ramener ma sidebar, comme ça, ça sera fait.
01:31Hop.
01:35Non, bon, side menu, pardon.
01:38Ok, donc ici je ferme.
01:41Ensuite, on va dire que j'ai un div.
01:45Ah oui, mais il va pas marcher.
01:48Non, il va pas marcher.
01:50Ok, super.
01:54Ici, j'ai une div.
01:57Avec l'idée, avec l'idée, admin, container.
02:07Donc je vais mettre admin.
02:10Bon, vous allez comprendre après.
02:12Et ici, j'ai une div.
02:17Avec, non, j'ai pas de div, j'ai directement mon side menu.
02:25Hop, et ici, on va dire que j'ai une div.
02:31Tac, tac, et c'est là-dedans que se situe mon outlet.
02:39Là, j'ai quelque chose dans mon menu.
02:41Oui, dans mon header.
02:43Ok, donc ça donne quoi ?
02:44Ok, ça donne ça, il y a tout qui est là, mais c'est pas, évidemment, super propre.
02:52Alors, voyons voir, voyons voir, voyons voir, voyons voir.
02:56Hop, ici, si je te cogne.
02:59Mais non, c'est ici.
03:02Alors, on va dire que l'idée admin, c'est un display flex.
03:09Ça va déjà mieux.
03:14Ici, comment ça, une menu ?
03:18Alors, si je fais pareil que d'habitude, un flex grow de 1.
03:24Ouais.
03:26Et ici, un flex grow de 6.
03:32Ok, ça fait quoi ?
03:34Lui, il est comme ça, et lui, il est comme ça.
03:36Ouais, allez, ça va le faire.
03:40Donc, ici, dans mon layout, dans mon layout, dans mon layout, dans mon layout.
03:50Ah, oui, il faudrait que je fasse un peu de style.
03:58Bon, ben, on va faire du style, on va faire le style admin, tiens.
04:05Hop, allez, new file admin.css.
04:11Je sais que c'est pas très joli, mais enfin bon.
04:13Donc, j'avais dit quoi ?
04:15Dans mon layout, j'ai l'idée admin.
04:19Alors déjà, il faudrait que je me l'importe.
04:24Import, tac, tac, admin.css.
04:31Hop, donc, ce qui est admin, c'est du display flex.
04:40J'avais dit ça comme ça.
04:42Alors, voyons voir si je rafraîchis, forcément.
04:47Ah, ah oui, évidemment, CSS, Florian.
04:51Hop là, donc j'ai mon dièse.
04:54Voilà, ça c'est fait.
04:56Tiens, je vais tenter un truc.
04:57Je veux simplement me faire le reste.
05:01Donc, si je dis que la classe side menu est admin body,
05:07je vais essayer de le mettre là, directement ici.
05:08Comme ça, ça sera fait.
05:10C'est pas très très joli, mais...
05:12Side menu.
05:15Hop.
05:17Flex grow 2.
05:20Hop.
05:24Mais, hop là, flex grow 2.1.
05:27Et, qu'est-ce que j'ai ?
05:29Admin body.
05:33Admin body.
05:36Flex grow 2.6.
05:43Eh ben, dis donc, aujourd'hui, j'écris avec mes pieds.
05:46Alors, voyons voir ce que ça donne.
05:48Ok, ça l'a pris, donc, on peut, comme ça,
05:51directement se faire les parties enfants.
05:53D'ailleurs, mon side menu, je vais quand même, hop,
05:57lui coller une petite bordure.
05:58Ça sera fait, comme ça, c'est plus facile à voir derrière.
06:01C'est vraiment pas, hop.
06:03Border ride.solid.1px.gray.
06:10Voilà, voilà, voilà, voilà, voilà, voilà.
06:13On n'est pas dans le côté absolu, hein.
06:16Et puis, mon body, je vais le pousser un petit peu.
06:20Padding left.
06:2315 pixels.
06:25Voilà, c'est joli, c'est sympa, c'est tout mignon.
06:28Évidemment, vous aurez le code.
06:29Donc, je l'ai mis dans l'admin, l'admin qui a été appelé par le layout.
06:33Comme ça, j'ai tout mon code qui descend là-dedans.
06:36C'est impeccable.
06:37Maintenant, c'est parti.
06:40Donc, user, il me faut un index.js.
06:44Hop là.
06:45Index.js, même délire.
06:47Hop, on va se récupérer le fonctionnement du bousin.
06:50Donc, ici, j'ai besoin de user venant de user.
07:05J'ai besoin de user.add venant de user.add.
07:15D'ailleurs, non, je vais l'appeler add.
07:18Voilà, on peut changer le nom, ce n'est qu'un alias, au final.
07:23Hop, export, ce qui est en default, donc je vais l'appeler edit.
07:30Et ça vient de mon user.edit.
07:35Impeccable.
07:37Du coup, dans mon routeur, je vais importer, alors, user.edit.
07:48Edit et add venant de arrobase page slash admin slash user.
07:59OK.
08:01On est bien là.
08:03Et on va également se faire la même chose pour cocktail.
08:08Index.js.
08:11Donc, je vais prendre ça, je vais faire copier.
08:15Dans cocktail, je me mets là.
08:17Donc, on va faire cocktail venant de cocktail.
08:26Voilà.
08:27Et on va faire edit venant de cocktail.edit.
08:38Voilà.
08:39Si je ne me trompe pas, on est bien.
08:42Impeccable.
08:43L'admin routeur, donc, je m'importe.
08:49Tac.
08:51Cocktail et edit venant de arrobase pages slash admin slash cocktail.
09:05Par contre, je pense que là, il va me péter un plomb.
09:10Je vais faire uedit et cedit.
09:18Et ça, c'est uedit.
09:20Donc, ça, c'est cedit.
09:24Et ça, c'est uedit.
09:27Voilà.
09:28Ça évitera d'avoir des confusions d'alias.
09:31Parce que je vous rappelle que, encore une fois, tout ça, ce sont des alias.
09:34Alors, on a dit quoi ?
09:35On a dit, là aussi, qu'on va se cogner de la route en France standard, classique.
09:42Parce qu'on veut légèrement préfixer la chose.
09:47Alors, pour faire la blague, on va s'occuper de la route user.
09:52Route path user.
10:02Je ne mets pas de layout, je n'en ai pas besoin.
10:05Donc, on va dire route path index.
10:10On va faire comme ça.
10:12Element, hop, tac, c'est user.
10:20On va se cogner les trois autres.
10:23Donc, ici, ça, c'est le edit.
10:30Edit.
10:33Ça, c'est le uedit.
10:36Et on va se cogner le add.
10:40Pour faire le add.
10:45Piu, celle-là a été dure.
10:47Pourquoi j'ai un warnage ?
10:50Ah oui, parce que j'ai cocktail et tout.
10:51Ok.
10:53Donc, ici, si je fais user index, qu'est-ce qui me dit ?
11:04User list.
11:05Boum, ça fonctionne.
11:07Si je mets add, j'ai user add.
11:14Et puis, du coup, tiens, il y a un truc sympa aussi qu'on pourrait regarder.
11:18Si je mets n'importe quoi.
11:20Bon, ben là, je n'ai rien.
11:22Bon, on a compris, ça fonctionne.
11:24On a branché simplement nos routes comme ça.
11:27Mais si ça ne marche pas ici, et même nulle part, il faut quand même que j'ai une route.
11:32Une route d'erreur.
11:33Alors, on peut faire deux composants d'erreur, un pour l'admin et un pour le public.
11:43En fait, je vais utiliser le même.
11:44Route path, tac, element, égale, c'est l'erreur component.
11:58L'erreur, lui, qu'il faut que je m'importe quand même.
12:03Hop, erreur, from, arroba, slash, utile, slash, erreur.
12:12Oui, ça, c'est que des warnings.
12:13Et voilà, donc là, j'ai mon erreur 404 qui se met là.
12:16C'est impeccable.
12:17Là, ça fonctionne.
12:19Alors, qu'on soit bien d'accord, ici, j'ai un système d'erreur.
12:23Il faudrait peut-être même que j'en mette là, mais en fait, non.
12:25Non, non, il le prend.
12:27Alors, parce que dans mon routeur principal, ici, j'ai bien branché mes points d'entrée,
12:40il est capable de faire la différence entre le pass magique de mon routeur public
12:45et le pass magique de mon routeur admin.
12:47Donc, il n'y a pas de confusion.
12:49Alors, hop, bon, la vidéo commence à être un peu longue.
12:52Donc, vous vous doutez bien que je vais faire, évidemment, la même chose pour ma partie cocktail.
13:00C'est des routes, un chemage, c'est pas la peine de refaire la même chose.
13:03Mais dans la prochaine vidéo, on va s'occuper de notre menu.
13:06Il y a des petits trucs sympas qu'on peut faire avec cette histoire de menu.
13:11Et on va en profiter pour le mettre en place.
13:14Donc, prochaine vidéo, la barre de navigation à côté.
13:19Et puis, peut-être un peu plus de style aussi sur l'admin, on verra bien.
Commentaires