Add row modal

[dantownsend]

I just realised something weird - if you command + click on the add row button on the listing page, it opens a modal.

The behaviour is kind of opposite of what you would imagine:

• Clicking on add row opens a modal
• Command + click on add row opens it in a new page

[sinisaos]

• Clicking on add row opens a modal
• Command + click on add row opens it in a new page

@dantownsend In my case the behavior is the opposite of yours. What is the expected behavior? Should both events open a modal or a new page?

[dantownsend]

@sinisaos I forgot the modal was even a thing. Maybe it's something that got broken in the Vue 3 transition. I'm not even sure if we need it.

I think the original intention was when you click add row, it opens the modal. And when you right click and open in a new tab, it shows the edit page.

[sinisaos]

@dantownsend If we want ctrl + click to behave like a right click (open the add page in a new browser tab), we just need to change this line

piccolo_admin/admin_ui/src/views/RowListing.vue

Line 40 in b011f78

v-on:click.prevent="showAddRow = true"

to v-on:click.ctrl="showAddRow = true"

If we want both events to show modal, we just need to change the router-link to a tag with href="#". Something like this in RowListing.vue

<a
    href="#"
    class="button"
    v-on:click.prevent="showAddRow = true"
>
    <font-awesome-icon icon="plus" />
    <span>{{ $t("Add Row") }}</span>
</a>

But I think the current behavior is not bad at all because it provides two options to add rows, with modal or new page (and modal can be useful in some situations). The only thing that should be documented somehow, so that the user knows that with a click he opens a new page for adding, with a ctrl + click opens a modal for adding row, and right click opens a new page in another browser tab.

We can use the title attribute to show the user that there are two options for adding a record.

add_row_title.webm