Remove ProductModal and its related variables and methods

Author: Jenis0619

backend/src/views/Products/ProductModal.vue

@@ -7,40 +7,16 @@
       Add new Product
     </router-link>
   </div>
-  <ProductsTable @clickEdit="editProduct"/>
-  <ProductModal v-model="showProductModal" :product="productModel" @close="onModalClose"/>
+  <ProductsTable/>
 </template>
 
 <script setup>
-import {computed, onMounted, ref} from "vue";
+import {computed} from "vue";
 import store from "../../store";
-import ProductModal from "./ProductModal.vue";
 import ProductsTable from "./ProductsTable.vue";
 
-const DEFAULT_PRODUCT = {
-  id: '',
-  title: '',
-  description: '',
-  image: '',
-  price: ''
-}
-
 const products = computed(() => store.state.products);
 
-const productModel = ref({...DEFAULT_PRODUCT})
-const showProductModal = ref(false);
-
-
-function editProduct(p) {
-  store.dispatch('getProduct', p.id)
-    .then(({data}) => {
-      productModel.value = data
-    })
-}
-
-function onModalClose() {
-  productModel.value = {...DEFAULT_PRODUCT}
-}
 </script>
 
 <style scoped>

backend/src/views/Products/Products.vue

@@ -186,7 +186,6 @@ import {PRODUCTS_PER_PAGE} from "../../constants";
 import TableHeaderCell from "../../components/core/Table/TableHeaderCell.vue";
 import {Menu, MenuButton, MenuItem, MenuItems} from "@headlessui/vue";
 import {DotsVerticalIcon, PencilIcon, TrashIcon} from '@heroicons/vue/outline'
-import ProductModal from "./ProductModal.vue";
 
 const perPage = ref(PRODUCTS_PER_PAGE);
 const search = ref('');
@@ -195,9 +194,6 @@ const sortField = ref('updated_at');
 const sortDirection = ref('desc')
 
 const product = ref({})
-const showProductModal = ref(false);
-
-const emit = defineEmits(['clickEdit'])
 
 onMounted(() => {
   getProducts();
@@ -237,10 +233,6 @@ function sortProducts(field) {
   getProducts()
 }
 
-function showAddNewModal() {
-  showProductModal.value = true
-}
-
 function deleteProduct(product) {
   if (!confirm(`Are you sure you want to delete the product?`)) {
     return