api crud vue js

app.vue

import AddProduct from './components/AddProduct.vue';
import ShowProduct from './components/ShowProduct.vue';
import EditProduct from './components/EditProduct.vue';

export default{
components:{
AddProduct,
ShowProduct,

EditProduct
},
data(){
return {
products:[],
categories:[],
currentPage:1,
pageSize:5,
selectedCategory:'',
searchQuery:'',
searchDescription:'',
selectedProduct:null,
showAddModal: false,
showDetailsModal:false,
showEditModal:false,
sortBy:'',
orderBy:''
};
}
,
async created(){
try {
const response = await fetch('https://fakestoreapi.com/products');
this.products = await response.json();
this.categories=[ ...new Set(this.products.map(product =>product.category))]
} catch (error) {
console.error(error);
}
},
watch: {
sortBy(newValue) {
if (newValue) {
this.orderBy = '';
}
},
orderBy(newValue) {
if (newValue) {
this.sortBy = '';
}
}
},
computed:{
totalPrice(){
return this.filteredProducts.reduce((sum,product) => sum+product.price,0);
},
totalPerPage(){
return this.paginatedProducts.reduce((sum,product)=> sum + product.price, 0);
},
totalPages(){
return Math.ceil(this.filteredProducts.length/this.pageSize);
},

paginatedProducts(){
  const start=(this.currentPage-1)*this.pageSize;
  const end=start+this.pageSize;
  return this.filteredProducts.slice(start,end)
},
filteredProducts(){
  let filtered=this.products;
  if(this.selectedCategory){
    filtered=filtered.filter(product=>product.category===this.selectedCategory)
  }
  if(this.searchQuery){
    filtered=filtered.filter(product=>product.title.toLowerCase().includes(this.searchQuery.toLowerCase()))
  }
  if(this.searchDescription){
    filtered=filtered.filter(product=>product.description.toLowerCase().includes(this.searchDescription.toLowerCase()))
  }
  if(this.sortBy){
    filtered=filtered.slice().sort((a,b)=>{
      return this.sortBy==='asc'
      ?a.title.localeCompare(b.title)
      :b.title.localeCompare(a.title)
    })
  }

  if(this.orderBy){
  filtered=filtered.slice().sort((a,b)=>{
  return this.sortBy==='asc'
  ?a.price-b.price
  :b.price-a.price;
  })
  }
  return filtered;
}

},
methods:{
addProduct(newProduct){
this.products.unshift({id:Date.now(), ...newProduct});
if(!this.categories.includes(newProduct.category)){
this.categories.push(newProduct.category);
}
this.showAddModal=false;
this.currentPage=1;
},
showProduct(product){
this.selectedProduct=product;
this.showDetailsModal=true;
},
editProduct(product){
this.selectedProduct={ ...product};
this.showEditModal=true;
},
updateProduct(updatedProduct){
const index=this.products.findIndex(p=>p.id === updatedProduct.id);
if(index !== -1){
this.products.splice(index,1,updatedProduct);
}
this.showEditModal=false;
},
deleteProduct(id){
if(confirm("do you want to delete")){
this.products=this.products.filter(product=>product.id!==id)
}
},
changePage(page){
if(page>=1 && page<=this.totalPages){
this.currentPage=page;
}
}
}}

product listing

add new data

Sr no	Title	Price	Image	Category	Description	Actions
{{ product.id }}	{{ product.title }}	{{ product.price }}		{{ product.category }}	{{ product.description }}

total products {{ products.length }}

total price {{ totalPrice.toFixed(3) }}

total price per page {{ totalPerPage.toFixed(3) }}

add.vue

export default{
props: {
showModal: Boolean,
},
data(){
return{
product:{
title:'',
price:'',
image:'',
category:'',
},
};
},
methods:{
handleFileUpload(event){
const file = event.target.files[0];
if(file){
const reader = new FileReader();
reader.onload = ()=>{
this.product.image = reader.result;
};
reader.readAsDataURL(file);
}
},
submitProduct(){
this.$emit('add-product',{ ...this.product});
this.product={
title:'',
price:'',
image:'',
category:'',
};
this.$emit('close');
}
}
};

add new product
      X

    

    

      

        

    title
    
  
  

    price
    
  
  
  
    

      

        

        category
        
        
        


    description
    
    
   
   

    

    image
    
    
   
    

      
      

    add