CODEWITHSUNDEEP
vue.jsionic-frameworkcapacitor
rosenclosed
rosenclosed

Reputation: 1

How can I add and differentiate multiple ion-modal elements (Ionic Framework / VueJs)

I am currently working on a project in which I need multiple modals on one page. I am having difficulties figuring out how I can detect on which modal the Confirm/Submit Button was pressed to have different things happen.

How can I differentiate between the mutliple different modals to correctly process the inputs?

How can I make sure to identify which element I am editing in the Account editing modal?

I am extremely new to Vue and Ionic so excuse me if this is blindingly obvious...

As seen on this image I have a List of "Accounts" from my SQLite Database. The "+" and "-" and "Edit" buttons on every List element should open a modal to add to, remove from or edit the account, respectively. Screenshot of the Base Page Layout

I have by now implemented a Modal which opens when clicking on the Floating action button in the bottom right. It opens the following modal

<ion-modal ref="newAccountModal" trigger="open-new-account-modal" @willDismiss="onWillDismiss">
    <ion-header>
        <ion-toolbar>
            <ion-buttons slot="start">
                <ion-button @click="cancel()">Cancel</ion-button>
            </ion-buttons>
            <ion-title>Add new Account</ion-title>
            <ion-buttons slot="end">
                <ion-button :strong="true" @click="confirm()">Confirm</ion-button>
            </ion-buttons>
        </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
        <ion-item>
            <ion-input label="Enter name here" label-placement="stacked" ref="new-account-name input" type="text" placeholder="Enter name" v-model="newAccountNameInput"></ion-input>
        </ion-item>
    </ion-content>
</ion-modal>

Screenshot of the Modal

I used the Example for an inline modal from the Ionic Documentation

This is the code making the modal functionable:

const newAccountNameInput = ref<string>("");
const newAccountModal = ref<any>();
const newAccountName = ref<any>();

const cancel = () => newAccountModal.value.$el.dismiss(null, 'cancel');

const confirm = () => {
    const name = newAccountNameInput.value;
    newAccountModal.value.$el.dismiss(name, 'addNewAccountModalConfirm');
    newAccountNameInput.value = "";
};

const onWillDismiss = (ev: CustomEvent<OverlayEventDetail>) => {
    if (ev.detail.role === 'addNewAccountModalConfirm') {
        newAccountName.value = `${ev.detail.data}`;
        addNewAccount();
    }
};

/***
 * Insert New User to table nailaccounts
 */
const addNewAccount = async () => {
    try {
        await db.value?.open();
        await db.value?.query(
            `INSERT INTO nailaccounts (name, balance, lastmod) values (?,?,?)`,
            [newAccountName.value, 0, Date.now()]
        );

        //update UI
        const resSelectAll = await db.value?.query(`SELECT * FROM nailaccounts`);
        items.value = resSelectAll?.values;
    } catch (error) {
        alert((error as Error).message);
    } finally {
        inputName.value = "";
        await db.value?.close();
    }
};

Upvotes: 0

Views: 37

Answers (0)

Related Questions