adminforth 2.27.0-next.3 → 2.27.0-next.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/commands/callTsProxy.js +10 -5
  2. package/commands/proxy.ts +18 -10
  3. package/dist/commands/proxy.js +14 -10
  4. package/dist/commands/proxy.js.map +1 -1
  5. package/dist/modules/configValidator.d.ts.map +1 -1
  6. package/dist/modules/configValidator.js +16 -9
  7. package/dist/modules/configValidator.js.map +1 -1
  8. package/dist/modules/restApi.d.ts.map +1 -1
  9. package/dist/modules/restApi.js +77 -4
  10. package/dist/modules/restApi.js.map +1 -1
  11. package/dist/modules/styles.js +1 -1
  12. package/dist/servers/express.d.ts.map +1 -1
  13. package/dist/servers/express.js +4 -0
  14. package/dist/servers/express.js.map +1 -1
  15. package/dist/spa/package-lock.json +41 -0
  16. package/dist/spa/package.json +3 -0
  17. package/dist/spa/pnpm-lock.yaml +38 -0
  18. package/dist/spa/src/App.vue +77 -76
  19. package/dist/spa/src/afcl/Button.vue +2 -3
  20. package/dist/spa/src/afcl/Dialog.vue +1 -1
  21. package/dist/spa/src/afcl/Input.vue +1 -1
  22. package/dist/spa/src/afcl/Select.vue +8 -2
  23. package/dist/spa/src/afcl/Spinner.vue +1 -1
  24. package/dist/spa/src/components/CallActionWrapper.vue +1 -1
  25. package/dist/spa/src/components/ColumnValueInput.vue +16 -3
  26. package/dist/spa/src/components/ColumnValueInputWrapper.vue +25 -2
  27. package/dist/spa/src/components/CustomRangePicker.vue +16 -14
  28. package/dist/spa/src/components/Filters.vue +95 -63
  29. package/dist/spa/src/components/GroupsTable.vue +9 -6
  30. package/dist/spa/src/components/MenuLink.vue +2 -2
  31. package/dist/spa/src/components/ResourceForm.vue +101 -7
  32. package/dist/spa/src/components/ResourceListTable.vue +13 -7
  33. package/dist/spa/src/components/ShowTable.vue +1 -1
  34. package/dist/spa/src/components/Sidebar.vue +2 -2
  35. package/dist/spa/src/components/ThreeDotsMenu.vue +19 -9
  36. package/dist/spa/src/components/ValueRenderer.vue +1 -0
  37. package/dist/spa/src/spa_types/core.ts +32 -0
  38. package/dist/spa/src/stores/filters.ts +16 -12
  39. package/dist/spa/src/types/Back.ts +20 -4
  40. package/dist/spa/src/types/Common.ts +24 -5
  41. package/dist/spa/src/types/adapters/StorageAdapter.ts +12 -0
  42. package/dist/spa/src/utils/createEditUtils.ts +65 -0
  43. package/dist/spa/src/utils/index.ts +2 -1
  44. package/dist/spa/src/utils/utils.ts +44 -9
  45. package/dist/spa/src/utils.ts +2 -1
  46. package/dist/spa/src/views/CreateView.vue +22 -49
  47. package/dist/spa/src/views/EditView.vue +21 -39
  48. package/dist/spa/src/views/ListView.vue +22 -32
  49. package/dist/spa/src/views/ShowView.vue +67 -12
  50. package/dist/types/Back.d.ts +20 -15
  51. package/dist/types/Back.d.ts.map +1 -1
  52. package/dist/types/Back.js.map +1 -1
  53. package/dist/types/Common.d.ts +31 -5
  54. package/dist/types/Common.d.ts.map +1 -1
  55. package/dist/types/Common.js.map +1 -1
  56. package/dist/types/adapters/StorageAdapter.d.ts +11 -0
  57. package/dist/types/adapters/StorageAdapter.d.ts.map +1 -1
  58. package/package.json +5 -3
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="overflow-x-auto shadow-resourseFormShadow dark:shadow-darkResourseFormShadow"
2
+ <div class="overflow-x-auto shadow-resourseFormShadow dark:shadow-darkResourseFormShadow border dark:border-gray-700"
3
3
  :class="{'rounded-default' : isRounded}"
