adminforth 2.18.2 → 2.19.0-next.2

package/dist/spa/src/views/EditView.vue

@@ -11,7 +11,7 @@
 
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
-      <button @click="$router.back()"
+      <button @click="() => {cancelButtonClicked = true; $router.back()}"
         class="flex items-center py-1 px-3 me-2 text-sm font-medium text-lightEditViewButtonText  rounded-default focus:outline-none bg-lightEditViewButtonBackground rounded border border-lightEditViewButtonBorder hover:bg-lightEditViewButtonBackgroundHover hover:text-lightEditViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightEditViewButtonFocusRing dark:focus:ring-darkEditViewButtonFocusRing dark:bg-darkEditViewButtonBackground dark:text-darkEditViewButtonText dark:border-darkEditViewButtonBorder dark:hover:text-darkEditViewButtonTextHover dark:hover:bg-darkEditViewButtonBackgroundHover"
       >
         {{ $t('Cancel') }}
@@ -76,8 +76,8 @@ import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
 import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
-import { computed, onMounted, onBeforeMount, ref, type Ref, nextTick, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { computed, onMounted, onBeforeMount, ref, type Ref, nextTick, watch, onBeforeUnmount } from 'vue';
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import { useAdminforth } from '@/adminforth';
@@ -87,7 +87,7 @@ import type { AdminForthResourceColumn } from '@/types/Back';
 
 const { t } = useI18n();
 const coreStore = useCoreStore();
-const { clearSaveInterceptors, runSaveInterceptors, alert } = useAdminforth();
+const { clearSaveInterceptors, runSaveInterceptors, alert, confirm } = useAdminforth();
 
 const isValid = ref(false);
 const validating = ref(false);
@@ -101,6 +101,36 @@ const saving = ref(false);
 
 const record: Ref<Record<string, any>> = ref({});
 
+const initialRecord = computed(() => coreStore.record);
+const wasSaveSuccessful = ref(false);
+const cancelButtonClicked = ref(false);
+
+function onBeforeUnload(event: BeforeUnloadEvent) {
+  if (!checkIfWeCanLeavePage()) {
+    event.preventDefault();
+    event.returnValue = '';
+  }
+}
+
+function checkIfWeCanLeavePage() {
+  return wasSaveSuccessful.value || cancelButtonClicked.value || JSON.stringify(record.value) === JSON.stringify(initialRecord.value);
+}
+
+window.addEventListener('beforeunload', onBeforeUnload);
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', onBeforeUnload);
+});
+
+onBeforeRouteLeave(async (to, from, next) => {
+  if (!checkIfWeCanLeavePage()) {
+      const answer = await confirm({message: t('There are unsaved changes. Are you sure you want to leave this page?'), yes: 'Yes', no: 'No'});
+      if (!answer) return next(false);
+  }
+  next();
+});
+
+
 watch(record, (newVal) => {
   console.log('Record updated:', newVal);
 }, { deep: true });
@@ -199,22 +229,27 @@ async function saveRecord() {
       updates[key] = record.value[key];
     }
   }
-
-  const resp = await callAdminForthApi({
-    method: 'POST',
-    path: `/update_record`,
-    body: {
-      resourceId: route.params.resourceId,
-      recordId: route.params.primaryKey,
-      record: updates,
-      meta: {
-        ...(interceptorConfirmationResult ? { confirmationResult: interceptorConfirmationResult } : {}),
+  let resp = null;
+  try {
+    resp = await callAdminForthApi({
+      method: 'POST',
+      path: `/update_record`,
+      body: {
+        resourceId: route.params.resourceId,
+        recordId: route.params.primaryKey,
+        record: updates,
+        meta: {
+          ...(interceptorConfirmationResult ? { confirmationResult: interceptorConfirmationResult } : {}),
+        },
       },
-    },
-  });
+    });
+  } finally {
+    saving.value = false;
+  }
   if (resp.error && resp.error !== 'Operation aborted by hook') {
     showErrorTost(resp.error);
   } else {
+    wasSaveSuccessful.value = true;
     alert({
       message: t('Record updated successfully'),
       variant: 'success',

package/dist/spa/src/views/ListView.vue

@@ -48,7 +48,7 @@
         <button
           v-if="!action.showInThreeDotsDropdown"
           :key="action.id"
-          @click="startBulkAction(action.id!)"
+          @click="startBulkActionInner(action.id!)"
           class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-lightListViewButtonText focus:outline-none bg-lightListViewButtonBackground rounded-default border border-lightListViewButtonBorder hover:bg-lightListViewButtonBackgroundHover hover:text-lightListViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightListViewButtonFocusRing dark:focus:ring-darkListViewButtonFocusRing dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder dark:hover:text-darkListViewButtonTextHover dark:hover:bg-darkListViewButtonBackgroundHover"
           :class="action.buttonCustomCssClass || ''"
         >
@@ -104,8 +104,8 @@
         :threeDotsDropdownItems="(coreStore.resourceOptions?.pageInjections?.list?.threeDotsDropdownItems as [])"
         :bulkActions="coreStore.resource?.options?.bulkActions"
         :checkboxes="checkboxes"
-        @startBulkAction="startBulkAction"
-        :updateList="getList"
+        @startBulkAction="startBulkActionInner"
+        :updateList="getListInner"
         :clearCheckboxes="clearCheckboxes"
         ></ThreeDotsMenu>
     </BreadcrumbsWithButtons>
@@ -126,7 +126,7 @@
       @update:page="page = $event"
       @update:sort="sort = $event"
       @update:checkboxes="checkboxes = $event"
-      @update:records="getList"
+      @update:records="getListInner"
       :sort="sort"
       :pageSize="pageSize"
       :totalRows="totalRows"
@@ -164,7 +164,7 @@
       @update:page="page = $event"
       @update:sort="sort = $event"
       @update:checkboxes="checkboxes = $event"
-      @update:records="getList"
+      @update:records="getListInner"
       :sort="sort"
       :pageSize="pageSize"
       :totalRows="totalRows"
@@ -209,10 +209,9 @@ import ResourceListTable from '@/components/ResourceListTable.vue';
 import { useCoreStore } from '@/stores/core';
 import { useFiltersStore } from '@/stores/filters';
 import { callAdminForthApi, currentQuery, getIcon, setQuery } from '@/utils';
-import { computed, onMounted, onUnmounted, ref, watch, nextTick, type Ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch, type Ref } from 'vue';
 import { useRoute } from 'vue-router';
-import { showErrorTost } from '@/composables/useFrontendApi'
-import { getCustomComponent, initThreeDotsDropdown } from '@/utils';
+import { getCustomComponent, initThreeDotsDropdown, getList, startBulkAction } from '@/utils';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import { Tooltip } from '@/afcl'
 import type { AdminForthComponentDeclarationFull } from '@/types/Common';
@@ -228,7 +227,7 @@ import Filters from '@/components/Filters.vue';
 import { useAdminforth } from '@/adminforth';
 
 const filtersShow = ref(false);
-const { confirm, alert, list } = useAdminforth();
+const { list } = useAdminforth();
 const coreStore = useCoreStore();
 const filtersStore = useFiltersStore();
 
@@ -257,45 +256,6 @@ const listBufferSize = computed(() => coreStore.resource?.options?.listBufferSiz
 
 const isPageLoaded = ref(false);
 
-async function getList() {
-  rows.value = null;
-  if (!isPageLoaded.value) {
-    return; 
-  }
-  const data = await callAdminForthApi({
-    path: '/get_resource_data',
-    method: 'POST',
-    body: {
-      source: 'list',
-      resourceId: route.params.resourceId,
-      limit: pageSize.value,
-      offset: ((page.value || 1) - 1) * pageSize.value,
-      filters: filtersStore.filters,
-      sort: sort.value,
-    }
-  });
-  if (data.error) {
-    showErrorTost(data.error);
-    rows.value = [];
-    totalRows.value = 0;
-    return {error: data.error};
-  }
-  rows.value = data.data?.map((row: any) => {
-    if (coreStore.resource?.columns?.find(c => c.primaryKey)?.foreignResource) {
-      row._primaryKeyValue = row[coreStore.resource.columns.find(c => c.primaryKey)!.name].pk;
-    } else if (coreStore.resource) {
-      row._primaryKeyValue = row[coreStore.resource.columns.find(c => c.primaryKey)!.name];
-    }
-    return row;
-  });
-  totalRows.value = data.total;
-  
-  // if checkboxes have items which are not in current data, remove them
-  checkboxes.value = checkboxes.value.filter(pk => rows.value!.some(r => r._primaryKeyValue === pk));
-  await nextTick();
-  return {}
-}
-
 function clearCheckboxes() {
   checkboxes.value = [];
 }
@@ -351,48 +311,21 @@ async function refreshExistingList(pk?: any) {
   return {}
 }
 
+async function startBulkActionInner(actionId: string) {
+  await startBulkAction(actionId, coreStore.resource!, checkboxes, bulkActionLoadingStates, getListInner);
+}
 
-async function startBulkAction(actionId: string) {
-  const action = coreStore.resource?.options?.bulkActions?.find(a => a.id === actionId);
-  if (action?.confirm) {
-    const confirmed = await confirm({
-      message: action.confirm,
-    });
-    if (!confirmed) {
-      return;
-    }
-  }
-  bulkActionLoadingStates.value[actionId] = true;
-
-  const data = await callAdminForthApi({
-    path: '/start_bulk_action',
-    method: 'POST',
-    body: {
-      resourceId: route.params.resourceId,
-      actionId: actionId,
-      recordIds: checkboxes.value
-
-    }
-  });
-  bulkActionLoadingStates.value[actionId] = false;
-  if (data?.ok) {
-    checkboxes.value = [];
-    await getList();
-
-    if (data.successMessage) {
-      alert({
-        message: data.successMessage,
-        variant: 'success'
-      });
-    }
-
-  }
-  if (data?.error) {
-    showErrorTost(data.error);
+async function getListInner() {
+  rows.value = null; // to show loading state
+  const result = await getList(coreStore.resource!, isPageLoaded.value, page.value, pageSize.value, sort.value, checkboxes, filtersStore.filters);
+  if (!result) {
+    return { error: 'No result returned from getList' };
   }
+  rows.value = result.rows;
+  totalRows.value = result.totalRows ?? 0;
+  return result.error ? { error: result.error } : {};
 }
 
-
 class SortQuerySerializer {
     static serialize(sort: {field: string, direction: 'asc' | 'desc'}[]) {
         return sort.map(s => `${s.field}__${s.direction}`).join(',');
@@ -471,12 +404,11 @@ async function init() {
 
 watch([page, sort, () => filtersStore.filters], async () => {
   // console.log('🔄️ page/sort/filter change fired, page:', page.value);
-  await getList();
+  await getListInner();
 }, { deep: true });
 
 list.refresh = async () => {
-  const result = await getList();
-
+  const result = await getListInner();
   if (!result) {
     return {};
   }

package/dist/types/Back.d.ts

@@ -465,8 +465,12 @@ export type BeforeDataSourceRequestFunction = (params: {
     adminforth: IAdminForth;
 }) => Promise<{
     ok: boolean;
-    error?: string;
+    error?: string | null;
+    /**
+     * @deprecated Since 1.2.9. Will be removed in 2.0.0. Use redirectToRecordId instead.
+     */
     newRecordId?: string;
+    redirectToRecordId?: string;
 }>;
 /**
  * Modify response to change how data is returned after fetching from database.
@@ -512,8 +516,14 @@ export type CreateResourceRecordResult = {
     /**
      * Optional id of an existing record to redirect to
      * (used when a beforeSave hook aborts creation and supplies newRecordId, allows to implement programmatic creation via API).
+     * @deprecated Since 1.2.9. Will be removed in 2.0.0. Use redirectToRecordId instead.
      */
     newRecordId?: any;
+    /**
+     * Optional id of an existing record to redirect to
+     * (used when a beforeSave hook aborts creation and supplies redirectToRecordId, allows to implement programmatic creation via API).
+     */
+    redirectToRecordId?: any;
 };
 /**
  * Parameters for {@link IAdminForth.createResourceRecord}.
@@ -670,51 +680,149 @@ export type DeleteResourceRecordResult = {
  * Return ok: false and error: string to stop execution and show error message to user. Return ok: true to continue execution.
  */
 export type BeforeDeleteSaveFunction = (params: {
+    /**
+     * Resource info.
+     */
     resource: AdminForthResource;
+    /**
+     * Primary key value of the record to delete.
+     */
     recordId: any;
+    /**
+     * Admin user performing the action.
+     */
     adminUser: AdminUser;
+    /**
+     * Record data before deletion.
+     */
     record: any;
+    /**
+     * Adminforth instance.
+     */
     adminforth: IAdminForth;
+    /**
+     * HTTP response object.
+     *
+     * @deprecated Since 1.2.9. Will be removed in 2.0.0. Use extra.response instead.
+     */
     response?: IAdminForthHttpResponse;
+    /**
+     * Extra HTTP information. Prefer using extra.response over the top-level response field.
+     */
     extra?: HttpExtra;
 }) => Promise<{
     ok: boolean;
     error?: string;
 }>;
 export type BeforeEditSaveFunction = (params: {
+    /**
+   * Resource info.
+   */
     resource: AdminForthResource;
+    /**
+   * Primary key value of the record to delete.
+   */
     recordId: any;
+    /**
+   * Admin user performing the action.
+   */
     adminUser: AdminUser;
     updates: any;
+    /**
+    * Record with updates
+    *
+    *  @deprecated. Will be removed in 2.0.0. Use updates instead.
+    */
     record: any;
+    /**
+     * Record data before update.
+     */
     oldRecord: any;
+    /**
+     * Adminforth instance.
+     */
     adminforth: IAdminForth;
+    /**
+   * HTTP response object.
+   *
+   * @deprecated Since 1.2.9. Will be removed in 2.0.0. Use extra.response instead.
+   */
     response: IAdminForthHttpResponse;
+    /**
+   * Extra HTTP information. Prefer using extra.response over the top-level response field.
+   */
     extra?: HttpExtra;
 }) => Promise<{
     ok: boolean;
     error?: string | null;
 }>;
 export type BeforeCreateSaveFunction = (params: {
+    /**
+     * Resource info.
+     */
     resource: AdminForthResource;
+    /**
+     * Admin user performing the action.
+     */
     adminUser: AdminUser;
+    /**
+    * Record data to create.
+    */
     record: any;
+    /**
+     * Adminforth instance.
+     */
     adminforth: IAdminForth;
+    /**
+     * HTTP response object.
+     *
+     * @deprecated Since 1.2.9. Will be removed in 2.0.0. Use extra.response instead.
+     */
     response: IAdminForthHttpResponse;
     extra?: HttpExtra;
 }) => Promise<{
     ok: boolean;
     error?: string | null;
+    /**
+     * @deprecated Since 1.2.9. Will be removed in 2.0.0. Use redirectToRecordId instead.
+     */
     newRecordId?: string;
+    redirectToRecordId?: string;
 }>;
 export type AfterCreateSaveFunction = (params: {
+    /**
+   * Resource info.
+   */
     resource: AdminForthResource;
+    /**
+   * Primary key value of the record to delete.
+   */
     recordId: any;
+    /**
+   * Admin user performing the action.
+   */
     adminUser: AdminUser;
+    /**
+     * Record data after creation.
+     */
     record: any;
+    /**
+   * Adminforth instance.
+   */
     adminforth: IAdminForth;
+    /**
+     * Record with virtual columns after creation.
+     */
     recordWithVirtualColumns?: any;
+    /**
+     * HTTP response object.
+     *
+     * @deprecated Since 1.2.9. Will be removed in 2.0.0. Use extra.response instead.
+     */
     response: IAdminForthHttpResponse;
+    /**
+   * Extra HTTP information. Prefer using extra.response over the top-level response field.
+   */
     extra?: HttpExtra;
 }) => Promise<{
     ok: boolean;
@@ -725,26 +833,80 @@ export type AfterCreateSaveFunction = (params: {
  * Return ok: false and error: string to stop execution and show error message to user. Return ok: true to continue execution.
  */
 export type AfterDeleteSaveFunction = (params: {
+    /**
+   * Resource info.
+   */
     resource: AdminForthResource;
+    /**
+   * Primary key value of the record to delete.
+   */
     recordId: any;
+    /**
+   * Admin user performing the action.
+   */
     adminUser: AdminUser;
+    /**
+     * Record data, that was deleted.
+     */
     record: any;
+    /**
+     * Adminforth instance.
+     */
     adminforth: IAdminForth;
+    /**
+     * HTTP response object.
+     *
+     * @deprecated Since 1.2.9. Will be removed in 2.0.0. Use extra.response instead.
+     */
     response: IAdminForthHttpResponse;
+    /**
+   * Extra HTTP information. Prefer using extra.response over the top-level response field.
+   */
     extra?: HttpExtra;
 }) => Promise<{
     ok: boolean;
     error?: string;
 }>;
 export type AfterEditSaveFunction = (params: {
+    /**
+   * Resource info.
+   */
     resource: AdminForthResource;
+    /**
+   * Primary key value of the record to delete.
+   */
     recordId: any;
+    /**
+   * Admin user performing the action.
+   */
     adminUser: AdminUser;
+    /**
+    * Record updates.
+    */
     updates: any;
+    /**
+    * Record after update.
+    *
+    *  @deprecated. Will be removed in 2.0.0. Use updates instead.
+    */
     record: any;
+    /**
+     * Record data before update.
+     */
     oldRecord: any;
+    /**
+     * Adminforth instance.
+     */
     adminforth: IAdminForth;
+    /**
+     * HTTP response object.
+     *
+     * @deprecated Since 1.2.9. Will be removed in 2.0.0. Use extra.response instead.
+     */
     response: IAdminForthHttpResponse;
+    /**
+   * Extra HTTP information. Prefer using extra.response over the top-level response field.
+   */
     extra?: HttpExtra;
 }) => Promise<{
     ok: boolean;
@@ -754,10 +916,27 @@ export type AfterEditSaveFunction = (params: {
  * Allow to get user data before login confirmation, will triger when user try to login.
  */
 export type BeforeLoginConfirmationFunction = (params?: {
+    /**
+   * Admin user performing the action.
+   */
     adminUser: AdminUser;
+    /**
+     * HTTP response object.
+     *
+     * @deprecated Since 1.2.9. Will be removed in 2.0.0. Use extra.response instead.
+     */
     response: IAdminForthHttpResponse;
+    /**
+     * Adminforth instance.
+     */
     adminforth: IAdminForth;
+    /**
+   * Extra HTTP information. Prefer using extra.response over the top-level response field.
+   */
     extra?: HttpExtra;
+    /**
+   * Duration of session in format "1s", "1m", "1h", or "1d" (e.g., "30d" for 30 days)
+   */
     sessionDuration?: string;
 }) => Promise<{
     error?: string;
@@ -770,9 +949,23 @@ export type BeforeLoginConfirmationFunction = (params?: {
  * Allow to make extra authorization
  */
 export type AdminUserAuthorizeFunction = ((params?: {
+    /**
+   * Admin user performing the action.
+   */
     adminUser: AdminUser;
+    /**
+   * HTTP response object.
+   *
+   * @deprecated Since 1.2.9. Will be removed in 2.0.0. Use extra.response instead.
+   */
     response: IAdminForthHttpResponse;
+    /**
+     * Adminforth instance.
+     */
     adminforth: IAdminForth;
+    /**
+   * Extra HTTP information. Prefer using extra.response over the top-level response field.
+   */
     extra?: HttpExtra;
 }) => Promise<{
     error?: string;