frontend: admin - setup page

setup details api called from service using store, and displayed data

backend/configure_api/views/v1.py

@@ -8,7 +8,7 @@
 class AdminSetupView(APIView):
     def get(self, request, *args, **kwargs):
         return Response({
-            'categoris': Category.objects.filter(
+            'categories': Category.objects.filter(
                 is_deleted=False
             ).count(),
             'active_categories': Category.objects.filter(

frontend/src/components/admin/page/SetupPage.vue

@@ -18,7 +18,7 @@
                                 <font-awesome-icon :icon="['fas', 'ellipsis-vertical']" class="pe-3" />
                             </div>
                             <div class="d-flex justify-content-between pb-3">
-                                <h3 class="card-title px-3">2150</h3>
+                                <h3 class="card-title px-3">{{ setupData.categories }}</h3>
                                 <a href="#" class="btn btn-primary me-3">Any state</a>
                             </div>
                         </div>
@@ -34,7 +34,7 @@
                                 <font-awesome-icon :icon="['fas', 'ellipsis-vertical']" class="pe-3" />
                             </div>
                             <div class="d-flex justify-content-between pb-3">
-                                <h3 class="card-title px-3">177</h3>
+                                <h3 class="card-title px-3">{{ setupData.active_categories }}</h3>
                                 <a href="#" class="btn btn-primary me-3">Any state</a>
                             </div>
                         </div>
@@ -50,7 +50,7 @@
                                 <font-awesome-icon :icon="['fas', 'ellipsis-vertical']" class="pe-3" />
                             </div>
                             <div class="d-flex justify-content-between pb-3">
-                                <h3 class="card-title px-3">300547</h3>
+                                <h3 class="card-title px-3">{{ setupData.products }}</h3>
                                 <a href="#" class="btn btn-primary me-3">Any state</a>
                             </div>
                         </div>
@@ -64,6 +64,7 @@
 
 <script>
 import { API_BASE_URL } from '@/config';
+import { mapState, mapActions } from 'vuex';
 import AdminAddCategoryComponent from '@/components/admin/category/AdminAddCategoryComponent.vue';
 import AdminCategoryListComponent from '@/components/admin/category/AdminCategoryListComponent.vue';
 import AdminAddProductComponent from '@/components/admin/product/AdminAddProductComponent.vue';
@@ -81,20 +82,25 @@ export default {
             API_BASE_URL: API_BASE_URL,
         }
     },
-    created() {
-
+    computed: {
+        ...mapState('setup', {
+            setupData: 'setup'
+        }),
     },
     methods: {
+        ...mapActions('setup', ['fetchSetup']),
+
         showAddCategoryModal() {
             this.$refs.addComponentModalForCategory.showAddCategoryModal();
         },
 
         showAddProductModal() {
-            // this.$refs.addComponentModal.showAddCategoryModal();
-            console.log('open product add modal');
             this.$refs.addComponentModalForProduct.showAddProductModal();
         },
-    }
+    },
+    created() {
+        this.fetchSetup();
+    },
 }
 </script>
 

frontend/src/services/adminCategoryAPI.js

@@ -72,4 +72,3 @@ export const updateCategoryForAdmin = (category_id, categoryData) => {
 };
 
 export default { };
-

frontend/src/services/adminSetupAPI.js

@@ -0,0 +1,50 @@
+// src/services/adminSetupAPI.js
+
+import axios from "axios";
+import { API_BASE_URL } from "@/config";
+import { refreshToken } from "@/services/refreshToken";
+
+const apiClient = axios.create({
+  baseURL: API_BASE_URL,
+  withCredentials: false,
+  headers: {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+    Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+  },
+});
+
+// Request interceptor to add the token
+apiClient.interceptors.request.use((config) => {
+  const token = localStorage.getItem("accessToken");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+}, (error) => {
+  return Promise.reject(error);
+});
+
+// Response interceptor to handle errors
+apiClient.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    if (error.response.status === 401) {
+      // Handle unauthorized error (e.g., refresh token or redirect to login)
+      try {
+        await refreshToken();
+        return apiClient(error.config); // Retry the original request
+      } catch (refreshError) {
+        localStorage.removeItem("accessToken");
+        window.location.href = "/login"; // Redirect to login page
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
+export const getSetupForAdmin = () => {
+  return apiClient.get(`/api/v1/configures/setup`);
+};
+
+export default {};

frontend/src/store/index.js

@@ -1,9 +1,11 @@
 import Vuex from "vuex";
 import category from "./modules/category";
+import setup from "./modules/setup";
 
 export default new Vuex.Store({
   modules: {
     category,
+    setup,
   },
 });
 

frontend/src/store/modules/setup.js

@@ -0,0 +1,34 @@
+// /src/store/modules/setup.js
+
+import {
+  getSetupForAdmin,
+} from "@/services/adminSetupAPI";
+
+const state = {
+  setup: {},
+};
+
+const mutations = {
+  setSetup(state, setup) {
+    state.setup = setup;
+  },
+};
+
+const actions = {
+  async fetchSetup({ commit }) {
+    const response = await getSetupForAdmin();
+    commit("setSetup", response.data);
+  },
+};
+
+const getters = {
+  setup: (state) => state.setup,
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters,
+};