adminforth 1.13.0-next.4 → 1.13.0-next.40

package/dist/spa/src/components/ThreeDotsMenu.vue

@@ -1,5 +1,5 @@
 <template >
-  <template v-if="threeDotsDropdownItems?.length">
+  <template v-if="threeDotsDropdownItems?.length || customActions?.length">
     <button 
       data-dropdown-toggle="listThreeDotsDropdown" 
       class="flex items-center py-2 px-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
@@ -23,6 +23,18 @@
               />
             </a>
           </li>
+          <li v-for="action in customActions" :key="action.id">
+            <a href="#" @click.prevent="handleActionClick(action)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+              <div class="flex items-center gap-2">
+                <component 
+                  v-if="action.icon" 
+                  :is="getIcon(action.icon)" 
+                  class="w-4 h-4 text-lightPrimary dark:text-darkPrimary"
+                />
+                {{ action.name }}
+              </div>
+            </a>
+          </li>
         </ul>
     </div>
   </template>
@@ -30,14 +42,70 @@
 
 
 <script setup lang="ts">
+import { getCustomComponent, getIcon } from '@/utils';
+import { useCoreStore } from '@/stores/core';
+import adminforth from '@/adminforth';
+import { callAdminForthApi } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+
+const route = useRoute();
+const coreStore = useCoreStore();
+const router = useRouter();
 
-import { getCustomComponent } from '@/utils';
-import { useCoreStore } from '@/stores/core'
+const props = defineProps({
+  threeDotsDropdownItems: Array,
+  customActions: Array
+});
 
-const coreStore = useCoreStore()
+async function handleActionClick(action) {
+  adminforth.list.closeThreeDotsDropdown();
+  
+  const actionId = action.id;
+  const data = await callAdminForthApi({
+    path: '/start_custom_action',
+    method: 'POST',
+    body: {
+      resourceId: route.params.resourceId,
+      actionId: actionId,
+      recordId: route.params.primaryKey
+    }
+  });
 
-const props = defineProps<{
-  threeDotsDropdownItems: any[] | undefined
-}>()
+  if (data?.redirectUrl) {
+    // Check if the URL should open in a new tab
+    if (data.redirectUrl.includes('target=_blank')) {
+      window.open(data.redirectUrl.replace('&target=_blank', '').replace('?target=_blank', ''), '_blank');
+    } else {
+      // Navigate within the app
+      if (data.redirectUrl.startsWith('http')) {
+        window.location.href = data.redirectUrl;
+      } else {
+        router.push(data.redirectUrl);
+      }
+    }
+    return;
+  }
+  
+  if (data?.ok) {
+    await coreStore.fetchRecord({
+      resourceId: route.params.resourceId, 
+      primaryKey: route.params.primaryKey,
+      source: 'show',
+    });
 
+    if (data.successMessage) {
+      adminforth.alert({
+        message: data.successMessage,
+        variant: 'success'
+      });
+    }
+  }
+  
+  if (data?.error) {
+    adminforth.alert({
+      message: data.error,
+      variant: 'danger'
+    });
+  }
+}
 </script>

package/dist/spa/src/components/ValueRenderer.vue

@@ -1,7 +1,23 @@
 <template>
   <div>
-    <span @click="(e)=>{e.stopPropagation()}" v-if="column.foreignResource">
-      <RouterLink v-if="record[column.name]" class="font-medium text-lightPrimary dark:text-darkPrimary hover:brightness-110 whitespace-nowrap"
+    <span
+      v-if="column.foreignResource"
+      :class="{'flex flex-wrap': column.isArray?.enabled}"
+      @click="(e)=>{e.stopPropagation()}"
+    >
+      <span
+        v-if="record[column.name] && column.isArray?.enabled"
+        v-for="foreignResource in record[column.name]"
+        class="rounded-md m-0.5 bg-lightAnnouncementBG dark:bg-darkAnnouncementBG text-lightAnnouncementText dark:text-darkAnnouncementText py-0.5 px-2.5 text-sm"
+      >
+        <RouterLink
+          class="font-medium text-lightSidebarText dark:text-darkSidebarText hover:brightness-110 whitespace-nowrap"
+          :to="{ name: 'resource-show', params: { primaryKey: foreignResource.pk, resourceId: column.foreignResource.resourceId || column.foreignResource.polymorphicResources.find((pr) => pr.whenValue === record[column.foreignResource.polymorphicOn]).resourceId } }"
+        >
+          {{ foreignResource.label }}
+        </RouterLink>
+      </span>
+      <RouterLink v-else-if="record[column.name]" class="font-medium text-lightPrimary dark:text-darkPrimary hover:brightness-110 whitespace-nowrap"
         :to="{ name: 'resource-show', params: { primaryKey: record[column.name].pk, resourceId: column.foreignResource.resourceId || column.foreignResource.polymorphicResources.find((pr) => pr.whenValue === record[column.foreignResource.polymorphicOn]).resourceId } }">
         {{ record[column.name].label }}
       </RouterLink>

