@stoker-platform/web-app 0.5.59 → 0.5.60
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/CHANGELOG.md +10 -0
- package/package.json +4 -4
- package/src/Collection.tsx +101 -84
- package/src/Form.tsx +0 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @stoker-platform/web-app
|
|
2
2
|
|
|
3
|
+
## 0.5.60
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- feat: add relation list loadAll option
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
- @stoker-platform/web-client@0.5.37
|
|
10
|
+
- @stoker-platform/node-client@0.5.39
|
|
11
|
+
- @stoker-platform/utils@0.5.33
|
|
12
|
+
|
|
3
13
|
## 0.5.59
|
|
4
14
|
|
|
5
15
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stoker-platform/web-app",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.60",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"scripts": {
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
"@radix-ui/react-tooltip": "^1.2.8",
|
|
52
52
|
"@react-google-maps/api": "^2.20.8",
|
|
53
53
|
"@sentry/react": "^10.47.0",
|
|
54
|
-
"@stoker-platform/node-client": "0.5.
|
|
55
|
-
"@stoker-platform/utils": "0.5.
|
|
56
|
-
"@stoker-platform/web-client": "0.5.
|
|
54
|
+
"@stoker-platform/node-client": "0.5.39",
|
|
55
|
+
"@stoker-platform/utils": "0.5.33",
|
|
56
|
+
"@stoker-platform/web-client": "0.5.37",
|
|
57
57
|
"@tanstack/react-table": "^8.21.3",
|
|
58
58
|
"@types/react": "18.3.13",
|
|
59
59
|
"@types/react-dom": "18.3.1",
|
package/src/Collection.tsx
CHANGED
|
@@ -36,6 +36,7 @@ import {
|
|
|
36
36
|
subscribeMany,
|
|
37
37
|
SubscribeManyOptions,
|
|
38
38
|
updateRecord,
|
|
39
|
+
getPreloadListeners,
|
|
39
40
|
} from "@stoker-platform/web-client"
|
|
40
41
|
import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react"
|
|
41
42
|
import { useLocation, useNavigate } from "react-router"
|
|
@@ -453,7 +454,7 @@ function Collection({
|
|
|
453
454
|
const startingTab = tabRef.current
|
|
454
455
|
key ||= "default"
|
|
455
456
|
|
|
456
|
-
if (!isPreloadCacheEnabled) {
|
|
457
|
+
if (!isPreloadCacheEnabled || relationList?.loadAll) {
|
|
457
458
|
setIsRouteLoading("+", location.pathname)
|
|
458
459
|
}
|
|
459
460
|
|
|
@@ -581,8 +582,8 @@ function Collection({
|
|
|
581
582
|
if (!query.infinite || firstLoad) {
|
|
582
583
|
setCursor((prev) => ({ ...prev, [key]: newCursor }))
|
|
583
584
|
}
|
|
584
|
-
if (!isPreloadCacheEnabled) {
|
|
585
|
-
loadedKeys.current.add(key)
|
|
585
|
+
if (!isPreloadCacheEnabled || relationList?.loadAll) {
|
|
586
|
+
if (!isPreloadCacheEnabled) loadedKeys.current.add(key)
|
|
586
587
|
if (loadedKeys.current.size === keysLength.current) {
|
|
587
588
|
setIsRouteLoading("-", location.pathname)
|
|
588
589
|
}
|
|
@@ -627,7 +628,7 @@ function Collection({
|
|
|
627
628
|
},
|
|
628
629
|
(error) => {
|
|
629
630
|
console.error(error)
|
|
630
|
-
if (!isPreloadCacheEnabled) {
|
|
631
|
+
if (!isPreloadCacheEnabled || relationList?.loadAll) {
|
|
631
632
|
setIsRouteLoading("-", location.pathname)
|
|
632
633
|
}
|
|
633
634
|
resolve()
|
|
@@ -637,6 +638,13 @@ function Collection({
|
|
|
637
638
|
},
|
|
638
639
|
{
|
|
639
640
|
...currentQuery.options,
|
|
641
|
+
tempCache:
|
|
642
|
+
isPreloadCacheEnabled && relationList?.loadAll
|
|
643
|
+
? {
|
|
644
|
+
label: `${labels.collection}-${relationList?.field}`,
|
|
645
|
+
constraints: [[`${relationList?.field}.${relationParent?.id}`, ">", {}]],
|
|
646
|
+
}
|
|
647
|
+
: undefined,
|
|
640
648
|
} as SubscribeManyOptions,
|
|
641
649
|
)
|
|
642
650
|
const { unsubscribe: newUnsubscribe, count: newCount, pages: newPages } = result
|
|
@@ -645,7 +653,7 @@ function Collection({
|
|
|
645
653
|
load()
|
|
646
654
|
}
|
|
647
655
|
} catch (error) {
|
|
648
|
-
if (!isPreloadCacheEnabled) {
|
|
656
|
+
if (!isPreloadCacheEnabled || relationList?.loadAll) {
|
|
649
657
|
setIsRouteLoading("-", location.pathname)
|
|
650
658
|
}
|
|
651
659
|
reject(error)
|
|
@@ -980,51 +988,49 @@ function Collection({
|
|
|
980
988
|
if (currentField && (!rangeFilter || isPreloadCacheEnabled)) {
|
|
981
989
|
let rangeValue = rangeState
|
|
982
990
|
if (preloadCache?.range) {
|
|
983
|
-
if (
|
|
984
|
-
|
|
991
|
+
if (formList || relationList?.loadAll) {
|
|
992
|
+
rangeValue = JSON.stringify({
|
|
993
|
+
from: getMinDate(),
|
|
994
|
+
to: getMaxDate(),
|
|
995
|
+
})
|
|
996
|
+
} else if (!rangeValue) {
|
|
997
|
+
const now = convertDateToTimezone(new Date())
|
|
998
|
+
if (rangeSelectorState === "month") {
|
|
999
|
+
rangeValue = JSON.stringify({
|
|
1000
|
+
from: now
|
|
1001
|
+
.startOf("month")
|
|
1002
|
+
.plus({ days: preloadCache.range.startOffsetDays || 0 })
|
|
1003
|
+
.plus({ hours: preloadCache.range.startOffsetHours })
|
|
1004
|
+
.toJSDate()
|
|
1005
|
+
.toISOString(),
|
|
1006
|
+
to: now
|
|
1007
|
+
.endOf("month")
|
|
1008
|
+
.plus({ days: preloadCache.range.endOffsetDays || 0 })
|
|
1009
|
+
.plus({ hours: preloadCache.range.endOffsetHours })
|
|
1010
|
+
.toJSDate()
|
|
1011
|
+
.toISOString(),
|
|
1012
|
+
})
|
|
1013
|
+
} else if (rangeSelectorState === "week") {
|
|
985
1014
|
rangeValue = JSON.stringify({
|
|
986
|
-
from:
|
|
987
|
-
|
|
1015
|
+
from: now
|
|
1016
|
+
.startOf("week")
|
|
1017
|
+
.plus({ days: preloadCache.range.startOffsetDays || 0 })
|
|
1018
|
+
.plus({ hours: preloadCache.range.startOffsetHours })
|
|
1019
|
+
.toJSDate()
|
|
1020
|
+
.toISOString(),
|
|
1021
|
+
to: now
|
|
1022
|
+
.endOf("week")
|
|
1023
|
+
.plus({ days: preloadCache.range.endOffsetDays || 0 })
|
|
1024
|
+
.plus({ hours: preloadCache.range.endOffsetHours })
|
|
1025
|
+
.toJSDate()
|
|
1026
|
+
.toISOString(),
|
|
988
1027
|
})
|
|
989
1028
|
} else {
|
|
990
|
-
const
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
.plus({ days: preloadCache.range.startOffsetDays || 0 })
|
|
996
|
-
.plus({ hours: preloadCache.range.startOffsetHours })
|
|
997
|
-
.toJSDate()
|
|
998
|
-
.toISOString(),
|
|
999
|
-
to: now
|
|
1000
|
-
.endOf("month")
|
|
1001
|
-
.plus({ days: preloadCache.range.endOffsetDays || 0 })
|
|
1002
|
-
.plus({ hours: preloadCache.range.endOffsetHours })
|
|
1003
|
-
.toJSDate()
|
|
1004
|
-
.toISOString(),
|
|
1005
|
-
})
|
|
1006
|
-
} else if (rangeSelectorState === "week") {
|
|
1007
|
-
rangeValue = JSON.stringify({
|
|
1008
|
-
from: now
|
|
1009
|
-
.startOf("week")
|
|
1010
|
-
.plus({ days: preloadCache.range.startOffsetDays || 0 })
|
|
1011
|
-
.plus({ hours: preloadCache.range.startOffsetHours })
|
|
1012
|
-
.toJSDate()
|
|
1013
|
-
.toISOString(),
|
|
1014
|
-
to: now
|
|
1015
|
-
.endOf("week")
|
|
1016
|
-
.plus({ days: preloadCache.range.endOffsetDays || 0 })
|
|
1017
|
-
.plus({ hours: preloadCache.range.endOffsetHours })
|
|
1018
|
-
.toJSDate()
|
|
1019
|
-
.toISOString(),
|
|
1020
|
-
})
|
|
1021
|
-
} else {
|
|
1022
|
-
const preloadCacheRange = getRange(preloadCache.range, timezone)
|
|
1023
|
-
rangeValue = JSON.stringify({
|
|
1024
|
-
from: preloadCacheRange.start.toISOString(),
|
|
1025
|
-
to: preloadCacheRange.end?.toISOString(),
|
|
1026
|
-
})
|
|
1027
|
-
}
|
|
1029
|
+
const preloadCacheRange = getRange(preloadCache.range, timezone)
|
|
1030
|
+
rangeValue = JSON.stringify({
|
|
1031
|
+
from: preloadCacheRange.start.toISOString(),
|
|
1032
|
+
to: preloadCacheRange.end?.toISOString(),
|
|
1033
|
+
})
|
|
1028
1034
|
}
|
|
1029
1035
|
}
|
|
1030
1036
|
filtersClone.push({
|
|
@@ -1153,6 +1159,12 @@ function Collection({
|
|
|
1153
1159
|
document.removeEventListener(`stoker:loading:${labels.collection}`, cacheLoading)
|
|
1154
1160
|
document.removeEventListener(`stoker:loaded:${labels.collection}`, cacheLoaded)
|
|
1155
1161
|
}
|
|
1162
|
+
if (relationList?.loadAll) {
|
|
1163
|
+
const unsubscribes = getPreloadListeners()[`${labels.collection}-${relationList.field}`]
|
|
1164
|
+
if (unsubscribes) {
|
|
1165
|
+
unsubscribes.forEach((unsubscribe) => unsubscribe())
|
|
1166
|
+
}
|
|
1167
|
+
}
|
|
1156
1168
|
}
|
|
1157
1169
|
}, [])
|
|
1158
1170
|
|
|
@@ -1675,24 +1687,26 @@ function Collection({
|
|
|
1675
1687
|
</Card>
|
|
1676
1688
|
{(connectionStatus === "online" || isPreloadCacheEnabled) && (
|
|
1677
1689
|
<>
|
|
1678
|
-
{tab !== "calendar" &&
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1690
|
+
{tab !== "calendar" &&
|
|
1691
|
+
!relationList?.loadAll &&
|
|
1692
|
+
(hasRangeFilter || currentField) && (
|
|
1693
|
+
<div
|
|
1694
|
+
className={cn(
|
|
1695
|
+
"hidden",
|
|
1696
|
+
relationList ? "xl:flex" : "lg:flex",
|
|
1697
|
+
"2xl:hidden absolute",
|
|
1698
|
+
relationList ? "left-[calc(50%+98px)]" : "left-1/2",
|
|
1699
|
+
"transform -translate-x-1/2",
|
|
1700
|
+
)}
|
|
1701
|
+
>
|
|
1702
|
+
<DateRangeSelector
|
|
1703
|
+
collection={collection}
|
|
1704
|
+
rangeSelector={rangeSelector}
|
|
1705
|
+
setRangeSelector={setRangeSelector}
|
|
1706
|
+
relationList={!!relationList}
|
|
1707
|
+
/>
|
|
1708
|
+
</div>
|
|
1709
|
+
)}
|
|
1696
1710
|
<div className="relative ml-auto flex-1 md:grow-0 print:hidden flex items-center">
|
|
1697
1711
|
{tab !== "calendar" &&
|
|
1698
1712
|
tab !== "map" &&
|
|
@@ -1746,7 +1760,7 @@ function Collection({
|
|
|
1746
1760
|
)}
|
|
1747
1761
|
</header>
|
|
1748
1762
|
)}
|
|
1749
|
-
{!(connectionStatus === "online" || isPreloadCacheEnabled) ? (
|
|
1763
|
+
{!(connectionStatus === "online" || (isPreloadCacheEnabled && !relationList?.loadAll)) ? (
|
|
1750
1764
|
<div
|
|
1751
1765
|
className={cn(
|
|
1752
1766
|
"flex justify-center items-center p-5",
|
|
@@ -1782,8 +1796,8 @@ function Collection({
|
|
|
1782
1796
|
)}
|
|
1783
1797
|
>
|
|
1784
1798
|
{formList && (
|
|
1785
|
-
<Badge variant="outline" className="py-2 px-4 text-md">
|
|
1786
|
-
{formList.label || formList.collection}
|
|
1799
|
+
<Badge variant="outline" className="py-2 px-4 text-md whitespace-nowrap">
|
|
1800
|
+
{formList.label || collectionTitle || formList.collection}
|
|
1787
1801
|
</Badge>
|
|
1788
1802
|
)}
|
|
1789
1803
|
<div className="lg:h-9">
|
|
@@ -1811,22 +1825,25 @@ function Collection({
|
|
|
1811
1825
|
</TabsList>
|
|
1812
1826
|
)}
|
|
1813
1827
|
</div>
|
|
1814
|
-
{!formList &&
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1828
|
+
{!formList &&
|
|
1829
|
+
!relationList?.loadAll &&
|
|
1830
|
+
tab !== "calendar" &&
|
|
1831
|
+
(hasRangeFilter || currentField) && (
|
|
1832
|
+
<div
|
|
1833
|
+
className={cn(
|
|
1834
|
+
relationList
|
|
1835
|
+
? "xl:hidden 2xl:flex xl:absolute xl:left-[calc(50%+128px)] xl:transform xl:-translate-x-[calc(50%+98px)] xl:mt-0 mt-2"
|
|
1836
|
+
: "lg:hidden 2xl:flex lg:absolute lg:left-1/2 lg:transform lg:-translate-x-1/2 lg:mt-0 mt-2",
|
|
1837
|
+
)}
|
|
1838
|
+
>
|
|
1839
|
+
<DateRangeSelector
|
|
1840
|
+
collection={collection}
|
|
1841
|
+
rangeSelector={rangeSelector}
|
|
1842
|
+
setRangeSelector={setRangeSelector}
|
|
1843
|
+
relationList={!!relationList}
|
|
1844
|
+
/>
|
|
1845
|
+
</div>
|
|
1846
|
+
)}
|
|
1830
1847
|
<div
|
|
1831
1848
|
className={cn(
|
|
1832
1849
|
"ml-auto flex items-center gap-2 justify-center w-full",
|
package/src/Form.tsx
CHANGED
|
@@ -5247,18 +5247,6 @@ function RecordForm({
|
|
|
5247
5247
|
field: formList.sortField || relationCollection.recordTitleField,
|
|
5248
5248
|
direction: formList.sortDirection,
|
|
5249
5249
|
}}
|
|
5250
|
-
additionalConstraints={(() => {
|
|
5251
|
-
if (record) {
|
|
5252
|
-
return [
|
|
5253
|
-
[
|
|
5254
|
-
`${relationList.field}_Array`,
|
|
5255
|
-
"array-contains",
|
|
5256
|
-
record.id,
|
|
5257
|
-
],
|
|
5258
|
-
]
|
|
5259
|
-
}
|
|
5260
|
-
return []
|
|
5261
|
-
})()}
|
|
5262
5250
|
/>
|
|
5263
5251
|
</FiltersProvider>
|
|
5264
5252
|
</div>
|