Table of Contents

VDOM Stack (Vue Deno Oak MongoDB) CRUD example

In our last two articles, we learned the create and fetch the contact details in VDOM stack application. In this article, we are going to implement the remaining edit and delete part of this CRUD series.

Add edit contact concept in contact.ts in model folder

editContact = async (contactId: string) => {
    return await this.contactCollection.findOne({
      _id: { $oid: contactId },
    });
  };

editContact = async (contactId: string) => {

return await this.contactCollection.findOne({

_id: { $oid: contactId },

});

};

Create editContact function in controller

export const editContact: any = async(response: any) =>{
    try{
        let contactId: string = response.params.contactid;
        const data: any = await ContactClass.editContact(contactId);

        if(data){
            response.response.body = data;
            response.response.status = 200;
        }
    }
    catch(e){
        response.response.body = null;
        response.response.status = 500;
    }
}

export const editContact: any = async(response: any) =>{

try{

let contactId: string = response.params.contactid;

const data: any = await ContactClass.editContact(contactId);

if(data){

response.response.body = data;

response.response.status = 200;

}

catch(e){

response.response.body = null;

response.response.status = 500;

}

Add edit contact routes:

import { Router } from "https://deno.land/x/oak/mod.ts";
import { getContacts, createContact, editContact } from "../controllers/contacts.ts";

const router = new Router({
  prefix: "/api",
});

router
  .get("/contacts", getContacts)
  .get('/edit/:contactid', editContact)
  .post("/create", createContact);

export default router;

import { Router } from "https://deno.land/x/oak/mod.ts";

import { getContacts, createContact, editContact } from "../controllers/contacts.ts";

const router = new Router({

prefix: "/api",

});

router

.get("/contacts", getContacts)

.get('/edit/:contactid', editContact)

.post("/create", createContact);

export default router;

Now it’s time to work on the UI part of editComponent.

<template>
  <div class="row justify-content-center">
    <div class="col-md-6">
      <h3 class="text-center">Create Contact</h3>
      <form @submit.prevent="update">
        <div class="form-group">
          <label for="firstName">First Name</label>
          <input type="text" class="form-control" v-model="contact.firstname" required />
        </div>
        <div class="form-group">
          <label for="lastName">Last Name</label>
          <input type="text" class="form-control" v-model="contact.lastname" required />
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="text" class="form-control" v-model="contact.email" required />
        </div>
        <div class="form-group">
          <label for="phone">Phone</label>
          <input type="text" class="form-control" v-model="contact.phone" required />
        </div>
        <div class="form-group">
          <button class="btn btn-success btn-block">Update</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      contact: {},
    };
  },
  created(){
    let apiUrl = `http://localhost:4000/api/edit/${this.$route.params.id}`;
    axios.get(apiUrl).then((res) =>{
      this.contact = res.data;
    })
  },
  methods: {},
};
</script>

<h3 class="text-center">Create Contact</h3>

<label for="firstName">First Name</label>

</div>

</div>

<label for="email">Email</label>

</div>

<label for="phone">Phone</label>

</div>

<button class="btn btn-success btn-block">Update</button>

</div>

</form>

</div>

</template>

import axios from "axios";

