@strapi/upload 5.36.0 → 5.37.0
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/admin/future/App.js +5 -12
- package/dist/admin/future/App.js.map +1 -1
- package/dist/admin/future/App.mjs +5 -12
- package/dist/admin/future/App.mjs.map +1 -1
- package/dist/admin/future/components/UploadProgressDialog.js +494 -0
- package/dist/admin/future/components/UploadProgressDialog.js.map +1 -0
- package/dist/admin/future/components/UploadProgressDialog.mjs +473 -0
- package/dist/admin/future/components/UploadProgressDialog.mjs.map +1 -0
- package/dist/admin/future/pages/Assets/AssetsPage.js +183 -181
- package/dist/admin/future/pages/Assets/AssetsPage.js.map +1 -1
- package/dist/admin/future/pages/Assets/AssetsPage.mjs +190 -188
- package/dist/admin/future/pages/Assets/AssetsPage.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetsGrid.js +95 -13
- package/dist/admin/future/pages/Assets/components/AssetsGrid.js.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetsGrid.mjs +97 -15
- package/dist/admin/future/pages/Assets/components/AssetsGrid.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetsTable.js +99 -6
- package/dist/admin/future/pages/Assets/components/AssetsTable.js.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetsTable.mjs +100 -7
- package/dist/admin/future/pages/Assets/components/AssetsTable.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/components/DropZone/UploadDropZone.js +127 -0
- package/dist/admin/future/pages/Assets/components/DropZone/UploadDropZone.js.map +1 -0
- package/dist/admin/future/pages/Assets/components/DropZone/UploadDropZone.mjs +105 -0
- package/dist/admin/future/pages/Assets/components/DropZone/UploadDropZone.mjs.map +1 -0
- package/dist/admin/future/pages/Assets/hooks/useFolderInfo.js +50 -0
- package/dist/admin/future/pages/Assets/hooks/useFolderInfo.js.map +1 -0
- package/dist/admin/future/pages/Assets/hooks/useFolderInfo.mjs +48 -0
- package/dist/admin/future/pages/Assets/hooks/useFolderInfo.mjs.map +1 -0
- package/dist/admin/future/pages/Assets/hooks/useFolderNavigation.js +20 -0
- package/dist/admin/future/pages/Assets/hooks/useFolderNavigation.js.map +1 -0
- package/dist/admin/future/pages/Assets/hooks/useFolderNavigation.mjs +18 -0
- package/dist/admin/future/pages/Assets/hooks/useFolderNavigation.mjs.map +1 -0
- package/dist/admin/future/pages/Assets/hooks/useInfiniteAssets.js +77 -0
- package/dist/admin/future/pages/Assets/hooks/useInfiniteAssets.js.map +1 -0
- package/dist/admin/future/pages/Assets/hooks/useInfiniteAssets.mjs +74 -0
- package/dist/admin/future/pages/Assets/hooks/useInfiniteAssets.mjs.map +1 -0
- package/dist/admin/future/services/api.js +419 -9
- package/dist/admin/future/services/api.js.map +1 -1
- package/dist/admin/future/services/api.mjs +417 -9
- package/dist/admin/future/services/api.mjs.map +1 -1
- package/dist/admin/future/services/assets.js +32 -3
- package/dist/admin/future/services/assets.js.map +1 -1
- package/dist/admin/future/services/assets.mjs +32 -3
- package/dist/admin/future/services/assets.mjs.map +1 -1
- package/dist/admin/future/services/folders.js +101 -0
- package/dist/admin/future/services/folders.js.map +1 -0
- package/dist/admin/future/services/folders.mjs +98 -0
- package/dist/admin/future/services/folders.mjs.map +1 -0
- package/dist/admin/future/store/hooks.js +10 -0
- package/dist/admin/future/store/hooks.js.map +1 -0
- package/dist/admin/future/store/hooks.mjs +7 -0
- package/dist/admin/future/store/hooks.mjs.map +1 -0
- package/dist/admin/future/store/uploadProgress.js +156 -0
- package/dist/admin/future/store/uploadProgress.js.map +1 -0
- package/dist/admin/future/store/uploadProgress.mjs +143 -0
- package/dist/admin/future/store/uploadProgress.mjs.map +1 -0
- package/dist/admin/index.js +11 -0
- package/dist/admin/index.js.map +1 -1
- package/dist/admin/index.mjs +11 -0
- package/dist/admin/index.mjs.map +1 -1
- package/dist/admin/package.json.js +11 -10
- package/dist/admin/package.json.js.map +1 -1
- package/dist/admin/package.json.mjs +11 -10
- package/dist/admin/package.json.mjs.map +1 -1
- package/dist/admin/src/future/components/UploadProgressDialog.d.ts +1 -0
- package/dist/admin/src/future/pages/Assets/components/AssetsGrid.d.ts +3 -1
- package/dist/admin/src/future/pages/Assets/components/AssetsTable.d.ts +3 -1
- package/dist/admin/src/future/pages/Assets/components/DropZone/UploadDropZone.d.ts +10 -0
- package/dist/admin/src/future/pages/Assets/hooks/useFolderInfo.d.ts +5 -0
- package/dist/admin/src/future/pages/Assets/hooks/useFolderNavigation.d.ts +5 -0
- package/dist/admin/src/future/pages/Assets/hooks/useInfiniteAssets.d.ts +17 -0
- package/dist/admin/src/future/services/api.d.ts +21 -3
- package/dist/admin/src/future/services/folders.d.ts +16 -0
- package/dist/admin/src/future/store/hooks.d.ts +6 -0
- package/dist/admin/src/future/store/uploadProgress.d.ts +46 -0
- package/dist/admin/translations/en.json.js +24 -0
- package/dist/admin/translations/en.json.js.map +1 -1
- package/dist/admin/translations/en.json.mjs +24 -0
- package/dist/admin/translations/en.json.mjs.map +1 -1
- package/dist/server/controllers/admin-upload.js +151 -2
- package/dist/server/controllers/admin-upload.js.map +1 -1
- package/dist/server/controllers/admin-upload.mjs +151 -2
- package/dist/server/controllers/admin-upload.mjs.map +1 -1
- package/dist/server/controllers/content-api.js +14 -6
- package/dist/server/controllers/content-api.js.map +1 -1
- package/dist/server/controllers/content-api.mjs +15 -7
- package/dist/server/controllers/content-api.mjs.map +1 -1
- package/dist/server/routes/admin.js +10 -0
- package/dist/server/routes/admin.js.map +1 -1
- package/dist/server/routes/admin.mjs +10 -0
- package/dist/server/routes/admin.mjs.map +1 -1
- package/dist/server/src/controllers/admin-upload.d.ts +12 -0
- package/dist/server/src/controllers/admin-upload.d.ts.map +1 -1
- package/dist/server/src/controllers/content-api.d.ts.map +1 -1
- package/dist/server/src/controllers/index.d.ts +1 -0
- package/dist/server/src/controllers/index.d.ts.map +1 -1
- package/dist/server/src/index.d.ts +1 -0
- package/dist/server/src/index.d.ts.map +1 -1
- package/dist/server/src/routes/admin.d.ts.map +1 -1
- package/dist/server/src/utils/mime-validation.d.ts +5 -0
- package/dist/server/src/utils/mime-validation.d.ts.map +1 -1
- package/dist/server/utils/mime-validation.js +7 -4
- package/dist/server/utils/mime-validation.js.map +1 -1
- package/dist/server/utils/mime-validation.mjs +7 -4
- package/dist/server/utils/mime-validation.mjs.map +1 -1
- package/dist/shared/contracts/files.d.ts +52 -0
- package/dist/shared/contracts/files.d.ts.map +1 -0
- package/dist/shared/contracts/folders.d.ts +2 -0
- package/package.json +11 -10
- package/dist/admin/future/pages/AIGenerationPage.js +0 -24
- package/dist/admin/future/pages/AIGenerationPage.js.map +0 -1
- package/dist/admin/future/pages/AIGenerationPage.mjs +0 -22
- package/dist/admin/future/pages/AIGenerationPage.mjs.map +0 -1
- package/dist/admin/future/pages/Assets/components/DropZone/DropZoneWithOverlay.js +0 -33
- package/dist/admin/future/pages/Assets/components/DropZone/DropZoneWithOverlay.js.map +0 -1
- package/dist/admin/future/pages/Assets/components/DropZone/DropZoneWithOverlay.mjs +0 -31
- package/dist/admin/future/pages/Assets/components/DropZone/DropZoneWithOverlay.mjs.map +0 -1
- package/dist/admin/src/future/pages/AIGenerationPage.d.ts +0 -1
- package/dist/admin/src/future/pages/Assets/components/DropZone/DropZoneWithOverlay.d.ts +0 -4
|
@@ -8,15 +8,17 @@ var designSystem = require('@strapi/design-system');
|
|
|
8
8
|
var icons = require('@strapi/icons');
|
|
9
9
|
var reactIntl = require('react-intl');
|
|
10
10
|
var styledComponents = require('styled-components');
|
|
11
|
-
var usePersistentState = require('../../../hooks/usePersistentState.js');
|
|
12
11
|
var api = require('../../services/api.js');
|
|
13
|
-
var
|
|
12
|
+
var folders = require('../../services/folders.js');
|
|
14
13
|
var translations = require('../../utils/translations.js');
|
|
15
14
|
var AssetsGrid = require('./components/AssetsGrid.js');
|
|
16
15
|
var AssetsTable = require('./components/AssetsTable.js');
|
|
17
|
-
var
|
|
16
|
+
var UploadDropZone = require('./components/DropZone/UploadDropZone.js');
|
|
18
17
|
var UploadDropZoneContext = require('./components/DropZone/UploadDropZoneContext.js');
|
|
19
18
|
var constants = require('./constants.js');
|
|
19
|
+
var useFolderInfo = require('./hooks/useFolderInfo.js');
|
|
20
|
+
var useFolderNavigation = require('./hooks/useFolderNavigation.js');
|
|
21
|
+
var useInfiniteAssets = require('./hooks/useInfiniteAssets.js');
|
|
20
22
|
|
|
21
23
|
function _interopNamespaceDefault(e) {
|
|
22
24
|
var n = Object.create(null);
|
|
@@ -37,13 +39,28 @@ function _interopNamespaceDefault(e) {
|
|
|
37
39
|
|
|
38
40
|
var ToggleGroup__namespace = /*#__PURE__*/_interopNamespaceDefault(ToggleGroup);
|
|
39
41
|
|
|
40
|
-
const
|
|
42
|
+
const INTERSECTION_OPTIONS = {
|
|
43
|
+
threshold: 0.1
|
|
44
|
+
};
|
|
45
|
+
const AssetsView = ({ view, folderId })=>{
|
|
41
46
|
const { formatMessage } = reactIntl.useIntl();
|
|
42
|
-
const {
|
|
43
|
-
folder:
|
|
47
|
+
const { assets, isLoading: isLoadingAssets, isFetchingMore, hasNextPage, fetchNextPage, error } = useInfiniteAssets.useInfiniteAssets({
|
|
48
|
+
folder: folderId
|
|
49
|
+
});
|
|
50
|
+
const { data: folders$1 = [], isLoading: isLoadingFolders } = folders.useGetFoldersQuery({
|
|
51
|
+
parentId: folderId
|
|
44
52
|
});
|
|
45
53
|
const isGridView = view === constants.viewOptions.GRID;
|
|
46
|
-
const
|
|
54
|
+
const isLoading = isLoadingAssets || isLoadingFolders;
|
|
55
|
+
const loadMoreRef = strapiAdmin.useElementOnScreen(React.useCallback((isVisible)=>{
|
|
56
|
+
if (isVisible && hasNextPage && !isFetchingMore) {
|
|
57
|
+
fetchNextPage();
|
|
58
|
+
}
|
|
59
|
+
}, [
|
|
60
|
+
hasNextPage,
|
|
61
|
+
isFetchingMore,
|
|
62
|
+
fetchNextPage
|
|
63
|
+
]), INTERSECTION_OPTIONS);
|
|
47
64
|
if (isLoading) {
|
|
48
65
|
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
|
|
49
66
|
justifyContent: "center",
|
|
@@ -68,16 +85,49 @@ const AssetsView = ({ view })=>{
|
|
|
68
85
|
})
|
|
69
86
|
});
|
|
70
87
|
}
|
|
71
|
-
if (
|
|
72
|
-
return /*#__PURE__*/ jsxRuntime.jsx(
|
|
73
|
-
|
|
88
|
+
if (folders$1.length === 0 && assets.length === 0) {
|
|
89
|
+
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
|
|
90
|
+
padding: 8,
|
|
91
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
|
|
92
|
+
textColor: "neutral600",
|
|
93
|
+
children: formatMessage({
|
|
94
|
+
id: 'app.components.EmptyStateLayout.content-document',
|
|
95
|
+
defaultMessage: 'No content found'
|
|
96
|
+
})
|
|
97
|
+
})
|
|
74
98
|
});
|
|
75
99
|
}
|
|
76
|
-
return /*#__PURE__*/ jsxRuntime.
|
|
77
|
-
|
|
100
|
+
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
101
|
+
children: [
|
|
102
|
+
isGridView ? /*#__PURE__*/ jsxRuntime.jsx(AssetsGrid.AssetsGrid, {
|
|
103
|
+
folders: folders$1,
|
|
104
|
+
assets: assets
|
|
105
|
+
}) : /*#__PURE__*/ jsxRuntime.jsx(AssetsTable.AssetsTable, {
|
|
106
|
+
assets: assets,
|
|
107
|
+
folders: folders$1
|
|
108
|
+
}),
|
|
109
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
110
|
+
ref: loadMoreRef,
|
|
111
|
+
style: {
|
|
112
|
+
height: 1
|
|
113
|
+
}
|
|
114
|
+
}),
|
|
115
|
+
isFetchingMore && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
|
|
116
|
+
justifyContent: "center",
|
|
117
|
+
padding: 4,
|
|
118
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
|
|
119
|
+
children: formatMessage({
|
|
120
|
+
id: translations.getTranslationKey('list.assets.loading-more'),
|
|
121
|
+
defaultMessage: 'Loading more assets...'
|
|
122
|
+
})
|
|
123
|
+
})
|
|
124
|
+
})
|
|
125
|
+
]
|
|
78
126
|
});
|
|
79
127
|
};
|
|
80
|
-
|
|
128
|
+
/* -------------------------------------------------------------------------------------------------
|
|
129
|
+
* AssetsPage
|
|
130
|
+
* -----------------------------------------------------------------------------------------------*/ const StyledToggleGroup = styledComponents.styled(ToggleGroup__namespace.Root)`
|
|
81
131
|
display: flex;
|
|
82
132
|
border: 1px solid ${({ theme })=>theme.colors.neutral200};
|
|
83
133
|
border-radius: ${({ theme })=>theme.borderRadius};
|
|
@@ -96,7 +146,7 @@ const StyledToggleItem = styledComponents.styled(ToggleGroup__namespace.Item)`
|
|
|
96
146
|
font-weight: ${({ theme })=>theme.fontWeights.semiBold};
|
|
97
147
|
|
|
98
148
|
&:hover {
|
|
99
|
-
background: ${({ theme })=>theme.colors.
|
|
149
|
+
background: ${({ theme })=>theme.colors.primary100};
|
|
100
150
|
}
|
|
101
151
|
|
|
102
152
|
&[data-state='on'] {
|
|
@@ -108,113 +158,54 @@ const StyledToggleItem = styledComponents.styled(ToggleGroup__namespace.Item)`
|
|
|
108
158
|
height: 1.6rem;
|
|
109
159
|
}
|
|
110
160
|
`;
|
|
111
|
-
const
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
const updateRect = ()=>{
|
|
120
|
-
const rect = uploadDropZoneRef.current?.getBoundingClientRect();
|
|
121
|
-
if (rect) {
|
|
122
|
-
setLeftContentWidth((prev)=>prev !== rect.left ? rect.left : prev);
|
|
123
|
-
}
|
|
124
|
-
};
|
|
125
|
-
updateRect();
|
|
126
|
-
const resizeObserver = new ResizeObserver(updateRect);
|
|
127
|
-
resizeObserver.observe(uploadDropZoneRef.current);
|
|
128
|
-
return ()=>resizeObserver.disconnect();
|
|
129
|
-
}, [
|
|
130
|
-
uploadDropZoneRef
|
|
131
|
-
]);
|
|
132
|
-
if (!isDragging) return null;
|
|
133
|
-
return /*#__PURE__*/ jsxRuntime.jsxs(DropFilesMessageImpl, {
|
|
134
|
-
$leftContentWidth: leftContentWidth,
|
|
135
|
-
children: [
|
|
136
|
-
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
|
|
137
|
-
textColor: "neutral0",
|
|
138
|
-
children: formatMessage({
|
|
139
|
-
id: translations.getTranslationKey('dropzone.upload.message'),
|
|
140
|
-
defaultMessage: 'Drop here to upload to'
|
|
141
|
-
})
|
|
142
|
-
}),
|
|
143
|
-
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
|
|
144
|
-
gap: 2,
|
|
145
|
-
alignItems: "center",
|
|
146
|
-
children: [
|
|
147
|
-
/*#__PURE__*/ jsxRuntime.jsx(icons.Folder, {
|
|
148
|
-
width: 20,
|
|
149
|
-
height: 20,
|
|
150
|
-
fill: "neutral0"
|
|
151
|
-
}),
|
|
152
|
-
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
|
|
153
|
-
textColor: "neutral0",
|
|
154
|
-
fontWeight: "semiBold",
|
|
155
|
-
children: "Current folder"
|
|
156
|
-
})
|
|
157
|
-
]
|
|
158
|
-
})
|
|
159
|
-
]
|
|
160
|
-
});
|
|
161
|
-
};
|
|
162
|
-
const DropFilesMessageImpl = styledComponents.styled(designSystem.Box)`
|
|
163
|
-
position: fixed;
|
|
164
|
-
bottom: ${({ theme })=>theme.spaces[8]};
|
|
165
|
-
left: 50%;
|
|
166
|
-
transform: translateX(calc(-50% + ${({ $leftContentWidth })=>$leftContentWidth / 2}px));
|
|
167
|
-
display: flex;
|
|
168
|
-
flex-direction: column;
|
|
169
|
-
align-items: center;
|
|
170
|
-
justify-content: center;
|
|
171
|
-
gap: ${({ theme })=>theme.spaces[2]};
|
|
172
|
-
background: ${({ theme })=>theme.colors.primary600};
|
|
173
|
-
padding: ${({ theme })=>theme.spaces[4]} ${({ theme })=>theme.spaces[6]};
|
|
174
|
-
border-radius: ${({ theme })=>theme.borderRadius};
|
|
175
|
-
z-index: 2;
|
|
161
|
+
const HeaderWrapper = styledComponents.styled.div`
|
|
162
|
+
[data-strapi-header] {
|
|
163
|
+
background: ${({ theme })=>theme.colors.neutral0};
|
|
164
|
+
|
|
165
|
+
h1 {
|
|
166
|
+
font-size: 1.8rem;
|
|
167
|
+
}
|
|
168
|
+
}
|
|
176
169
|
`;
|
|
177
170
|
const AssetsPage = ()=>{
|
|
178
171
|
const { formatMessage } = reactIntl.useIntl();
|
|
172
|
+
const { currentFolderId } = useFolderNavigation.useFolderNavigation();
|
|
173
|
+
const { title, itemCount } = useFolderInfo.useFolderInfo(currentFolderId);
|
|
174
|
+
const itemCountLabel = formatMessage({
|
|
175
|
+
id: translations.getTranslationKey('header.content.item-count'),
|
|
176
|
+
defaultMessage: '{count, plural, =1 {# item} other {# items}}'
|
|
177
|
+
}, {
|
|
178
|
+
count: itemCount
|
|
179
|
+
});
|
|
179
180
|
// View state
|
|
180
|
-
const [view, setView] =
|
|
181
|
+
const [view, setView] = strapiAdmin.usePersistentState(constants.localStorageKeys.view, constants.viewOptions.GRID);
|
|
181
182
|
const isGridView = view === constants.viewOptions.GRID;
|
|
182
183
|
// Refs
|
|
183
184
|
const fileInputRef = React.useRef(null);
|
|
184
185
|
const uploadDropZoneRef = React.useRef(null);
|
|
185
186
|
// Upload handlers
|
|
186
|
-
const
|
|
187
|
-
const { _unstableFormatAPIError } = strapiAdmin.useAPIErrorHandler();
|
|
188
|
-
const [uploadFiles] = api.useUploadFilesMutation();
|
|
187
|
+
const [uploadFilesStream] = api.useUploadFilesStreamMutation();
|
|
189
188
|
const uploadFilesToFolder = async (files, folderId)=>{
|
|
190
189
|
if (files.length === 0) return;
|
|
191
190
|
const formData = new FormData();
|
|
191
|
+
const fileInfoArray = [];
|
|
192
192
|
files.forEach((file)=>{
|
|
193
193
|
formData.append('files', file);
|
|
194
|
-
|
|
194
|
+
fileInfoArray.push({
|
|
195
195
|
name: file.name,
|
|
196
196
|
caption: null,
|
|
197
197
|
alternativeText: null,
|
|
198
198
|
folder: folderId
|
|
199
|
-
})
|
|
199
|
+
});
|
|
200
200
|
});
|
|
201
|
+
formData.append('fileInfo', JSON.stringify(fileInfoArray));
|
|
201
202
|
try {
|
|
202
|
-
await
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
id: translations.getTranslationKey('assets.uploaded'),
|
|
207
|
-
defaultMessage: '{number, plural, one {# asset} other {# assets}} uploaded successfully'
|
|
208
|
-
}, {
|
|
209
|
-
number: files.length
|
|
210
|
-
})
|
|
211
|
-
});
|
|
203
|
+
await uploadFilesStream({
|
|
204
|
+
formData,
|
|
205
|
+
totalFiles: files.length
|
|
206
|
+
}).unwrap();
|
|
212
207
|
} catch (error) {
|
|
213
|
-
|
|
214
|
-
toggleNotification({
|
|
215
|
-
type: 'danger',
|
|
216
|
-
message: errorMessage
|
|
217
|
-
});
|
|
208
|
+
// Error is already dispatched to store from the API queryFn
|
|
218
209
|
}
|
|
219
210
|
};
|
|
220
211
|
const handleFileSelect = ()=>{
|
|
@@ -223,12 +214,12 @@ const AssetsPage = ()=>{
|
|
|
223
214
|
const handleFileChange = async (e)=>{
|
|
224
215
|
const files = e.target.files;
|
|
225
216
|
if (files && files.length > 0) {
|
|
226
|
-
await uploadFilesToFolder(Array.from(files),
|
|
217
|
+
await uploadFilesToFolder(Array.from(files), currentFolderId);
|
|
227
218
|
}
|
|
228
219
|
e.target.value = '';
|
|
229
220
|
};
|
|
230
221
|
const handleDrop = async (files)=>{
|
|
231
|
-
await uploadFilesToFolder(files,
|
|
222
|
+
await uploadFilesToFolder(files, currentFolderId);
|
|
232
223
|
};
|
|
233
224
|
return /*#__PURE__*/ jsxRuntime.jsx(UploadDropZoneContext.UploadDropZoneProvider, {
|
|
234
225
|
onDrop: handleDrop,
|
|
@@ -236,6 +227,7 @@ const AssetsPage = ()=>{
|
|
|
236
227
|
ref: uploadDropZoneRef,
|
|
237
228
|
children: /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.Layouts.Root, {
|
|
238
229
|
minHeight: "100vh",
|
|
230
|
+
background: "neutral0",
|
|
239
231
|
children: [
|
|
240
232
|
/*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
|
|
241
233
|
children: /*#__PURE__*/ jsxRuntime.jsx("input", {
|
|
@@ -245,91 +237,101 @@ const AssetsPage = ()=>{
|
|
|
245
237
|
multiple: true
|
|
246
238
|
})
|
|
247
239
|
}),
|
|
248
|
-
/*#__PURE__*/ jsxRuntime.jsx(
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
children: [
|
|
259
|
-
/*#__PURE__*/ jsxRuntime.jsx(designSystem.SimpleMenu, {
|
|
260
|
-
popoverPlacement: "bottom-end",
|
|
261
|
-
variant: "default",
|
|
262
|
-
endIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronDown, {}),
|
|
263
|
-
label: formatMessage({
|
|
264
|
-
id: translations.getTranslationKey('new'),
|
|
265
|
-
defaultMessage: 'New'
|
|
266
|
-
}),
|
|
267
|
-
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
|
|
268
|
-
onSelect: handleFileSelect,
|
|
269
|
-
startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Files, {}),
|
|
270
|
-
children: formatMessage({
|
|
271
|
-
id: translations.getTranslationKey('import-files'),
|
|
272
|
-
defaultMessage: 'Import files'
|
|
273
|
-
})
|
|
274
|
-
})
|
|
275
|
-
}),
|
|
276
|
-
/*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SearchInput, {
|
|
277
|
-
label: formatMessage({
|
|
278
|
-
id: translations.getTranslationKey('search.label'),
|
|
279
|
-
defaultMessage: 'Search for an asset'
|
|
280
|
-
}),
|
|
281
|
-
trackedEvent: "didSearchMediaLibraryElements",
|
|
282
|
-
trackedEventDetails: {
|
|
283
|
-
location: 'upload'
|
|
284
|
-
}
|
|
240
|
+
/*#__PURE__*/ jsxRuntime.jsx(HeaderWrapper, {
|
|
241
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Header, {
|
|
242
|
+
title: `${title} (${itemCountLabel})`,
|
|
243
|
+
primaryAction: /*#__PURE__*/ jsxRuntime.jsx(designSystem.SimpleMenu, {
|
|
244
|
+
popoverPlacement: "bottom-end",
|
|
245
|
+
variant: "default",
|
|
246
|
+
endIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronDown, {}),
|
|
247
|
+
label: formatMessage({
|
|
248
|
+
id: translations.getTranslationKey('new'),
|
|
249
|
+
defaultMessage: 'New'
|
|
285
250
|
}),
|
|
286
|
-
/*#__PURE__*/ jsxRuntime.
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
251
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
|
|
252
|
+
onSelect: handleFileSelect,
|
|
253
|
+
startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Files, {}),
|
|
254
|
+
children: formatMessage({
|
|
255
|
+
id: translations.getTranslationKey('import-files'),
|
|
256
|
+
defaultMessage: 'Import files'
|
|
257
|
+
})
|
|
258
|
+
})
|
|
259
|
+
}),
|
|
260
|
+
subtitle: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
|
|
261
|
+
justifyContent: "space-between",
|
|
262
|
+
alignItems: "center",
|
|
263
|
+
gap: 4,
|
|
264
|
+
width: "100%",
|
|
265
|
+
children: [
|
|
266
|
+
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
|
|
267
|
+
gap: 4,
|
|
268
|
+
alignItems: "center",
|
|
269
|
+
children: "TODO: Filters and search"
|
|
293
270
|
}),
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
}),
|
|
301
|
-
children: [
|
|
302
|
-
/*#__PURE__*/ jsxRuntime.jsx(icons.List, {}),
|
|
303
|
-
formatMessage({
|
|
304
|
-
id: translations.getTranslationKey('view.table'),
|
|
305
|
-
defaultMessage: 'Table view'
|
|
306
|
-
})
|
|
307
|
-
]
|
|
308
|
-
}),
|
|
309
|
-
/*#__PURE__*/ jsxRuntime.jsxs(StyledToggleItem, {
|
|
310
|
-
value: "grid",
|
|
311
|
-
"aria-label": formatMessage({
|
|
312
|
-
id: translations.getTranslationKey('view.grid'),
|
|
313
|
-
defaultMessage: 'Grid view'
|
|
271
|
+
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
|
|
272
|
+
gap: 4,
|
|
273
|
+
alignItems: "center",
|
|
274
|
+
children: [
|
|
275
|
+
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
|
|
276
|
+
children: "TODO: Sort"
|
|
314
277
|
}),
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
278
|
+
/*#__PURE__*/ jsxRuntime.jsxs(StyledToggleGroup, {
|
|
279
|
+
type: "single",
|
|
280
|
+
value: isGridView ? 'grid' : 'table',
|
|
281
|
+
onValueChange: (value)=>value && setView(value === 'grid' ? constants.viewOptions.GRID : constants.viewOptions.TABLE),
|
|
282
|
+
"aria-label": formatMessage({
|
|
283
|
+
id: translations.getTranslationKey('view.switch.label'),
|
|
284
|
+
defaultMessage: 'View options'
|
|
285
|
+
}),
|
|
286
|
+
children: [
|
|
287
|
+
/*#__PURE__*/ jsxRuntime.jsxs(StyledToggleItem, {
|
|
288
|
+
value: "table",
|
|
289
|
+
"aria-label": formatMessage({
|
|
290
|
+
id: translations.getTranslationKey('view.table'),
|
|
291
|
+
defaultMessage: 'Table view'
|
|
292
|
+
}),
|
|
293
|
+
children: [
|
|
294
|
+
/*#__PURE__*/ jsxRuntime.jsx(icons.List, {}),
|
|
295
|
+
formatMessage({
|
|
296
|
+
id: translations.getTranslationKey('view.table'),
|
|
297
|
+
defaultMessage: 'Table view'
|
|
298
|
+
})
|
|
299
|
+
]
|
|
300
|
+
}),
|
|
301
|
+
/*#__PURE__*/ jsxRuntime.jsxs(StyledToggleItem, {
|
|
302
|
+
value: "grid",
|
|
303
|
+
"aria-label": formatMessage({
|
|
304
|
+
id: translations.getTranslationKey('view.grid'),
|
|
305
|
+
defaultMessage: 'Grid view'
|
|
306
|
+
}),
|
|
307
|
+
children: [
|
|
308
|
+
/*#__PURE__*/ jsxRuntime.jsx(icons.GridFour, {}),
|
|
309
|
+
formatMessage({
|
|
310
|
+
id: translations.getTranslationKey('view.grid'),
|
|
311
|
+
defaultMessage: 'Grid view'
|
|
312
|
+
})
|
|
313
|
+
]
|
|
314
|
+
})
|
|
315
|
+
]
|
|
316
|
+
})
|
|
317
|
+
]
|
|
318
|
+
})
|
|
319
|
+
]
|
|
320
|
+
})
|
|
326
321
|
})
|
|
327
322
|
}),
|
|
328
323
|
/*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Content, {
|
|
329
|
-
children: /*#__PURE__*/ jsxRuntime.
|
|
330
|
-
children:
|
|
331
|
-
|
|
332
|
-
|
|
324
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs(UploadDropZone.DropZoneWithOverlay, {
|
|
325
|
+
children: [
|
|
326
|
+
/*#__PURE__*/ jsxRuntime.jsx(UploadDropZone.DropFilesMessage, {
|
|
327
|
+
uploadDropZoneRef: uploadDropZoneRef,
|
|
328
|
+
folderName: title
|
|
329
|
+
}),
|
|
330
|
+
/*#__PURE__*/ jsxRuntime.jsx(AssetsView, {
|
|
331
|
+
view: view,
|
|
332
|
+
folderId: currentFolderId
|
|
333
|
+
})
|
|
334
|
+
]
|
|
333
335
|
})
|
|
334
336
|
})
|
|
335
337
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AssetsPage.js","sources":["../../../../../admin/src/future/pages/Assets/AssetsPage.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ChangeEvent } from 'react';\n\nimport * as ToggleGroup from '@radix-ui/react-toggle-group';\nimport {\n Layouts,\n SearchInput,\n useNotification,\n useAPIErrorHandler,\n} from '@strapi/admin/strapi-admin';\nimport {\n Box,\n Flex,\n Loader,\n MenuItem,\n SimpleMenu,\n Typography,\n VisuallyHidden,\n} from '@strapi/design-system';\nimport { ChevronDown, Files, Folder, GridFour as GridIcon, List } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { usePersistentState } from '../../../hooks/usePersistentState';\nimport { useUploadFilesMutation } from '../../services/api';\nimport { useGetAssetsQuery } from '../../services/assets';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { AssetsGrid } from './components/AssetsGrid';\nimport { AssetsTable } from './components/AssetsTable';\nimport { DropZoneWithOverlay } from './components/DropZone/DropZoneWithOverlay';\nimport {\n UploadDropZoneProvider,\n useUploadDropZone,\n} from './components/DropZone/UploadDropZoneContext';\nimport { localStorageKeys, viewOptions } from './constants';\n\ninterface AssetsViewProps {\n view: number;\n}\n\nconst AssetsView = ({ view }: AssetsViewProps) => {\n const { formatMessage } = useIntl();\n const { data, isLoading, error } = useGetAssetsQuery({ folder: null });\n\n const isGridView = view === viewOptions.GRID;\n const assets = data?.results ?? [];\n\n if (isLoading) {\n return (\n <Flex justifyContent=\"center\" padding={8}>\n <Loader>{formatMessage({ id: 'app.loading', defaultMessage: 'Loading...' })}</Loader>\n </Flex>\n );\n }\n\n if (error) {\n return (\n <Box padding={8}>\n <Typography textColor=\"danger600\">\n {formatMessage({\n id: getTranslationKey('list.assets.error'),\n defaultMessage: 'An error occurred while fetching assets.',\n })}\n </Typography>\n </Box>\n );\n }\n\n if (isGridView) {\n return <AssetsGrid assets={assets} />;\n }\n\n return <AssetsTable assets={assets} />;\n};\n\nconst StyledToggleGroup = styled(ToggleGroup.Root)`\n display: flex;\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n border-radius: ${({ theme }) => theme.borderRadius};\n overflow: hidden;\n`;\n\nconst StyledToggleItem = styled(ToggleGroup.Item)`\n display: flex;\n align-items: center;\n gap: ${({ theme }) => theme.spaces[2]};\n padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};\n border: none;\n background: ${({ theme }) => theme.colors.neutral0};\n color: ${({ theme }) => theme.colors.neutral800};\n cursor: pointer;\n font-size: ${({ theme }) => theme.fontSizes[1]};\n font-weight: ${({ theme }) => theme.fontWeights.semiBold};\n\n &:hover {\n background: ${({ theme }) => theme.colors.neutral100};\n }\n\n &[data-state='on'] {\n background: ${({ theme }) => theme.colors.neutral150};\n }\n\n svg {\n width: 1.6rem;\n height: 1.6rem;\n }\n`;\n\n/**\n * Dropzone items\n */\n\ninterface DropFilesMessageProps {\n uploadDropZoneRef?: React.RefObject<HTMLDivElement>;\n}\n\nconst DropFilesMessage = ({ uploadDropZoneRef }: DropFilesMessageProps) => {\n const { formatMessage } = useIntl();\n const { isDragging } = useUploadDropZone();\n\n // Dropzone message position (relative to main content)\n const [leftContentWidth, setLeftContentWidth] = useState(0);\n\n // Calculate the left content width to position the dropzone message correctly\n useEffect(() => {\n if (!uploadDropZoneRef?.current) return;\n\n const updateRect = () => {\n const rect = uploadDropZoneRef.current?.getBoundingClientRect();\n if (rect) {\n setLeftContentWidth((prev) => (prev !== rect.left ? rect.left : prev));\n }\n };\n\n updateRect();\n const resizeObserver = new ResizeObserver(updateRect);\n resizeObserver.observe(uploadDropZoneRef.current);\n return () => resizeObserver.disconnect();\n }, [uploadDropZoneRef]);\n\n if (!isDragging) return null;\n\n return (\n <DropFilesMessageImpl $leftContentWidth={leftContentWidth}>\n <Typography textColor=\"neutral0\">\n {formatMessage({\n id: getTranslationKey('dropzone.upload.message'),\n defaultMessage: 'Drop here to upload to',\n })}\n </Typography>\n <Flex gap={2} alignItems=\"center\">\n <Folder width={20} height={20} fill=\"neutral0\" />\n <Typography textColor=\"neutral0\" fontWeight=\"semiBold\">\n Current folder{/* TODO: Replace this later with the current folder name */}\n </Typography>\n </Flex>\n </DropFilesMessageImpl>\n );\n};\n\nconst DropFilesMessageImpl = styled(Box)<{ $leftContentWidth: number }>`\n position: fixed;\n bottom: ${({ theme }) => theme.spaces[8]};\n left: 50%;\n transform: translateX(calc(-50% + ${({ $leftContentWidth }) => $leftContentWidth / 2}px));\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: ${({ theme }) => theme.spaces[2]};\n background: ${({ theme }) => theme.colors.primary600};\n padding: ${({ theme }) => theme.spaces[4]} ${({ theme }) => theme.spaces[6]};\n border-radius: ${({ theme }) => theme.borderRadius};\n z-index: 2;\n`;\n\nexport const AssetsPage = () => {\n const { formatMessage } = useIntl();\n\n // View state\n const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);\n const isGridView = view === viewOptions.GRID;\n\n // Refs\n const fileInputRef = useRef<HTMLInputElement>(null);\n const uploadDropZoneRef = useRef<HTMLDivElement>(null);\n\n // Upload handlers\n const { toggleNotification } = useNotification();\n const { _unstableFormatAPIError } = useAPIErrorHandler();\n const [uploadFiles] = useUploadFilesMutation();\n\n const uploadFilesToFolder = async (files: globalThis.File[], folderId: number | null) => {\n if (files.length === 0) return;\n const formData = new FormData();\n files.forEach((file) => {\n formData.append('files', file);\n formData.append(\n 'fileInfo',\n JSON.stringify({\n name: file.name,\n caption: null,\n alternativeText: null,\n folder: folderId,\n })\n );\n });\n try {\n await uploadFiles(formData).unwrap();\n toggleNotification({\n type: 'success',\n message: formatMessage(\n {\n id: getTranslationKey('assets.uploaded'),\n defaultMessage:\n '{number, plural, one {# asset} other {# assets}} uploaded successfully',\n },\n { number: files.length }\n ),\n });\n } catch (error) {\n const errorMessage = _unstableFormatAPIError(error as Error);\n toggleNotification({\n type: 'danger',\n message: errorMessage,\n });\n }\n };\n\n const handleFileSelect = () => {\n fileInputRef.current?.click();\n };\n\n const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {\n const files = e.target.files;\n if (files && files.length > 0) {\n await uploadFilesToFolder(Array.from(files), null);\n }\n e.target.value = '';\n };\n\n const handleDrop = async (files: globalThis.File[]) => {\n await uploadFilesToFolder(files, null);\n };\n\n return (\n <UploadDropZoneProvider onDrop={handleDrop}>\n <Box ref={uploadDropZoneRef}>\n <Layouts.Root minHeight=\"100vh\">\n <VisuallyHidden>\n <input type=\"file\" ref={fileInputRef} onChange={handleFileChange} multiple />\n </VisuallyHidden>\n\n <DropFilesMessage uploadDropZoneRef={uploadDropZoneRef} />\n\n <Layouts.Header\n navigationAction={<Box>TODO: Breadcrumbs</Box>}\n title=\"TODO: Folder location\"\n primaryAction={\n <Flex gap={2}>\n <SimpleMenu\n popoverPlacement=\"bottom-end\"\n variant=\"default\"\n endIcon={<ChevronDown />}\n label={formatMessage({ id: getTranslationKey('new'), defaultMessage: 'New' })}\n >\n <MenuItem onSelect={handleFileSelect} startIcon={<Files />}>\n {formatMessage({\n id: getTranslationKey('import-files'),\n defaultMessage: 'Import files',\n })}\n </MenuItem>\n </SimpleMenu>\n <SearchInput\n label={formatMessage({\n id: getTranslationKey('search.label'),\n defaultMessage: 'Search for an asset',\n })}\n trackedEvent=\"didSearchMediaLibraryElements\"\n trackedEventDetails={{ location: 'upload' }}\n />\n <StyledToggleGroup\n type=\"single\"\n value={isGridView ? 'grid' : 'table'}\n onValueChange={(value) =>\n value && setView(value === 'grid' ? viewOptions.GRID : viewOptions.TABLE)\n }\n aria-label={formatMessage({\n id: getTranslationKey('view.switch.label'),\n defaultMessage: 'View options',\n })}\n >\n <StyledToggleItem\n value=\"table\"\n aria-label={formatMessage({\n id: getTranslationKey('view.table'),\n defaultMessage: 'Table view',\n })}\n >\n <List />\n {formatMessage({\n id: getTranslationKey('view.table'),\n defaultMessage: 'Table view',\n })}\n </StyledToggleItem>\n <StyledToggleItem\n value=\"grid\"\n aria-label={formatMessage({\n id: getTranslationKey('view.grid'),\n defaultMessage: 'Grid view',\n })}\n >\n <GridIcon />\n {formatMessage({\n id: getTranslationKey('view.grid'),\n defaultMessage: 'Grid view',\n })}\n </StyledToggleItem>\n </StyledToggleGroup>\n </Flex>\n }\n />\n\n <Layouts.Content>\n <DropZoneWithOverlay>\n <AssetsView view={view} />\n </DropZoneWithOverlay>\n </Layouts.Content>\n </Layouts.Root>\n </Box>\n </UploadDropZoneProvider>\n );\n};\n"],"names":["AssetsView","view","formatMessage","useIntl","data","isLoading","error","useGetAssetsQuery","folder","isGridView","viewOptions","GRID","assets","results","_jsx","Flex","justifyContent","padding","Loader","id","defaultMessage","Box","Typography","textColor","getTranslationKey","AssetsGrid","AssetsTable","StyledToggleGroup","styled","ToggleGroup","Root","theme","colors","neutral200","borderRadius","StyledToggleItem","Item","spaces","neutral0","neutral800","fontSizes","fontWeights","semiBold","neutral100","neutral150","DropFilesMessage","uploadDropZoneRef","isDragging","useUploadDropZone","leftContentWidth","setLeftContentWidth","useState","useEffect","current","updateRect","rect","getBoundingClientRect","prev","left","resizeObserver","ResizeObserver","observe","disconnect","_jsxs","DropFilesMessageImpl","$leftContentWidth","gap","alignItems","Folder","width","height","fill","fontWeight","primary600","AssetsPage","setView","usePersistentState","localStorageKeys","fileInputRef","useRef","toggleNotification","useNotification","_unstableFormatAPIError","useAPIErrorHandler","uploadFiles","useUploadFilesMutation","uploadFilesToFolder","files","folderId","length","formData","FormData","forEach","file","append","JSON","stringify","name","caption","alternativeText","unwrap","type","message","number","errorMessage","handleFileSelect","click","handleFileChange","e","target","Array","from","value","handleDrop","UploadDropZoneProvider","onDrop","ref","Layouts","minHeight","VisuallyHidden","input","onChange","multiple","Header","navigationAction","title","primaryAction","SimpleMenu","popoverPlacement","variant","endIcon","ChevronDown","label","MenuItem","onSelect","startIcon","Files","SearchInput","trackedEvent","trackedEventDetails","location","onValueChange","TABLE","aria-label","List","GridIcon","Content","DropZoneWithOverlay"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AssetsPage.js","sources":["../../../../../admin/src/future/pages/Assets/AssetsPage.tsx"],"sourcesContent":["import { useRef, useCallback, type ChangeEvent } from 'react';\n\nimport * as ToggleGroup from '@radix-ui/react-toggle-group';\nimport { Layouts, useElementOnScreen, usePersistentState } from '@strapi/admin/strapi-admin';\nimport {\n Box,\n Flex,\n Loader,\n MenuItem,\n SimpleMenu,\n Typography,\n VisuallyHidden,\n} from '@strapi/design-system';\nimport { ChevronDown, Files, GridFour as GridIcon, List } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useUploadFilesStreamMutation } from '../../services/api';\nimport { useGetFoldersQuery } from '../../services/folders';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { AssetsGrid } from './components/AssetsGrid';\nimport { AssetsTable } from './components/AssetsTable';\nimport { DropFilesMessage, DropZoneWithOverlay } from './components/DropZone/UploadDropZone';\nimport { UploadDropZoneProvider } from './components/DropZone/UploadDropZoneContext';\nimport { localStorageKeys, viewOptions } from './constants';\nimport { useFolderInfo } from './hooks/useFolderInfo';\nimport { useFolderNavigation } from './hooks/useFolderNavigation';\nimport { useInfiniteAssets } from './hooks/useInfiniteAssets';\n\nimport type { UploadFileInfo } from '../../../../../shared/contracts/files';\n\nconst INTERSECTION_OPTIONS: IntersectionObserverInit = { threshold: 0.1 };\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsView\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetsViewProps {\n view: number;\n folderId: number | null;\n}\n\nconst AssetsView = ({ view, folderId }: AssetsViewProps) => {\n const { formatMessage } = useIntl();\n const {\n assets,\n isLoading: isLoadingAssets,\n isFetchingMore,\n hasNextPage,\n fetchNextPage,\n error,\n } = useInfiniteAssets({ folder: folderId });\n const { data: folders = [], isLoading: isLoadingFolders } = useGetFoldersQuery({\n parentId: folderId,\n });\n\n const isGridView = view === viewOptions.GRID;\n const isLoading = isLoadingAssets || isLoadingFolders;\n\n const loadMoreRef = useElementOnScreen<HTMLDivElement>(\n useCallback(\n (isVisible) => {\n if (isVisible && hasNextPage && !isFetchingMore) {\n fetchNextPage();\n }\n },\n [hasNextPage, isFetchingMore, fetchNextPage]\n ),\n INTERSECTION_OPTIONS\n );\n\n if (isLoading) {\n return (\n <Flex justifyContent=\"center\" padding={8}>\n <Loader>{formatMessage({ id: 'app.loading', defaultMessage: 'Loading...' })}</Loader>\n </Flex>\n );\n }\n\n if (error) {\n return (\n <Box padding={8}>\n <Typography textColor=\"danger600\">\n {formatMessage({\n id: getTranslationKey('list.assets.error'),\n defaultMessage: 'An error occurred while fetching assets.',\n })}\n </Typography>\n </Box>\n );\n }\n\n if (folders.length === 0 && assets.length === 0) {\n return (\n <Box padding={8}>\n <Typography textColor=\"neutral600\">\n {formatMessage({\n id: 'app.components.EmptyStateLayout.content-document',\n defaultMessage: 'No content found',\n })}\n </Typography>\n </Box>\n );\n }\n return (\n <>\n {isGridView ? (\n <AssetsGrid folders={folders} assets={assets} />\n ) : (\n <AssetsTable assets={assets} folders={folders} />\n )}\n <div ref={loadMoreRef} style={{ height: 1 }} />\n {isFetchingMore && (\n <Flex justifyContent=\"center\" padding={4}>\n <Loader>\n {formatMessage({\n id: getTranslationKey('list.assets.loading-more'),\n defaultMessage: 'Loading more assets...',\n })}\n </Loader>\n </Flex>\n )}\n </>\n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsPage\n * -----------------------------------------------------------------------------------------------*/\n\nconst StyledToggleGroup = styled(ToggleGroup.Root)`\n display: flex;\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n border-radius: ${({ theme }) => theme.borderRadius};\n overflow: hidden;\n`;\n\nconst StyledToggleItem = styled(ToggleGroup.Item)`\n display: flex;\n align-items: center;\n gap: ${({ theme }) => theme.spaces[2]};\n padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};\n border: none;\n background: ${({ theme }) => theme.colors.neutral0};\n color: ${({ theme }) => theme.colors.neutral800};\n cursor: pointer;\n font-size: ${({ theme }) => theme.fontSizes[1]};\n font-weight: ${({ theme }) => theme.fontWeights.semiBold};\n\n &:hover {\n background: ${({ theme }) => theme.colors.primary100};\n }\n\n &[data-state='on'] {\n background: ${({ theme }) => theme.colors.neutral150};\n }\n\n svg {\n width: 1.6rem;\n height: 1.6rem;\n }\n`;\n\nconst HeaderWrapper = styled.div`\n [data-strapi-header] {\n background: ${({ theme }) => theme.colors.neutral0};\n\n h1 {\n font-size: 1.8rem;\n }\n }\n`;\n\nexport const AssetsPage = () => {\n const { formatMessage } = useIntl();\n\n const { currentFolderId } = useFolderNavigation();\n const { title, itemCount } = useFolderInfo(currentFolderId);\n const itemCountLabel = formatMessage(\n {\n id: getTranslationKey('header.content.item-count'),\n defaultMessage: '{count, plural, =1 {# item} other {# items}}',\n },\n { count: itemCount }\n );\n\n // View state\n const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);\n const isGridView = view === viewOptions.GRID;\n\n // Refs\n const fileInputRef = useRef<HTMLInputElement>(null);\n const uploadDropZoneRef = useRef<HTMLDivElement>(null);\n\n // Upload handlers\n const [uploadFilesStream] = useUploadFilesStreamMutation();\n\n const uploadFilesToFolder = async (files: globalThis.File[], folderId: number | null) => {\n if (files.length === 0) return;\n\n const formData = new FormData();\n const fileInfoArray: UploadFileInfo[] = [];\n\n files.forEach((file) => {\n formData.append('files', file);\n fileInfoArray.push({\n name: file.name,\n caption: null,\n alternativeText: null,\n folder: folderId,\n });\n });\n\n formData.append('fileInfo', JSON.stringify(fileInfoArray));\n try {\n await uploadFilesStream({ formData, totalFiles: files.length }).unwrap();\n } catch (error) {\n // Error is already dispatched to store from the API queryFn\n }\n };\n\n const handleFileSelect = () => {\n fileInputRef.current?.click();\n };\n\n const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {\n const files = e.target.files;\n if (files && files.length > 0) {\n await uploadFilesToFolder(Array.from(files), currentFolderId);\n }\n e.target.value = '';\n };\n\n const handleDrop = async (files: globalThis.File[]) => {\n await uploadFilesToFolder(files, currentFolderId);\n };\n\n return (\n <UploadDropZoneProvider onDrop={handleDrop}>\n <Box ref={uploadDropZoneRef}>\n <Layouts.Root minHeight=\"100vh\" background=\"neutral0\">\n <VisuallyHidden>\n <input type=\"file\" ref={fileInputRef} onChange={handleFileChange} multiple />\n </VisuallyHidden>\n\n <HeaderWrapper>\n <Layouts.Header\n title={`${title} (${itemCountLabel})`}\n primaryAction={\n <SimpleMenu\n popoverPlacement=\"bottom-end\"\n variant=\"default\"\n endIcon={<ChevronDown />}\n label={formatMessage({ id: getTranslationKey('new'), defaultMessage: 'New' })}\n >\n <MenuItem onSelect={handleFileSelect} startIcon={<Files />}>\n {formatMessage({\n id: getTranslationKey('import-files'),\n defaultMessage: 'Import files',\n })}\n </MenuItem>\n </SimpleMenu>\n }\n subtitle={\n <Flex justifyContent=\"space-between\" alignItems=\"center\" gap={4} width=\"100%\">\n <Flex gap={4} alignItems=\"center\">\n TODO: Filters and search\n </Flex>\n\n <Flex gap={4} alignItems=\"center\">\n <Box>TODO: Sort</Box>\n <StyledToggleGroup\n type=\"single\"\n value={isGridView ? 'grid' : 'table'}\n onValueChange={(value) =>\n value && setView(value === 'grid' ? viewOptions.GRID : viewOptions.TABLE)\n }\n aria-label={formatMessage({\n id: getTranslationKey('view.switch.label'),\n defaultMessage: 'View options',\n })}\n >\n <StyledToggleItem\n value=\"table\"\n aria-label={formatMessage({\n id: getTranslationKey('view.table'),\n defaultMessage: 'Table view',\n })}\n >\n <List />\n {formatMessage({\n id: getTranslationKey('view.table'),\n defaultMessage: 'Table view',\n })}\n </StyledToggleItem>\n <StyledToggleItem\n value=\"grid\"\n aria-label={formatMessage({\n id: getTranslationKey('view.grid'),\n defaultMessage: 'Grid view',\n })}\n >\n <GridIcon />\n {formatMessage({\n id: getTranslationKey('view.grid'),\n defaultMessage: 'Grid view',\n })}\n </StyledToggleItem>\n </StyledToggleGroup>\n </Flex>\n </Flex>\n }\n />\n </HeaderWrapper>\n\n <Layouts.Content>\n <DropZoneWithOverlay>\n <DropFilesMessage uploadDropZoneRef={uploadDropZoneRef} folderName={title} />\n <AssetsView view={view} folderId={currentFolderId} />\n </DropZoneWithOverlay>\n </Layouts.Content>\n </Layouts.Root>\n </Box>\n </UploadDropZoneProvider>\n );\n};\n"],"names":["INTERSECTION_OPTIONS","threshold","AssetsView","view","folderId","formatMessage","useIntl","assets","isLoading","isLoadingAssets","isFetchingMore","hasNextPage","fetchNextPage","error","useInfiniteAssets","folder","data","folders","isLoadingFolders","useGetFoldersQuery","parentId","isGridView","viewOptions","GRID","loadMoreRef","useElementOnScreen","useCallback","isVisible","_jsx","Flex","justifyContent","padding","Loader","id","defaultMessage","Box","Typography","textColor","getTranslationKey","length","_jsxs","_Fragment","AssetsGrid","AssetsTable","div","ref","style","height","StyledToggleGroup","styled","ToggleGroup","Root","theme","colors","neutral200","borderRadius","StyledToggleItem","Item","spaces","neutral0","neutral800","fontSizes","fontWeights","semiBold","primary100","neutral150","HeaderWrapper","AssetsPage","currentFolderId","useFolderNavigation","title","itemCount","useFolderInfo","itemCountLabel","count","setView","usePersistentState","localStorageKeys","fileInputRef","useRef","uploadDropZoneRef","uploadFilesStream","useUploadFilesStreamMutation","uploadFilesToFolder","files","formData","FormData","fileInfoArray","forEach","file","append","push","name","caption","alternativeText","JSON","stringify","totalFiles","unwrap","handleFileSelect","current","click","handleFileChange","e","target","Array","from","value","handleDrop","UploadDropZoneProvider","onDrop","Layouts","minHeight","background","VisuallyHidden","input","type","onChange","multiple","Header","primaryAction","SimpleMenu","popoverPlacement","variant","endIcon","ChevronDown","label","MenuItem","onSelect","startIcon","Files","subtitle","alignItems","gap","width","onValueChange","TABLE","aria-label","List","GridIcon","Content","DropZoneWithOverlay","DropFilesMessage","folderName"],"mappings":"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"}
|