#454 Add ProgressField

README.md

@@ -58,6 +58,7 @@ All new SCSS files must be imported before the import of Crudit SCSS.
 - [Add a map to a list or to a show](doc/map_config.md)
 - [How to export data](doc/export.md)
 - [Workflows](doc/workflow.md)
+- [ProgressBarField](doc/progressbar_field.md)
 - [Markdown](doc/markdown.md)
 - [Color list](doc/color_list.md)
 - [Twig extensions](doc/twig.md)

doc/progressbar_field.md

@@ -0,0 +1,36 @@
+Crudit ProgressBar Field
+
+### Usage
+
+To enable the progress bar for a field, you need to set the type:
+
+```php
+$value = Field::new("value", ProgressField::class);
+```
+And it's done !
+
+### Attributs
+
+You can customize your ProgressField with the following options:
+
+- 'barCssClass' => Defines the color of the progress bar with a Bootstrap class,
+- 'progressLabel' => Change the label displayed on the progress bar,
+- 'progressLabelCssClass' => Defines the Bootstrap class for the label to customize it,
+- 'min' => Integer who defines the minimum value,
+- 'max' => integer who defines the maximum value,
+- 'isBottomLabelActivate' => activates or deactivates the bottom label with true/false,
+- 'bottomLabel' => Change the label under the bar,
+
+### Example:
+
+```php
+$nbDeplacement = Field::new('nbDeplacement', ProgressBarField::class)
+    ->setOptions(
+            [
+                "barCssClass" => "bg-info",
+                "progressLabel" => "Example"
+                "progressLabelCssClass" => "lh-sm fa-sm text-black"
+                "isBottomLabelActivate" => true,
+            ]
+        );
+```

src/Field/ProgressBarField.php

@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Lle\CruditBundle\Field;
+
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class ProgressBarField extends AbstractField
+{
+    public function support(string $type): bool
+    {
+        return (in_array($type, ["progress", self::class]));
+    }
+
+    public function getDefaultTemplate(): ?string
+    {
+        return "@LleCrudit/field/progressbar.html.twig";
+    }
+
+    public function configureOptions(OptionsResolver $optionsResolver): void
+    {
+        parent::configureOptions($optionsResolver);
+        $optionsResolver->setDefaults([
+            "barCssClass" => null,
+            "progressLabel" => null,
+            "progressLabelCssClass" => null,
+            "min" => 0,
+            "max" => 100,
+            "isBottomLabelActivate" => false,
+            "bottomLabel" => null,
+        ]);
+    }
+}

src/Resources/config/fields.yaml

@@ -50,3 +50,6 @@ services:
     Lle\CruditBundle\Field\UrlField:
         arguments: ['@twig']
         tags: ['crudit.field']
+    Lle\CruditBundle\Field\ProgressBarField:
+        arguments: ['@twig']
+        tags: ['crudit.field']

src/Resources/views/field/progressbar.html.twig

@@ -0,0 +1,30 @@
+<div class="position-relative d-flex">
+    <div class="progress w-100" role="progressbar" aria-valuenow="{{ value }}"
+         aria-valuemin="{{ options.min }}" aria-valuemax="{{ options.max }}">
+        <div class="progress-bar
+            {% if value > options.max %} bg-danger 
+            {% else %} bg-primary {% endif %}
+            {% if options.barCssClass %} {{ options.barCssClass }}{% endif %}
+            progress-bar-animated" style="width: {{ value }}%;">
+        </div>
+    </div>
+    <div class="d-flex position-absolute justify-content-center align-items-center w-100">
+        <span class="{% if value > options.max %} text-white {% endif %}
+            {% if options.progressLabelCssClass %} {{ options.progressLabelCssClass }}
+            {% else %} lh-sm fa-sm {% endif %}">
+            {% if options.progressLabel %}
+                {{ options.progressLabel }}
+            {% else %} {{ value }} % {% endif %}
+        </span>
+    </div>
+</div>
+
+{% if options.isBottomLabelActivate %}
+    <div>
+        <span class="{% if options.progressLabelCssClass %} {{ options.progressLabelCssClass }}
+            {% else %} lh-sm fa-sm {% endif %}">
+            {% if options.bottomLabel %} {{ options.bottomLabel }}
+            {% else %} {{ value }} % {% endif %}
+        </span>
+    </div>
+{% endif %}