export default {

data() {

return {

contact: {},

};

created(){

let apiUrl = `http://localhost:4000/api/edit/${this.$route.params.id}`;

axios.get(apiUrl).then((res) =>{

this.contact = res.data;

})

methods: {},

};

</script>

Update Contact - VDOM stack — Update Contact – VDOM stack

Now it’s time to update the contact. Add below code in contact.ts in model.

updateContact = async (contactId: string, changeData: Contact) => {
    const { matchedCount, modifiedCount, userId } = await this.contactCollection
      .updateOne(
        { _id: { $oid: contactId } },
        { $set: changeData },
      );
    return matchedCount !== 0 ? true : false;
  };

updateContact = async (contactId: string, changeData: Contact) => {

const { matchedCount, modifiedCount, userId } = await this.contactCollection

.updateOne(

{ _id: { $oid: contactId } },

{ $set: changeData },

);

return matchedCount !== 0 ? true : false;

};

Now add update contact in controller.

export const updateContact = async({request, response, params}: {request: any, response: any, params: any})=>{
    const contactId = await params.contactId;
    const requestBody = await request.body({
        contentTypes: {
            text: ["application/ld+json"]
        }
    });
    const contact = requestBody.value;
    const updateContact = await ContactClass.updateContact(contactId, contact);
    if(updateContact == true){
        response.status = 200;
        response.body = {
            msg: "Contact has been updated"
        }
    }
    else{
        response.status = 404;
        response.body = {
            msg: "Contact not found";
        }
    }
}

export const updateContact = async({request, response, params}: {request: any, response: any, params: any})=>{

const contactId = await params.contactId;

const requestBody = await request.body({

contentTypes: {

text: ["application/ld+json"]

}

});

const contact = requestBody.value;

const updateContact = await ContactClass.updateContact(contactId, contact);

if(updateContact == true){

response.status = 200;

response.body = {

msg: "Contact has been updated"

}

else{

response.status = 404;

response.body = {

msg: "Contact not found";

}

Add patch routes in contact.ts inside routes folder

router
  .get("/contacts", getContacts)
  .get("/edit/:contactid", editContact)
  .post("/create", createContact)
  .patch("/update/:contactId", updateContact)
  ;

router

.get("/contacts", getContacts)

.get("/edit/:contactid", editContact)

.post("/create", createContact)

.patch("/update/:contactId", updateContact)

;

Next thing is to add update method in EditComponent.vue

update() {
      let apiUrl = `http://localhost:4000/api/update/${this.$route.params.id}`;
      axios.patch(apiUrl, this.contact).then((res)=>{
        console.log(res);
        this.$router.push('contacts');
      }).catch((err)=>console.log(err));
  }

update() {

let apiUrl = `http://localhost:4000/api/update/${this.$route.params.id}`;

axios.patch(apiUrl, this.contact).then((res)=>{

console.log(res);

this.$router.push('contacts');

}).catch((err)=>console.log(err));

}

Now your update section of this stack is completed. Now it’s time to complete our last delete functionality in our application.

Create deleteContact in the models>contact.ts

deleteContact = async (contactId: string) => {
    const isContactDeleted = await this.contactCollection.deleteOne({
      _id: { $oid: contactId },
    });
    return isContactDeleted ? true : false;
  };

deleteContact = async (contactId: string) => {

const isContactDeleted = await this.contactCollection.deleteOne({

_id: { $oid: contactId },

});

return isContactDeleted ? true : false;

};

After model, add deleteContact method in controller of contacts.ts

export const deleteContact = async({request, response, params} : {request: any, response: any, params: any})=>{
    const contactId = await params.contactId;
    const deleteContact = await ContactClass.deleteContact(contactId);
    if(deleteContact){
        response.status = 200;
        response.body = { msg: "Contact has been deleted"}
    }
    else{
        response.status = 404;
        response.body = { msg: "Contact not found"}
    }
}

export const deleteContact = async({request, response, params} : {request: any, response: any, params: any})=>{

const contactId = await params.contactId;

const deleteContact = await ContactClass.deleteContact(contactId);

if(deleteContact){

response.status = 200;

response.body = { msg: "Contact has been deleted"}

}

else{

response.status = 404;

response.body = { msg: "Contact not found"}

}

Now enable the delete link in routes

router
  .get("/contacts", getContacts)
  .get("/edit/:contactid", editContact)
  .post("/create", createContact)
  .patch("/update/:contactId", updateContact)
  .delete("/delete/:contactId", deleteContact);

router

.get("/contacts", getContacts)

.get("/edit/:contactid", editContact)

.post("/create", createContact)

.patch("/update/:contactId", updateContact)

.delete("/delete/:contactId", deleteContact);

At last complete the delete button in the ContactComponent.vue

<button class="btn btn-danger" @click.prevent="deleteContact(contact._id.$oid)">Delete</button>

1	<button class="btn btn-danger" @click.prevent="deleteContact(contact._id.$oid)">Delete</button>

Wait! Have you call the delete service? No, then how your delete will work. Let me finish the last piece of code.

Add deleteContact method in ContactComponet.vue

methods: {
    deleteContact(id) {
      let apiUrl = `http://localhost:4000/api/delete/${id}`;
      let indexOfArrayItem = this.contacts.findIndex((i) => i._id.$oid === id);
      if (window.confirm("Do you want to delete?")) {
        axios
          .delete(apiUrl)
          .then(() => {
            this.contacts.splice(indexOfArrayItem, 1);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },

methods: {

deleteContact(id) {

let apiUrl = `http://localhost:4000/api/delete/${id}`;

let indexOfArrayItem = this.contacts.findIndex((i) => i._id.$oid === id);

if (window.confirm("Do you want to delete?")) {

axios

.delete(apiUrl)

.then(() => {

this.contacts.splice(indexOfArrayItem, 1);

})

.catch((err) => {

console.log(err);

});

}

Video of this code:

As I told you, source code of this series.

Summary

Article Name

VDOM Stack (Vue Deno Oak MongoDB) CRUD example – Part 3

Description

Create and fetch the contact details in VDOM stack application. In this article, we are going to implement the remaining edit and delete part.

Author

Das JS

Publisher Name

Das JS

Publisher Logo

VDOM Stack (Vue Deno Oak MongoDB) CRUD example

Related posts: