fix: folder tree selection after any action in main content#59359
fix: folder tree selection after any action in main content#59359mykh-hailo wants to merge 1 commit intonextcloud:masterfrom
Conversation
| const isFolderTreeNode = computed(() => props.view.id.startsWith(`${folderTreeId}::`)) | ||
| const isDirectoryActive = computed(() => { | ||
| if (!isFolderTreeNode.value) { | ||
| return false | ||
| } | ||
|
|
||
| const currentView = String(route.params?.view ?? '') | ||
| const currentDir = normalizeDir(route.query?.dir) | ||
| const viewDir = normalizeDir(props.view.params?.dir) | ||
|
|
||
| return currentView === folderTreeId && currentDir === viewDir | ||
| }) |
There was a problem hiding this comment.
Can't really say I'm happy to see custom view code into a global component, but I don't really see a better way, that's correct yeah 🤔
There was a problem hiding this comment.
Seems like a router issue / design problem.
Because the URL is bound to active file not active folder (/files/ACTIVEFILE?dir=ACTIVEFOLDER vs /files/ACTIVEFOLDER?file=ACTIVEFILE)
So this happens because we se the to of the view to /files/FOLDERID right?
Does it work if we instead just use "additional params" and use the dir param?
There was a problem hiding this comment.
@susnux I update some codes to make tree view selection works properly as expected.
For a technical overview, I have the FolderNavigationListItem to be active according to dir parameter of the route.
I'd appreciate it if you review and share any opinion on it.
86139a8 to
8306091
Compare
8e5c85f to
a7172a3
Compare
|
@susnux I updated the code with the latest master branch. |
aaf8ec9 to
f7243b8
Compare
a43ee10 to
be24676
Compare
be24676 to
69fe46e
Compare
69fe46e to
7cc4c09
Compare
7cc4c09 to
339d4f9
Compare
|
Hello there, We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process. Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6 Thank you for contributing to Nextcloud and we hope to hear from you soon! (If you believe you should not receive this message, you can add yourself to the blocklist.) |
susnux
left a comment
There was a problem hiding this comment.
I do not think we should pull in any logic specific to some views into this component.
Views should define what they need and the files app should just display them without knowledge of the internals of any view.
That we already have pulled in foldertree here is a pity and we should fix that properly.
For this problem here I think the proper solution is to find the really active view and not rely on the navigation component. Meaning we should in the navigation component calculate the active view entry and then manually set it as active.
Something like this (and then pass it down to the navigation list items):
// in files navigation
const allViews = useViews()
const route = useRoute()
const currentViewId = computed(() => route?.params?.view || 'files')
// new code
const currentActiveNavigation = computed(() => {
// all views matching current id (either by their id or their navigation params)
const views = allViews.value.filter((view) => view.id === currentViewId.value || view.params?.view === currentViewId.value)
// all views that have not only view id matching but also all of their params
const matchingParams = views.filter((view) => view.params
&& Object.entries(view.params).every(([key, value]) => {
if (key in route.params) {
return route.params[key] === value
}
return route.query[key] === value
}))
// ensure that the one with most params is the first (most specific route)
.sort((a, b) => Object.keys(b.params!).length - Object.keys(a.params!).length)
return matchingParams[0] ?? views[0]!
})14d8201 to
ce67cec
Compare
|
@susnux I updated the code for you comment. |
ce67cec to
9dd4501
Compare
|
@susnux , Can you check this PR please? |
9dd4501 to
dfa407c
Compare
14d8201 to
f95e60b
Compare
|
@susnux I'd appreciate it if you can review this PR. |
| const currentNavigationView = computed(() => { | ||
| const routeDir = typeof route.query?.dir === 'string' ? route.query.dir : undefined | ||
| if (routeDir) { | ||
| const matchingView = allViews.value.find((view) => typeof view.params?.dir === 'string' && isSamePath(view.params.dir, routeDir)) | ||
| if (matchingView) { | ||
| return matchingView.id | ||
| } | ||
| return undefined | ||
| } | ||
|
|
||
| return route?.params?.view || 'files' | ||
| }) |
There was a problem hiding this comment.
There could be multiple matches so we need to find the best match:
| const currentNavigationView = computed(() => { | |
| const routeDir = typeof route.query?.dir === 'string' ? route.query.dir : undefined | |
| if (routeDir) { | |
| const matchingView = allViews.value.find((view) => typeof view.params?.dir === 'string' && isSamePath(view.params.dir, routeDir)) | |
| if (matchingView) { | |
| return matchingView.id | |
| } | |
| return undefined | |
| } | |
| return route?.params?.view || 'files' | |
| }) | |
| const currentNavigationView = computed(() => { | |
| const views = allViews.value.filter((view) => view.id === currentViewId.value | |
| || view.params?.view === currentViewId.value) | |
| const matchingParams = views.filter((view) => view.params | |
| && Object.entries(view.params).every(([key, value]) => { | |
| if (key in route.params) { | |
| return route.params[key] === value | |
| } | |
| return route.query[key] === value | |
| })) | |
| .sort((a, b) => Object.keys(b.params!).length - Object.keys(a.params!).length) | |
| // if we have a full match use that | |
| if (matchingParams.length > 0) { | |
| return matchingParams[0] | |
| } | |
| // otherwise check if at least view + dir matches | |
| const matchingDir = views.find((view) => view.params?.dir === route.query.dir) | |
| if (matchingDir) { | |
| return matchingDir | |
| } | |
| // finally fallback to the parent view | |
| return views.find((view) => view.id === currentViewId.value)! | |
| }) |
susnux
left a comment
There was a problem hiding this comment.
Testing this showed that there are some cases where multiple views match - but its only possible for one view to be active.
So the logic needs to be extended a bit.
Also while passing this down using props is ok, it might be cleaner to just use provide and inject instead?
11ff813 to
ad4f750
Compare
|
@susnux , I updated the code for your comment, I 'd appreciate it if you have time to review it again. |
|
@susnux can you review this PR please? |
Signed-off-by: mykh-hailo <kristianderonta0205@gmail.com>
ad4f750 to
f1b4dc7
Compare
|
@susnux can you review this PR please? |
Summary
his PR improves UI behavior and layout consistency in file navigation.
It fixes incorrect selection behavior in the Files left sidebar for folder-tree entries.
Checklist
3. to review, feature component)stable32)AI (if applicable)