Move products components into a separate folder

Author: thecodeholic

backend/src/axios.js

@@ -3,7 +3,9 @@
  */
 import axios from "axios";
 import store from "./store";
-import router from "./router";
+import {useRouter} from "vue-router";
+
+const router = useRouter()
 
 const axiosClient = axios.create({
   baseURL: `${import.meta.env.VITE_API_BASE_URL}/api`
@@ -17,6 +19,7 @@ axiosClient.interceptors.request.use(config => {
 axiosClient.interceptors.response.use(response => {
   return response;
 }, error => {
+  debugger;
   if (error.response.status === 401) {
     sessionStorage.removeItem('TOKEN')
     router.push({name: 'login'})

backend/src/router/index.js

@@ -2,7 +2,7 @@ import {createRouter, createWebHistory} from "vue-router";
 import AppLayout from '../components/AppLayout.vue'
 import Login from "../views/Login.vue";
 import Dashboard from "../views/Dashboard.vue";
-import Products from "../views/Products.vue";
+import Products from "../views/Products/Products.vue";
 import RequestPassword from "../views/RequestPassword.vue";
 import ResetPassword from "../views/ResetPassword.vue";
 import NotFound from "../views/NotFound.vue";

backend/src/views/ProductModal.vue renamed to backend/src/views/Products/ProductModal.vue

@@ -15,7 +15,7 @@
                            leave-from="opacity-100 translate-y-0 sm:scale-100"
                            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
             <DialogPanel
-              class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full">
+              class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-[700px] sm:w-full">
               <Spinner v-if="loading"
                        class="absolute left-0 top-0 bg-white right-0 bottom-0 flex items-center justify-center"/>
               <header class="py-3 px-4 flex justify-between items-center">
@@ -43,7 +43,7 @@
                 </button>
               </header>
               <form @submit.prevent="onSubmit">
-                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                <div class="bg-white px-4 pt-5 pb-4">
                   <CustomInput class="mb-2" v-model="product.title" label="Product Title"/>
                   <CustomInput type="file" class="mb-2" label="Product Image" @change="file => product.image = file"/>
                   <CustomInput type="textarea" class="mb-2" v-model="product.description" label="Description"/>
@@ -72,9 +72,9 @@
 import {computed, onUpdated, ref} from 'vue'
 import {Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot} from '@headlessui/vue'
 import {ExclamationIcon} from '@heroicons/vue/outline'
-import CustomInput from "../components/core/CustomInput.vue";
-import store from "../store/index.js";
-import Spinner from "../components/core/Spinner.vue";
+import CustomInput from "../../components/core/CustomInput.vue";
+import store from "../../store/index.js";
+import Spinner from "../../components/core/Spinner.vue";
 
 const product = ref({
   id: props.product.id,

backend/src/views/Products/Products.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="flex items-center justify-between mb-3">
+    <h1 class="text-3xl font-semibold">Products</h1>
+    <button type="button"
+            @click="showAddNewModal()"
+            class="py-2 px-4 border border-transparent 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"
+    >
+      Add new Product
+    </button>
+  </div>
+  <ProductsTable />
+  <ProductModal v-model="showProductModal" :product="product"/>
+</template>
+
+<script setup>
+import {computed, onMounted, ref} from "vue";
+import store from "../../store";
+import ProductModal from "./ProductModal.vue";
+import ProductsTable from "./ProductsTable.vue";
+
+const products = computed(() => store.state.products);
+
+const product = ref({})
+const showProductModal = ref(false);
+
+function showAddNewModal() {
+  showProductModal.value = true
+}
+</script>
+
+<style scoped>
+
+</style>

backend/src/views/Products.vue renamed to backend/src/views/Products/ProductsTable.vue

@@ -1,13 +1,4 @@
 <template>
-  <div class="flex items-center justify-between mb-3">
-    <h1 class="text-3xl font-semibold">Products</h1>
-    <button type="button"
-            @click="showAddNewModal()"
-            class="py-2 px-4 border border-transparent 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"
-    >
-      Add new Product
-    </button>
-  </div>
   <div class="bg-white p-4 rounded-lg shadow">
     <div class="flex justify-between border-b-2 pb-3">
       <div class="flex items-center">
@@ -20,6 +11,7 @@
           <option value="50">50</option>
           <option value="100">100</option>
         </select>
+        <span class="ml-3">Found {{products.total}} products</span>
       </div>
       <div>
         <input v-model="search" @change="getProducts(null)"
@@ -54,10 +46,13 @@
         </TableHeaderCell>
       </tr>
       </thead>
-      <tbody v-if="products.loading">
+      <tbody v-if="products.loading || !products.data.length">
       <tr>
         <td colspan="6">
-          <Spinner/>
+          <Spinner v-if="products.loading"/>
+          <p v-else class="text-center py-8 text-gray-700">
+            There are no products
+          </p>
         </td>
       </tr>
       </tbody>
@@ -142,9 +137,9 @@
     </table>
 
     <div v-if="!products.loading" class="flex justify-between items-center mt-5">
-        <span>
-          Showing from {{ products.from }} to {{ products.to }}
-        </span>
+      <div v-if="products.data.length">
+        Showing from {{ products.from }} to {{ products.to }}
+      </div>
       <nav
         v-if="products.total > products.limit"
         class="relative z-0 inline-flex justify-center rounded-md shadow-sm -space-x-px"
@@ -173,15 +168,14 @@
       </nav>
     </div>
   </div>
-  <ProductModal v-model="showProductModal" :product="product"/>
 </template>
 
 <script setup>
 import {computed, onMounted, ref} from "vue";
-import store from "../store";
-import Spinner from "../components/core/Spinner.vue";
-import {PRODUCTS_PER_PAGE} from "../constants";
-import TableHeaderCell from "../components/core/Table/TableHeaderCell.vue";
+import store from "../../store";
+import Spinner from "../../components/core/Spinner.vue";
+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";