package/dist/spa/src/types/Back.ts

@@ -106,11 +106,18 @@ export interface IExpressHttpServer extends IHttpServer {
 }
 
 
-export interface IAdminForthFilter {
+export interface IAdminForthSingleFilter {
   field: string;
-  operator: AdminForthFilterOperators;
+  operator: AdminForthFilterOperators.EQ | AdminForthFilterOperators.NE
+  | AdminForthFilterOperators.GT | AdminForthFilterOperators.LT | AdminForthFilterOperators.GTE
+  | AdminForthFilterOperators.LTE | AdminForthFilterOperators.LIKE | AdminForthFilterOperators.ILIKE
+  | AdminForthFilterOperators.IN | AdminForthFilterOperators.NIN;
   value: any;
 }
+export interface IAdminForthAndOrFilter {
+  operator: AdminForthFilterOperators.AND | AdminForthFilterOperators.OR;
+  subFilters: Array<IAdminForthAndOrFilter | IAdminForthSingleFilter>
+}
 
 export interface IAdminForthSort {
   field: string, 
@@ -185,7 +192,7 @@ export interface IAdminForthDataSourceConnector {
     limit: number,
     offset: number,
     sort: IAdminForthSort[], 
-    filters: IAdminForthFilter[],
+    filters: IAdminForthAndOrFilter,
   }): Promise<Array<any>>;
 
   /**
@@ -193,7 +200,7 @@ export interface IAdminForthDataSourceConnector {
    */
   getCount({ resource, filters }: {
     resource: AdminForthResource,
-    filters: IAdminForthFilter[],
+    filters: IAdminForthAndOrFilter,
   }): Promise<number>;
 
   /**
@@ -206,9 +213,9 @@ export interface IAdminForthDataSourceConnector {
 
 
   /**
-   * Used to create record in database.
+   * Used to create record in database. Should return value of primary key column of created record.
    */
-  createRecordOriginalValues({ resource, record }: { resource: AdminForthResource, record: any }): Promise<void>;
+  createRecordOriginalValues({ resource, record }: { resource: AdminForthResource, record: any }): Promise<string>;
 
   /**
    * Update record in database. newValues might have not all fields in record, but only changed ones.
@@ -235,7 +242,7 @@ export interface IAdminForthDataSourceConnectorBase extends IAdminForthDataSourc
     limit: number,
     offset: number,
     sort: IAdminForthSort[],
-    filters: IAdminForthFilter[],
+    filters: IAdminForthAndOrFilter,
     getTotals?: boolean,
   }): Promise<{ data: Array<any>, total: number }>;
 
@@ -720,6 +727,33 @@ interface AdminForthInputConfigCustomization {
   }
 }
 
+export interface AdminForthActionInput {
+  name: string;
+  showIn?: {
+      list?: boolean,
+      showButton?: boolean,
+      showThreeDotsMenu?: boolean,
+  };
+  allowed?: (params: {
+    adminUser: AdminUser;
+    standardAllowedActions: AllowedActions;
+  }) => boolean;
+  url?: string;
+  action?: (params: {
+      adminforth: IAdminForth;
+      resource: AdminForthResource;
+      recordId: string;
+      adminUser: AdminUser;
+      extra?: HttpExtra;
+      tr: Function;
+  }) => Promise<{
+      ok: boolean;
+      error?: string;
+      message?: string;
+  }>;
+  icon?: string;
+  id?: string;
+}
 
 export interface AdminForthResourceInput extends Omit<AdminForthResourceInputCommon, 'columns' | 'hooks' | 'options'> {
 
@@ -1012,36 +1046,42 @@ export interface AdminForthConfig extends Omit<AdminForthInputConfig, 'customiza
 // return { field: field, operator: 'eq', value: value }. They should be exported with Filters namespace so I can import Filters from this file
 // and use Filters.EQ(field, value) in my code
 
-export type FDataFilter = (field: string, value: any) => IAdminForthFilter;
+export type FDataFilter = (field: string, value: any) => IAdminForthSingleFilter;
 
 export class Filters {
-  static EQ(field: string, value: any): IAdminForthFilter {
+  static EQ(field: string, value: any): IAdminForthSingleFilter {
     return { field, operator: AdminForthFilterOperators.EQ, value };
   }
-  static NEQ(field: string, value: any): IAdminForthFilter {
+  static NEQ(field: string, value: any): IAdminForthSingleFilter {
     return { field, operator: AdminForthFilterOperators.NE, value };
   }
-  static GT(field: string, value: any): IAdminForthFilter {
+  static GT(field: string, value: any): IAdminForthSingleFilter {
     return { field, operator: AdminForthFilterOperators.GT, value };
   }
-  static GTE(field: string, value: any): IAdminForthFilter {
+  static GTE(field: string, value: any): IAdminForthSingleFilter {
     return { field, operator: AdminForthFilterOperators.GTE, value };
   }
-  static LT(field: string, value: any): IAdminForthFilter {
+  static LT(field: string, value: any): IAdminForthSingleFilter {
     return { field, operator: AdminForthFilterOperators.LT, value };
   }
-  static LTE(field: string, value: any): IAdminForthFilter {
+  static LTE(field: string, value: any): IAdminForthSingleFilter {
     return { field, operator: AdminForthFilterOperators.LTE, value };
   }
-  static IN(field: string, value: any): IAdminForthFilter {
+  static IN(field: string, value: any): IAdminForthSingleFilter {
     return { field, operator: AdminForthFilterOperators.IN, value };
   }
-  static NOT_IN(field: string, value: any): IAdminForthFilter {
+  static NOT_IN(field: string, value: any): IAdminForthSingleFilter {
     return { field, operator: AdminForthFilterOperators.NIN, value };
   }
-  static LIKE(field: string, value: any): IAdminForthFilter {
+  static LIKE(field: string, value: any): IAdminForthSingleFilter {
     return { field, operator: AdminForthFilterOperators.LIKE, value };
   }
+  static AND(subFilters: Array<IAdminForthSingleFilter | IAdminForthAndOrFilter>): IAdminForthAndOrFilter {
+    return { operator: AdminForthFilterOperators.AND, subFilters };
+  }
+  static OR(subFilters: Array<IAdminForthSingleFilter | IAdminForthAndOrFilter>): IAdminForthAndOrFilter {
+    return { operator: AdminForthFilterOperators.OR, subFilters };
+  }
 }
 
 export type FDataSort = (field: string, direction: AdminForthSortDirections) => IAdminForthSort;
@@ -1056,11 +1096,11 @@ export class Sorts {
 }
 
 export interface IOperationalResource {
-  get: (filter: IAdminForthFilter | IAdminForthFilter[]) => Promise<any | null>;
+  get: (filter: IAdminForthSingleFilter | IAdminForthAndOrFilter | Array<IAdminForthSingleFilter | IAdminForthAndOrFilter>) => Promise<any | null>;
 
-  list: (filter: IAdminForthFilter | IAdminForthFilter[], limit?: number, offset?: number, sort?: IAdminForthSort | IAdminForthSort[]) => Promise<any[]>;
+  list: (filter: IAdminForthSingleFilter | IAdminForthAndOrFilter | Array<IAdminForthSingleFilter | IAdminForthAndOrFilter>, limit?: number, offset?: number, sort?: IAdminForthSort | IAdminForthSort[]) => Promise<any[]>;
 
-  count: (filter: IAdminForthFilter | IAdminForthFilter[] | undefined) => Promise<number>;
+  count: (filter: IAdminForthSingleFilter | IAdminForthAndOrFilter | Array<IAdminForthSingleFilter | IAdminForthAndOrFilter> | undefined) => Promise<number>;
 
   create: (record: any) => Promise<{ ok: boolean; createdRecord: any; error?: string; }>;
 
@@ -1141,10 +1181,38 @@ export interface ResourceOptionsInput extends Omit<AdminForthResourceCommon['opt
    * 
    */
   allowedActions?: AllowedActionsInput,
+
+  /**
+   * Array of actions which will be displayed in the resource.
+   * 
+   * Example:
+   * 
+   * ```ts
+   * actions: [
+   *  {
+   *    name: 'Auto submit',
+   *    allowed: ({ adminUser, standardAllowedActions }) => {
+   *      return adminUser.dbUser.role === 'superadmin';
+   *    },
+   *    action: ({ adminUser, resource, recordId, adminforth, extra, tr }) => {
+   *      console.log("auto submit", recordId, adminUser);
+   *      return { ok: true, successMessage: "Auto submitted" };
+   *    },
+   *    showIn: {
+   *      list: true,
+   *      showButton: true,
+   *      showThreeDotsMenu: true,
+   *    },
+   *  },
+   * ]
+   * ```
+   */
+  actions?: Array<AdminForthActionInput>,
 };
 
 export interface ResourceOptions extends Omit<ResourceOptionsInput, 'allowedActions'> {
   allowedActions: AllowedActions,
+  actions?: Array<AdminForthActionInput>,
 }
 
 /**

package/dist/spa/src/types/Common.ts

@@ -28,6 +28,8 @@ export enum AdminForthFilterOperators {
   ILIKE = 'ilike',
   IN = 'in',
   NIN = 'nin',
+  AND = 'and',
+  OR = 'or',
 };
 
 export enum AdminForthSortDirections {
@@ -50,6 +52,7 @@ export enum ActionCheckSource {
   CreateRequest = 'createRequest',
   DeleteRequest = 'deleteRequest',
   BulkActionRequest = 'bulkActionRequest',
+  CustomActionRequest = 'customActionRequest',
 }
 
 export enum AllowedActionsEnum {
@@ -91,7 +94,14 @@ export interface AdminForthBulkActionCommon {
    * Label for action button which will be displayed in the list view
    */
   label: string,
