feat: enhance FrontendAPI with save interceptor methods and update views to utilize them

Author: yaroslav8765

adminforth/spa/src/adminforth.ts

@@ -228,7 +228,14 @@ export function useAdminforth() {
   const api = frontendAPI as FrontendAPI;
   return {
     registerSaveInterceptor: (handler: (ctx: { action: 'create'|'edit'; values: any; resource: any; }) => Promise<{ ok: boolean; error?: string | null; extra?: object; }>) => api.registerSaveInterceptor(handler),
-    api,
+    alert: (params: AlertParams) => api.alert(params),
+    confirm: (params: ConfirmParams) => api.confirm(params),
+    list: api.list,
+    show: api.show,
+    menu: api.menu,
+    closeUserMenuDropdown: () => api.closeUserMenuDropdown(),
+    runSaveInterceptors: (params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }) => api.runSaveInterceptors(params),
+    clearSaveInterceptors: (resourceId?: string) => api.clearSaveInterceptors(resourceId),
   };
 }
 

adminforth/spa/src/views/CreateView.vue

@@ -103,7 +103,7 @@ const router = useRouter();
 const record = ref({});
 
 const coreStore = useCoreStore();
-const { api } = useAdminforth();
+const { clearSaveInterceptors, runSaveInterceptors } = useAdminforth();
 
 const { t } = useI18n();
 
@@ -119,7 +119,7 @@ async function onUpdateRecord(newRecord: any) {
 }
 
 onBeforeMount(() => {
-  api.clearSaveInterceptors(route.params.resourceId as string);
+  clearSaveInterceptors(route.params.resourceId as string);
 });
 
 onMounted(async () => {
@@ -174,7 +174,7 @@ async function saveRecord() {
   const requiredColumns = coreStore.resource?.columns.filter(c => c.required?.create === true) || [];
   const requiredColumnsToSkip = requiredColumns.filter(c => checkShowIf(c, record.value, coreStore.resource?.columns || []) === false);  
   saving.value = true;
-  const interceptorsResult = await api.runSaveInterceptors({
+  const interceptorsResult = await runSaveInterceptors({
     action: 'create',
     values: record.value,
     resource: coreStore.resource,

adminforth/spa/src/views/EditView.vue

@@ -87,7 +87,7 @@ import type { AdminForthResourceColumn } from '@/types/Back';
 
 const { t } = useI18n();
 const coreStore = useCoreStore();
-const { api } = useAdminforth();
+const { clearSaveInterceptors, runSaveInterceptors } = useAdminforth();
 
 const isValid = ref(false);
 const validating = ref(false);
@@ -129,7 +129,7 @@ const editableRecord = computed(() => {
 })
 
 onBeforeMount(() => {
-  api.clearSaveInterceptors(route.params.resourceId as string);
+  clearSaveInterceptors(route.params.resourceId as string);
 });
 
 onMounted(async () => {
@@ -164,7 +164,7 @@ async function saveRecord() {
   }
 
   saving.value = true;
-  const interceptorsResult = await api.runSaveInterceptors({
+  const interceptorsResult = await runSaveInterceptors({
     action: 'edit',
     values: record.value,
     resource: coreStore.resource,

adminforth/types/FrontendAPI.ts

@@ -136,6 +136,18 @@ export interface FrontendAPIInterface {
      * Close the user menu dropdown
      */
     closeUserMenuDropdown(): void;
+
+    /**
+     * Run save interceptors for a specific resource or all resources if no resourceId is provided
+     */
+    runSaveInterceptors(params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }): Promise<{ ok: boolean; error?: string | null; extra?: object; }>;
+
+    /**
+     * Clear save interceptors for a specific resource or all resources if no resourceId is provided
+     * 
+     * @param resourceId - The resource ID to clear interceptors for
+     */
+    clearSaveInterceptors(resourceId?: string): void;
 }
 
 export type ConfirmParams = {

dev-demo/custom/AfComponents.vue

@@ -317,6 +317,9 @@ import { IconSearchOutline } from '@iconify-prerendered/vue-flowbite'
 import { DatePicker } from '@/afcl';
 import CustomRangePicker from "@/components/CustomRangePicker.vue";
 import Toast from '@/components/Toast.vue';
+import { useAdminforth } from '@/adminforth';
+
+const { alert } = useAdminforth();
 
 const files: Ref<File[]> = ref([])
 
@@ -338,7 +341,7 @@ watch(valueStart, (newVal) => {
 });
 
 function doSmth(){
-
+  alert({message: 'Hello world', variant: 'success'})
 }
 
 </script>