Relation controller popup: fix size, add cssClass and allowDismiss

[AIC-BV]

Add the possibility to define the popup size and its custom CSS classes.
You can now define these properties at the manage part of the config_relation.yaml:

myRelation:
    manage:
        size: giant
        cssClass: test

See all popup sizes at https://wintercms.com/docs/v1.2/ui/controls/popup#data-attributes

size already existed, but was hardcoded and not dynamically filled in.
cssClass is added.

[LukeTowers]

@AIC-BV @mjauvin what's left on this?

[AIC-BV]

@LukeTowers Should be finished

[AIC-BV]

Could add allowDismiss (see comments)
#1053

[LukeTowers]

@AIC-BV just a thought, is there a way we could integrate with the change monitor used in the cms section for the tabs to detect when a change has happened inside of a modal and warn / prevent the dismiss behaviour from being triggered in those cases?

[AIC-BV]

@AIC-BV just a thought, is there a way we could integrate with the change monitor used in the cms section for the tabs to detect when a change has happened inside of a modal and warn / prevent the dismiss behaviour from being triggered in those cases?

I assume something like this could be a basic for that kind of behaviour

if (this.options.allowDismiss) {
    modal.on('click', function(e) {
        const target = e.target;
        if (target.classList.contains('control-popup')) {

            if (!modal.dataset.hasChanges) {
                modal.hide()
                $('.popup-backdrop').remove()
                $(document.body).removeClass('modal-open')
            } else {
                // popup warning them about unsaved changes
            }

        }
    });

    const inputs = modal.querySelectorAll('input')
    for (const input of inputs) {
        input.addEventListener('change', function() {
            modal.dataset.hasChanges = true
        })
    }
}

[AIC-BV]

Thoughts @LukeTowers @mjauvin ?

[LukeTowers]

@AIC-BV seems fine, have you tested it out?

[AIC-BV]

I'm using everything except the latest comment: #1044 (comment)

[LukeTowers]

@AIC-BV can we remove allowDismiss from this PR for now then? I don't want to support it unless it can be a bit safer first.

[AIC-BV]

If its ok for you I will add the popup shortly instead

[AIC-BV]

@AIC-BV can we remove allowDismiss from this PR for now then? I don't want to support it unless it can be a bit safer first.

Can you help me getting started?
Don't know how to do this using Winter UI.

Also, will this be enough?
For example: the code below will notice 'changes' when input has been changed, but if it is changed back to its original value, it will still be marked as changed etc. There are some loopholes to this simple logic.

PS:
The PR as is, works perfectly fine. Have been using it a lot, by many people, in production for a month now, but it shows no popup if they have unchanged changes (but it doesn't occur here)

if (this.options.allowDismiss) {
    modal.on('click', function(e) {
        const target = e.target;
        if (target.classList.contains('control-popup')) {

            if (!modal.dataset.hasChanges) {
                modal.hide()
                $('.popup-backdrop').remove()
                $(document.body).removeClass('modal-open')
            } else {
            
                // HOW CAN I DO THIS USING WINTER UI?
                // popup warning them about unsaved changes
                // where they can press 'Cancel' or 'Continue anyways'
            }

        }
    });

    const inputs = modal.querySelectorAll('input')
    for (const input of inputs) {
        input.addEventListener('change', function() {
            modal.dataset.hasChanges = 'true'
        })
    }
}

https://wintercms.com/docs/v1.2/ui/controls/popup#examples

[LukeTowers]

There's existing code for tracking changes here: https://wintercms.com/docs/v1.2/ui/script/input-monitor

[AIC-BV]

Was making another relation popup and added these properties in the relation_config:
Can't stress enough how good it works and how nice it is.

allowDismiss: true
cssClass: huge-popup

I tried the change monitor and it doesn't show the warning when closing the popup.
The change monitor has this 'issue' as well

For example: the code below will notice 'changes' when input has been changed, but if it is changed back to its original value, it will still be marked as changed

What is left for finishing this PR is a way to show a popup warning the user about unsaved changes using either Input Monitor or custom written JS.

if (this.options.allowDismiss) {
    modal.on('click', function(e) {
        const target = e.target;
        if (target.classList.contains('control-popup')) {

            if (!modal.dataset.hasChanges) {
                modal.hide()
                $('.popup-backdrop').remove()
                $(document.body).removeClass('modal-open')
            } else {
            
                // HOW CAN I DO THIS USING WINTER UI?
                // popup warning them about unsaved changes
                // where they can press 'Cancel' or 'Continue anyways'
                alert('UNSAVED CHANGES!')
               
            }

        }
    });

    const inputs = modal.querySelectorAll('input')
    for (const input of inputs) {
        input.addEventListener('change', function() {
            modal.dataset.hasChanges = 'true'
        })
    }
}

[LukeTowers]

@jaxwilko any input?

[jaxwilko]

@jaxwilko any input?

You can use Snowboard.flash() to trigger the flash messaging, I believe it's available in the backend.

Apart from that looks cool, I'll check it out and have a play when I have time :)

[AIC-BV]

Strongly suggest to try it out :)
Works great and is being used here 8 hours/day by 3-4 collegues

[LukeTowers]

@AIC-BV are you able to record a loom or something showing the new functionality and make a PR to the docs? If you can get those done then I should be able to quickly review and merge this before I push out 1.2.7.

[AIC-BV]

1. This PR fixes the 'size' attribute, which was hardcoded before
2. Adds the 'cssClass' attribute: allowing you to customise the popup (I make it much bigger because it has important data for production)
3. And adds support for 'allowDismiss': https://www.loom.com/share/3c10c530854f4e0597f4dd00c632a5cc?sid=08f8142e-55b0-42fc-aae6-fab1b5820c77

allowDismiss = Clicking next to the modal closes it (on mousedown because if you drag to select something and release the mouse button outside the modal, it would close the modal too)
Great for reading the data in the record and not having to scroll down to close it

[AIC-BV]

wintercms/docs#207

[LukeTowers]

Were you able to get the change monitoring to work?

[AIC-BV]

No there is no change monitor.
I remember trying to add it but it was looking at the main record instead of the related record

[LukeTowers]

@jaxwilko is this something you could take a look at? I'm concerned that if we add this functionality without that as a failsafe it could make accidental data loss for users too easy when in theory it shouldn't be too difficult to add the change monitoring before we merge this.

[LukeTowers]

@AIC-BV were you looking at https://wintercms.com/docs/v1.2/ui/script/input-monitor? (https://github.com/wintercms/winter/blob/develop/modules/system/assets/ui/js/input.monitor.js)

[AIC-BV]

Yes