add inline scalar editor

EasyCorp · Dec 11, 2024 · d201b97 · d201b97
1 parent ecf581d
commit d201b97
Show file tree

Hide file tree

Showing 16 changed files with 481 additions and 19 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -32,6 +32,7 @@ class App {
         this.#createModalWindowsForDeleteActions();
         this.#createPopovers();
         this.#createTooltips();
+        this.#inlineScalarEditor();
 
         document.addEventListener('ea.collection.item-added', () => this.#createAutoCompleteFields());
     }
@@ -449,4 +450,72 @@ class App {
             });
         });
     }
+
+    #inlineScalarEditor() {
+        let selectedElement = null;
+        let currentData = null;
+        let newData = null;
+        let url = null;
+        document
+            .querySelectorAll('.field-number, .field-text')
+            .forEach(el => {
+                el.addEventListener('click', (event) => {
+                    if (selectedElement !== null) {
+                        return null;
+                    }
+                    selectedElement = event.target;
+                    currentData = selectedElement.textContent.trim();
+                    url = selectedElement.getAttribute('data-toggle-url');
+
+                    const newInput = document.createElement('input');
+                    this.#replace(newInput, selectedElement);
+
+                    if (selectedElement.firstChild) {
+                        selectedElement.replaceChild(newInput, selectedElement.firstChild);
+                    } else {
+                        selectedElement.appendChild(newInput);
+                    }
+
+                    newInput.value = currentData;
+                    newInput.focus();
+                    newInput.addEventListener('blur', (event) => {
+                        newData = document.querySelector('#inlineInput').value;
+                        let toggleUrl = url + "&newValue=" + newData;
+
+
+                        fetch(toggleUrl, {
+                            method: 'PATCH',
+                            // the XMLHttpRequest header is needed to keep compatibility with the previous code, which didn't use the Fetch API
+                            headers: { 'X-Requested-With': 'XMLHttpRequest' },
+                        })
+                            .then((response) => {
+                                if (!response.ok) {
+                                    return;
+                                }
+
+                                document.querySelector('#inlineInput').remove()
+                                selectedElement.textContent = newData
+
+                                //reset data
+                                selectedElement = null;
+                                currentData = null;
+                                newData = null;
+                                url = null;
+                            })
+                            .then(() => { /* do nothing else when the toggle request is successful */ })
+                        ;
+                    })
+                })
+            });
+    }
+
+    #replace(newInput, selectedElement) {
+        // add attribute
+        newInput.type = 'text';
+        newInput.id = 'inlineInput';
+        // add class Bootstrap
+        newInput.classList.add('form-control');
+
+        selectedElement.innerHTML = newInput.innerHTML
+    }
 }
diff --git a/config/services.php b/config/services.php
@@ -372,6 +372,8 @@
 
         ->set(NumberConfigurator::class)
             ->arg(0, service(IntlFormatter::class))
+            ->arg(1, service(AdminUrlGenerator::class))
+            ->arg(2, new Reference('security.csrf.token_manager', ContainerInterface::NULL_ON_INVALID_REFERENCE))
 
         ->set(PercentConfigurator::class)
             ->arg(0, service(IntlFormatter::class))
@@ -388,6 +390,8 @@
         ->set(TelephoneConfigurator::class)
 
         ->set(TextConfigurator::class)
+            ->arg(0, service(AdminUrlGenerator::class))
+            ->arg(1, new Reference('security.csrf.token_manager', ContainerInterface::NULL_ON_INVALID_REFERENCE))
 
         ->set(TimezoneConfigurator::class)
 

diff --git a/public/app.1ecd6d7a.js b/public/app.1ecd6d7a.js
diff --git a/public/app.1ecd6d7a.js.LICENSE.txt b/public/app.1ecd6d7a.js.LICENSE.txt
diff --git a/public/entrypoints.json b/public/entrypoints.json
@@ -5,7 +5,7 @@
         "/app.b1430af9.css"
       ],
       "js": [
-        "/app.1ecd6d7a.js"
+        "/app.992caa58.js"
       ]
     },
     "form": {

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
   "app.css": "app.b1430af9.css",
-  "app.js": "app.1ecd6d7a.js",
+  "app.js": "app.992caa58.js",
   "form.js": "form.bcec6c2a.js",
   "page-layout.js": "page-layout.3347892e.js",
   "page-color-scheme.js": "page-color-scheme.30cb23c2.js",

diff --git a/src/Controller/AbstractCrudController.php b/src/Controller/AbstractCrudController.php
@@ -234,7 +234,15 @@ public function edit(AdminContext $context)
             }
 
             $fieldName = $context->getRequest()->query->get('fieldName');
