Welcome back to our Vue.js CRM series! In our previous article, we delved into the realm of data visualization, unlocking the power of Vuetify Dynamic Table Components. Now, as we continue our journey, we shift our focus to a critical aspect of any CRM system—document operations.

In this installment, we're diving deep into CRUD operations, the backbone of efficient data management. Whether you're creating, retrieving, updating, or deleting data, these operations are pivotal for a seamless CRM experience.

Today, we'll explore practical examples, guiding you through the integration of Vue.js with Firestore for robust document handling. From creating a document to updating and removing it, we've got you covered.

So, buckle up as we embark on a journey through the intricacies of Document CRUD Operations in Vue.js CRM. Ready to amplify your understanding and enhance your CRM functionalities? Let's dive into the specifics and kick off with a concise plan for today's exploration.

1. Crafting New Database Entries

In our previous article we were working with modals, so let's use modals for adding new products, for example. For that purpose, we will use vuetify tabs and forms.

- create a new component "ProductModal.vue" in the products folder;

- copy tabs from Vuetify documentation and paste the template inside our new component;

- copy forms and paste them into tabs;

- rename tabs, add v-model directives to every input so that we could control the data workflow;

Here is my example of a modal form:

<template>
    <v-card color="indigo-darken-3">
        <v-card-title>
            <span class="text-h5">product</span>
        </v-card-title>
        <v-tabs
            v-model="tab"
            bg-color="primary"
            >
            <v-tab value="one">main</v-tab>
            <v-tab value="two">additional</v-tab>
        </v-tabs>
        <v-card-text>
            <v-window v-model="tab">
                <v-window-item value="one">
                    <v-container>
                        <v-row>
                            <v-col
                                cols="12" sm="6">
                                <v-row>
                                    <v-col
                                        cols="12"
                                    >
                                    <v-text-field
                                        label="name"
                                        required
                                        v-model="name"
                                    ></v-text-field>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-text-field
                                            label="articul"
                                            required
                                            v-model="articul"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-text-field
                                            label="quantity"
                                            required
                                            v-model="quantity"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col cols="12">
                                        <v-text-field
                                            label="price"
                                            required
                                            v-model="price"
                                        ></v-text-field>
                                    </v-col>
                                </v-row>
                            </v-col>
                        </v-row>
                    </v-container>
                </v-window-item>
                <v-window-item value="two">
                    <v-container>
                        <v-row>
                            <v-col cols="12" sm="6">
                                <v-col cols="12">
                                    <v-text-field
                                        label="category"
                                        required
                                        v-model="category"
                                    ></v-text-field>
                                </v-col>
                                <v-col cols="12">
                                    <v-text-field
                                        label="size"
                                        required
                                        v-model="size"
                                    ></v-text-field>
                                </v-col>
                            </v-col>
                            <v-col cols="12" sm="6">
                                <v-col cols="12">
                                    <v-text-field
                                        label="color"
                                        required
                                        v-model="color"
                                    ></v-text-field>
                                </v-col>
                                <v-col cols="12">
                                    <v-select
                                        label="store"
                                        :items="storesList"
                                        required
                                        v-model="store"
                                    ></v-select>
                                </v-col>
                            </v-col>
                        </v-row>
                        <v-row>
                            <v-col cols="12">
                                <v-textarea 
                                    :label="$t('note')" 
                                    variant="outlined"
                                    v-model="note">
                                </v-textarea>
                            </v-col>
                        </v-row>
                    </v-container>
                </v-window-item>
            </v-window>
        </v-card-text>
        <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
                color="blue-darken-1"
                variant="text"
                @click="closeModal"
            >
            close
            </v-btn>
            <v-btn
                v-else
                color="blue-darken-1"
                variant="text"
                :loading="loading"
                @click.prevent="createNewProduct"
            >
            save
            </v-btn>
        </v-card-actions>
    </v-card>
</template>

Great! We have our form for creating new products and next what we need to add - is methods that will get data from the form and send it to the firestore database. For that reason, we will add new pinia store "products", and add an action that will asynchronously send data to the firestore database. Do not forget to import all necessary libs. Here is an example:

import { defineStore } from 'pinia';
import { firestore } from '../firebase/firebase';
import { doc, collection, setDoc} from "firebase/firestore";



export const useProductsStore = defineStore({
    id: 'products',
    state: () => ({}),
    actions: {
        async aCreateProduct(product) {
            try {
                const newStoreRef = doc(collection(firestore, "products"));
                product.id = newStoreRef.id;
                await setDoc(newStoreRef, product);
            } catch (error) {
                const errorCode = error.code;
                const errorMessage = error.message;
                console.log(errorCode,errorMessage);
            }
        },
    }
});

In this action we create a document with a random id, then receive the id and store it in the product, after that, we will save our product under that current ID. Next, we need to add a new "save" method that will use our action and send data to Firestore. In that "createNewProduct" method we will:

- call the "createProduct" action and as a parameter send our product;

- receive updated products from the database, to update the products list in our app;

- close modal;

- show an alert about the result;

async createNewProduct() {
            try {
                await this.productsStore.aCreateProduct();
                await this.productsStore.aGetProductsList();
                this.modalStore.aSetModalStatus(false);
                this.modalStore.aSetAlert({
                    status: true,
                    type: 'success',
                    title: 'Success',
                    text: 'Product has been created'
                })
            } catch (error) {
                console.log(error);
                this.modalStore.aSetAlert({
                    status: true,
                    type: 'error',
                    title: 'Error',
                    text: error
                })
            }
        },

Awesome! We can run our app, open the modal, and check the building process. Please, feel free to share with me the results you have!

Mastering Reusable Modals in Vue.js: Enhancing UI Flexibility

0 comments

Leave a comment

Categories

Series

Popular Articles

Serving Website With Express: A Beginn...

Exploring Express.js: A Guide to Routi...

Vue Router: Exploring Dynamic Routes w...