Make more fields cloneable

cosmocode · Oct 24, 2023 · e510144 · e510144
1 parent 8653c1f
commit e510144
Show file tree

Hide file tree

Showing 13 changed files with 374 additions and 115 deletions.
diff --git a/doc/formelements.md b/doc/formelements.md
@@ -176,7 +176,7 @@ Simple text input.
       required: false
 ```
 
-* `clone` _(optional)_ - Adds a clone button to the field. That way you can repeat the same input to create a list of variable length.
+* `clone` _(optional)_ - When set to `true`, adds a clone button to the field. That way you can repeat the same input to create a list of variable length.
 
 ### Numberinput
 
@@ -192,6 +192,8 @@ Simple number (integer) input.
       required: false
 ```
 
+* `clone` _(optional)_ - When set to `true`, adds a clone button to the field. That way you can repeat the same input to create a list of variable length.
+
 ### Textarea
 
 Multiline text input field with optional size attributes.  
@@ -225,6 +227,10 @@ Text input that expects a date and provides a calendar picker.
     validation:
       required: false
 ```
+
+Options:
+* `clone` _(optional)_ - When set to `true`, adds a clone button to the field. That way you can repeat the same input to create a list of variable length.
+
 ### Time
 
 Text input that expects a time and provides a time picker.
@@ -238,6 +244,9 @@ Text input that expects a time and provides a time picker.
     validation:
       required: false
 ```
+Options:
+* `clone` _(optional)_ - When set to `true`, adds a clone button to the field. That way you can repeat the same input to create a list of variable length.
+
 ### Datetime
 
 Text input that expects a date and a time and provides a combined picker.
@@ -251,6 +260,9 @@ Text input that expects a date and a time and provides a combined picker.
     validation:
       required: false
 ```
+Options:
+* `clone` _(optional)_ - When set to `true`, adds a clone button to the field. That way you can repeat the same input to create a list of variable length.
+
 ### Email
 
 Text input that expects a valid email (the HTML5 validation is handled by the browser).
@@ -265,6 +277,9 @@ Text input that expects a valid email (the HTML5 validation is handled by the br
       required: false
 ```
 
+Options:
+    * `clone` _(optional)_ - When set to `true`, adds a clone button to the field. That way you can repeat the same input to create a list of variable length.
+
 ### Radioset
 
 Representation of a radio group.  

diff --git a/public/js/app.js b/public/js/app.js
@@ -244,6 +244,17 @@ function cloneHandler(e) {
         const label = cloned.querySelector('label');
         label.setAttribute('for', newId);
 
+        const pickr = input.dataset.calendarType;
+        if (pickr === 'date') {
+            flatpickr(input, {'dateFormat' : 'd.m.Y', 'allowInput' : true});
+        }
+        if (pickr === 'datetime') {
+            flatpickr(input, {'enableTime' : true, 'time_24hr' : true, 'dateFormat' : 'd.m.Y H:i', 'allowInput' : true});
+        }
+        if (pickr === 'time') {
+            flatpickr(input, {'noCalendar' : true, 'enableTime' : true, 'time_24hr' : true, 'allowInput' : true});
+        }
+
         elem.parentNode.parentNode.after(cloned);
         elem.parentNode.removeChild(elem);
     }

diff --git a/src/FormGenerator/FormElements/DateFormElement.php b/src/FormGenerator/FormElements/DateFormElement.php
@@ -7,5 +7,18 @@
  */
 class DateFormElement extends AbstractDynamicFormElement
 {
+    /**
+     * Handle values in a clonable field
+     *
+     * @return array
+     */
+    public function getViewVariables()
+    {
+        $conf = parent::getViewVariables();
+        if (!empty($conf['clone']) && !is_array($conf['value'])) {
+            $conf['value'] = [$conf['value']];
+        }
 
+        return $conf;
+    }
 }
diff --git a/src/FormGenerator/FormElements/DateTimeFormElement.php b/src/FormGenerator/FormElements/DateTimeFormElement.php
@@ -7,5 +7,18 @@
  */
 class DateTimeFormElement extends AbstractDynamicFormElement
 {
+    /**
+     * Handle values in a clonable field
+     *
+     * @return array
+     */
+    public function getViewVariables()
+    {
+        $conf = parent::getViewVariables();
+        if (!empty($conf['clone']) && !is_array($conf['value'])) {
+            $conf['value'] = [$conf['value']];
+        }
 
+        return $conf;
+    }
 }
