Building Simple CRM with Vue: Enhancing User Engagement with Modals and Alerts

Check this post in my web notes!

Welcome back to our Vue.js CRM journey! Today, we're delving into a crucial facet of our CRM strategy – enhancing user engagement through the strategic use of modals and alerts. These invaluable helpers play a pivotal role in displaying additional data to users and prompting specific actions, making them indispensable components of any effective system.

In this article, we'll guide you through seamlessly integrating modals and alerts into our Simple CRM, unlocking a new level of user interaction. As we embark on this enhancement journey, let's craft a detailed plan for today's tasks and dive into the process of elevating user engagement within our CRM system.

Prepare to witness the transformation as we leverage the power of modals and alerts to create a more engaging and dynamic Vue.js CRM experience. Let's get started!

1. Integrating Modals into Our Simple Vue.js CRM

Gratefully to Vuetify it's a really simple task for us. I'm offering you to open a Vuetify documentation on the dialog page and choose whatever dialog you like, then copy the code for that dialog. Next, create a Modal.vue component in the UI folder and paste the template from vuetify.

<template>
    <v-row justify="center">
        <v-dialog
            transition="dialog-bottom-transition"
            v-model="dialog"
            persistent
            width="1024"
        >
        </v-dialog>
    </v-row>
</template>

<script>
export default {
    name: 'Modal',
    data() {
        return {
            dialog: true
        }
    },
}
</script>

Open our MainLayout.vue and import our modal component, then add it to the main div.

<template>
    <div>
        <nav>
            <Sidebar @rail="rail = $event" />
        </nav>
        <main>
            <Header />
            <div :class="{ 'main__content': true, 'main__content--rail': !rail }">
                <RouterView />
            </div>
        </main>
        <Modal/>
    </div>
</template>

We added Modals to our Simple CRM app, but now the modal window is always on the screen, so we need to work on additional functionality.

Let's create a modals.js store in the stores folder (use the createPinia function, configure id, state, actions, and getters). We will add "modalStatus" (will control modal visibility status) and "modalType" (will control what type of modal to show) variables, the same getters, and actions that we will use to control modal status and type. Here how it will look like:

import { defineStore } from 'pinia';
export const useModalStore = defineStore({
    id: 'modal',
    state: () => ({
        modalStatus: false,
        modalType: '',
    }),
    actions: {
        aSetModalStatus(status) {
            this.modalStatus = status;
        },
        aSetModalType(type) {
            this.modalType = type;
        },
    },
    getters: {
        gModalStatus: (state) => state.modalStatus,
        gModalType: (state) => state.modalType
}}); 

We need to go back to the MainLayout file, import this store, and modify the Modal component. We will add a v-if directive that will be connected to the "modalStatus" variable, this will control the modal appearance.

<Modal v-if="modalStore.gModalStatus"/>

Great! All is done and we implemented the modal successfully, but how to make it work?

We need to create a new form, and for that let's use vuetify forms. Copy that code into a new component (UsersModal.vue for example) inside the user's folder. And then import that component into Modal.vue file. Insert form inside v-dialog with v-if directive, something like this:

<template>
    <v-row justify="center">
        <v-dialog
            transition="dialog-bottom-transition"
            v-model="modalStore.gModalStatus"
            persistent
            width="1024"
        >
            <UserModal v-if="modalStore.gModalType === 'user'" />
        </v-dialog>
    </v-row>
</template>

Anywhere you need to add a button that will update a modal status and modal type, that will trigger our modal to appear on a screen.

editProfile() {
        this.modalStore.aSetModalType('user');
        this.modalStore.aSetModalStatus(true);
}

Here is the result:

Now you can modify your modal however you want, and show information, statistics, or forms as in our example. It is a really helpful tool in CRM workflow. Let's move on and add some informational messages to our app - "Alerts".

2. A Guide to Implementing Alerts in Our Simple Vue.js CRM

A job that needs to be done is similar to modal implementation, so I am sure it will not be hard to repeat.

We will start with data. Inside the modal store create data that will be used by our alerts: status, type, text, and title. All those settings will be used from vuetify alerts section. Also, we have to remember to add actions that will update that state and getters that will give us access to that data. The final version of our modal store:

import { defineStore } from 'pinia';
export const useModalStore = defineStore({
    id: 'modal',
    state: () => ({
        modalStatus: false,
        modalType: '',
        alertStatus: false,
        alertText: '',
        alertType: '',
        alertTitle: ''
    }),
    actions: {
        aSetModalStatus(status) {
            this.modalStatus = status;
        },
        aSetModalType(type) {
            this.modalType = type;
        },
        aSetAlert(props) {
            const { status, text, type, title } = props;
            this.alertStatus = status;
            this.alertText = text;
            this.alertType = type;
            this.alertTitle = title;
        }
    },
    getters: {
        gModalStatus: (state) => state.modalStatus,
        gModalType: (state) => state.modalType,
        gAlertStatus: (state) => state.alertStatus,
        gAlertText: (state) => state.alertText,
        gAlertType: (state) => state.alertType,
        gAlertTitle: (state) => state.alertTitle
    }
});

Copy the code from Vuetify alerts and paste it into the just created Alert component in the ui folder. Replace data with states from the modal store and change styles according to your needs.

<template>
    <v-alert class="alert-styles"
        closable
        :type="modalStore.gAlertType"
        :title="modalStore.gAlertTitle"
        :text="modalStore.gAlertText"
    ></v-alert>
</template>

<script>
import { useModalStore } from '@/stores/modal';
export default {
    name: 'Alert',
    computed: {
        modalStore() {
            return useModalStore();
        }
    },
    mounted() {
        setTimeout(() => {
            this.modalStore.aClearAlert();
        }, 4000)
    }
}
</script>

Now, modify our layout, import the Alert component, and add this component to the template.

<template>
    <div>
        <nav>
            <Sidebar @rail="rail = $event" />
        </nav>
        <main>
            <Header />
            <Alert v-if="modalStore.gAlertStatus"/>
            <div :class="{ 'main__content': true, 'main__content--rail': !rail }">
                <RouterView />
            </div>
        </main>
        <Modal v-if="modalStore.gModalStatus"/>
    </div>
</template>

Great. We implemented Alerts into our simple CRM app. Your task is to add a clear action that will set all our values to null. I am sure you can do it on your own.

How to use Alerts? Simple, need to call aSetAlert action and pass data that we need to be shown.

this.modalStore.aSetAlert({
            status: true,
            type: 'success',
            title: 'Success',
            text: 'User updated successfully'
})

And the result will look like this:

In conclusion, augmenting user engagement in your Vue.js CRM through the strategic integration of modals and alerts is a transformative journey. By seamlessly implementing these features, your CRM system becomes more dynamic and user-friendly, fostering a more interactive and responsive user experience. Whether displaying additional data or prompting specific actions, modals and alerts contribute significantly to the system's effectiveness. As you navigate through the steps outlined in this guide, remember to tailor these components to suit your specific CRM needs, allowing for a personalized touch in your user interactions. Elevate your Vue.js CRM to new heights by leveraging the power of modals and alerts, enhancing not just functionality but also user satisfaction and overall system efficiency. Stay tuned for more insights into optimizing your CRM system for superior user engagement!