Bag (BagPart), implement custom settings for a Bag with a list of different "Content Types" contained in it

[MarGraz]

Hi everyone,

I'm continuing exploring Orchard Core and I'm working on implementing custom settings for the BagPart (Bag) provided by Orchard Core. The requirements I defined are as follows:

1. Every Content Types where the Admin adds a check in the "Edit" page, must add two input fields, that are the properties MinItems and MaxItems (see the image below to better understand the UI). These properties will be utilized later in an Handler when a new instance of my Company object is created and submitted;
2. If this module, which adds the "Max" and "Min" feature to the "Bag", is used for the first time, and the BagPart edit page is loaded, the model will be empty. In this case, I need to display the "Max" and "Min" fields (set to zero) for those Content Types that are already been checked;
-- 2.1. If the model is populated, I need to show the saved values for the checked Content Types.

How have I implemented this requirements in my Module?

With a model, that contains a List of ContentType (name of the checked type), MaxItems and MinItems properties:

    public class BagPartCustomSettingsList
    {
        public List<BagPartCustomContentTypeSettings> ContentTypeSettings { get; set; } = new List<BagPartCustomContentTypeSettings>();
    }
    
        public class BagPartCustomContentTypeSettings
    {
        // It stores the name of the Content Type checked
        public string ContentType { get; set; }
        public int MinItems { get; set; }
        public int MaxItems { get; set; }
    }

With a view model that reflects the model:

   public class BagPartCustomSettingsListViewModel
   {
       public List<BagPartCustomContentTypeSettingsViewModel> ContentTypeSettings { get; set; } = new List<BagPartCustomContentTypeSettingsViewModel>();
   }
   
       public class BagPartCustomContentTypeSettingsViewModel
    {
        public string ContentType { get; set; }

        [NonNegativeIntValue]
        public int MinItems { get; set; }
        
        [NonNegativeIntValue]
        [MaxNotLessThanMin(nameof(MinItems))]
        public int MaxItems { get; set; }

        // This property help in initializing the UI. Doesn't need to be saved
        public bool IsSelected { get; set; }
    }

And a display driver:

    public class BagPartMinMaxSettingsDisplayDriver : ContentTypePartDefinitionDisplayDriver<BagPart>
{
    private readonly IContentDefinitionManager _contentDefinitionManager;

    public BagPartMinMaxSettingsDisplayDriver(IContentDefinitionManager contentDefinitionManager)
    {
        _contentDefinitionManager = contentDefinitionManager;
    }

    public override IDisplayResult Edit(ContentTypePartDefinition partDefinition)
    {
        return Initialize<BagPartCustomSettingsListViewModel>("CustomBagPartSettings_Edit", model =>
        {
            var settings = partDefinition.GetSettings<BagPartCustomSettingsList>();

            var allContentTypes = _contentDefinitionManager.ListTypeDefinitions();

            foreach (var contentType in allContentTypes)
            {
                var contentTypeSettings = settings?.ContentTypeSettings?.Find(s => s.ContentType == contentType.Name);
                model.ContentTypeSettings.Add(new BagPartCustomContentTypeSettingsViewModel
                {
                    ContentType = contentType.Name,
                    MinItems = contentTypeSettings?.MinItems ?? 0,
                    MaxItems = contentTypeSettings?.MaxItems ?? 0,
                    IsSelected = contentTypeSettings != null
                });
            }
        }).Location("Content:5");
    }

