Skip to content

Commit a23c459

Browse files
jriefjrief
committed
inodes can be sorted explicitly
1 parent ae28190 commit a23c459

File tree

15 files changed

+387
-133
lines changed

15 files changed

+387
-133
lines changed

‎client/admin/FolderAdmin.tsx‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -200,19 +200,35 @@ export default function FolderAdmin() {
200200
const sourceFolderId = active.data.current.folderId;
201201
let inodes = columnRefs[sourceFolderId].current?.inodes ?? [];
202202
if (over) {
203-
let [what, targetFolderId] = over.id.split(':');
204-
targetFolderId = targetFolderId === 'parent' ? settings.parent_id : targetFolderId;
205-
if (!draggedInodes.some(inode => [inode.id, inode.parent].includes(targetFolderId))) {
203+
let [what, targetInodeId, targetFolderId] = over.id.split(':');
204+
if (targetFolderId === undefined) {
205+
targetFolderId = targetInodeId === 'parent' ? settings.parent_id : targetInodeId;
206+
}
207+
if (!draggedInodes.some(inode => [inode.id, inode.parent].includes(targetInodeId))) {
206208
overlayRef.current.hidden = true;
207-
if (what === 'download') {
208-
downloadFiles(draggedInodes);
209-
setTimeout(() => {
210-
overlayRef.current.hidden = false;
211-
setDraggedInodes([]);
212-
}, 1000);
213-
return;
209+
let action: string;
210+
switch (what) {
211+
case 'download':
212+
downloadFiles(draggedInodes);
213+
setTimeout(() => {
214+
overlayRef.current.hidden = false;
215+
setDraggedInodes([]);
216+
}, 1000);
217+
return;
218+
case 'folder': case 'column': case 'tab':
219+
action = 'move';
220+
break;
221+
case 'discard':
222+
action = 'delete';
223+
break;
224+
case 'reorder':
225+
action = 'reorder';
226+
break;
227+
default:
228+
console.error(`Unknown drop target: ${what}`);
229+
return;
214230
}
215-
let fetchUrl = `${settings.base_url}${settings.folder_id}/${what === 'discard' ? 'delete' : 'move'}`;
231+
let fetchUrl = `${settings.base_url}${settings.folder_id}/${action}`;
216232
const response = await fetch(fetchUrl, {
217233
method: 'POST',
218234
headers: {
@@ -221,20 +237,24 @@ export default function FolderAdmin() {
221237
},
222238
body: JSON.stringify({
223239
inode_ids: draggedInodes.map(inode => inode.id),
224-
target_folder: targetFolderId,
240+
target_id: targetInodeId,
225241
}),
226242
});
227243
if (response.ok) {
228244
const body = await response.json();
229245
if (body.inodes && columnRefs[targetFolderId]?.current) {
230-
const inodes = body.inodes.map(inode => ({...inode, elementRef: createRef()}));
231-
columnRefs[targetFolderId].current.setInodes(inodes);
246+
const targetInodes = body.inodes.map(inode => ({...inode, elementRef: createRef()}));
247+
columnRefs[targetFolderId].current.setInodes(targetInodes);
248+
if (sourceFolderId === targetFolderId) {
249+
inodes = targetInodes;
250+
}
232251
}
233252
if (body.favorite_folders) {
234253
folderTabsRef.current.setFavoriteFolders(body.favorite_folders);
235254
}
236-
inodes = inodes.filter(inode => !inode.dragged);
237-
columnRefs[sourceFolderId].current.setInodes(inodes);
255+
if (sourceFolderId !== targetFolderId) {
256+
inodes = inodes.filter(inode => !inode.dragged);
257+
}
238258
} else if (response.status === 409) {
239259
alert(await response.text());
240260
} else {

‎client/admin/Item.tsx‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import React, {lazy, Suspense, useContext, useEffect, useMemo, useState} from 'react';
22
import {useDraggable, useDroppable} from '@dnd-kit/core';
33
import FinderSettings from './FinderSettings';
4+
import DroppableArea from './DroppableArea';
5+
import {useSearchParam} from './SearchField';
6+
import {useSorting} from '../common/SortingOptions';
7+
import {useFilter} from '../common/FilterByLabel';
48
import FigureLabels from '../common/FigureLabels';
9+
import {Tooltip, TooltipContent, TooltipTrigger} from "../common/Tooltip";
510

611

712
const dateTimeFormatter = new Intl.DateTimeFormat(
813
navigator.language,
914
{timeStyle: 'short', dateStyle: 'short'} as Intl.DateTimeFormatOptions,
1015
);
1116

17+
1218
export function DraggableItem(props) {
1319
const {
1420
attributes,
@@ -20,6 +26,24 @@ export function DraggableItem(props) {
2026
disabled: props.disabled,
2127
});
2228
const [event, setEvent] = useState<PointerEvent>(null);
29+
const [sorting] = useSorting();
30+
const [filter] = useFilter();
31+
const [searchQuery] = useSearchParam('q');
32+
const ReOrdering = useMemo(() => {
33+
return (props) => {
34+
if (searchQuery || sorting || filter.some(v => v))
35+
return <div className="reordering"></div>;
36+
return (
37+
<DroppableArea
38+
id={`reorder:${props.id}:${props.folderId}`}
39+
dragging={props.dragging}
40+
className="reordering"
41+
>
42+
<div></div>
43+
</DroppableArea>
44+
);
45+
};
46+
}, []);
2347

2448
useEffect(() => {
2549
if (!event)
@@ -73,6 +97,7 @@ export function DraggableItem(props) {
7397
<div ref={setNodeRef} {...listeners} {...attributes}>
7498
{props.children}
7599
</div>
100+
<ReOrdering {...props}></ReOrdering>
76101
</li>
77102
);
78103
}
@@ -164,7 +189,7 @@ export function ListItem(props) {
164189
}
165190

166191
switch (props.layout) {
167-
case 'tiles': case 'mosaic':
192+
case 'tiles':
168193
return (
169194
<figure className="figure">
170195
<FigBody {...props}>
@@ -179,6 +204,21 @@ export function ListItem(props) {
179204
</figcaption>
180205
</figure>
181206
);
207+
case 'mosaic':
208+
return (
209+
<Tooltip>
210+
<TooltipTrigger>
211+
<div className="figure">
212+
<FigBody {...props}>
213+
<FigureLabels labels={props.labels}>
214+
<img src={props.thumbnail_url} {...props.listeners} {...props.attributes} />
215+
</FigureLabels>
216+
</FigBody>
217+
</div>
218+
</TooltipTrigger>
219+
<TooltipContent>{props.name}</TooltipContent>
220+
</Tooltip>
221+
);
182222
case 'list':
183223
return (<>
184224
<div className="figure">

‎client/admin/SearchField.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {Tooltip, TooltipTrigger, TooltipContent} from '../common/Tooltip';
55
import SearchIcon from '../icons/search.svg';
66

77

8-
function useSearchParam(key) : [string, (value: string) => any] {
8+
export function useSearchParam(key) : [string, (value: string) => any] {
99
const params = new URLSearchParams(window.location.search);
1010
const [value, setValue] = useState(
1111
params.get(key) || ''

‎client/common/FilterByLabel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import DropDownMenu from './DropDownMenu';
33
import {useCookie} from './Storage';
44
import FilterIcon from '../icons/filter.svg';
55

6-
const useFilter = () => useCookie('django-finder-filter', []);
6+
export const useFilter = () => useCookie('django-finder-filter', []);
77

88

99
export default function FilterByLabel(props: any) {

‎client/common/SortingOptions.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ import React from 'react';
22
import DropDownMenu from '../common/DropDownMenu';
33
import {useCookie} from '../common/Storage';
44
import SortingIcon from '../icons/sorting.svg';
5+
import SortNumberIcon from '../icons/sort-number.svg';
56
import SortDescIcon from '../icons/sort-desc.svg';
67
import SortAscIcon from '../icons/sort-asc.svg';
78

89

9-
const useSorting = () => useCookie('django-finder-sorting', '');
10+
export const useSorting = () => useCookie('django-finder-sorting', '');
1011

1112

1213
export default function SortingOptions(props: any) {
@@ -37,10 +38,10 @@ export default function SortingOptions(props: any) {
3738
root={props.root}
3839
>
3940
<li {...getItemProps('')}>
40-
<span>{gettext("Unsorted")}</span>
41+
<SortNumberIcon /><span>{gettext("Explicit")}</span>
4142
</li>
4243
<li {...getItemProps('name_asc')}>
43-
<SortDescIcon/><span>{gettext("Name")}</span>
44+
<SortDescIcon /><span>{gettext("Name")}</span>
4445
</li>
4546
<li {...getItemProps('name_desc')}>
4647
<SortAscIcon /><span>{gettext("Name")}</span>

‎client/icons/sort-number.svg‎

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)