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

[AIC-BV]

Ran composer update and this got overwritten ofcourse.
We still use this every single day

[LukeTowers]

@AIC-BV waiting on the docs PR to get updated / my comment to be responded to: https://github.com/wintercms/docs/pull/207/files#r1739737060. Will also need to update from develop and recompile the JS.

[AIC-BV]

@AIC-BV waiting on the docs PR to get updated / my comment to be responded to: https://github.com/wintercms/docs/pull/207/files#r1739737060. Will also need to update from develop and recompile the JS.

Oops 👀

[mjauvin]

@AIC-BV are we good with all the requested changes? I'd like this to get merged.