mapp.ui.elements.alert/ confirm methods

[cityremade]

mapp.ui.elements.alert
mapp.ui.elements.confirm

This is alert / confirm elements to display information to the user.

Uses the existing ui.elements.dialog.

2 parameters added to the dialog:

closeOnClick - when set to true the dialog closes when the document is clicked anywhere over the backdrop.
onClose - callback function to execute when dialog fires a close event.

mapp.ui.elements.alert({
   text: "Drivetimes have been created."
})


---
- To see the specific tasks where the Asana app for GitHub is being used, see below:
  - https://app.asana.com/0/0/1208407306090518

[dbauszus-glx]

This should make use of the mapp.ui.elements.dialog() method to create the dialog itself.

[cityremade]

Changes made:

alert is now a ui.elements.dialog.

2 parameters added to the dialog:

closeOnClick - when set to true the dialog closes when the document is clicked anywhere over the backdrop.
onClose - callback function to execute when dialog fires a close event.

Both documented in the dialog module.

[cityremade]

Confirm method now in the same pr;

Change now included;

[dbauszus-glx]

The confirm dialog in /ui/locations/view breaks with mapp.ui.elements not being a function.

This can be tested by removing a location with outstanding edits.

.mapp-says should be replaced with a semantic class like .alert-confirm

The jsdoc return for function that return a promise must be promise with the text explaining how the promise resolves.

[RobAndrewHurst]

I have added in a test for the dialog ui element to test the close functionality. And I noticed after invoking the close that the dialog can still be found in the DOM. I am not too sure if this is something todo with dialogs, or if we are not closing correctly.

[RobAndrewHurst]

See comment above.

[cityremade]

ui.elements.dialog has onClose callback where closed dialog can be removed if needed.
Removing the element will not be a case at all times.

[dbauszus-glx]

The dialog element method decorates the params argument.

const dialog = {
  content: 'foo'
}

// dialog becomes the decorated dialog object with the dialog.node being the dialog node element.
mapp.ui.elements.dialog(dialog)

The dialog element method should return the decorated dialog.

// dialog becomes the decorated dialog with the dialog.node being the dialog node element.
const dialog = mapp.ui.elements.dialog({
  content: 'foo'
})

The dialog.close() method should call the dialog element close method as well as remove the element.

dialog.close = ()=>{
  dialog.node.close()
  dialog.node.remove()
}

[dbauszus-glx]

The confirm dialog closes when I click on the header. This shouldn't happen.

The closeBtn shouldn't be there if it shouldn't be there. Regardless whether the styling set's the button to the same colour.

[dbauszus-glx]

We try to avoid negating flags. I removed the hideCloseBtn reference. Default will be no close button. If the closeBtn is defined, ie true then the property will be mutated to a html fragment. No web api node needed here. Also no tertiary statement needed.

7bb0b49

[dbauszus-glx]

There was a lot of unnecessary stopPropagation. There must not be a click event on the dialog element. Also the dialog must not close when clicked anywhere. That defeats the logic of a confirm dialog. A confirm dialog should be boolean. E.g. Ok=true, Cancel=false. There is no tertiary whatever/close state.

There was a lot of close onClose closeDialog action. This has been streamlined.

The closeDialog method calls the onClose event method.

The dialog.close is closeDialog method.

dialog.clkoseBtn calls closeDialog method.

dialog onclose event calls closeDialog method.

there shouldn't be any stopPropagation required.

[dbauszus-glx]

This is now working for me as expected. Please see comments.

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud