collections

js/forms/custom-elements/choices.js

@@ -2,6 +2,10 @@ class ChoicesElement extends HTMLSelectElement {
 	plugins = [];
 	connectedCallback() {
 
+		if (this.tomselect) {
+			return;
+		}
+
 		if (this.getAttribute('multiple')) {
 			this.plugins.push('remove_button');
 		}

js/forms/custom-elements/collection.js

@@ -7,7 +7,7 @@ class CollectionElement extends HTMLElement {
 		customElements.define('collection-element', CollectionElement);
 	}
 
-	static addFormToCollection(e) {
+	addFormToCollection(e) {
 		const collectionHolder = document.querySelector('.'+e.currentTarget.dataset.collectionHolderClass);
 		const item = document.createElement('div');
 
@@ -21,17 +21,19 @@ class CollectionElement extends HTMLElement {
 				collectionHolder.dataset.index
 			);
 
-		collectionHolderList.appendChild(item);
+		collectionHolderList.appendChild(item.firstChild);
 		collectionHolder.dataset.index++;
+
+		this.querySelectorAll('collection-entry-element').forEach((entry) => {
+			console.log('test');
+			entry.updateButtonStates();
+		});
 	}
 
 	/** connectedCallback **/
 	connectedCallback() {
 		this.#eBtnAdd = this.querySelector('.add_item_link');
-		this.#eBtnAdd.addEventListener('click', CollectionElement.addFormToCollection);
+		this.#eBtnAdd.addEventListener('click', this.addFormToCollection.bind(this));
 	}
 
-	#removeCollectionItem() {
-
-	}
 }

js/forms/custom-elements/collection_entry.js

@@ -1,6 +1,9 @@
 class CollectionEntryElement extends HTMLElement {
 
+	// Button elements
 	#eBtnDelete;
+	#eBtnMoveUp;
+	#eBtnMoveDown;
 
 	// register the custom element
 	static {
@@ -9,11 +12,96 @@ class CollectionEntryElement extends HTMLElement {
 
 	/** connectedCallback **/
 	connectedCallback() {
-		this.#eBtnDelete = this.querySelector('.remove_item_link');
-		this.#eBtnDelete.addEventListener('click', this.#removeCollectionItem.bind(this));
+
+		if ((this.dataset.new || this.dataset.allowDelete) && this.#eBtnDelete === undefined) {
+			this.#eBtnDelete = this.#createButton('Delete', 'ibo-button ibo-is-regular ibo-is-danger');
+			this.#eBtnDelete.addEventListener('click', this.#removeCollectionItem.bind(this));
+			this.appendChild(this.#eBtnDelete);
+		}
+
+		if (this.dataset.allowOrdering) {
+			if (this.#eBtnMoveUp === undefined) {
+				this.#eBtnMoveUp = this.#createButton('Move Up', 'ibo-button ibo-is-regular');
+				this.#eBtnMoveUp.addEventListener('click', this.#moveUp.bind(this));
+				this.appendChild(this.#eBtnMoveUp);
+			}
+			if (this.#eBtnMoveDown === undefined) {
+				this.#eBtnMoveDown = this.#createButton('Move Down', 'ibo-button ibo-is-regular');
+				this.#eBtnMoveDown.addEventListener('click', this.#moveDown.bind(this));
+				this.appendChild(this.#eBtnMoveDown);
+			}
+		}
+
+		this.updateButtonStates();
 	}
 
-	#removeCollectionItem(e) {
+	/**
+	 * Update the state of the buttons (enabled/disabled).
+	 *
+	 */
+	updateButtonStates() {
+
+		if(this.previousElementSibling === null) {
+			this.#eBtnMoveUp.setAttribute('disabled', 'disabled');
+		}
+		else{
+			this.#eBtnMoveUp.removeAttribute('disabled');
+		}
+
+		if(this.nextElementSibling === null) {
+			this.#eBtnMoveDown.setAttribute('disabled', 'disabled');
+		}
+		else{
+			this.#eBtnMoveDown.removeAttribute('disabled');
+		}
+	}
+
+	/**
+	 * Create a button element.
+	 *
+	 * @param label
+	 * @param className
+	 * @returns {HTMLButtonElement}
+	 */
+	#createButton(label, className) {
+
+		const btnElement = document.createElement('button');
+		btnElement.type = 'button';
+		btnElement.className = className;
+		btnElement.textContent = label;
+
+		return btnElement;
+	}
+
+	/**
+	 * Move this collection item up.
+	 *
+	 */
+	#moveUp() {
+		const prev = this.previousElementSibling;
+		if (prev) {
+			this.parentNode.insertBefore(this, prev);
+			prev.updateButtonStates();
+		}
+	}
+
+	/**
+	 * Move this collection item down.
+	 *
+	 */
+	#moveDown() {
+		const next = this.nextElementSibling;
+		if (next) {
+			this.parentNode.insertBefore(next, this);
+			next.updateButtonStates();
+		}
+	}
+
+	/**
+	 * Remove this collection item.
+	 *
+	 */
+	#removeCollectionItem() {
 		this.remove();
 	}
 }

js/forms/forms.js

@@ -15,7 +15,7 @@ function triggerTurbo(el) {
 		el.form.setAttribute('novalidate', true);
 		el.form.requestSubmit();
 		el.form.querySelector(`[name="${sFormName}[_turbo_trigger]"]`).value = null;
-		el.form.setAttribute('novalidate', false);
+		el.form.removeAttribute('novalidate');
 		$aFormBlockDataTransmittedData[name] = el.value;
 	}
 

sources/Forms/FormType/Base/CollectionFormType.php

@@ -34,6 +34,7 @@ class CollectionFormType extends AbstractType
 
 		$resolver->setDefaults([
 			'button_label' => 'Add an item',
+			'allow_ordering' => false,
 		]);
 	}
 
@@ -43,6 +44,7 @@ class CollectionFormType extends AbstractType
 		parent::buildView($view, $form, $options);
 
 		$view->vars['button_label'] = $options['button_label'];
+		$view->vars['allow_ordering'] = $options['allow_ordering'];
 	}
 
 }

templates/application/forms/itop_console_layout.html.twig

@@ -81,24 +81,18 @@
 {%- block collection_widget -%}
 
     {% if prototype is defined and not prototype.rendered %}
-        {% set deleteBtn = '<button type="button" class="remove_item_link ibo-button ibo-is-regular ibo-is-danger">Supprimer</button>' %}
-        {%- set prototype_html = '<collection-entry-element>' ~ form_widget(prototype) ~ ' ' ~ deleteBtn ~'</collection-entry-element>' -%}
+        {%- set prototype_html = '<collection-entry-element data-allow-delete="' ~ allow_delete ~ '" data-allow-ordering="' ~ allow_ordering ~'" data-new="true">' ~ form_widget(prototype) ~'</collection-entry-element>' -%}
         {%- set attr = attr|merge({'data-prototype': prototype_html, 'class': name, 'data-index': form|length > 0 ? form|last.vars.name + 1 : 0 }) -%}
     {% endif %}
 
     <collection-element {{ block('widget_container_attributes') }}>
-
         {% if allow_add %}
             <button type="button" class="add_item_link ibo-button ibo-button ibo-is-regular " data-collection-holder-class="{{ name }}">{{ button_label|dict_s }}</button>
         {% endif %}
-
         <div role="list">
             {% for child in form %}
-                <collection-entry-element>
+                <collection-entry-element data-allow-delete="{{ allow_delete }}" data-allow-ordering="{{ allow_ordering }}">
                     {{ form_widget(child) }}
-                    {% if allow_delete %}
-                        <button type="button" class="remove_item_link ibo-button ibo-is-regular ibo-is-danger">Supprimer</button>
-                    {% endif %}
                 </collection-entry-element>
             {% endfor %}
         </div>