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.
- package/commands/callTsProxy.js +10 -5
- package/commands/proxy.ts +18 -10
- package/dist/commands/proxy.js +14 -10
- package/dist/commands/proxy.js.map +1 -1
- package/dist/modules/configValidator.d.ts.map +1 -1
- package/dist/modules/configValidator.js +16 -9
- package/dist/modules/configValidator.js.map +1 -1
- package/dist/modules/restApi.d.ts.map +1 -1
- package/dist/modules/restApi.js +77 -4
- package/dist/modules/restApi.js.map +1 -1
- package/dist/modules/styles.js +1 -1
- package/dist/servers/express.d.ts.map +1 -1
- package/dist/servers/express.js +4 -0
- package/dist/servers/express.js.map +1 -1
- package/dist/spa/package-lock.json +41 -0
- package/dist/spa/package.json +3 -0
- package/dist/spa/pnpm-lock.yaml +38 -0
- package/dist/spa/src/App.vue +77 -76
- package/dist/spa/src/afcl/Button.vue +2 -3
- package/dist/spa/src/afcl/Dialog.vue +1 -1
- package/dist/spa/src/afcl/Input.vue +1 -1
- package/dist/spa/src/afcl/Select.vue +8 -2
- package/dist/spa/src/afcl/Spinner.vue +1 -1
- package/dist/spa/src/components/CallActionWrapper.vue +1 -1
- package/dist/spa/src/components/ColumnValueInput.vue +16 -3
- package/dist/spa/src/components/ColumnValueInputWrapper.vue +25 -2
- package/dist/spa/src/components/CustomRangePicker.vue +16 -14
- package/dist/spa/src/components/Filters.vue +95 -63
- package/dist/spa/src/components/GroupsTable.vue +9 -6
- package/dist/spa/src/components/MenuLink.vue +2 -2
- package/dist/spa/src/components/ResourceForm.vue +101 -7
- package/dist/spa/src/components/ResourceListTable.vue +13 -7
- package/dist/spa/src/components/ShowTable.vue +1 -1
- package/dist/spa/src/components/Sidebar.vue +2 -2
- package/dist/spa/src/components/ThreeDotsMenu.vue +19 -9
- package/dist/spa/src/components/ValueRenderer.vue +1 -0
- package/dist/spa/src/spa_types/core.ts +32 -0
- package/dist/spa/src/stores/filters.ts +16 -12
- package/dist/spa/src/types/Back.ts +20 -4
- package/dist/spa/src/types/Common.ts +24 -5
- package/dist/spa/src/types/adapters/StorageAdapter.ts +12 -0
- package/dist/spa/src/utils/createEditUtils.ts +65 -0
- package/dist/spa/src/utils/index.ts +2 -1
- package/dist/spa/src/utils/utils.ts +44 -9
- package/dist/spa/src/utils.ts +2 -1
- package/dist/spa/src/views/CreateView.vue +22 -49
- package/dist/spa/src/views/EditView.vue +21 -39
- package/dist/spa/src/views/ListView.vue +22 -32
- package/dist/spa/src/views/ShowView.vue +67 -12
- package/dist/types/Back.d.ts +20 -15
- package/dist/types/Back.d.ts.map +1 -1
- package/dist/types/Back.js.map +1 -1
- package/dist/types/Common.d.ts +31 -5
- package/dist/types/Common.d.ts.map +1 -1
- package/dist/types/Common.js.map +1 -1
- package/dist/types/adapters/StorageAdapter.d.ts +11 -0
- package/dist/types/adapters/StorageAdapter.d.ts.map +1 -1
- 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
|
|
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<
|
|
7
|
-
const sort: 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:
|
|
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:
|
|
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.
|
|
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:
|
|
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
|
-
|
|
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<
|
|
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<
|
|
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:
|
|
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
|
|
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
|
|
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
|
|
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
|
+
}
|
|
@@ -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
|
-
|
|
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(
|
|
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
|
-
|
|
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')) {
|
package/dist/spa/src/utils.ts
CHANGED