diff --git a/src/FormGenerator/FormElements/EmailFormElement.php b/src/FormGenerator/FormElements/EmailFormElement.php
@@ -7,5 +7,18 @@
  */
 class EmailFormElement extends AbstractDynamicFormElement
 {
+    /**
+     * Handle values in a clonable field
+     *
+     * @return array
+     */
+    public function getViewVariables()
+    {
+        $conf = parent::getViewVariables();
+        if (!empty($conf['clone']) && !is_array($conf['value'])) {
+            $conf['value'] = [$conf['value']];
+        }
 
+        return $conf;
+    }
 }
diff --git a/src/FormGenerator/FormElements/NumberInputFormElement.php b/src/FormGenerator/FormElements/NumberInputFormElement.php
@@ -7,5 +7,18 @@
  */
 class NumberInputFormElement extends AbstractDynamicFormElement
 {
+    /**
+     * Handle values in a clonable field
+     *
+     * @return array
+     */
+    public function getViewVariables()
+    {
+        $conf = parent::getViewVariables();
+        if (!empty($conf['clone']) && !is_array($conf['value'])) {
+            $conf['value'] = [$conf['value']];
+        }
 
+        return $conf;
+    }
 }
diff --git a/src/FormGenerator/FormElements/TimeFormElement.php b/src/FormGenerator/FormElements/TimeFormElement.php
@@ -7,5 +7,18 @@
  */
 class TimeFormElement extends AbstractDynamicFormElement
 {
+    /**
+     * Handle values in a clonable field
+     *
+     * @return array
+     */
+    public function getViewVariables()
+    {
+        $conf = parent::getViewVariables();
+        if (!empty($conf['clone']) && !is_array($conf['value'])) {
+            $conf['value'] = [$conf['value']];
+        }
 
+        return $conf;
+    }
 }
