Skip to content

Commit

Permalink
Allow multiple strategies to be defined at once for certain destinati…
Browse files Browse the repository at this point in the history 
…on fields
  • Loading branch information
@ccailly
ccailly committed Dec 18, 2024
1 parent b56a78b commit 475807c
Show file tree
Hide file tree
Showing 64 changed files with 1,514 additions and 573 deletions.
190 changes: 175 additions & 15 deletions css/includes/components/form/_form-destination.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,31 +31,191 @@
* ---------------------------------------------------------------------
*/

[data-glpi-specific-values-extra-field-container] {
[data-glpi-specific-values-extra-field-item] {
padding-left: 1px;
[data-glpi-associated-items-specific-values-extra-field] {
[data-glpi-associated-items-specific-values-extra-field-container] {
[data-glpi-associated-items-specific-values-extra-field-item] {
padding-left: 1px;

>span:last-of-type {
flex-grow: 1;
>span:last-of-type {
flex-grow: 1;

.select2-container {
width: 100% !important;
.select2-container {
width: 100% !important;
}
}

&:last-of-type {
[data-glpi-remove-associated-item-button] {
border-bottom-right-radius: var(--tblr-btn-border-radius) !important;
}
}

&:not(:has([data-glpi-associated-items-items-id-dropdown])) {
.select2-container {
width: 100% !important;
}
}
}

.input-group[data-glpi-associated-items-specific-values-extra-field-item] {
>span:first-of-type {
.select2-selection {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
}

>span:not(:first-of-type) {
.select2-selection {
border-radius: 0 !important;
}
}
}
}

[data-glpi-add-associated-item-button] {
position: relative;
margin-left: 1px;
margin-top: calc(-1 * var(--tblr-border-width));
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
}

[data-glpi-itildestination-field-configs] {
&:not(:has(> [data-glpi-itildestination-field-config]:nth-child(2))) {
[data-glpi-itildestination-remove-field-config] {
display: none !important;
}
}

.input-group[data-glpi-specific-values-extra-field-item] {
>span:first-of-type {
.select2-selection {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
&:has(> [data-glpi-itildestination-field-config]:nth-child(2)) {
&:has([data-glpi-itildestination-remove-field-config]) {
[data-glpi-itildestination-field-config] {
&:not(:has([data-glpi-associated-items-specific-values-extra-field]:not(.d-none))) {
.select2-selection {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
}

&:has([data-glpi-associated-items-specific-values-extra-field]:not(.d-none)) {
&:has([data-glpi-itildestination-field-config-display-condition="specific_values"]) {
>div {
&:first-child {
.select2-selection {
border-top-right-radius: 0 !important;
}
}
}
}
}
}
}
}

>span:not(:first-of-type) {
.select2-selection {
border-radius: 0 !important;
[data-glpi-itildestination-field-config] {
display: flex;
flex-wrap: wrap;
align-items: stretch;

&:has(div[data-glpi-itildestination-field-config-display-condition]:not(.d-none)) {
&:not(:has([data-glpi-associated-items-specific-values-extra-field]:not(.d-none))) {
>div {
&:first-child {
.select2-selection {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
}
}
}
}

>div {
flex: 1;

// Fix height issue with multiple select2
&:has(.select2-selection--multiple) {
>div {
height: 100%;

>div.btn-group.btn-group-sm {
height: 100%;
}

.select2-container {
height: 100%;

.select2-selection {
height: 100%;
}
}
}
}
}

&:not(:has([data-glpi-associated-items-specific-values-extra-field]:not(.d-none))) {
>div {
&[data-glpi-itildestination-field-config-display-condition] {
margin-left: calc(-1 * var(--tblr-border-width));

.select2-selection {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
}
}
}

// Specific layout for associated items
&:has([data-glpi-associated-items-specific-values-extra-field]:not(.d-none)) {
&:has([data-glpi-itildestination-field-config-display-condition="specific_values"]) {
>div {
&:first-child {
.select2-selection {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
}
}
}

// Make the strategy select fill the whole line
[data-glpi-associated-items-specific-values-extra-field] {
flex-basis: 100%;
order: 1;

[data-glpi-associated-items-specific-values-extra-field-item] {
.select2-selection {
border-bottom-right-radius: 0 !important;
border-top-left-radius: 0 !important;
}

&:not(:last-of-type) {
.select2-selection {
border-bottom-left-radius: 0 !important;
}
}
}
}

[data-glpi-associated-items-specific-values-extra-field-item] {
margin-top: calc(-1 * var(--tblr-border-width));
}
}

[data-glpi-itildestination-remove-field-config] {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
margin-left: calc(-1 * var(--tblr-border-width));
}
}

[data-glpi-itildestination-remove-field-config],
[data-glpi-remove-associated-item-button] {
&:hover {
z-index: 99;
}
}
}
45 changes: 31 additions & 14 deletions js/modules/Forms/FieldDestinationAssociatedItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,6 @@ export class GlpiFormFieldDestinationAssociatedItem {
*/
#specific_values_template;

/**
* Button to add associated items (jquery selector)
* @type {jQuery<HTMLElement>}
*/
#add_associated_item_button;

/**
* @param {jQuery<HTMLElement>} specific_values_extra_field
*/
Expand All @@ -74,16 +68,32 @@ export class GlpiFormFieldDestinationAssociatedItem {
) {
this.#itemtype_name = itemtype_name;
this.#items_id_name = items_id_name;
this.#associated_items_container = specific_values_extra_field.find('[data-glpi-specific-values-extra-field-container]');
this.#specific_values_template = specific_values_extra_field.find('[data-glpi-specific-values-extra-field-template]');
this.#add_associated_item_button = specific_values_extra_field.find('[data-glpi-add-associated-item-button]');
this.#associated_items_container = specific_values_extra_field.find('[data-glpi-associated-items-specific-values-extra-field-container]');
this.#specific_values_template = specific_values_extra_field.find('[data-glpi-associated-items-specific-values-extra-field-template]');

this.#add_associated_item_button.on('click', () => {
this.#addAssociatedItemField();
});
this.#associated_items_container.on('change', `select[name="${this.#items_id_name}"]`, () => this.#handleChanges());

this.#associated_items_container.find('[data-glpi-remove-associated-item-button]')
.each((index, button) => this.#registerOnRemoveAssociatedItem($(button)));

this.#associated_items_container
.find('[data-glpi-associated-items-specific-values-extra-field-item]')
.each((index, field) => this.#initDropdowns($(field)));
}

#handleChanges() {
const empty_fields = this.#associated_items_container.find(`[data-glpi-associated-items-specific-values-extra-field-item]`)
.filter((index, field) => ($(field).find(`select[name="${this.#items_id_name}"]`).val() ?? "0") === "0");

// Always keep one empty field
if (empty_fields.length > 1) {
// Remove fields that are not filled, except the first one
empty_fields.filter((index) => index !== 0)
.closest('[data-glpi-associated-items-specific-values-extra-field-item]')
.remove();
} else if (empty_fields.length === 0) {
this.#addAssociatedItemField();
}
}

#addAssociatedItemField() {
Expand All @@ -92,7 +102,7 @@ export class GlpiFormFieldDestinationAssociatedItem {
this.#associated_items_container.append(template_content);

// Get the last item added
const template = this.#associated_items_container.find('[data-glpi-specific-values-extra-field-item]').last();
const template = this.#associated_items_container.find('[data-glpi-associated-items-specific-values-extra-field-item]').last();

// Initialize dropdowns and register events
this.#initDropdowns(template);
Expand All @@ -101,7 +111,14 @@ export class GlpiFormFieldDestinationAssociatedItem {

#registerOnRemoveAssociatedItem(button) {
button.on('click', () => {
button.closest('[data-glpi-specific-values-extra-field-item]').remove();
if (
(button.closest('[data-glpi-associated-items-specific-values-extra-field-item]')
.find(`select[name="${this.#items_id_name}"]`).val() ?? "0") !== "0"
|| this.#associated_items_container.find(`select[name="${this.#items_id_name}"]`)
.filter((index, field) => $(field).val() === "0").length > 1
) {
button.closest('[data-glpi-associated-items-specific-values-extra-field-item]').remove();
}
});
}

Expand Down
Loading

0 comments on commit 475807c

Please sign in to comment.