App.vue

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

      },
      listProducts: async function(){
        try {
          let response = await sdk.database.listDocuments('628a9019078ea3c2b384');
          console.log(response, 'response')
          this.products = response.documents
        } catch (error) {
          console.log(error)
          
        }
      },
      handleDelete: async function(documentid){
        try {
          await sdk.database.deleteDocument('628a9019078ea3c2b384', documentid);
          alert("item have been deleted successfully")
          this.listProducts()
        } catch (error) {
          console.log(error)
        }
      }
    }
  }
</script>


<style>
  .product-container{
    margin-left: 37%;
    width: 30%;
  }
</style>