diff --git a/view/date.twig b/view/date.twig
@@ -1,27 +1,61 @@
 {% from '_macros' import renderError, renderTooltip %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
-    <div class="field">
-        <div class="label-with-tooltip">
-            <label class="label {{ labelsmall is not empty ? 'label-smaller' }}" for="{{ id }}">
-                {%- if label is not empty -%}
-                    {{ label }} {{ is_required ? '*' }}
-                {%- endif  -%}
-            </label>
-            {{ renderTooltip(tooltip) }}
+    {% if clone is not empty %}
+        {% for val in value %}
+            <div class="field" id="field-{{ id }}-{{ loop.index }}">
+                <div class="label-with-tooltip">
+                    <label class="label {{ labelsmall is not empty ? 'label-smaller' }}" for="{{ id }}-{{ loop.index }}">
+                        {%- if label is not empty -%}
+                            {{ label }} {{ is_required ? '*' }}
+                        {%- endif  -%}
+                    </label>
+                    {{ renderTooltip(tooltip) }}
+                </div>
+                <div class="control is-cloneable">
+                    <input
+                            type="text"
+                            id="{{ id }}-{{ loop.index }}"
+                            name="{{ id }}[]"
+                            value="{{ val }}"
+                            class="input form-input{% if is_readonly%} has-background-grey-lighter{% endif %} {{ errors is not empty ? 'is-danger' }}"
+                            data-calendar-type="date"
+                            {% if is_readonly%}readonly{% endif %}
+                            {% if placeholder is not empty -%}
+                                placeholder="{{ placeholder ~ (is_required and label is empty ? ' *') }}"
+                            {%- endif %} />
+                    {% if loop.last %}
+                        <button type="button" class="button is-light clone-field">
+                            + {{ button_clone_label }}
+                        </button>
+                    {% endif %}
+                </div>
+                {{ renderError(errors) }}
+            </div>
+        {% endfor %}
+    {% else %}
+        <div class="field">
+            <div class="label-with-tooltip">
+                <label class="label {{ labelsmall is not empty ? 'label-smaller' }}" for="{{ id }}">
+                    {%- if label is not empty -%}
+                        {{ label }} {{ is_required ? '*' }}
+                    {%- endif  -%}
+                </label>
+                {{ renderTooltip(tooltip) }}
+            </div>
+            <div class="control">
+                <input
+                        type="text"
+                        id="{{ id }}"
+                        name="{{ id }}"
+                        value="{{ value }}"
+                        class="input form-input{% if is_readonly%} has-background-grey-lighter{% endif %} {{ errors is not empty ? 'is-danger' }}"
+                        data-calendar-type="date"
+                        {% if is_readonly%}readonly{% endif %}
+                        {% if placeholder is not empty -%}
+                            placeholder="{{ placeholder ~ (is_required and label is empty ? ' *') }}"
+                        {%- endif %} />
+            </div>
+            {{ renderError(errors) }}
         </div>
-        <div class="control">
-            <input
-                    type="text"
-                    id="{{ id }}"
-                    name="{{ id }}"
-                    value="{{ value }}"
-                    class="input form-input{% if is_readonly%} has-background-grey-lighter{% endif %} {{ errors is not empty ? 'is-danger' }}"
-                    data-calendar-type="date"
-                    {% if is_readonly%}readonly{% endif %}
-                    {% if placeholder is not empty -%}
-                        placeholder="{{ placeholder ~ (is_required and label is empty ? ' *') }}"
-                    {%- endif %} />
-        </div>
-        {{ renderError(errors) }}
-    </div>
+    {% endif %}
 </div>
diff --git a/view/datetime.twig b/view/datetime.twig
@@ -1,27 +1,61 @@
 {% from '_macros' import renderError, renderTooltip %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
-    <div class="field">
-        <div class="label-with-tooltip">
-            <label class="label {{ labelsmall is not empty ? 'label-smaller' }}" for="{{ id }}">
-                {%- if label is not empty -%}
-                    {{ label }} {{ is_required ? '*' }}
-                {%- endif  -%}
-            </label>
-            {{ renderTooltip(tooltip) }}
+    {% if clone is not empty %}
+        {% for val in value %}
+            <div class="field" id="field-{{ id }}-{{ loop.index }}">
+                <div class="label-with-tooltip">
+                    <label class="label {{ labelsmall is not empty ? 'label-smaller' }}" for="{{ id }}-{{ loop.index }}">
+                        {%- if label is not empty -%}
+                            {{ label }} {{ is_required ? '*' }}
+                        {%- endif  -%}
+                    </label>
+                    {{ renderTooltip(tooltip) }}
+                </div>
+                <div class="control is-cloneable">
+                    <input
+                            type="text"
+                            id="{{ id }}-{{ loop.index }}"
+                            name="{{ id }}[]"
+                            value="{{ val }}"
+                            class="input form-input{% if is_readonly%} has-background-grey-lighter{% endif %} {{ errors is not empty ? 'is-danger' }}"
+                            data-calendar-type="datetime"
+                            {% if is_readonly%}readonly{% endif %}
+                            {% if placeholder is not empty -%}
+                                placeholder="{{ placeholder ~ (is_required and label is empty ? ' *') }}"
+                            {%- endif %} />
+                    {% if loop.last %}
+                        <button type="button" class="button is-light clone-field">
+                            + {{ button_clone_label }}
+                        </button>
+                    {% endif %}
+                </div>
+                {{ renderError(errors) }}
+            </div>
+        {% endfor %}
+    {% else %}
+        <div class="field">
+            <div class="label-with-tooltip">
+                <label class="label {{ labelsmall is not empty ? 'label-smaller' }}" for="{{ id }}">
+                    {%- if label is not empty -%}
+                        {{ label }} {{ is_required ? '*' }}
+                    {%- endif  -%}
+                </label>
+                {{ renderTooltip(tooltip) }}
+            </div>
+            <div class="control">
+                <input
+                    type="text"
+                    id="{{ id }}"
+                    name="{{ id }}"
+                    value="{{ value }}"
+                    class="input form-input{% if is_readonly%} has-background-grey-lighter{% endif %} {{ errors is not empty ? 'is-danger' }}"
+                    data-calendar-type="datetime"
+                    {% if is_readonly%}readonly{% endif %}
+                    {% if placeholder is not empty -%}
+                        placeholder="{{ placeholder ~ (is_required and label is empty ? ' *') }}"
+                    {%- endif %} />
+            </div>
+            {{ renderError(errors) }}
         </div>
-        <div class="control">
-            <input
-                type="text"
-                id="{{ id }}"
-                name="{{ id }}"
-                value="{{ value }}"
-                class="input form-input{% if is_readonly%} has-background-grey-lighter{% endif %} {{ errors is not empty ? 'is-danger' }}"
-                data-calendar-type="datetime"
-                {% if is_readonly%}readonly{% endif %}
-                {% if placeholder is not empty -%}
-                    placeholder="{{ placeholder ~ (is_required and label is empty ? ' *') }}"
-                {%- endif %} />
-        </div>
-        {{ renderError(errors) }}
-    </div>
+    {% endif %}
 </div>