Skip to content

Instantly share code, notes, and snippets.

@Iheanacho-ai
Created May 24, 2022 11:27
Show Gist options
  • Save Iheanacho-ai/d20d8322de5e1d51d0ad89febeac996e to your computer and use it in GitHub Desktop.
Save Iheanacho-ai/d20d8322de5e1d51d0ad89febeac996e to your computer and use it in GitHub Desktop.
<template>
<div class="product-catalog">
<div class="product-container mt-5 md:mt-0 md:col-span-2">
<div class="shadow sm:rounded-md sm:overflow-hidden">
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
<div>
<label for="price" class="block text-sm font-medium text-gray-700">Product Name</label>
<div class="mt-1 relative rounded-md shadow-sm">
<input type="text" name="price" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-7 pr-12 sm:text-sm border-gray-300 rounded-md" placeholder="product name" />
</div>
</div>
<div>
<label for="price" class="block text-sm font-medium text-gray-700">Price</label>
<div class="mt-1 relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="text-gray-500 sm:text-sm"> $ </span>
</div>
<input type="text" name="price" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-7 pr-12 sm:text-sm border-gray-300 rounded-md" placeholder="0.00" />
</div>
</div>
<button @click="openUploadModal" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Upload files
</button>
<div className="px-4 py-3 bg-gray-50 text-right sm:px-6">
<button
type="button"
className="cursor inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Save
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {sdk} from '../init';
export default {
name: 'App',
data(){
return{
productName: '',
productPrice: '',
productImage: '',
products: []
}
},
mounted: function(){
this.listProducts()
},
methods: {
openUploadModal: function() {
window.cloudinary.openUploadWidget(
{ cloud_name: 'amarachi-2812',
upload_preset: 'xoskczw2'
},
(error, result) => {
if (!error && result && result.event === "success") {
this.productImage = result.info.url
console.log('Done uploading..: ', result.info);
}
}).open();
},
handleProductSubmit: async function(){
try {
await sdk.database.createDocument('628a9019078ea3c2b384', 'unique()', {
"productName" : this.productName,
"productPrice": this.productPrice,
"productImage": this.productImage
});
alert('your job item has been successfully saved')
this.productName= '',
this.productPrice= '',
this.productImage= '',
this.listProducts()
} catch (error) {
console.log(error)
}
}
}
}
</script>
<style>
.product-container{
margin-left: 37%;
width: 30%;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment