adminforth 1.3.17 → 1.3.19
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.
|
@@ -2,7 +2,10 @@ import { error } from 'console';
|
|
|
2
2
|
import { IAdminForthFilter, IAdminForthSort, IOperationalResource, IAdminForthDataSourceConnectorBase, AdminForthResource, IAdminForth } from '../types/AdminForthConfig.js';
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
function filtersIfFilter(filter: IAdminForthFilter | IAdminForthFilter[]): IAdminForthFilter[] {
|
|
5
|
+
function filtersIfFilter(filter: IAdminForthFilter | IAdminForthFilter[] | undefined): IAdminForthFilter[] {
|
|
6
|
+
if (!filter) {
|
|
7
|
+
return [];
|
|
8
|
+
}
|
|
6
9
|
return (Array.isArray(filter) ? filter : [filter]) as IAdminForthFilter[];
|
|
7
10
|
}
|
|
8
11
|
|
|
@@ -57,7 +60,7 @@ export default class OperationalResource implements IOperationalResource {
|
|
|
57
60
|
return data;
|
|
58
61
|
}
|
|
59
62
|
|
|
60
|
-
async count(filter: IAdminForthFilter | IAdminForthFilter[]): Promise<number> {
|
|
63
|
+
async count(filter: IAdminForthFilter | IAdminForthFilter[] | undefined): Promise<number> {
|
|
61
64
|
return await this.dataConnector.getCount({
|
|
62
65
|
resource: this.resourceConfig,
|
|
63
66
|
filters: filtersIfFilter(filter),
|
package/modules/restApi.ts
CHANGED
|
@@ -318,6 +318,7 @@ export default class AdminForthRestAPI {
|
|
|
318
318
|
method: 'POST',
|
|
319
319
|
path: '/get_resource_data',
|
|
320
320
|
handler: async ({ body, adminUser }) => {
|
|
321
|
+
|
|
321
322
|
const { resourceId, source } = body;
|
|
322
323
|
if (['show', 'list'].includes(source) === false) {
|
|
323
324
|
return { error: 'Invalid source, should be list or show' };
|
package/package.json
CHANGED
|
@@ -3,11 +3,13 @@
|
|
|
3
3
|
<div class="relative overflow-x-auto shadow-listTableShadow dark:shadow-darkListTableShadow overflow-y-hidden"
|
|
4
4
|
:class="{'rounded-default': !noRoundings}"
|
|
5
5
|
>
|
|
6
|
-
|
|
7
6
|
<!-- skelet loader -->
|
|
8
7
|
<div role="status" v-if="!resource || !resource.columns"
|
|
9
8
|
class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
|
|
10
|
-
|
|
9
|
+
|
|
10
|
+
<div role="status" class="max-w-sm animate-pulse">
|
|
11
|
+
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
|
|
12
|
+
</div>
|
|
11
13
|
</div>
|
|
12
14
|
|
|
13
15
|
<table v-else class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
|
|
@@ -23,9 +25,9 @@
|
|
|
23
25
|
|
|
24
26
|
<th v-for="c in columnsListed" scope="col" class="px-6 py-3">
|
|
25
27
|
|
|
26
|
-
<div @click="() => c.sortable && onSortButtonClick(c.name)"
|
|
28
|
+
<div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)"
|
|
29
|
+
class="flex items-center " :class="{'cursor-pointer':c.sortable}">
|
|
27
30
|
{{ c.label }}
|
|
28
|
-
|
|
29
31
|
|
|
30
32
|
<div v-if="c.sortable"
|
|
31
33
|
:style="{ 'color':ascArr.includes(c.name)?'green':descArr.includes(c.name)?'red':'currentColor'}">
|
|
@@ -56,109 +58,113 @@
|
|
|
56
58
|
</tr>
|
|
57
59
|
</thead>
|
|
58
60
|
<tbody>
|
|
59
|
-
<SkeleteLoader
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
<div
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
61
|
+
<SkeleteLoader
|
|
62
|
+
v-if="!rows"
|
|
63
|
+
:columns="resource?.columns.filter(c => c.showIn.includes('list')).length + 2"
|
|
64
|
+
:rows="3"
|
|
65
|
+
/>
|
|
66
|
+
<tr v-else-if="rows.length === 0" class="bg-lightListTable dark:bg-darkListTable dark:border-darkListTableBorder">
|
|
67
|
+
<td :colspan="resource?.columns.length + 2">
|
|
68
|
+
|
|
69
|
+
<div id="toast-simple"
|
|
70
|
+
class=" mx-auto my-5 flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 divide-x rtl:divide-x-reverse divide-gray-200 dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800"
|
|
71
|
+
role="alert">
|
|
72
|
+
<IconInboxOutline class="w-6 h-6 text-gray-500 dark:text-gray-400"/>
|
|
73
|
+
<div class="ps-4 text-sm font-normal">No items here yet</div>
|
|
74
|
+
</div>
|
|
72
75
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
76
|
+
</td>
|
|
77
|
+
</tr>
|
|
78
|
+
|
|
79
|
+
<tr @click="onClick($event,row)" v-else v-for="(row, rowI) in rows" :key="`row_${row._primaryKeyValue}`"
|
|
80
|
+
class="bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover cursor-pointer"
|
|
81
|
+
:class="{'border-b': rowI !== rows.length - 1}"
|
|
82
|
+
>
|
|
83
|
+
<td class="w-4 p-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
|
|
84
|
+
<div class="flex items center ">
|
|
85
|
+
<input
|
|
86
|
+
@click="(e)=>{e.stopPropagation()}"
|
|
87
|
+
id="checkbox-table-search-1"
|
|
88
|
+
type="checkbox"
|
|
89
|
+
:checked="checkboxesInternal.includes(row._primaryKeyValue)"
|
|
90
|
+
@change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
|
|
91
|
+
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer">
|
|
92
|
+
<label for="checkbox-table-search-1" class="sr-only">checkbox</label>
|
|
93
|
+
</div>
|
|
94
|
+
</td>
|
|
95
|
+
<td v-for="c in columnsListed" class="px-6 py-4">
|
|
96
|
+
<!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
|
|
97
|
+
<component
|
|
98
|
+
:is="c?.components?.list ? getCustomComponent(c.components.list) : ValueRenderer"
|
|
99
|
+
:meta="c?.components?.list?.meta"
|
|
100
|
+
:column="c"
|
|
101
|
+
:record="row"
|
|
102
|
+
:adminUser="coreStore.adminUser"
|
|
103
|
+
:resource="resource"
|
|
104
|
+
/>
|
|
105
|
+
</td>
|
|
106
|
+
<td class=" items-center px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
|
|
107
|
+
<div class="flex">
|
|
108
|
+
<RouterLink
|
|
109
|
+
v-if="resource.options?.allowedActions.show"
|
|
110
|
+
:to="{
|
|
111
|
+
name: 'resource-show',
|
|
112
|
+
params: {
|
|
113
|
+
resourceId: resource.resourceId,
|
|
114
|
+
primaryKey: row._primaryKeyValue,
|
|
115
|
+
}
|
|
116
|
+
}"
|
|
117
|
+
class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline"
|
|
118
|
+
:data-tooltip-target="`tooltip-show-${rowI}`"
|
|
119
|
+
>
|
|
120
|
+
<IconEyeSolid class="w-5 h-5 me-2"/>
|
|
121
|
+
</RouterLink>
|
|
122
|
+
|
|
123
|
+
<div :id="`tooltip-show-${rowI}`"
|
|
124
|
+
role="tooltip"
|
|
125
|
+
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
|
|
126
|
+
Show item
|
|
127
|
+
<div class="tooltip-arrow" data-popper-arrow></div>
|
|
128
|
+
</div>
|
|
123
129
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
130
|
+
<RouterLink v-if="resource.options?.allowedActions.edit"
|
|
131
|
+
:to="{
|
|
132
|
+
name: 'resource-edit',
|
|
133
|
+
params: {
|
|
134
|
+
resourceId: resource.resourceId,
|
|
135
|
+
primaryKey: row._primaryKeyValue
|
|
136
|
+
}
|
|
137
|
+
}"
|
|
138
|
+
class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline ms-3"
|
|
139
|
+
:data-tooltip-target="`tooltip-edit-${rowI}`"
|
|
140
|
+
>
|
|
141
|
+
<IconPenSolid class="w-5 h-5 me-2"/>
|
|
142
|
+
</RouterLink>
|
|
143
|
+
|
|
144
|
+
<div :id="`tooltip-edit-${rowI}`"
|
|
145
|
+
role="tooltip"
|
|
146
|
+
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
|
|
147
|
+
Edit
|
|
148
|
+
<div class="tooltip-arrow" data-popper-arrow></div>
|
|
149
|
+
</div>
|
|
144
150
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
151
|
+
<button v-if="resource.options?.allowedActions.delete"
|
|
152
|
+
class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline ms-3"
|
|
153
|
+
:data-tooltip-target="`tooltip-delete-${rowI}`"
|
|
154
|
+
@click="deleteRecord(row)"
|
|
155
|
+
>
|
|
156
|
+
<IconTrashBinSolid class="w-5 h-5 me-2"/>
|
|
157
|
+
</button>
|
|
158
|
+
|
|
159
|
+
<div :id="`tooltip-delete-${rowI}`"
|
|
160
|
+
role="tooltip"
|
|
161
|
+
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
|
|
162
|
+
Delete
|
|
163
|
+
<div class="tooltip-arrow" data-popper-arrow></div>
|
|
164
|
+
</div>
|
|
158
165
|
</div>
|
|
159
|
-
|
|
160
|
-
</
|
|
161
|
-
</tr>
|
|
166
|
+
</td>
|
|
167
|
+
</tr>
|
|
162
168
|
</tbody>
|
|
163
169
|
</table>
|
|
164
170
|
</div>
|
|
@@ -237,13 +243,10 @@ import SkeleteLoader from '@/components/SkeleteLoader.vue';
|
|
|
237
243
|
|
|
238
244
|
import {
|
|
239
245
|
IconInboxOutline,
|
|
240
|
-
IconPlusOutline
|
|
241
246
|
} from '@iconify-prerendered/vue-flowbite';
|
|
242
247
|
|
|
243
248
|
import {
|
|
244
|
-
IconBanOutline,
|
|
245
249
|
IconEyeSolid,
|
|
246
|
-
IconFilterOutline,
|
|
247
250
|
IconPenSolid,
|
|
248
251
|
IconTrashBinSolid
|
|
249
252
|
} from '@iconify-prerendered/vue-flowbite';
|
|
@@ -335,10 +338,18 @@ const ascArr = computed(() => sort.value.filter((s) => s.direction === 'asc').ma
|
|
|
335
338
|
const descArr = computed(() => sort.value.filter((s) => s.direction === 'desc').map((s) => s.field));
|
|
336
339
|
|
|
337
340
|
|
|
338
|
-
function onSortButtonClick(field) {
|
|
341
|
+
function onSortButtonClick(event, field) {
|
|
342
|
+
// if ctrl key is pressed, add to sort otherwise sort by this field
|
|
343
|
+
// in any case if field is already in sort, toggle direction
|
|
344
|
+
|
|
339
345
|
const sortIndex = sort.value.findIndex((s) => s.field === field);
|
|
340
346
|
if (sortIndex === -1) {
|
|
341
|
-
|
|
347
|
+
// field is not in sort, add it
|
|
348
|
+
if (event.ctrlKey) {
|
|
349
|
+
sort.value = [...sort.value,{field, direction: 'asc'}];
|
|
350
|
+
} else {
|
|
351
|
+
sort.value = [{field, direction: 'asc'}];
|
|
352
|
+
}
|
|
342
353
|
} else {
|
|
343
354
|
const sortField = sort.value[sortIndex];
|
|
344
355
|
if (sortField.direction === 'asc') {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<tr v-for="c in new Array(props.
|
|
3
|
-
|
|
2
|
+
<tr v-for="c in new Array(props.rows)" class="bg-lightListTable border-b dark:bg-darkListTable dark:border-darkListBorder">
|
|
3
|
+
<td v-for="r in new Array(props.columns)" class="items-center px-6 py-8 cursor-default" >
|
|
4
4
|
<div role="status" class="max-w-sm animate-pulse">
|
|
5
5
|
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
|
|
6
6
|
</div>
|
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
<script setup>
|
|
12
12
|
|
|
13
13
|
const props = defineProps({
|
|
14
|
-
columns:Number,
|
|
15
|
-
rows:Number
|
|
14
|
+
columns: Number,
|
|
15
|
+
rows: Number
|
|
16
16
|
});
|
|
17
17
|
|
|
18
18
|
|