Skip to content

Commit 5fe0108

Browse files
ivictborivictbor
authored
Merge pull request #7 from devforth/feature/AdminForth/985/from-plugin-lets-register-show
feat: add edit history to the three dots menu in the list view
2 parents 3146ea3 + 0476be8 commit 5fe0108

File tree

2 files changed

+100
-52
lines changed

2 files changed

+100
-52
lines changed

‎custom/RelatedLogsLink.vue‎

Lines changed: 52 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,72 @@
11
<template>
2-
<div class="pt-2 flex justify-end">
3-
<RouterLink :to="to" class="text-lightPrimary hover:underline dark:text-darkPrimary break-all ">
4-
<IconClockSolid class="inline w-4 h-4 me-1 mb-0.5"/>
5-
Edits History
6-
</RouterLink>
7-
</div>
2+
<RouterLink
3+
v-if="to"
4+
:to="to"
5+
class="flex items-center w-full gap-2
6+
text-left text-sm leading-5
7+
text-black hover:bg-gray-100
8+
dark:text-gray-200 dark:hover:bg-gray-700"
9+
>
10+
<IconClockSolid
11+
class="w-4 h-4 shrink-0 text-gray-500 dark:text-gray-400"
12+
/>
13+
<span class="whitespace-nowrap">
14+
{{ meta?.title || 'Edit History' }}
15+
</span>
16+
</RouterLink>
817
</template>
18+
19+
920
<script setup lang="ts">
1021
import { computed } from 'vue';
22+
import { useRoute } from 'vue-router';
1123
import { IconClockSolid } from '@iconify-prerendered/vue-flowbite';
1224
1325
const props = defineProps<{
14-
column: any;
1526
record: any;
1627
meta: any;
1728
resource: any;
18-
adminUser: any;
1929
}>();
2030
31+
const route = useRoute();
32+
33+
console.log('Current Route Name:', route.name);
34+
2135
const to = computed(() => {
2236
try {
23-
const resourceIdCol = props.meta.resourceColumns.resourceIdColumnName;
24-
const recordIdCol = props.meta.resourceColumns.resourceRecordIdColumnName;
25-
2637
const auditResourceId = props.meta?.auditLogResourceId || 'audit_log';
27-
const isAuditLogResource = props.resource?.resourceId === auditResourceId;
28-
29-
let resourceId: any;
30-
let recordId: any;
31-
if (isAuditLogResource) {
32-
resourceId = props.record?.[resourceIdCol];
33-
recordId = props.record?.[recordIdCol];
34-
} else {
35-
const pkColName = props.resource?.columns?.find((c: any) => c.primaryKey)?.name;
36-
resourceId = props.resource?.resourceId;
37-
recordId = pkColName ? props.record?.[pkColName] : undefined;
38+
const resourceColumns = props.meta?.resourceColumns;
39+
40+
if (!resourceColumns) return null;
41+
42+
const pkName = props.meta?.pkName
43+
44+
const isShowPage = route.name === 'resource-show' || route.name === 'resource-edit';
45+
46+
let recordId = props.record?.[pkName];
47+
48+
if (!recordId && isShowPage) {
49+
recordId = route.params.primaryKey || route.params.id;
3850
}
3951
52+
const currentResourceId = props.resource?.resourceId || route.params.resourceId;
53+
54+
const recordIdCol = resourceColumns.resourceRecordIdColumnName;
55+
const resourceIdCol = resourceColumns.resourceIdColumnName;
56+
const createdCol = resourceColumns.resourceCreatedColumnName;
57+
4058
const query: Record<string, string> = {};
41-
query['sort'] = `${props.meta.resourceColumns.resourceCreatedColumnName}__desc`;
42-
if (recordId) query[`filter__${recordIdCol}__ilike`] = JSON.stringify(String(recordId));
43-
if (resourceId) query[`filter__${resourceIdCol}__eq`] = JSON.stringify(String(resourceId));
59+
60+
if (createdCol) {
61+
query['sort'] = `${createdCol}__desc`;
62+
}
63+
if (recordId) {
64+
query[`filter__${recordIdCol}__eq`] = JSON.stringify(String(recordId));
65+
}
66+
67+
if (currentResourceId) {
68+
query[`filter__${resourceIdCol}__eq`] = JSON.stringify(String(currentResourceId));
69+
}
4470
4571
return {
4672
name: 'resource-list',
@@ -52,5 +78,4 @@ const to = computed(() => {
5278
return { name: 'resource-list', params: { resourceId: 'audit_log' } } as any;
5379
}
5480
});
55-
</script>
56-
81+
</script>

‎index.ts‎

Lines changed: 48 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ export default class AuditLogPlugin extends AdminForthPlugin {
146146
}
147147

148148

149-
modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
149+
modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
150150
super.modifyResourceConfig(adminforth, resourceConfig);
151151
this.adminforth = adminforth;
152152
const auditLogResourceData = this.adminforth.config.resources.find((r) => r.resourceId === resourceConfig.resourceId);
@@ -161,19 +161,36 @@ export default class AuditLogPlugin extends AdminForthPlugin {
161161
}
162162

163163
resource.options = resource.options || {} as any;
164-
resource.options.pageInjections = resource.options.pageInjections || {} as any;
165-
resource.options.pageInjections.show = resource.options.pageInjections.show || {} as any;
166-
if (!resource.options.pageInjections.show.bottom) {
167-
resource.options.pageInjections.show.bottom = [] as any[];
168-
} else if (!Array.isArray(resource.options.pageInjections.show.bottom)) {
169-
resource.options.pageInjections.show.bottom = [resource.options.pageInjections.show.bottom] as any[];
164+
if (!resource.options.actions) {
165+
resource.options.actions = [];
170166
}
171-
{
172-
const bottom = resource.options.pageInjections.show.bottom as any[];
173-
const compDecl = { file: this.componentPath('RelatedLogsLink.vue'), meta: { ...this.options, pluginInstanceId: this.pluginInstanceId, auditLogResourceId: this.auditLogResource, ADMIN_BASE_URL: (this.adminforth as any)?.config?.baseUrlSlashed || '' } } as any;
174-
const already = bottom.some((d: any) => d?.file === compDecl.file);
175-
if (!already) bottom.push(compDecl);
167+
if (resource.resourceId !== this.auditLogResource) {
168+
const historyActionId = 'audit_log_history_btn';
169+
if (!resource.options.actions.find((a) => a.id === historyActionId)) {
170+
resource.options.actions.push({
171+
id: historyActionId,
172+
label: 'Edit History',
173+
showIn: {
174+
show: true,
175+
edit: true,
176+
list: false,
177+
showButton: false,
178+
showThreeDotsMenu: true
179+
},
180+
action: async () => ({ ok: true }),
181+
customComponent: {
182+
file: this.componentPath('RelatedLogsLink.vue'),
183+
meta: {
184+
pluginInstanceId: this.pluginInstanceId,
185+
auditLogResourceId: this.auditLogResource,
186+
resourceColumns: this.options.resourceColumns,
187+
pkName: resource.columns.find((c) => c.primaryKey)?.name || 'id',
188+
title: 'Edit History'
189+
}
190+
}
191+
});
176192
}
193+
}
177194

178195
if (this.auditLogResource === resource.resourceId) {
179196
let diffColumn = resource.columns.find((c) => c.name === this.options.resourceColumns.resourceDataColumnName);
@@ -204,19 +221,6 @@ export default class AuditLogPlugin extends AdminForthPlugin {
204221
columnName: this.options.resourceColumns.resourceCreatedColumnName,
205222
direction: AdminForthSortDirections.desc
206223
}
207-
208-
resource.options = resource.options || {} as any;
209-
resource.options.pageInjections = resource.options.pageInjections || {} as any;
210-
resource.options.pageInjections.show = resource.options.pageInjections.show || {} as any;
211-
if (!resource.options.pageInjections.show.bottom) {
212-
resource.options.pageInjections.show.bottom = [] as any[];
213-
} else if (!Array.isArray(resource.options.pageInjections.show.bottom)) {
214-
resource.options.pageInjections.show.bottom = [resource.options.pageInjections.show.bottom] as any[];
215-
}
216-
const bottom = resource.options.pageInjections.show.bottom as any[];
217-
const compDecl = { file: this.componentPath('RelatedLogsLink.vue'), meta: { ...this.options, pluginInstanceId: this.pluginInstanceId, auditLogResourceId: this.auditLogResource, ADMIN_BASE_URL: (this.adminforth as any)?.config?.baseUrlSlashed || '' } } as any;
218-
const already = bottom.some((d: any) => d?.file === compDecl.file);
219-
if (!already) bottom.push(compDecl);
220224
return;
221225
};
222226

@@ -232,6 +236,25 @@ export default class AuditLogPlugin extends AdminForthPlugin {
232236
return await this.createLogRecord(resource, 'create' as AllowedActionsEnum, record, adminUser, undefined, extra)
233237
});
234238

239+
if (resource.resourceId !== this.auditLogResource) {
240+
resource.options.pageInjections = resource.options.pageInjections || {};
241+
resource.options.pageInjections.list = resource.options.pageInjections.list || {};
242+
243+
if (!resource.options.pageInjections.list.threeDotsDropdownItems) {
244+
resource.options.pageInjections.list.threeDotsDropdownItems = [];
245+
}
246+
247+
(resource.options.pageInjections.list.threeDotsDropdownItems as any[]).push({
248+
file: this.componentPath('RelatedLogsLink.vue'),
249+
meta: {
250+
auditLogResourceId: this.auditLogResource,
251+
resourceColumns: this.options.resourceColumns,
252+
pkName: resource.columns.find((c) => c.primaryKey)?.name || 'id',
253+
title: 'Edit History'
254+
}
255+
});
256+
}
257+
235258
})
236259
columnToModify.enum = existingResources;
237260
}

0 commit comments

Comments
 (0)