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

select category
{{ category }}


Sort By:
title
price


Order by:
ascending
descending

<div>
  <input type="text" v-model="searchQuery" placeholder="enter title to search" > 
</div>
<div>
  <input style="margin-left: 848px;" type="text" v-model="searchDescription" placeholder="enter description to search">
</div>

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) }}

<nav aria-label="Page navigation example">
<ul style="margin-left: 472px;" class="pagination">
  <li>
  <button @click="changePage(currentPage-1)"><</button>
  </li>
  <li
  v-for="page in totalPages"
  :class="{active:currentPage===page}"
  :key="page"
  >
  <button @click="changePage(page)">{{ page }}</button>
  </li>
  <li>
    <button @click="changePage(currentPage+1)">></button>
  </li>
</ul>
</nav>

:showModal="showAddModal"
@add-product="addProduct"
@close="showAddModal=false"
/>
:showDetailsModal="showDetailsModal"
:product="selectedProduct"
@close="showDetailsModal=false"
/>
:showEditModal="showEditModal"
:product="selectedProduct"
:categories="categories"
@update-product="updateProduct"
@close="showEditModal=false"
/>

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');
}
}
};

      <h5>add new product</h5>
      X

    <form @submit.prevent="submitProduct">
    <div class="mb-3">
      <div class="row">
        <div class="col">
    <label class="form-label">title</label>
    <input type="text" v-model="product.title" placeholder="enter title" class="form-control" required />
  </div>
  <div class="col">
    <label class="form-label">price</label>
    <input type="number" v-model="product.price" placeholder="enter price" class="form-control" required />
  </div>
  </div>
  </div>
    <div class="mb-3">
      <div class="row">
        <div class="col">
        <label class="form-label">category</label>
        <input type="text" v-model="product.category" placeholder="enter category" class="form-control" required />
        </div>
        <div class="col">

    <label class="form-label">description</label>
    <input type="text" v-model="product.description" placeholder="enter description" class="form-control" required />
    </div>
   </div>
   <br>
    <div class="mb-3">
    <label class="form-label">image</label>
    <input type="file" @change="handleFileUpload" required />
    <img v-if="product.image" :src="product.image" alt="product image" style="height: 50px; width: 50px;" />
   </div>
    <div>
      </div>
      <div>
    <button style="margin-left: 343px;"  type="submit">add</button>  
  </div>
    </div>
</form>
<div v-if="showModal"></div>
</div>
</div>
</div>

.form-control{
width: 307px;
}

edit

export default{
props:{
showEditModal:Boolean,
product: Object,
Categories:Array

},

data(){
return{
productData:{...this.product}
};
},
watch:{
product(newProduct){
this.productData={ ...newProduct};
}
},
methods:{

    handleFileUpload(event) {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = () => {
      this.productData.image = reader.result;
    };
    reader.readAsDataURL(file);
  }
},
    updateProduct() {
  this.$emit('update-product', this.productData);
},

}};

edit product

X





title





price







category



description



image




update

    </div>
</form>
<div v-if="showEditModal"></div>
</div>
</div>
</div>
</template>

show

export default{
props: {
showDetailsModal: Boolean,
product: Object,
},
};

product Details

X

title: {{ product.title }}

price: {{ product.price }}

category: {{ product.category }}

image:

        </div>
       </div>
     </div>    
  </div>