-  state: string,
+
+  /**
+   * Bulk Action button state 'danger'|success|'active',
+   *  * 'danger' - red button
+   *  * 'success' - green button
+   *  * 'active' - blue button
+   **/ 
+  state?: 'danger' | 'success' | 'active';
 
   /**
    * Icon for action button which will be displayed in the list view
@@ -357,18 +367,22 @@ export interface AdminForthResourceInputCommon {
       fieldGroups?: {
         groupName: string;
         columns: string[];
+        noTitle?: boolean;
       }[];
       createFieldGroups?: {
         groupName: string;
         columns: string[];
+        noTitle?: boolean;
       }[];
       editFieldGroups?: {
         groupName: string;
         columns: string[];
+        noTitle?: boolean;
       }[];
       showFieldGroups?: {
         groupName: string;
         columns: string[];
+        noTitle?: boolean;
       }[];
 
       /** 
@@ -440,6 +454,7 @@ export interface AdminForthResourceInputCommon {
           bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           threeDotsDropdownItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           customActionIcons?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          tableBodyStart?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
         },
 
         /**
@@ -551,6 +566,11 @@ export interface AdminForthForeignResourceCommon {
   unsetLabel?: string,
 }
 
+export type FillOnCreateFunction = (params: {
+  initialRecord: any,
+  adminUser: AdminUser,
+}) => any;
+
 /**
  * Column describes one field in the table or collection in database.
  */
