-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5 from Greeshmabk/deleteEDitBranch
Delete e dit branch
- Loading branch information
Showing
5 changed files
with
317 additions
and
100 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| @import './base.css'; | ||
|
|
||
| #app { | ||
| max-width: 1280px; | ||
|
|
||
| margin: 0 auto; | ||
| padding: 2rem; | ||
| font-weight: normal; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| <script> | ||
| export default{ | ||
| name: 'Add Product', | ||
| components:{}, | ||
| data(){ | ||
| return{ | ||
| show: false, | ||
| formattedDate: '', | ||
| expiryDate:'' | ||
| } | ||
| }, | ||
| methods:{ | ||
| async addData(productName,storageLocation,quantity,unit,date){ | ||
| this.expiryDate = new Date(date).toISOString(); | ||
| try { | ||
| const response = await fetch('https://shoppinglist.cosmos.cboxlab.com/api/v1/inventory', { | ||
| method: 'POST', | ||
| body: JSON.stringify({ | ||
| name: productName, | ||
| quntity:quantity, | ||
| storageLocation:storageLocation, | ||
| unit:unit, | ||
| expiry: this.expiryDate | ||
| }) | ||
| }); | ||
| console.log('Product saved:', response.data); | ||
| } catch (error) { | ||
| console.error('There was an error saving thstorageLocatione product:', error); | ||
| } | ||
| this.show= false; | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| <template> | ||
| <div> | ||
| <div class="button-container py-4"> | ||
| <button class="dark:bg-slate-900 dark:text-white " @click="show=true">Add Product</button> | ||
| </div> | ||
| <div v-if="show" class="modal-overlay" @click.self="close"> | ||
| <div class="modal-content"> | ||
| <form> | ||
| <label class="">Product Name:</label> | ||
| <input type="text" v-model="product"> | ||
| <label class="">Storage Location:</label> | ||
| <input type="text" v-model="storageLocation"> | ||
| <label class="">Quantity:</label> | ||
| <input type="number" v-model="quantity"> | ||
| <label class="">Unit:</label> | ||
| <input type="text" v-model="unit"> | ||
| <label class="">Expiry Date:</label> | ||
| <input type="date" v-model="date"> | ||
| <button @click="addData(product,storageLocation,quantity,unit,date)">Save</button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| <script> | ||
| import AddInventory from './addInventory.vue' | ||
| import '../assets/tailwind.css'; | ||
| import { library } from '@fortawesome/fontawesome-svg-core'; | ||
| import { faTrash , faEdit } from '@fortawesome/free-solid-svg-icons'; | ||
| import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; | ||
| library.add(faTrash , faEdit); | ||
| export default{ | ||
| name: 'productList', | ||
| components:{ | ||
| AddInventory, | ||
| FontAwesomeIcon | ||
| }, | ||
| data(){ | ||
| return{ | ||
| shoppingList: this.fetchData(), | ||
| editShow:false, | ||
| editItem:{} | ||
| }; | ||
| }, | ||
| methods:{ | ||
| fetchData() { | ||
| fetch('https://shoppinglist.cosmos.cboxlab.com/api/v1/inventory', { | ||
| method: "GET", | ||
| }) | ||
| .then((response) => { | ||
| response.json().then((data) => { | ||
| this.shoppingList=data.items; | ||
| }); | ||
| }) | ||
| .catch((err) => { | ||
| console.error(err); | ||
| }); | ||
| }, | ||
| async deleteData(id){ | ||
| try { | ||
| const response = await fetch(`https://shoppinglist.cosmos.cboxlab.com/api/v1/inventory/${id}`, { | ||
| method: 'DELETE' | ||
| }); | ||
| if (!response.ok) { | ||
| throw new Error(`HTTP error! status: ${response.status}`); | ||
| } | ||
| console.log(`Product with ID ${id} deleted.`); | ||
| this.fetchData() | ||
| } catch (error) { | ||
| console.error('There was an error deleting the product:', error); | ||
| } | ||
| }, | ||
| async editData(editItemDetails){ | ||
| try { | ||
| const response = await fetch(`https://shoppinglist.cosmos.cboxlab.com/api/v1/inventory/${editItemDetails.id}`, { | ||
| method: 'POST', | ||
| body: JSON.stringify({ | ||
| name: editItemDetails.name, | ||
| quntity:editItemDetails.quntity, | ||
| storageLocation:editItemDetails.storageLocation, | ||
| unit:editItemDetails.unit, | ||
| expiry:editItemDetails.expiry | ||
| }) | ||
| }); | ||
| if (!response.ok) { | ||
| throw new Error(`HTTP error! status: ${response.status}`); | ||
| } | ||
| console.log(`Product with ID ${id} edited .`); | ||
| this. fetchData() | ||
| } catch (error) { | ||
| console.error('There was an error editing the product:', error); | ||
| } | ||
| this.editItem={}; | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <div class=" pb-8 flex"> | ||
| <h1 class="text-3xl font-bold underline mx-auto headerPart"><b>Product List</b></h1> | ||
| </div> | ||
| <div> | ||
| <AddInventory></AddInventory> | ||
| <div class="row"> | ||
| <table v-if="!editShow"> | ||
| <thead> | ||
| <th> | ||
| <td class="border px-4 py-2 mx-auto">Item Name</td> | ||
| <td class="border px-4 py-2 mx-auto">Expiry date</td> | ||
| <td class="border px-4 py-2 mx-auto">Storage Location</td> | ||
| <td class="border px-4 py-2 mx-auto">Quantity</td> | ||
| </th> | ||
| </thead> | ||
| <tbody> | ||
| <tr v-for="item in shoppingList" :key="index"> | ||
| <td class="border px-4 py-2 mx-auto">{{ item.name }}</td> | ||
| <td class="border px-4 py-2 mx-auto">{{ item.expiry }}</td> | ||
| <td class="border px-4 py-2 mx-auto">{{ item.storageLocation }}</td> | ||
| <td class="border px-4 py-2 mx-auto" >{{ item.quntity+ item.unit}}</td> | ||
| <button @click="editShow=true , editItem=item" class="px-2 py-1 bg-yellow-500 text-white rounded mr-2"> | ||
| <font-awesome-icon :icon="['fas', 'edit']" /> | ||
| </button> | ||
| <button @click="deleteData(item.id)" class="px-2 py-1 bg-red-600 text-white rounded"> | ||
| <font-awesome-icon :icon="['fas', 'trash']" /> | ||
|
|
||
| </button> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| <form v-if="editShow"> | ||
| <label class="">Product Name:</label> | ||
| <input type="text" v-model="editItem.name"> | ||
| <label class="">Storage Location:</label> | ||
| <input type="text" v-model="editItem.storageLocation "> | ||
| <label class="">Quantity:</label> | ||
| <input type="number" v-model="editItem.quntity"> | ||
| <label class="">Unit:</label> | ||
| <input type="text" v-model="editItem.unit"> | ||
| <label class="">Expiry Date:</label> | ||
| {{ editItem.expiry }} | ||
| <input type="date" v-model="editItem.expiry"> | ||
| <button @click="editData(editItem)">Save</button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> |
Oops, something went wrong.