-            $newValue = 'true' === mb_strtolower($context->getRequest()->query->get('newValue'));
+
+            $valueData = $context->getRequest()->query->get('newValue');
+            if ('true' === mb_strtolower($valueData)) {
+                $newValue = true;
+            } elseif ('false' === mb_strtolower($valueData)) {
+                $newValue = false;
+            } else {
+                $newValue = $valueData;
+            }
 
             try {
                 $event = $this->ajaxEdit($context->getEntity(), $fieldName, $newValue);
@@ -558,7 +566,7 @@ protected function getContext(): ?AdminContext
         return $this->container->get(AdminContextProvider::class)->getContext();
     }
 
-    protected function ajaxEdit(EntityDto $entityDto, ?string $propertyName, bool $newValue): AfterCrudActionEvent
+    protected function ajaxEdit(EntityDto $entityDto, ?string $propertyName, $newValue): AfterCrudActionEvent
     {
         $field = $entityDto->getFields()->getByProperty($propertyName);
         if (null === $field || true === $field->getFormTypeOption('disabled')) {

diff --git a/src/Field/Configurator/NumberConfigurator.php b/src/Field/Configurator/NumberConfigurator.php
@@ -2,23 +2,34 @@
 
 namespace EasyCorp\Bundle\EasyAdminBundle\Field\Configurator;
 
+use EasyCorp\Bundle\EasyAdminBundle\Config\Action;
 use EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext;
 use EasyCorp\Bundle\EasyAdminBundle\Contracts\Field\FieldConfiguratorInterface;
 use EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto;
 use EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto;
+use EasyCorp\Bundle\EasyAdminBundle\Field\BooleanField;
 use EasyCorp\Bundle\EasyAdminBundle\Field\NumberField;
 use EasyCorp\Bundle\EasyAdminBundle\Intl\IntlFormatter;
+use EasyCorp\Bundle\EasyAdminBundle\Router\AdminUrlGeneratorInterface;
+use Symfony\Component\Security\Csrf\CsrfTokenManagerInterface;
 
 /**
  * @author Javier Eguiluz <javier.eguiluz@gmail.com>
  */
 final class NumberConfigurator implements FieldConfiguratorInterface
 {
     private IntlFormatter $intlFormatter;
-
-    public function __construct(IntlFormatter $intlFormatter)
-    {
+    private AdminUrlGeneratorInterface $adminUrlGenerator;
+    private ?CsrfTokenManagerInterface $csrfTokenManager;
+
+    public function __construct(
+        IntlFormatter $intlFormatter,
+        AdminUrlGeneratorInterface $adminUrlGenerator,
+        ?CsrfTokenManagerInterface $csrfTokenManager = null
+    ) {
         $this->intlFormatter = $intlFormatter;
+        $this->adminUrlGenerator = $adminUrlGenerator;
+        $this->csrfTokenManager = $csrfTokenManager;
     }
 
     public function supports(FieldDto $field, EntityDto $entityDto): bool
@@ -70,6 +81,18 @@ public function configure(FieldDto $field, EntityDto $entityDto, AdminContext $c
         }
 
         $field->setFormattedValue($this->intlFormatter->formatNumber($value, $formatterAttributes));
+
+        $crudDto = $context->getCrud();
+
+        if (null !== $crudDto && Action::NEW !== $crudDto->getCurrentAction()) {
+            $toggleUrl = $this->adminUrlGenerator
+                ->setAction(Action::EDIT)
+                ->setEntityId($entityDto->getPrimaryKeyValue())
+                ->set('fieldName', $field->getProperty())
+                ->set('csrfToken', $this->csrfTokenManager?->getToken(BooleanField::CSRF_TOKEN_NAME))
+                ->generateUrl();
+            $field->setCustomOption(NumberField::OPTION_TOGGLE_URL, $toggleUrl);
+        }
     }
 
     private function getRoundingModeAsString(int $mode): string

diff --git a/src/Field/Configurator/TextConfigurator.php b/src/Field/Configurator/TextConfigurator.php
@@ -7,15 +7,30 @@
 use EasyCorp\Bundle\EasyAdminBundle\Contracts\Field\FieldConfiguratorInterface;
 use EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto;
 use EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto;
+use EasyCorp\Bundle\EasyAdminBundle\Field\BooleanField;
+use EasyCorp\Bundle\EasyAdminBundle\Field\NumberField;
 use EasyCorp\Bundle\EasyAdminBundle\Field\TextareaField;
 use EasyCorp\Bundle\EasyAdminBundle\Field\TextField;
+use EasyCorp\Bundle\EasyAdminBundle\Router\AdminUrlGeneratorInterface;
+use Symfony\Component\Security\Csrf\CsrfTokenManagerInterface;
 use function Symfony\Component\String\u;
 
 /**
  * @author Javier Eguiluz <javier.eguiluz@gmail.com>
  */
 final class TextConfigurator implements FieldConfiguratorInterface
 {
+    private AdminUrlGeneratorInterface $adminUrlGenerator;
+    private ?CsrfTokenManagerInterface $csrfTokenManager;
+
+    public function __construct(
+        AdminUrlGeneratorInterface $adminUrlGenerator,
+        ?CsrfTokenManagerInterface $csrfTokenManager = null
+    ) {
+        $this->adminUrlGenerator = $adminUrlGenerator;
+        $this->csrfTokenManager = $csrfTokenManager;
+    }
+
     public function supports(FieldDto $field, EntityDto $entityDto): bool
     {
         return \in_array($field->getFieldFqcn(), [TextField::class, TextareaField::class], true);
@@ -55,6 +70,18 @@ public function configure(FieldDto $field, EntityDto $entityDto, AdminContext $c
             $formattedValue = u($formattedValue)->truncate($configuredMaxLength ?? $defaultMaxLength, '…')->toString();
         }
 
+        $crudDto = $context->getCrud();
+
+        if (null !== $crudDto && Action::NEW !== $crudDto->getCurrentAction()) {
+            $toggleUrl = $this->adminUrlGenerator
+                ->setAction(Action::EDIT)
+                ->setEntityId($entityDto->getPrimaryKeyValue())
+                ->set('fieldName', $field->getProperty())
+                ->set('csrfToken', $this->csrfTokenManager?->getToken(BooleanField::CSRF_TOKEN_NAME))
+                ->generateUrl();
+            $field->setCustomOption(NumberField::OPTION_TOGGLE_URL, $toggleUrl);
+        }
+
         $field->setFormattedValue($formattedValue);
     }
 }
diff --git a/src/Field/NumberField.php b/src/Field/NumberField.php
@@ -19,6 +19,7 @@ final class NumberField implements FieldInterface
     public const OPTION_NUMBER_FORMAT = 'numberFormat';
     public const OPTION_THOUSANDS_SEPARATOR = 'thousandsSeparator';
     public const OPTION_DECIMAL_SEPARATOR = 'decimalSeparator';
+    public const OPTION_TOGGLE_URL = 'toggleUrl';
 
     /**
      * @param TranslatableInterface|string|false|null $label
@@ -37,7 +38,8 @@ public static function new(string $propertyName, $label = null): self
             ->setCustomOption(self::OPTION_STORED_AS_STRING, false)
             ->setCustomOption(self::OPTION_NUMBER_FORMAT, null)
             ->setCustomOption(self::OPTION_THOUSANDS_SEPARATOR, null)
-            ->setCustomOption(self::OPTION_DECIMAL_SEPARATOR, null);
+            ->setCustomOption(self::OPTION_DECIMAL_SEPARATOR, null)
+            ->setCustomOption(self::OPTION_TOGGLE_URL, null);
     }
 
     public function setNumDecimals(int $num): self

diff --git a/src/Field/TextField.php b/src/Field/TextField.php
@@ -17,6 +17,8 @@ final class TextField implements FieldInterface
     public const OPTION_RENDER_AS_HTML = 'renderAsHtml';
     public const OPTION_STRIP_TAGS = 'stripTags';
 
+    public const OPTION_TOGGLE_URL = 'toggleUrl';
+
     /**
      * @param TranslatableInterface|string|false|null $label
      */
@@ -31,7 +33,9 @@ public static function new(string $propertyName, $label = null): self
             ->setDefaultColumns('col-md-6 col-xxl-5')
             ->setCustomOption(self::OPTION_MAX_LENGTH, null)
             ->setCustomOption(self::OPTION_RENDER_AS_HTML, false)
-            ->setCustomOption(self::OPTION_STRIP_TAGS, false);
+            ->setCustomOption(self::OPTION_STRIP_TAGS, false)
+            ->setCustomOption(self::OPTION_TOGGLE_URL, null)
+        ;
     }
 
     /**

diff --git a/src/Resources/public/app.19616e33.css b/src/Resources/public/app.19616e33.css
diff --git a/src/Resources/public/app.19616e33.rtl.css b/src/Resources/public/app.19616e33.rtl.css