adminforth 1.3.56-next.13 → 1.3.56-next.15
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/dist/modules/styles.js +2 -2
- package/dist/modules/styles.js.map +1 -1
- package/dist/spa/index.html +1 -1
- package/dist/spa/src/App.vue +7 -16
- package/dist/spa/src/components/AfTooltip.vue +43 -0
- package/dist/spa/src/components/BreadcrumbsWithButtons.vue +3 -4
- package/dist/spa/src/components/ResourceForm.vue +17 -16
- package/dist/spa/src/components/ResourceListTable.vue +121 -124
- package/dist/spa/src/renderers/CountryFlag.vue +13 -21
- package/dist/spa/src/stores/user.ts +0 -1
- package/dist/spa/src/views/EditView.vue +1 -1
- package/dist/spa/src/views/ListView.vue +1 -6
- package/dist/spa/src/views/ResourceParent.vue +30 -2
- package/dist/spa/src/views/ShowView.vue +3 -3
- package/package.json +1 -1
package/dist/modules/styles.js
CHANGED
|
@@ -25,8 +25,8 @@ export const styles = () => ({
|
|
|
25
25
|
lightSidebarHeading: "alias:lightSidebarText opacity:0.3", // sidebar heading
|
|
26
26
|
lightList: "#FFFFFF", // list view background
|
|
27
27
|
lightListTable: "#FFFFFF", // list view table background
|
|
28
|
-
lightListTableHeading: "
|
|
29
|
-
lightListTableHeadingText: "
|
|
28
|
+
lightListTableHeading: "#f5f5f8", // list view table heading
|
|
29
|
+
lightListTableHeadingText: "alias:lightListTableHeading inverse", // list view table heading text
|
|
30
30
|
lightListTableText: "#333333", // list view table text
|
|
31
31
|
lightListTableRowHover: "rgb(249 250 251)", // list view row hover
|
|
32
32
|
lightListBreadcrumbsText: "#666666", // list view breadcrumbs text
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../modules/styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,CAAC;IAC3B,MAAM,EAAE;QACN,SAAS,EAAE,SAAS,EAAE,kBAAkB;QAExC,YAAY,EAAE,SAAS,EAAE,gBAAgB;QACzC,oBAAoB,EAAE,4BAA4B,EAAE,yBAAyB;QAC7E,mBAAmB,EAAE,iCAAiC,EAAE,wBAAwB;QAEhF,WAAW,EAAE,SAAS,EAAE,oBAAoB;QAC5C,iBAAiB,EAAE,kBAAkB,EAAE,SAAS;QAChD,eAAe,EAAE,SAAS,EAAE,cAAc;QAC1C,oBAAoB,EAAE,8BAA8B,EAAE,oBAAoB;QAC1E,qBAAqB,EAAE,8BAA8B,EAAE,qBAAqB;QAC5E,gBAAgB,EAAE,mCAAmC,EAAE,eAAe;QACtE,qBAAqB,EAAE,4BAA4B,EAAE,oBAAoB;QACzE,mBAAmB,EAAE,oBAAoB,EAAE,eAAe;QAE1D,YAAY,EAAE,SAAS,EAAE,qBAAqB;QAC9C,kBAAkB,EAAE,qCAAqC,EAAE,uBAAuB;QAClF,qBAAqB,EAAE,qCAAqC,EAAE,0BAA0B;QACxF,sBAAsB,EAAE,qCAAqC,EAAE,2BAA2B;QAC1F,gBAAgB,EAAE,SAAS,EAAE,yBAAyB;QACtD,qBAAqB,EAAE,+BAA+B,EAAE,+BAA+B;QACvF,sBAAsB,EAAE,+BAA+B,EAAE,gCAAgC;QACzF,mBAAmB,EAAE,oCAAoC,EAAE,kBAAkB;QAC7E,iBAAiB,EAAE,oCAAoC,EAAE,0BAA0B;QACnF,sBAAsB,EAAE,wBAAwB,EAAE,gCAAgC;QAClF,mBAAmB,EAAE,oCAAoC,EAAE,kBAAkB;QAE7E,SAAS,EAAE,SAAS,EAAE,uBAAuB;QAC7C,cAAc,EAAE,SAAS,EAAE,6BAA6B;QACxD,qBAAqB,EAAE,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../modules/styles.ts"],"names":[],"mappings":"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"}
|
package/dist/spa/index.html
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
</script> -->
|
|
17
17
|
|
|
18
18
|
</head>
|
|
19
|
-
<body class="min-h-screen flex flex-
|
|
19
|
+
<body class="min-h-screen flex flex-col">
|
|
20
20
|
<div id="app" class="grow bg-lightHtml dark:bg-darkHtml w-full"></div>
|
|
21
21
|
<script type="module" src="/src/main.ts"></script>
|
|
22
22
|
</body>
|
package/dist/spa/src/App.vue
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div v-if="defaultLayout" >
|
|
3
|
-
|
|
4
3
|
<nav
|
|
5
4
|
v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
|
|
6
|
-
class="fixed h-14 top-0 z-20 w-full
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
class="fixed h-14 top-0 z-20 w-full border-b shadow-sm bg-lightNavbar shadow-headerShadow dark:bg-darkNavbar dark:border-darkSidebarDevider"
|
|
6
|
+
>
|
|
7
|
+
<div class="px-3 lg:px-5 lg:pl-3 flex items-center justify-between h-full w-full" >
|
|
9
8
|
<div class="flex items-center justify-start rtl:justify-end">
|
|
10
9
|
<button @click="sideBarOpen = !sideBarOpen"
|
|
11
10
|
type="button" class="inline-flex items-center p-2 text-sm rounded-lg sm:hidden hover:bg-lightSidebarItemHover focus:outline-none focus:ring-2 focus:ring-lightSidebarDevider dark:text-darkSidebarIcons dark:hover:bg-darkSidebarHover dark:focus:ring-lightSidebarDevider">
|
|
@@ -14,10 +13,8 @@
|
|
|
14
13
|
<path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
|
|
15
14
|
</svg>
|
|
16
15
|
</button>
|
|
17
|
-
|
|
18
16
|
</div>
|
|
19
17
|
<div class="flex items-center">
|
|
20
|
-
|
|
21
18
|
<component
|
|
22
19
|
v-for="c in coreStore?.config?.globalInjections?.header || []"
|
|
23
20
|
:is="getCustomComponent(c)"
|
|
@@ -26,16 +23,12 @@
|
|
|
26
23
|
/>
|
|
27
24
|
|
|
28
25
|
<div class="flex items-center ms-3 ">
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
26
|
<span
|
|
33
27
|
@click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-lightHtml dark:text-darkSidebarTextHover dark:hover:bg-darkHtml dark:hover:text-darkSidebarTextActive" role="menuitem">
|
|
34
28
|
<IconMoonSolid class="w-5 h-5 text-blue-300" v-if="coreStore.theme !== 'dark'" />
|
|
35
29
|
<IconSunSolid class="w-5 h-5 text-yellow-300" v-else />
|
|
36
30
|
</span>
|
|
37
31
|
<div>
|
|
38
|
-
|
|
39
32
|
<button type="button" class="flex text-sm bg- rounded-full focus:ring-4 focus:ring-lightSidebarDevider dark:focus:ring-darkSidebarDevider dark:bg-" aria-expanded="false" data-dropdown-toggle="dropdown-user">
|
|
40
33
|
<span class="sr-only">Open user menu</span>
|
|
41
34
|
<svg class="w-8 h-8 text-lightNavbarIcons dark:text-darkNavbarIcons" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
|
|
@@ -43,6 +36,7 @@
|
|
|
43
36
|
</svg>
|
|
44
37
|
</button>
|
|
45
38
|
</div>
|
|
39
|
+
|
|
46
40
|
<div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:shadow-black dark:bg-darkSidebar dark:divide-darkSidebarDevider dark:shadow-black" id="dropdown-user">
|
|
47
41
|
<div class="px-4 py-3" role="none">
|
|
48
42
|
<p class="text-sm text-gray-900 dark:text-darkNavbarText" role="none" v-if="coreStore.userFullname">
|
|
@@ -52,8 +46,8 @@
|
|
|
52
46
|
{{ coreStore.username }}
|
|
53
47
|
</p>
|
|
54
48
|
</div>
|
|
49
|
+
|
|
55
50
|
<ul class="py-1" role="none">
|
|
56
|
-
|
|
57
51
|
<li v-for="c in coreStore?.config?.globalInjections?.userMenu || []" >
|
|
58
52
|
<component
|
|
59
53
|
:is="getCustomComponent(c)"
|
|
@@ -67,18 +61,15 @@
|
|
|
67
61
|
</ul>
|
|
68
62
|
</div>
|
|
69
63
|
</div>
|
|
70
|
-
</div>
|
|
71
64
|
</div>
|
|
72
65
|
</div>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
66
|
+
</nav>
|
|
76
67
|
|
|
77
68
|
<aside
|
|
78
69
|
|
|
79
70
|
v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
|
|
80
71
|
|
|
81
|
-
id="logo-lightSidebar" class="fixed
|
|
72
|
+
id="logo-lightSidebar" class="fixed border-none top-0 left-0 z-20 w-64 h-screen transition-transform bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder sm:translate-x-0 dark:bg-darkSidebar dark:border-darkSidebarBorder"
|
|
82
73
|
:class="{ '-translate-x-full': !sideBarOpen, 'transform-none': sideBarOpen }"
|
|
83
74
|
aria-label="Sidebar"
|
|
84
75
|
>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div ref="triggerEl" class="inline-flex items-center">
|
|
3
|
+
<slot></slot>
|
|
4
|
+
</div>
|
|
5
|
+
<div
|
|
6
|
+
role="tooltip"
|
|
7
|
+
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"
|
|
8
|
+
ref="tooltip"
|
|
9
|
+
>
|
|
10
|
+
<slot name="tooltip"></slot>
|
|
11
|
+
<div class="tooltip-arrow" data-popper-arrow></div>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script setup lang="ts">
|
|
17
|
+
import { ref, onMounted, nextTick, onUnmounted, type Ref } from 'vue';
|
|
18
|
+
import { Tooltip } from 'flowbite';
|
|
19
|
+
|
|
20
|
+
const triggerEl = ref(null);
|
|
21
|
+
const tooltip = ref(null);
|
|
22
|
+
|
|
23
|
+
const tp: Ref<Tooltip|null> = ref(null);
|
|
24
|
+
|
|
25
|
+
onMounted(async () => {
|
|
26
|
+
//await one tick when all is mounted
|
|
27
|
+
await nextTick();
|
|
28
|
+
tp.value = new Tooltip(
|
|
29
|
+
tooltip.value,
|
|
30
|
+
triggerEl.value,
|
|
31
|
+
{
|
|
32
|
+
placement: 'bottom',
|
|
33
|
+
triggerType: 'hover',
|
|
34
|
+
},
|
|
35
|
+
);
|
|
36
|
+
})
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
onUnmounted(() => {
|
|
40
|
+
//destroy tooltip
|
|
41
|
+
tp.value?.destroy();
|
|
42
|
+
})
|
|
43
|
+
</script>
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
-
<div class="flex items-center justify-between mb-3 flex-wrap gap-y-2">
|
|
3
|
+
<div class="flex items-center justify-between mb-3 flex-wrap gap-y-2 gap-2">
|
|
4
4
|
<Breadcrumbs />
|
|
5
5
|
<div class="flex items-center space-x-1 flex-wrap gap-y-1">
|
|
6
6
|
<slot></slot>
|
|
7
7
|
</div>
|
|
8
8
|
</div>
|
|
9
|
-
<div class="flex items-center justify-between mb-3 flex-wrap gap-y-2">
|
|
10
|
-
<div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert"
|
|
11
|
-
v-if="coreStore.resourceColumnsError">
|
|
9
|
+
<div class="flex items-center justify-between mb-3 flex-wrap gap-y-2 gap-2" v-if="coreStore.resourceColumnsError">
|
|
10
|
+
<div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
|
|
12
11
|
<span class="font-medium">Error!</span> {{ coreStore.resourceColumnsError }}
|
|
13
12
|
</div>
|
|
14
13
|
</div>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
2
|
+
<div>
|
|
3
3
|
<div
|
|
4
|
-
class="relative shadow-resourseFormShadow dark:shadow-darkResourseFormShadow sm:rounded-lg dark:shadow-2xl
|
|
4
|
+
class="relative shadow-resourseFormShadow dark:shadow-darkResourseFormShadow sm:rounded-lg dark:shadow-2xl"
|
|
5
5
|
>
|
|
6
6
|
<form autocomplete="off" @submit.prevent>
|
|
7
|
-
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 ">
|
|
7
|
+
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default overflow-hidden">
|
|
8
8
|
<thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400 block md:table-row-group">
|
|
9
9
|
<tr>
|
|
10
10
|
<th scope="col" class="px-6 py-3 hidden md:table-cell">
|
|
@@ -21,19 +21,22 @@
|
|
|
21
21
|
class="bg-ligftForm dark:bg-gray-800 dark:border-gray-700 block md:table-row"
|
|
22
22
|
:class="{ 'border-b': i !== editableColumns.length - 1 }"
|
|
23
23
|
>
|
|
24
|
-
<td class="px-6 py-4
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
<td class="px-6 py-4 whitespace-nowrap flex items-center block md:table-cell"> <!--align-top-->
|
|
25
|
+
<span class="flex items-center gap-1">
|
|
26
|
+
{{ column.label }}
|
|
27
|
+
<AfTooltip v-if="column.required[mode]">
|
|
28
|
+
|
|
27
29
|
<IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4"
|
|
28
|
-
|
|
30
|
+
:class="(columnError(column) && validating) ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500'"
|
|
29
31
|
/>
|
|
32
|
+
|
|
33
|
+
<template #tooltip>
|
|
34
|
+
Required field
|
|
35
|
+
</template>
|
|
36
|
+
</AfTooltip>
|
|
30
37
|
</span>
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
class="ml-1 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">
|
|
34
|
-
Required field
|
|
35
|
-
<div class="tooltip-arrow" data-popper-arrow></div>
|
|
36
|
-
</div>
|
|
38
|
+
|
|
39
|
+
|
|
37
40
|
</td>
|
|
38
41
|
<td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap relative block md:table-cell">
|
|
39
42
|
<template v-if="column?.components?.[props.source]?.file">
|
|
@@ -156,9 +159,9 @@ import Dropdown from '@/components/Dropdown.vue';
|
|
|
156
159
|
import { applyRegexValidation, callAdminForthApi, getCustomComponent } from '@/utils';
|
|
157
160
|
import { IconExclamationCircleSolid, IconEyeSlashSolid, IconEyeSolid } from '@iconify-prerendered/vue-flowbite';
|
|
158
161
|
import { computedAsync } from '@vueuse/core';
|
|
159
|
-
import { initFlowbite } from 'flowbite';
|
|
160
162
|
import { computed, onMounted, ref, watch } from 'vue';
|
|
161
163
|
import { useRouter, useRoute } from 'vue-router';
|
|
164
|
+
import AfTooltip from "./AfTooltip.vue";
|
|
162
165
|
|
|
163
166
|
const router = useRouter();
|
|
164
167
|
const route = useRoute();
|
|
@@ -281,9 +284,7 @@ onMounted(() => {
|
|
|
281
284
|
currentValues.value[column.name] = JSON.stringify(currentValues.value[column.name], null, 2);
|
|
282
285
|
}
|
|
283
286
|
});
|
|
284
|
-
console.log('currentValues', currentValues.value);
|
|
285
287
|
|
|
286
|
-
initFlowbite();
|
|
287
288
|
emit('update:isValid', isValid.value);
|
|
288
289
|
});
|
|
289
290
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<!-- table -->
|
|
3
|
-
<div class="relative shadow-listTableShadow dark:shadow-darkListTableShadow overflow-
|
|
3
|
+
<div class="relative shadow-listTableShadow dark:shadow-darkListTableShadow overflow-auto "
|
|
4
4
|
:class="{'rounded-default': !noRoundings}"
|
|
5
5
|
>
|
|
6
6
|
<!-- skelet loader -->
|
|
@@ -11,53 +11,55 @@
|
|
|
11
11
|
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
|
|
12
12
|
</div>
|
|
13
13
|
</div>
|
|
14
|
+
<table v-else class=" w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
|
|
15
|
+
|
|
16
|
+
<tbody>
|
|
17
|
+
|
|
18
|
+
<!-- table header -->
|
|
19
|
+
<tr class="t-header sticky z-1 top-0 text-xs bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
|
|
20
|
+
<td scope="col" class="p-4">
|
|
21
|
+
<div v-if="rows && rows.length" class="flex items-center">
|
|
22
|
+
<input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()"
|
|
23
|
+
class="w-4 h-4 cursor-pointer text-blue-600 bg-gray-100 border-gray-300 rounded
|
|
24
|
+
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">
|
|
25
|
+
<label for="checkbox-all-search" class="sr-only">checkbox</label>
|
|
26
|
+
</div>
|
|
27
|
+
</td>
|
|
28
|
+
|
|
29
|
+
<td v-for="c in columnsListed" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
|
|
30
|
+
|
|
31
|
+
<div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)"
|
|
32
|
+
class="flex items-center " :class="{'cursor-pointer':c.sortable}">
|
|
33
|
+
{{ c.label }}
|
|
34
|
+
|
|
35
|
+
<div v-if="c.sortable">
|
|
36
|
+
<svg v-if="ascArr.includes(c.name) || descArr.includes(c.name)" class="w-3 h-3 ms-1.5"
|
|
37
|
+
fill='currentColor'
|
|
38
|
+
:class="{'rotate-180':descArr.includes(c.name)}" viewBox="0 0 24 24">
|
|
39
|
+
<path
|
|
40
|
+
d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847"/>
|
|
41
|
+
</svg>
|
|
42
|
+
<svg v-else class="w-3 h-3 ms-1.5 opacity-30" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
|
43
|
+
fill='currentColor'
|
|
44
|
+
viewBox="0 0 24 24">
|
|
45
|
+
<path
|
|
46
|
+
d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/>
|
|
47
|
+
</svg>
|
|
48
|
+
</div>
|
|
49
|
+
<span
|
|
50
|
+
class="bg-red-100 text-red-800 text-xs font-medium me-1 px-1 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
|
|
51
|
+
v-if="sort.findIndex((s) => s.field === c.name) !== -1 && sort?.length > 1">
|
|
52
|
+
{{ sort.findIndex((s) => s.field === c.name) + 1 }}
|
|
53
|
+
</span>
|
|
14
54
|
|
|
15
|
-
<table v-else class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
|
|
16
|
-
<thead class="text-xs text-view-table-heading-text bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
|
|
17
|
-
<tr>
|
|
18
|
-
<th scope="col" class="p-4">
|
|
19
|
-
<div v-if="rows && rows.length" class="flex items-center">
|
|
20
|
-
<input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()"
|
|
21
|
-
class="w-4 h-4 cursor-pointer 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">
|
|
22
|
-
<label for="checkbox-all-search" class="sr-only">checkbox</label>
|
|
23
|
-
</div>
|
|
24
|
-
</th>
|
|
25
|
-
|
|
26
|
-
<th v-for="c in columnsListed" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
|
|
27
|
-
|
|
28
|
-
<div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)"
|
|
29
|
-
class="flex items-center " :class="{'cursor-pointer':c.sortable}">
|
|
30
|
-
{{ c.label }}
|
|
31
|
-
|
|
32
|
-
<div v-if="c.sortable"
|
|
33
|
-
:style="{ 'color':ascArr.includes(c.name)?'green':descArr.includes(c.name)?'red':'currentColor'}">
|
|
34
|
-
<svg v-if="ascArr.includes(c.name) || descArr.includes(c.name)" class="w-3 h-3 ms-1.5"
|
|
35
|
-
:class="{'rotate-180':descArr.includes(c.name)}" viewBox="0 0 24 24">
|
|
36
|
-
<path
|
|
37
|
-
d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847"/>
|
|
38
|
-
</svg>
|
|
39
|
-
<svg v-else class="w-3 h-3 ms-1.5 opacity-30" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
|
40
|
-
fill='currentColor'
|
|
41
|
-
viewBox="0 0 24 24">
|
|
42
|
-
<path
|
|
43
|
-
d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/>
|
|
44
|
-
</svg>
|
|
45
55
|
</div>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
</th>
|
|
54
|
-
|
|
55
|
-
<th scope="col" class="px-6 py-3">
|
|
56
|
-
Actions
|
|
57
|
-
</th>
|
|
58
|
-
</tr>
|
|
59
|
-
</thead>
|
|
60
|
-
<tbody class="overflow-y-auto">
|
|
56
|
+
</td>
|
|
57
|
+
|
|
58
|
+
<td scope="col" class="px-6 py-3">
|
|
59
|
+
Actions
|
|
60
|
+
</td>
|
|
61
|
+
</tr>
|
|
62
|
+
<!-- table header end -->
|
|
61
63
|
<SkeleteLoader
|
|
62
64
|
v-if="!rows"
|
|
63
65
|
:columns="resource?.columns.filter(c => c.showIn.includes('list')).length + 2"
|
|
@@ -106,65 +108,57 @@
|
|
|
106
108
|
/>
|
|
107
109
|
</td>
|
|
108
110
|
<td class=" items-center px-2 md:px-3 lg:px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
|
|
109
|
-
<div class="flex">
|
|
110
|
-
<
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
<
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
</
|
|
160
|
-
|
|
161
|
-
<div :id="`tooltip-delete-${rowI}`"
|
|
162
|
-
role="tooltip"
|
|
163
|
-
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">
|
|
164
|
-
Delete
|
|
165
|
-
<div class="tooltip-arrow" data-popper-arrow></div>
|
|
166
|
-
</div>
|
|
167
|
-
|
|
111
|
+
<div class="flex text-lightPrimary dark:text-darkPrimary items-center">
|
|
112
|
+
<AfTooltip>
|
|
113
|
+
<RouterLink
|
|
114
|
+
v-if="resource.options?.allowedActions.show"
|
|
115
|
+
:to="{
|
|
116
|
+
name: 'resource-show',
|
|
117
|
+
params: {
|
|
118
|
+
resourceId: resource.resourceId,
|
|
119
|
+
primaryKey: row._primaryKeyValue,
|
|
120
|
+
}
|
|
121
|
+
}"
|
|
122
|
+
|
|
123
|
+
>
|
|
124
|
+
<IconEyeSolid class="w-5 h-5 me-2"/>
|
|
125
|
+
</RouterLink>
|
|
126
|
+
|
|
127
|
+
<template v-slot:tooltip>
|
|
128
|
+
Show item
|
|
129
|
+
</template>
|
|
130
|
+
</AfTooltip>
|
|
131
|
+
|
|
132
|
+
<AfTooltip>
|
|
133
|
+
<RouterLink
|
|
134
|
+
v-if="resource.options?.allowedActions.edit"
|
|
135
|
+
:to="{
|
|
136
|
+
name: 'resource-edit',
|
|
137
|
+
params: {
|
|
138
|
+
resourceId: resource.resourceId,
|
|
139
|
+
primaryKey: row._primaryKeyValue,
|
|
140
|
+
}
|
|
141
|
+
}"
|
|
142
|
+
>
|
|
143
|
+
<IconPenSolid class="w-5 h-5 me-2"/>
|
|
144
|
+
</RouterLink>
|
|
145
|
+
<template v-slot:tooltip>
|
|
146
|
+
Edit item
|
|
147
|
+
</template>
|
|
148
|
+
</AfTooltip>
|
|
149
|
+
|
|
150
|
+
<AfTooltip>
|
|
151
|
+
<button
|
|
152
|
+
v-if="resource.options?.allowedActions.delete"
|
|
153
|
+
@click="deleteRecord(row)"
|
|
154
|
+
>
|
|
155
|
+
<IconTrashBinSolid class="w-5 h-5 me-2"/>
|
|
156
|
+
</button>
|
|
157
|
+
|
|
158
|
+
<template v-slot:tooltip>
|
|
159
|
+
Delete item
|
|
160
|
+
</template>
|
|
161
|
+
</AfTooltip>
|
|
168
162
|
|
|
169
163
|
<template v-if="coreStore.resourceOptions?.pageInjections?.list?.customActionIcons">
|
|
170
164
|
<component
|
|
@@ -185,30 +179,23 @@
|
|
|
185
179
|
<!-- pagination
|
|
186
180
|
totalRows in v-if is used to not hide page input during loading when user puts cursor into it and edit directly (rows gets null there during edit)
|
|
187
181
|
-->
|
|
188
|
-
<div class="flex flex-
|
|
182
|
+
<div class="flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3"
|
|
189
183
|
v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
|
|
190
184
|
>
|
|
191
|
-
|
|
192
|
-
<
|
|
193
|
-
Showing <span class="font-semibold text-gray-900 dark:text-white">
|
|
194
|
-
{{ ((page || 1) - 1) * pageSize + 1 }}
|
|
195
|
-
</span> to <span class="font-semibold text-gray-900 dark:text-white">
|
|
196
|
-
{{ Math.min((page || 1) * pageSize, totalRows) }}
|
|
197
|
-
</span> of <span class="font-semibold text-gray-900 dark:text-white">{{
|
|
198
|
-
totalRows
|
|
199
|
-
}}</span> Entries
|
|
200
|
-
</span>
|
|
201
|
-
<div class="inline-flex mt-2 xs:mt-0">
|
|
185
|
+
|
|
186
|
+
<div class="inline-flex ">
|
|
202
187
|
<!-- Buttons -->
|
|
203
188
|
<button
|
|
204
|
-
class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s 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 disabled:opacity-50"
|
|
189
|
+
class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s 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 disabled:opacity-50"
|
|
205
190
|
@click="page--" :disabled="page <= 1">
|
|
206
|
-
<svg class="w-3.5 h-3.5
|
|
191
|
+
<svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
207
192
|
viewBox="0 0 14 10">
|
|
208
193
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
209
194
|
d="M13 5H1m0 0 4 4M1 5l4-4"/>
|
|
210
195
|
</svg>
|
|
211
|
-
|
|
196
|
+
<span class="hidden sm:inline">
|
|
197
|
+
Prev
|
|
198
|
+
</span>
|
|
212
199
|
</button>
|
|
213
200
|
<button
|
|
214
201
|
class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 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 disabled:opacity-50"
|
|
@@ -232,11 +219,10 @@
|
|
|
232
219
|
<!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
|
|
233
220
|
</button>
|
|
234
221
|
<button
|
|
235
|
-
class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e 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 disabled:opacity-50"
|
|
236
|
-
|
|
222
|
+
class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e 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 disabled:opacity-50"
|
|
237
223
|
@click="page++" :disabled="page >= totalPages">
|
|
238
|
-
Next
|
|
239
|
-
<svg class="w-3.5 h-3.5
|
|
224
|
+
<span class="hidden sm:inline">Next</span>
|
|
225
|
+
<svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
240
226
|
viewBox="0 0 14 10">
|
|
241
227
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
242
228
|
d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
|
@@ -244,6 +230,15 @@
|
|
|
244
230
|
</button>
|
|
245
231
|
</div>
|
|
246
232
|
|
|
233
|
+
<!-- Help text -->
|
|
234
|
+
<span class="text-sm text-gray-700 dark:text-gray-400">
|
|
235
|
+
Showing <span class="font-semibold text-gray-900 dark:text-white">
|
|
236
|
+
{{ ((page || 1) - 1) * pageSize + 1 }}
|
|
237
|
+
</span> to <span class="font-semibold text-gray-900 dark:text-white">
|
|
238
|
+
{{ Math.min((page || 1) * pageSize, totalRows) }}
|
|
239
|
+
</span> of <span class="font-semibold text-gray-900 dark:text-white">{{
|
|
240
|
+
totalRows }}</span> <span class="hidden sm:inline">Entries</span>
|
|
241
|
+
</span>
|
|
247
242
|
</div>
|
|
248
243
|
</template>
|
|
249
244
|
|
|
@@ -269,9 +264,11 @@ import {
|
|
|
269
264
|
IconTrashBinSolid
|
|
270
265
|
} from '@iconify-prerendered/vue-flowbite';
|
|
271
266
|
import router from '@/router';
|
|
267
|
+
import AfTooltip from './AfTooltip.vue';
|
|
272
268
|
|
|
273
269
|
const coreStore = useCoreStore();
|
|
274
270
|
|
|
271
|
+
|
|
275
272
|
const props = defineProps([
|
|
276
273
|
'page',
|
|
277
274
|
'resource',
|
|
@@ -1,31 +1,25 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
>
|
|
15
|
-
{{ countryName }}
|
|
16
|
-
<div class="tooltip-arrow" data-popper-arrow></div>
|
|
17
|
-
</div>
|
|
18
|
-
</span>
|
|
19
|
-
|
|
2
|
+
<AfTooltip>
|
|
3
|
+
<span class="flex items-center">
|
|
4
|
+
<span
|
|
5
|
+
:class="{[`fi-${countryIsoLow}`]: true, 'flag-icon': countryName}"
|
|
6
|
+
></span>
|
|
7
|
+
<span v-if="meta.showCountryName" class="ms-2">{{ countryName }}</span>
|
|
8
|
+
</span>
|
|
9
|
+
|
|
10
|
+
<template v-if="shouldShowTooltip" #tooltip>
|
|
11
|
+
{{ countryName }}
|
|
12
|
+
</template>
|
|
13
|
+
</AfTooltip>
|
|
20
14
|
</template>
|
|
21
15
|
|
|
22
16
|
<script setup>
|
|
23
17
|
|
|
24
18
|
import { computed, ref, onMounted } from 'vue';
|
|
25
|
-
import { initFlowbite } from 'flowbite';
|
|
26
19
|
import 'flag-icons/css/flag-icons.min.css';
|
|
27
20
|
import isoCountries from 'i18n-iso-countries';
|
|
28
21
|
import enLocal from 'i18n-iso-countries/langs/en.json';
|
|
22
|
+
import AfTooltip from '@/components/AfTooltip.vue';
|
|
29
23
|
|
|
30
24
|
isoCountries.registerLocale(enLocal);
|
|
31
25
|
|
|
@@ -39,8 +33,6 @@ const shouldShowTooltip = computed(() => {
|
|
|
39
33
|
|
|
40
34
|
onMounted(async () => {
|
|
41
35
|
id.value = Math.random().toString(36).substring(7);
|
|
42
|
-
await new Promise(resolve => setTimeout(resolve, 0));
|
|
43
|
-
initFlowbite();
|
|
44
36
|
});
|
|
45
37
|
|
|
46
38
|
const countryIsoLow = computed(() => {
|
|
@@ -2,7 +2,6 @@ import { ref } from 'vue';
|
|
|
2
2
|
import { defineStore } from 'pinia';
|
|
3
3
|
import { callAdminForthApi } from '@/utils';
|
|
4
4
|
import { initFlowbite } from 'flowbite'
|
|
5
|
-
import { useRouter } from 'vue-router';
|
|
6
5
|
import { useCoreStore } from './core';
|
|
7
6
|
import router from '@/router';
|
|
8
7
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="relative">
|
|
2
|
+
<div class="relative flex flex-col max-w-full w-full">
|
|
3
3
|
<Teleport to="body">
|
|
4
4
|
<Filters
|
|
5
5
|
:columns="coreStore.resource?.columns"
|
|
@@ -120,7 +120,6 @@ import { computed, onMounted, ref, watch } from 'vue';
|
|
|
120
120
|
import { useRoute } from 'vue-router';
|
|
121
121
|
import { showErrorTost } from '@/composables/useFrontendApi'
|
|
122
122
|
import { getCustomComponent, initThreeDotsDropdown } from '@/utils';
|
|
123
|
-
import { initFlowbite } from 'flowbite';
|
|
124
123
|
import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
|
|
125
124
|
|
|
126
125
|
|
|
@@ -184,8 +183,6 @@ async function getList() {
|
|
|
184
183
|
});
|
|
185
184
|
totalRows.value = data.total;
|
|
186
185
|
await new Promise(resolve => setTimeout(resolve, 0));
|
|
187
|
-
initFlowbite(); // for tooltips in table
|
|
188
|
-
|
|
189
186
|
}
|
|
190
187
|
|
|
191
188
|
async function startBulkAction(actionId) {
|
|
@@ -246,8 +243,6 @@ async function init() {
|
|
|
246
243
|
resourceId: route.params.resourceId
|
|
247
244
|
});
|
|
248
245
|
|
|
249
|
-
initFlowbite();
|
|
250
|
-
|
|
251
246
|
// !!! clear filters should be in same tick with sort assignment so that watch can catch it as one change
|
|
252
247
|
|
|
253
248
|
// try to init filters from query params
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`" class="p-4"
|
|
2
|
+
<div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`" class="p-4 flex"
|
|
3
|
+
:class="limitHeightToPage ? 'h-[calc(100vh-3.5rem)]': undefined"
|
|
4
|
+
>
|
|
3
5
|
<RouterView/>
|
|
4
6
|
</div>
|
|
5
7
|
</template>
|
|
@@ -9,9 +11,35 @@
|
|
|
9
11
|
|
|
10
12
|
<script setup>
|
|
11
13
|
|
|
12
|
-
|
|
13
14
|
import { useCoreStore } from '@/stores/core';
|
|
15
|
+
import { computed } from 'vue';
|
|
16
|
+
import { useRoute } from 'vue-router';
|
|
14
17
|
|
|
18
|
+
const route = useRoute()
|
|
15
19
|
const coreStore = useCoreStore()
|
|
16
20
|
|
|
21
|
+
const limitHeightToPage = computed(() => {
|
|
22
|
+
if (route.name !== 'resource-list' ) {
|
|
23
|
+
return false;
|
|
24
|
+
}
|
|
25
|
+
if (!coreStore.resource?.options?.pageInjections?.list) {
|
|
26
|
+
return true;
|
|
27
|
+
}
|
|
28
|
+
const listPageInjects = coreStore.resource.options.pageInjections.list;
|
|
29
|
+
console.log('asdcoreStore.resource', JSON.stringify(listPageInjects, null, 2))
|
|
30
|
+
|
|
31
|
+
for (const pi of [listPageInjects.beforeBreadcrumbs, listPageInjects.afterBreadcrumbs, listPageInjects.bottom]) {
|
|
32
|
+
if (pi) {
|
|
33
|
+
for (const piItem of pi) {
|
|
34
|
+
if (!piItem.meta?.thinEnoughToShrinkTable) {
|
|
35
|
+
return false;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
return true;
|
|
42
|
+
|
|
43
|
+
})
|
|
44
|
+
|
|
17
45
|
</script>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="relative">
|
|
2
|
+
<div class="relative w-full">
|
|
3
3
|
<component
|
|
4
4
|
v-if="!loading"
|
|
5
5
|
v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.beforeBreadcrumbs || []"
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
</div>
|
|
58
58
|
<div
|
|
59
59
|
v-else-if="coreStore.record"
|
|
60
|
-
class="relative
|
|
60
|
+
class="relative "
|
|
61
61
|
>
|
|
62
|
-
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
|
|
62
|
+
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default overflow-hidden shadow-resourseFormShadow">
|
|
63
63
|
<thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400">
|
|
64
64
|
<tr>
|
|
65
65
|
<th scope="col" class="px-6 py-3">
|