    public override async Task<IDisplayResult> UpdateAsync(ContentTypePartDefinition partDefinition, UpdateTypePartEditorContext context)
    {
        var model = new BagPartCustomSettingsListViewModel();

        if (await context.Updater.TryUpdateModelAsync(model, Prefix))
        {
            var settings = new BagPartCustomSettingsList
            {
                ContentTypeSettings = model.ContentTypeSettings.Select(vm => new BagPartCustomContentTypeSettings
                {
                    ContentType = vm.ContentType,
                    MinItems = vm.MinItems,
                    MaxItems = vm.MaxItems
                }).ToList()
            };

            // Update the settings in the content type part
            context.Builder.WithSettings(settings);
        }

        return Edit(partDefinition, context.Updater);
    }

Here is my CustomBagPartSettings.Edit.cshtml page, with JavaScript to add and remove settings as the Admin interacts with the checkboxes:

@model BagPartCustomSettingsListViewModel

<div id="settingsContainer">
    @for (int i = 0; i < Model.ContentTypeSettings.Count; i++)
    {
        var setting = Model.ContentTypeSettings[i];
        <div class="content-type-card @(setting.IsSelected ? "" : "d-none")" data-content-type="@setting.ContentType">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-header">Settings for @setting.ContentType</div>
                        <div class="card-body">
                            <fieldset class="form-group">
                                <div class="form-group mb-2">
                                    <label>Minimum bag items</label>
                                    <input name="ContentTypeSettings[@i].MinItems" class="form-control" type="number" value="@setting.MinItems" />
                                </div>
                                <div class="form-group mb-2">
                                    <label>Maximum bag items</label>
                                    <input name="ContentTypeSettings[@i].MaxItems" class="form-control" type="number" value="@setting.MaxItems" />
                                </div>
                            </fieldset>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

<script at="Foot">
    
    document.addEventListener('DOMContentLoaded', function () {
        // Store initial values of Min and Max inputs to prevent that if the user switch to "Stereotypes", the changed values are updated
        const initialValues = {};
        document.querySelectorAll('.content-type-card input[type="number"]').forEach(input => {
            initialValues[input.name] = input.value;
        });

        // Function to reset Min and Max input values to their initial values
        function resetInputValues() {
            for (const name in initialValues) {
                const input = document.querySelector(`input[name="${name}"]`);
                if (input) {
                    input.value = initialValues[name];
                }
            }
        }

        // Function to update visibility of configuration cards based on checkbox state
        function updateCardVisibility(checkbox) {
            var contentType = checkbox.value;
            var card = document.querySelector(`.content-type-card[data-content-type="${contentType}"]`);
            if (document.querySelector('input[name="User.BagPart.BagPartSettingsDisplayDriver.Source"]:checked').value === 'ContentTypes' && checkbox.checked) {
                card.classList.remove('d-none');
            } else {
                card.classList.add('d-none');
            }
        }

        // Attach event listeners to checkboxes
        document.querySelectorAll('#ContentTypesContainer input[type="checkbox"]').forEach(checkbox => {
            checkbox.addEventListener('change', function () {
                updateCardVisibility(this);
            });
            // Initialize visibility based on current checkbox state
            updateCardVisibility(checkbox);
        });

        // Function to adjust visibility based on radio button selection
        function adjustVisibilityBasedOnSource() {
            var isContentTypeSelected = document.querySelector('input[name="User.BagPart.BagPartSettingsDisplayDriver.Source"]:checked').value === 'ContentTypes';

            // Adjust visibility of all cards
            document.querySelectorAll('.content-type-card').forEach(card => {
                var checkbox = document.querySelector(`#ContentTypesContainer input[type="checkbox"][value="${card.dataset.contentType}"]`);
                card.classList.toggle('d-none', !(isContentTypeSelected && checkbox && checkbox.checked));
            });

            // Reset Min and Max values if "Stereotype" is selected
            if (!isContentTypeSelected) {
                resetInputValues();
            }
        }

        // Attach event listeners to radio buttons
        document.querySelectorAll('input[name="User.BagPart.BagPartSettingsDisplayDriver.Source"]').forEach(radio => {
            radio.addEventListener('change', adjustVisibilityBasedOnSource);
        });

        // Initial adjustment to ensure UI matches the current state
        adjustVisibilityBasedOnSource();
    });
    
</script>

The problem I'm facing is that when I submit the page, my view model is always empty😟
What am I doing wrong? Probably everything 😅

Thank you

Here is possible to see the input fields added for every checked Content Types:

[MarGraz]

We already discussed something similar here, but for Content Fields with a "Bag" that has one element in the custom settings.

@douwinga do you have any ideas on how I can implement this? 🤔💡

Thank you

[MarGraz]

I have updated the code in the first message of this thread. Now, the HTML cards are no longer injected via JavaScript, and I have also added a control on the Stereotype radio button.

I have done some testing, and in the payload, I see the "Max" and "Min" values added to the input fields. But, in the UpdateAsync method of BagPartMinMaxSettingsDisplayDriver, the model is always empty 😟

Here's the Form Data, but I'm close to finding a solution:

DisplayName: Related Objects
Description: Lista di Billing Address e Shipping Address
Company.BagPart.BagPartSettingsDisplayDriver.Source: ContentTypes
Company.BagPart.BagPartSettingsDisplayDriver.ContainedContentTypes: BillingAddress
Company.BagPart.BagPartSettingsDisplayDriver.ContainedContentTypes: ShippingAddress
Company.BagPart.BagPartSettingsDisplayDriver.Stereotypes:
Company.BagPart.BagPartSettingsDisplayDriver.DisplayType:
ContentTypeSettings[0].MinItems: 0
ContentTypeSettings[0].MaxItems: 0
ContentTypeSettings[1].MinItems: 0
ContentTypeSettings[1].MaxItems: 10
ContentTypeSettings[2].MinItems: 0
ContentTypeSettings[2].MaxItems: 5
Editor:
submit.Save: Save
__RequestVerificationToken: CfDJ8LvdAnq-depFpsl8M29oFt4ZwCuc002j1RVb51BFN7Y5uf1VrlQxtUOt8Y0CAzQ8t-s9CIkbAH-mWeG57blgraOhmK-2ZW5inHg7aU5Vxo6pNFuySq842naA0DoTWFDHXPJlzyuV__3FKpU_joD2z-jCd0rRPQnn9MIUDMI11SY9pZOShA26ItTedKHq-DbSwg
Company.BagPart.GraphQLContentTypePartSettingsDriver.Settings.Collapse: false
Company.BagPart.GraphQLContentTypePartSettingsDriver.Settings.Hidden: false

Thank you

[MarGraz]

I found the problem. I made a simple but effective mistake 🐔😅

I used the incorrect name attribute value for every input field. As a result, when the form was submitted and UpdateAsync was called, the Prefix value was incorrect, causing data binding to fail.

Here's an example of the correct name value:

<input name="Company.BagPart.BagPartMinMaxSettingsDisplayDriver.ContentTypeSettings[@i].MinItems" class="form-control" type="number" value="@setting.MinItems" />

I also forgot to add an hidden input field for the ContentType property. This property is non nullable and must be included in the model, otherwise the update will fail.

Thank you

[MarGraz]

@douwinga, @hishamco (I'm mentioning both of you because we discussed a related topic here). I have a question about adding custom settings to a BagPart.

Specifically, what happens to these custom settings if the Content Types to which they are added get deleted? Is there a way to establish a relationship with these custom settings so that Orchard Core can automatically remove them to maintain a clean database?

Thank you

[hishamco]

While this discussion has been answered I prefer to open a new one, to avoid this being long

[MarGraz]

@hishamco I opened a new discussion here.

Thank you