4
4
  >
5
5
  <div v-if="groupName && !noTitle" class="text-md font-semibold px-6 py-3 flex flex-1 items-center text-lightShowTableHeadingText bg-lightShowTableHeadingBackground dark:bg-darkShowTableHeadingBackground dark:text-darkShowTableHeadingText rounded-t-lg">
@@ -71,7 +71,7 @@
71
71
  >
72
72
  <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75 dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
73
73
  <span class="overflow-hidden flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}
74
- <span v-if="item.badge" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG
74
+ <span v-if="item.badge || item.badge === 0" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG
75
75
  fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
76
76
  <Tooltip v-if="item.badgeTooltip">
77
77
  {{ item.badge }}
@@ -129,7 +129,7 @@
129
129
  } : {}"
130
130
  >{{ item.label }}
131
131
 
132
- <span v-if="item.badge" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG
132
+ <span v-if="item.badge || item.badge === 0" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG
133
133
  fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
134
134
  <Tooltip v-if="item.badgeTooltip">
135
135
  {{ item.badge }}
@@ -30,9 +30,9 @@
30
30
  }"
31
31
  @click="injectedComponentClick(i)"
32
32
  >
33
- <div class="wrapper">
33
+ <div class="wrapper" v-if="getCustomComponent(item)">
34
34
  <component
35
- :ref="(el: any) => setComponentRef(el, i)" :is="getCustomComponent(item)"
35
+ :ref="(el: any) => setComponentRef(el, i)" :is="getCustomComponent(item)!"
36
36
  :meta="item.meta"
37
37
  :resource="coreStore.resource"
38
38
  :adminUser="coreStore.adminUser"
@@ -46,18 +46,21 @@
46
46
  <li v-for="action in customActions" :key="action.id">
47
47
  <div class="wrapper">
48
48
  <component
49
- v-if="action.customComponent"
50
49
  :is="(action.customComponent && getCustomComponent(formatComponent(action.customComponent))) || CallActionWrapper"
51
50
  :meta="formatComponent(action.customComponent).meta"
52
51
  @callAction="(payload? : Object) => handleActionClick(action, payload)"
53
52
  >
54
- <a @click.prevent class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
55
- <div class="flex items-center gap-2">
53
+ <a @click.prevent class="block">
54
+ <div class="flex items-center gap-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
56
55
  <component
57
- v-if="action.icon"
56
+ v-if="action.icon && !actionLoadingStates[action.id!]"
58
57
  :is="getIcon(action.icon)"
59
58
  class="w-4 h-4 text-lightPrimary dark:text-darkPrimary"
60
59
  />
60
+ <Spinner
61
+ v-if="actionLoadingStates[action.id!]"
62
+ class="w-5 h-5 text-gray-200 dark:text-gray-500 fill-gray-500 dark:fill-gray-300"
63
+ />
61
64
  {{ action.name }}
62
65
  </div>
63
66
  </a>
@@ -92,12 +95,12 @@
92
95
  import { getCustomComponent, getIcon, formatComponent, executeCustomAction } from '@/utils';
93
96
  import { useCoreStore } from '@/stores/core';
94
97
  import { useAdminforth } from '@/adminforth';
95
- import { callAdminForthApi } from '@/utils';
96
98
  import { useRoute, useRouter } from 'vue-router';
97
99
  import CallActionWrapper from '@/components/CallActionWrapper.vue'
98
100
  import { ref, type ComponentPublicInstance, onMounted, onUnmounted } from 'vue';
99
101
  import type { AdminForthActionFront, AdminForthBulkActionFront, AdminForthComponentDeclarationFull } from '@/types/Common';
