Implement product delete

Author: thecodeholic

backend/src/store/actions.js

@@ -57,3 +57,7 @@ export function  createProduct({commit}, product) {
   }
   return axiosClient.post('/products', product)
 }
+
+export function deleteProduct({commit}, id) {
+  axiosClient.delete(`/products/${id}`)
+}

backend/src/views/Products.vue

@@ -49,11 +49,14 @@
                          @click="sortProducts('updated_at')">
           Last Updated At
         </TableHeaderCell>
+        <TableHeaderCell field="actions">
+          Actions
+        </TableHeaderCell>
       </tr>
       </thead>
       <tbody v-if="products.loading">
       <tr>
-        <td colspan="5">
+        <td colspan="6">
           <Spinner/>
         </td>
       </tr>
@@ -64,16 +67,75 @@
         <td class="border-b p-2 ">
           <img class="w-16 h-16 object-cover" :src="product.image_url" :alt="product.title">
         </td>
-        <td class="border-b p-2 max-w-[200px] whitespace-nowrap overflow-hidden text-ellipsis">{{
-            product.title
-          }}
+        <td class="border-b p-2 max-w-[200px] whitespace-nowrap overflow-hidden text-ellipsis">
+          {{ product.title }}
         </td>
         <td class="border-b p-2">
           {{ product.price }}
         </td>
         <td class="border-b p-2 ">
           {{ product.updated_at }}
         </td>
+        <td class="border-b p-2 ">
+          <Menu as="div" class="relative inline-block text-left">
+            <div>
+              <MenuButton
+                class="inline-flex items-center justify-center w-full justify-center rounded-full w-10 h-10 bg-black bg-opacity-0 text-sm font-medium text-white hover:bg-opacity-5 focus:bg-opacity-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
+              >
+                <DotsVerticalIcon
+                  class="h-5 w-5 text-indigo-500"
+                  aria-hidden="true"/>
+              </MenuButton>
+            </div>
+
+            <transition
+              enter-active-class="transition duration-100 ease-out"
+              enter-from-class="transform scale-95 opacity-0"
+              enter-to-class="transform scale-100 opacity-100"
+              leave-active-class="transition duration-75 ease-in"
+              leave-from-class="transform scale-100 opacity-100"
+              leave-to-class="transform scale-95 opacity-0"
+            >
+              <MenuItems
+                class="absolute z-10 right-0 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+              >
+                <div class="px-1 py-1">
+                  <MenuItem v-slot="{ active }">
+                    <button
+                      :class="[
+                        active ? 'bg-indigo-600 text-white' : 'text-gray-900',
+                        'group flex w-full items-center rounded-md px-2 py-2 text-sm',
+                      ]"
+                    >
+                      <PencilIcon
+                        :active="active"
+                        class="mr-2 h-5 w-5 text-indigo-400"
+                        aria-hidden="true"
+                      />
+                      Edit
+                    </button>
+                  </MenuItem>
+                  <MenuItem v-slot="{ active }">
+                    <button
+                      :class="[
+                        active ? 'bg-indigo-600 text-white' : 'text-gray-900',
+                        'group flex w-full items-center rounded-md px-2 py-2 text-sm',
+                      ]"
+                      @click="deleteProduct(product)"
+                    >
+                      <TrashIcon
+                        :active="active"
+                        class="mr-2 h-5 w-5 text-indigo-400"
+                        aria-hidden="true"
+                      />
+                      Delete
+                    </button>
+                  </MenuItem>
+                </div>
+              </MenuItems>
+            </transition>
+          </Menu>
+        </td>
       </tr>
       </tbody>
     </table>
@@ -120,6 +182,8 @@ import Spinner from "../components/core/Spinner.vue";
 import {PRODUCTS_PER_PAGE} from "../constants";
 import TableHeaderCell from "../components/core/Table/TableHeaderCell.vue";
 import AddNewProduct from "./AddNewProduct.vue";
+import {Menu, MenuButton, MenuItem, MenuItems} from "@headlessui/vue";
+import {DotsVerticalIcon, PencilIcon, TrashIcon} from '@heroicons/vue/outline'
 
 const perPage = ref(PRODUCTS_PER_PAGE);
 const search = ref('');
@@ -170,6 +234,17 @@ function sortProducts(field) {
 function showAddNewModal() {
   showProductModal.value = true
 }
+
+function deleteProduct(product) {
+  if (!confirm(`Are you sure you want to delete the product?`)) {
+    return
+  }
+  store.dispatch('deleteProduct', product.id)
+    .then(res => {
+      // TODO Show notification
+      store.dispatch('getProducts')
+    })
+}
 </script>
 
 <style scoped>