Admin: Allow save colors theme to reassign css variables #3793

assets/vue/views/admin/AdminConfigureColors.vue

@@ -192,10 +192,12 @@ let successColor = getColorTheme("--color-success-base")
 let successColorGradient = getColorTheme("--color-success-gradient")
 let dangerColor = getColorTheme("--color-danger-base")
 
-const saveColors = () => {
+const saveColors = async () => {
   let colors = getColors()
   // TODO send colors to backend, then notify if was correct or incorrect
-  console.log(colors)
+  await axios.post("/api/color_themes", {
+    variables: colors,
+  })
 }
 
 const menu = ref("menu")

config/services.yaml

@@ -82,6 +82,10 @@ services:
       tags:
         - { name: 'api_platform.state_processor' }
 
+    Chamilo\CoreBundle\State\ColorThemeProcessor:
+      bind:
+        $persistProcessor: '@api_platform.doctrine.orm.state.persist_processor'
+
     Chamilo\CoreBundle\EventSubscriber\AnonymousUserSubscriber:
       tags:
         - name: kernel.event_subscriber

src/CoreBundle/Controller/ThemeController.php

@@ -0,0 +1,37 @@
+<?php
+
+/* For licensing terms, see /license.txt */
+
+declare(strict_types=1);
+
+namespace Chamilo\CoreBundle\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\DependencyInjection\ParameterBag\ParameterBagInterface;
+use Symfony\Component\Filesystem\Filesystem;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class ThemeController extends AbstractController
+{
+    public function __construct(
+        private readonly ParameterBagInterface $parameterBag,
+    ) {}
+
+    #[Route('/theme/colors.css', name: 'chamilo_color_theme', methods: ['GET'])]
+    public function colorTehemeAction(): Response
+    {
+        $fs = new Filesystem();
+        $path = $this->parameterBag->get('kernel.project_dir').'/var/theme/colors.css';
+
+        if ($fs->exists($path)) {
+            $response = $this->file($path);
+        } else {
+            $response = new Response('');
+        }
+
+        $response->headers->add(['Content-Type' => 'text/css']);
+
+        return $response;
+    }
+}

src/CoreBundle/Entity/ColorTheme.php

@@ -0,0 +1,60 @@
+<?php
+
+/* For licensing terms, see /license.txt */
+
+declare(strict_types=1);
+
+namespace Chamilo\CoreBundle\Entity;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Post;
+use Chamilo\CoreBundle\State\ColorThemeProcessor;
+use Chamilo\CoreBundle\Traits\TimestampableTypedEntity;
+use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Annotation\Groups;
+
+#[ORM\Entity]
+#[ApiResource(
+    operations: [
+        new Post(
+            processor: ColorThemeProcessor::class,
+        ),
+    ],
+    denormalizationContext: [
+        'groups' => ['color_theme:write'],
+    ],
+    security: "is_granted('ROLE_ADMIN')",
+)]
+class ColorTheme
+{
+    use TimestampableTypedEntity;
+
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column]
+    private ?int $id = null;
+
+    /**
+     * @var array<string, mixed>
+     */
+    #[Groups(['color_theme:write'])]
+    #[ORM\Column]
+    private array $variables = [];
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function getVariables(): array
+    {
+        return $this->variables;
+    }
+
+    public function setVariables(array $variables): static
+    {
+        $this->variables = $variables;
+
+        return $this;
+    }
+}

src/CoreBundle/Migrations/Schema/V200/Version20240318105600.php

@@ -0,0 +1,20 @@
+<?php
+/* For licensing terms, see /license.txt */
+
+declare(strict_types=1);
+
+namespace Chamilo\CoreBundle\Migrations\Schema\V200;
+
+use Chamilo\CoreBundle\Migrations\AbstractMigrationChamilo;
+use Doctrine\DBAL\Schema\Schema;
+
+class Version20240318105600 extends AbstractMigrationChamilo
+{
+    /**
+     * @inheritDoc
+     */
+    public function up(Schema $schema): void
+    {
+        $this->addSql("CREATE TABLE color_theme (id INT AUTO_INCREMENT NOT NULL, variables LONGTEXT NOT NULL COMMENT '(DC2Type:json)', created_at DATETIME NOT NULL COMMENT '(DC2Type:datetime)', updated_at DATETIME NOT NULL COMMENT '(DC2Type:datetime)', PRIMARY KEY(id)) DEFAULT CHARACTER SET utf8mb4 COLLATE `utf8mb4_unicode_ci` ENGINE = InnoDB ROW_FORMAT = DYNAMIC");
+    }
+}

src/CoreBundle/Resources/views/Layout/head.html.twig

@@ -30,6 +30,7 @@
         {{ encore_entry_link_tags('legacy_document') }}
         {{ encore_entry_link_tags('vue') }}
         {{ encore_entry_link_tags('app') }}
+        <link rel="stylesheet" href="{{ path('chamilo_color_theme') }}">
         {# Files app.css is generated from "assets/css/app.scss" file using the file webpack.config.js #}
         {#    {{ encore_entry_link_tags('app') }} #}
         {% if theme is defined %}

src/CoreBundle/State/ColorThemeProcessor.php

@@ -0,0 +1,52 @@
+<?php
+
+/* For licensing terms, see /license.txt */
+
+declare(strict_types=1);
+
+namespace Chamilo\CoreBundle\State;
+
+use ApiPlatform\Metadata\Operation;
+use ApiPlatform\State\ProcessorInterface;
+use Chamilo\CoreBundle\Entity\ColorTheme;
+use Symfony\Component\DependencyInjection\ParameterBag\ParameterBagInterface;
+use Symfony\Component\Filesystem\Filesystem;
+
+use const PHP_EOL;
+
+class ColorThemeProcessor implements ProcessorInterface
+{
+    public function __construct(
+        private readonly ProcessorInterface $persistProcessor,
+        private readonly ParameterBagInterface $parameterBag,
+    ) {}
+
+    public function process($data, Operation $operation, array $uriVariables = [], array $context = [])
+    {
+        \assert($data instanceof ColorTheme);
+
+        $colorTheme = $this->persistProcessor->process($data, $operation, $uriVariables, $context);
+
+        if ($colorTheme) {
+            $projectDir = $this->parameterBag->get('kernel.project_dir');
+
+            $contentParts = [];
+            $contentParts[] = ':root {';
+
+            foreach ($data->getVariables() as $variable => $value) {
+                $contentParts[] = "  $variable: $value;";
+            }
+
+            $contentParts[] = '}';
+
+            $fs = new Filesystem();
+            $fs->mkdir($projectDir.'/var/theme');
+            $fs->dumpFile(
+                $projectDir.'/var/theme/colors.css',
+                implode(PHP_EOL, $contentParts)
+            );
+        }
+
+        return $colorTheme;
+    }
+}