@@ -681,7 +701,7 @@ export interface AdminForthResourceColumnInputCommon {
   /**
    * Called on the backend when the record is saved to a database. Value returned by `fillOnCreate` will be saved to the database. 
    */
-  fillOnCreate?: Function,
+  fillOnCreate?: FillOnCreateFunction,
 
   /**
    * Single value that will be substituted in create form. User can change it before saving the record.
@@ -805,6 +825,10 @@ export interface AdminForthResourceColumnInputCommon {
      * If false - will force EQ operator for filter instead of ILIKE.
      */
     substringSearch?: boolean,
+    /**
+     * Boolean value that determines what select input type to display on filter page.
+     */
+    multiselect?: boolean,
   },
 
   /**

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

@@ -107,7 +107,11 @@ const editableRecord = computed(() => {
   }
   coreStore.resource.columns.forEach(column => {
     if (column.foreignResource) {
-      newRecord[column.name] = newRecord[column.name]?.pk
+      if (column.isArray?.enabled) {
+        newRecord[column.name] = newRecord[column.name]?.map(fr => fr.pk);
+      } else {
+        newRecord[column.name] = newRecord[column.name]?.pk;
+      }
     }
   });
   return newRecord;
@@ -145,7 +149,7 @@ async function saveRecord() {
 
     const column = coreStore.resource.columns.find((c) => c.name === key);
     if (column?.foreignResource) {
-      columnIsUpdated = record.value[key] !== coreStore.record[key].pk;
+      columnIsUpdated = record.value[key] !== coreStore.record[key]?.pk;
     }
 
     if (columnIsUpdated) {
@@ -172,7 +176,7 @@ async function saveRecord() {
     });
   }
   saving.value = false;
-  router.push({ name: 'resource-show', params: { resourceId: route.params.resourceId, primaryKey: coreStore.record[coreStore.primaryKey] } });
+  router.push({ name: 'resource-show', params: { resourceId: route.params.resourceId, primaryKey: resp.recordId } });
 }
 
 </script>

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

@@ -38,8 +38,10 @@
         :key="action.id"
         @click="startBulkAction(action.id)"
         class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
-        :class="{'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger', 'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
-        'bg-lightPrimaryOpacity text-lightPrimary border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
+        :class="{
+          'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger',
+          'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
+          'bg-lightPrimaryOpacity text-lightPrimary border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
         }"
       >
         <component
@@ -114,6 +116,7 @@
       :totalRows="totalRows"
       :checkboxes="checkboxes"
       :customActionsInjection="coreStore.resourceOptions?.pageInjections?.list?.customActionIcons"
+      :tableBodyStartInjection="coreStore.resourceOptions?.pageInjections?.list?.tableBodyStart"
     />
 
     <component 

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

@@ -10,6 +10,22 @@
       :adminUser="coreStore.adminUser"
     />
     <BreadcrumbsWithButtons>
+      <template v-if="coreStore.resource?.options?.actions">
+        <button 
+          v-for="action in coreStore.resource.options.actions.filter(a => a.showIn?.showButton)" 
+          :key="action.id"
+          @click="startCustomAction(action.id)"
+          :disabled="actionLoadingStates[action.id]"
+          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        >
+          <component 
+            v-if="action.icon" 
+            :is="getIcon(action.icon)" 
+            class="w-4 h-4 me-2 text-lightPrimary dark:text-darkPrimary"
+          />
+          {{ action.name }}
+        </button>
+      </template>
       <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
         :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
         class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
@@ -34,6 +50,7 @@
 
       <ThreeDotsMenu 
         :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.show?.threeDotsDropdownItems"
+        :customActions="customActions"
       ></ThreeDotsMenu>
     </BreadcrumbsWithButtons>
 
@@ -66,11 +83,12 @@
         :record="coreStore.record"
       />
     </div>
-    <template v-else>
+    <template v-else> 
       <template v-for="group in groups" :key="group.groupName">
         <ShowTable
           :columns="group.columns"
           :groupName="group.groupName"
+          :noTitle="group.noTitle"
           :resource="coreStore.resource"
           :record="coreStore.record"
         />
@@ -121,6 +139,7 @@ import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import ShowTable from '@/components/ShowTable.vue';
 import adminforth from "@/adminforth";
 import { useI18n } from 'vue-i18n';
+import { getIcon } from '@/utils';
 
 const route = useRoute();
 const router = useRouter();
@@ -128,6 +147,12 @@ const loading = ref(true);
 const { t } = useI18n();
 const coreStore = useCoreStore();
 
+const actionLoadingStates = ref({});
+
+const customActions = computed(() => {
+  return coreStore.resource?.options?.actions?.filter(a => a.showIn?.showThreeDotsMenu) || [];
+});
+
 onMounted(async () => {
   loading.value = true;
   await coreStore.fetchResourceFull({
@@ -206,4 +231,54 @@ async function deleteRecord(row) {
     
 }
 
+async function startCustomAction(actionId) {  
+  actionLoadingStates.value[actionId] = true;
+
+  const data = await callAdminForthApi({
+    path: '/start_custom_action',
+    method: 'POST',
+    body: {
+      resourceId: route.params.resourceId,
+      actionId: actionId,
+      recordId: route.params.primaryKey
+    }
+  });
+  
+  actionLoadingStates.value[actionId] = false;
+  
+  if (data?.redirectUrl) {
+    // Check if the URL should open in a new tab
+    if (data.redirectUrl.includes('target=_blank')) {
+      window.open(data.redirectUrl.replace('&target=_blank', '').replace('?target=_blank', ''), '_blank');
+    } else {
+      // Navigate within the app
+      if (data.redirectUrl.startsWith('http')) {
+        window.location.href = data.redirectUrl;
+      } else {
+        router.push(data.redirectUrl);
+      }
+    }
+    return;
+  }
+  
+  if (data?.ok) {
+    await coreStore.fetchRecord({
+      resourceId: route.params.resourceId, 
+      primaryKey: route.params.primaryKey,
+      source: 'show',
+    });
+
+    if (data.successMessage) {
+      adminforth.alert({
+        message: data.successMessage,
+        variant: 'success'
+      });
+    }
+  }
+  
+  if (data?.error) {
+    showErrorTost(data.error);
+  }
+}
+
 </script>