100
102
  import type { AdminForthActionInput } from '@/types/Back';
103
+ import { Spinner } from '@/afcl';
101
104
 
102
105
  const { list, alert} = useAdminforth();
103
106
  const route = useRoute();
@@ -105,6 +108,7 @@ const coreStore = useCoreStore();
105
108
  const router = useRouter();
106
109
  const threeDotsDropdownItemsRefs = ref<Array<ComponentPublicInstance | null>>([]);
107
110
  const showDropdown = ref(false);
111
+ const actionLoadingStates = ref<Record<string, boolean>>({});
108
112
  const dropdownRef = ref<HTMLElement | null>(null);
109
113
  const buttonTriggerRef = ref<HTMLElement | null>(null);
110
114
 
@@ -136,6 +140,9 @@ async function handleActionClick(action: AdminForthActionInput, payload: any) {
136
140
  resourceId: route.params.resourceId as string,
137
141
  recordId: route.params.primaryKey as string,
138
142
  extra: payload || {},
143
+ setLoadingState: (loading: boolean) => {
144
+ actionLoadingStates.value[action.id!] = loading;
145
+ },
139
146
  onSuccess: async (data: any) => {
140
147
  await coreStore.fetchRecord({
141
148
  resourceId: route.params.resourceId as string,
@@ -196,8 +203,11 @@ onUnmounted(() => {
196
203
  </script>
197
204
 
198
205
  <style lang="scss" scoped>
199
- .wrapper > * {
200
- @apply px-4 py-2;
206
+ .wrapper {
207
+ @apply px-4 py-2
208
+ hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover
209
+ dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover
210
+ cursor-pointer;
201
211
  }
202
212
  </style>
203
213
 
@@ -11,6 +11,7 @@
11
11
  class="rounded-md m-0.5 bg-lightAnnouncementBG dark:bg-darkAnnouncementBG text-lightAnnouncementText dark:text-darkAnnouncementText py-0.5 px-2.5 text-sm"
12
12
  >
13
13
  <RouterLink
14
+ v-if="foreignResource && foreignResource?.pk"
14
15
  class="font-medium text-lightSidebarText dark:text-darkSidebarText hover:brightness-110 whitespace-nowrap"
15
16
  :to="{
16
17
  name: 'resource-show',
@@ -1,4 +1,6 @@
1
1
  import type { AdminForthResource, AdminForthResourceColumn } from '../types/Back.js';
2
+ import type { FilterParams } from '@/types/Common';
3
+ import type { Ref, ComputedRef } from 'vue';
2
4
 
3
5
  export type resourceById = {
4
6
  [key: string]: AdminForthResource;
@@ -61,3 +63,33 @@ export type AllowedActions = {
61
63
  delete: boolean,
62
64
  }
63
65
 
66
+
67
+ export type sortType = {
68
+ field: string,
69
+ direction: 'ask' | 'desc'
70
+ } | null;
71
+
72
+ export type AdminforthFilterStore = {
73
+ filters: Ref<FilterParams[]>,
74
+
75
+ setSort: (sort: sortType) => void,
76
+ getSort: () => sortType,
77
+
78
+ setFilter: (filters: FilterParams) => void,
79
+ setFilters: (filters: FilterParams[]) => void,
80
+
81
+ getFilters: () => FilterParams[],
82
+
83
+ clearFilter: (fieldName: string) => void,
84
+ clearFilters: () => void,
85
+
86
+ shouldFilterBeHidden: (fieldName: string) => boolean,
87
+
88
+ visibleFiltersCount: ComputedRef<number>,
89
+ }
90
+
91
+ export interface AdminforthFilterStoreUnwrapped extends Omit<AdminforthFilterStore, 'filters' | 'visibleFiltersCount'> {
92
+ filters: FilterParams[],
93
+ visibleFiltersCount: number,
94
+ }
95
+
@@ -1,40 +1,42 @@
1
1
  import { ref, computed, type Ref } from 'vue';
2
2
  import { defineStore } from 'pinia';
3
3
  import { useCoreStore } from './core';
4
+ import type { FilterParams } from '@/types/Common';
5
+ import type { AdminforthFilterStore, sortType } from '../spa_types/core';
4
6
 
5
7
  export const useFiltersStore = defineStore('filters', () => {
6
- const filters: Ref<any[]> = ref([]);
7
- const sort: Ref<any> = ref({});
8
+ const filters: Ref<FilterParams[]> = ref([]);
9
+ const sort: Ref<sortType> = ref(null);
8
10
  const coreStore = useCoreStore();
9
11
 
10
- const setSort = (s: any) => {
12
+ const setSort = (s: sortType): void => {
11
13
  sort.value = s;
12
14
  }
13
- const getSort = () => {
15
+ const getSort = (): sortType => {
14
16
  return sort.value;
15
17
  }
16
- const setFilter = (filter: any) => {
18
+ const setFilter = (filter: FilterParams) => {
17
19
  const index = filters.value.findIndex(f => f.field === filter.field);
18
- if (filters.value[index] && filters.value[index].operator === filter.value.operator) {
20
+ if (filters.value[index] && filters.value[index].operator === filter.operator) {
19
21
  filters.value[index] = filter;
20
22
  return;
21
23
  }
22
24
  filters.value.push(filter);
23
25
  }
24
- const setFilters = (f: any) => {
26
+ const setFilters = (f: FilterParams[]) => {
25
27
  filters.value = f;
26
28
  }
27
- const getFilters = () => {
29
+ const getFilters = (): FilterParams[] => {
28
30
  return filters.value;
29
31
  }
30
- const clearFilter = (fieldName: string) => {
32
+ const clearFilter = (fieldName: string): void => {
31
33
  filters.value = filters.value.filter(f => f.field !== fieldName);
32
34
  }
33
- const clearFilters = () => {
35
+ const clearFilters = (): void => {
34
36
  filters.value = [];
35
37
  }
36
38
 
37
- const shouldFilterBeHidden = (fieldName: string) => {
39
+ const shouldFilterBeHidden = (fieldName: string): boolean => {
38
40
  if (coreStore.resource?.columns) {
39
41
  const column = coreStore.resource.columns.find((col: any) => col.name === fieldName);
40
42
  if (column?.showIn?.filter !== true) {
@@ -48,7 +50,7 @@ export const useFiltersStore = defineStore('filters', () => {
48
50
  return filters.value.filter(f => !shouldFilterBeHidden(f.field)).length;
49
51
  });
50
52
 
51
- return {
53
+ const store = {
52
54
  setFilter,
53
55
  getFilters,
54
56
  clearFilters,
@@ -60,4 +62,6 @@ export const useFiltersStore = defineStore('filters', () => {
60
62
  shouldFilterBeHidden,
61
63
  clearFilter
62
64
  }
65
+
66
+ return store as AdminforthFilterStore;
63
67
  })
@@ -13,6 +13,7 @@ import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections,
13
13
  type AdminForthConfigMenuItem,
14
14
  type AnnouncementBadgeResponse,
15
15
  type AdminForthResourceColumnInputCommon,
16
+ type ColumnMinMaxValue,
16
17
  } from './Common.js';
17
18
 
18
19
  export interface ICodeInjector {
@@ -256,7 +257,7 @@ export interface IAdminForthDataSourceConnector {
256
257
  *
257
258
  * Internally should call {@link IAdminForthDataSourceConnector.getFieldValue} for both min and max values.
258
259
  */
259
- getMinMaxForColumnsWithOriginalTypes({ resource, columns }: { resource: AdminForthResource, columns: AdminForthResourceColumn[] }): Promise<{ [key: string]: { min: any, max: any } }>;
260
+ getMinMaxForColumnsWithOriginalTypes({ resource, columns }: { resource: AdminForthResource, columns: AdminForthResourceColumn[] }): Promise<ColumnMinMaxValue>;
260
261
 
261
262
 
262
263
  /**
@@ -309,7 +310,7 @@ export interface IAdminForthDataSourceConnectorBase extends IAdminForthDataSourc
309
310
  newValues: any,
310
311
  }): Promise<{ok: boolean, error?: string}>;
311
312
 
312
- getMinMaxForColumns({ resource, columns }: { resource: AdminForthResource, columns: AdminForthResourceColumn[] }): Promise<{ [key: string]: { min: any, max: any } }>;
313
+ getMinMaxForColumns({ resource, columns }: { resource: AdminForthResource, columns: AdminForthResourceColumn[] }): Promise<ColumnMinMaxValue>;
313
314
 
314
315
  deleteMany?({resource, recordIds}:{resource: AdminForthResource, recordIds: any[]}): Promise<number>;
315
316
  }
@@ -1305,6 +1306,19 @@ export interface AdminForthActionInput {
1305
1306
  standardAllowedActions: AllowedActions;
1306
1307
  }) => boolean;
1307
1308
  url?: string;
1309
+ bulkHandler?: (params: {
1310
+ adminforth: IAdminForth;
1311
+ resource: AdminForthResource;
1312
+ recordIds: (string | number)[];
1313
+ adminUser: AdminUser;
1314
+ response: IAdminForthHttpResponse;
1315
+ extra?: HttpExtra;
1316
+ tr: ITranslateFunction;
1317
+ }) => Promise<{
1318
+ ok: boolean;
1319
+ error?: string;
1320
+ successMessage?: string;
1321
+ }>;
1308
1322
  action?: (params: {
1309
1323
  adminforth: IAdminForth;
1310
1324
  resource: AdminForthResource;
@@ -1312,14 +1326,14 @@ export interface AdminForthActionInput {
1312
1326
  adminUser: AdminUser;
1313
1327
  response: IAdminForthHttpResponse;
1314
1328
  extra?: HttpExtra;
1315
- tr: Function;
1329
+ tr: ITranslateFunction;
1316
1330
  }) => Promise<{
1317
1331
  ok: boolean;
1318
1332
  error?: string;
1319
1333
  message?: string;
1320
1334
  }>;
1321
1335
  icon?: string;
1322
- id: string;
1336
+ id?: string;
1323
1337
  customComponent?: AdminForthComponentDeclaration;
1324
1338
  }
1325
1339
 
@@ -1837,6 +1851,8 @@ export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourc
1837
1851
  /**
1838
1852
  * Custom bulk actions list. Bulk actions available in list view when user selects multiple records by
1839
1853
  * using checkboxes.
1854
+ * @deprecated Since 2.26.5. Will be removed in 3.0.0. Use `actions` instead.
1855
+
1840
1856
  */
1841
1857
  bulkActions?: Array<AdminForthBulkAction>,
1842
1858
 
@@ -303,7 +303,7 @@ export interface AdminForthComponentDeclarationFull {
303
303
  [key: string]: any,
304
304
  }
305
305
  }
306
- import { type AdminForthActionInput, type AdminForthResource } from './Back.js'
306
+ import { type IAdminForth, type AdminForthActionInput, type AdminForthResource } from './Back.js'
307
307
  export { type AdminForthActionInput } from './Back.js'
308
308
 
309
309
  export type AdminForthComponentDeclaration = AdminForthComponentDeclarationFull | string;
@@ -314,8 +314,9 @@ export type FieldGroup = {
314
314
  noTitle?: boolean;
315
315
  };
316
316
 
317
- export interface AdminForthActionFront extends Omit<AdminForthActionInput, 'id'> {
317
+ export interface AdminForthActionFront extends Omit<AdminForthActionInput, 'id' | 'bulkHandler' | 'action' | 'allowed'> {
318
318
  id: string;
319
+ hasBulkHandler?: boolean;
319
320
  }
320
321
 
321
322
  export interface AdminForthBulkActionFront extends Omit<AdminForthBulkActionCommon, 'id'> {
@@ -610,14 +611,14 @@ export type ValidationObject = {
610
611
  * ```
611
612
  *
612
613
  */
613
- regExp: string,
614
+ regExp?: string,
614
615
 
615
616
  /**
616
617
  * Error message shown to user if validation fails
617
618
  *
618
619
  * Example: "Invalid email format"
619
620
  */
620
- message: string,
621
+ message?: string,
621
622
 
622
623
  /**
623
624
  * Whether to check case sensitivity (i flag)
@@ -633,6 +634,20 @@ export type ValidationObject = {
633
634
  * Whether to check global strings (g flag)
634
635
  */
635
636
  global?: boolean
637
+
638
+ /**
639
+ * Custom validator function.
640
+ *
641
+ * Example:
642
+ *
643
+ * ```ts
644
+ * validator: async (value) => {
645
+ * // custom validation logic
646
+ * return { isValid: true, message: 'Validation passed' }; // or { isValid: false, message: 'Validation failed' }
647
+ * }
648
+ * ```
649
+ */
650
+ validator?: (value: any, record: any, adminForth: IAdminForth) => {isValid: boolean, message?: string} | Promise<{isValid: boolean, message?: string}> | boolean,
636
651
  }
637
652
 
638
653
 
@@ -1149,7 +1164,7 @@ export interface AdminForthConfigMenuItem {
1149
1164
  * Optional callback which will be called before rendering the menu for each item.
1150
1165
  * Result of callback if not null will be used as a small badge near the menu item.
1151
1166
  */
1152
- badge?: string | ((user: AdminUser) => Promise<string>),
1167
+ badge?: string | number | ((user: AdminUser) => Promise<string> | string | Promise<number> | number),
1153
1168
 
1154
1169
  /**
1155
1170
  * Tooltip shown on hover for badge
@@ -1242,4 +1257,8 @@ export interface GetBaseConfigResponse {
1242
1257
  config: AdminForthConfigForFrontend,
1243
1258
  adminUser: AdminUser,
1244
1259
  version: string,
1260
+ }
1261
+
1262
+ export interface ColumnMinMaxValue {
1263
+ [key: string]: { min: any, max: any }
1245
1264
  }
@@ -70,6 +70,18 @@ export interface StorageAdapter {
70
70
  * @returns A promise that resolves to a string containing the data URL
71
71
  */
72
72
  getKeyAsDataURL(key: string): Promise<string>;
73
+
74
+ /**
75
+ * Determines whether the given URL points to a resource managed by this storage adapter.
76
+ * * This method is important for plugins (such as MarkdownPlugin) to distinguish between
77
+ * "own" resources (stored in your S3 bucket or local storage) and external links * (such as images from Unsplash or Google).
78
+ * * The implementation logic typically includes:
79
+ * 1. Checking whether the hostname of the URL matches the configured bucket domain or custom CDN.
80
+ * 2. Checking whether the URL path contains the adapter's specific download prefix.
81
+ * * @param url - The full URL string to check (can be a public URL or a pre-signed URL).
82
+ * @returns A promise that returns true if the URL belongs to this adapter, false otherwise.
83
+ */
84
+ isInternalUrl (url: string): Promise<boolean>;
73
85
  }
74
86
 
75
87
 
@@ -0,0 +1,65 @@
1
+ import type { AdminForthResourceColumn } from '@/types/Back';
2
+ import { useAdminforth } from '@/adminforth';
3
+ import { type Ref, nextTick } from 'vue';
4
+
5
+ export function scrollToInvalidField(resourceFormRef: any, t: (key: string) => string) {
6
+ const { alert } = useAdminforth();
7
+ let columnsWithErrors: {column: AdminForthResourceColumn, error: string}[] = [];
8
+ for (const column of resourceFormRef.value?.editableColumns || []) {
9
+ if (resourceFormRef.value?.columnsWithErrors[column.name]) {
10
+ columnsWithErrors.push({
11
+ column,
12
+ error: resourceFormRef.value?.columnsWithErrors[column.name]
13
+ });
14
+ }
15
+ }
16
+ const errorMessage = t('Failed to save. Please fix errors for the following fields:') + '<ul class="mt-2 list-disc list-inside">' + columnsWithErrors.map(c => `<li><strong>${c.column.label || c.column.name}</strong>: ${c.error}</li>`).join('') + '</ul>';
17
+ alert({
18
+ messageHtml: errorMessage,
19
+ variant: 'danger'
20
+ });
21
+ const firstInvalidElement = document.querySelector('.af-invalid-field-message');
22
+ if (firstInvalidElement) {
23
+ firstInvalidElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
24
+ }
25
+ }
26
+
27
+ export async function saveRecordPreparations(
28
+ viewMode: 'create' | 'edit',
29
+ validatingMode: Ref<boolean>,
30
+ resourceFormRef: Ref<any>,
31
+ isValid: Ref<boolean>,
32
+ t: (key: string) => string,
33
+ saving: Ref<boolean>,
34
+ runSaveInterceptors: any,
35
+ record: Ref<Record<string, any>>,
36
+ coreStore: any,
37
+ route: any
38
+ ) {
39
+ validatingMode.value = true;
40
+ await nextTick();
41
+ //wait for response for the user validation function if it exists
42
+ while (1) {
43
+ if (resourceFormRef.value?.isValidating) {
44
+ await new Promise(resolve => setTimeout(resolve, 100));
45
+ } else {
46
+ break;
47
+ }
48
+ }
49
+ if (!isValid.value) {
50
+ await nextTick();
51
+ scrollToInvalidField(resourceFormRef, t);
52
+ return;
53
+ } else {
54
+ validatingMode.value = false;
55
+ }
56
+
57
+ saving.value = true;
58
+ const interceptorsResult = await runSaveInterceptors({
59
+ action: viewMode,
60
+ values: record.value,
61
+ resource: coreStore.resource,
62
+ resourceId: route.params.resourceId as string,
63
+ });
64
+ return interceptorsResult;
65
+ }
@@ -1,2 +1,3 @@
1
1
  export * from './utils';
2
- export * from './listUtils';
2
+ export * from './listUtils';
3
+ export * from './createEditUtils';
@@ -8,7 +8,7 @@ import { Dropdown } from 'flowbite';
8
8
  import adminforth, { useAdminforth } from '../adminforth';
9
9
  import sanitizeHtml from 'sanitize-html'
10
10
  import debounce from 'debounce';
11
- import type { AdminForthResourceColumnInputCommon, Predicate } from '@/types/Common';
11
+ import type { AdminForthActionFront, AdminForthResourceColumnInputCommon, AdminForthResourceCommon, Predicate } from '@/types/Common';
12
12
  import { i18nInstance } from '../i18n'
13
13
  import { useI18n } from 'vue-i18n';
14
14
  import { onBeforeRouteLeave } from 'vue-router';
@@ -101,11 +101,13 @@ export async function callAdminForthApi(
101
101
  }
102
102
  }
103
103
 
104
- export function formatComponent(component: AdminForthComponentDeclaration): AdminForthComponentDeclarationFull {
104
+ export function formatComponent(component: AdminForthComponentDeclaration | undefined): AdminForthComponentDeclarationFull {
105
105
  if (typeof component === 'string') {
106
106
  return { file: component, meta: {} };
107
- } else {
107
+ } else if (typeof component === 'object') {
108
108
  return { file: component.file, meta: component.meta };
109
+ } else {
110
+ return { file: '', meta: {} };
109
111
  }
110
112
  }
111
113
 
@@ -191,7 +193,8 @@ export function applyRegexValidation(value: any, validation: ValidationObject[]
191
193
  if ( validation?.length ) {
192
194
  const validationArray = validation;
193
195
  for (let i = 0; i < validationArray.length; i++) {
194
- if (validationArray[i].regExp) {
196
+ const regExpPattern = validationArray[i].regExp;
197
+ if (regExpPattern) {
195
198
  let flags = '';
196
199
  if (validationArray[i].caseSensitive) {
197
200
  flags += 'i';
@@ -203,7 +206,7 @@ export function applyRegexValidation(value: any, validation: ValidationObject[]
203
206
  flags += 'g';
204
207
  }
205
208
 
206
- const regExp = new RegExp(validationArray[i].regExp, flags);
209
+ const regExp = new RegExp(regExpPattern, flags);
207
210
  if (value === undefined || value === null) {
208
211
  value = '';
209
212
  }
@@ -701,7 +704,7 @@ export async function executeCustomAction({
701
704
  onError,
702
705
  setLoadingState,
703
706
  }: {
704
- actionId: string | number,
707
+ actionId: string | number | undefined,
705
708
  resourceId: string,
706
709
  recordId: string | number,
707
710
  extra?: Record<string, any>,
@@ -766,8 +769,9 @@ export async function executeCustomBulkAction({
766
769
  onError,
767
770
  setLoadingState,
768
771
  confirmMessage,
772
+ resource,
769
773
  }: {
770
- actionId: string | number,
774
+ actionId: string | number | undefined,
771
775
  resourceId: string,
772
776
  recordIds: (string | number)[],
773
777
  extra?: Record<string, any>,
@@ -775,6 +779,7 @@ export async function executeCustomBulkAction({
775
779
  onError?: (error: string) => void,
776
780
  setLoadingState?: (loading: boolean) => void,
777
781
  confirmMessage?: string,
782
+ resource?: AdminForthResourceCommon,
778
783
  }): Promise<any> {
779
784
  if (!recordIds || recordIds.length === 0) {
780
785
  if (onError) {
@@ -796,7 +801,38 @@ export async function executeCustomBulkAction({
796
801
  setLoadingState?.(true);
797
802
 
798
803
  try {
799
- // Execute action for all records in parallel using Promise.all
804
+ const action = resource?.options?.actions?.find((a: any) => a.id === actionId) as AdminForthActionFront | undefined;
805
+
806
+ if (action?.hasBulkHandler && action?.showIn?.bulkButton) {
807
+ const result = await callAdminForthApi({
808
+ path: '/start_custom_bulk_action',
809
+ method: 'POST',
810
+ body: {
811
+ resourceId,
812
+ actionId,
813
+ recordIds,
814
+ extra: extra || {},
815
+ }
816
+ });
817
+
818
+ if (result?.ok) {
819
+ if (onSuccess) {
820
+ await onSuccess([result]);
821
+ }
822
+ return { ok: true, results: [result] };
823
+ }
824
+
825
+ if (result?.error) {
826
+ if (onError) {
827
+ onError(result.error);
828
+ }
829
+ return { error: result.error };
830
+ }
831
+
832
+ return result;
833
+ }
834
+
835
+ // Per-record parallel calls (legacy path)
800
836
  const results = await Promise.all(
801
837
  recordIds.map(recordId =>
802
838
  callAdminForthApi({
@@ -811,7 +847,6 @@ export async function executeCustomBulkAction({
811
847
  })
812
848
  )
813
849
  );
814
-
815
850
  const lastResult = results[results.length - 1];
816
851
  if (lastResult?.redirectUrl) {
817
852
  if (lastResult.redirectUrl.includes('target=_blank')) {
@@ -1,2 +1,3 @@
1
1
  export * from './utils/utils';
2
- export * from './utils/listUtils';
2
+ export * from './utils/listUtils';
3
+ export * from './utils/createEditUtils';