Admin: Allow to save a new color theme or reuse a theme already saved

assets/vue/services/baseService.js

@@ -41,6 +41,17 @@ export default {
     return data
   },
 
+  /**
+   * @param {string} iri
+   * @param {Object} params
+   * @returns {Promise<Object>}
+   */
+  async put(iri, params) {
+    const { data } = await api.put(iri, params)
+
+    return data
+  },
+
   /**
    * @param {string} endpoint
    * @param {Object} params

assets/vue/services/colorThemeService.js

@@ -16,15 +16,22 @@ async function getThemes() {
 /**
  * Update or create a theme with the title
  *
+ * @param {string|null} iri
  * @param {string} title
  * @param {Object} colors
  * @returns {Promise<Object>}
  */
-async function updateTheme(title, colors) {
-  await baseService.post(url, {
-    title: title,
+async function updateTheme({ iri = null, title, colors }) {
+  if (iri) {
+    return await baseService.put(iri, {
+      title,
+      variables: colors,
+    })
+  }
+
+  return await baseService.post(url, {
+    title,
     variables: colors,
-    active: true,
   })
 }
 

assets/vue/views/admin/AdminConfigureColors.vue

@@ -4,6 +4,22 @@
 
     <div class="admin-colors__container">
       <div class="admin-colors__settings">
+        <BaseSelect
+          v-model="selectedTheme"
+          :is-loading="isServerThemesLoading"
+          :label="t('Theme selector')"
+          :options="serverThemes"
+          allow-clear
+          option-label="title"
+          option-value="@id"
+        />
+
+        <BaseInputText
+          v-model="themeTitle"
+          :disabled="selectedTheme"
+          :label="t('Title')"
+        />
+
         <!-- Advanced mode -->
         <div v-show="isAdvancedMode">
           <div class="row-group">
@@ -174,17 +190,7 @@
           />
         </div>
 
-        <div class="flex flex-wrap items-start mb-4 gap-3">
-          <BaseSelect
-            option-value="slug"
-            option-label="title"
-            :options="serverThemes"
-            :label="t('Theme selector')"
-            :model-value="selectedTheme?.slug"
-            :is-loading="isServerThemesLoading"
-            class="w-52"
-            @update:model-value="selectTheme"
-          />
+        <div class="field">
           <BaseButton
             :label="t('Save')"
             icon="send"
@@ -460,34 +466,43 @@ let formColor = getColorTheme("--color-form-base")
 
 const serverThemes = ref([])
 const isServerThemesLoading = ref(true)
-const selectedTheme = ref(null)
+const themeTitle = ref()
+const selectedTheme = ref()
 
 onMounted(async () => {
   await refreshThemes()
 })
 
-const selectTheme = (slug) => {
-  const found = serverThemes.value.find((e) => e.slug === slug) ?? null
+watch(selectedTheme, (newValue) => {
+  if (!newValue) {
+    themeTitle.value = ""
+  }
+
+  const found = serverThemes.value.find((e) => e["@id"] === newValue) ?? null
+
   if (found) {
-    selectedTheme.value = found
-    setColors(selectedTheme.value.variables)
+    themeTitle.value = found.title
+    setColors(found.variables)
   }
-}
+})
 
 const saveColors = async () => {
-  if (selectedTheme.value === null) {
-    showErrorNotification(t("You must select a theme in order to save it"))
-    return
-  }
   try {
-    await themeService.updateTheme(selectedTheme.value.title, getColors())
-    showSuccessNotification(t("Colors updated"))
+    const updatedTheme = await themeService.updateTheme({
+      iri: selectedTheme.value || undefined,
+      title: themeTitle.value,
+      colors: getColors(),
+    })
+
+    showSuccessNotification(t("Color updated"))
+
+    await refreshThemes()
+
+    selectedTheme.value = updatedTheme["@id"]
   } catch (error) {
     showErrorNotification(error)
     console.error(error)
   }
-
-  await refreshThemes()
 }
 
 const refreshThemes = async () => {
@@ -495,7 +510,7 @@ const refreshThemes = async () => {
     serverThemes.value = await themeService.getThemes()
     const found = serverThemes.value.find((e) => e.active) ?? null
     if (found) {
-      selectedTheme.value = found
+      selectedTheme.value = found["@id"]
     }
     isServerThemesLoading.value = false
   } catch (error) {

src/CoreBundle/Entity/ColorTheme.php

@@ -8,7 +8,9 @@ namespace Chamilo\CoreBundle\Entity;
 
 use ApiPlatform\Metadata\ApiResource;
 use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Patch;
 use ApiPlatform\Metadata\Post;
+use ApiPlatform\Metadata\Put;
 use Chamilo\CoreBundle\State\ColorThemeProcessor;
 use Chamilo\CoreBundle\Traits\TimestampableTypedEntity;
 use Doctrine\ORM\Mapping as ORM;
@@ -18,9 +20,8 @@ use Symfony\Component\Serializer\Annotation\Groups;
 #[ORM\Entity]
 #[ApiResource(
     operations: [
-        new Post(
-            processor: ColorThemeProcessor::class,
-        ),
+        new Post(),
+        new Put(),
         new GetCollection(),
     ],
     denormalizationContext: [
@@ -28,6 +29,7 @@ use Symfony\Component\Serializer\Annotation\Groups;
     ],
     paginationEnabled: false,
     security: "is_granted('ROLE_ADMIN')",
+    processor: ColorThemeProcessor::class,
 )]
 class ColorTheme
 {
@@ -40,7 +42,7 @@ class ColorTheme
 
     #[Groups(['color_theme:write'])]
     #[ORM\Column(length: 255)]
-    private ?string $title = null;
+    private string $title;
 
     /**
      * @var array<string, mixed>
@@ -53,9 +55,8 @@ class ColorTheme
     #[ORM\Column(length: 255)]
     private ?string $slug = null;
 
-    #[Groups(['color_theme:write'])]
     #[ORM\Column]
-    private ?bool $active = null;
+    private bool $active = false;
 
     public function getId(): ?int
     {

src/CoreBundle/Repository/ColorThemeRepository.php

@@ -15,18 +15,11 @@ class ColorThemeRepository extends ServiceEntityRepository
         parent::__construct($registry, ColorTheme::class);
     }
 
-    public function deactivateAll(): void
+    public function deactivateAllExcept(ColorTheme $colorTheme): void
     {
-        $qb = $this->getEntityManager()->createQueryBuilder();
-        $qb
-            ->update(ColorTheme::class, 'ct')
-            ->set('ct.active', ':inactive')
-            ->where(
-                $qb->expr()->eq('ct.active', ':active')
-            )
-            ->setParameters(['active' => true, 'inactive' => false])
-            ->getQuery()
-            ->execute()
+        $this->getEntityManager()
+            ->createQuery('UPDATE Chamilo\CoreBundle\Entity\ColorTheme t SET t.active = FALSE WHERE t.id <> :id')
+            ->execute(['id' => $colorTheme->getId()])
         ;
     }
 

src/CoreBundle/State/ColorThemeProcessor.php

@@ -27,14 +27,14 @@ class ColorThemeProcessor implements ProcessorInterface
     {
         \assert($data instanceof ColorTheme);
 
-        $this->colorThemeRepository->deactivateAll();
-
         $data->setActive(true);
 
         /** @var ColorTheme $colorTheme */
         $colorTheme = $this->persistProcessor->process($data, $operation, $uriVariables, $context);
 
         if ($colorTheme) {
+            $this->colorThemeRepository->deactivateAllExcept($colorTheme);
+
             $projectDir = $this->parameterBag->get('kernel.project_dir');
 
             $contentParts = [];