fix user count not updated on front-end when creating new users

resources/js/components/forms/users/CreateEditUser.vue

@@ -72,6 +72,7 @@ import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
 import Textarea from "../basic/Textarea.vue";
 import SETag from "@/components/icons/SETag.vue";
+import UsersService from "@/services/users-service";
 
 const lycheeStore = useLycheeStateStore();
 const { is_se_preview_enabled, is_se_enabled } = storeToRefs(lycheeStore);
@@ -120,6 +121,9 @@ function createUser() {
 			quota_kb.value = "0";
 			toast.add({ severity: "success", summary: "Success", detail: "User created", life: 3000 });
 			emits("refresh");
+
+			// Clear user count as it is cachable.
+			UsersService.clearCount();
 		})
 		.catch((e) => {
 			toast.add({ severity: "error", summary: "Error", detail: e.response.data.message, life: 3000 });

resources/js/services/users-service.ts

@@ -1,9 +1,16 @@
 import axios, { type AxiosResponse } from "axios";
 import Constants from "./constants";
+import { AxiosCacheInstance } from "axios-cache-interceptor";
 
 const UsersService = {
+	clearCount(): void {
+		const axiosWithCache = axios as unknown as AxiosCacheInstance;
+		axiosWithCache.storage.remove("users::count");
+	},
+
 	count(): Promise<AxiosResponse<number>> {
-		return axios.get(`${Constants.getApiUrl()}Users::count`, { data: {} });
+		const requester = axios as unknown as AxiosCacheInstance;
+		return requester.get(`${Constants.getApiUrl()}Users::count`, { data: {}, id: "users::count" });
 	},
 
 	get(): Promise<AxiosResponse<App.Http.Resources.Models.LightUserResource[]>> {

resources/js/views/Users.vue

@@ -73,6 +73,7 @@ import { useToast } from "primevue/usetoast";
 import { storeToRefs } from "pinia";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
+import UsersService from "@/services/users-service";
 
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
@@ -98,6 +99,10 @@ function load() {
 function deleteUser(id: number) {
 	UserManagementService.delete({ id: id }).then(() => {
 		toast.add({ severity: "success", summary: "Success", detail: "User deleted" });
+
+		// Clear user count as it is cachable.
+		UsersService.clearCount();
+
 		load();
 	});
 }