diff --git a/Command/ValidateJsonContent.php b/Command/ValidateJsonContent.php new file mode 100644 index 0000000..bb108f9 --- /dev/null +++ b/Command/ValidateJsonContent.php @@ -0,0 +1,91 @@ +setName('thelia_blocks:blocks:validate') + ->setDescription('Validate & update json_content structure'); + } + + protected function execute(InputInterface $input, OutputInterface $output): int + { + $jsonContents = BlockGroupI18nQuery::create()->find(); + + + $output->writeln('============================================================= '); + $output->writeln("Thelia blocks json_content validation started"); + $progressBar = new ProgressBar($output, $jsonContents->count()); + $progressBar->start(); + + foreach ($jsonContents as $jsonContent) { + $content = $jsonContent->getJsonContent(); + + $decodedJson = json_decode($content, true); + + foreach ($decodedJson as $key => $value) { + $output->writeln("-"); + $output->writeln($value["type"]["id"]); + + if ($value["type"]["id"] === "blockAccordion") { + $oldData = $decodedJson[$key]["data"]; + + $group = array_map(function ($item) { + if (isset($item["group"])) { + $item["content"] = []; + $item["content"][] = $item["group"]; + + unset($item["group"]); + + $item["content"][0]["data"] = ["content" => [$item["content"][0]["data"]]]; + } + + return $item; + }, $oldData); + + $decodedJson[$key]["data"] = [ + "title" => "", + "group" => $group + ]; + } + } + + + $jsonContent->setJsonContent(json_encode($decodedJson)); + + $jsonContent->save(); + + $progressBar->advance(); + } + + $progressBar->finish(); + $output->writeln(""); + $output->writeln("Thelia blocks json_content validation ended"); + $output->writeln('============================================================= '); + + return 1; + } +} diff --git a/Model/Api/ItemBlockGroup.php b/Model/Api/ItemBlockGroup.php index 4a7df18..e855c26 100644 --- a/Model/Api/ItemBlockGroup.php +++ b/Model/Api/ItemBlockGroup.php @@ -177,7 +177,7 @@ public function createFromTheliaModel($theliaModel, $locale = null) } $tableMap = new $tableMapClass(); - $queryClass = $tableMap->getClassName().'Query'; + $queryClass = $tableMap->getClassName() . 'Query'; if (!class_exists($queryClass)) { return $this; diff --git a/Readme.md b/Readme.md index 3255ba1..903d8e0 100755 --- a/Readme.md +++ b/Readme.md @@ -1,7 +1,306 @@ -# WIP +# Création d'un plugin pour Thelia Blocks -This module is under development, please do not try to use it. +## Exemple : Création d'un plugin de citation -# Thelia Blocks +### Introduction -- Pour activer le mode dev sur un projet (en passant par `npm run dev`), penser à ajouter une variable `THELIABLOCKS_DEV=true` dans le `.env` du projet. +Ce plugin devra pouvoir afficher un champ pour indiquer le nom de l'auteur, et un second champ permettant d'insérer la citation en question. + +Dans cet exemple, nous allons créer le plugin depuis un module Thelia. +Si vous ne connaissez pas encore le fonctionnement des modules Thelia, nous vous conseillons vivement d'aller lire la [documentation officielle sur les modules Thelia](https://doc.thelia.net/en/documentation/modules/index.html). + +### Architecture du module + +Lors de cet exemple, nous utiliserons une architecture bien spécifique. +Vous êtes évidemment libre de structurer votre module comme vous le souhaitez. + +``` +. +├── ... +├── local/modules/ModuleCitation +│ ├── Config/ +│ │ ├── module.xml +│ │ └── config.xml +│ ├── Hook/ +│ │ └── BackHook.php +│ └── templates/ +│ │ ├── frontOffice/default/blocks/ +│ │ │ ├── blockCitation.html +│ │ │ └── ... +│ │ └── backOffice/default/ +│ │ │ ├── src/ +│ │ │ │ └── Citation.jsx +│ │ │ ├── tsup.config.js +│ │ │ └── index.js +│ ├── package.json +│ └── ModuleCitation.php +└── ... +``` + +### Installation des dépendances : + +```bash +npm install react tsup @openstudio/blocks-editor +``` + +### 1 - Création du composant + +Commençons par créer un fichier `Citation.jsx` et par définir les données initiales du plugin : + +```js +// ./templates/backOffice/default/src/Citation.jsx + +const initialData = { + author: "", + quote: "", +}; +``` + +Ensuite, nous allons pouvoir écrire le composant React permettant de visualiser le plugin dans l'éditeur de Thelia Blocks. + +:warning: Attention : un plugin Thelia Blocks prends toujours deux `props` : + +| Prop | Type | Description | +| :--------- | :--------- | :--------------------------------------------------------- | +| `data` | `any` | Objet contenant les données du plugin | +| `onUpdate` | `Function` | Fonction permettant de mettre à jour les données du plugin | + +Exemple : + +```jsx +// ./templates/backOffice/default/src/Citation.jsx + +const BlockQuoteComponent = ({ data, onUpdate }) => { + return ( +
+
+ + onUpdate({ ...data, author: e.target.value })} + /> +
+
+ +