[frontend] Ajout d'un second layout

Après analyses, je propose l'architecture suivante :

Architecture

Un dossier layouts contenant autant de dossiers que de layouts proposés (actuellement il y en aurait 2) Chaque layout contiendrait les composants de bases suivants :
- Layout pour le composant racine du layout de l'app
- BaseView pour le composant de base des vues List, Create, Edit et Show
- Aside pour le composant de base de la colonne latérale
Un LayoutContext qui serait inséré dans le composant App (et dont le fichier serait à la racine du dossier layouts) et contenant :
- le nom du layout actuel
- les options du layout actuel
- les composants personnalisés du layout (soit les 3 composants listé ci-dessus)
La suppression du dossier actuel layout:
- Les composants actuels Layout, BaseView, ainsi que leurs enfants (AppBar, SearchForm, TreeMenu) seraient déplacés dans le nouveau dossier layouts/<NOM DU LAYOUT>/
- Les sous-dossiers Create, Edit, List et Show seraient déplacés vers un nouveau sous-dossier common/layout, car pour l'instant ces composants ne sont pas modifiés entre les layouts.
La création d'un composant de base Aside pour le layout actuel, qui serait appelé par tous les composants de sideBar situés dans le dossier resources (EventFilterSidebar, OrganizationFilterSidebar, etc.)
Un nouvel attribut dans le fichier config/config.ts nommé layout pour définir le layout courant. Son format serait le suivant :
```
layout: {
name: '<NOM DU LAYOUT>',
options: { // Objet optionnel
  param1: 'value1',
  ...
}
}
```

Exemples d'utilisation

// App.js
import config from './config/config';
...
<LayoutProvider layoutOptions={config.layout}>
    <Admin />
</LayoutProvider>

// Dans un des composants du projet (par exemple le composant common/layout/List/ListView.tsx)

const CreateView = ({ title, actions, children }: PropsWithChildren<Props>) => {
  ...
  const Layout = useLayoutContext();

  return(
    <Layout.BaseView title={title} actions={actions}>
      {children}
    </Layout.BaseView>
  )
};

// Dans un composant dont le rendu serait différent entre les layouts (par exemple resources/.../OrganizationFilterSidebar.js)

const OrganizationFilterSidebar = () => {
  ...
  const Layout = useLayoutContext();

  return(
    <Layout.Aside>
      {Layout.name === '<NOM DU LAYOUT 2>' && (
          <div>Champ de recherche</div>
      )}
      <ReferenceFilter reference="Type" ... >
      <ReferenceFilter reference="Theme"... >
    </Layout.Aside>
  )
};

// Dans un composant ayant besoin des options du layout

const BaseView = () => {
  ...
  const Layout = useLayoutContext<LayoutOptions>(); // <- On peut typer ici pour être sûr d'utiliser les options du bon layout

  return(
    <div>
        {Layout.options.title || 'App title'} 
        {Layout.options.componentPlacement === 'left ? <div>left</div> : <div>right</div>} 
    </div>
  )
};

Options des layouts

Layout actuel (AV) :

Pas d'options, la configuration par défaut sera donc

{ 
    name: '<NOM DU LAYOUT>'
}

Second layout (Transiscope et +)

{
    name: '<NOM DU LAYOUT 2>',
    options: Partial<{
        // Position de la sideBar des filtres (optionnel, défaut à gauche)
        sideBarPlacement: 'left' | 'right'; 

        // Lien vers une image de logo dans la TopBar (optionnel, par défaut pas de logo)
        logo: string; 

        // Composant pour afficher le titre dans la TopBar (optionnel, par défaut le titre défini dans App)
        title: () => JSX.Element; 

        // Configuration des boutons affichés dans la topBar (4 maxi selon le référentiel Material UI), aucun par défaut
        mainMenu: {
          // Resource correspondante au lien (sert à la masquer dans le menu dropdown si déjà dans la topBar)
          resource: string; 

          // Texte affiché
          label: string; 

          // Lien éventuel (optionnel?, par défaut le lien de la resource?)
          link?: string; 

          // Icone affichée à gauche du texte (optionnelle ?)
          icon?: () => JSX.Element; 
        }[]
      }>
}

Etapes

Vu que le sujet va provoquer de nombreuses modifications de fichiers, pour que les PR d'implémentation soient lisibles et facilement reviewables, je propose de les séparer avec des jalons atomiques suivants :

1/ Création d'un composant Aside mutualisé pour le layout actuel (#201)
2/ Déplacement des fichiers du dossier layout vers common/layout (#202)
3/ Ajout du layout actuel dans l'architecture proposée ici (#203)
4/ Ajout du second layout (correspondant aux archipelago transiscopiens et ceux de Yannick) (#205)
5/ Ajout de documentation sur la configuration de chacun des layouts, et sur la création d'un nouveau layout

Questions restants en suspens

La question que je n'arrive pas à trancher pour l'instant c'est comment nommer ces layouts ? 🤔 Si vous avez des idées je prends avec grand plaisir !

Pour le layout actuel (avec le menu à gauche) : leftMenu ? default ? virtualAssembly ? ... ? Pour le second layout (avec le menu en haut) : topMenu ? fullPage ? transiscope ? ... ?

N'hésitez pas à me faire un retour si cette architecture vous parait satisfaisante ou pas :)

assemblee-virtuelle / archipelago