vikunja/frontend
Archived
6
39
Fork 48
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feature/projects-all-the-way-down #3323

Merged
konrad merged 123 commits from feature/projects-all-the-way-down into main 2023-05-30 10:09:40 +00:00
Conversation 16 Commits 123 Files Changed 85 +4 -9
1 changed files with 4 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d85be26761 - Show all commits

13
src/components/home/ProjectsNavigationWrapper.vue
View File

@ -1,10 +1,10 @@
<template>
<nav class="menu" v-if="favoriteProjects">
dpschen commented 2023-04-01 12:53:10 +00:00
Outdated
Review
Copy Link

Didn't check / thought: I think to remember that menu is a class also coming from bulma.

If that's the case: does that mean that we pass these styles down here? Could we instead add the menu class inside ProjectsNavigation or wouldn't that work because of the recurrsion?

Didn't check / thought: I think to remember that `menu` is a class also coming from bulma. If that's the case: does that mean that we pass these styles down here? Could we instead add the menu class inside ProjectsNavigation or wouldn't that work because of the recurrsion?
konrad commented 2023-04-01 14:53:05 +00:00
Outdated
Review
Copy Link

Yes, .menu is a class from bulma.

does that mean that we pass these styles down here? Could we instead add the menu class inside ProjectsNavigation or wouldn't that work because of the recurrsion?

You mean adding the class into the styles definition of the ProjectsNavigation component?

Yes, `.menu` is a class from bulma. > does that mean that we pass these styles down here? Could we instead add the menu class inside ProjectsNavigation or wouldn't that work because of the recurrsion? You mean adding the class into the styles definition of the `ProjectsNavigation` component?
<ProjectsNavigation v-model="favoriteProjects" :can-edit-order="false"/>
<ProjectsNavigation :model-value="favoriteProjects" :can-edit-order="false"/>
</nav>
<nav class="menu">
<ProjectsNavigation v-model="projects" :can-edit-order="true"/>
<ProjectsNavigation :model-value="projects" :can-edit-order="true"/>
</nav>
</template>
@ -17,13 +17,8 @@ const projectStore = useProjectStore()
await projectStore.loadProjects()
dpschen commented 2023-04-01 17:03:55 +00:00
Outdated
Review
Copy Link

Call this in App.vue and add a isLoadingPromise that contains the returned promise of the loadProjects function to the projectStore which we then can await here instead.

Call this in `App.vue` and add a `isLoadingPromise` that contains the returned promise of the `loadProjects` function to the projectStore which we then can await here instead.
konrad commented 2023-04-01 19:50:42 +00:00
Outdated
Review
Copy Link

What would be the advantage of this? I feel like this would be a lot more complicated.

What would be the advantage of this? I feel like this would be a lot more complicated.
dpschen commented 2023-04-01 21:59:48 +00:00
Outdated
Review
Copy Link

The loading of the projects would happen much earlier in the request chain.
Since they are an async dependency the optimal time to request the server would be the moment we know that we have are authenticated.
So I guess it Shouldn't be App but maybe contentAuth.

That's also the reason why we load all labels there.

The loading of the projects would happen much earlier in the request chain. Since they are an async dependency the optimal time to request the server would be the moment we know that we have are authenticated. So I guess it Shouldn't be App but maybe contentAuth. That's also the reason why we [load all labels there](https://kolaente.dev/vikunja/frontend/src/commit/74d688b8d20838b2e0dbbe47e04ae0305e48ec6e/src/components/home/contentAuth.vue#L117-L118).
konrad commented 2023-04-02 12:53:58 +00:00
Outdated
Review
Copy Link

I've now moved it to contentAuth but am using the isLoading property of the project store to show the loading state. That means I can't use the Suspense component, but the loading property already exists and is populated, might as well use it.

I've now moved it to `contentAuth` but am using the `isLoading` property of the project store to show the loading state. That means I can't use the `Suspense` component, but the loading property already exists and is populated, might as well use it.
dpschen commented 2023-04-02 15:08:50 +00:00
Outdated
Review
Copy Link

That makes sense.
Now ProjectsNavigationWrapper.vue is so simple that it doesn't make sense to have it as dedicated component. The reason why it was created was for the Suspense, right?

That makes sense. Now `ProjectsNavigationWrapper.vue` is so simple that it doesn't make sense to have it as dedicated component. The reason why it was created was for the `Suspense`, right?
konrad commented 2023-04-02 15:15:03 +00:00
Outdated
Review
Copy Link

Yes, I created it only to use it with Suspense. Should I include its contents back into navigation?

Yes, I created it only to use it with `Suspense`. Should I include its contents back into `navigation`?
👍 1
dpschen commented 2023-04-02 15:16:04 +00:00
Outdated
Review
Copy Link

I think that would be better now. Sry for the back and forth.

I think that would be better now. Sry for the back and forth.
konrad commented 2023-04-02 15:21:28 +00:00
Outdated
Review
Copy Link

No worries, changed it back.

No worries, changed it back.
const projects = computed({
get() {
return projectStore.notArchivedRootProjects
.sort((a, b) => a.position - b.position)
},
set() { }, // Vue will complain about the component not being writable - but we never need to write here. The setter is only here to silence the warning.
})
const projects = computed(() => projectStore.notArchivedRootProjects
konrad marked this conversation as resolved Outdated
dpschen commented 2023-03-29 15:46:45 +00:00
Outdated
Review
Copy Link

Non archived root projects seems like something that the store should provide as computed.

Non archived root projects seems like something that the store should provide as computed.
konrad commented 2023-04-01 09:15:45 +00:00
Outdated
Review
Copy Link

Done

Done
.sort((a, b) => a.position - b.position))
const favoriteProjects = computed(() => projectStore.favoriteProjects
.sort((a, b) => a.position - b.position))
</script>